unika-components 1.0.410 → 1.0.411

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,280 +1,4 @@
1
1
 
2
- .ele-text {
3
- position: relative;
4
- }
5
-
6
- .ele-text .ani-wrap {
7
- width: 100%;
8
- height: 100%;
9
- }
10
-
11
- .text-common {
12
- padding: 5px;
13
- text-orientation: upright;
14
- white-space: pre-wrap;
15
- }
16
-
17
- /* 文本动画类 */
18
- .text-fadeIn {
19
- animation: fadeIn 1s ease-in-out;
20
- }
21
-
22
- .text-slideIn {
23
- animation: slideIn 1s ease-in-out;
24
- }
25
-
26
- .text-bounceIn {
27
- animation: bounceIn 1s ease-in-out;
28
- }
29
-
30
- /* 基础动画关键帧 */
31
- @keyframes fadeIn {
32
- from {
33
- opacity: 0;
34
- }
35
- to {
36
- opacity: 1;
37
- }
38
- }
39
-
40
- @keyframes slideIn {
41
- from {
42
- transform: translateY(20px);
43
- opacity: 0;
44
- }
45
- to {
46
- transform: translateY(0);
47
- opacity: 1;
48
- }
49
- }
50
-
51
- @keyframes bounceIn {
52
- 0% {
53
- transform: scale(0.3);
54
- opacity: 0;
55
- }
56
- 50% {
57
- transform: scale(1.05);
58
- opacity: 0.8;
59
- }
60
- 70% {
61
- transform: scale(0.9);
62
- opacity: 0.9;
63
- }
64
- 100% {
65
- transform: scale(1);
66
- opacity: 1;
67
- }
68
- }
69
-
70
- .element-video {
71
- position: absolute;
72
- overflow: hidden;
73
- background-color: #000;
74
- }
75
-
76
- .element-video .ani-wrap, .element-video img {
77
- display: block;
78
- width: 100%;
79
- height: 100%;
80
- }
81
-
82
- .video-container {
83
- width: 100%;
84
- height: 100%;
85
- }
86
-
87
- .video-container iframe {
88
- width: 100%;
89
- height: 100%;
90
- border: none;
91
- }
92
-
93
- .video-cover {
94
- position: relative;
95
- width: 100%;
96
- height: 100%;
97
- background-size: cover;
98
- background-position: center;
99
- cursor: pointer;
100
- }
101
-
102
- .video-cover .play-btn {
103
- position: absolute;
104
- left: 50%;
105
- top: 50%;
106
- transform: translate(-50%, -50%);
107
- width: 50px;
108
- height: 50px;
109
- opacity: 0.8;
110
- transition: opacity 0.2s;
111
- }
112
-
113
- .video-cover:hover .play-btn {
114
- opacity: 1;
115
- }
116
-
117
- #audio {
118
- position: absolute;
119
- right: 10px;
120
- top: 10px;
121
- z-index: 103;
122
- width: 30px;
123
- height: 30px;
124
- display: flex;
125
- align-items: center;
126
- }
127
-
128
- #audio .mrotate {
129
- animation: mrotate 5s linear infinite;
130
- }
131
-
132
- @keyframes mrotate {
133
- to {
134
- transform: rotate(1turn);
135
- }
136
- }
137
-
138
- #audio .audio {
139
- width: 100%;
140
- height: 100%;
141
- display: flex;
142
- align-items: center;
143
- justify-content: center;
144
- color: #fff;
145
- background: #666;
146
- border-radius: 50%;
147
- overflow: hidden;
148
- cursor: pointer;
149
- transition: all 0.3s ease;
150
- }
151
-
152
- #audio .audio.a-border {
153
- border: 1px solid #fff;
154
- }
155
-
156
- #audio .audio .music-icon {
157
- display: block;
158
- width: 60%;
159
- height: 60%;
160
- object-fit: contain;
161
- }
162
-
163
- #audio .audio .iconfont {
164
- font-size: 2opx;
165
- line-height: 1;
166
- }
167
- #audio .icon-cancel {
168
- position: absolute;
169
- width: 100%;
170
- height: 100%;
171
- border-radius: 50%;
172
- overflow: hidden;
173
- padding: 15px 0;
174
- }
175
- #audio .icon-cancel .icon-h {
176
- transform: rotate(45deg);
177
- width: 100%;
178
- height: 2px;
179
- background: #fff;
180
- }
181
- #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
182
- content: '';
183
- position: absolute;
184
- width: 100%;
185
- height: 2px;
186
- background: #fff;
187
- }
188
-
189
- .ele-shape {
190
- position: absolute;
191
- overflow: hidden;
192
- }
193
-
194
- .ani-wrap {
195
- width: 100%;
196
- height: 100%;
197
- box-sizing: border-box;
198
- }
199
-
200
- .e-shape {
201
- width: 100%;
202
- height: 100%;
203
- }
204
-
205
- .svg-container :deep(svg) {
206
- width: 100%;
207
- height: 100%;
208
- display: block;
209
- }
210
-
211
- .svg-loading,
212
- .svg-error {
213
- display: flex;
214
- align-items: center;
215
- justify-content: center;
216
- width: 100%;
217
- height: 100%;
218
- background: rgba(0,0,0,0.05);
219
- }
220
-
221
- .effect-container {
222
- will-change: transform;
223
- }
224
-
225
- .particles-wrapper {
226
- position: relative;
227
- width: 100%;
228
- height: 100%;
229
- }
230
-
231
- .particle {
232
- position: absolute;
233
- background-repeat: no-repeat;
234
- background-size: contain;
235
- animation-name: falling;
236
- animation-timing-function: linear;
237
- animation-iteration-count: infinite;
238
- will-change: transform;
239
- }
240
-
241
- @keyframes falling {
242
- 0% {
243
- transform: translateY(0) rotate(0deg);
244
- opacity: 1;
245
- }
246
- 80% {
247
- opacity: 0.8;
248
- }
249
- 100% {
250
- transform: translateY(100vh) rotate(360deg);
251
- opacity: 0;
252
- }
253
- }
254
- .ele-lottie .ele-lotwrap {
255
- overflow: hidden
256
- }
257
-
258
- .ele-effect .effect-wrap {
259
- position: relative;
260
- overflow: hidden;
261
- width: 100%;
262
- height: 100%
263
- }
264
-
265
- .ele-effect .e-small {
266
- position: absolute;
267
- width: 24px;
268
- height: 24px;
269
- background-image: url(http://cdn.h5ds.com/static/images/snow.png);
270
- background-size: cover;
271
- background-repeat: no-repeat;
272
- -webkit-transform-origin: center;
273
- transform-origin: center;
274
- -webkit-animation: snow 5s linear infinite;
275
- animation: snow 5s linear infinite
276
- }
277
-
278
2
  .ele-img {
279
3
  position: absolute;
280
4
  overflow: hidden;
@@ -326,28 +50,6 @@
326
50
  }
327
51
  }
