春风项目四线(合箱线、总装线)
wujian
2024-01-31 238595017057e4bc67393915140507785f45b195
提交 | 用户 | 时间
fd2207 1 #app {
2
3   .main-container {
4     height: 100%;
5     transition: margin-left .28s;
6     margin-left: $base-sidebar-width;
7     position: relative;
8   }
9
10   .sidebarHide {
11     margin-left: 0!important;
12   }
13
14   .sidebar-container {
15     -webkit-transition: width .28s;
16     transition: width 0.28s;
17     width: $base-sidebar-width !important;
18     background-color: $base-menu-background;
19     height: 100%;
20     position: fixed;
21     font-size: 0px;
22     top: 0;
23     bottom: 0;
24     left: 0;
25     z-index: 1001;
26     overflow: hidden;
27     -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
28     box-shadow: 2px 0 6px rgba(0,21,41,.35);
29
30     // reset element-ui css
31     .horizontal-collapse-transition {
32       transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
33     }
34
35     .scrollbar-wrapper {
36       overflow-x: hidden !important;
37     }
38
39     .el-scrollbar__bar.is-vertical {
40       right: 0px;
41     }
42
43     .el-scrollbar {
44       height: 100%;
45     }
46
47     &.has-logo {
48       .el-scrollbar {
49         height: calc(100% - 50px);
50       }
51     }
52
53     .is-horizontal {
54       display: none;
55     }
56
57     a {
58       display: inline-block;
59       width: 100%;
60       overflow: hidden;
61     }
62
63     .svg-icon {
64       margin-right: 16px;
65     }
66
67     .el-menu {
68       border: none;
69       height: 100%;
70       width: 100% !important;
71     }
72
73     .el-menu-item, .el-submenu__title {
74       overflow: hidden !important;
75       text-overflow: ellipsis !important;
76       white-space: nowrap !important;
77     }
78
79     // menu hover
80     .submenu-title-noDropdown,
81     .el-submenu__title {
82       &:hover {
83         background-color: rgba(0, 0, 0, 0.06) !important;
84       }
85     }
86
87     & .theme-dark .is-active > .el-submenu__title {
88       color: $base-menu-color-active !important;
89     }
90
91     & .nest-menu .el-submenu>.el-submenu__title,
92     & .el-submenu .el-menu-item {
93       min-width: $base-sidebar-width !important;
94
95       &:hover {
96         background-color: rgba(0, 0, 0, 0.06) !important;
97       }
98     }
99
100     & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
101     & .theme-dark .el-submenu .el-menu-item {
102       background-color: $base-sub-menu-background !important;
103
104       &:hover {
105         background-color: $base-sub-menu-hover !important;
106       }
107     }
108   }
109
110   .hideSidebar {
111     .sidebar-container {
112       width: 54px !important;
113     }
114
115     .main-container {
116       margin-left: 54px;
117     }
118
119     .submenu-title-noDropdown {
120       padding: 0 !important;
121       position: relative;
122
123       .el-tooltip {
124         padding: 0 !important;
125
126         .svg-icon {
127           margin-left: 20px;
128         }
129       }
130     }
131
132     .el-submenu {
133       overflow: hidden;
134
135       &>.el-submenu__title {
136         padding: 0 !important;
137
138         .svg-icon {
139           margin-left: 20px;
140         }
141
142       }
143     }
144
145     .el-menu--collapse {
146       .el-submenu {
147         &>.el-submenu__title {
148           &>span {
149             height: 0;
150             width: 0;
151             overflow: hidden;
152             visibility: hidden;
153             display: inline-block;
154           }
155         }
156       }
157     }
158   }
159
160   .el-menu--collapse .el-menu .el-submenu {
161     min-width: $base-sidebar-width !important;
162   }
163
164   // mobile responsive
165   .mobile {
166     .main-container {
167       margin-left: 0px;
168     }
169
170     .sidebar-container {
171       transition: transform .28s;
172       width: $base-sidebar-width !important;
173     }
174
175     &.hideSidebar {
176       .sidebar-container {
177         pointer-events: none;
178         transition-duration: 0.3s;
179         transform: translate3d(-$base-sidebar-width, 0, 0);
180       }
181     }
182   }
183
184   .withoutAnimation {
185
186     .main-container,
187     .sidebar-container {
188       transition: none;
189     }
190   }
191 }
192
193 // when menu collapsed
194 .el-menu--vertical {
195   &>.el-menu {
196     .svg-icon {
197       margin-right: 16px;
198     }
199   }
200
201   .nest-menu .el-submenu>.el-submenu__title,
202   .el-menu-item {
203     &:hover {
204       // you can use $subMenuHover
205       background-color: rgba(0, 0, 0, 0.06) !important;
206     }
207   }
208
209   // the scroll bar appears when the subMenu is too long
210   >.el-menu--popup {
211     max-height: 100vh;
212     overflow-y: auto;
213
214     &::-webkit-scrollbar-track-piece {
215       background: #d3dce6;
216     }
217
218     &::-webkit-scrollbar {
219       width: 6px;
220     }
221
222     &::-webkit-scrollbar-thumb {
223       background: #99a9bf;
224       border-radius: 20px;
225     }
226   }
227 }