inleft
2022-02-15 91dc6cdda0548ff7f6e473a81933fa206d912cef
commit | author | age
9bcb19 1 @import './index.less';
I 2
3 body {
4
5
6 }
7
8 #app {
9   height: 100%;
10
11   &.colorWeak {
12     filter: invert(80%);
13   }
14   &.userLayout {
15     overflow: auto;
16   }
17 }
18
19 .layout.ant-layout {
20   height: auto;
21   overflow-x: hidden;
22
23   &.mobile,
24   &.tablet {
25     .ant-layout-content {
26       .content {
27         margin: 24px 0 0;
28       }
29     }
30
31     /**
32      * ant-table-wrapper
33      * 覆盖的表格手机模式样式,如果想修改在手机上表格最低宽度,可以在这里改动
34      */
35     .ant-table-wrapper {
36       .ant-table-content {
37         overflow-y: auto;
38       }
39       .ant-table-body {
40         min-width: 800px;
41       }
42     }
43     .topmenu {
44       /* 必须为 topmenu  才能启用流式布局 */
45       &.content-width-Fluid {
46         .header-index-wide {
47           margin-left: 0;
48         }
49       }
50     }
51   }
52
53   &.mobile {
54     .sidemenu {
55       .ant-header-fixedHeader {
56         &.ant-header-side-opened,
57         &.ant-header-side-closed {
58           width: 100%;
59         }
60       }
61     }
62   }
63
64   &.ant-layout-has-sider {
65     flex-direction: row;
66   }
67
68   .trigger {
69     font-size: 20px;
70     line-height: 55px;
71     padding: 0 24px;
72     cursor: pointer;
73     transition: color 0.3s;
74     &:hover {
75       background: rgba(0, 0, 0, 0.025);
76     }
77   }
78
79   .topmenu {
80     .ant-header-fixedHeader {
81       position: fixed;
82       top: 0;
83       right: 0;
84       z-index: 9;
85       width: 100%;
86       transition: width 0.2s;
87
88       &.ant-header-side-opened {
89         width: 100%;
90       }
91
92       &.ant-header-side-closed {
93         width: 100%;
94       }
95     }
96     /* 必须为 topmenu  才能启用流式布局 */
97     &.content-width-Fluid {
98       .header-index-wide {
99         max-width: unset;
100         .header-index-left {
101           flex: 1 1 1000px;
102           .logo{
103             margin-left: 25px;
104           }
105           .ant-menu.ant-menu-horizontal{
106             max-width: calc(100vw - 190px - 238px - 25px);
107             flex: 1 1 calc(100vw - 190px - 238px - 25px);
108           }
109         }
110         .header-index-right{
111           margin-right:25px;
112         }
113       }
114
115       .page-header-index-wide {
116         max-width: unset;
117       }
118     }
119   }
120
121   .sidemenu {
122     .ant-header-fixedHeader {
123       position: fixed;
124       top: 0;
125       right: 0;
126       z-index: 9;
127       width: 100%;
128       transition: width 0.2s;
129
130       &.ant-header-side-opened {
131         width: calc(100% - 230px);
132       }
133
134       &.ant-header-side-closed {
135         width: calc(100% - 80px);
136       }
137     }
138   }
139
140   .header {
141     height: 55px;
142     // padding: 0 12px 0 0;
143     background: #fff;
144     box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
145     position: relative;
146   }
147
148   .header,
149   .top-nav-header-index {
150     .user-wrapper {
151       float: right;
152       height: 100%;
153
154       .action {
155         line-height: 55px;
156         cursor: pointer;
157         padding: 0 12px;
158         display: inline-block;
159         transition: all 0.3s;
160         height: 100%;
161         color: rgba(0, 0, 0, 0.65);
162
163         &:hover {
164           background: rgba(0, 0, 0, 0.025);
165         }
166
167         .avatar {
168           margin: 15px 8px 15px 0;
169           color: #1890ff;
170           background: hsla(0, 0%, 100%, 0.85);
171           vertical-align: middle;
172         }
173
174         .icon {
175           font-size: 16px;
176           padding: 4px;
177         }
178       }
179     }
180
181     &.dark {
182       .user-wrapper {
183         .action {
184           color: rgba(255, 255, 255, 0.85);
185           a {
186             color: rgba(255, 255, 255, 0.85);
187           }
188
189           &:hover {
190             background: rgba(255, 255, 255, 0.16);
191           }
192         }
193       }
194     }
195   }
196
197   &.mobile,
198   &.tablet {
199     .top-nav-header-index {
200       .header-index-wide {
201         .header-index-left {
202           .trigger {
203             color: rgba(255, 255, 255, 0.85);
204             padding: 0 12px;
205           }
206
207           .logo.top-nav-header {
208             flex: 0 0 56px;
209             text-align: center;
210             line-height: 58px;
211             h1 {
212               display: none;
213             }
214           }
215         }
216       }
217
218       &.light {
219         .header-index-wide {
220           .header-index-left {
221             .trigger {
222               color: rgba(0, 0, 0, 0.65);
223             }
224           }
225         }
226       }
227     }
228   }
229
230   &.tablet {
231     // overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
232     .top-nav-header-index {
233       .header-index-wide {
234         .header-index-left {
235           .logo > a {
236             overflow: hidden;
237             text-overflow: ellipsis;
238             white-space: nowrap;
239           }
240         }
241         .ant-menu.ant-menu-horizontal {
242           flex: 1 1 auto;
243           white-space: normal;
244         }
245       }
246     }
247   }
248
249   .top-nav-header-index {
250     box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
251     position: relative;
252     transition: background 0.3s, width 0.2s;
253
254     .header-index-wide {
255       max-width: 1200px;
256       margin: auto;
257       padding-left: 0;
258       display: flex;
259       height: 55px;
260
261       .ant-menu.ant-menu-horizontal {
262         max-width: 835px;
263         flex: 0 1 835px;
264         border: none;
265         height: 55px;
266         line-height: 55px;
267       }
268
269       .header-index-left {
270         flex: 0 1 1000px;
271         display: flex;
272
273         .logo.top-nav-header {
274           flex: 0 0 165px;
275           width: 165px;
276           height: 55px;
277           position: relative;
278           line-height: 55px;
279           transition: all 0.3s;
280           overflow: hidden;
281
282           img,
283           svg {
284             display: inline-block;
285             vertical-align: middle;
286             height: 32px;
287             width: 32px;
288           }
289
290           h1 {
291             color: #fff;
292             display: inline-block;
293             vertical-align: top;
294             font-size: 16px;
295             margin: 0 0 0 12px;
296             font-weight: 400;
297           }
298         }
299       }
300
301       .header-index-right {
302         flex: 0 0 238px;
303         align-self: flex-end;
304         height: 55px;
305         overflow: hidden;
306
307         .content-box {
308           float: right;
309           .action {
310             max-width: 140px;
311             overflow: hidden;
312             text-overflow:ellipsis;
313             white-space:nowrap;
314           }
315         }
316       }
317     }
318
319     &.light {
320       background-color: #fff;
321
322       .header-index-wide {
323         .header-index-left {
324           .logo {
325             h1 {
326               color: #002140;
327             }
328           }
329         }
330       }
331     }
332   }
333
334   // 内容区
335   .layout-content {
336     margin: 24px 24px 0px;
337     //height: 100%;
338     //height: 64px;
339     padding: 0 12px 0 0;
340   }
341
342   // footer
343   .ant-layout-footer {
344     padding: 0;
345   }
346 }
347
348 .topmenu {
349   .page-header-index-wide {
350     max-width: 1200px;
351     margin: 0 auto;
352   }
353 }
354
355 // drawer-sider 自定义
356 .ant-drawer.drawer-sider {
357   .sider {
358     box-shadow: none;
359   }
360
361   &.dark {
362     .ant-drawer-content {
363       background-color: rgb(0, 21, 41);
364     }
365   }
366   &.light {
367     box-shadow: none;
368     .ant-drawer-content {
369       background-color: #fff;
370     }
371   }
372
373   .ant-drawer-body {
374     padding: 0;
375   }
376 }
377
378 // 菜单样式
379 .sider {
380   box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
381   position: relative;
382   z-index: @ant-global-sider-zindex;
383   min-height: 100vh;
384
385   .ant-layout-sider-children {
386     overflow-y: hidden;
387
388     &:hover {
389       overflow-y: auto;
390     }
391   }
392
393   &.ant-fixed-sidemenu {
394     position: fixed;
395     height: 100%;
396   }
397
398   // logo区域样式
399   .logo {
400     position: relative;
401     height: 55px;
402     padding-left: 24px;
403     overflow: hidden;
404     line-height: 55px;
405     background: #002140;
406     transition: all .3s;
407
408     img,
409     svg,
410     h1 {
411       display: inline-block;
412       vertical-align: middle;
413     }
414
415     img,
416     svg {
417       height: 32px;
418       width: 32px;
419     }
420
421     h1 {
422       color: #fff;
423       font-size: 20px;
424       margin: 0 0 0 12px;
425       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
426       font-weight: 600;
427       vertical-align: middle;
428     }
429   }
430
431   &.light {
432     background-color: #fff;
433     box-shadow: 2px 0px 8px 0px rgba(29, 35, 41, 0.05);
434
435     .logo {
436       background: #fff;
437       box-shadow: 1px 1px 0px 0px #e8e8e8;
438
439       h1 {
440         color: unset;
441       }
442     }
443
444     .ant-menu-light {
445       border-right-color: transparent;
446     }
447   }
448 }
449
450 // 外置的样式控制
451 .user-dropdown-menu {
452   span {
453     user-select: none;
454   }
455 }
456 .user-dropdown-menu-wrapper.ant-dropdown-menu {
457   padding: 4px 0;
458
459   .ant-dropdown-menu-item {
460     width: 160px;
461   }
462
463   .ant-dropdown-menu-item > .anticon:first-child,
464   .ant-dropdown-menu-item > a > .anticon:first-child,
465   .ant-dropdown-menu-submenu-title > .anticon:first-child .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
466     min-width: 12px;
467     margin-right: 8px;
468   }
469 }
470
471 // 数据列表 样式
472 .table-alert {
473   margin-bottom: 16px;
474 }
475
476 .table-page-search-wrapper {
477   .ant-form-inline {
478     .ant-form-item {
479       display: flex;
480       margin-bottom: 24px;
481       margin-right: 0;
482
483       .ant-form-item-control-wrapper {
484         flex: 1 1;
485         display: inline-block;
486         vertical-align: middle;
487       }
488
489       > .ant-form-item-label {
490         line-height: 32px;
491         padding-right: 8px;
492         width: auto;
493       }
494       .ant-form-item-control {
495         height: 32px;
496         line-height: 32px;
497       }
498     }
499   }
500
501   .table-page-search-submitButtons {
502     display: block;
503     margin-bottom: 24px;
504     white-space: nowrap;
505   }
506 }
507
508 .content {
509   .table-operator {
510     margin-bottom: 18px;
511
512     button {
513       margin-right: 8px;
514     }
515   }
516 }