328
52
 
329
- .like-button {
330
- display: flex;
331
- flex-direction: column;
332
- align-items: center;
333
- cursor: pointer;
334
- }
335
-
336
- .icon-heart {
337
- font-size: 24px;
338
- color: #e74c3c;
339
- }
340
-
341
- .liked {
342
- color: #f00; /* 更改颜色以示已赞 */
343
- }
344
-
345
- .like-count {
346
- margin-top: 4px;
347
- font-size: 16px;
348
- color: #333;
349
- }
350
-
351
53
  .count-down .drag-point {
352
54
  cursor: default!important
353
55
  }
@@ -511,12 +213,202 @@
511
213
  white-space: nowrap
512
214
  }
513
215
 
514
-
515
- /* 设计稿尺寸(如375px下20px的按钮) */
516
- .btn {
517
- width: 20px; /* 直接写设计稿px */
518
- height: 10px;
519
- font-size: 14px;
216
+
217
+ .ele-text {
218
+ position: relative;
219
+ }
220
+
221
+ .ele-text .ani-wrap {
222
+ width: 100%;
223
+ height: 100%;
224
+ }
225
+
226
+ .text-common {
227
+ padding: 5px;
228
+ text-orientation: upright;
229
+ white-space: pre-wrap;
230
+ }
231
+
232
+ /* 文本动画类 */
233
+ .text-fadeIn {
234
+ animation: fadeIn 1s ease-in-out;
235
+ }
236
+
237
+ .text-slideIn {
238
+ animation: slideIn 1s ease-in-out;
239
+ }
240
+
241
+ .text-bounceIn {
242
+ animation: bounceIn 1s ease-in-out;
243
+ }
244
+
245
+ /* 基础动画关键帧 */
246
+ @keyframes fadeIn {
247
+ from {
248
+ opacity: 0;
249
+ }
250
+ to {
251
+ opacity: 1;
252
+ }
253
+ }
254
+
255
+ @keyframes slideIn {
256
+ from {
257
+ transform: translateY(20px);
258
+ opacity: 0;
259
+ }
260
+ to {
261
+ transform: translateY(0);
262
+ opacity: 1;
263
+ }
264
+ }
265
+
266
+ @keyframes bounceIn {
267
+ 0% {
268
+ transform: scale(0.3);
269
+ opacity: 0;
270
+ }
271
+ 50% {
272
+ transform: scale(1.05);
273
+ opacity: 0.8;
274
+ }
275
+ 70% {
276
+ transform: scale(0.9);
277
+ opacity: 0.9;
278
+ }
279
+ 100% {
280
+ transform: scale(1);
281
+ opacity: 1;
282
+ }
283
+ }
284
+
285
+ #audio {
286
+ position: absolute;
287
+ right: 10px;
288
+ top: 10px;
289
+ z-index: 103;
290
+ width: 30px;
291
+ height: 30px;
292
+ display: flex;
293
+ align-items: center;
294
+ }
295
+
296
+ #audio .mrotate {
297
+ animation: mrotate 5s linear infinite;
298
+ }
299
+
300
+ @keyframes mrotate {
301
+ to {
302
+ transform: rotate(1turn);
303
+ }
304
+ }
305
+
306
+ #audio .audio {
307
+ width: 100%;
308
+ height: 100%;
309
+ display: flex;
310
+ align-items: center;
311
+ justify-content: center;
312
+ color: #fff;
313
+ background: #666;
314
+ border-radius: 50%;
315
+ overflow: hidden;
316
+ cursor: pointer;
317
+ transition: all 0.3s ease;
318
+ }
319
+
320
+ #audio .audio.a-border {
321
+ border: 1px solid #fff;
322
+ }
323
+
324
+ #audio .audio .music-icon {
325
+ display: block;
326
+ width: 60%;
327
+ height: 60%;
328
+ object-fit: contain;
329
+ }
330
+
331
+ #audio .audio .iconfont {
332
+ font-size: 2opx;
333
+ line-height: 1;
334
+ }
335
+ #audio .icon-cancel {
336
+ position: absolute;
337
+ width: 100%;
338
+ height: 100%;
339
+ border-radius: 50%;
340
+ overflow: hidden;
341
+ padding: 15px 0;
342
+ }
343
+ #audio .icon-cancel .icon-h {
344
+ transform: rotate(45deg);
345
+ width: 100%;
346
+ height: 2px;
347
+ background: #fff;
348
+ }
349
+ #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
350
+ content: '';
351
+ position: absolute;
352
+ width: 100%;
353
+ height: 2px;
354
+ background: #fff;
355
+ }
356
+
357
+ .effect-container {
358
+ will-change: transform;
359
+ }
360
+
361
+ .particles-wrapper {
362
+ position: relative;
363
+ width: 100%;
364
+ height: 100%;
365
+ }
366
+
367
+ .particle {
368
+ position: absolute;
369
+ background-repeat: no-repeat;
370
+ background-size: contain;
371
+ animation-name: falling;
372
+ animation-timing-function: linear;
373
+ animation-iteration-count: infinite;
374
+ will-change: transform;
375
+ }
376
+
377
+ @keyframes falling {
378
+ 0% {
379
+ transform: translateY(0) rotate(0deg);
380
+ opacity: 1;
381
+ }
382
+ 80% {
383
+ opacity: 0.8;
384
+ }
385
+ 100% {
386
+ transform: translateY(100vh) rotate(360deg);
387
+ opacity: 0;
388
+ }
389
+ }
390
+ .ele-lottie .ele-lotwrap {
391
+ overflow: hidden
392
+ }
393
+
394
+ .ele-effect .effect-wrap {
395
+ position: relative;
396
+ overflow: hidden;
397
+ width: 100%;
398
+ height: 100%
399
+ }
400
+
401
+ .ele-effect .e-small {
402
+ position: absolute;
403
+ width: 24px;
404
+ height: 24px;
405
+ background-image: url(http://cdn.h5ds.com/static/images/snow.png);
406
+ background-size: cover;
407
+ background-repeat: no-repeat;
408
+ -webkit-transform-origin: center;
409
+ transform-origin: center;
410
+ -webkit-animation: snow 5s linear infinite;
411
+ animation: snow 5s linear infinite
520
412
  }
521
413
 
522
414
  .element-ditu .ani-wrap {
@@ -565,6 +457,28 @@
565
457
  height: 100%;
566
458
  }
567
459
 
460
+ .like-button {
461
+ display: flex;
462
+ flex-direction: column;
463
+ align-items: center;
464
+ cursor: pointer;
465
+ }
466
+
467
+ .icon-heart {
468
+ font-size: 24px;
469
+ color: #e74c3c;
470
+ }
471
+
472
+ .liked {
473
+ color: #f00; /* 更改颜色以示已赞 */
474
+ }
475
+
476
+ .like-count {
477
+ margin-top: 4px;
478
+ font-size: 16px;
479
+ color: #333;
480
+ }
481
+
568
482
  .ele-lottie .ele-lotwrap {
569
483
  overflow: hidden;
570
484
  }
@@ -598,108 +512,361 @@
598
512
  }
