马宇豪
2023-04-10 df5d10124f0cdaa2710a8bc460413388dd50c199
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<template>
  <el-scrollbar
    wrap-class="scrollbar-wrapper">
    <el-menu
      :collapse="isCollapse"
      :default-active="$route.path"
      :background-color="variables.menuBg"
      :text-color="variables.menuText"
      :active-text-color="variables.menuActiveText"
      :collapse-transition="false"
      mode="vertical"
    >
      <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
    </el-menu>
  </el-scrollbar>
</template>
 
<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
 
export default {
  components: { SidebarItem },
  computed: {
    ...mapGetters([
      'permission_routes',
      'sidebar'
    ]),
    variables() {
      return variables
    }
 
    // !this.sidebar.opened
  },
  data() {
    return {
      isCollapse: false
    }
  },
  methods: {
  }
}
</script>
 
<style rel="stylesheet/scss" lang="scss">
.scrollbar-wrapper {
  .el-icon-dash {
    background-image:url('../../../../assets/menu/dash.svg');
    background-size:cover;
    background-position:center;
    overflow: hidden;
  }
  .el-icon-dash:before {
        content: "dash";
        font-size: 16px;
        visibility: hidden;
  }
  .el-icon-basicdata {
    background-image:url('../../../../assets/menu/basicdata.svg');
    background-size:cover;
    background-position:center;
    overflow: hidden;
  }
  .el-icon-basicdata:before {
        content: "basicdata";
        font-size: 16px;
        visibility: hidden;
    }
  .el-icon-situation {
    background-image:url('../../../../assets/menu/situation.svg');
    background-size:cover;
    background-position:center;
    overflow: hidden;
  }
  .el-icon-situation:before {
        content: "situation";
        font-size: 16px;
        visibility: hidden;
    }
  .el-icon-security {
    background-image:url('../../../../assets/menu/security.svg');
    background-size:cover;
    background-position:center;
    overflow: hidden;
  }
  .el-icon-security:before {
        content: "security";
        font-size: 16px;
        visibility: hidden;
    }
  .el-icon-securmgmt {
    background-image:url('../../../../assets/menu/securmgmt.svg');
    background-size:cover;
    background-position:center;
    overflow: hidden;
  }
  .el-icon-securmgmt:before {
        content: "securmgmt";
        font-size: 16px;
        visibility: hidden;
    }
  .el-icon-dangerchem {
    background-image:url('../../../../assets/menu/dangerchem.svg');
    background-size:cover;
    background-position:center;
    overflow: hidden;
  }
  .el-icon-dangerchem:before {
        content: "dangerchem";
        font-size: 16px;
        visibility: hidden;
    }
   .el-icon-facilities {
    background-image:url('../../../../assets/menu/facilities.svg');
    background-size:cover;
    background-position:center;
    overflow: hidden;
  }
  .el-icon-facilities:before {
        content: "facilities";
        font-size: 16px;
        visibility: hidden;
    }
  .el-icon-other {
    background-image:url('../../../../assets/menu/other.svg');
    background-size:cover;
    background-position:center;
    overflow: hidden;
  }
  .el-icon-other:before {
        content: "other";
        font-size: 16px;
        visibility: hidden;
    }
   .el-icon-units {
    background-image:url('../../../../assets/menu/units.svg');
    background-size:cover;
    background-position:center;
    overflow: hidden;
  }
  .el-icon-units:before {
        content: "units";
        font-size: 16px;
        visibility: hidden;
    }
  .el-icon-statistics {
    background-image:url('../../../../assets/menu/statistics.svg');
    background-size:cover;
    background-position:center;
    overflow: hidden;
  }
  .el-icon-statistics:before {
        content: "statistics";
        font-size: 16px;
        visibility: hidden;
  }
   .el-icon-sign {
    background-image:url('../../../../assets/menu/sign.svg');
    background-size:cover;
    background-position:center;
    overflow: hidden;
  }
  .el-icon-sign:before {
        content: "sign";
        font-size: 16px;
        visibility: hidden;
  }
  .el-icon-sysmgmt {
    background-image:url('../../../../assets/menu/sysmgmt.svg');
    background-size:cover;
    background-position:center;
    overflow: hidden;
  }
  .el-icon-sysmgmt:before {
        content: "sysmgmt";
        font-size: 16px;
        visibility: hidden;
    }
  .el-icon-persona {
    background-image:url('../../../../assets/menu/persona.svg');
    background-size:cover;
    background-position:center;
    overflow: hidden;
  }
  .el-icon-persona:before {
        content: "persona";
        font-size: 16px;
        visibility: hidden;
    }
  .el-icon-patrol {
    background-image:url('../../../../assets/menu/patrol.svg');
    background-size:cover;
    background-position:center;
    overflow: hidden;
  }
  .el-icon-patrol:before {
        content: "patrol";
        font-size: 16px;
        visibility: hidden;
    }
}
 
</style>