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
|
@@ -6,214 +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
|
+
|
|
19
|
+
.menu {
|
|
13
20
|
padding: 0;
|
|
14
21
|
margin: 0;
|
|
15
22
|
list-style: none;
|
|
16
23
|
cursor: pointer;
|
|
17
24
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
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
|
+
}
|
|
21
36
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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
|
+
}
|
|
25
55
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
line-height: 52px;
|
|
30
|
-
text-align: left;
|
|
31
|
-
}
|
|
56
|
+
.rc-menu-submenu-title {
|
|
57
|
+
position: relative;
|
|
58
|
+
}
|
|
32
59
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
60
|
+
.rc-menu-submenu {
|
|
61
|
+
position: relative;
|
|
62
|
+
}
|
|
37
63
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
64
|
+
.menu-item-content {
|
|
65
|
+
font-weight: 400;
|
|
66
|
+
font-size: 14px;
|
|
67
|
+
line-height: 50px;
|
|
68
|
+
text-align: left;
|
|
69
|
+
}
|
|
43
70
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
color: black;
|
|
49
|
-
}
|
|
71
|
+
.sub-menu-item-label {
|
|
72
|
+
padding-left: 11px;
|
|
73
|
+
display: flex;
|
|
74
|
+
}
|
|
50
75
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
76
|
+
.menu-item-icon {
|
|
77
|
+
display: inline-block;
|
|
78
|
+
height: 22px;
|
|
79
|
+
width: 22px;
|
|
80
|
+
}
|
|
55
81
|
|
|
82
|
+
.menu-item-label {
|
|
83
|
+
display: inline-block;
|
|
84
|
+
padding-left: 12px;
|
|
85
|
+
border: 1px solid transparent;
|
|
86
|
+
color: black;
|
|
87
|
+
}
|
|
56
88
|
|
|
57
|
-
.
|
|
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
|
+
}
|
|
150
|
+
|
|
151
|
+
&.rc-menu-item-selected {
|
|
152
|
+
&::before {
|
|
153
|
+
background: #185dff;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
114
156
|
|
|
115
|
-
|
|
116
|
-
|
|
157
|
+
&:not(.rc-menu-submenu) {
|
|
158
|
+
height: 52px;
|
|
117
159
|
display: flex;
|
|
118
160
|
align-items: center;
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
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
|
+
}
|
|
126
180
|
}
|
|
127
181
|
}
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
182
|
|
|
131
|
-
.grand-li {
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
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;
|
|
138
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
|
+
}
|
|
139
202
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
left: 43px;
|
|
144
|
-
top: 50%;
|
|
145
|
-
width: 5px;
|
|
146
|
-
height: 5px;
|
|
147
|
-
background: #B4C4DC;
|
|
148
|
-
border-radius: 50%;
|
|
149
|
-
transform: translateY(-50%);
|
|
150
|
-
z-index: 1;
|
|
151
|
-
}
|
|
203
|
+
&:last-child {
|
|
204
|
+
box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.05);
|
|
205
|
+
}
|
|
152
206
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
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
|
+
}
|
|
163
219
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
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
|
+
}
|
|
167
230
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
231
|
+
&:only-child::after {
|
|
232
|
+
display: none;
|
|
233
|
+
}
|
|
171
234
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
235
|
+
&:last-child::after {
|
|
236
|
+
height: 50%;
|
|
237
|
+
}
|
|
175
238
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
}
|
|
180
|
-
}
|
|
239
|
+
&:first-child::after {
|
|
240
|
+
top: 50% !important;
|
|
241
|
+
}
|
|
181
242
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
width: 174px;
|
|
188
|
-
height: 40px;
|
|
189
|
-
background: #C5D6FF;
|
|
190
|
-
border-radius: 10px;
|
|
191
|
-
backdrop-filter: blur(10px);
|
|
192
|
-
transition: all 0.3s ease-in-out;
|
|
193
|
-
}
|
|
243
|
+
&.rc-menu-item-selected {
|
|
244
|
+
&::before {
|
|
245
|
+
background: #185dff;
|
|
246
|
+
}
|
|
247
|
+
}
|
|
194
248
|
|
|
195
|
-
|
|
196
|
-
|
|
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
|
+
}
|
|
197
273
|
}
|
|
198
274
|
}
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
275
|
|
|
202
|
-
.menu-collapsed{
|
|
276
|
+
.menu-collapsed {
|
|
203
277
|
display: flex;
|
|
204
278
|
flex-direction: column;
|
|
205
279
|
align-items: center;
|
|
206
280
|
list-style: none;
|
|
207
281
|
cursor: pointer;
|
|
208
282
|
|
|
209
|
-
.menu-item-content{
|
|
283
|
+
.menu-item-content {
|
|
210
284
|
font-weight: 400;
|
|
211
285
|
font-size: 14px;
|
|
212
286
|
margin-top: 30px;
|
|
213
287
|
line-height: 24px;
|
|
214
288
|
text-align: left;
|
|
215
289
|
}
|
|
216
|
-
|
|
217
290
|
}
|
|
218
291
|
|
|
219
292
|
.cpc-icon {
|
|
@@ -221,11 +294,8 @@ ul {
|
|
|
221
294
|
height: 22px;
|
|
222
295
|
width: 22px;
|
|
223
296
|
}
|
|
224
|
-
|
|
225
297
|
}
|
|
226
298
|
|
|
227
|
-
|
|
228
|
-
$header-height: 62px;
|
|
229
299
|
$header-height: 62px;
|
|
230
300
|
$base-color: #c6538c;
|
|
231
301
|
|
|
@@ -271,16 +341,28 @@ body {
|
|
|
271
341
|
}
|
|
272
342
|
|
|
273
343
|
.search {
|
|
274
|
-
width: 228px;
|
|
275
344
|
height: 40px;
|
|
276
|
-
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);
|
|
277
348
|
border-radius: 10px;
|
|
278
349
|
backdrop-filter: blur(10px);
|
|
279
|
-
background: url('https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-search-bg.png') no-repeat;
|
|
280
|
-
background-position-x: right;
|
|
281
350
|
position: relative;
|
|
282
351
|
|
|
283
|
-
.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 {
|
|
284
366
|
width: 100%;
|
|
285
367
|
height: 100%;
|
|
286
368
|
background: transparent;
|
|
@@ -289,52 +371,84 @@ body {
|
|
|
289
371
|
padding-left: 45px;
|
|
290
372
|
line-height: 32px;
|
|
291
373
|
font-size: 14px;
|
|
292
|
-
color: #
|
|
374
|
+
color: #7d8295;
|
|
375
|
+
|
|
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);
|
|
383
|
+
border-radius: 10px;
|
|
384
|
+
backdrop-filter: blur(10px);
|
|
385
|
+
|
|
386
|
+
&::placeholder {
|
|
387
|
+
color: #817f9b;
|
|
388
|
+
}
|
|
293
389
|
}
|
|
294
390
|
|
|
295
|
-
.search-icon{
|
|
391
|
+
.search-icon {
|
|
296
392
|
position: absolute;
|
|
297
393
|
left: 12px;
|
|
298
|
-
top:
|
|
299
|
-
transform: translateY(-50%);
|
|
394
|
+
top: 11px;
|
|
300
395
|
}
|
|
301
396
|
|
|
302
|
-
.search-command{
|
|
397
|
+
.search-command {
|
|
303
398
|
position: absolute;
|
|
304
399
|
right: 4px;
|
|
305
|
-
top:
|
|
306
|
-
transform: translateY(-50%);
|
|
400
|
+
top: 4px;
|
|
307
401
|
width: 40px;
|
|
308
402
|
height: 30px;
|
|
309
|
-
background: #
|
|
403
|
+
background: #f0f4fe;
|
|
310
404
|
border-radius: 8px;
|
|
311
|
-
border: 1px solid #
|
|
405
|
+
border: 1px solid #eceefc;
|
|
312
406
|
backdrop-filter: blur(10px);
|
|
313
407
|
display: flex;
|
|
314
408
|
justify-content: center;
|
|
315
409
|
align-items: center;
|
|
316
410
|
font-size: 14px;
|
|
317
|
-
color: #
|
|
411
|
+
color: #4f4b81;
|
|
318
412
|
line-height: 17px;
|
|
319
413
|
}
|
|
320
414
|
}
|
|
321
415
|
|
|
322
|
-
.search-mobile{
|
|
416
|
+
.search-mobile-console {
|
|
323
417
|
width: 40px;
|
|
324
418
|
height: 40px;
|
|
325
|
-
|
|
326
|
-
|
|
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);
|
|
327
422
|
border-radius: 10px;
|
|
328
423
|
backdrop-filter: blur(10px);
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
align-items: center;
|
|
424
|
+
padding-top: 11px;
|
|
425
|
+
padding-left: 12px;
|
|
332
426
|
cursor: pointer;
|
|
333
427
|
}
|
|
334
428
|
}
|
|
335
429
|
|
|
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
|
+
);
|
|
439
|
+
opacity: 0.3;
|
|
440
|
+
position: absolute;
|
|
441
|
+
top: 0;
|
|
442
|
+
left: 0;
|
|
443
|
+
width: 100%;
|
|
444
|
+
height: 100%;
|
|
445
|
+
border-radius: 16px;
|
|
446
|
+
}
|
|
447
|
+
|
|
336
448
|
.layout-side {
|
|
337
|
-
background: url('https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-bg-other.png') no-repeat !important;
|
|
449
|
+
// background: url('https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-bg-other.png') no-repeat !important;
|
|
450
|
+
background: transparent !important;
|
|
451
|
+
position: relative;
|
|
338
452
|
height: calc(100vh - 24px);
|
|
339
453
|
user-select: none;
|
|
340
454
|
border: 2px solid white;
|
|
@@ -343,13 +457,20 @@ body {
|
|
|
343
457
|
overflow: visible;
|
|
344
458
|
|
|
345
459
|
.header-logo {
|
|
460
|
+
padding-left: 16px;
|
|
346
461
|
display: flex;
|
|
347
|
-
justify-content:
|
|
462
|
+
justify-content: space-between;
|
|
348
463
|
cursor: pointer;
|
|
349
|
-
height:
|
|
464
|
+
height: 30px;
|
|
465
|
+
|
|
466
|
+
.logo-sub {
|
|
467
|
+
width: 31px;
|
|
468
|
+
height: 30px;
|
|
469
|
+
}
|
|
350
470
|
|
|
351
471
|
.logo-base {
|
|
352
|
-
height:
|
|
472
|
+
height: 30px;
|
|
473
|
+
width: 105px;
|
|
353
474
|
}
|
|
354
475
|
}
|
|
355
476
|
}
|
|
@@ -358,7 +479,6 @@ body {
|
|
|
358
479
|
z-index: 1;
|
|
359
480
|
height: $header-height;
|
|
360
481
|
background: linear-gradient(223deg, #faf8ff 0%, #ecf2fe 29%, #ffffff 100%);
|
|
361
|
-
box-shadow: inset 0px -1px 0px 0px #edeefd;
|
|
362
482
|
border-radius: 16px;
|
|
363
483
|
border: 1px solid #ffffff;
|
|
364
484
|
position: relative;
|
|
@@ -385,6 +505,8 @@ body {
|
|
|
385
505
|
z-index: 2;
|
|
386
506
|
|
|
387
507
|
.actions-item {
|
|
508
|
+
line-height: 22px;
|
|
509
|
+
font-size: 14px;
|
|
388
510
|
height: 36px;
|
|
389
511
|
border-radius: 6px;
|
|
390
512
|
transition: all 0.3s;
|
|
@@ -405,6 +527,7 @@ body {
|
|
|
405
527
|
.layout-header-user {
|
|
406
528
|
height: 48px;
|
|
407
529
|
display: flex;
|
|
530
|
+
font-size: 14px;
|
|
408
531
|
justify-content: flex-start;
|
|
409
532
|
align-items: center;
|
|
410
533
|
z-index: 2;
|
|
@@ -432,54 +555,137 @@ body {
|
|
|
432
555
|
height: 100%;
|
|
433
556
|
padding-left: 12px;
|
|
434
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
|
+
}
|
|
435
589
|
}
|
|
436
590
|
|
|
437
591
|
.layout-content {
|
|
438
592
|
width: 100%;
|
|
439
|
-
height: calc(100vh - #{$header-height});
|
|
593
|
+
height: calc(100vh - #{$header-height} - 12px - 24px);
|
|
440
594
|
overflow: auto;
|
|
441
595
|
margin-top: 12px;
|
|
442
596
|
border-radius: 16px;
|
|
443
597
|
}
|
|
444
598
|
|
|
445
|
-
|
|
446
|
-
.rc-menu-collapse{
|
|
599
|
+
.rc-menu-collapse {
|
|
447
600
|
overflow: hidden;
|
|
448
601
|
transition: height 0.3s ease-out;
|
|
449
602
|
}
|
|
450
603
|
|
|
451
|
-
.rc-menu-hidden{
|
|
604
|
+
.rc-menu-hidden {
|
|
452
605
|
height: 0;
|
|
453
606
|
overflow: hidden;
|
|
454
607
|
}
|
|
455
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
|
+
}
|
|
456
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;
|
|
457
646
|
|
|
647
|
+
&:hover {
|
|
648
|
+
background: rgba(0, 0, 0, 0.08);
|
|
649
|
+
transform: translateX(2px);
|
|
650
|
+
}
|
|
458
651
|
|
|
652
|
+
.search-item-icon {
|
|
653
|
+
color: rgba(0, 0, 0, 0.9);
|
|
654
|
+
font-size: 16px;
|
|
655
|
+
}
|
|
459
656
|
|
|
460
|
-
.
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
width: 100%;
|
|
464
|
-
background: white;
|
|
465
|
-
cursor: pointer;
|
|
466
|
-
z-index: 100;
|
|
467
|
-
}
|
|
657
|
+
.search-item-content {
|
|
658
|
+
flex: 1;
|
|
659
|
+
}
|
|
468
660
|
|
|
469
|
-
.search-item
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
}
|
|
661
|
+
.search-item-title {
|
|
662
|
+
font-size: 14px;
|
|
663
|
+
color: rgba(0, 0, 0, 0.95);
|
|
664
|
+
}
|
|
473
665
|
|
|
666
|
+
.search-item-description {
|
|
667
|
+
font-size: 12px;
|
|
668
|
+
color: rgba(0, 0, 0, 0.6);
|
|
669
|
+
margin-top: 2px;
|
|
670
|
+
}
|
|
474
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
|
+
}
|
|
475
681
|
|
|
476
682
|
.#{$menuPrefixCls}-submenu-arrow {
|
|
477
683
|
display: inline-block;
|
|
478
684
|
position: absolute;
|
|
479
685
|
top: 52%;
|
|
480
686
|
right: 16px;
|
|
481
|
-
width:
|
|
482
|
-
height:
|
|
687
|
+
width: 16px;
|
|
688
|
+
height: 16px;
|
|
483
689
|
transform: translateY(0);
|
|
484
690
|
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
485
691
|
|
|
@@ -491,12 +697,14 @@ body {
|
|
|
491
697
|
&::before,
|
|
492
698
|
&::after {
|
|
493
699
|
position: absolute;
|
|
494
|
-
width:
|
|
495
|
-
height: 1.
|
|
496
|
-
|
|
700
|
+
width: 6px;
|
|
701
|
+
height: 1.25px;
|
|
702
|
+
scale: 1.25;
|
|
703
|
+
background: #788bb1;
|
|
497
704
|
border-radius: 2px;
|
|
498
|
-
transition:
|
|
499
|
-
|
|
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);
|
|
500
708
|
content: '';
|
|
501
709
|
}
|
|
502
710
|
|
|
@@ -533,14 +741,12 @@ body {
|
|
|
533
741
|
.#{$menuPrefixCls}-submenu-arrow {
|
|
534
742
|
&::before,
|
|
535
743
|
&::after {
|
|
536
|
-
background-color: #
|
|
744
|
+
background-color: #185dff;
|
|
537
745
|
}
|
|
538
746
|
}
|
|
539
747
|
}
|
|
540
748
|
}
|
|
541
749
|
|
|
542
|
-
|
|
543
|
-
|
|
544
750
|
.#{$menuPrefixCls} {
|
|
545
751
|
&-zoom-enter,
|
|
546
752
|
&-zoom-appear {
|