feat:上报和监管的项目区分
Showing
7 changed files
with
575 additions
and
212 deletions
... | @@ -278,7 +278,7 @@ export default { | ... | @@ -278,7 +278,7 @@ export default { |
278 | let _this = this | 278 | let _this = this |
279 | // 上报请求头修改 | 279 | // 上报请求头修改 |
280 | try { | 280 | try { |
281 | var headRes = await axios.post(urlHeader + 'edit', this.dataReport, | 281 | var headRes = await axios.post('/api' + urlHeader + 'edit', this.dataReport, |
282 | { | 282 | { |
283 | headers: { | 283 | headers: { |
284 | 'Authorization': sessionStorage.getItem("token") || "" | 284 | 'Authorization': sessionStorage.getItem("token") || "" | ... | ... |
1 | <!-- | ||
2 | * @Description: | ||
3 | * @Autor: renchao | ||
4 | * @LastEditTime: 2023-03-06 16:24:39 | ||
5 | --> | ||
1 | <template> | 6 | <template> |
2 | <div class="app-wrapper"> | 7 | <div class="app-wrapper"> |
3 | <navbar /> | 8 | <navbar /> |
... | @@ -28,8 +33,9 @@ export default { | ... | @@ -28,8 +33,9 @@ export default { |
28 | } | 33 | } |
29 | } | 34 | } |
30 | </script> | 35 | </script> |
31 | <style lang="scss" scoped> | 36 | <style lang="scss"> |
32 | @import "~@/styles/mixin.scss"; | 37 | @import "~@/styles/mixin.scss"; |
38 | @import "~@/styles/sidebar.scss"; | ||
33 | 39 | ||
34 | .app-wrapper { | 40 | .app-wrapper { |
35 | @include clearfix; | 41 | @include clearfix; | ... | ... |
... | @@ -8,7 +8,7 @@ | ... | @@ -8,7 +8,7 @@ |
8 | <Breadcrumb /> | 8 | <Breadcrumb /> |
9 | </div> --> | 9 | </div> --> |
10 | <div class="right-menu"> | 10 | <div class="right-menu"> |
11 | <div class="dataView d-center pointer" @click="handleDataView">大屏展示</div> | 11 | <!-- <div class="dataView d-center pointer" @click="handleDataView">大屏展示</div> --> |
12 | <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand"> | 12 | <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand"> |
13 | <div class="avatar-wrapper"> | 13 | <div class="avatar-wrapper"> |
14 | <span style="padding-right:10px">{{ name }}</span> | 14 | <span style="padding-right:10px">{{ name }}</span> |
... | @@ -24,227 +24,227 @@ | ... | @@ -24,227 +24,227 @@ |
24 | </div> | 24 | </div> |
25 | </template> | 25 | </template> |
26 | <script> | 26 | <script> |
27 | import { mapGetters } from 'vuex' | 27 | import { mapGetters } from 'vuex' |
28 | import Breadcrumb from './Breadcrumb' | 28 | import Breadcrumb from './Breadcrumb' |
29 | import defaultSettings from '@/settings' | 29 | import defaultSettings from '@/settings' |
30 | export default { | 30 | export default { |
31 | components: { | 31 | components: { |
32 | Breadcrumb | 32 | Breadcrumb |
33 | }, | 33 | }, |
34 | computed: { | 34 | computed: { |
35 | ...mapGetters(['sidebar', 'avatar', 'name']) | 35 | ...mapGetters(['sidebar', 'avatar', 'name']) |
36 | }, | ||
37 | data () { | ||
38 | return { | ||
39 | title: defaultSettings.title | ||
40 | } | ||
41 | }, | ||
42 | methods: { | ||
43 | handleDataView () { | ||
44 | const { href } = this.$router.resolve('/dataView'); | ||
45 | window.open(href, '_blank'); | ||
36 | }, | 46 | }, |
37 | data () { | 47 | themeChange (val) { |
38 | return { | 48 | this.$store.dispatch('app/updateTheme', val) |
39 | title: defaultSettings.title | ||
40 | } | ||
41 | }, | 49 | }, |
42 | methods: { | 50 | handleCommand (command) { |
43 | handleDataView () { | 51 | if (command == 'a') { |
44 | const { href } = this.$router.resolve('/dataView'); | 52 | } else { |
45 | window.open(href, '_blank'); | ||
46 | }, | ||
47 | themeChange (val) { | ||
48 | this.$store.dispatch('app/updateTheme', val) | ||
49 | }, | ||
50 | handleCommand (command) { | ||
51 | if (command == 'a') { | ||
52 | } else { | ||
53 | 53 | ||
54 | } | ||
55 | } | 54 | } |
56 | } | 55 | } |
57 | } | 56 | } |
57 | } | ||
58 | </script> | 58 | </script> |
59 | <style lang="scss" scoped> | 59 | <style lang="scss" scoped> |
60 | .navbar-con { | 60 | .navbar-con { |
61 | position: relative; | 61 | position: relative; |
62 | 62 | ||
63 | .logo { | 63 | .logo { |
64 | color: #fff; | 64 | color: #fff; |
65 | font-size: 26px; | 65 | font-size: 26px; |
66 | font-weight: 700; | 66 | font-weight: 700; |
67 | } | 67 | } |
68 | } | ||
69 | |||
70 | .dataView { | ||
71 | color: #fff; | ||
72 | width: 120px; | ||
73 | height: 32px; | ||
74 | background: url("../../image/dp.png"); | ||
75 | background-size: cover; | ||
76 | margin-right: 20px; | ||
77 | } | ||
78 | |||
79 | .NoticeBar { | ||
80 | position: absolute; | ||
81 | bottom: 0; | ||
82 | } | ||
83 | |||
84 | .el-dropdown-menu { | ||
85 | padding: 0 !important; | ||
86 | border: 1px solid #ebeef5; | ||
87 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); | ||
88 | border-radius: 4px 0 0 4px 4px; | ||
89 | |||
90 | .el-dropdown-menu__item { | ||
91 | text-align: center; | ||
92 | margin-top: 0 !important; | ||
93 | font-size: 14px; | ||
94 | font-family: PingFangSC-Regular, PingFang SC; | ||
95 | font-weight: 400; | ||
96 | color: #4a4a4a; | ||
97 | width: 140px; | ||
98 | height: 36px; | ||
99 | line-height: 36px; | ||
68 | } | 100 | } |
69 | 101 | ||
70 | .dataView { | 102 | .el-dropdown-menu__item:nth-child(6) { |
71 | color: #fff; | 103 | border-top: 1px solid #ebeef5; |
72 | width: 120px; | ||
73 | height: 32px; | ||
74 | background: url("../../image/dp.png"); | ||
75 | background-size: cover; | ||
76 | margin-right: 20px; | ||
77 | } | 104 | } |
78 | 105 | ||
79 | .NoticeBar { | 106 | .popper__arrow { |
80 | position: absolute; | 107 | top: -11px !important; |
81 | bottom: 0; | 108 | left: 110px !important; |
109 | transform: rotate(0deg) scale(2); | ||
82 | } | 110 | } |
83 | 111 | ||
84 | .el-dropdown-menu { | 112 | .el-dropdown-menu__item:not(.is-disabled):hover, |
85 | padding: 0 !important; | 113 | .el-dropdown-menu__item:focus { |
86 | border: 1px solid #ebeef5; | 114 | background: #f6f7f9; |
87 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); | 115 | color: #4a4a4a; |
88 | border-radius: 4px 0 0 4px 4px; | 116 | } |
89 | 117 | } | |
90 | .el-dropdown-menu__item { | 118 | |
91 | text-align: center; | 119 | .navbar { |
92 | margin-top: 0 !important; | 120 | height: $headerHeight; |
93 | font-size: 14px; | 121 | overflow: hidden; |
94 | font-family: PingFangSC-Regular, PingFang SC; | 122 | position: relative; |
95 | font-weight: 400; | 123 | // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色 |
96 | color: #4a4a4a; | 124 | // box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08); |
97 | width: 140px; | 125 | background: #0d1230; |
98 | height: 36px; | 126 | display: flex; |
99 | line-height: 36px; | 127 | align-items: center; |
100 | } | 128 | padding-right: 20px; |
129 | justify-content: space-between; | ||
130 | margin-bottom: 10px; | ||
131 | |||
132 | .header-logo { | ||
133 | width: 300px; | ||
134 | } | ||
101 | 135 | ||
102 | .el-dropdown-menu__item:nth-child(6) { | 136 | .backdrop { |
103 | border-top: 1px solid #ebeef5; | 137 | flex: 1; |
104 | } | 138 | width: 60%; |
139 | background-size: 100% 100%; | ||
140 | height: $headerHeight; | ||
141 | display: flex; | ||
142 | align-items: center; | ||
143 | } | ||
105 | 144 | ||
106 | .popper__arrow { | 145 | .hamburger-container { |
107 | top: -11px !important; | 146 | line-height: 43px; |
108 | left: 110px !important; | 147 | height: 100%; |
109 | transform: rotate(0deg) scale(2); | 148 | float: left; |
110 | } | 149 | cursor: pointer; |
150 | transition: background 0.3s; | ||
151 | -webkit-tap-highlight-color: transparent; | ||
111 | 152 | ||
112 | .el-dropdown-menu__item:not(.is-disabled):hover, | 153 | &:hover { |
113 | .el-dropdown-menu__item:focus { | 154 | background: rgba(0, 0, 0, 0.025); |
114 | background: #f6f7f9; | ||
115 | color: #4a4a4a; | ||
116 | } | 155 | } |
117 | } | 156 | } |
118 | 157 | ||
119 | .navbar { | 158 | .breadcrumb-container { |
120 | height: $headerHeight; | 159 | float: left; |
121 | overflow: hidden; | 160 | } |
122 | position: relative; | 161 | |
123 | // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色 | 162 | .right-menu { |
124 | // box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08); | 163 | float: right; |
125 | background: #0d1230; | 164 | height: 100%; |
165 | line-height: 50px; | ||
126 | display: flex; | 166 | display: flex; |
127 | align-items: center; | 167 | align-items: center; |
128 | padding-right: 20px; | ||
129 | justify-content: space-between; | ||
130 | margin-bottom: 10px; | ||
131 | 168 | ||
132 | .header-logo { | 169 | .function { |
133 | width: 300px; | 170 | margin: 0 15px; |
171 | cursor: pointer; | ||
134 | } | 172 | } |
135 | 173 | ||
136 | .backdrop { | 174 | .shutdown { |
137 | flex: 1; | 175 | font-size: 20px; |
138 | width: 60%; | 176 | margin-left: 15px; |
139 | background-size: 100% 100%; | 177 | cursor: pointer; |
140 | height: $headerHeight; | ||
141 | display: flex; | ||
142 | align-items: center; | ||
143 | } | 178 | } |
144 | 179 | ||
145 | .hamburger-container { | 180 | .organization-item { |
146 | line-height: 43px; | 181 | margin-right: 40px; |
147 | height: 100%; | 182 | margin-top: -40px !important; |
148 | float: left; | 183 | } |
149 | cursor: pointer; | ||
150 | transition: background 0.3s; | ||
151 | -webkit-tap-highlight-color: transparent; | ||
152 | 184 | ||
153 | &:hover { | 185 | .item { |
154 | background: rgba(0, 0, 0, 0.025); | 186 | margin-right: 40px; |
187 | margin-top: -20px; | ||
188 | line-height: 18.4px; | ||
189 | cursor: pointer; | ||
190 | position: relative; | ||
191 | |||
192 | .item-box { | ||
193 | position: absolute; | ||
194 | top: -5px; | ||
195 | left: 3px; | ||
196 | width: 100%; | ||
197 | min-width: 25px; | ||
198 | height: 25px; | ||
199 | cursor: pointer; | ||
200 | z-index: 100; | ||
155 | } | 201 | } |
156 | } | 202 | } |
157 | 203 | ||
158 | .breadcrumb-container { | 204 | &:focus { |
159 | float: left; | 205 | outline: none; |
160 | } | 206 | } |
161 | 207 | ||
162 | .right-menu { | 208 | .right-menu-item { |
163 | float: right; | 209 | display: inline-block; |
164 | height: 100%; | 210 | height: 100%; |
165 | line-height: 50px; | 211 | font-size: 18px; |
166 | display: flex; | 212 | color: #fff; |
167 | align-items: center; | 213 | vertical-align: text-bottom; |
168 | |||
169 | .function { | ||
170 | margin: 0 15px; | ||
171 | cursor: pointer; | ||
172 | } | ||
173 | 214 | ||
174 | .shutdown { | 215 | &.hover-effect { |
175 | font-size: 20px; | ||
176 | margin-left: 15px; | ||
177 | cursor: pointer; | 216 | cursor: pointer; |
178 | } | 217 | transition: background 0.3s; |
179 | 218 | display: flex; | |
180 | .organization-item { | 219 | align-items: center; |
181 | margin-right: 40px; | ||
182 | margin-top: -40px !important; | ||
183 | } | ||
184 | 220 | ||
185 | .item { | 221 | &:hover { |
186 | margin-right: 40px; | 222 | background: rgba(0, 0, 0, 0.025); |
187 | margin-top: -20px; | ||
188 | line-height: 18.4px; | ||
189 | cursor: pointer; | ||
190 | position: relative; | ||
191 | |||
192 | .item-box { | ||
193 | position: absolute; | ||
194 | top: -5px; | ||
195 | left: 3px; | ||
196 | width: 100%; | ||
197 | min-width: 25px; | ||
198 | height: 25px; | ||
199 | cursor: pointer; | ||
200 | z-index: 100; | ||
201 | } | 223 | } |
202 | } | 224 | } |
225 | } | ||
203 | 226 | ||
204 | &:focus { | 227 | .avatar-wrapper { |
205 | outline: none; | 228 | position: relative; |
206 | } | 229 | display: flex; |
230 | height: 40px; | ||
231 | align-items: center; | ||
207 | 232 | ||
208 | .right-menu-item { | 233 | .user-avatar { |
209 | display: inline-block; | 234 | cursor: pointer; |
210 | height: 100%; | 235 | width: 35px; |
211 | font-size: 18px; | 236 | height: 35px; |
212 | color: #fff; | 237 | border-radius: 50%; |
213 | vertical-align: text-bottom; | ||
214 | |||
215 | &.hover-effect { | ||
216 | cursor: pointer; | ||
217 | transition: background 0.3s; | ||
218 | display: flex; | ||
219 | align-items: center; | ||
220 | |||
221 | &:hover { | ||
222 | background: rgba(0, 0, 0, 0.025); | ||
223 | } | ||
224 | } | ||
225 | } | 238 | } |
226 | 239 | ||
227 | .avatar-wrapper { | 240 | .el-icon-caret-bottom { |
228 | position: relative; | 241 | cursor: pointer; |
229 | display: flex; | 242 | position: absolute; |
230 | height: 40px; | 243 | right: -15px; |
231 | align-items: center; | 244 | top: 17px; |
232 | 245 | font-size: 12px; | |
233 | .user-avatar { | ||
234 | cursor: pointer; | ||
235 | width: 35px; | ||
236 | height: 35px; | ||
237 | border-radius: 50%; | ||
238 | } | ||
239 | |||
240 | .el-icon-caret-bottom { | ||
241 | cursor: pointer; | ||
242 | position: absolute; | ||
243 | right: -15px; | ||
244 | top: 17px; | ||
245 | font-size: 12px; | ||
246 | } | ||
247 | } | 246 | } |
248 | } | 247 | } |
249 | } | 248 | } |
249 | } | ||
250 | </style> | 250 | </style> | ... | ... |
1 | <!-- | ||
2 | * @Description: | ||
3 | * @Autor: renchao | ||
4 | * @LastEditTime: 2023-03-06 16:18:21 | ||
5 | --> | ||
1 | <template> | 6 | <template> |
2 | <div> | 7 | <div> |
3 | <el-scrollbar wrap-class="scrollbar-wrapper"> | 8 | <el-scrollbar wrap-class="scrollbar-wrapper"> |
4 | <el-menu router :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText" | 9 | <el-menu router :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText" |
5 | :unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical"> | 10 | :unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical"> |
6 | <!-- 权限菜单 --> | 11 | <!-- 权限菜单 --> |
7 | <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> | 12 | <sidebar-item v-for="route in permission_routes.slice(3)" :key="route.path" :item="route" |
13 | :base-path="route.path" /> | ||
8 | <!-- 菜单全部展示 --> | 14 | <!-- 菜单全部展示 --> |
9 | <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> --> | 15 | <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> --> |
10 | </el-menu> | 16 | </el-menu> |
... | @@ -13,36 +19,38 @@ | ... | @@ -13,36 +19,38 @@ |
13 | </template> | 19 | </template> |
14 | 20 | ||
15 | <script> | 21 | <script> |
16 | import { mapGetters } from 'vuex' | 22 | import { mapGetters } from 'vuex' |
17 | import Logo from './Logo' | 23 | import Logo from './Logo' |
18 | import defaultSettings from '@/settings' | 24 | import defaultSettings from '@/settings' |
19 | import SidebarItem from './SidebarItem' | 25 | import SidebarItem from './SidebarItem' |
20 | import variables from '@/styles/variables.scss' | 26 | import variables from '@/styles/variables.scss' |
21 | import { asyncRoutes } from '@/router' | 27 | import { asyncRoutes } from '@/router' |
22 | export default { | 28 | export default { |
23 | components: { SidebarItem, Logo }, | 29 | components: { SidebarItem, Logo }, |
24 | data () { | 30 | data () { |
25 | return { | 31 | return { |
26 | title: defaultSettings.title | 32 | title: defaultSettings.title |
33 | } | ||
34 | }, | ||
35 | created () { | ||
36 | console.log(this.permission_routes); | ||
37 | }, | ||
38 | computed: { | ||
39 | ...mapGetters(['permission_routes', 'sidebar']), | ||
40 | activeMenu () { | ||
41 | const route = this.$route | ||
42 | const { meta, path } = route | ||
43 | if (meta.activeMenu) { | ||
44 | return meta.activeMenu | ||
27 | } | 45 | } |
46 | return path | ||
28 | }, | 47 | }, |
29 | 48 | variables () { | |
30 | computed: { | 49 | return variables |
31 | ...mapGetters(['permission_routes', 'sidebar']), | 50 | }, |
32 | activeMenu () { | 51 | asyncRoutes () { |
33 | const route = this.$route | 52 | return asyncRoutes |
34 | const { meta, path } = route | ||
35 | if (meta.activeMenu) { | ||
36 | return meta.activeMenu | ||
37 | } | ||
38 | return path | ||
39 | }, | ||
40 | variables () { | ||
41 | return variables | ||
42 | }, | ||
43 | asyncRoutes () { | ||
44 | return asyncRoutes | ||
45 | } | ||
46 | } | 53 | } |
47 | } | 54 | } |
48 | </script> | 55 | } |
56 | </script> | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
1 | <!-- | ||
2 | * @Description: | ||
3 | * @Autor: renchao | ||
4 | * @LastEditTime: 2023-03-06 16:23:31 | ||
5 | --> | ||
1 | <template> | 6 | <template> |
2 | <div class="app-wrapper"> | 7 | <div class="app-wrapper scWrapper"> |
3 | <navbar /> | 8 | <navbar /> |
4 | <div class="main-container"> | 9 | <div class="main-container"> |
5 | <sidebar class="sidebar-container" /> | 10 | <sidebar class="sidebar-container" /> |
... | @@ -29,8 +34,9 @@ export default { | ... | @@ -29,8 +34,9 @@ export default { |
29 | } | 34 | } |
30 | } | 35 | } |
31 | </script> | 36 | </script> |
32 | <style lang="scss" scoped> | 37 | <style lang="scss"> |
33 | @import "~@/styles/mixin.scss"; | 38 | @import "~@/styles/mixin.scss"; |
39 | @import '~@/styles/sbSidebar.scss'; | ||
34 | 40 | ||
35 | .app-wrapper { | 41 | .app-wrapper { |
36 | @include clearfix; | 42 | @include clearfix; | ... | ... |
... | @@ -2,7 +2,7 @@ | ... | @@ -2,7 +2,7 @@ |
2 | @import './mixin.scss'; | 2 | @import './mixin.scss'; |
3 | @import './transition.scss'; | 3 | @import './transition.scss'; |
4 | @import './element-ui.scss'; | 4 | @import './element-ui.scss'; |
5 | @import './sidebar.scss'; | 5 | // @import './sidebar.scss'; |
6 | 6 | ||
7 | /* CSS 初始化 */ | 7 | /* CSS 初始化 */ |
8 | html, | 8 | html, | ... | ... |
src/styles/sbSidebar.scss
0 → 100644
1 | .scWrapper { | ||
2 | .main-container { | ||
3 | width: 100%; | ||
4 | height: calc(100% - 84px); | ||
5 | transition: margin-left 0.28s; | ||
6 | display: flex; | ||
7 | background-color: $containerbg; | ||
8 | } | ||
9 | |||
10 | .sidebar-container { | ||
11 | transition: width 0.28s; | ||
12 | width: $sideBarWidth !important; | ||
13 | font-size: 0px; | ||
14 | margin-right: 15px; | ||
15 | |||
16 | .horizontal-collapse-transition { | ||
17 | transition: 0s width ease-in-out, 0s padding-left ease-in-out, | ||
18 | 0s padding-right ease-in-out; | ||
19 | } | ||
20 | |||
21 | .scrollbar-wrapper { | ||
22 | overflow-x: hidden !important; | ||
23 | margin-right: 0 !important; | ||
24 | |||
25 | &::-webkit-scrollbar { | ||
26 | display: none; | ||
27 | } | ||
28 | } | ||
29 | |||
30 | a { | ||
31 | display: inline-block; | ||
32 | width: 100%; | ||
33 | overflow: hidden; | ||
34 | } | ||
35 | |||
36 | .svg-icon { | ||
37 | margin-right: 5px; | ||
38 | } | ||
39 | |||
40 | .sub-el-icon { | ||
41 | margin-right: 12px; | ||
42 | margin-left: -2px; | ||
43 | } | ||
44 | |||
45 | .el-menu { | ||
46 | background-color: transparent !important; | ||
47 | border: none; | ||
48 | height: 100%; | ||
49 | width: 100% !important; | ||
50 | } | ||
51 | |||
52 | // menu hover | ||
53 | .el-menu--collapse .el-submenu__title, | ||
54 | .el-menu--collapse .submenu-title-noDropdown { | ||
55 | margin-left: 0px !important; | ||
56 | } | ||
57 | |||
58 | // 有子级 | ||
59 | .el-submenu__title { | ||
60 | padding-left: 10px !important; | ||
61 | color: $menuText; | ||
62 | height: 42px; | ||
63 | background: linear-gradient(90deg, #013874 0%, #081B56 100%); | ||
64 | margin-bottom: 8px; | ||
65 | |||
66 | &:hover { | ||
67 | color: $subMenuActiveText !important; | ||
68 | background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%); | ||
69 | |||
70 | .svg-icon, | ||
71 | i, | ||
72 | span { | ||
73 | color: $subMenuActiveText !important; | ||
74 | } | ||
75 | } | ||
76 | } | ||
77 | |||
78 | // 没有子级 | ||
79 | .submenu-title-noDropdown { | ||
80 | color: $menuText; | ||
81 | padding-left: 20px; | ||
82 | margin-bottom: 8px; | ||
83 | background: linear-gradient(90deg, #013874 0%, #081B56 100%); | ||
84 | |||
85 | &:hover { | ||
86 | color: $menuActiveText !important; | ||
87 | background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%); | ||
88 | |||
89 | .svg-icon { | ||
90 | color: #1ea6f8 !important; | ||
91 | } | ||
92 | |||
93 | i { | ||
94 | color: #1ea6f8 !important; | ||
95 | } | ||
96 | } | ||
97 | } | ||
98 | |||
99 | .submenu-title-noDropdown.is-active, | ||
100 | .el-submenu__title.is-active { | ||
101 | color: $menuActiveText; | ||
102 | background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%); | ||
103 | |||
104 | .svg-icon { | ||
105 | color: #1ea6f8 !important; | ||
106 | } | ||
107 | |||
108 | i { | ||
109 | color: #1ea6f8 !important; | ||
110 | } | ||
111 | } | ||
112 | |||
113 | .submenu-title-noDropdown, | ||
114 | .el-submenu__title { | ||
115 | font-weight: 600; | ||
116 | font-size: $sideBarFontSize; | ||
117 | |||
118 | // margin: 0 10px; | ||
119 | >i { | ||
120 | color: $subMenuActiveText !important; | ||
121 | transform: rotate(90deg); | ||
122 | -webkit-transform: rotate(90deg); | ||
123 | -moz-transform: rotate(90deg); | ||
124 | -ms-transform: rotate(90deg); | ||
125 | -o-transform: rotate(90deg); | ||
126 | margin-right: 10px; | ||
127 | } | ||
128 | |||
129 | .svg-icon { | ||
130 | font-size: 18px; | ||
131 | margin-top: -5px; | ||
132 | } | ||
133 | } | ||
134 | |||
135 | .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow { | ||
136 | transform: rotateZ(0deg) !important; | ||
137 | -webkit-transform: rotateZ(0deg) !important; | ||
138 | -moz-transform: rotateZ(0deg) !important; | ||
139 | -ms-transform: rotateZ(0deg) !important; | ||
140 | -o-transform: rotateZ(0deg) !important; | ||
141 | } | ||
142 | |||
143 | .is-active>.el-submenu__title { | ||
144 | color: #fff !important; | ||
145 | } | ||
146 | |||
147 | & .nest-menu .el-submenu>.el-submenu__title, | ||
148 | & .el-submenu .el-menu-item { | ||
149 | &.is-active { | ||
150 | background-color: $subMenuHover !important; | ||
151 | color: $menuActiveText !important; | ||
152 | } | ||
153 | |||
154 | &:hover { | ||
155 | background-color: $subMenuHover !important; | ||
156 | color: $menuActiveText !important; | ||
157 | } | ||
158 | |||
159 | min-width: 130px !important; | ||
160 | background-color: transparent !important; | ||
161 | font-weight: 600; | ||
162 | font-size: $sideBarFontSize; | ||
163 | margin: 0 10px; | ||
164 | // border-radius: 6px; | ||
165 | } | ||
166 | } | ||
167 | |||
168 | .hideSidebar { | ||
169 | .sidebar-container { | ||
170 | width: 54px !important; | ||
171 | } | ||
172 | |||
173 | .submenu-title-noDropdown { | ||
174 | padding: 0 !important; | ||
175 | position: relative; | ||
176 | |||
177 | .el-tooltip { | ||
178 | padding: 0 !important; | ||
179 | |||
180 | .svg-icon { | ||
181 | margin-left: 16px; | ||
182 | } | ||
183 | |||
184 | .sub-el-icon { | ||
185 | margin-left: 19px; | ||
186 | } | ||
187 | } | ||
188 | } | ||
189 | |||
190 | .el-submenu { | ||
191 | overflow: hidden; | ||
192 | |||
193 | &>.el-submenu__title { | ||
194 | padding: 0 !important; | ||
195 | |||
196 | .svg-icon { | ||
197 | margin-left: 16px; | ||
198 | } | ||
199 | |||
200 | .sub-el-icon { | ||
201 | margin-left: 19px; | ||
202 | } | ||
203 | |||
204 | .el-submenu__icon-arrow { | ||
205 | display: none; | ||
206 | } | ||
207 | } | ||
208 | } | ||
209 | |||
210 | .el-menu--collapse { | ||
211 | .el-submenu { | ||
212 | &>.el-submenu__title { | ||
213 | &>span { | ||
214 | height: 0; | ||
215 | width: 0; | ||
216 | overflow: hidden; | ||
217 | visibility: hidden; | ||
218 | display: inline-block; | ||
219 | } | ||
220 | } | ||
221 | } | ||
222 | } | ||
223 | } | ||
224 | |||
225 | .el-menu--collapse .el-menu .el-submenu { | ||
226 | min-width: $sideBarWidth !important; | ||
227 | } | ||
228 | |||
229 | // mobile responsive | ||
230 | .mobile { | ||
231 | .main-container { | ||
232 | margin-left: 0px; | ||
233 | } | ||
234 | |||
235 | .sidebar-container { | ||
236 | transition: transform 0.28s; | ||
237 | width: $sideBarWidth !important; | ||
238 | } | ||
239 | |||
240 | &.hideSidebar { | ||
241 | .sidebar-container { | ||
242 | pointer-events: none; | ||
243 | transition-duration: 0.3s; | ||
244 | transform: translate3d(-$sideBarWidth, 0, 0); | ||
245 | } | ||
246 | } | ||
247 | } | ||
248 | |||
249 | .withoutAnimation { | ||
250 | |||
251 | .main-container, | ||
252 | .sidebar-container { | ||
253 | transition: none; | ||
254 | } | ||
255 | } | ||
256 | } | ||
257 | |||
258 | // when menu collapsed | ||
259 | .el-menu--vertical { | ||
260 | &>.el-menu { | ||
261 | .svg-icon { | ||
262 | margin-right: 16px; | ||
263 | } | ||
264 | |||
265 | .sub-el-icon { | ||
266 | margin-right: 12px; | ||
267 | margin-left: -2px; | ||
268 | } | ||
269 | } | ||
270 | |||
271 | .nest-menu .el-submenu>.el-submenu__title, | ||
272 | .el-menu-item { | ||
273 | width: calc(100% - 12px); | ||
274 | border-top-right-radius: 8px; | ||
275 | border-bottom-right-radius: 8px; | ||
276 | font-weight: 600 !important; | ||
277 | font-size: 15px !important; | ||
278 | background-color: $menuHover !important; | ||
279 | color: $menuText !important; | ||
280 | |||
281 | &:hover { | ||
282 | background-color: $menuHover !important; | ||
283 | opacity: .9; | ||
284 | |||
285 | .svg-icon, | ||
286 | i, | ||
287 | span { | ||
288 | color: $menuText; | ||
289 | } | ||
290 | } | ||
291 | } | ||
292 | |||
293 | // the scroll bar appears when the subMenu is too long | ||
294 | >.el-menu--popup { | ||
295 | max-height: 100vh; | ||
296 | overflow-y: auto; | ||
297 | background-color: #32ACFE !important; | ||
298 | border-top-right-radius: 8px; | ||
299 | border-bottom-right-radius: 8px; | ||
300 | min-width: 140px; | ||
301 | padding: 12px 0; | ||
302 | |||
303 | &::-webkit-scrollbar-track-piece { | ||
304 | background: #d3dce6; | ||
305 | } | ||
306 | |||
307 | &::-webkit-scrollbar { | ||
308 | width: 6px; | ||
309 | } | ||
310 | |||
311 | &::-webkit-scrollbar-thumb { | ||
312 | background: #99a9bf; | ||
313 | border-radius: 20px; | ||
314 | } | ||
315 | } | ||
316 | } | ||
317 | |||
318 | .el-submenu__title { | ||
319 | display: flex; | ||
320 | align-items: center; | ||
321 | } | ||
322 | |||
323 | .el-submenu__title span { | ||
324 | white-space: normal; | ||
325 | word-break: break-all; | ||
326 | line-height: 20px; | ||
327 | flex: 1; | ||
328 | padding-right: 20px; | ||
329 | } | ||
330 | |||
331 | .el-menu-item { | ||
332 | height: 42px; | ||
333 | display: flex; | ||
334 | align-items: center; | ||
335 | padding-right: 20px !important; | ||
336 | } | ||
337 | |||
338 | .el-menu-item span { | ||
339 | white-space: normal; | ||
340 | word-break: break-all; | ||
341 | line-height: 20px; | ||
342 | flex: 1; | ||
343 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
-
Please register or sign in to post a comment