cfel-base-components 2.5.47 → 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 +41 -80
- package/package.json +1 -1
- package/src/.umi/core/helmet.ts +1 -1
- package/src/components/layout/index.scss +387 -211
- package/src/components/layout/index.tsx +237 -103
- package/src/components/{layout → layout-console}/index-console.scss +208 -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
|
@@ -6,224 +6,287 @@ ul {
|
|
|
6
6
|
margin: 0;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
.ant-layout {
|
|
10
|
+
background: linear-gradient(223deg, #fef8ff 0%, #ecf3fe 29%, #f9faff 100%) !important;
|
|
11
|
+
box-shadow: inset 0px -1px 0px 0px #edeefd !important;
|
|
12
|
+
}
|
|
13
|
+
|
|
9
14
|
.layout-menu {
|
|
10
|
-
|
|
15
|
+
border-radius: 16px;
|
|
16
|
+
height: calc(100% - 109px);
|
|
11
17
|
overflow-y: scroll;
|
|
12
18
|
|
|
13
|
-
.menu{
|
|
19
|
+
.menu {
|
|
14
20
|
padding: 0;
|
|
15
21
|
margin: 0;
|
|
16
22
|
list-style: none;
|
|
17
23
|
cursor: pointer;
|
|
18
24
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
25
|
+
> li {
|
|
26
|
+
&:hover {
|
|
27
|
+
> .menu-item-content {
|
|
28
|
+
.menu-item-icon,
|
|
29
|
+
.menu-item-label {
|
|
30
|
+
color: #185dff;
|
|
31
|
+
font-weight: 500;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
22
36
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
37
|
+
.rc-menu-submenu {
|
|
38
|
+
&:hover {
|
|
39
|
+
> .rc-menu-submenu-title {
|
|
40
|
+
.menu-item-icon,
|
|
41
|
+
.menu-item-label {
|
|
42
|
+
color: #185dff;
|
|
43
|
+
font-weight: 500;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.#{$menuPrefixCls}-submenu-arrow {
|
|
47
|
+
&::before,
|
|
48
|
+
&::after {
|
|
49
|
+
background: #185dff;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
26
55
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
line-height: 50px;
|
|
31
|
-
text-align: left;
|
|
32
|
-
}
|
|
56
|
+
.rc-menu-submenu-title {
|
|
57
|
+
position: relative;
|
|
58
|
+
}
|
|
33
59
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
60
|
+
.rc-menu-submenu {
|
|
61
|
+
position: relative;
|
|
62
|
+
}
|
|
38
63
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
64
|
+
.menu-item-content {
|
|
65
|
+
font-weight: 400;
|
|
66
|
+
font-size: 14px;
|
|
67
|
+
line-height: 50px;
|
|
68
|
+
text-align: left;
|
|
69
|
+
}
|
|
44
70
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
color: black;
|
|
50
|
-
}
|
|
71
|
+
.sub-menu-item-label {
|
|
72
|
+
padding-left: 11px;
|
|
73
|
+
display: flex;
|
|
74
|
+
}
|
|
51
75
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
76
|
+
.menu-item-icon {
|
|
77
|
+
display: inline-block;
|
|
78
|
+
height: 22px;
|
|
79
|
+
width: 22px;
|
|
80
|
+
}
|
|
56
81
|
|
|
82
|
+
.menu-item-label {
|
|
83
|
+
display: inline-block;
|
|
84
|
+
padding-left: 12px;
|
|
85
|
+
border: 1px solid transparent;
|
|
86
|
+
color: black;
|
|
87
|
+
}
|
|
57
88
|
|
|
58
|
-
.
|
|
59
|
-
|
|
60
|
-
|
|
89
|
+
.submenu-selected {
|
|
90
|
+
color: #185dff !important;
|
|
91
|
+
font-weight: 500;
|
|
92
|
+
}
|
|
61
93
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
left: 31px;
|
|
66
|
-
top: 26px;
|
|
67
|
-
width: 5px;
|
|
68
|
-
height: 5px;
|
|
69
|
-
background: #B4C4DC;
|
|
70
|
-
border-radius: 50%;
|
|
71
|
-
z-index: 1;
|
|
72
|
-
}
|
|
94
|
+
.sub-li {
|
|
95
|
+
position: relative;
|
|
96
|
+
z-index: 9;
|
|
73
97
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
98
|
+
&:hover {
|
|
99
|
+
> .menu-item-content {
|
|
100
|
+
.menu-item-icon,
|
|
101
|
+
.iconfont,
|
|
102
|
+
.menu-item-label {
|
|
103
|
+
color: #185dff;
|
|
104
|
+
font-weight: 500;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
84
108
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
109
|
+
&::before {
|
|
110
|
+
content: '';
|
|
111
|
+
position: absolute;
|
|
112
|
+
left: 31px;
|
|
113
|
+
top: 24px;
|
|
114
|
+
transform: translateY(-50%);
|
|
115
|
+
width: 5px;
|
|
116
|
+
height: 5px;
|
|
117
|
+
background: #b4c4dc;
|
|
118
|
+
border-radius: 50%;
|
|
119
|
+
z-index: 1;
|
|
120
|
+
}
|
|
88
121
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
122
|
+
&::after {
|
|
123
|
+
content: '';
|
|
124
|
+
position: absolute;
|
|
125
|
+
left: 32.8px;
|
|
126
|
+
top: 0 !important;
|
|
127
|
+
width: 1px;
|
|
128
|
+
height: 100%;
|
|
129
|
+
background: #b4c4dc;
|
|
130
|
+
z-index: 0;
|
|
131
|
+
}
|
|
92
132
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
133
|
+
&:only-child::after {
|
|
134
|
+
display: none;
|
|
135
|
+
}
|
|
96
136
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
}
|
|
101
|
-
}
|
|
137
|
+
&:last-child::after {
|
|
138
|
+
height: 50%;
|
|
139
|
+
}
|
|
102
140
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}
|
|
107
|
-
}
|
|
141
|
+
&:first-child::after {
|
|
142
|
+
top: 24px !important;
|
|
143
|
+
}
|
|
108
144
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
145
|
+
&.rc-menu-submenu-selected {
|
|
146
|
+
&::before {
|
|
147
|
+
background: #185dff;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
114
150
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
151
|
+
&.rc-menu-item-selected {
|
|
152
|
+
&::before {
|
|
153
|
+
background: #185dff;
|
|
154
|
+
}
|
|
119
155
|
}
|
|
120
|
-
|
|
156
|
+
|
|
157
|
+
&:not(.rc-menu-submenu) {
|
|
158
|
+
height: 52px;
|
|
121
159
|
display: flex;
|
|
122
160
|
align-items: center;
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
161
|
+
box-shadow: 0px 0px 30px 0px transparent;
|
|
162
|
+
|
|
163
|
+
&.rc-menu-item-selected {
|
|
164
|
+
.menu-item-content {
|
|
165
|
+
width: 100%;
|
|
166
|
+
padding-right: 24px;
|
|
167
|
+
}
|
|
168
|
+
.menu-item-label {
|
|
169
|
+
display: flex;
|
|
170
|
+
align-items: center;
|
|
171
|
+
padding-left: 12px;
|
|
172
|
+
width: 100%;
|
|
173
|
+
height: 40px;
|
|
174
|
+
background: #c5d6ff;
|
|
175
|
+
border-radius: 10px;
|
|
176
|
+
backdrop-filter: blur(10px);
|
|
177
|
+
transition: all 0.3s ease-in-out;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
130
180
|
}
|
|
131
181
|
}
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
182
|
|
|
135
|
-
.grand-li {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
183
|
+
.grand-li {
|
|
184
|
+
background: #dcebfc;
|
|
185
|
+
position: relative;
|
|
186
|
+
z-index: 9;
|
|
187
|
+
display: flex;
|
|
188
|
+
align-items: center;
|
|
189
|
+
margin-left: 2px;
|
|
190
|
+
width: 252px;
|
|
141
191
|
|
|
192
|
+
&:hover {
|
|
193
|
+
> .menu-item-content {
|
|
194
|
+
.menu-item-icon,
|
|
195
|
+
.iconfont,
|
|
196
|
+
.menu-item-label {
|
|
197
|
+
color: #185dff;
|
|
198
|
+
font-weight: 500;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}
|
|
142
202
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
left: 49px;
|
|
147
|
-
top: 50%;
|
|
148
|
-
width: 5px;
|
|
149
|
-
height: 5px;
|
|
150
|
-
background: #B4C4DC;
|
|
151
|
-
border-radius: 50%;
|
|
152
|
-
transform: translateY(-50%);
|
|
153
|
-
z-index: 1;
|
|
154
|
-
}
|
|
203
|
+
&:last-child {
|
|
204
|
+
box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.05);
|
|
205
|
+
}
|
|
155
206
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
207
|
+
&::before {
|
|
208
|
+
content: '';
|
|
209
|
+
position: absolute;
|
|
210
|
+
left: 49px;
|
|
211
|
+
top: 50%;
|
|
212
|
+
width: 5px;
|
|
213
|
+
height: 5px;
|
|
214
|
+
background: #b4c4dc;
|
|
215
|
+
border-radius: 50%;
|
|
216
|
+
transform: translateY(-50%);
|
|
217
|
+
z-index: 1;
|
|
218
|
+
}
|
|
166
219
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
220
|
+
&::after {
|
|
221
|
+
content: '';
|
|
222
|
+
position: absolute;
|
|
223
|
+
left: 51px;
|
|
224
|
+
top: 0;
|
|
225
|
+
width: 1px;
|
|
226
|
+
height: 100%;
|
|
227
|
+
background: #b4c4dc;
|
|
228
|
+
z-index: 0;
|
|
229
|
+
}
|
|
170
230
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
231
|
+
&:only-child::after {
|
|
232
|
+
display: none;
|
|
233
|
+
}
|
|
174
234
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
235
|
+
&:last-child::after {
|
|
236
|
+
height: 50%;
|
|
237
|
+
}
|
|
178
238
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
}
|
|
183
|
-
}
|
|
239
|
+
&:first-child::after {
|
|
240
|
+
top: 50% !important;
|
|
241
|
+
}
|
|
184
242
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
display: flex;
|
|
191
|
-
align-items: center;
|
|
192
|
-
}
|
|
193
|
-
.menu-item-label {
|
|
194
|
-
display: flex;
|
|
195
|
-
align-items: center;
|
|
196
|
-
padding-left: 12px;
|
|
197
|
-
width: 100%;
|
|
198
|
-
height: 40px;
|
|
199
|
-
background: #C5D6FF;
|
|
200
|
-
border-radius: 10px;
|
|
201
|
-
backdrop-filter: blur(10px);
|
|
202
|
-
transition: all 0.3s ease-in-out;
|
|
203
|
-
}
|
|
243
|
+
&.rc-menu-item-selected {
|
|
244
|
+
&::before {
|
|
245
|
+
background: #185dff;
|
|
246
|
+
}
|
|
247
|
+
}
|
|
204
248
|
|
|
205
|
-
|
|
206
|
-
|
|
249
|
+
&.rc-menu-item-selected {
|
|
250
|
+
.menu-item-content {
|
|
251
|
+
width: 100%;
|
|
252
|
+
padding-right: 24px;
|
|
253
|
+
height: 52px;
|
|
254
|
+
display: flex;
|
|
255
|
+
align-items: center;
|
|
256
|
+
}
|
|
257
|
+
.menu-item-label {
|
|
258
|
+
display: flex;
|
|
259
|
+
align-items: center;
|
|
260
|
+
padding-left: 12px;
|
|
261
|
+
width: 100%;
|
|
262
|
+
height: 40px;
|
|
263
|
+
background: #c5d6ff;
|
|
264
|
+
border-radius: 10px;
|
|
265
|
+
backdrop-filter: blur(10px);
|
|
266
|
+
transition: all 0.3s ease-in-out;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
&::before {
|
|
270
|
+
background: #185dff;
|
|
271
|
+
}
|
|
272
|
+
}
|
|
207
273
|
}
|
|
208
274
|
}
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
275
|
|
|
212
|
-
.menu-collapsed{
|
|
276
|
+
.menu-collapsed {
|
|
213
277
|
display: flex;
|
|
214
278
|
flex-direction: column;
|
|
215
279
|
align-items: center;
|
|
216
280
|
list-style: none;
|
|
217
281
|
cursor: pointer;
|
|
218
282
|
|
|
219
|
-
.menu-item-content{
|
|
283
|
+
.menu-item-content {
|
|
220
284
|
font-weight: 400;
|
|
221
285
|
font-size: 14px;
|
|
222
286
|
margin-top: 30px;
|
|
223
287
|
line-height: 24px;
|
|
224
288
|
text-align: left;
|
|
225
289
|
}
|
|
226
|
-
|
|
227
290
|
}
|
|
228
291
|
|
|
229
292
|
.cpc-icon {
|
|
@@ -231,10 +294,8 @@ ul {
|
|
|
231
294
|
height: 22px;
|
|
232
295
|
width: 22px;
|
|
233
296
|
}
|
|
234
|
-
|
|
235
297
|
}
|
|
236
298
|
|
|
237
|
-
|
|
238
299
|
$header-height: 62px;
|
|
239
300
|
$base-color: #c6538c;
|
|
240
301
|
|
|
@@ -279,18 +340,29 @@ body {
|
|
|
279
340
|
align-items: center;
|
|
280
341
|
}
|
|
281
342
|
|
|
282
|
-
|
|
283
343
|
.search {
|
|
284
344
|
height: 40px;
|
|
285
|
-
box-shadow:
|
|
345
|
+
box-shadow:
|
|
346
|
+
inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05),
|
|
347
|
+
inset 0px -2px 0px 0px rgba(255, 255, 255, 0.3);
|
|
286
348
|
border-radius: 10px;
|
|
287
349
|
backdrop-filter: blur(10px);
|
|
288
|
-
background: url('https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-search-bg.png') no-repeat;
|
|
289
|
-
background-position-x: right;
|
|
290
|
-
background-size: 50%;
|
|
291
350
|
position: relative;
|
|
292
351
|
|
|
293
|
-
.search-
|
|
352
|
+
.search-bg-mask {
|
|
353
|
+
position: absolute;
|
|
354
|
+
top: 0;
|
|
355
|
+
right: 0;
|
|
356
|
+
width: 93px;
|
|
357
|
+
height: 38px;
|
|
358
|
+
|
|
359
|
+
img {
|
|
360
|
+
width: 93px;
|
|
361
|
+
height: 37px;
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.search-input {
|
|
294
366
|
width: 100%;
|
|
295
367
|
height: 100%;
|
|
296
368
|
background: transparent;
|
|
@@ -299,47 +371,54 @@ body {
|
|
|
299
371
|
padding-left: 45px;
|
|
300
372
|
line-height: 32px;
|
|
301
373
|
font-size: 14px;
|
|
302
|
-
color: #
|
|
374
|
+
color: #7d8295;
|
|
303
375
|
|
|
304
|
-
|
|
376
|
+
&:hover {
|
|
377
|
+
background: rgba(0, 0, 0, 0.05);
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
box-shadow:
|
|
381
|
+
inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05),
|
|
382
|
+
inset 0px -2px 0px 0px rgba(255, 255, 255, 0.3);
|
|
305
383
|
border-radius: 10px;
|
|
306
384
|
backdrop-filter: blur(10px);
|
|
307
385
|
|
|
308
386
|
&::placeholder {
|
|
309
|
-
color: #
|
|
387
|
+
color: #817f9b;
|
|
310
388
|
}
|
|
311
389
|
}
|
|
312
390
|
|
|
313
|
-
.search-icon{
|
|
391
|
+
.search-icon {
|
|
314
392
|
position: absolute;
|
|
315
393
|
left: 12px;
|
|
316
394
|
top: 11px;
|
|
317
395
|
}
|
|
318
396
|
|
|
319
|
-
.search-command{
|
|
397
|
+
.search-command {
|
|
320
398
|
position: absolute;
|
|
321
399
|
right: 4px;
|
|
322
|
-
top:
|
|
323
|
-
transform: translateY(-50%);
|
|
400
|
+
top: 4px;
|
|
324
401
|
width: 40px;
|
|
325
402
|
height: 30px;
|
|
326
|
-
background: #
|
|
403
|
+
background: #f0f4fe;
|
|
327
404
|
border-radius: 8px;
|
|
328
|
-
border: 1px solid #
|
|
405
|
+
border: 1px solid #eceefc;
|
|
329
406
|
backdrop-filter: blur(10px);
|
|
330
407
|
display: flex;
|
|
331
408
|
justify-content: center;
|
|
332
409
|
align-items: center;
|
|
333
410
|
font-size: 14px;
|
|
334
|
-
color: #
|
|
411
|
+
color: #4f4b81;
|
|
335
412
|
line-height: 17px;
|
|
336
413
|
}
|
|
337
414
|
}
|
|
338
415
|
|
|
339
|
-
.search-mobile{
|
|
416
|
+
.search-mobile-console {
|
|
340
417
|
width: 40px;
|
|
341
418
|
height: 40px;
|
|
342
|
-
box-shadow:
|
|
419
|
+
box-shadow:
|
|
420
|
+
inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05),
|
|
421
|
+
inset 0px -2px 0px 0px rgba(255, 255, 255, 0.3);
|
|
343
422
|
border-radius: 10px;
|
|
344
423
|
backdrop-filter: blur(10px);
|
|
345
424
|
padding-top: 11px;
|
|
@@ -348,8 +427,15 @@ body {
|
|
|
348
427
|
}
|
|
349
428
|
}
|
|
350
429
|
|
|
351
|
-
.layout-side-
|
|
352
|
-
background: radial-gradient(
|
|
430
|
+
.layout-side-mask1 {
|
|
431
|
+
background: radial-gradient(
|
|
432
|
+
152% 131% at 3% 1%,
|
|
433
|
+
#e8e2fa 0%,
|
|
434
|
+
#c4d0f3 10%,
|
|
435
|
+
#afcaf8 25%,
|
|
436
|
+
#89bff6 49%,
|
|
437
|
+
#478eed 100%
|
|
438
|
+
);
|
|
353
439
|
opacity: 0.3;
|
|
354
440
|
position: absolute;
|
|
355
441
|
top: 0;
|
|
@@ -360,7 +446,7 @@ body {
|
|
|
360
446
|
}
|
|
361
447
|
|
|
362
448
|
.layout-side {
|
|
363
|
-
|
|
449
|
+
// background: url('https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-bg-other.png') no-repeat !important;
|
|
364
450
|
background: transparent !important;
|
|
365
451
|
position: relative;
|
|
366
452
|
height: calc(100vh - 24px);
|
|
@@ -377,7 +463,7 @@ body {
|
|
|
377
463
|
cursor: pointer;
|
|
378
464
|
height: 30px;
|
|
379
465
|
|
|
380
|
-
.logo-sub{
|
|
466
|
+
.logo-sub {
|
|
381
467
|
width: 31px;
|
|
382
468
|
height: 30px;
|
|
383
469
|
}
|
|
@@ -386,14 +472,13 @@ body {
|
|
|
386
472
|
height: 30px;
|
|
387
473
|
width: 105px;
|
|
388
474
|
}
|
|
389
|
-
}
|
|
475
|
+
}
|
|
390
476
|
}
|
|
391
477
|
|
|
392
478
|
.layout-header {
|
|
393
479
|
z-index: 1;
|
|
394
480
|
height: $header-height;
|
|
395
481
|
background: linear-gradient(223deg, #faf8ff 0%, #ecf2fe 29%, #ffffff 100%);
|
|
396
|
-
box-shadow: inset 0px -1px 0px 0px #edeefd;
|
|
397
482
|
border-radius: 16px;
|
|
398
483
|
border: 1px solid #ffffff;
|
|
399
484
|
position: relative;
|
|
@@ -420,6 +505,8 @@ body {
|
|
|
420
505
|
z-index: 2;
|
|
421
506
|
|
|
422
507
|
.actions-item {
|
|
508
|
+
line-height: 22px;
|
|
509
|
+
font-size: 14px;
|
|
423
510
|
height: 36px;
|
|
424
511
|
border-radius: 6px;
|
|
425
512
|
transition: all 0.3s;
|
|
@@ -440,6 +527,7 @@ body {
|
|
|
440
527
|
.layout-header-user {
|
|
441
528
|
height: 48px;
|
|
442
529
|
display: flex;
|
|
530
|
+
font-size: 14px;
|
|
443
531
|
justify-content: flex-start;
|
|
444
532
|
align-items: center;
|
|
445
533
|
z-index: 2;
|
|
@@ -467,6 +555,37 @@ body {
|
|
|
467
555
|
height: 100%;
|
|
468
556
|
padding-left: 12px;
|
|
469
557
|
overflow: auto;
|
|
558
|
+
|
|
559
|
+
.down {
|
|
560
|
+
transform: rotate(0deg);
|
|
561
|
+
animation: downanimation 0.3s ease-in-out;
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
@keyframes downanimation {
|
|
565
|
+
from {
|
|
566
|
+
transform: rotate(180deg);
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
to {
|
|
570
|
+
transform: rotate(0deg);
|
|
571
|
+
}
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
//---
|
|
575
|
+
.up {
|
|
576
|
+
transform: rotate(180deg);
|
|
577
|
+
animation: upanimation 0.3s ease-in-out;
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
@keyframes upanimation {
|
|
581
|
+
from {
|
|
582
|
+
transform: rotate(0deg);
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
to {
|
|
586
|
+
transform: rotate(180deg);
|
|
587
|
+
}
|
|
588
|
+
}
|
|
470
589
|
}
|
|
471
590
|
|
|
472
591
|
.layout-content {
|
|
@@ -477,39 +596,96 @@ body {
|
|
|
477
596
|
border-radius: 16px;
|
|
478
597
|
}
|
|
479
598
|
|
|
480
|
-
|
|
481
|
-
.rc-menu-collapse{
|
|
599
|
+
.rc-menu-collapse {
|
|
482
600
|
overflow: hidden;
|
|
483
601
|
transition: height 0.3s ease-out;
|
|
484
602
|
}
|
|
485
603
|
|
|
486
|
-
.rc-menu-hidden{
|
|
604
|
+
.rc-menu-hidden {
|
|
487
605
|
height: 0;
|
|
488
606
|
overflow: hidden;
|
|
489
607
|
}
|
|
490
608
|
|
|
609
|
+
.lists {
|
|
610
|
+
position: absolute;
|
|
611
|
+
z-index: 1000;
|
|
612
|
+
width: 88%;
|
|
613
|
+
background: linear-gradient(223deg, #fef8ff 0%, #ecf3fe 29%, #f9faff 100%);
|
|
614
|
+
box-shadow: inset 0px -1px 0px 0px #edeefd;
|
|
615
|
+
color: black;
|
|
616
|
+
border-radius: 16px;
|
|
617
|
+
box-shadow:
|
|
618
|
+
0 8px 20px rgba(0, 0, 0, 0.1),
|
|
619
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
620
|
+
backdrop-filter: blur(10px);
|
|
621
|
+
padding: 16px;
|
|
622
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
623
|
+
animation: dropDown 0.2s ease-out;
|
|
624
|
+
|
|
625
|
+
.ant-list-header {
|
|
626
|
+
padding: 0 0 12px;
|
|
627
|
+
font-weight: 500;
|
|
628
|
+
font-size: 14px;
|
|
629
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
630
|
+
display: flex;
|
|
631
|
+
align-items: center;
|
|
632
|
+
justify-content: space-between;
|
|
633
|
+
}
|
|
491
634
|
|
|
635
|
+
.ant-list-item {
|
|
636
|
+
color: black;
|
|
637
|
+
cursor: pointer;
|
|
638
|
+
padding: 10px 12px;
|
|
639
|
+
margin: 4px 0;
|
|
640
|
+
border-radius: 8px;
|
|
641
|
+
transition: all 0.2s ease;
|
|
642
|
+
display: flex;
|
|
643
|
+
align-items: center;
|
|
644
|
+
gap: 12px;
|
|
645
|
+
font-size: 14px;
|
|
492
646
|
|
|
647
|
+
&:hover {
|
|
648
|
+
background: rgba(0, 0, 0, 0.08);
|
|
649
|
+
transform: translateX(2px);
|
|
650
|
+
}
|
|
493
651
|
|
|
652
|
+
.search-item-icon {
|
|
653
|
+
color: rgba(0, 0, 0, 0.9);
|
|
654
|
+
font-size: 16px;
|
|
655
|
+
}
|
|
494
656
|
|
|
495
|
-
.
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
}
|
|
657
|
+
.search-item-content {
|
|
658
|
+
flex: 1;
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
.search-item-title {
|
|
662
|
+
font-size: 14px;
|
|
663
|
+
color: rgba(0, 0, 0, 0.95);
|
|
664
|
+
}
|
|
504
665
|
|
|
666
|
+
.search-item-description {
|
|
667
|
+
font-size: 12px;
|
|
668
|
+
color: rgba(0, 0, 0, 0.6);
|
|
669
|
+
margin-top: 2px;
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
.search-item-shortcut {
|
|
673
|
+
font-size: 12px;
|
|
674
|
+
color: rgba(0, 0, 0, 0.5);
|
|
675
|
+
background: rgba(0, 0, 0, 0.1);
|
|
676
|
+
padding: 2px 6px;
|
|
677
|
+
border-radius: 4px;
|
|
678
|
+
}
|
|
679
|
+
}
|
|
680
|
+
}
|
|
505
681
|
|
|
506
682
|
.#{$menuPrefixCls}-submenu-arrow {
|
|
507
683
|
display: inline-block;
|
|
508
684
|
position: absolute;
|
|
509
685
|
top: 52%;
|
|
510
686
|
right: 16px;
|
|
511
|
-
width:
|
|
512
|
-
height:
|
|
687
|
+
width: 16px;
|
|
688
|
+
height: 16px;
|
|
513
689
|
transform: translateY(0);
|
|
514
690
|
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
515
691
|
|
|
@@ -521,12 +697,14 @@ body {
|
|
|
521
697
|
&::before,
|
|
522
698
|
&::after {
|
|
523
699
|
position: absolute;
|
|
524
|
-
width:
|
|
525
|
-
height: 1.
|
|
526
|
-
|
|
700
|
+
width: 6px;
|
|
701
|
+
height: 1.25px;
|
|
702
|
+
scale: 1.25;
|
|
703
|
+
background: #788bb1;
|
|
527
704
|
border-radius: 2px;
|
|
528
|
-
transition:
|
|
529
|
-
|
|
705
|
+
transition:
|
|
706
|
+
background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
|
|
707
|
+
transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
530
708
|
content: '';
|
|
531
709
|
}
|
|
532
710
|
|
|
@@ -563,14 +741,12 @@ body {
|
|
|
563
741
|
.#{$menuPrefixCls}-submenu-arrow {
|
|
564
742
|
&::before,
|
|
565
743
|
&::after {
|
|
566
|
-
background-color: #
|
|
744
|
+
background-color: #185dff;
|
|
567
745
|
}
|
|
568
746
|
}
|
|
569
747
|
}
|
|
570
748
|
}
|
|
571
749
|
|
|
572
|
-
|
|
573
|
-
|
|
574
750
|
.#{$menuPrefixCls} {
|
|
575
751
|
&-zoom-enter,
|
|
576
752
|
&-zoom-appear {
|