mooho-base-admin-plus 2.10.9 → 2.10.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/history.md +1 -0
  2. package/package/mooho-base-admin-plus.min.esm.js +4143 -3960
  3. package/package/mooho-base-admin-plus.min.js +61 -61
  4. package/package.json +1 -1
  5. package/src/components/view/modal-setting-filtering.vue +6 -6
  6. package/src/layouts/basic-layout/mixins/click-item.js +21 -21
  7. package/src/layouts/basic-layout/mixins/sider-menu-badge.js +13 -13
  8. package/src/layouts/basic-layout/water-mark/index.vue +29 -29
  9. package/src/libs/random_str.js +10 -10
  10. package/src/libs/water-mark.js +44 -44
  11. package/src/styles/common.less +47 -47
  12. package/src/styles/default/index.less +6 -6
  13. package/src/styles/font/iconfont.css +47 -47
  14. package/src/styles/font/iconfont.json +65 -65
  15. package/src/styles/layout/basic-layout/layout.less +527 -527
  16. package/src/styles/layout/basic-layout/menu.less +274 -274
  17. package/src/styles/layout/index.less +2 -2
  18. package/src/styles/setting.less +6 -6
  19. package/src/plugins/log/index.js +0 -25
package/src/styles/layout/basic-layout/layout.less CHANGED
@@ -1,527 +1,527 @@
1
- @menuSideWidthCollapse: @menuSideCollapseWidth;
2
- @menuHeaderHeight: @headerHeight;
3
- @headerTriggerMinPadding: 0 12px;
4
-
5
- .dropdownMobile(@height: 100%) {
6
- width: @height;
7
- .ivu-select-dropdown{
8
- left: 0 !important;
9
- right: 0;
10
- border-radius: 0;
11
- margin: 0;
12
- }
13
- }
14
-
15
- .i-layout{
16
- position: relative;
17
- &-header{
18
- width: 100%;
19
- height: @menuHeaderHeight;
20
- line-height: @menuHeaderHeight;
21
- background: #fff;
22
- padding: 0;
23
- box-shadow: 0 1px 4px rgba(0,21,41,.08);
24
- transition: all @transition-time @ease-in-out;
25
- z-index: 3;
26
- display: block;
27
-
28
- &-with-hide-sider{
29
- transition: none;
30
- }
31
-
32
- &-with-menu{
33
- display: flex;
34
- }
35
-
36
- &-color{
37
- &-light{
38
- .i-layout-menu-head{
39
- .ivu-menu-item-selected{
40
- color: @text-color !important;
41
- }
42
- }
43
- }
44
- &-dark{
45
- background: @menu-dark-title;
46
- .i-layout-menu-head:not(.i-layout-menu-head-mobile){
47
- .ivu-select-dropdown{
48
- background: @menu-dark-title;
49
- .ivu-menu-item{
50
- background: transparent;
51
- color: rgba(255,255,255,.7) !important;
52
- transition: @transition-time @ease-in-out;
53
- &:hover{
54
- background: transparent;
55
- color: #fff !important;
56
- }
57
- }
58
- }
59
- }
60
- }
61
- &-primary{
62
- background: #2173dc;
63
- background: -webkit-linear-gradient(to right, #1d42ab, #2173dc, #1e93ff);
64
- background: -moz-linear-gradient(to right, #1d42ab, #2173dc, #1e93ff);
65
- background: -o-linear-gradient(to right, #1d42ab, #2173dc, #1e93ff);
66
- background: linear-gradient(to right, #1d42ab, #2173dc, #1e93ff);
67
-
68
- .i-layout-header-search{
69
- .placeholder(fade(#fff, 70%));
70
- }
71
-
72
- .i-layout-menu-head{
73
- .ivu-select-dropdown{
74
- .ivu-menu-item{
75
- color: @text-color !important;
76
- transition: @transition-time @ease-in-out;
77
- &:hover{
78
- color: @text-color !important;
79
- background: @background-color-select-hover;
80
- }
81
- }
82
- }
83
- }
84
- }
85
-
86
- &-dark, &-primary{
87
- color: #fff;
88
- .i-layout-header-trigger:hover{
89
- background: fade(#fff, 5%);
90
- }
91
- .ivu-menu{
92
- background: transparent;
93
- }
94
- .ivu-menu-item{
95
- border-width: 3px !important;
96
- }
97
- .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu{
98
- color: fade(#fff, 70%);
99
- }
100
- .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover{
101
- color: #fff;
102
- border-bottom-color: #4fe3c1;
103
- }
104
-
105
- .i-layout-header-breadcrumb{
106
- .ivu-breadcrumb-item-link{
107
- color: fade(#fff, 70%);
108
- }
109
- a.ivu-breadcrumb-item-link:hover{
110
- color: #fff;
111
- }
112
- & > span:last-child .ivu-breadcrumb-item-link{
113
- color: #fff;
114
- }
115
- }
116
- }
117
- }
118
-
119
- &-fix{
120
- position: fixed;
121
- top: 0;
122
- right: 0;
123
- left: @menuSideWidth;
124
- z-index: 12;
125
- &-collapse{
126
- left: @menuSideWidthCollapse;
127
- }
128
- }
129
- &-stick{
130
- left: 0;
131
- z-index: 14;
132
- }
133
- &-mobile{
134
- left: 0;
135
- display: block;
136
- }
137
-
138
- &-logo{
139
- display: inline-block;
140
- height: @menuHeaderHeight;
141
- line-height: @menuHeaderHeight;
142
- &-stick{
143
- width: @menuSideWidth;
144
- text-align: center;
145
- }
146
- img{
147
- height: 80%;
148
- vertical-align: middle;
149
- }
150
- }
151
-
152
- &-trigger{
153
- display: inline-block;
154
- width: @menuHeaderHeight;
155
- height: @menuHeaderHeight;
156
- text-align: center;
157
- cursor: pointer;
158
- transition: all @transition-time @ease-in-out;
159
- &:hover{
160
- background: @trigger-background;
161
- }
162
- i{
163
- font-size: 20px;
164
- }
165
- &-min{
166
- width: auto;
167
- padding: @headerTriggerMinPadding;
168
-
169
- i{
170
- font-size: 18px;
171
- }
172
- }
173
- &-in{
174
- padding: 0;
175
- }
176
- &-no-height{
177
- height: auto;
178
- }
179
- &-nohover:hover{
180
- background: transparent !important;
181
- }
182
- }
183
-
184
- &-right{
185
- height: @menuHeaderHeight;
186
- float: right;
187
- }
188
-
189
- &-user{
190
- &-name{
191
- margin-left: 12px;
192
- }
193
- .ivu-dropdown-item{
194
- font-size: 14px !important;
195
- text-align: left;
196
- i,span{
197
- vertical-align: middle;
198
- }
199
- i{
200
- margin-right: 6px;
201
- }
202
- }
203
- &-mobile{
204
- .dropdownMobile(auto);
205
- }
206
- }
207
- &-notice{
208
- .ivu-notifications-rel{
209
- padding: @headerTriggerMinPadding;
210
- }
211
- &-mobile{
212
- .dropdownMobile();
213
- }
214
- }
215
- &-i18n{
216
- .ivu-dropdown-item{
217
- text-align: left;
218
- img{
219
- height: 14px;
220
- vertical-align: middle;
221
- margin-right: 2px;
222
- }
223
- span{
224
- vertical-align: middle;
225
- }
226
- }
227
- .ivu-notifications-rel{
228
- padding: @headerTriggerMinPadding;
229
- }
230
- &-mobile{
231
- .dropdownMobile(auto);
232
- }
233
- }
234
-
235
- &-search{
236
- outline: none;
237
- border: none;
238
- background: transparent;
239
- color: inherit;
240
- .placeholder();
241
-
242
- &-drop{
243
- .dropdownMobile(auto);
244
- .ivu-select-dropdown{
245
- line-height: normal;
246
- }
247
- }
248
- }
249
-
250
- &-setting{
251
- &-title{
252
- margin: 12px 0;
253
- color: @title-color;
254
- font-size: @font-size-base;
255
- font-weight: 500;
256
- }
257
- &-item{
258
- display: flex;
259
- align-items: center;
260
- padding: 12px 0;
261
- &-radio{
262
- display: inline-block;
263
- position: relative;
264
- margin-right: 16px;
265
- cursor: pointer;
266
-
267
- &:after{
268
- content: '';
269
- display: block;
270
- width: 6px;
271
- height: 6px;
272
- border-radius: 6px;
273
- background: transparent;
274
- margin: 0 auto;
275
- }
276
- &.on:after{
277
- background: @success-color;
278
- }
279
- }
280
-
281
- &-desc{
282
- flex: 1 1;
283
- font-size: @font-size-base;
284
- }
285
- &-action{
286
- flex: 0 0 auto;
287
- }
288
-
289
- &-disabled &-desc{
290
- opacity: 0.5;
291
- }
292
- }
293
- }
294
-
295
- &-breadcrumb{
296
- display: inline-block;
297
- .ivu-breadcrumb-item-link{
298
- color: inherit;
299
- }
300
- & > span:last-child{
301
- font-weight: normal;
302
- }
303
- .ivu-breadcrumb-item-separator{
304
- vertical-align: middle;
305
- }
306
- }
307
- }
308
-
309
- &-sider{
310
- min-height: 100vh;
311
- background: #fff;
312
- box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);
313
- position: relative;
314
- z-index: 13;
315
-
316
- &-fix{
317
- position: fixed;
318
- top: 0;
319
- left: 0;
320
-
321
- .i-layout-menu-side{
322
- height: calc(~'100vh - @{menuHeaderHeight}');
323
- overflow-y: auto;
324
- }
325
- }
326
-
327
- &-dark{
328
- background: @menu-dark-title;
329
- box-shadow: 2px 0 6px rgba(0,21,41,.35);
330
- }
331
-
332
- &-logo{
333
- height: @menuHeaderHeight - 1;
334
- line-height: @menuHeaderHeight - 1;
335
- text-align: center;
336
- border-bottom: 1px solid #f8f8f9;
337
- overflow: hidden;
338
- &-dark{
339
- border-bottom: 1px solid @menu-dark-active-bg;
340
- background: @menu-dark-title;
341
- }
342
- img{
343
- height: 80%;
344
- vertical-align: middle;
345
- }
346
- }
347
- }
348
-
349
- &-content{
350
- &-flex{
351
- display: flex;
352
- }
353
- &-fix-with-header{
354
- padding-top: @menuHeaderHeight;
355
- }
356
- &-main{
357
- margin: 24px;
358
- position: relative;
359
- &-flex{
360
- flex: auto;
361
- }
362
- &-no-margin{
363
- margin: 0;
364
- }
365
- }
366
- &-with-tabs &-main{
367
- margin-top: 0;
368
- }
369
- &-with-tabs-fix &-main{
370
- margin-top: 44px;
371
- .i-layout-page-header{
372
- margin-top: 0;
373
- }
374
- }
375
- }
376
-
377
- &-inside{
378
- min-height: 100vh;
379
- transition: all @transition-time @ease-in-out;
380
- &-fix-with-sider{
381
- padding-left: @menuSideWidth;
382
- &-collapse{
383
- padding-left: @menuSideWidthCollapse;
384
- }
385
- }
386
- &-mobile{
387
- padding-left: 0;
388
- }
389
- &-with-hide-sider{
390
- padding-left: 0;
391
- }
392
- }
393
-
394
- &-drawer{
395
- .ivu-drawer-body{
396
- padding: 0;
397
- overflow: visible;
398
- }
399
- .i-layout-menu-side{
400
- height: calc(~'100vh - @{menuHeaderHeight}');
401
- overflow-y: auto;
402
- }
403
- &-dark{
404
- .ivu-drawer-body{
405
- background: @menu-dark-title;
406
- }
407
- }
408
- }
409
-
410
- &-tabs{
411
- width: 100%;
412
- background-color: @layout-body-background;
413
- transition: all @transition-time @ease-in-out;
414
- &-fix{
415
- position: fixed;
416
- z-index: 11;
417
- }
418
- &-main{
419
- background: @layout-body-background;
420
- padding: 6px 0;
421
- margin: 0 12px 0 12px;
422
- display: flex;
423
-
424
- .ivu-tabs{
425
- -webkit-box-flex: 1;
426
- -ms-flex-positive: 1;
427
- flex-grow: 1;
428
- -ms-flex-negative: 1;
429
- flex-shrink: 1;
430
- }
431
- }
432
-
433
- .ivu-tabs-nav-container{
434
- margin-bottom: 0;
435
- }
436
- .ivu-tabs-bar{
437
- border-bottom: none;
438
- margin-bottom: 0;
439
- }
440
- .ivu-tabs-ink-bar{
441
- display: none;
442
- }
443
- .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
444
- height: 32px;
445
- background: #fff;
446
- border-radius: 3px;
447
- border: none;
448
- margin-right: 6px;
449
- color: #808695;
450
- &:hover{
451
- color: #515a6e;
452
- }
453
- }
454
- .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
455
- height: 32px;
456
- background: #fff;
457
- color: @primary-color;
458
- &:hover{
459
- color: @primary-color;
460
- }
461
- }
462
- .ivu-tabs-nav-scrollable{
463
- padding: 0 32px;
464
- }
465
- .ivu-tabs-nav-prev, .ivu-tabs-nav-next{
466
- width: 32px;
467
- text-align: center;
468
- i{
469
- font-size: 16px;
470
- }
471
- }
472
- .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab .ivu-icon-ios-close{
473
- width: 22px;
474
- transform: translateZ(0);
475
- margin-right: -6px;
476
- }
477
-
478
- &-title{
479
- display: inline-block;
480
- img, i{
481
- display: inline-block;
482
- height: 20px;
483
- vertical-align: middle;
484
- margin-right: 8px;
485
- }
486
- span{
487
- display: inline-block;
488
- vertical-align: middle;
489
- }
490
- }
491
-
492
- &-close{
493
- -webkit-box-flex: 0;
494
- -ms-flex-positive: 0;
495
- flex-grow: 0;
496
- -ms-flex-negative: 0;
497
- flex-shrink: 0;
498
- &-main{
499
- width: 32px;
500
- height: 32px;
501
- line-height: 32px;
502
- text-align: center;
503
- background-color: #fff;
504
- border-radius: 2px;
505
- cursor: pointer;
506
- i{
507
- font-size: 16px;
508
- }
509
- }
510
- }
511
- }
512
-
513
- &-page-header{
514
- margin: -24px -24px 0px;
515
- }
516
-
517
- &-content-with-tabs:not(&-content-with-tabs-fix) &-page-header {
518
- margin-top: 0;
519
- }
520
- }
521
-
522
- .fade-quick-enter-active, .fade-quick-leave-active {
523
- transition: opacity .2s;
524
- }
525
- .fade-quick-enter-from, .fade-quick-leave-to {
526
- opacity: 0;
527
- }
1
+ @menuSideWidthCollapse: @menuSideCollapseWidth;
2
+ @menuHeaderHeight: @headerHeight;
3
+ @headerTriggerMinPadding: 0 12px;
4
+
5
+ .dropdownMobile(@height: 100%) {
6
+ width: @height;
7
+ .ivu-select-dropdown{
8
+ left: 0 !important;
9
+ right: 0;
10
+ border-radius: 0;
11
+ margin: 0;
12
+ }
13
+ }
14
+
15
+ .i-layout{
16
+ position: relative;
17
+ &-header{
18
+ width: 100%;
19
+ height: @menuHeaderHeight;
20
+ line-height: @menuHeaderHeight;
21
+ background: #fff;
22
+ padding: 0;
23
+ box-shadow: 0 1px 4px rgba(0,21,41,.08);
24
+ transition: all @transition-time @ease-in-out;
25
+ z-index: 3;
26
+ display: block;
27
+
28
+ &-with-hide-sider{
29
+ transition: none;
30
+ }
31
+
32
+ &-with-menu{
33
+ display: flex;
34
+ }
35
+
36
+ &-color{
37
+ &-light{
38
+ .i-layout-menu-head{
39
+ .ivu-menu-item-selected{
40
+ color: @text-color !important;
41
+ }
42
+ }
43
+ }
44
+ &-dark{
45
+ background: @menu-dark-title;
46
+ .i-layout-menu-head:not(.i-layout-menu-head-mobile){
47
+ .ivu-select-dropdown{
48
+ background: @menu-dark-title;
49
+ .ivu-menu-item{
50
+ background: transparent;
51
+ color: rgba(255,255,255,.7) !important;
52
+ transition: @transition-time @ease-in-out;
53
+ &:hover{
54
+ background: transparent;
55
+ color: #fff !important;
56
+ }
57
+ }
58
+ }
59
+ }
60
+ }
61
+ &-primary{
62
+ background: #2173dc;
63
+ background: -webkit-linear-gradient(to right, #1d42ab, #2173dc, #1e93ff);
64
+ background: -moz-linear-gradient(to right, #1d42ab, #2173dc, #1e93ff);
65
+ background: -o-linear-gradient(to right, #1d42ab, #2173dc, #1e93ff);
66
+ background: linear-gradient(to right, #1d42ab, #2173dc, #1e93ff);
67
+
68
+ .i-layout-header-search{
69
+ .placeholder(fade(#fff, 70%));
70
+ }
71
+
72
+ .i-layout-menu-head{
73
+ .ivu-select-dropdown{
74
+ .ivu-menu-item{
75
+ color: @text-color !important;
76
+ transition: @transition-time @ease-in-out;
77
+ &:hover{
78
+ color: @text-color !important;
79
+ background: @background-color-select-hover;
80
+ }
81
+ }
82
+ }
83
+ }
84
+ }
85
+
86
+ &-dark, &-primary{
87
+ color: #fff;
88
+ .i-layout-header-trigger:hover{
89
+ background: fade(#fff, 5%);
90
+ }
91
+ .ivu-menu{
92
+ background: transparent;
93
+ }
94
+ .ivu-menu-item{
95
+ border-width: 3px !important;
96
+ }
97
+ .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu{
98
+ color: fade(#fff, 70%);
99
+ }
100
+ .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover{
101
+ color: #fff;
102
+ border-bottom-color: #4fe3c1;
103
+ }
104
+
105
+ .i-layout-header-breadcrumb{
106
+ .ivu-breadcrumb-item-link{
107
+ color: fade(#fff, 70%);
108
+ }
109
+ a.ivu-breadcrumb-item-link:hover{
110
+ color: #fff;
111
+ }
112
+ & > span:last-child .ivu-breadcrumb-item-link{
113
+ color: #fff;
114
+ }
115
+ }
116
+ }
117
+ }
118
+
119
+ &-fix{
120
+ position: fixed;
121
+ top: 0;
122
+ right: 0;
123
+ left: @menuSideWidth;
124
+ z-index: 12;
125
+ &-collapse{
126
+ left: @menuSideWidthCollapse;
127
+ }
128
+ }
129
+ &-stick{
130
+ left: 0;
131
+ z-index: 14;
132
+ }
133
+ &-mobile{
134
+ left: 0;
135
+ display: block;
136
+ }
137
+
138
+ &-logo{
139
+ display: inline-block;
140
+ height: @menuHeaderHeight;
141
+ line-height: @menuHeaderHeight;
142
+ &-stick{
143
+ width: @menuSideWidth;
144
+ text-align: center;
145
+ }
146
+ img{
147
+ height: 80%;
148
+ vertical-align: middle;
149
+ }
150
+ }
151
+
152
+ &-trigger{
153
+ display: inline-block;
154
+ width: @menuHeaderHeight;
155
+ height: @menuHeaderHeight;
156
+ text-align: center;
157
+ cursor: pointer;
158
+ transition: all @transition-time @ease-in-out;
159
+ &:hover{
160
+ background: @trigger-background;
161
+ }
162
+ i{
163
+ font-size: 20px;
164
+ }
165
+ &-min{
166
+ width: auto;
167
+ padding: @headerTriggerMinPadding;
168
+
169
+ i{
170
+ font-size: 18px;
171
+ }
172
+ }
173
+ &-in{
174
+ padding: 0;
175
+ }
176
+ &-no-height{
177
+ height: auto;
178
+ }
179
+ &-nohover:hover{
180
+ background: transparent !important;
181
+ }
182
+ }
183
+
184
+ &-right{
185
+ height: @menuHeaderHeight;
186
+ float: right;
187
+ }
188
+
189
+ &-user{
190
+ &-name{
191
+ margin-left: 12px;
192
+ }
193
+ .ivu-dropdown-item{
194
+ font-size: 14px !important;
195
+ text-align: left;
196
+ i,span{
197
+ vertical-align: middle;
198
+ }
199
+ i{
200
+ margin-right: 6px;
201
+ }
202
+ }
203
+ &-mobile{
204
+ .dropdownMobile(auto);
205
+ }
206
+ }
207
+ &-notice{
208
+ .ivu-notifications-rel{
209
+ padding: @headerTriggerMinPadding;
210
+ }
211
+ &-mobile{
212
+ .dropdownMobile();
213
+ }
214
+ }
215
+ &-i18n{
216
+ .ivu-dropdown-item{
217
+ text-align: left;
218
+ img{
219
+ height: 14px;
220
+ vertical-align: middle;
221
+ margin-right: 2px;
222
+ }
223
+ span{
224
+ vertical-align: middle;
225
+ }
226
+ }
227
+ .ivu-notifications-rel{
228
+ padding: @headerTriggerMinPadding;
229
+ }
230
+ &-mobile{
231
+ .dropdownMobile(auto);
232
+ }
233
+ }
234
+
235
+ &-search{
236
+ outline: none;
237
+ border: none;
238
+ background: transparent;
239
+ color: inherit;
240
+ .placeholder();
241
+
242
+ &-drop{
243
+ .dropdownMobile(auto);
244
+ .ivu-select-dropdown{
245
+ line-height: normal;
246
+ }
247
+ }
248
+ }
249
+
250
+ &-setting{
251
+ &-title{
252
+ margin: 12px 0;
253
+ color: @title-color;
254
+ font-size: @font-size-base;
255
+ font-weight: 500;
256
+ }
257
+ &-item{
258
+ display: flex;
259
+ align-items: center;
260
+ padding: 12px 0;
261
+ &-radio{
262
+ display: inline-block;
263
+ position: relative;
264
+ margin-right: 16px;
265
+ cursor: pointer;
266
+
267
+ &:after{
268
+ content: '';
269
+ display: block;
270
+ width: 6px;
271
+ height: 6px;
272
+ border-radius: 6px;
273
+ background: transparent;
274
+ margin: 0 auto;
275
+ }
276
+ &.on:after{
277
+ background: @success-color;
278
+ }
279
+ }
280
+
281
+ &-desc{
282
+ flex: 1 1;
283
+ font-size: @font-size-base;
284
+ }
285
+ &-action{
286
+ flex: 0 0 auto;
287
+ }
288
+
289
+ &-disabled &-desc{
290
+ opacity: 0.5;
291
+ }
292
+ }
293
+ }
294
+
295
+ &-breadcrumb{
296
+ display: inline-block;
297
+ .ivu-breadcrumb-item-link{
298
+ color: inherit;
299
+ }
300
+ & > span:last-child{
301
+ font-weight: normal;
302
+ }
303
+ .ivu-breadcrumb-item-separator{
304
+ vertical-align: middle;
305
+ }
306
+ }
307
+ }
308
+
309
+ &-sider{
310
+ min-height: 100vh;
311
+ background: #fff;
312
+ box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);
313
+ position: relative;
314
+ z-index: 13;
315
+
316
+ &-fix{
317
+ position: fixed;
318
+ top: 0;
319
+ left: 0;
320
+
321
+ .i-layout-menu-side{
322
+ height: calc(~'100vh - @{menuHeaderHeight}');
323
+ overflow-y: auto;
324
+ }
325
+ }
326
+
327
+ &-dark{
328
+ background: @menu-dark-title;
329
+ box-shadow: 2px 0 6px rgba(0,21,41,.35);
330
+ }
331
+
332
+ &-logo{
333
+ height: @menuHeaderHeight - 1;
334
+ line-height: @menuHeaderHeight - 1;
335
+ text-align: center;
336
+ border-bottom: 1px solid #f8f8f9;
337
+ overflow: hidden;
338
+ &-dark{
339
+ border-bottom: 1px solid @menu-dark-active-bg;
340
+ background: @menu-dark-title;
341
+ }
342
+ img{
343
+ height: 80%;
344
+ vertical-align: middle;
345
+ }
346
+ }
347
+ }
348
+
349
+ &-content{
350
+ &-flex{
351
+ display: flex;
352
+ }
353
+ &-fix-with-header{
354
+ padding-top: @menuHeaderHeight;
355
+ }
356
+ &-main{
357
+ margin: 24px;
358
+ position: relative;
359
+ &-flex{
360
+ flex: auto;
361
+ }
362
+ &-no-margin{
363
+ margin: 0;
364
+ }
365
+ }
366
+ &-with-tabs &-main{
367
+ margin-top: 0;
368
+ }
369
+ &-with-tabs-fix &-main{
370
+ margin-top: 44px;
371
+ .i-layout-page-header{
372
+ margin-top: 0;
373
+ }
374
+ }
375
+ }
376
+
377
+ &-inside{
378
+ min-height: 100vh;
379
+ transition: all @transition-time @ease-in-out;
380
+ &-fix-with-sider{
381
+ padding-left: @menuSideWidth;
382
+ &-collapse{
383
+ padding-left: @menuSideWidthCollapse;
384
+ }
385
+ }
386
+ &-mobile{
387
+ padding-left: 0;
388
+ }
389
+ &-with-hide-sider{
390
+ padding-left: 0;
391
+ }
392
+ }
393
+
394
+ &-drawer{
395
+ .ivu-drawer-body{
396
+ padding: 0;
397
+ overflow: visible;
398
+ }
399
+ .i-layout-menu-side{
400
+ height: calc(~'100vh - @{menuHeaderHeight}');
401
+ overflow-y: auto;
402
+ }
403
+ &-dark{
404
+ .ivu-drawer-body{
405
+ background: @menu-dark-title;
406
+ }
407
+ }
408
+ }
409
+
410
+ &-tabs{
411
+ width: 100%;
412
+ background-color: @layout-body-background;
413
+ transition: all @transition-time @ease-in-out;
414
+ &-fix{
415
+ position: fixed;
416
+ z-index: 11;
417
+ }
418
+ &-main{
419
+ background: @layout-body-background;
420
+ padding: 6px 0;
421
+ margin: 0 12px 0 12px;
422
+ display: flex;
423
+
424
+ .ivu-tabs{
425
+ -webkit-box-flex: 1;
426
+ -ms-flex-positive: 1;
427
+ flex-grow: 1;
428
+ -ms-flex-negative: 1;
429
+ flex-shrink: 1;
430
+ }
431
+ }
432
+
433
+ .ivu-tabs-nav-container{
434
+ margin-bottom: 0;
435
+ }
436
+ .ivu-tabs-bar{
437
+ border-bottom: none;
438
+ margin-bottom: 0;
439
+ }
440
+ .ivu-tabs-ink-bar{
441
+ display: none;
442
+ }
443
+ .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
444
+ height: 32px;
445
+ background: #fff;
446
+ border-radius: 3px;
447
+ border: none;
448
+ margin-right: 6px;
449
+ color: #808695;
450
+ &:hover{
451
+ color: #515a6e;
452
+ }
453
+ }
454
+ .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
455
+ height: 32px;
456
+ background: #fff;
457
+ color: @primary-color;
458
+ &:hover{
459
+ color: @primary-color;
460
+ }
461
+ }
462
+ .ivu-tabs-nav-scrollable{
463
+ padding: 0 32px;
464
+ }
465
+ .ivu-tabs-nav-prev, .ivu-tabs-nav-next{
466
+ width: 32px;
467
+ text-align: center;
468
+ i{
469
+ font-size: 16px;
470
+ }
471
+ }
472
+ .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab .ivu-icon-ios-close{
473
+ width: 22px;
474
+ transform: translateZ(0);
475
+ margin-right: -6px;
476
+ }
477
+
478
+ &-title{
479
+ display: inline-block;
480
+ img, i{
481
+ display: inline-block;
482
+ height: 20px;
483
+ vertical-align: middle;
484
+ margin-right: 8px;
485
+ }
486
+ span{
487
+ display: inline-block;
488
+ vertical-align: middle;
489
+ }
490
+ }
491
+
492
+ &-close{
493
+ -webkit-box-flex: 0;
494
+ -ms-flex-positive: 0;
495
+ flex-grow: 0;
496
+ -ms-flex-negative: 0;
497
+ flex-shrink: 0;
498
+ &-main{
499
+ width: 32px;
500
+ height: 32px;
501
+ line-height: 32px;
502
+ text-align: center;
503
+ background-color: #fff;
504
+ border-radius: 2px;
505
+ cursor: pointer;
506
+ i{
507
+ font-size: 16px;
508
+ }
509
+ }
510
+ }
511
+ }
512
+
513
+ &-page-header{
514
+ margin: -24px -24px 0px;
515
+ }
516
+
517
+ &-content-with-tabs:not(&-content-with-tabs-fix) &-page-header {
518
+ margin-top: 0;
519
+ }
520
+ }
521
+
522
+ .fade-quick-enter-active, .fade-quick-leave-active {
523
+ transition: opacity .2s;
524
+ }
525
+ .fade-quick-enter-from, .fade-quick-leave-to {
526
+ opacity: 0;
527
+ }