cfel-base-components 2.5.44 → 2.5.46

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.
@@ -1,89 +1,366 @@
1
- $header-height: 60px;
2
- $base-color: #c6538c;
1
+ $menuPrefixCls: rc-menu;
3
2
 
4
- body {
5
- overflow: hidden;
3
+ ul {
4
+ list-style: none;
5
+ padding: 0;
6
+ margin: 0;
6
7
  }
7
8
 
8
- .layout-warp {
9
+ .layout-menu {
10
+ height: calc(100% - 120px);
11
+ overflow-y: scroll;
12
+ .menu{
13
+ padding: 0;
14
+ margin: 0;
15
+ list-style: none;
16
+ cursor: pointer;
17
+
18
+ .rc-menu-submenu-title{
19
+ position: relative;
20
+ }
21
+
22
+ .rc-menu-submenu {
23
+ position: relative;
24
+ }
25
+
26
+ .menu-item-content {
27
+ font-weight: 400;
28
+ font-size: 14px;
29
+ line-height: 52px;
30
+ text-align: left;
31
+ }
32
+
33
+ .sub-menu-item-label {
34
+ padding-left: 11px;
35
+ display: flex;
36
+ }
37
+
38
+ .menu-item-icon {
39
+ display: inline-block;
40
+ height: 22px;
41
+ width: 22px;
42
+ }
43
+
44
+ .menu-item-label {
45
+ display: inline-block;
46
+ padding-left: 12px;
47
+ border: 1px solid transparent;
48
+ color: black;
49
+ }
50
+
51
+ .submenu-selected {
52
+ color: #185DFF;
53
+ font-weight: 500;
54
+ }
55
+
56
+
57
+ .sub-li {
58
+ background: rgba(255, 255, 255, 0.15);
59
+ position: relative;
60
+ z-index: 9;
61
+
62
+ &::before {
63
+ content: '';
64
+ position: absolute;
65
+ left: 31px;
66
+ top: 26px;
67
+ width: 5px;
68
+ height: 5px;
69
+ background: #B4C4DC;
70
+ border-radius: 50%;
71
+ z-index: 1;
72
+ }
73
+
74
+ &::after {
75
+ content: '';
76
+ position: absolute;
77
+ left: 32.8px;
78
+ top: 0 !important;
79
+ width: 1px;
80
+ height: 100%;
81
+ background: #B4C4DC;
82
+ z-index: 0;
83
+ }
84
+
85
+ &:only-child::after {
86
+ display: none;
87
+ }
88
+
89
+ &:last-child::after {
90
+ height: 50%;
91
+ }
92
+
93
+ &:first-child::after {
94
+ top: 26px !important;
95
+ }
96
+
97
+ &.rc-menu-submenu-selected {
98
+ &::before {
99
+ background: #185DFF;
100
+ }
101
+ }
102
+
103
+ &.rc-menu-item-selected {
104
+ &::before {
105
+ background: #185DFF;
106
+ }
107
+ }
108
+
109
+ &:not(.rc-menu-submenu) {
110
+ height: 52px;
111
+ display: flex;
112
+ align-items: center;
113
+ box-shadow: 0px 0px 30px 0px transparent;
114
+
115
+ &.rc-menu-item-selected {
116
+ .menu-item-label {
117
+ display: flex;
118
+ align-items: center;
119
+ padding-left: 12px;
120
+ width: 174px;
121
+ height: 40px;
122
+ background: #C5D6FF;
123
+ border-radius: 10px;
124
+ backdrop-filter: blur(10px);
125
+ transition: all 0.3s ease-in-out;
126
+ }
127
+ }
128
+ }
129
+ }
130
+
131
+ .grand-li {
132
+ background: #E0ECFE;
133
+ position: relative;
134
+ z-index: 9;
135
+ height: 52px;
9
136
  display: flex;
137
+ align-items: center;
138
+
139
+
140
+ &::before {
141
+ content: '';
142
+ position: absolute;
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
+ }
152
+
153
+ &::after {
154
+ content: '';
155
+ position: absolute;
156
+ left: 45px;
157
+ top: 0;
158
+ width: 1px;
159
+ height: 100%;
160
+ background: #B4C4DC;
161
+ z-index: 0;
162
+ }
163
+
164
+ &:only-child::after {
165
+ display: none;
166
+ }
167
+
168
+ &:last-child::after {
169
+ height: 50%;
170
+ }
171
+
172
+ &:first-child::after {
173
+ top: 26px !important;
174
+ }
175
+
176
+ &.rc-menu-item-selected {
177
+ &::before {
178
+ background: #185DFF;
179
+ }
180
+ }
181
+
182
+ &.rc-menu-item-selected {
183
+ .menu-item-label {
184
+ display: flex;
185
+ align-items: center;
186
+ padding-left: 12px;
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
+ }
194
+
195
+ &::before {
196
+ background: #185DFF;
197
+ }
198
+ }
199
+ }
10
200
  }
11
201
 
12
- .ant-layout .ant-layout-sider {
13
- background-image: linear-gradient(
14
- -45deg,
15
- rgba(103, 200, 21, 0.5),
16
- rgba(55, 96, 244, 0.5),
17
- rgba(245, 34, 45, 0.7)
18
- );
19
- background-position: center;
20
- // background-color: #fff;
21
- // background-color: #13c2c2;
22
- background-color: #08979c;
23
- // background-color: #531dab;
24
- // background-color: #389e0d;
25
-
26
- .ant-layout-sider-trigger {
27
- background: transparent;
28
- &:hover {
29
- background: rgba(0, 0, 0, 0.12);
202
+ .menu-collapsed{
203
+ display: flex;
204
+ flex-direction: column;
205
+ align-items: center;
206
+ list-style: none;
207
+ cursor: pointer;
208
+
209
+ .menu-item-content{
210
+ font-weight: 400;
211
+ font-size: 14px;
212
+ margin-top: 30px;
213
+ line-height: 24px;
214
+ text-align: left;
30
215
  }
216
+
217
+ }
218
+
219
+ .cpc-icon {
220
+ display: inline-block;
221
+ height: 22px;
222
+ width: 22px;
31
223
  }
224
+
32
225
  }
33
226
 
34
- .layout-side {
35
- height: 100vh;
36
- user-select: none;
227
+
228
+ $header-height: 62px;
229
+ $header-height: 62px;
230
+ $base-color: #c6538c;
231
+
232
+ body {
37
233
  overflow: hidden;
234
+ }
38
235
 
39
- .layout-logo {
40
- cursor: pointer;
41
- height: 60px;
42
- margin: 8px auto;
236
+ .layout-warps {
237
+ display: flex;
238
+ padding: 12px;
239
+ background-color: #f3f6fd;
240
+
241
+ ::-webkit-scrollbar {
242
+ display: none;
243
+ }
244
+
245
+ .trigger {
246
+ margin-right: 16px;
247
+ width: 30px;
248
+ height: 30px;
249
+ background: #f0f4fe;
250
+ box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
251
+ border-radius: 4px;
252
+ border: 1px solid rgba(255, 255, 255, 0.55);
253
+ backdrop-filter: blur(10px);
43
254
  display: flex;
44
255
  justify-content: center;
45
256
  align-items: center;
46
- width: 100%;
47
- z-index: 1;
257
+ }
48
258
 
49
- .logo-img {
50
- position: absolute;
51
- height: 60px;
52
- line-height: 60px;
53
- object-fit: cover;
54
- transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
55
- }
259
+ .close-trigger {
260
+ margin-top: 24px;
261
+ width: 30px;
262
+ height: 30px;
263
+ background: #f0f4fe;
264
+ box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
265
+ border-radius: 4px;
266
+ border: 1px solid rgba(255, 255, 255, 0.55);
267
+ backdrop-filter: blur(10px);
268
+ display: flex;
269
+ justify-content: center;
270
+ align-items: center;
271
+ }
56
272
 
57
- .current-logo {
58
- left: 0;
59
- right: 0;
60
- margin: auto;
273
+ .search {
274
+ width: 228px;
275
+ height: 40px;
276
+ box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05), inset 0px -2px 0px 0px rgba(255, 255, 255, 0.3);
277
+ border-radius: 10px;
278
+ 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
+ position: relative;
282
+
283
+ .search-input{
284
+ width: 100%;
285
+ height: 100%;
286
+ background: transparent;
287
+ border: none;
288
+ outline: none;
289
+ padding-left: 45px;
290
+ line-height: 32px;
291
+ font-size: 14px;
292
+ color: #7D8295;
61
293
  }
62
294
 
63
- .hide-logo {
64
- left: -500px;
295
+ .search-icon{
296
+ position: absolute;
297
+ left: 12px;
298
+ top: 57%;
299
+ transform: translateY(-50%);
65
300
  }
66
- .hide-sub-logo {
67
- right: -500px;
301
+
302
+ .search-command{
303
+ position: absolute;
304
+ right: 4px;
305
+ top: 50%;
306
+ transform: translateY(-50%);
307
+ width: 40px;
308
+ height: 30px;
309
+ background: #F0F4FE;
310
+ border-radius: 8px;
311
+ border: 1px solid #ECEEFC;
312
+ backdrop-filter: blur(10px);
313
+ display: flex;
314
+ justify-content: center;
315
+ align-items: center;
316
+ font-size: 14px;
317
+ color: #4F4B81;
318
+ line-height: 17px;
68
319
  }
69
320
  }
70
321
 
71
- .layout-menu-container {
72
- height: calc(100vh - 60px - 16px - 48px);
73
- overflow: auto;
74
- .ant-menu {
75
- background: transparent !important;
76
- }
77
- .ant-menu-item-selected {
78
- background: rgba(255, 255, 255, 0.3) !important;
322
+ .search-mobile{
323
+ width: 40px;
324
+ height: 40px;
325
+ background: #F8F8FB;
326
+ box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.05), inset 0px -2px 0px 0px #FFFFFF;
327
+ border-radius: 10px;
328
+ backdrop-filter: blur(10px);
329
+ display: flex;
330
+ justify-content: center;
331
+ align-items: center;
332
+ cursor: pointer;
333
+ }
334
+ }
335
+
336
+ .layout-side {
337
+ background: url('https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-bg-other.png') no-repeat !important;
338
+ height: calc(100vh - 24px);
339
+ user-select: none;
340
+ border: 2px solid white;
341
+ border-radius: 16px;
342
+ padding-top: 24px;
343
+ overflow: visible;
344
+
345
+ .header-logo {
346
+ display: flex;
347
+ justify-content: center;
348
+ cursor: pointer;
349
+ height: 40px;
350
+
351
+ .logo-base {
352
+ height: 40px;
79
353
  }
80
354
  }
81
355
  }
82
356
 
83
357
  .layout-header {
84
- height: $header-height;
85
- background: white;
86
358
  z-index: 1;
359
+ height: $header-height;
360
+ background: linear-gradient(223deg, #faf8ff 0%, #ecf2fe 29%, #ffffff 100%);
361
+ box-shadow: inset 0px -1px 0px 0px #edeefd;
362
+ border-radius: 16px;
363
+ border: 1px solid #ffffff;
87
364
  position: relative;
88
365
  display: flex;
89
366
  justify-content: flex-start;
@@ -153,6 +430,7 @@ body {
153
430
  .layout-main {
154
431
  flex: 1;
155
432
  height: 100%;
433
+ padding-left: 12px;
156
434
  overflow: auto;
157
435
  }
158
436
 
@@ -160,10 +438,159 @@ body {
160
438
  width: 100%;
161
439
  height: calc(100vh - #{$header-height});
162
440
  overflow: auto;
441
+ margin-top: 12px;
442
+ border-radius: 16px;
443
+ }
444
+
445
+
446
+ .rc-menu-collapse{
447
+ overflow: hidden;
448
+ transition: height 0.3s ease-out;
449
+ }
450
+
451
+ .rc-menu-hidden{
452
+ height: 0;
453
+ overflow: hidden;
454
+ }
455
+
456
+
457
+
458
+
459
+
460
+ .list{
461
+ left: 0;
462
+ position: absolute;
463
+ width: 100%;
464
+ background: white;
465
+ cursor: pointer;
466
+ z-index: 100;
467
+ }
468
+
469
+ .search-item:hover{
470
+ background-color: ghostwhite;
471
+ border-radius: 7px;
472
+ }
473
+
474
+
475
+
476
+ .#{$menuPrefixCls}-submenu-arrow {
477
+ display: inline-block;
478
+ position: absolute;
479
+ top: 52%;
480
+ right: 16px;
481
+ width: 10px;
482
+ height: 10px;
483
+ transform: translateY(0);
484
+ transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
485
+
486
+ // 当菜单收起时隐藏箭头
487
+ .ant-layout-sider-collapsed & {
488
+ display: none;
489
+ }
490
+
491
+ &::before,
492
+ &::after {
493
+ position: absolute;
494
+ width: 5.5px;
495
+ height: 1.5px;
496
+ background-color: rgba(0, 0, 0, 0.85);
497
+ border-radius: 2px;
498
+ transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
499
+ transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
500
+ content: '';
501
+ }
502
+
503
+ &::before {
504
+ transform: rotate(-45deg) translateX(2.5px);
505
+ }
506
+
507
+ &::after {
508
+ transform: rotate(45deg) translateX(-2.5px);
509
+ }
510
+
511
+ // RTL support
512
+ &.#{$menuPrefixCls}-rtl,
513
+ .#{$menuPrefixCls}-submenu-rtl & {
514
+ right: auto;
515
+ left: 16px;
516
+ }
517
+ }
518
+
519
+ .#{$menuPrefixCls}-submenu-open > .#{$menuPrefixCls}-submenu-title {
520
+ .#{$menuPrefixCls}-submenu-arrow {
521
+ transform: translateY(-3px);
522
+ &::before {
523
+ transform: rotate(45deg) translateX(2.5px);
524
+ }
525
+ &::after {
526
+ transform: rotate(-45deg) translateX(-2.5px);
527
+ }
528
+ }
163
529
  }
164
530
 
165
- .ant-menu-submenu-popup {
166
- .ant-menu-item-selected {
167
- background: rgba(255, 255, 255, 0.12) !important;
531
+ .#{$menuPrefixCls}-submenu-selected {
532
+ > .#{$menuPrefixCls}-submenu-title {
533
+ .#{$menuPrefixCls}-submenu-arrow {
534
+ &::before,
535
+ &::after {
536
+ background-color: #185DFF;
537
+ }
538
+ }
539
+ }
540
+ }
541
+
542
+
543
+
544
+ .#{$menuPrefixCls} {
545
+ &-zoom-enter,
546
+ &-zoom-appear {
547
+ opacity: 0;
548
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
549
+ animation-play-state: paused;
550
+ }
551
+
552
+ &-zoom-leave {
553
+ animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
554
+ animation-play-state: paused;
555
+ }
556
+
557
+ &-zoom-enter#{&}-zoom-enter-active,
558
+ &-zoom-appear#{&}-zoom-appear-active {
559
+ animation-name: rcMenuOpenZoomIn;
560
+ animation-play-state: running;
561
+ }
562
+
563
+ &-zoom-leave#{&}-zoom-leave-active {
564
+ animation-name: rcMenuOpenZoomOut;
565
+ animation-play-state: running;
566
+ }
567
+
568
+ &-zoom-enter,
569
+ &-zoom-appear,
570
+ &-zoom-leave {
571
+ .#{$menuPrefixCls}-submenu-rtl & {
572
+ transform-origin: top right !important;
573
+ }
574
+ }
575
+
576
+ @keyframes rcMenuOpenZoomIn {
577
+ 0% {
578
+ opacity: 0;
579
+ transform: scale(0, 0);
580
+ }
581
+ 100% {
582
+ opacity: 1;
583
+ transform: scale(1, 1);
584
+ }
585
+ }
586
+
587
+ @keyframes rcMenuOpenZoomOut {
588
+ 0% {
589
+ transform: scale(1, 1);
590
+ }
591
+ 100% {
592
+ opacity: 0;
593
+ transform: scale(0, 0);
594
+ }
168
595
  }
169
596
  }