unika-components 1.0.382 → 1.0.383

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,103 +1,3 @@
1
-
2
- .ele-shape {
3
- position: absolute;
4
- overflow: hidden;
5
- }
6
-
7
- .ani-wrap {
8
- width: 100%;
9
- height: 100%;
10
- box-sizing: border-box;
11
- }
12
-
13
- .e-shape {
14
- width: 100%;
15
- height: 100%;
16
- }
17
-
18
- .svg-container :deep(svg) {
19
- width: 100%;
20
- height: 100%;
21
- display: block;
22
- }
23
-
24
- .svg-loading,
25
- .svg-error {
26
- display: flex;
27
- align-items: center;
28
- justify-content: center;
29
- width: 100%;
30
- height: 100%;
31
- background: rgba(0,0,0,0.05);
32
- }
33
-
34
- .ele-text {
35
- position: relative;
36
- }
37
-
38
- .ele-text .ani-wrap {
39
- width: 100%;
40
- height: 100%;
41
- }
42
-
43
- .text-common {
44
- padding: 5px;
45
- text-orientation: upright;
46
- white-space: pre-wrap;
47
- }
48
-
49
- /* 文本动画类 */
50
- .text-fadeIn {
51
- animation: fadeIn 1s ease-in-out;
52
- }
53
-
54
- .text-slideIn {
55
- animation: slideIn 1s ease-in-out;
56
- }
57
-
58
- .text-bounceIn {
59
- animation: bounceIn 1s ease-in-out;
60
- }
61
-
62
- /* 基础动画关键帧 */
63
- @keyframes fadeIn {
64
- from {
65
- opacity: 0;
66
- }
67
- to {
68
- opacity: 1;
69
- }
70
- }
71
-
72
- @keyframes slideIn {
73
- from {
74
- transform: translateY(20px);
75
- opacity: 0;
76
- }
77
- to {
78
- transform: translateY(0);
79
- opacity: 1;
80
- }
81
- }
82
-
83
- @keyframes bounceIn {
84
- 0% {
85
- transform: scale(0.3);
86
- opacity: 0;
87
- }
88
- 50% {
89
- transform: scale(1.05);
90
- opacity: 0.8;
91
- }
92
- 70% {
93
- transform: scale(0.9);
94
- opacity: 0.9;
95
- }
96
- 100% {
97
- transform: scale(1);
98
- opacity: 1;
99
- }
100
- }
101
1
 
102
2
  #audio {
103
3
  position: absolute;
@@ -171,6 +71,74 @@
171
71
  background: #fff;
172
72
  }
173
73
 
74
+ .ele-text {
75
+ position: relative;
76
+ }
77
+
78
+ .ele-text .ani-wrap {
79
+ width: 100%;
80
+ height: 100%;
81
+ }
82
+
83
+ .text-common {
84
+ padding: 5px;
85
+ text-orientation: upright;
86
+ white-space: pre-wrap;
87
+ }
88
+
89
+ /* 文本动画类 */
90
+ .text-fadeIn {
91
+ animation: fadeIn 1s ease-in-out;
92
+ }
93
+
94
+ .text-slideIn {
95
+ animation: slideIn 1s ease-in-out;
96
+ }
97
+
98
+ .text-bounceIn {
99
+ animation: bounceIn 1s ease-in-out;
100
+ }
101
+
102
+ /* 基础动画关键帧 */
103
+ @keyframes fadeIn {
104
+ from {
105
+ opacity: 0;
106
+ }
107
+ to {
108
+ opacity: 1;
109
+ }
110
+ }
111
+
112
+ @keyframes slideIn {
113
+ from {
114
+ transform: translateY(20px);
115
+ opacity: 0;
116
+ }
117
+ to {
118
+ transform: translateY(0);
119
+ opacity: 1;
120
+ }
121
+ }
122
+
123
+ @keyframes bounceIn {
124
+ 0% {
125
+ transform: scale(0.3);
126
+ opacity: 0;
127
+ }
128
+ 50% {
129
+ transform: scale(1.05);
130
+ opacity: 0.8;
131
+ }
132
+ 70% {
133
+ transform: scale(0.9);
134
+ opacity: 0.9;
135
+ }
136
+ 100% {
137
+ transform: scale(1);
138
+ opacity: 1;
139
+ }
140
+ }
141
+
174
142
  .ele-img {
175
143
  position: absolute;
176
144
  overflow: hidden;
@@ -269,63 +237,227 @@
269
237
  opacity: 1;
270
238
  }
271
239
 
