码农齐齐齐
2022-09-07 c7a060b8465dfbb35bf307aa975ac74e2c665ec1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<template>
  <!-- 侧边导航栏 -->
  <el-aside width="200px">
    <h2 class="siderbar-title">遂昌执法平台</h2>
    <el-scrollbar>
      <!-- 路由 -->
      <el-menu router class="el-menu-vertical" :default-active="$route.path">
        <!-- 视频巡查 -->
        <el-submenu index="/home/video">
          <template slot="title">
            <span slot="prefix" class="icon-padding">
              <svg-icon icon-class="video"></svg-icon>
            </span>
            <span slot="title">视频巡查</span>
          </template>
          <el-menu-item index="/home/video">视频巡查</el-menu-item>
        </el-submenu>
        <!-- 智能巡查 -->
        <el-submenu index="/admin/article1">
          <template slot="title">
            <span slot="prefix" class="icon-padding">
              <svg-icon icon-class="intelligence"></svg-icon>
            </span>
            <span>智能巡查</span>
          </template>
          <el-menu-item index="/admin/article/add">预警研判</el-menu-item>
          <el-menu-item index="/admin/article">违规检索</el-menu-item>
          <el-menu-item index="/admin/article">趋势分析</el-menu-item>
          <el-menu-item index="/admin/article">数据统计</el-menu-item>
          <el-menu-item index="/admin/article">运行报告</el-menu-item>
        </el-submenu>
        <!-- 运营管理 -->
        <el-submenu index="/admin/article2">
          <template slot="title">
            <span slot="prefix" class="icon-padding">
              <svg-icon icon-class="operate"></svg-icon>
            </span>
            <span>运营管理</span>
          </template>
          <el-menu-item index="/admin/article/add">执法管理</el-menu-item>
          <el-menu-item index="/admin/article/add">调度管理</el-menu-item>
          <el-menu-item index="/admin/article/add">店铺管理</el-menu-item>
          <el-menu-item index="/admin/article/add">车辆管理</el-menu-item>
          <el-menu-item index="/admin/article/add">图片管理</el-menu-item>
          <el-menu-item index="/admin/article/add">视频管理</el-menu-item>
          <el-menu-item index="/admin/article/add">消息管理</el-menu-item>
          <el-menu-item index="/admin/article/add">审核管理</el-menu-item>
          <el-menu-item index="/admin/article/add">短信管理</el-menu-item>
          <el-menu-item index="/admin/article">算法模型管理</el-menu-item>
          <el-menu-item index="/admin/article">日志管理</el-menu-item>
        </el-submenu>
        <!-- 系统设置 -->
        <el-submenu index="/admin/article3">
          <template slot="title">
            <!-- <i class="el-icon-reading"></i> -->
            <span slot="prefix" class="icon-padding">
              <svg-icon icon-class="system"></svg-icon>
            </span>
            <span>系统设置</span>
          </template>
          <!-- 基本设置 -->
          <el-submenu index="/admin/article/add">
            <template slot="title">
              <span>基本设置</span>
            </template>
            <el-menu-item index="/admin/article">用户管理</el-menu-item>
            <el-menu-item index="/admin/article">角色管理</el-menu-item>
            <el-menu-item index="/admin/article">权限管理</el-menu-item>
            <el-menu-item index="/admin/article">部门管理</el-menu-item>
          </el-submenu>
          <!-- 平台设置 -->
          <el-submenu index="/admin/article/add">
            <template slot="title">
              <span>平台设置</span>
            </template>
            <el-menu-item index="/admin/article">门户设置</el-menu-item>
            <el-menu-item index="/admin/article">第三方接口管理</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>
 
<script>
export default {};
</script>
 
<style lang="scss" scpoed>
.icon-padding {
  padding-right: 10px;
}
.el-aside {
  background: #07162e;
  color: #e9eef3;
  text-align: center;
  box-sizing: border-box;
  position: relative;
  //    固定标题
  .siderbar-title {
    position: fixed;
    text-align: center;
    margin: 0;
    font-size: 26px;
    width: 200px;
    line-height: 66px;
    top: 0;
    left: 0;
    z-index: 999;
    box-shadow: 0 -5px 5px #0ff inset;
  }
  .el-scrollbar {
    height: calc(100vh - 66px);
    margin-top: 66px;
    box-sizing: border-box;
    .el-menu {
      background: linear-gradient(#07162e, #0f2b56);
      border: 0;
      .el-submenu {
        background: #07162e;
        text-align: left;
        &:hover span {
          color: #22d3eb;
        }
        span {
          color: #e9eef3;
        }
        .el-menu-item {
          color: #e9eef3;
          background-color: #07162e;
          &:hover {
            color: #22d3eb;
          }
        }
        .is-active {
          background-color: #07162e;
          color: #22d3eb;
        }
      }
      .is-active {
        background-color: #092c4a;
      }
    }
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
}
</style>