cfel-base-components 2.5.46 → 2.5.48
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.
- package/demo/src/index.jsx +40 -84
- package/package.json +1 -1
- package/src/.umi/core/helmet.ts +1 -1
- package/src/components/layout/index.scss +416 -210
- package/src/components/layout/index.tsx +262 -108
- package/src/components/{layout → layout-console}/index-console.scss +317 -84
- package/src/components/layout-console/index.tsx +712 -0
- package/src/components/layout-console/user-card/index.scss +180 -0
- package/src/components/layout-console/user-card/index.tsx +162 -0
- package/src/global.d.ts +2 -0
- package/src/index.tsx +25 -27
- package/.vscode/settings.json +0 -3
|
@@ -1,21 +1,100 @@
|
|
|
1
1
|
$menuPrefixCls: rc-menu;
|
|
2
2
|
|
|
3
|
+
.ant-layout {
|
|
4
|
+
background: linear-gradient(223deg, #fef8ff 0%, #eceefe 29%, #fff9fe 100%) !important;
|
|
5
|
+
box-shadow: inset 0px -1px 0px 0px #edeefd !important;
|
|
6
|
+
}
|
|
7
|
+
|
|
3
8
|
ul {
|
|
4
9
|
list-style: none;
|
|
5
10
|
padding: 0;
|
|
6
11
|
margin: 0;
|
|
7
12
|
}
|
|
8
13
|
|
|
9
|
-
.layout-menu {
|
|
10
|
-
|
|
14
|
+
.layout-menu-console {
|
|
15
|
+
border-radius: 16px;
|
|
16
|
+
height: calc(100% - 107px);
|
|
11
17
|
overflow-y: scroll;
|
|
12
18
|
|
|
13
|
-
.menu {
|
|
19
|
+
.menu-console {
|
|
14
20
|
padding: 0;
|
|
15
21
|
margin: 0;
|
|
16
22
|
list-style: none;
|
|
17
23
|
cursor: pointer;
|
|
18
24
|
|
|
25
|
+
> li {
|
|
26
|
+
&:hover {
|
|
27
|
+
> .menu-item-content {
|
|
28
|
+
.menu-item-icon,
|
|
29
|
+
.menu-item-label {
|
|
30
|
+
color: #fff;
|
|
31
|
+
font-weight: 500;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.rc-menu-submenu {
|
|
38
|
+
&:hover {
|
|
39
|
+
> .rc-menu-submenu-title {
|
|
40
|
+
.menu-item-icon,
|
|
41
|
+
.menu-item-label {
|
|
42
|
+
color: #fff;
|
|
43
|
+
font-weight: 500;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.#{$menuPrefixCls}-submenu-arrow {
|
|
47
|
+
&::before,
|
|
48
|
+
&::after {
|
|
49
|
+
background: #fff;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.rc-menu-submenu {
|
|
57
|
+
.rc-menu-submenu-title {
|
|
58
|
+
position: relative;
|
|
59
|
+
|
|
60
|
+
.menu-item-content {
|
|
61
|
+
.menu-item-icon,
|
|
62
|
+
.menu-item-label {
|
|
63
|
+
transition: all 0.3s ease-in-out;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&:hover {
|
|
68
|
+
.menu-item-content {
|
|
69
|
+
.menu-item-icon,
|
|
70
|
+
.menu-item-label {
|
|
71
|
+
color: #fff;
|
|
72
|
+
font-weight: 500;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.#{$menuPrefixCls}-submenu-arrow {
|
|
77
|
+
&::before,
|
|
78
|
+
&::after {
|
|
79
|
+
background: #fff;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.rc-menu-item {
|
|
86
|
+
&:hover {
|
|
87
|
+
.menu-item-content {
|
|
88
|
+
.menu-item-icon,
|
|
89
|
+
.menu-item-label {
|
|
90
|
+
color: #fff;
|
|
91
|
+
font-weight: 500;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
19
98
|
.rc-menu-submenu-title {
|
|
20
99
|
position: relative;
|
|
21
100
|
}
|
|
@@ -27,7 +106,7 @@ ul {
|
|
|
27
106
|
.menu-item-content {
|
|
28
107
|
font-weight: 400;
|
|
29
108
|
font-size: 14px;
|
|
30
|
-
line-height:
|
|
109
|
+
line-height: 50px;
|
|
31
110
|
text-align: left;
|
|
32
111
|
}
|
|
33
112
|
|
|
@@ -56,15 +135,15 @@ ul {
|
|
|
56
135
|
}
|
|
57
136
|
|
|
58
137
|
.sub-li {
|
|
59
|
-
background: #5b73deee;
|
|
60
138
|
position: relative;
|
|
61
139
|
z-index: 9;
|
|
140
|
+
line-height: 52px;
|
|
62
141
|
|
|
63
142
|
&::before {
|
|
64
143
|
content: '';
|
|
65
144
|
position: absolute;
|
|
66
145
|
left: 31px;
|
|
67
|
-
top:
|
|
146
|
+
top: 24px;
|
|
68
147
|
width: 5px;
|
|
69
148
|
height: 5px;
|
|
70
149
|
background: #8f9cec;
|
|
@@ -79,7 +158,7 @@ ul {
|
|
|
79
158
|
top: 0 !important;
|
|
80
159
|
width: 1px;
|
|
81
160
|
height: 100%;
|
|
82
|
-
background:
|
|
161
|
+
background: #929df7;
|
|
83
162
|
z-index: 0;
|
|
84
163
|
}
|
|
85
164
|
|
|
@@ -92,7 +171,7 @@ ul {
|
|
|
92
171
|
}
|
|
93
172
|
|
|
94
173
|
&:first-child::after {
|
|
95
|
-
top:
|
|
174
|
+
top: 24px !important;
|
|
96
175
|
}
|
|
97
176
|
|
|
98
177
|
&.rc-menu-submenu-selected {
|
|
@@ -114,13 +193,18 @@ ul {
|
|
|
114
193
|
box-shadow: 0px 0px 30px 0px transparent;
|
|
115
194
|
|
|
116
195
|
&.rc-menu-item-selected {
|
|
196
|
+
.menu-item-content {
|
|
197
|
+
width: 100%;
|
|
198
|
+
padding-right: 24px;
|
|
199
|
+
}
|
|
117
200
|
.menu-item-label {
|
|
118
201
|
color: #fff;
|
|
119
202
|
font-weight: 500;
|
|
120
203
|
display: flex;
|
|
121
204
|
align-items: center;
|
|
122
205
|
padding-left: 12px;
|
|
123
|
-
width:
|
|
206
|
+
width: 100%;
|
|
207
|
+
padding-right: 24px;
|
|
124
208
|
height: 40px;
|
|
125
209
|
background: rgba(255, 255, 255, 0.05);
|
|
126
210
|
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
|
|
@@ -134,18 +218,24 @@ ul {
|
|
|
134
218
|
}
|
|
135
219
|
|
|
136
220
|
.grand-li {
|
|
137
|
-
background: #
|
|
221
|
+
background: #206abd;
|
|
138
222
|
position: relative;
|
|
139
223
|
z-index: 9;
|
|
140
|
-
height: 52px;
|
|
224
|
+
line-height: 52px;
|
|
141
225
|
display: flex;
|
|
142
226
|
align-items: center;
|
|
227
|
+
margin-left: 2px;
|
|
228
|
+
width: 252px;
|
|
229
|
+
|
|
230
|
+
&:last-child {
|
|
231
|
+
box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.05);
|
|
232
|
+
}
|
|
143
233
|
|
|
144
234
|
&::before {
|
|
145
235
|
content: '';
|
|
146
236
|
position: absolute;
|
|
147
|
-
left:
|
|
148
|
-
top:
|
|
237
|
+
left: 49px;
|
|
238
|
+
top: 50%;
|
|
149
239
|
width: 5px;
|
|
150
240
|
height: 5px;
|
|
151
241
|
background: #8f9cec;
|
|
@@ -157,11 +247,11 @@ ul {
|
|
|
157
247
|
&::after {
|
|
158
248
|
content: '';
|
|
159
249
|
position: absolute;
|
|
160
|
-
left:
|
|
250
|
+
left: 51px;
|
|
161
251
|
top: 0;
|
|
162
252
|
width: 1px;
|
|
163
253
|
height: 100%;
|
|
164
|
-
background:
|
|
254
|
+
background: #929df7;
|
|
165
255
|
z-index: 1;
|
|
166
256
|
}
|
|
167
257
|
|
|
@@ -174,15 +264,22 @@ ul {
|
|
|
174
264
|
}
|
|
175
265
|
|
|
176
266
|
&:first-child::after {
|
|
177
|
-
top:
|
|
267
|
+
top: 50% !important;
|
|
178
268
|
}
|
|
179
269
|
|
|
180
270
|
&.rc-menu-item-selected {
|
|
271
|
+
.menu-item-content {
|
|
272
|
+
width: 100%;
|
|
273
|
+
padding-right: 24px;
|
|
274
|
+
height: 52px;
|
|
275
|
+
display: flex;
|
|
276
|
+
align-items: center;
|
|
277
|
+
}
|
|
181
278
|
.menu-item-label {
|
|
182
279
|
display: flex;
|
|
183
280
|
align-items: center;
|
|
184
281
|
padding-left: 12px;
|
|
185
|
-
width:
|
|
282
|
+
width: 100%;
|
|
186
283
|
height: 40px;
|
|
187
284
|
background: rgba(255, 255, 255, 0.05);
|
|
188
285
|
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
|
|
@@ -196,10 +293,20 @@ ul {
|
|
|
196
293
|
background: rgba(255, 255, 255);
|
|
197
294
|
}
|
|
198
295
|
}
|
|
296
|
+
|
|
297
|
+
&:hover {
|
|
298
|
+
> .menu-item-content {
|
|
299
|
+
.menu-item-icon,
|
|
300
|
+
.iconfont,
|
|
301
|
+
.menu-item-label {
|
|
302
|
+
color: #fff;
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
}
|
|
199
306
|
}
|
|
200
307
|
}
|
|
201
308
|
|
|
202
|
-
.menu-collapsed {
|
|
309
|
+
.menu-collapsed-console {
|
|
203
310
|
display: flex;
|
|
204
311
|
flex-direction: column;
|
|
205
312
|
align-items: center;
|
|
@@ -222,7 +329,6 @@ ul {
|
|
|
222
329
|
}
|
|
223
330
|
}
|
|
224
331
|
|
|
225
|
-
$header-height: 62px;
|
|
226
332
|
$header-height: 62px;
|
|
227
333
|
$base-color: #c6538c;
|
|
228
334
|
|
|
@@ -230,7 +336,7 @@ body {
|
|
|
230
336
|
overflow: hidden;
|
|
231
337
|
}
|
|
232
338
|
|
|
233
|
-
.layout-warps {
|
|
339
|
+
.layout-warps-console {
|
|
234
340
|
display: flex;
|
|
235
341
|
padding: 12px;
|
|
236
342
|
background-color: #f3f6fd;
|
|
@@ -239,21 +345,21 @@ body {
|
|
|
239
345
|
display: none;
|
|
240
346
|
}
|
|
241
347
|
|
|
242
|
-
.trigger {
|
|
243
|
-
margin-
|
|
348
|
+
.trigger-console {
|
|
349
|
+
margin-right: 16px;
|
|
244
350
|
width: 30px;
|
|
245
351
|
height: 30px;
|
|
246
|
-
background:
|
|
352
|
+
background: rgba(255, 255, 255, 0.05);
|
|
247
353
|
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
|
|
248
354
|
border-radius: 4px;
|
|
249
|
-
border: 1px solid rgba(255, 255, 255, 0.
|
|
355
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
250
356
|
backdrop-filter: blur(10px);
|
|
251
357
|
display: flex;
|
|
252
358
|
justify-content: center;
|
|
253
359
|
align-items: center;
|
|
254
360
|
}
|
|
255
361
|
|
|
256
|
-
.close-trigger {
|
|
362
|
+
.close-trigger-console {
|
|
257
363
|
margin-top: 24px;
|
|
258
364
|
width: 30px;
|
|
259
365
|
height: 30px;
|
|
@@ -267,18 +373,35 @@ body {
|
|
|
267
373
|
align-items: center;
|
|
268
374
|
}
|
|
269
375
|
|
|
270
|
-
.search {
|
|
271
|
-
|
|
376
|
+
.search-console {
|
|
377
|
+
position: relative;
|
|
378
|
+
z-index: 99;
|
|
272
379
|
height: 40px;
|
|
380
|
+
color: #fff;
|
|
381
|
+
background: #5b6ecf;
|
|
273
382
|
box-shadow:
|
|
274
383
|
inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05),
|
|
275
|
-
inset 0px -2px 0px 0px
|
|
384
|
+
inset 0px -2px 0px 0px #ffffff22;
|
|
276
385
|
border-radius: 10px;
|
|
277
|
-
|
|
278
|
-
background: url('https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-search-bg-console.png')
|
|
279
|
-
no-repeat;
|
|
386
|
+
background-size: 50%;
|
|
280
387
|
background-position-x: right;
|
|
281
|
-
|
|
388
|
+
|
|
389
|
+
&:hover {
|
|
390
|
+
background: rgba(0, 0, 0, 0.05);
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.search-bg-mask {
|
|
394
|
+
position: absolute;
|
|
395
|
+
top: 0;
|
|
396
|
+
right: 0;
|
|
397
|
+
width: 93px;
|
|
398
|
+
height: 38px;
|
|
399
|
+
|
|
400
|
+
img {
|
|
401
|
+
width: 93px;
|
|
402
|
+
height: 37px;
|
|
403
|
+
}
|
|
404
|
+
}
|
|
282
405
|
|
|
283
406
|
.search-input {
|
|
284
407
|
width: 100%;
|
|
@@ -292,7 +415,7 @@ body {
|
|
|
292
415
|
color: #ffffff;
|
|
293
416
|
|
|
294
417
|
&::placeholder {
|
|
295
|
-
color: rgba(255, 255, 255, 0.
|
|
418
|
+
color: rgba(255, 255, 255, 0.65);
|
|
296
419
|
}
|
|
297
420
|
|
|
298
421
|
// 为了兼容不同浏览器
|
|
@@ -308,20 +431,18 @@ body {
|
|
|
308
431
|
.search-icon {
|
|
309
432
|
position: absolute;
|
|
310
433
|
left: 12px;
|
|
311
|
-
top:
|
|
312
|
-
transform: translateY(-50%);
|
|
434
|
+
top: 11px;
|
|
313
435
|
}
|
|
314
436
|
|
|
315
437
|
.search-command {
|
|
316
438
|
position: absolute;
|
|
317
439
|
right: 4px;
|
|
318
|
-
top:
|
|
319
|
-
transform: translateY(-50%);
|
|
440
|
+
top: 4px;
|
|
320
441
|
width: 40px;
|
|
321
442
|
height: 30px;
|
|
322
|
-
background: #
|
|
443
|
+
background: #5b6ed0;
|
|
323
444
|
border-radius: 8px;
|
|
324
|
-
border: 1px solid #
|
|
445
|
+
border: 1px solid #6d7cd5;
|
|
325
446
|
backdrop-filter: blur(10px);
|
|
326
447
|
display: flex;
|
|
327
448
|
justify-content: center;
|
|
@@ -332,7 +453,7 @@ body {
|
|
|
332
453
|
}
|
|
333
454
|
}
|
|
334
455
|
|
|
335
|
-
.search-mobile {
|
|
456
|
+
.search-mobile-console {
|
|
336
457
|
width: 40px;
|
|
337
458
|
height: 40px;
|
|
338
459
|
background: #f8f8fb;
|
|
@@ -341,37 +462,86 @@ body {
|
|
|
341
462
|
inset 0px -2px 0px 0px #ffffff;
|
|
342
463
|
border-radius: 10px;
|
|
343
464
|
backdrop-filter: blur(10px);
|
|
344
|
-
|
|
345
|
-
justify-content: center;
|
|
346
|
-
align-items: center;
|
|
465
|
+
padding-top: 11px;
|
|
347
466
|
cursor: pointer;
|
|
348
467
|
}
|
|
349
468
|
}
|
|
350
469
|
|
|
351
|
-
.layout-side {
|
|
352
|
-
background: linear-gradient(227deg, #
|
|
470
|
+
.layout-side-mask2-console {
|
|
471
|
+
background: linear-gradient(227deg, #7856e6 0%, #6a6ed2 0%, #0271c3 100%) !important;
|
|
472
|
+
border: 2px solid #ffffff;
|
|
473
|
+
position: absolute;
|
|
474
|
+
top: 0;
|
|
475
|
+
left: 0;
|
|
476
|
+
width: 100%;
|
|
477
|
+
height: 100%;
|
|
478
|
+
border-radius: 16px;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
.layout-side-console {
|
|
482
|
+
background: transparent !important;
|
|
353
483
|
height: calc(100vh - 24px) !important;
|
|
354
484
|
user-select: none;
|
|
355
485
|
border: 2px solid white;
|
|
356
486
|
border-radius: 16px;
|
|
357
487
|
padding-top: 24px;
|
|
358
488
|
|
|
359
|
-
.header-logo {
|
|
489
|
+
.header-logo-console {
|
|
490
|
+
padding-left: 16px;
|
|
360
491
|
display: flex;
|
|
361
|
-
justify-content:
|
|
492
|
+
justify-content: space-between;
|
|
362
493
|
cursor: pointer;
|
|
494
|
+
height: 30px;
|
|
495
|
+
position: relative;
|
|
496
|
+
z-index: 99;
|
|
497
|
+
|
|
498
|
+
.logo-sub {
|
|
499
|
+
width: 31px;
|
|
500
|
+
height: 30px;
|
|
501
|
+
}
|
|
363
502
|
|
|
364
503
|
.logo-base {
|
|
365
|
-
height:
|
|
504
|
+
height: 30px;
|
|
505
|
+
width: 105px;
|
|
366
506
|
}
|
|
367
507
|
}
|
|
368
508
|
}
|
|
369
509
|
|
|
370
|
-
.layout-header {
|
|
510
|
+
.layout-header-console {
|
|
511
|
+
.down {
|
|
512
|
+
transform: rotate(0deg);
|
|
513
|
+
animation: downanimation 0.3s ease-in-out;
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
@keyframes downanimation {
|
|
517
|
+
from {
|
|
518
|
+
transform: rotate(180deg);
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
to {
|
|
522
|
+
transform: rotate(0deg);
|
|
523
|
+
}
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
//---
|
|
527
|
+
.up {
|
|
528
|
+
transform: rotate(180deg);
|
|
529
|
+
animation: upanimation 0.3s ease-in-out;
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
@keyframes upanimation {
|
|
533
|
+
from {
|
|
534
|
+
transform: rotate(0deg);
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
to {
|
|
538
|
+
transform: rotate(180deg);
|
|
539
|
+
}
|
|
540
|
+
}
|
|
541
|
+
|
|
371
542
|
z-index: 1;
|
|
372
543
|
height: $header-height;
|
|
373
|
-
background: linear-gradient(223deg, #faf8ff 0%, #
|
|
374
|
-
box-shadow: inset 0px -1px 0px 0px #edeefd;
|
|
544
|
+
background: linear-gradient(223deg, #faf8ff 0%, #eeecfe 29%, #ffffff 100%);
|
|
375
545
|
border-radius: 16px;
|
|
376
546
|
border: 1px solid #ffffff;
|
|
377
547
|
position: relative;
|
|
@@ -385,39 +555,35 @@ body {
|
|
|
385
555
|
color: rgba(0, 0, 0, 0.65);
|
|
386
556
|
}
|
|
387
557
|
|
|
388
|
-
.layout-header-fill {
|
|
558
|
+
.layout-header-fill-console {
|
|
389
559
|
flex: 1;
|
|
390
560
|
}
|
|
391
561
|
|
|
392
|
-
.layout-header-actions {
|
|
562
|
+
.layout-header-actions-console {
|
|
563
|
+
cursor: pointer;
|
|
393
564
|
display: flex;
|
|
394
565
|
justify-content: flex-start;
|
|
395
566
|
align-items: center;
|
|
396
567
|
height: 100%;
|
|
397
568
|
max-width: 400px;
|
|
398
569
|
z-index: 2;
|
|
570
|
+
gap: 24px;
|
|
399
571
|
|
|
400
572
|
.actions-item {
|
|
401
|
-
height:
|
|
402
|
-
|
|
403
|
-
transition: all 0.3s;
|
|
573
|
+
line-height: 22px;
|
|
574
|
+
font-size: 14px;
|
|
404
575
|
cursor: pointer;
|
|
405
|
-
margin: 0 4px;
|
|
406
|
-
padding: 0 4px;
|
|
407
576
|
|
|
408
577
|
display: flex;
|
|
409
578
|
justify-content: center;
|
|
410
579
|
align-items: center;
|
|
411
|
-
|
|
412
|
-
&:hover {
|
|
413
|
-
background: rgba(0, 0, 0, 0.06);
|
|
414
|
-
}
|
|
415
580
|
}
|
|
416
581
|
}
|
|
417
582
|
|
|
418
|
-
.layout-header-user {
|
|
583
|
+
.layout-header-user-console {
|
|
419
584
|
height: 48px;
|
|
420
585
|
display: flex;
|
|
586
|
+
font-size: 14px;
|
|
421
587
|
justify-content: flex-start;
|
|
422
588
|
align-items: center;
|
|
423
589
|
z-index: 2;
|
|
@@ -440,16 +606,16 @@ body {
|
|
|
440
606
|
}
|
|
441
607
|
}
|
|
442
608
|
|
|
443
|
-
.layout-main {
|
|
609
|
+
.layout-main-console {
|
|
444
610
|
flex: 1;
|
|
445
611
|
height: 100%;
|
|
446
612
|
padding-left: 12px;
|
|
447
613
|
overflow: auto;
|
|
448
614
|
}
|
|
449
615
|
|
|
450
|
-
.layout-content {
|
|
616
|
+
.layout-content-console {
|
|
451
617
|
width: 100%;
|
|
452
|
-
height: calc(100vh - #{$header-height});
|
|
618
|
+
height: calc(100vh - #{$header-height} - 12px - 24px);
|
|
453
619
|
overflow: auto;
|
|
454
620
|
margin-top: 12px;
|
|
455
621
|
border-radius: 16px;
|
|
@@ -465,18 +631,87 @@ body {
|
|
|
465
631
|
overflow: hidden;
|
|
466
632
|
}
|
|
467
633
|
|
|
468
|
-
.lists {
|
|
469
|
-
left: 0;
|
|
634
|
+
.lists-console {
|
|
470
635
|
position: absolute;
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
636
|
+
z-index: 1000;
|
|
637
|
+
width: 88%;
|
|
638
|
+
background: linear-gradient(227deg, #556ec611 0%, #556ec6aa 100%);
|
|
639
|
+
color: #fff;
|
|
640
|
+
border-radius: 16px;
|
|
641
|
+
box-shadow:
|
|
642
|
+
0 8px 20px rgba(0, 0, 0, 0.1),
|
|
643
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
644
|
+
backdrop-filter: blur(10px);
|
|
645
|
+
padding: 16px;
|
|
646
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
647
|
+
animation: dropDown 0.2s ease-out;
|
|
648
|
+
|
|
649
|
+
.ant-list-header {
|
|
650
|
+
padding: 0 0 12px;
|
|
651
|
+
font-weight: 500;
|
|
652
|
+
font-size: 14px;
|
|
653
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
654
|
+
display: flex;
|
|
655
|
+
align-items: center;
|
|
656
|
+
justify-content: space-between;
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
.ant-list-item {
|
|
660
|
+
color: #fff;
|
|
661
|
+
cursor: pointer;
|
|
662
|
+
padding: 10px 12px;
|
|
663
|
+
margin: 4px 0;
|
|
664
|
+
border-radius: 8px;
|
|
665
|
+
transition: all 0.2s ease;
|
|
666
|
+
display: flex;
|
|
667
|
+
align-items: center;
|
|
668
|
+
gap: 12px;
|
|
669
|
+
font-size: 14px;
|
|
670
|
+
|
|
671
|
+
&:hover {
|
|
672
|
+
background: rgba(255, 255, 255, 0.08);
|
|
673
|
+
transform: translateX(2px);
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
.search-item-icon {
|
|
677
|
+
color: rgba(255, 255, 255, 0.9);
|
|
678
|
+
font-size: 16px;
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
.search-item-content {
|
|
682
|
+
flex: 1;
|
|
683
|
+
}
|
|
684
|
+
|
|
685
|
+
.search-item-title {
|
|
686
|
+
font-size: 14px;
|
|
687
|
+
color: rgba(255, 255, 255, 0.95);
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
.search-item-description {
|
|
691
|
+
font-size: 12px;
|
|
692
|
+
color: rgba(255, 255, 255, 0.6);
|
|
693
|
+
margin-top: 2px;
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
.search-item-shortcut {
|
|
697
|
+
font-size: 12px;
|
|
698
|
+
color: rgba(255, 255, 255, 0.5);
|
|
699
|
+
background: rgba(255, 255, 255, 0.1);
|
|
700
|
+
padding: 2px 6px;
|
|
701
|
+
border-radius: 4px;
|
|
702
|
+
}
|
|
703
|
+
}
|
|
475
704
|
}
|
|
476
705
|
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
706
|
+
@keyframes dropDown {
|
|
707
|
+
from {
|
|
708
|
+
opacity: 0;
|
|
709
|
+
transform: translateY(-4px);
|
|
710
|
+
}
|
|
711
|
+
to {
|
|
712
|
+
opacity: 1;
|
|
713
|
+
transform: translateY(0);
|
|
714
|
+
}
|
|
480
715
|
}
|
|
481
716
|
|
|
482
717
|
.#{$menuPrefixCls}-submenu-arrow {
|
|
@@ -484,11 +719,10 @@ body {
|
|
|
484
719
|
position: absolute;
|
|
485
720
|
top: 52%;
|
|
486
721
|
right: 16px;
|
|
487
|
-
width:
|
|
488
|
-
height:
|
|
722
|
+
width: 16px;
|
|
723
|
+
height: 16px;
|
|
489
724
|
transform: translateY(0);
|
|
490
725
|
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
491
|
-
|
|
492
726
|
// 当菜单收起时隐藏箭头
|
|
493
727
|
.ant-layout-sider-collapsed & {
|
|
494
728
|
display: none;
|
|
@@ -497,13 +731,12 @@ body {
|
|
|
497
731
|
&::before,
|
|
498
732
|
&::after {
|
|
499
733
|
position: absolute;
|
|
500
|
-
width:
|
|
501
|
-
height: 1.
|
|
502
|
-
|
|
734
|
+
width: 6px;
|
|
735
|
+
height: 1.25px;
|
|
736
|
+
scale: 1.25;
|
|
737
|
+
background: rgba(255, 255, 255, 0.65);
|
|
503
738
|
border-radius: 2px;
|
|
504
|
-
transition:
|
|
505
|
-
background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
|
|
506
|
-
transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
739
|
+
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
507
740
|
content: '';
|
|
508
741
|
}
|
|
509
742
|
|