272
- @font-face {
273
- font-family: "iconfont"; /* Project id 3350423 */
274
- src: url('//at.alicdn.com/t/c/font_3350423_yo5fsq7j90g.woff2?t=1737679854669') format('woff2'),
275
- url('//at.alicdn.com/t/c/font_3350423_yo5fsq7j90g.woff?t=1737679854669') format('woff'),
276
- url('//at.alicdn.com/t/c/font_3350423_yo5fsq7j90g.ttf?t=1737679854669') format('truetype'),
277
- url('//at.alicdn.com/t/c/font_3350423_yo5fsq7j90g.svg?t=1737679854669#iconfont') format('svg');
240
+ .count-down .drag-point {
241
+ cursor: default!important
278
242
  }
279
243
 
280
- .iconfont {
281
- font-family: "iconfont" !important;
282
- font-size: 16px;
283
- font-style: normal;
284
- -webkit-font-smoothing: antialiased;
285
- -moz-osx-font-smoothing: grayscale;
244
+ .count-down .ani-wrap {
245
+ width: 100%;
246
+ height: 100%
286
247
  }
287
248
 
288
- @keyframes jumpheart {
289
- to {
290
- -webkit-transform: scale(1.2);
291
- transform: scale(1.2)
292
- }
293
- }
294
- .ele-calendar {
295
- position: relative;
296
- width: 325px !important;
297
- min-height: 325px !important;
298
- height: auto !important;
249
+ .count-down .count-text,.count-down .finish-cont {
250
+ display: -webkit-box;
251
+ display: -ms-flexbox;
252
+ display: flex;
253
+ height: 100%;
254
+ -webkit-box-align: center;
255
+ -ms-flex-align: center;
256
+ align-items: center;
257
+ -webkit-box-pack: center;
258
+ -ms-flex-pack: center;
259
+ justify-content: center
299
260
  }
300
261
 
301
- .ele-calendar .drag-point {
302
- cursor: default !important;
262
+ .count-down .finish-cont {
263
+ width: 100%
303
264
  }
304
265
 
305
- .ele-calendar .ani-wrap {
306
- position: relative;
307
- width: 100%;
308
- min-height: 325px !important;
309
- height: auto !important;
310
- padding: 22px 0;
266
+ .count-down .count-flip {
267
+ display: -webkit-box;
268
+ display: -ms-flexbox;
269
+ display: flex;
270
+ height: 100%;
271
+ -webkit-box-align: center;
272
+ -ms-flex-align: center;
273
+ align-items: center;
274
+ -webkit-box-pack: center;
275
+ -ms-flex-pack: center;
276
+ justify-content: center
311
277
  }
312
278
 
313
- .ele-calendar .ani-wrap .can-wrap .can-top {
314
- display: flex;
315
- justify-content: space-between;
316
- align-items: flex-end;
317
- line-height: 1;
318
- padding: 0 47px 20px;
279
+ .count-down .count-flip .numscroll {
280
+ -webkit-animation: numscroll .4s ease-in-out;
281
+ animation: numscroll .4s ease-in-out;
282
+ -webkit-animation-fill-mode: both;
283
+ animation-fill-mode: both
319
284
  }
320
285
 
321
- .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
322
- font-size: 25px;
323
- padding-bottom: 4px;
286
+ .count-down .count-flip .numscroll .curr-num {
287
+ -webkit-transition: all .3s ease-in-out;
288
+ transition: all .3s ease-in-out;
289
+ opacity: .6;
290
+ -webkit-transform: scale(.5)!important;
291
+ transform: scale(.5)!important
324
292
  }
325
293
 
326
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
327
- font-size: 25px;
328
- }
294
+ @-webkit-keyframes numscroll {
295
+ 0% {
296
+ -webkit-transform: translateZ(0);
297
+ transform: translateZ(0)
298
+ }
299
+
300
+ to {
301
+ -webkit-transform: translate3d(0,100%,0);
302
+ transform: translate3d(0,100%,0)
303
+ }
304
+ }
305
+
306
+ @keyframes numscroll {
307
+ 0% {
308
+ -webkit-transform: translateZ(0);
309
+ transform: translateZ(0)
310
+ }
311
+
312
+ to {
313
+ -webkit-transform: translate3d(0,100%,0);
314
+ transform: translate3d(0,100%,0)
315
+ }
316
+ }
317
+
318
+ .count-down .count-flip .c-com {
319
+ min-width: 50px;
320
+ height: auto;
321
+ margin: 6px;
322
+ padding: 5px 0 6px;
323
+ background-color: #111
324
+ }
325
+
326
+ .count-down .count-flip .c-com .flex-wrap {
327
+ display: -webkit-box;
328
+ display: -ms-flexbox;
329
+ display: flex;
330
+ position: relative;
331
+ width: 100%;
332
+ height: 100%;
333
+ -webkit-box-align: center;
334
+ -ms-flex-align: center;
335
+ align-items: center
336
+ }
337
+
338
+ .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
339
+ line-height: 27px
340
+ }
341
+
342
+ .count-down .count-flip .c-com .flex-wrap .next-num {
343
+ position: absolute;
344
+ top: -100%
345
+ }
346
+
347
+ .count-down .count-flip .c-com .flex-wrap .curr-num {
348
+ -webkit-transform: scale(1);
349
+ transform: scale(1)
350
+ }
351
+
352
+ .count-down .bottom-center,.count-down .left-bottom,.count-down .left-center,.count-down .left-top,.count-down .right-bottom,.count-down .right-center,.count-down .right-top,.count-down .top-center {
353
+ display: none!important
354
+ }
355
+
356
+ .c-wrap {
357
+ width: 100%;
358
+ height: 100%;
359
+ overflow: hidden;
360
+ font-size: 0
361
+ }
362
+
363
+ .c-wrap.c-day-wrap {
364
+ text-align: center
365
+ }
366
+
367
+ .c-wrap.c-day-wrap .c-num {
368
+ width: auto
369
+ }
370
+
371
+ .c-wrap .c-num {
372
+ display: inline-block;
373
+ width: 50%;
374
+ overflow: hidden;
375
+ font-size: 20px;
376
+ color: #999
377
+ }
378
+
379
+ .c-wrap .c-left .flex-wrap {
380
+ display: -webkit-box;
381
+ display: -ms-flexbox;
382
+ display: flex;
383
+ -webkit-box-pack: end;
384
+ -ms-flex-pack: end;
385
+ justify-content: flex-end
386
+ }
387
+
388
+ .c-wrap .c-text {
389
+ display: -webkit-box;
390
+ display: -ms-flexbox;
391
+ display: flex;
392
+ width: 100%;
393
+ font-size: 12px;
394
+ -webkit-box-pack: center;
395
+ -ms-flex-pack: center;
396
+ justify-content: center;
397
+ -webkit-box-align: center;
398
+ -ms-flex-align: center;
399
+ align-items: center;
400
+ white-space: nowrap
401
+ }
402
+
403
+
404
+ @font-face {
405
+ font-family: "iconfont"; /* Project id 3350423 */
406
+ src: url('//at.alicdn.com/t/c/font_3350423_yo5fsq7j90g.woff2?t=1737679854669') format('woff2'),
407
+ url('//at.alicdn.com/t/c/font_3350423_yo5fsq7j90g.woff?t=1737679854669') format('woff'),
408
+ url('//at.alicdn.com/t/c/font_3350423_yo5fsq7j90g.ttf?t=1737679854669') format('truetype'),
409
+ url('//at.alicdn.com/t/c/font_3350423_yo5fsq7j90g.svg?t=1737679854669#iconfont') format('svg');
410
+ }
411
+
412
+ .iconfont {
413
+ font-family: "iconfont" !important;
414
+ font-size: 16px;
415
+ font-style: normal;
416
+ -webkit-font-smoothing: antialiased;
417
+ -moz-osx-font-smoothing: grayscale;
418
+ }
419
+
420
+ @keyframes jumpheart {
421
+ to {
422
+ -webkit-transform: scale(1.2);
423
+ transform: scale(1.2)
424
+ }
425
+ }
426
+ .ele-calendar {
427
+ position: relative;
428
+ width: 325px !important;
429
+ min-height: 325px !important;
430
+ height: auto !important;
431
+ }
432
+
433
+ .ele-calendar .drag-point {
434
+ cursor: default !important;
435
+ }
436
+
437
+ .ele-calendar .ani-wrap {
438
+ position: relative;
439
+ width: 100%;
440
+ min-height: 325px !important;
441
+ height: auto !important;
442
+ padding: 22px 0;
443
+ }
444
+
445
+ .ele-calendar .ani-wrap .can-wrap .can-top {
446
+ display: flex;
447
+ justify-content: space-between;
448
+ align-items: flex-end;
449
+ line-height: 1;
450
+ padding: 0 47px 20px;
451
+ }
452
+
453
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
454
+ font-size: 25px;
455
+ padding-bottom: 4px;
456
+ }
457
+
458
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
459
+ font-size: 25px;
460
+ }
329
461
 
330
462
  .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
331
463
  position: relative;
@@ -627,139 +759,6 @@
627
759
  content: "\E6A6";
628
760
  }
629
761
 
630
- .effect-container {
631
- will-change: transform;
632
- }
633
-
634
- .particles-wrapper {
635
- position: relative;
636
- width: 100%;
637
- height: 100%;
638
- }
639
-
640
- .particle {
641
- position: absolute;
642
- background-repeat: no-repeat;
643
- background-size: contain;
644
- animation-name: falling;
645
- animation-timing-function: linear;
646
- animation-iteration-count: infinite;
647
- will-change: transform;
648
- }
649
-
650
- @keyframes falling {
651
- 0% {
652
- transform: translateY(0) rotate(0deg);
653
- opacity: 1;
654
- }
655
- 80% {
656
- opacity: 0.8;
657
- }
658
- 100% {
659
- transform: translateY(100vh) rotate(360deg);
660
- opacity: 0;
661
- }
662
- }
663
- .ele-lottie .ele-lotwrap {
664
- overflow: hidden
665
- }
666
-
667
- .ele-effect .effect-wrap {
668
- position: relative;
669
- overflow: hidden;
670
- width: 100%;
671
- height: 100%
672
- }
673
-
674
- .ele-effect .e-small {
675
- position: absolute;
676
- width: 24px;
677
- height: 24px;
678
- background-image: url(http://cdn.h5ds.com/static/images/snow.png);
679
- background-size: cover;
680
- background-repeat: no-repeat;
681
- -webkit-transform-origin: center;
682
- transform-origin: center;
683
- -webkit-animation: snow 5s linear infinite;
684
- animation: snow 5s linear infinite
685
- }
686
-
687
- .call {
688
- position: absolute;
689
- cursor: pointer;
690
- user-select: none;
691
- }
692
-
693
- .bohao-container {
694
- display: flex;
695
- justify-content: center;
696
- align-items: center;
697
- width: 100%;
698
- height: 100%;
699
- overflow: hidden;
700
- transition: opacity 0.2s;
701
- }
702
-
703
- .bohao-container:hover {
704
- opacity: 0.9;
705
- }
706
-
707
- .bohao-content {
708
- display: flex;
709
- align-items: center;
710
- justify-content: center;
711
- }
712
-
713
- .btn-text {
714
- margin-left: 10px;
715
- }
716
-
717
- /* 这里可以添加实际的电话图标样式 */
718
- .iconfont.hb-tel {
719
- display: inline-block;
720
- width: 16px;
721
- height: 16px;
722
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>');
723
- background-repeat: no-repeat;
724
- background-position: center;
725
- background-size: contain;
726
- }
727
-
728
- .ant-input-number {
729
- box-sizing: border-box;
730
- margin: 0;
731
- padding: 0;
732
- color: rgba(0, 0, 0, 0.88);
733
- font-size: 14px;
734
- line-height: 1.5714285714285714;
735
- list-style: none;
736
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
737
- position: relative;
738
- display: inline-block;
739
- width: 100%;
740
- min-width: 0;
741
- background-color: #ffffff;
742
- background-image: none;
743
- border-width: 1px;
744
- border-style: solid;
745
- border-color: #d9d9d9;
746
- border-radius: 6px;
747
- transition: all 0.2s;
748
- border: 1px solid #d9d9d9;
749
- }
750
- .ant-form-item {
751
- box-sizing: border-box;
752
- margin: 0;
753
- padding: 0;
754
- color: rgba(0, 0, 0, 0.88);
755
- font-size: 14px;
756
- line-height: 1.5714285714285714;
757
- list-style: none;
758
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
759
- margin-bottom: 0px;
760
- vertical-align: top;
761
- }
762
-
763
762
  .element-ditu .ani-wrap {
764
763
  width: 100%;
765
764
  height: 100%;
@@ -805,174 +804,80 @@
805
804
  width: 100%;
806
805
  height: 100%;
807
806
  }
807
+
808
+ .ele-shape {
809
+ position: absolute;
810
+ overflow: hidden;
811
+ }
812
+
813
+ .ani-wrap {
814
+ width: 100%;
815
+ height: 100%;
816
+ box-sizing: border-box;
817
+ }
818
+
819
+ .e-shape {
820
+ width: 100%;
821
+ height: 100%;
822
+ }
823
+
824
+ .svg-container :deep(svg) {
825
+ width: 100%;
826
+ height: 100%;
827
+ display: block;
828
+ }
829
+
830
+ .svg-loading,
831
+ .svg-error {
832
+ display: flex;
833
+ align-items: center;
834
+ justify-content: center;
835
+ width: 100%;
836
+ height: 100%;
837
+ background: rgba(0,0,0,0.05);
838
+ }
808
839
 
809
- .count-down .drag-point {
810
- cursor: default!important
811
- }
812
-
813
- .count-down .ani-wrap {
814
- width: 100%;
815
- height: 100%
816
- }
817
-
818
- .count-down .count-text,.count-down .finish-cont {
819
- display: -webkit-box;
820
- display: -ms-flexbox;
821
- display: flex;
822
- height: 100%;
823
- -webkit-box-align: center;
824
- -ms-flex-align: center;
825
- align-items: center;
826
- -webkit-box-pack: center;
827
- -ms-flex-pack: center;
828
- justify-content: center
829
- }
830
-
831
- .count-down .finish-cont {
832
- width: 100%
833
- }
834
-
835
- .count-down .count-flip {
836
- display: -webkit-box;
837
- display: -ms-flexbox;
838
- display: flex;
839
- height: 100%;
840
- -webkit-box-align: center;
841
- -ms-flex-align: center;
842
- align-items: center;
843
- -webkit-box-pack: center;
844
- -ms-flex-pack: center;
845
- justify-content: center
846
- }
847
-
848
- .count-down .count-flip .numscroll {
849
- -webkit-animation: numscroll .4s ease-in-out;
850
- animation: numscroll .4s ease-in-out;
851
- -webkit-animation-fill-mode: both;
852
- animation-fill-mode: both
853
- }
854
-
855
- .count-down .count-flip .numscroll .curr-num {
856
- -webkit-transition: all .3s ease-in-out;
857
- transition: all .3s ease-in-out;
858
- opacity: .6;
859
- -webkit-transform: scale(.5)!important;
860
- transform: scale(.5)!important
861
- }
862
-
863
- @-webkit-keyframes numscroll {
864
- 0% {
865
- -webkit-transform: translateZ(0);
866
- transform: translateZ(0)
867
- }
868
-
869
- to {
870
- -webkit-transform: translate3d(0,100%,0);
871
- transform: translate3d(0,100%,0)
872
- }
873
- }
874
-
875
- @keyframes numscroll {
876
- 0% {
877
- -webkit-transform: translateZ(0);
878
- transform: translateZ(0)
879
- }
880
-
881
- to {
882
- -webkit-transform: translate3d(0,100%,0);
883
- transform: translate3d(0,100%,0)
884
- }
885
- }
886
-
887
- .count-down .count-flip .c-com {
888
- min-width: 50px;
889
- height: auto;
890
- margin: 6px;
891
- padding: 5px 0 6px;
892
- background-color: #111
893
- }
894
-
895
- .count-down .count-flip .c-com .flex-wrap {
896
- display: -webkit-box;
897
- display: -ms-flexbox;
898
- display: flex;
899
- position: relative;
900
- width: 100%;
901
- height: 100%;
902
- -webkit-box-align: center;
903
- -ms-flex-align: center;
904
- align-items: center
905
- }
906
-
907
- .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
908
- line-height: 27px
909
- }
910
-
911
- .count-down .count-flip .c-com .flex-wrap .next-num {
912
- position: absolute;
913
- top: -100%
914
- }
915
-
916
- .count-down .count-flip .c-com .flex-wrap .curr-num {
917
- -webkit-transform: scale(1);
918
- transform: scale(1)
919
- }
920
-
921
- .count-down .bottom-center,.count-down .left-bottom,.count-down .left-center,.count-down .left-top,.count-down .right-bottom,.count-down .right-center,.count-down .right-top,.count-down .top-center {
922
- display: none!important
923
- }
924
-
925
- .c-wrap {
926
- width: 100%;
927
- height: 100%;
928
- overflow: hidden;
929
- font-size: 0
840
+ .call {
841
+ position: absolute;
842
+ cursor: pointer;
843
+ user-select: none;
930
844
  }
931
845
 
932
- .c-wrap.c-day-wrap {
933
- text-align: center
846
+ .bohao-container {
847
+ display: flex;
848
+ justify-content: center;
849
+ align-items: center;
850
+ width: 100%;
851
+ height: 100%;
852
+ overflow: hidden;
853
+ transition: opacity 0.2s;
934
854
  }
935
855
 
936
- .c-wrap.c-day-wrap .c-num {
937
- width: auto
856
+ .bohao-container:hover {
857
+ opacity: 0.9;
938
858
  }
939
859
 
940
- .c-wrap .c-num {
941
- display: inline-block;
942
- width: 50%;
943
- overflow: hidden;
944
- font-size: 20px;
945
- color: #999
860
+ .bohao-content {
861
+ display: flex;
862
+ align-items: center;
863
+ justify-content: center;
946
864
  }
947
865
 
948
- .c-wrap .c-left .flex-wrap {
949
- display: -webkit-box;
950
- display: -ms-flexbox;
951
- display: flex;
952
- -webkit-box-pack: end;
953
- -ms-flex-pack: end;
954
- justify-content: flex-end
866
+ .btn-text {
867
+ margin-left: 10px;
955
868
  }
956
869
 
957
- .c-wrap .c-text {
958
- display: -webkit-box;
959
- display: -ms-flexbox;
960
- display: flex;
961
- width: 100%;
962
- font-size: 12px;
963
- -webkit-box-pack: center;
964
- -ms-flex-pack: center;
965
- justify-content: center;
966
- -webkit-box-align: center;
967
- -ms-flex-align: center;
968
- align-items: center;
969
- white-space: nowrap
870
+ /* 这里可以添加实际的电话图标样式 */
871
+ .iconfont.hb-tel {
872
+ display: inline-block;
873
+ width: 16px;
874
+ height: 16px;
875
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>');
876
+ background-repeat: no-repeat;
877
+ background-position: center;
878
+ background-size: contain;
970
879
  }
971
880
 
972
-
973
- .uni-build-up-component {
974
- }
975
-
976
881
  .like-button {
977
882
  display: flex;
978
883
  flex-direction: column;
@@ -995,16 +900,101 @@
995
900
  color: #333;
996
901
  }
997
902
 
998
- .uni-lotties-component {
903
+ .effect-container {
904
+ will-change: transform;
905
+ }
906
+
907
+ .particles-wrapper {
908
+ position: relative;
999
909
  width: 100%;
1000
910
  height: 100%;
1001
911
  }
1002
912
 
1003
- /* 设计稿尺寸(如375px下20px的按钮) */
1004
- .btn {
1005
- width: 20px; /* 直接写设计稿px */
1006
- height: 10px;
913
+ .particle {
914
+ position: absolute;
915
+ background-repeat: no-repeat;
916
+ background-size: contain;
917
+ animation-name: falling;
918
+ animation-timing-function: linear;
919
+ animation-iteration-count: infinite;
920
+ will-change: transform;
921
+ }
922
+
923
+ @keyframes falling {
924
+ 0% {
925
+ transform: translateY(0) rotate(0deg);
926
+ opacity: 1;
927
+ }
928
+ 80% {
929
+ opacity: 0.8;
930
+ }
931
+ 100% {
932
+ transform: translateY(100vh) rotate(360deg);
933
+ opacity: 0;
934
+ }
935
+ }
936
+ .ele-lottie .ele-lotwrap {
937
+ overflow: hidden
938
+ }
939
+
940
+ .ele-effect .effect-wrap {
941
+ position: relative;
942
+ overflow: hidden;
943
+ width: 100%;
944
+ height: 100%
945
+ }
946
+
947
+ .ele-effect .e-small {
948
+ position: absolute;
949
+ width: 24px;
950
+ height: 24px;
951
+ background-image: url(http://cdn.h5ds.com/static/images/snow.png);
952
+ background-size: cover;
953
+ background-repeat: no-repeat;
954
+ -webkit-transform-origin: center;
955
+ transform-origin: center;
956
+ -webkit-animation: snow 5s linear infinite;
957
+ animation: snow 5s linear infinite
958
+ }
959
+
960
+ .ant-input-number {
961
+ box-sizing: border-box;
962
+ margin: 0;
963
+ padding: 0;
964
+ color: rgba(0, 0, 0, 0.88);
965
+ font-size: 14px;
966
+ line-height: 1.5714285714285714;
967
+ list-style: none;
968
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
969
+ position: relative;
970
+ display: inline-block;
971
+ width: 100%;
972
+ min-width: 0;
973
+ background-color: #ffffff;
974
+ background-image: none;
975
+ border-width: 1px;
976
+ border-style: solid;
977
+ border-color: #d9d9d9;
978
+ border-radius: 6px;
979
+ transition: all 0.2s;
980
+ border: 1px solid #d9d9d9;
981
+ }
982
+ .ant-form-item {
983
+ box-sizing: border-box;
984
+ margin: 0;
985
+ padding: 0;
986
+ color: rgba(0, 0, 0, 0.88);
1007
987
  font-size: 14px;
988
+ line-height: 1.5714285714285714;
989
+ list-style: none;
990
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
991
+ margin-bottom: 0px;
992
+ vertical-align: top;
993
+ }
994
+
995
+ .uni-lotties-component {
996
+ width: 100%;
997
+ height: 100%;
1008
998
  }
1009
999
 
1010
1000
  /* Iconfont definition */
@@ -1924,97 +1914,9 @@ i {
1924
1914
  100% { transform: rotate(360deg); }
1925
1915
  }
1926
1916
 
1927
-
1928
- .uni-svg-component {
1929
- display: inline-block;
1930
- }
1931
-
1932
- .ele-form {
1933
- position: absolute;
1934
- user-select: none;
1935
- }
1936
-
1937
- .f-multiple {
1938
- cursor: pointer;
1939
- }
1940
-
1941
- .ani-wrap {
1942
- position: relative;
1943
- }
1944
-
1945
- .fs-tit {
1946
- display: flex;
1947
- padding: 0 5px;
1948
- height: 40px;
1949
- align-items: center;
1950
- white-space: nowrap;
1951
- overflow: hidden;
1952
- text-overflow: ellipsis;
1953
- border-bottom: 1px solid rgba(153, 153, 153, 1);
1954
- }
1955
-
1956
- .require {
1957
- padding: 0 5px 0 0;
1958
- color: red;
1959
- vertical-align: middle;
1960
- }
1961
-
1962
- .f-multiple ul {
1963
- padding: 15px;
1964
- margin: 0;
1965
- list-style: none;
1966
- }
1967
-
1968
- .f-multiple ul li {
1969
- margin-top: 12px;
1970
- font-size: 0;
1971
- display: flex;
1972
- align-items: center;
1973
- cursor: pointer;
1974
- }
1975
-
1976
- .f-multiple ul li:first-child {
1977
- margin-top: 0;
1978
- }
1979
-
1980
- .fs-circle {
1981
- display: inline-block;
1982
- width: 16px;
1983
- height: 16px;
1984
- border-radius: 50%;
1985
- position: relative;
1986
- transition: all 0.2s;
1987
- }
1988
-
1989
- .fs-circle.selected {
1990
- background-color: #2687f1;
1991
- border-color: #2687f1 !important;
1992
- }
1993
-
1994
- .fs-circle.selected::after {
1995
- content: "";
1996
- position: absolute;
1997
- top: 3px;
1998
- left: 3px;
1999
- width: 8px;
2000
- height: 8px;
2001
- border-radius: 50%;
2002
- background-color: white;
2003
- }
2004
-
2005
- .fs-txt {
2006
- display: inline-block;
2007
- width: calc(100% - 16px);
2008
- padding-left: 8px;
2009
- vertical-align: top;
2010
- word-break: break-all;
2011
- font-size: 14px;
2012
- line-height: 1.2;
2013
- }
2014
-
2015
- .has-error .fs-tit {
2016
- border-bottom-color: #ff4d4f;
2017
- }
1917
+
1918
+ .uni-build-up-component {
1919
+ }
2018
1920
 
2019
1921
  body, html {
2020
1922
  width: 100%;
@@ -2369,13 +2271,20 @@ body, html {
2369
2271
  background-position: center;
2370
2272
  will-change: transform;
2371
2273
  }
2274
+
2275
+ /* 设计稿尺寸(如375px下20px的按钮) */
2276
+ .btn {
2277
+ width: 20px; /* 直接写设计稿px */
2278
+ height: 10px;
2279
+ font-size: 14px;
2280
+ }
2372
2281
 
2373
2282
  .ele-form {
2374
2283
  position: absolute;
2375
2284
  user-select: none;
2376
2285
  }
2377
2286
 
2378
- .f-single {
2287
+ .f-multiple {
2379
2288
  cursor: pointer;
2380
2289
  }
2381
2290
 
@@ -2400,20 +2309,21 @@ body, html {
2400
2309
  vertical-align: middle;
2401
2310
  }
2402
2311
 
2403
- .f-single ul {
2312
+ .f-multiple ul {
2404
2313
  padding: 15px;
2405
2314
  margin: 0;
2406
2315
  list-style: none;
2407
2316
  }
2408
2317
 
2409
- .f-single ul li {
2410
- display: flex;
2411
- align-items: center;
2318
+ .f-multiple ul li {
2412
2319
  margin-top: 12px;
2413
2320
  font-size: 0;
2321
+ display: flex;
2322
+ align-items: center;
2323
+ cursor: pointer;
2414
2324
  }
2415
2325
 
2416
- .f-single ul li:first-child {
2326
+ .f-multiple ul li:first-child {
2417
2327
  margin-top: 0;
2418
2328
  }
2419
2329
 
@@ -2431,104 +2341,66 @@ body, html {
2431
2341
  border-color: #2687f1 !important;
2432
2342
  }
2433
2343
 
2434
- .fs-circle.selected::after {
2435
- content: "";
2436
- position: absolute;
2437
- top: 3px;
2438
- left: 3px;
2439
- width: 8px;
2440
- height: 8px;
2441
- border-radius: 50%;
2442
- background-color: white;
2443
- }
2444
-
2445
- .fs-txt {
2446
- display: inline-block;
2447
- width: calc(100% - 16px);
2448
- padding-left: 8px;
2449
- vertical-align: top;
2450
- word-break: break-all;
2451
- font-size: 14px;
2452
- line-height: 1.2;
2453
- }
2454
-
2455
- .has-error .fs-tit {
2456
- border-bottom-color: #ff4d4f;
2457
- }
2458
-
2459
- /* 错误提示样式 */
2460
- .error-tip {
2461
- position: fixed;
2462
- left: 0;
2463
- top: 0;
2464
- width: 100%;
2465
- height: 100%;
2466
- z-index: 1000;
2467
- }
2468
-
2469
- .form-submit {
2470
- cursor: pointer;
2471
- transition: all 0.2s;
2472
- outline: none;
2473
- border: none;
2344
+ .fs-circle.selected::after {
2345
+ content: "";
2346
+ position: absolute;
2347
+ top: 3px;
2348
+ left: 3px;
2349
+ width: 8px;
2350
+ height: 8px;
2351
+ border-radius: 50%;
2352
+ background-color: white;
2474
2353
  }
2475
2354
 
2476
- .form-submit:hover {
2477
- opacity: 0.9;
2478
- transform: translateY(-1px);
2355
+ .fs-txt {
2356
+ display: inline-block;
2357
+ width: calc(100% - 16px);
2358
+ padding-left: 8px;
2359
+ vertical-align: top;
2360
+ word-break: break-all;
2361
+ font-size: 14px;
2362
+ line-height: 1.2;
2479
2363
  }
2480
2364
 
2481
- .form-submit:active {
2482
- opacity: 0.8;
2483
- transform: translateY(0);
2365
+ .has-error .fs-tit {
2366
+ border-bottom-color: #ff4d4f;
2484
2367
  }
2485
2368
 
2486
- .form-submit:disabled {
2487
- opacity: 0.6;
2488
- cursor: not-allowed;
2489
- transform: none !important;
2369
+ .form-input {
2370
+ position: absolute;
2490
2371
  }
2491
2372
 
2492
- /* 统一错误提示样式 */
2493
- .tip-cover {
2494
- position: fixed;
2495
- left: 0;
2496
- top: 0;
2497
- width: 100%;
2498
- height: 100%;
2373
+ .input-wrapper {
2499
2374
  display: flex;
2500
2375
  align-items: center;
2501
- justify-content: center;
2502
- z-index: 999;
2503
- background-color: rgba(0,0,0,.7);
2376
+ width: 100%;
2377
+ height: 100%;
2378
+ padding: 0 10px;
2379
+ box-sizing: border-box;
2380
+ position: relative;
2381
+ transition: border-color 0.3s;
2504
2382
  }
2505
2383
 
2506
- .tip {
2507
- width: 80%;
2508
- max-width: 250px;
2509
- padding: 10px;
2510
- border-radius: 5px;
2511
- background-color: #fff;
2384
+ .required-marker {
2385
+ font-size: 12px;
2386
+ padding: 0 5px 0 0;
2387
+ color: red;
2388
+ vertical-align: middle;
2512
2389
  }
2513
2390
 
2514
- .tip-btn {
2515
- display: block;
2516
- margin: 25px auto;
2517
- width: 120px;
2518
- height: 30px;
2519
- color: #fff;
2520
- border-radius: 4px;
2521
- text-align: center;
2522
- font-size: 14px;
2523
- line-height: 30px;
2524
- background: #ed5566;
2525
- cursor: pointer;
2391
+ input {
2392
+ flex: 1;
2393
+ border: none;
2394
+ outline: none;
2395
+ background: transparent;
2396
+ height: 100%;
2397
+ padding: 0;
2398
+ margin: 0;
2526
2399
  }
2527
2400
 
2528
- .tip-content {
2529
- font-size: 14px;
2530
- padding-top: 30px;
2531
- text-align: center;
2401
+ input::placeholder {
2402
+ color: #ccc;
2403
+ opacity: 1;
2532
2404
  }
2533
2405
 
2534
2406
  .ele-form {
@@ -2645,6 +2517,81 @@ body, html {
2645
2517
  height: 100%;
2646
2518
  z-index: 1000;
2647
2519
  }
2520
+
2521
+ .form-submit {
2522
+ cursor: pointer;
2523
+ transition: all 0.2s;
2524
+ outline: none;
2525
+ border: none;
2526
+ }
2527
+
2528
+ .form-submit:hover {
2529
+ opacity: 0.9;
2530
+ transform: translateY(-1px);
2531
+ }
2532
+
2533
+ .form-submit:active {
2534
+ opacity: 0.8;
2535
+ transform: translateY(0);
2536
+ }
2537
+
2538
+ .form-submit:disabled {
2539
+ opacity: 0.6;
2540
+ cursor: not-allowed;
2541
+ transform: none !important;
2542
+ }
2543
+
2544
+ /* 统一错误提示样式 */
2545
+ .tip-cover {
2546
+ position: fixed;
2547
+ left: 0;
2548
+ top: 0;
2549
+ width: 100%;
2550
+ height: 100%;
2551
+ display: flex;
2552
+ align-items: center;
2553
+ justify-content: center;
2554
+ z-index: 999;
2555
+ background-color: rgba(0,0,0,.7);
2556
+ }
2557
+
2558
+ .tip {
2559
+ width: 80%;
2560
+ max-width: 250px;
2561
+ padding: 10px;
2562
+ border-radius: 5px;
2563
+ background-color: #fff;
2564
+ }
2565
+
2566
+ .tip-btn {
2567
+ display: block;
2568
+ margin: 25px auto;
2569
+ width: 120px;
2570
+ height: 30px;
2571
+ color: #fff;
2572
+ border-radius: 4px;
2573
+ text-align: center;
2574
+ font-size: 14px;
2575
+ line-height: 30px;
2576
+ background: #ed5566;
2577
+ cursor: pointer;
2578
+ }
2579
+
2580
+ .tip-content {
2581
+ font-size: 14px;
2582
+ padding-top: 30px;
2583
+ text-align: center;
2584
+ }
2585
+
2586
+ .uni-svg-component {
2587
+ display: inline-block;
2588
+ }
2589
+
2590
+ .form-container {
2591
+ position: relative;
2592
+ width: 100%;
2593
+ height: 100%;
2594
+ }
2648
2595
 
2649
2596
  /* 字体定义 */
2650
2597
  @font-face {
@@ -3057,47 +3004,100 @@ body, html {
3057
3004
  }
3058
3005
 
3059
3006
 
3060
- .form-input {
3007
+ .ele-form {
3061
3008
  position: absolute;
3009
+ user-select: none;
3062
3010
  }
3063
3011
 
3064
- .input-wrapper {
3012
+ .f-single {
3013
+ cursor: pointer;
3014
+ }
3015
+
3016
+ .ani-wrap {
3017
+ position: relative;
3018
+ }
3019
+
3020
+ .fs-tit {
3065
3021
  display: flex;
3022
+ padding: 0 5px;
3023
+ height: 40px;
3066
3024
  align-items: center;
3067
- width: 100%;
3068
- height: 100%;
3069
- padding: 0 10px;
3070
- box-sizing: border-box;
3071
- position: relative;
3072
- transition: border-color 0.3s;
3025
+ white-space: nowrap;
3026
+ overflow: hidden;
3027
+ text-overflow: ellipsis;
3028
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
3073
3029
  }
3074
3030
 
3075
- .required-marker {
3076
- font-size: 12px;
3031
+ .require {
3077
3032
  padding: 0 5px 0 0;
3078
3033
  color: red;
3079
3034
  vertical-align: middle;
3080
3035
  }
3081
3036
 
3082
- input {
3083
- flex: 1;
3084
- border: none;
3085
- outline: none;
3086
- background: transparent;
3087
- height: 100%;
3088
- padding: 0;
3037
+ .f-single ul {
3038
+ padding: 15px;
3089
3039
  margin: 0;
3040
+ list-style: none;
3090
3041
  }
3091
3042
 
3092
- input::placeholder {
3093
- color: #ccc;
3094
- opacity: 1;
3043
+ .f-single ul li {
3044
+ display: flex;
3045
+ align-items: center;
3046
+ margin-top: 12px;
3047
+ font-size: 0;
3095
3048
  }
3096
3049
 
3097
- .form-container {
3050
+ .f-single ul li:first-child {
3051
+ margin-top: 0;
3052
+ }
3053
+
3054
+ .fs-circle {
3055
+ display: inline-block;
3056
+ width: 16px;
3057
+ height: 16px;
3058
+ border-radius: 50%;
3098
3059
  position: relative;
3060
+ transition: all 0.2s;
3061
+ }
3062
+
3063
+ .fs-circle.selected {
3064
+ background-color: #2687f1;
3065
+ border-color: #2687f1 !important;
3066
+ }
3067
+
3068
+ .fs-circle.selected::after {
3069
+ content: "";
3070
+ position: absolute;
3071
+ top: 3px;
3072
+ left: 3px;
3073
+ width: 8px;
3074
+ height: 8px;
3075
+ border-radius: 50%;
3076
+ background-color: white;
3077
+ }
3078
+
3079
+ .fs-txt {
3080
+ display: inline-block;
3081
+ width: calc(100% - 16px);
3082
+ padding-left: 8px;
3083
+ vertical-align: top;
3084
+ word-break: break-all;
3085
+ font-size: 14px;
3086
+ line-height: 1.2;
3087
+ }
3088
+
3089
+ .has-error .fs-tit {
3090
+ border-bottom-color: #ff4d4f;
3091
+ }
3092
+
3093
+ /* 错误提示样式 */
3094
+ .error-tip {
3095
+ position: fixed;
3096
+ left: 0;
3097
+ top: 0;
3099
3098
  width: 100%;
3100
3099
  height: 100%;
3100
+ z-index: 1000;
3101
3101
  }
3102
3102
 
3103
3103
  .page-indicator {