599
513
  }
600
514
 
601
- .form-submit {
515
+ .ele-shape {
516
+ position: absolute;
517
+ overflow: hidden;
518
+ }
519
+
520
+ .ani-wrap {
521
+ width: 100%;
522
+ height: 100%;
523
+ box-sizing: border-box;
524
+ }
525
+
526
+ .e-shape {
527
+ width: 100%;
528
+ height: 100%;
529
+ }
530
+
531
+ .svg-container :deep(svg) {
532
+ width: 100%;
533
+ height: 100%;
534
+ display: block;
535
+ }
536
+
537
+ .svg-loading,
538
+ .svg-error {
539
+ display: flex;
540
+ align-items: center;
541
+ justify-content: center;
542
+ width: 100%;
543
+ height: 100%;
544
+ background: rgba(0,0,0,0.05);
545
+ }
546
+
547
+ .element-video {
548
+ position: absolute;
549
+ overflow: hidden;
550
+ background-color: #000;
551
+ }
552
+
553
+ .element-video .ani-wrap, .element-video img {
554
+ display: block;
555
+ width: 100%;
556
+ height: 100%;
557
+ }
558
+
559
+ .video-container {
560
+ width: 100%;
561
+ height: 100%;
562
+ }
563
+
564
+ .video-container iframe {
565
+ width: 100%;
566
+ height: 100%;
567
+ border: none;
568
+ }
569
+
570
+ .video-cover {
571
+ position: relative;
572
+ width: 100%;
573
+ height: 100%;
574
+ background-size: cover;
575
+ background-position: center;
576
+ cursor: pointer;
577
+ }
578
+
579
+ .video-cover .play-btn {
580
+ position: absolute;
581
+ left: 50%;
582
+ top: 50%;
583
+ transform: translate(-50%, -50%);
584
+ width: 50px;
585
+ height: 50px;
586
+ opacity: 0.8;
587
+ transition: opacity 0.2s;
588
+ }
589
+
590
+ .video-cover:hover .play-btn {
591
+ opacity: 1;
592
+ }
593
+
594
+ .ant-input-number {
595
+ box-sizing: border-box;
596
+ margin: 0;
597
+ padding: 0;
598
+ color: rgba(0, 0, 0, 0.88);
599
+ font-size: 14px;
600
+ line-height: 1.5714285714285714;
601
+ list-style: none;
602
+ 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';
603
+ position: relative;
604
+ display: inline-block;
605
+ width: 100%;
606
+ min-width: 0;
607
+ background-color: #ffffff;
608
+ background-image: none;
609
+ border-width: 1px;
610
+ border-style: solid;
611
+ border-color: #d9d9d9;
612
+ border-radius: 6px;
613
+ transition: all 0.2s;
614
+ border: 1px solid #d9d9d9;
615
+ }
616
+ .ant-form-item {
617
+ box-sizing: border-box;
618
+ margin: 0;
619
+ padding: 0;
620
+ color: rgba(0, 0, 0, 0.88);
621
+ font-size: 14px;
622
+ line-height: 1.5714285714285714;
623
+ list-style: none;
624
+ 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';
625
+ margin-bottom: 0px;
626
+ vertical-align: top;
627
+ }
628
+
629
+ .uni-svg-component {
630
+ display: inline-block;
631
+ }
632
+
633
+ /* 设计稿尺寸(如375px下20px的按钮) */
634
+ .btn {
635
+ width: 20px; /* 直接写设计稿px */
636
+ height: 10px;
637
+ font-size: 14px;
638
+ }
639
+
640
+ .form-submit {
641
+ cursor: pointer;
642
+ transition: all 0.2s;
643
+ outline: none;
644
+ border: none;
645
+ }
646
+
647
+ .form-submit:hover {
648
+ opacity: 0.9;
649
+ transform: translateY(-1px);
650
+ }
651
+
652
+ .form-submit:active {
653
+ opacity: 0.8;
654
+ transform: translateY(0);
655
+ }
656
+
657
+ .form-submit:disabled {
658
+ opacity: 0.6;
659
+ cursor: not-allowed;
660
+ transform: none !important;
661
+ }
662
+
663
+ /* 统一错误提示样式 */
664
+ .tip-cover {
665
+ position: fixed;
666
+ left: 0;
667
+ top: 0;
668
+ width: 100%;
669
+ height: 100%;
670
+ display: flex;
671
+ align-items: center;
672
+ justify-content: center;
673
+ z-index: 999;
674
+ background-color: rgba(0,0,0,.7);
675
+ }
676
+
677
+ .tip {
678
+ width: 80%;
679
+ max-width: 250px;
680
+ padding: 10px;
681
+ border-radius: 5px;
682
+ background-color: #fff;
683
+ }
684
+
685
+ .tip-btn {
686
+ display: block;
687
+ margin: 25px auto;
688
+ width: 120px;
689
+ height: 30px;
690
+ color: #fff;
691
+ border-radius: 4px;
692
+ text-align: center;
693
+ font-size: 14px;
694
+ line-height: 30px;
695
+ background: #ed5566;
696
+ cursor: pointer;
697
+ }
698
+
699
+ .tip-content {
700
+ font-size: 14px;
701
+ padding-top: 30px;
702
+ text-align: center;
703
+ }
704
+
705
+ .ele-form {
706
+ position: absolute;
707
+ user-select: none;
708
+ }
709
+
710
+ .f-select {
711
+ cursor: pointer;
712
+ }
713
+
714
+ .ani-wrap {
715
+ position: relative;
716
+ }
717
+
718
+ .fs-tit {
719
+ position: relative;
720
+ display: flex;
721
+ padding: 0 5px;
722
+ height: 35px;
723
+ line-height: 35px;
724
+ align-items: center;
725
+ }
726
+
727
+ .require {
728
+ padding: 0 5px 0 0;
729
+ color: red;
730
+ vertical-align: middle;
731
+ }
732
+
733
+ .fs-cont {
734
+ padding-right: 15px;
735
+ white-space: nowrap;
736
+ overflow: hidden;
737
+ text-overflow: ellipsis;
738
+ flex-grow: 1;
739
+ }
740
+
741
+ .icon-bofang1 {
742
+ font-size: 12px;
743
+ transition: transform 0.2s ease;
744
+ }
745
+
746
+ .rotate-180 {
747
+ transform: rotate(180deg) !important;
748
+ }
749
+
750
+ .f-real {
751
+ position: absolute;
752
+ left: 0;
753
+ top: 0;
754
+ width: 100%;
755
+ height: 100%;
756
+ z-index: 1;
757
+ opacity: 0;
602
758
  cursor: pointer;
603
- transition: all 0.2s;
604
- outline: none;
605
- border: none;
606
759
  }
607
760
 
608
- .form-submit:hover {
609
- opacity: 0.9;
610
- transform: translateY(-1px);
761
+ .dropdown-menu {
762
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
611
763
  }
612
764
 
613
- .form-submit:active {
614
- opacity: 0.8;
615
- transform: translateY(0);
765
+ .dropdown-item {
766
+ padding: 8px 10px;
767
+ cursor: pointer;
768
+ transition: background-color 0.2s;
616
769
  }
617
770
 
618
- .form-submit:disabled {
619
- opacity: 0.6;
620
- cursor: not-allowed;
621
- transform: none !important;
771
+ .dropdown-item:hover {
772
+ background-color: #f5f5f5;
622
773
  }
623
774
 
624
- /* 统一错误提示样式 */
625
- .tip-cover {
775
+ .dropdown-item.selected {
776
+ background-color: #e6f7ff;
777
+ color: #1890ff;
778
+ }
779
+
780
+ .f-select .fs-tit .icon-bofang1 {
781
+ position: absolute;
782
+ right: 10px;
783
+ font-size: 12px;
784
+ display: inline-block;
785
+ transform: rotate(90deg);
786
+ }
787
+
788
+ @font-face {
789
+ font-family: iconfont;
790
+ src: url(https://h5static.hunbei.com/preview/static/fonts/iconfont.f1262e4.woff2) format("woff2"),
791
+ url(https://h5static.hunbei.com/preview/static/fonts/iconfont.788d827.woff) format("woff"),
792
+ url(https://h5static.hunbei.com/preview/static/fonts/iconfont.9541e59.ttf) format("truetype");
793
+ }
794
+
795
+ .iconfont {
796
+ font-family: iconfont !important;
797
+ font-size: 14px;
798
+ font-style: normal;
799
+ -webkit-font-smoothing: antialiased;
800
+ -moz-osx-font-smoothing: grayscale;
801
+ }
802
+
803
+ .icon-bofang1:before {
804
+ content: "\E6CF";
805
+ }
806
+
807
+ .has-error {
808
+ border-color: #ff4d4f !important;
809
+ }
810
+
811
+ .error-tip {
626
812
  position: fixed;
627
813
  left: 0;
628
814
  top: 0;
629
815
  width: 100%;
630
816
  height: 100%;
817
+ z-index: 1000;
818
+ }
819
+
820
+ .form-input {
821
+ position: absolute;
822
+ }
823
+
824
+ .input-wrapper {
631
825
  display: flex;
632
826
  align-items: center;
633
- justify-content: center;
634
- z-index: 999;
635
- background-color: rgba(0,0,0,.7);
827
+ width: 100%;
828
+ height: 100%;
829
+ padding: 0 10px;
830
+ box-sizing: border-box;
831
+ position: relative;
832
+ transition: border-color 0.3s;
636
833
  }
637
834
 
638
- .tip {
639
- width: 80%;
640
- max-width: 250px;
641
- padding: 10px;
642
- border-radius: 5px;
643
- background-color: #fff;
835
+ .required-marker {
836
+ font-size: 12px;
837
+ padding: 0 5px 0 0;
838
+ color: red;
839
+ vertical-align: middle;
644
840
  }
645
841
 
646
- .tip-btn {
647
- display: block;
648
- margin: 25px auto;
649
- width: 120px;
650
- height: 30px;
651
- color: #fff;
652
- border-radius: 4px;
653
- text-align: center;
654
- font-size: 14px;
655
- line-height: 30px;
656
- background: #ed5566;
657
- cursor: pointer;
842
+ input {
843
+ flex: 1;
844
+ border: none;
845
+ outline: none;
846
+ background: transparent;
847
+ height: 100%;
848
+ padding: 0;
849
+ margin: 0;
658
850
  }
851
+ /*
852
+ input::placeholder {
853
+ color: #ccc;
854
+ opacity: 1;
855
+ } */
659
856
 
660
- .tip-content {
661
- font-size: 14px;
662
- padding-top: 30px;
663
- text-align: center;
857
+ .dynamic-placeholder-input::placeholder {
858
+ color: var(--placeholder-color, #999);
859
+ opacity: 1;
664
860
  }
665
-
666
- .ant-input-number {
667
- box-sizing: border-box;
668
- margin: 0;
669
- padding: 0;
670
- color: rgba(0, 0, 0, 0.88);
671
- font-size: 14px;
672
- line-height: 1.5714285714285714;
673
- list-style: none;
674
- 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';
675
- position: relative;
676
- display: inline-block;
677
- width: 100%;
678
- min-width: 0;
679
- background-color: #ffffff;
680
- background-image: none;
681
- border-width: 1px;
682
- border-style: solid;
683
- border-color: #d9d9d9;
684
- border-radius: 6px;
685
- transition: all 0.2s;
686
- border: 1px solid #d9d9d9;
687
- }
688
- .ant-form-item {
689
- box-sizing: border-box;
690
- margin: 0;
691
- padding: 0;
692
- color: rgba(0, 0, 0, 0.88);
693
- font-size: 14px;
694
- line-height: 1.5714285714285714;
695
- list-style: none;
696
- 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';
697
- margin-bottom: 0px;
698
- vertical-align: top;
699
- }
700
-
701
- .uni-svg-component {
702
- display: inline-block;
861
+ .dynamic-placeholder-input::-webkit-input-placeholder {
862
+ color: var(--placeholder-color, #999);
863
+ }
864
+ .dynamic-placeholder-input::-moz-placeholder {
865
+ color: var(--placeholder-color, #999);
866
+ opacity: 1;
867
+ }
868
+ .dynamic-placeholder-input:-ms-input-placeholder {
869
+ color: var(--placeholder-color, #999);
703
870
  }
704
871
 
705
872
  /* Iconfont definition */
@@ -1598,91 +1765,13 @@ i {
1598
1765
  border-radius: 50%;
1599
1766
  animation: spin 1s linear infinite;
1600
1767
  }
1601
-
1602
- @keyframes spin {
1603
- 0% { transform: rotate(0deg); }
1604
- 100% { transform: rotate(360deg); }
1605
- }
1606
-
1607
-
1608
- .form-input {
1609
- position: absolute;
1610
- }
1611
-
1612
- .input-wrapper {
1613
- display: flex;
1614
- align-items: center;
1615
- width: 100%;
1616
- height: 100%;
1617
- padding: 0 10px;
1618
- box-sizing: border-box;
1619
- position: relative;
1620
- transition: border-color 0.3s;
1621
- }
1622
-
1623
- .required-marker {
1624
- font-size: 12px;
1625
- padding: 0 5px 0 0;
1626
- color: red;
1627
- vertical-align: middle;
1628
- }
1629
-
1630
- input {
1631
- flex: 1;
1632
- border: none;
1633
- outline: none;
1634
- background: transparent;
1635
- height: 100%;
1636
- padding: 0;
1637
- margin: 0;
1638
- }
1639
- /*
1640
- input::placeholder {
1641
- color: #ccc;
1642
- opacity: 1;
1643
- } */
1644
-
1645
- .dynamic-placeholder-input::placeholder {
1646
- color: var(--placeholder-color, #999);
1647
- opacity: 1;
1648
- }
1649
- .dynamic-placeholder-input::-webkit-input-placeholder {
1650
- color: var(--placeholder-color, #999);
1651
- }
1652
- .dynamic-placeholder-input::-moz-placeholder {
1653
- color: var(--placeholder-color, #999);
1654
- opacity: 1;
1655
- }
1656
- .dynamic-placeholder-input:-ms-input-placeholder {
1657
- color: var(--placeholder-color, #999);
1658
- }
1768
+
1769
+ @keyframes spin {
1770
+ 0% { transform: rotate(0deg); }
1771
+ 100% { transform: rotate(360deg); }
1772
+ }
1773
+
1659
1774
 
1660
- .global.video {
1661
- width: 35px;
1662
- height: 55px;
1663
- border-radius: 50%;
1664
- text-align: center;
1665
- margin-bottom: 5px;
1666
- border: 2px solid #fff;
1667
- cursor: pointer;
1668
- }
1669
- .icon-shipin2:before { content: "\E611"; }
1670
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
1671
- .global.video > span { font-size: 12px; line-height: 20px; display: block; position: relative; top: -4px;}
1672
-
1673
- .global.tel {
1674
- width: 35px;
1675
- height: 55px;
1676
- border-radius: 50%;
1677
- text-align: center;
1678
- margin-bottom: 15px;
1679
- border: 2px solid #fff;
1680
- cursor: pointer;
1681
- }
1682
- .icon-dianhua:before { content: "\E60E"; }
1683
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
1684
- .global.tel > span { font-size: 12px; line-height: 20px; display: block;}
1685
-
1686
1775
  .ele-form {
1687
1776
  position: absolute;
1688
1777
  user-select: none;
@@ -1769,217 +1858,6 @@ input::placeholder {
1769
1858
  .has-error .fs-tit {
1770
1859
  border-bottom-color: #ff4d4f;
1771
1860
  }
1772
-
1773
- .ele-form {
1774
- position: absolute;
1775
- user-select: none;
1776
- }
1777
-
1778
- .f-select {
1779
- cursor: pointer;
1780
- }
1781
-
1782
- .ani-wrap {
1783
- position: relative;
1784
- }
1785
-
1786
- .fs-tit {
1787
- position: relative;
1788
- display: flex;
1789
- padding: 0 5px;
1790
- height: 35px;
1791
- line-height: 35px;
1792
- align-items: center;
1793
- }
1794
-
1795
- .require {
1796
- padding: 0 5px 0 0;
1797
- color: red;
1798
- vertical-align: middle;
1799
- }
1800
-
1801
- .fs-cont {
1802
- padding-right: 15px;
1803
- white-space: nowrap;
1804
- overflow: hidden;
1805
- text-overflow: ellipsis;
1806
- flex-grow: 1;
1807
- }
1808
-
1809
- .icon-bofang1 {
1810
- font-size: 12px;
1811
- transition: transform 0.2s ease;
1812
- }
1813
-
1814
- .rotate-180 {
1815
- transform: rotate(180deg) !important;
1816
- }
1817
-
1818
- .f-real {
1819
- position: absolute;
1820
- left: 0;
1821
- top: 0;
1822
- width: 100%;
1823
- height: 100%;
1824
- z-index: 1;
1825
- opacity: 0;
1826
- cursor: pointer;
1827
- }
1828
-
1829
- .dropdown-menu {
1830
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
1831
- }
1832
-
1833
- .dropdown-item {
1834
- padding: 8px 10px;
1835
- cursor: pointer;
1836
- transition: background-color 0.2s;
1837
- }
1838
-
1839
- .dropdown-item:hover {
1840
- background-color: #f5f5f5;
1841
- }
1842
-
1843
- .dropdown-item.selected {
1844
- background-color: #e6f7ff;
1845
- color: #1890ff;
1846
- }
1847
-
1848
- .f-select .fs-tit .icon-bofang1 {
1849
- position: absolute;
1850
- right: 10px;
1851
- font-size: 12px;
1852
- display: inline-block;
1853
- transform: rotate(90deg);
1854
- }
1855
-
1856
- @font-face {
1857
- font-family: iconfont;
1858
- src: url(https://h5static.hunbei.com/preview/static/fonts/iconfont.f1262e4.woff2) format("woff2"),
1859
- url(https://h5static.hunbei.com/preview/static/fonts/iconfont.788d827.woff) format("woff"),
1860
- url(https://h5static.hunbei.com/preview/static/fonts/iconfont.9541e59.ttf) format("truetype");
1861
- }
1862
-
1863
- .iconfont {
1864
- font-family: iconfont !important;
1865
- font-size: 14px;
1866
- font-style: normal;
1867
- -webkit-font-smoothing: antialiased;
1868
- -moz-osx-font-smoothing: grayscale;
1869
- }
1870
-
1871
- .icon-bofang1:before {
1872
- content: "\E6CF";
1873
- }
1874
-
1875
- .has-error {
1876
- border-color: #ff4d4f !important;
1877
- }
1878
-
1879
- .error-tip {
1880
- position: fixed;
1881
- left: 0;
1882
- top: 0;
1883
- width: 100%;
1884
- height: 100%;
1885
- z-index: 1000;
1886
- }
1887
-
1888
- .ele-form {
1889
- position: absolute;
1890
- user-select: none;
1891
- }
1892
-
1893
- .f-single {
1894
- cursor: pointer;
1895
- }
1896
-
1897
- .ani-wrap {
1898
- position: relative;
1899
- }
1900
-
1901
- .fs-tit {
1902
- display: flex;
1903
- padding: 0 5px;
1904
- height: 40px;
1905
- align-items: center;
1906
- white-space: nowrap;
1907
- overflow: hidden;
1908
- text-overflow: ellipsis;
1909
- border-bottom: 1px solid rgba(153, 153, 153, 1);
1910
- }
1911
-
1912
- .require {
1913
- padding: 0 5px 0 0;
1914
- color: red;
1915
- vertical-align: middle;
1916
- }
1917
-
1918
- .f-single ul {
1919
- padding: 15px;
1920
- margin: 0;
1921
- list-style: none;
1922
- }
1923
-
1924
- .f-single ul li {
1925
- display: flex;
1926
- align-items: center;
1927
- margin-top: 12px;
1928
- font-size: 0;
1929
- }
1930
-
1931
- .f-single ul li:first-child {
1932
- margin-top: 0;
1933
- }
1934
-
1935
- .fs-circle {
1936
- display: inline-block;
1937
- width: 16px;
1938
- height: 16px;
1939
- border-radius: 50%;
1940
- position: relative;
1941
- transition: all 0.2s;
1942
- }
1943
-
1944
- .fs-circle.selected {
1945
- background-color: #2687f1;
1946
- border-color: #2687f1 !important;
1947
- }
1948
-
1949
- .fs-circle.selected::after {
1950
- content: "";
1951
- position: absolute;
1952
- top: 3px;
1953
- left: 3px;
1954
- width: 8px;
1955
- height: 8px;
1956
- border-radius: 50%;
1957
- background-color: white;
1958
- }
1959
-
1960
- .fs-txt {
1961
- display: inline-block;
1962
- width: calc(100% - 16px);
1963
- padding-left: 8px;
1964
- vertical-align: top;
1965
- word-break: break-all;
1966
- font-size: 14px;
1967
- line-height: 1.2;
1968
- }
1969
-
1970
- .has-error .fs-tit {
1971
- border-bottom-color: #ff4d4f;
1972
- }
1973
-
1974
- /* 错误提示样式 */
1975
- .error-tip {
1976
- position: fixed;
1977
- left: 0;
1978
- top: 0;
1979
- width: 100%;
1980
- height: 100%;
1981
- z-index: 1000;
1982
- }
1983
1861
 
1984
1862
  /* 字体定义 */
1985
1863
  @font-face {
@@ -2392,7 +2270,135 @@ input::placeholder {
2392
2270
  color: #F44336; /* 失败的红色 */
2393
2271
  }
2394
2272
 
2395
-
2273
+
2274
+ .global.tel {
2275
+ width: 35px;
2276
+ height: 55px;
2277
+ border-radius: 50%;
2278
+ text-align: center;
2279
+ margin-bottom: 15px;
2280
+ border: 2px solid #fff;
2281
+ cursor: pointer;
2282
+ }
2283
+ .icon-dianhua:before { content: "\E60E"; }
2284
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
2285
+ .global.tel > span { font-size: 12px; line-height: 20px; display: block;}
2286
+
2287
+ .ele-form {
2288
+ position: absolute;
2289
+ user-select: none;
2290
+ }
2291
+
2292
+ .f-single {
2293
+ cursor: pointer;
2294
+ }
2295
+
2296
+ .ani-wrap {
2297
+ position: relative;
2298
+ }
2299
+
2300
+ .fs-tit {
2301
+ display: flex;
2302
+ padding: 0 5px;
2303
+ height: 40px;
2304
+ align-items: center;
2305
+ white-space: nowrap;
2306
+ overflow: hidden;
2307
+ text-overflow: ellipsis;
2308
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
2309
+ }
2310
+
2311
+ .require {
2312
+ padding: 0 5px 0 0;
2313
+ color: red;
2314
+ vertical-align: middle;
2315
+ }
2316
+
2317
+ .f-single ul {
2318
+ padding: 15px;
2319
+ margin: 0;
2320
+ list-style: none;
2321
+ }
2322
+
2323
+ .f-single ul li {
2324
+ display: flex;
2325
+ align-items: center;
2326
+ margin-top: 12px;
2327
+ font-size: 0;
2328
+ }
2329
+
2330
+ .f-single ul li:first-child {
2331
+ margin-top: 0;
2332
+ }
2333
+
2334
+ .fs-circle {
2335
+ display: inline-block;
2336
+ width: 16px;
2337
+ height: 16px;
2338
+ border-radius: 50%;
2339
+ position: relative;
2340
+ transition: all 0.2s;
2341
+ }
2342
+
2343
+ .fs-circle.selected {
2344
+ background-color: #2687f1;
2345
+ border-color: #2687f1 !important;
2346
+ }
2347
+
2348
+ .fs-circle.selected::after {
2349
+ content: "";
2350
+ position: absolute;
2351
+ top: 3px;
2352
+ left: 3px;
2353
+ width: 8px;
2354
+ height: 8px;
2355
+ border-radius: 50%;
2356
+ background-color: white;
2357
+ }
2358
+
2359
+ .fs-txt {
2360
+ display: inline-block;
2361
+ width: calc(100% - 16px);
2362
+ padding-left: 8px;
2363
+ vertical-align: top;
2364
+ word-break: break-all;
2365
+ font-size: 14px;
2366
+ line-height: 1.2;
2367
+ }
2368
+
2369
+ .has-error .fs-tit {
2370
+ border-bottom-color: #ff4d4f;
2371
+ }
2372
+
2373
+ /* 错误提示样式 */
2374
+ .error-tip {
2375
+ position: fixed;
2376
+ left: 0;
2377
+ top: 0;
2378
+ width: 100%;
2379
+ height: 100%;
2380
+ z-index: 1000;
2381
+ }
2382
+
2383
+ .form-container {
2384
+ position: relative;
2385
+ width: 100%;
2386
+ height: 100%;
2387
+ }
2388
+
2389
+ .global.video {
2390
+ width: 35px;
2391
+ height: 55px;
2392
+ border-radius: 50%;
2393
+ text-align: center;
2394
+ margin-bottom: 5px;
2395
+ border: 2px solid #fff;
2396
+ cursor: pointer;
2397
+ }
2398
+ .icon-shipin2:before { content: "\E611"; }
2399
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
2400
+ .global.video > span { font-size: 12px; line-height: 20px; display: block; position: relative; top: -4px;}
2401
+
2396
2402
  .global.receipt {
2397
2403
  width: 35px;
2398
2404
  height: 55px;
@@ -2418,13 +2424,78 @@ input::placeholder {
2418
2424
  .icon-daohang1:before { content: "\E612"; }
2419
2425
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
2420
2426
  .global.map > span { font-size: 12px; line-height: 20px; display: block;}
2421
-
2422
- .form-container {
2423
- position: relative;
2427
+ .call {
2428
+ position: absolute;
2429
+ cursor: pointer;
2430
+ user-select: none;
2431
+ }
2432
+
2433
+ .call-container {
2434
+ display: flex;
2435
+ justify-content: center;
2436
+ align-items: center;
2424
2437
  width: 100%;
2425
2438
  height: 100%;
2439
+ overflow: hidden;
2440
+ transition: opacity 0.2s;
2441
+ }
2442
+
2443
+ .call-container:hover {
2444
+ opacity: 0.9;
2445
+ }
2446
+
2447
+ .call-content {
2448
+ display: flex;
2449
+ align-items: center;
2450
+ justify-content: center;
2451
+ }
2452
+
2453
+ .btn-text {
2454
+ margin-left: 10px;
2426
2455
  }
2427
2456
 
2457
+ /* 这里可以添加实际的电话图标样式 */
2458
+ /* .iconfont.hb-tel {
2459
+ display: inline-block;
2460
+ width: 16px;
2461
+ height: 16px;
2462
+ 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>');
2463
+ background-repeat: no-repeat;
2464
+ background-position: center;
2465
+ background-size: contain;
2466
+ } */
2467
+
2468
+ .hb-tel:before {
2469
+ content: "\E642";
2470
+ }.button {
2471
+ position: absolute;
2472
+ cursor: pointer;
2473
+ user-select: none;
2474
+ }
2475
+
2476
+ .button-container {
2477
+ display: flex;
2478
+ justify-content: center;
2479
+ align-items: center;
2480
+ width: 100%;
2481
+ height: 100%;
2482
+ overflow: hidden;
2483
+ transition: opacity 0.2s;
2484
+ }
2485
+
2486
+ .button-container:hover {
2487
+ opacity: 0.9;
2488
+ }
2489
+
2490
+ .button-content {
2491
+ display: flex;
2492
+ align-items: center;
2493
+ justify-content: center;
2494
+ }
2495
+
2496
+ .btn-text {
2497
+ margin-left: 10px;
2498
+ }
2428
2499
  @keyframes jumpheart {
2429
2500
  to {
2430
2501
  -webkit-transform: scale(1.2);
@@ -2766,77 +2837,6 @@ input::placeholder {
2766
2837
  }
2767
2838
  .icon-xingzhuangjiehe:before {
2768
2839
  content: "\E6A6";
2769
- }.button {
2770
- position: absolute;
2771
- cursor: pointer;
2772
- user-select: none;
2773
- }
2774
-
2775
- .button-container {
2776
- display: flex;
2777
- justify-content: center;
2778
- align-items: center;
2779
- width: 100%;
2780
- height: 100%;
2781
- overflow: hidden;
2782
- transition: opacity 0.2s;
2783
- }
2784
-
2785
- .button-container:hover {
2786
- opacity: 0.9;
2787
- }
2788
-
2789
- .button-content {
2790
- display: flex;
2791
- align-items: center;
2792
- justify-content: center;
2793
- }
2794
-
2795
- .btn-text {
2796
- margin-left: 10px;
2797
- }.call {
2798
- position: absolute;
2799
- cursor: pointer;
2800
- user-select: none;
2801
- }
2802
-
2803
- .call-container {
2804
- display: flex;
2805
- justify-content: center;
2806
- align-items: center;
2807
- width: 100%;
2808
- height: 100%;
2809
- overflow: hidden;
2810
- transition: opacity 0.2s;
2811
- }
2812
-
2813
- .call-container:hover {
2814
- opacity: 0.9;
2815
- }
2816
-
2817
- .call-content {
2818
- display: flex;
2819
- align-items: center;
2820
- justify-content: center;
2821
- }
2822
-
2823
- .btn-text {
2824
- margin-left: 10px;
2825
- }
2826
-
2827
- /* 这里可以添加实际的电话图标样式 */
2828
- /* .iconfont.hb-tel {
2829
- display: inline-block;
2830
- width: 16px;
2831
- height: 16px;
2832
- 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>');
2833
- background-repeat: no-repeat;
2834
- background-position: center;
2835
- background-size: contain;
2836
- } */
2837
-
2838
- .hb-tel:before {
2839
- content: "\E642";
2840
2840
  }body, html {
2841
2841
  width: 100%;
2842
2842
  height: 100%;