unika-components 1.0.398 → 1.0.399

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.
Files changed (2) hide show
  1. package/dist/unika-components.css +2109 -2109
  2. package/package.json +1 -1
@@ -1,4 +1,72 @@
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
+
2
70
  .ele-shape {
3
71
  position: absolute;
4
72
  overflow: hidden;
@@ -81,74 +149,6 @@
81
149
  transform: scale(1);
82
150
  }
83
151
  }
84
-
85
- .ele-text {
86
- position: relative;
87
- }
88
-
89
- .ele-text .ani-wrap {
90
- width: 100%;
91
- height: 100%;
92
- }
93
-
94
- .text-common {
95
- padding: 5px;
96
- text-orientation: upright;
97
- white-space: pre-wrap;
98
- }
99
-
100
- /* 文本动画类 */
101
- .text-fadeIn {
102
- animation: fadeIn 1s ease-in-out;
103
- }
104
-
105
- .text-slideIn {
106
- animation: slideIn 1s ease-in-out;
107
- }
108
-
109
- .text-bounceIn {
110
- animation: bounceIn 1s ease-in-out;
111
- }
112
-
113
- /* 基础动画关键帧 */
114
- @keyframes fadeIn {
115
- from {
116
- opacity: 0;
117
- }
118
- to {
119
- opacity: 1;
120
- }
121
- }
122
-
123
- @keyframes slideIn {
124
- from {
125
- transform: translateY(20px);
126
- opacity: 0;
127
- }
128
- to {
129
- transform: translateY(0);
130
- opacity: 1;
131
- }
132
- }
133
-
134
- @keyframes bounceIn {
135
- 0% {
136
- transform: scale(0.3);
137
- opacity: 0;
138
- }
139
- 50% {
140
- transform: scale(1.05);
141
- opacity: 0.8;
142
- }
143
- 70% {
144
- transform: scale(0.9);
145
- opacity: 0.9;
146
- }
147
- 100% {
148
- transform: scale(1);
149
- opacity: 1;
150
- }
151
- }
152
152
 
153
153
  .element-video {
154
154
  position: absolute;
@@ -197,27 +197,77 @@
197
197
  opacity: 1;
198
198
  }
199
199
 
200
- .like-button {
200
+ #audio {
201
+ position: absolute;
202
+ right: 10px;
203
+ top: 10px;
204
+ z-index: 103;
205
+ width: 30px;
206
+ height: 30px;
207
+ display: flex;
208
+ align-items: center;
209
+ }
210
+
211
+ #audio .mrotate {
212
+ animation: mrotate 5s linear infinite;
213
+ }
214
+
215
+ @keyframes mrotate {
216
+ to {
217
+ transform: rotate(1turn);
218
+ }
219
+ }
220
+
221
+ #audio .audio {
222
+ width: 100%;
223
+ height: 100%;
201
224
  display: flex;
202
- flex-direction: column;
203
225
  align-items: center;
226
+ justify-content: center;
227
+ color: #fff;
228
+ background: #666;
229
+ border-radius: 50%;
230
+ overflow: hidden;
204
231
  cursor: pointer;
232
+ transition: all 0.3s ease;
205
233
  }
206
234
 
207
- .icon-heart {
208
- font-size: 24px;
209
- color: #e74c3c;
235
+ #audio .audio.a-border {
236
+ border: 1px solid #fff;
210
237
  }
211
238
 
212
- .liked {
213
- color: #f00; /* 更改颜色以示已赞 */
239
+ #audio .audio .music-icon {
240
+ display: block;
241
+ width: 60%;
242
+ height: 60%;
243
+ object-fit: contain;
214
244
  }
215
245
 
216
- .like-count {
217
- margin-top: 4px;
218
- font-size: 16px;
219
- color: #333;
246
+ #audio .audio .iconfont {
247
+ font-size: 2opx;
248
+ line-height: 1;
249
+ }
250
+ #audio .icon-cancel {
251
+ position: absolute;
252
+ width: 100%;
253
+ height: 100%;
254
+ border-radius: 50%;
255
+ overflow: hidden;
256
+ padding: 15px 0;
220
257
  }
258
+ #audio .icon-cancel .icon-h {
259
+ transform: rotate(45deg);
260
+ width: 100%;
261
+ height: 2px;
262
+ background: #fff;
263
+ }
264
+ #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
265
+ content: '';
266
+ position: absolute;
267
+ width: 100%;
268
+ height: 2px;
269
+ background: #fff;
270
+ }
221
271
 
222
272
  .element-ditu .ani-wrap {
223
273
  width: 100%;
@@ -265,272 +315,30 @@
265
315
  height: 100%;
266
316
  }
267
317
 
268
- .ele-lottie .ele-lotwrap {
269
- overflow: hidden;
270
- }
271
-
272
- .ele-effect .effect-wrap {
273
- position: relative;
274
- overflow: hidden;
275
- width: 100%;
276
- height: 100%;
318
+ .count-down .drag-point {
319
+ cursor: default!important
277
320
  }
278
321
 
279
- .ele-effect .e-small {
280
- position: absolute;
281
- width: 24px;
282
- height: 24px;
283
- background-image: url(http://cdn.h5ds.com/static/images/snow.png);
284
- background-size: cover;
285
- background-repeat: no-repeat;
286
- transform-origin: center;
287
- animation: snow 5s linear infinite;
322
+ .count-down .ani-wrap {
323
+ width: 100%;
324
+ height: 100%
288
325
  }
289
326
 
290
- @keyframes snow {
291
- 0% {
292
- transform: translateY(0) rotate(0deg);
293
- opacity: 1;
294
- }
295
- 100% {
296
- transform: translateY(100vh) rotate(360deg);
297
- opacity: 0;
298
- }
327
+ .count-down .count-text,.count-down .finish-cont {
328
+ display: -webkit-box;
329
+ display: -ms-flexbox;
330
+ display: flex;
331
+ height: 100%;
332
+ -webkit-box-align: center;
333
+ -ms-flex-align: center;
334
+ align-items: center;
335
+ -webkit-box-pack: center;
336
+ -ms-flex-pack: center;
337
+ justify-content: center
299
338
  }
300
339
 
301
- .effect-container {
302
- will-change: transform;
303
- }
304
-
305
- .particles-wrapper {
306
- position: relative;
307
- width: 100%;
308
- height: 100%;
309
- }
310
-
311
- .particle {
312
- position: absolute;
313
- background-repeat: no-repeat;
314
- background-size: contain;
315
- animation-name: falling;
316
- animation-timing-function: linear;
317
- animation-iteration-count: infinite;
318
- will-change: transform;
319
- }
320
-
321
- @keyframes falling {
322
- 0% {
323
- transform: translateY(0) rotate(0deg);
324
- opacity: 1;
325
- }
326
- 80% {
327
- opacity: 0.8;
328
- }
329
- 100% {
330
- transform: translateY(100vh) rotate(360deg);
331
- opacity: 0;
332
- }
333
- }
334
- .ele-lottie .ele-lotwrap {
335
- overflow: hidden
336
- }
337
-
338
- .ele-effect .effect-wrap {
339
- position: relative;
340
- overflow: hidden;
341
- width: 100%;
342
- height: 100%
343
- }
344
-
345
- .ele-effect .e-small {
346
- position: absolute;
347
- width: 24px;
348
- height: 24px;
349
- background-image: url(http://cdn.h5ds.com/static/images/snow.png);
350
- background-size: cover;
351
- background-repeat: no-repeat;
352
- -webkit-transform-origin: center;
353
- transform-origin: center;
354
- -webkit-animation: snow 5s linear infinite;
355
- animation: snow 5s linear infinite
356
- }
357
-
358
- .ant-input-number {
359
- box-sizing: border-box;
360
- margin: 0;
361
- padding: 0;
362
- color: rgba(0, 0, 0, 0.88);
363
- font-size: 14px;
364
- line-height: 1.5714285714285714;
365
- list-style: none;
366
- 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';
367
- position: relative;
368
- display: inline-block;
369
- width: 100%;
370
- min-width: 0;
371
- background-color: #ffffff;
372
- background-image: none;
373
- border-width: 1px;
374
- border-style: solid;
375
- border-color: #d9d9d9;
376
- border-radius: 6px;
377
- transition: all 0.2s;
378
- border: 1px solid #d9d9d9;
379
- }
380
- .ant-form-item {
381
- box-sizing: border-box;
382
- margin: 0;
383
- padding: 0;
384
- color: rgba(0, 0, 0, 0.88);
385
- font-size: 14px;
386
- line-height: 1.5714285714285714;
387
- list-style: none;
388
- 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';
389
- margin-bottom: 0px;
390
- vertical-align: top;
391
- }
392
-
393
- .call {
394
- position: absolute;
395
- cursor: pointer;
396
- user-select: none;
397
- }
398
-
399
- .bohao-container {
400
- display: flex;
401
- justify-content: center;
402
- align-items: center;
403
- width: 100%;
404
- height: 100%;
405
- overflow: hidden;
406
- transition: opacity 0.2s;
407
- }
408
-
409
- .bohao-container:hover {
410
- opacity: 0.9;
411
- }
412
-
413
- .bohao-content {
414
- display: flex;
415
- align-items: center;
416
- justify-content: center;
417
- }
418
-
419
- .btn-text {
420
- margin-left: 10px;
421
- }
422
-
423
- /* 这里可以添加实际的电话图标样式 */
424
- .iconfont.hb-tel {
425
- display: inline-block;
426
- width: 16px;
427
- height: 16px;
428
- 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>');
429
- background-repeat: no-repeat;
430
- background-position: center;
431
- background-size: contain;
432
- }
433
-
434
- #audio {
435
- position: absolute;
436
- right: 10px;
437
- top: 10px;
438
- z-index: 103;
439
- width: 30px;
440
- height: 30px;
441
- display: flex;
442
- align-items: center;
443
- }
444
-
445
- #audio .mrotate {
446
- animation: mrotate 5s linear infinite;
447
- }
448
-
449
- @keyframes mrotate {
450
- to {
451
- transform: rotate(1turn);
452
- }
453
- }
454
-
455
- #audio .audio {
456
- width: 100%;
457
- height: 100%;
458
- display: flex;
459
- align-items: center;
460
- justify-content: center;
461
- color: #fff;
462
- background: #666;
463
- border-radius: 50%;
464
- overflow: hidden;
465
- cursor: pointer;
466
- transition: all 0.3s ease;
467
- }
468
-
469
- #audio .audio.a-border {
470
- border: 1px solid #fff;
471
- }
472
-
473
- #audio .audio .music-icon {
474
- display: block;
475
- width: 60%;
476
- height: 60%;
477
- object-fit: contain;
478
- }
479
-
480
- #audio .audio .iconfont {
481
- font-size: 2opx;
482
- line-height: 1;
483
- }
484
- #audio .icon-cancel {
485
- position: absolute;
486
- width: 100%;
487
- height: 100%;
488
- border-radius: 50%;
489
- overflow: hidden;
490
- padding: 15px 0;
491
- }
492
- #audio .icon-cancel .icon-h {
493
- transform: rotate(45deg);
494
- width: 100%;
495
- height: 2px;
496
- background: #fff;
497
- }
498
- #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
499
- content: '';
500
- position: absolute;
501
- width: 100%;
502
- height: 2px;
503
- background: #fff;
504
- }
505
-
506
- .uni-svg-component {
507
- display: inline-block;
508
- }
509
-
510
- .count-down .drag-point {
511
- cursor: default!important
512
- }
513
-
514
- .count-down .ani-wrap {
515
- width: 100%;
516
- height: 100%
517
- }
518
-
519
- .count-down .count-text,.count-down .finish-cont {
520
- display: -webkit-box;
521
- display: -ms-flexbox;
522
- display: flex;
523
- height: 100%;
524
- -webkit-box-align: center;
525
- -ms-flex-align: center;
526
- align-items: center;
527
- -webkit-box-pack: center;
528
- -ms-flex-pack: center;
529
- justify-content: center
530
- }
531
-
532
- .count-down .finish-cont {
533
- width: 100%
340
+ .count-down .finish-cont {
341
+ width: 100%
534
342
  }
535
343
 
536
344
  .count-down .count-flip {
@@ -671,1642 +479,199 @@
671
479
  }
672
480
 
673
481
 
674
- .uni-build-up-component {
675
- }
676
-
677
- .ele-form {
678
- position: absolute;
679
- user-select: none;
680
- }
681
-
682
- .f-select {
683
- cursor: pointer;
684
- }
685
-
686
- .ani-wrap {
687
- position: relative;
688
- }
689
-
690
- .fs-tit {
691
- position: relative;
692
- display: flex;
693
- padding: 0 5px;
694
- height: 35px;
695
- line-height: 35px;
696
- align-items: center;
697
- }
698
-
699
- .require {
700
- padding: 0 5px 0 0;
701
- color: red;
702
- vertical-align: middle;
703
- }
704
-
705
- .fs-cont {
706
- padding-right: 15px;
707
- white-space: nowrap;
708
- overflow: hidden;
709
- text-overflow: ellipsis;
710
- flex-grow: 1;
711
- }
712
-
713
- .icon-bofang1 {
714
- font-size: 12px;
715
- transition: transform 0.2s ease;
716
- }
717
-
718
- .rotate-180 {
719
- transform: rotate(180deg) !important;
720
- }
721
-
722
- .f-real {
723
- position: absolute;
724
- left: 0;
725
- top: 0;
726
- width: 100%;
727
- height: 100%;
728
- z-index: 1;
729
- opacity: 0;
730
- cursor: pointer;
731
- }
732
-
733
- .dropdown-menu {
734
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
735
- }
736
-
737
- .dropdown-item {
738
- padding: 8px 10px;
739
- cursor: pointer;
740
- transition: background-color 0.2s;
741
- }
742
-
743
- .dropdown-item:hover {
744
- background-color: #f5f5f5;
745
- }
746
-
747
- .dropdown-item.selected {
748
- background-color: #e6f7ff;
749
- color: #1890ff;
750
- }
751
-
752
- .f-select .fs-tit .icon-bofang1 {
753
- position: absolute;
754
- right: 10px;
755
- font-size: 12px;
756
- display: inline-block;
757
- transform: rotate(90deg);
758
- }
759
-
760
- @font-face {
761
- font-family: iconfont;
762
- src: url(https://h5static.hunbei.com/preview/static/fonts/iconfont.f1262e4.woff2) format("woff2"),
763
- url(https://h5static.hunbei.com/preview/static/fonts/iconfont.788d827.woff) format("woff"),
764
- url(https://h5static.hunbei.com/preview/static/fonts/iconfont.9541e59.ttf) format("truetype");
765
- }
766
-
767
- .iconfont {
768
- font-family: iconfont !important;
769
- font-size: 14px;
770
- font-style: normal;
771
- -webkit-font-smoothing: antialiased;
772
- -moz-osx-font-smoothing: grayscale;
773
- }
774
-
775
- .icon-bofang1:before {
776
- content: "\E6CF";
777
- }
778
-
779
- .has-error {
780
- border-color: #ff4d4f !important;
781
- }
782
-
783
- .error-tip {
784
- position: fixed;
785
- left: 0;
786
- top: 0;
787
- width: 100%;
788
- height: 100%;
789
- z-index: 1000;
790
- }
482
+ .call {
483
+ position: absolute;
484
+ cursor: pointer;
485
+ user-select: none;
486
+ }
487
+
488
+ .bohao-container {
489
+ display: flex;
490
+ justify-content: center;
491
+ align-items: center;
492
+ width: 100%;
493
+ height: 100%;
494
+ overflow: hidden;
495
+ transition: opacity 0.2s;
496
+ }
497
+
498
+ .bohao-container:hover {
499
+ opacity: 0.9;
500
+ }
501
+
502
+ .bohao-content {
503
+ display: flex;
504
+ align-items: center;
505
+ justify-content: center;
506
+ }
507
+
508
+ .btn-text {
509
+ margin-left: 10px;
510
+ }
511
+
512
+ /* 这里可以添加实际的电话图标样式 */
513
+ .iconfont.hb-tel {
514
+ display: inline-block;
515
+ width: 16px;
516
+ height: 16px;
517
+ 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>');
518
+ background-repeat: no-repeat;
519
+ background-position: center;
520
+ background-size: contain;
521
+ }
522
+
523
+ .effect-container {
524
+ will-change: transform;
525
+ }
526
+
527
+ .particles-wrapper {
528
+ position: relative;
529
+ width: 100%;
530
+ height: 100%;
531
+ }
532
+
533
+ .particle {
534
+ position: absolute;
535
+ background-repeat: no-repeat;
536
+ background-size: contain;
537
+ animation-name: falling;
538
+ animation-timing-function: linear;
539
+ animation-iteration-count: infinite;
540
+ will-change: transform;
541
+ }
542
+
543
+ @keyframes falling {
544
+ 0% {
545
+ transform: translateY(0) rotate(0deg);
546
+ opacity: 1;
547
+ }
548
+ 80% {
549
+ opacity: 0.8;
550
+ }
551
+ 100% {
552
+ transform: translateY(100vh) rotate(360deg);
553
+ opacity: 0;
554
+ }
555
+ }
556
+ .ele-lottie .ele-lotwrap {
557
+ overflow: hidden
558
+ }
559
+
560
+ .ele-effect .effect-wrap {
561
+ position: relative;
562
+ overflow: hidden;
563
+ width: 100%;
564
+ height: 100%
565
+ }
566
+
567
+ .ele-effect .e-small {
568
+ position: absolute;
569
+ width: 24px;
570
+ height: 24px;
571
+ background-image: url(http://cdn.h5ds.com/static/images/snow.png);
572
+ background-size: cover;
573
+ background-repeat: no-repeat;
574
+ -webkit-transform-origin: center;
575
+ transform-origin: center;
576
+ -webkit-animation: snow 5s linear infinite;
577
+ animation: snow 5s linear infinite
578
+ }
579
+
580
+ .uni-build-up-component {
581
+ }
582
+
583
+ .ele-lottie .ele-lotwrap {
584
+ overflow: hidden;
585
+ }
586
+
587
+ .ele-effect .effect-wrap {
588
+ position: relative;
589
+ overflow: hidden;
590
+ width: 100%;
591
+ height: 100%;
592
+ }
593
+
594
+ .ele-effect .e-small {
595
+ position: absolute;
596
+ width: 24px;
597
+ height: 24px;
598
+ background-image: url(http://cdn.h5ds.com/static/images/snow.png);
599
+ background-size: cover;
600
+ background-repeat: no-repeat;
601
+ transform-origin: center;
602
+ animation: snow 5s linear infinite;
603
+ }
604
+
605
+ @keyframes snow {
606
+ 0% {
607
+ transform: translateY(0) rotate(0deg);
608
+ opacity: 1;
609
+ }
610
+ 100% {
611
+ transform: translateY(100vh) rotate(360deg);
612
+ opacity: 0;
613
+ }
614
+ }
615
+
616
+ .like-button {
617
+ display: flex;
618
+ flex-direction: column;
619
+ align-items: center;
620
+ cursor: pointer;
621
+ }
622
+
623
+ .icon-heart {
624
+ font-size: 24px;
625
+ color: #e74c3c;
626
+ }
627
+
628
+ .liked {
629
+ color: #f00; /* 更改颜色以示已赞 */
630
+ }
631
+
632
+ .like-count {
633
+ margin-top: 4px;
634
+ font-size: 16px;
635
+ color: #333;
636
+ }
791
637
 
792
- body, html {
793
- width: 100%;
794
- height: 100%;
795
- }
796
- * {
797
- padding: 0;
798
- margin: 0;
799
- box-sizing: border-box;
800
- white-space: normal;
801
- word-break: break-all;
802
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
803
- }
804
-
805
- #index {
806
- position: relative;
807
- width: 100%;
808
- height: 100%;
809
- overflow: hidden;
810
- }
811
-
812
- #page-list {
813
- position: relative;
814
- width: 100%;
815
- height: 100%;
816
- max-width: 800px;
817
- margin: 0 auto;
818
- z-index: 1
819
- }
820
-
821
- #page-list.hardware .eles {
822
- will-change: transform
823
- }
824
-
825
- #page-list .bg-wrap {
826
- position: absolute;
827
- left: 0;
828
- top: 0;
829
- right: 0;
830
- bottom: 0;
831
- z-index: -1
832
- }
833
-
834
- #page-list .ani-pause .ani-wrap {
835
- animation-play-state: paused!important;
836
- -webkit-animation-play-state: paused!important
837
- }
838
-
839
- #page-list .audio-wrap {
840
- z-index: 10
841
- }
842
-
843
- #page-list .audio-wrap,#page-list .page-item {
844
- position: absolute;
845
- left: 0;
846
- top: 0;
847
- right: 0;
848
- bottom: 0
849
- }
850
-
851
- #page-list .page-item {
852
- z-index: 0;
853
- overflow: hidden;
854
- display: none;
855
- visibility: hidden;
856
- transform-style: preserve-3d;
857
- -webkit-backface-visibility: hidden;
858
- backface-visibility: hidden;
859
- transition-timing-function: cubic-bezier(.1,.57,.1,1)
860
- }
861
-
862
- #page-list .page-item .count-down {
863
- display: none
864
- }
865
-
866
- #page-list .page-item .has-ani {
867
- display: none!important
868
- }
869
-
870
- #page-list .page-item .ele-effect,#page-list .page-item .page-bg {
871
- display: none
872
- }
873
-
874
- #page-list .page-item .limit-ani .ani-wrap {
875
- animation: none!important
876
- }
877
-
878
- #page-list .page-item .ani-pause .ani-wrap {
879
- animation-play-state: paused!important;
880
- -webkit-animation-play-state: paused!important
881
- }
882
-
883
- #page-list .page-item .showAniEle .has-ani {
884
- display: block!important
885
- }
886
-
887
- #page-list .page-item .showAniEle .page-bg {
888
- display: block
889
- }
890
-
891
- #page-list .page-item .scroll-wrap {
892
- position: relative;
893
- width: 100%;
894
- overflow: hidden
895
- }
896
-
897
- #page-list .page-item .amap-maps {
898
- display: none
899
- }
900
-
901
- #page-list .page-item.current {
902
- z-index: 1;
903
- display: block;
904
- visibility: visible
905
- }
906
-
907
- #page-list .page-item.current .amap-maps,#page-list .page-item.current .count-down,#page-list .page-item.current .page-wrap .ele-effect {
908
- display: block
909
- }
910
-
911
- #page-list .page-item.current .page-wrap .eles {
912
- text-align: left
913
- }
914
-
915
- #page-list .page-item.current .page-wrap .page-bg {
916
- display: block
917
- }
918
-
919
- #page-list .page-item.current .page-wrap .has-ani {
920
- display: block!important
921
- }
922
-
923
- #page-list .page-item.visibility {
924
- display: block;
925
- visibility: hidden
926
- }
927
-
928
- #page-list .page-item.active {
929
- z-index: 2;
930
- visibility: visible
931
- }
932
-
933
- #page-list .page-item.active .amap-maps,#page-list .page-item.active .count-down {
934
- display: block
935
- }
936
-
937
- #page-list .page-item .page-wrap {
938
- position: relative;
939
- width: 100%;
940
- height: 100%;
941
- overflow: hidden;
942
- z-index: 1
943
- }
944
-
945
- #page-list .page-item .page-wrap .ele-wrap,#page-list .page-item .page-wrap .page-bg {
946
- position: absolute;
947
- right: 0;
948
- left: 0;
949
- top: 0;
950
- bottom: 0;
951
- width: 100%;
952
- height: 100%;
953
- overflow: hidden
954
- }
955
-
956
- #page-list .page-item .page-wrap .page-bg {
957
- background-size: cover;
958
- background-repeat: no-repeat;
959
- background-position: 50% 50%;
960
- z-index: 0
961
- }
962
-
963
- #page-list .page-item .page-wrap .ele-wrap {
964
- z-index: 1
965
- }
966
-
967
- #page-list .page-item .page-wrap .eles {
968
- position: absolute
969
- }
970
-
971
- .no-ani .ani-wrap,.no-ani .ele-text-long {
972
- animation: none!important
973
- }
974
-
975
- .scroll-mode .page-container {
976
- position: relative;
977
- min-height: 100vh;
978
- }
979
-
980
- /* 页面切换动画 */
981
- /* 过渡动画示例 */
982
- .slide-enter-active, .slide-leave-active {
983
- -webkit-animation: slideToTop .6s ease-in both;
984
- animation: slideToTop .6s ease-in both
985
- }
986
- @-webkit-keyframes slideToTop {
987
- to {
988
- -webkit-transform: translateY(-100%);
989
- transform: translateY(-100%)
990
- }
991
- }
992
-
993
- @keyframes slideToTop {
994
- to {
995
- -webkit-transform: translateY(-100%);
996
- transform: translateY(-100%)
997
- }
998
- }
999
- .slide-enter-from {
1000
- transform: translateX(100%);
1001
- }
1002
- .slide-leave-to {
1003
- transform: translateX(-100%);
1004
- }
1005
-
1006
- .rotateCube-enter-active, .rotateCube-leave-active {
1007
- -webkit-transform-origin: 50% 100%;
1008
- transform-origin: 50% 100%;
1009
- -webkit-animation: rotateCubeTopOut .6s ease-in both;
1010
- animation: rotateCubeTopOut .6s ease-in both
1011
- }
1012
- .rotateCube-enter-from {
1013
- transform: translateX(100%);
1014
- }
1015
- .rotateCube-leave-to {
1016
- transform: translateX(-100%);
1017
- }
1018
-
1019
- .wind-enter-active, .wind-leave-active {
1020
- -webkit-animation: windOut .5s ease-in both;
1021
- animation: windOut .5s ease-in both
1022
- }
1023
- .wind-enter-from {
1024
- transform: translateX(100%);
1025
- }
1026
- .wind-leave-to {
1027
- transform: translateX(-100%);
1028
- }
1029
-
1030
- .popup-enter-active, .popup-leave-active {
1031
- -webkit-transform-origin: 50% 100%;
1032
- transform-origin: 50% 100%;
1033
- -webkit-animation: rotateCarouselTopOut .7s ease both;
1034
- animation: rotateCarouselTopOut .7s ease both
1035
- }
1036
- .popup-enter-from {
1037
- transform: translateX(100%);
1038
- }
1039
- .popup-leave-to {
1040
- transform: translateX(-100%);
1041
- }
1042
-
1043
- .scaleUpDown-enter-active, .scaleUpDown-leave-active {
1044
- -webkit-animation: scaleUp .7s ease both;
1045
- animation: scaleUp .7s ease both
1046
- }
1047
- .scaleUpDown-enter-from {
1048
- transform: translateX(100%);
1049
- }
1050
- .scaleUpDown-leave-to {
1051
- transform: translateX(-100%);
1052
- }
1053
-
1054
- .flipUpDown-enter-active, .flipUpDown-leave-active {
1055
- -webkit-animation: rotatePushTop .7s ease both;
1056
- animation: rotatePushTop .7s ease both
1057
- }
1058
- .flipUpDown-enter-from {
1059
- transform: translateX(100%);
1060
- }
1061
- .flipUpDown-leave-to {
1062
- transform: translateX(-100%);
1063
- }
1064
-
1065
- .cover-enter-active, .cover-leave-active {
1066
- -webkit-animation: coverInDown .5s ease both;
1067
- animation: coverInDown .5s ease both
1068
- }
1069
- .cover-enter-from {
1070
- transform: translateX(100%);
1071
- }
1072
- .cover-leave-to {
1073
- transform: translateX(-100%);
1074
- }
1075
-
1076
- .inertia-enter-active, .inertia-leave-active {
1077
- -webkit-animation: inertiaOut .6s ease both;
1078
- animation: inertiaOut .6s ease both
1079
- }
1080
- @-webkit-keyframes inertiaOut {
1081
- to {
1082
- -webkit-transform: scale(.2);
1083
- transform: scale(.2)
1084
- }
1085
- }
1086
-
1087
- @keyframes inertiaOut {
1088
- to {
1089
- -webkit-transform: scale(.2);
1090
- transform: scale(.2)
1091
- }
1092
- }
1093
- .inertia-enter-from {
1094
- transform: translateX(100%);
1095
- }
1096
- .inertia-leave-to {
1097
- transform: translateX(-100%);
1098
- }
1099
-
1100
- .push-enter-active, .push-leave-active {
1101
- -webkit-transform-origin: center top;
1102
- transform-origin: center top;
1103
- -webkit-animation: pushInTop .6s linear .2s both;
1104
- animation: pushInTop .6s linear .2s both
1105
- }
1106
- @-webkit-keyframes pushInTop {
1107
- 0% {
1108
- -webkit-transform: perspective(700px) rotateX(-90deg);
1109
- transform: perspective(700px) rotateX(-90deg)
1110
- }
1111
- }
1112
-
1113
- @keyframes pushInTop {
1114
- 0% {
1115
- -webkit-transform: perspective(700px) rotateX(-90deg);
1116
- transform: perspective(700px) rotateX(-90deg)
1117
- }
1118
- }
1119
- .push-enter-from {
1120
- transform: translateX(100%);
1121
- }
1122
- .push-leave-to {
1123
- transform: translateX(-100%);
1124
- }
1125
-
1126
- .drop-enter-active, .drop-leave-active {
1127
- -webkit-transform-origin: 0 0;
1128
- transform-origin: 0 0;
1129
- -webkit-animation: dropOut .6s linear both;
1130
- animation: dropOut .6s linear both
1131
- }
1132
- @-webkit-keyframes dropOut {
1133
- 20% {
1134
- -webkit-transform: rotate(5deg);
1135
- transform: rotate(5deg)
1136
- }
1137
-
1138
- to {
1139
- opacity: .6;
1140
- -webkit-transform: translate3d(0,100%,0);
1141
- transform: translate3d(0,100%,0)
1142
- }
1143
- }
1144
-
1145
- @keyframes dropOut {
1146
- 20% {
1147
- -webkit-transform: rotate(5deg);
1148
- transform: rotate(5deg)
1149
- }
1150
-
1151
- to {
1152
- opacity: .6;
1153
- -webkit-transform: translate3d(0,100%,0);
1154
- transform: translate3d(0,100%,0)
1155
- }
1156
- }
1157
-
1158
- .drop-enter-from {
1159
- transform: translateX(100%);
1160
- }
1161
- .drop-leave-to {
1162
- transform: translateX(-100%);
1163
- }
1164
-
1165
- .fadeIn-enter-active, .fadeIn-leave-active {
1166
- -webkit-animation: pfadeIn .6s linear both;
1167
- animation: pfadeIn .6s linear both
1168
- }
1169
- @-webkit-keyframes pfadeIn {
1170
- 0% {
1171
- opacity: 0
1172
- }
1173
-
1174
- to {
1175
- opacity: 1
1176
- }
1177
- }
1178
-
1179
- @keyframes pfadeIn {
1180
- 0% {
1181
- opacity: 0
1182
- }
1183
-
1184
- to {
1185
- opacity: 1
1186
- }
1187
- }
1188
- .fadeIn-enter-from {
1189
- transform: translateX(100%);
1190
- }
1191
- .fadeIn-leave-to {
1192
- transform: translateX(-100%);
1193
- }
1194
-
1195
- .zoomIn-enter-active, .zoomIn-leave-active {
1196
- -webkit-animation: pzoomIn .6s linear both;
1197
- animation: pzoomIn .6s linear both
1198
- }
1199
- @-webkit-keyframes pzoomIn {
1200
- 0% {
1201
- -webkit-transform: scale3d(0,0,0);
1202
- transform: scale3d(0,0,0)
1203
- }
1204
- }
1205
-
1206
- @keyframes pzoomIn {
1207
- 0% {
1208
- -webkit-transform: scale3d(0,0,0);
1209
- transform: scale3d(0,0,0)
1210
- }
1211
- }
1212
- .slide-enter-from {
1213
- transform: translateX(100%);
1214
- }
1215
- .slide-leave-to {
1216
- transform: translateX(-100%);
1217
- }
1218
-
1219
- .btFadeIn-enter-active, .btFadeIn-leave-active {
1220
- -webkit-animation: btFadeInTop .6s ease both;
1221
- animation: btFadeInTop .6s ease both
1222
- }
1223
- @keyframes btFadeInTop {
1224
- 0% {
1225
- opacity: 0;
1226
- -webkit-transform: translate3d(0,100%,0);
1227
- transform: translate3d(0,100%,0)
1228
- }
1229
- }
1230
-
1231
- .btFadeIn-enter-from {
1232
- transform: translateX(100%);
1233
- }
1234
- .btFadeIn-leave-to {
1235
- transform: translateX(-100%);
1236
- }
1237
-
1238
- .hideSoon-enter-active, .hideSoon-leave-active {
1239
- visibility: hidden
1240
- }
1241
- .hideSoon-enter-from {
1242
- transform: translateX(100%);
1243
- }
1244
- .hideSoon-leave-to {
1245
- transform: translateX(-100%);
1246
- }
1247
-
1248
- .upSlide-enter-active, .upSlide-leave-active {
1249
- transition: transform 0.3s, opacity 0.3s;
1250
- }
1251
- .upSlide-enter-from, .upSlide-leave-to {
1252
- transform: translateY(-100%);
1253
- opacity: 0;
1254
- }
1255
- .upSlide-enter-to, .upSlide-leave-from {
1256
- transform: translateY(0);
1257
- opacity: 1;
1258
- }
1259
-
1260
- .downSlide-enter-active, .downSlide-leave-active {
1261
- transition: transform 0.3s, opacity 0.3s;
1262
- }
1263
- .downSlide-enter-from, .downSlide-leave-to {
1264
- transform: translateY(100%);
1265
- opacity: 0;
1266
- }
1267
- .downSlide-enter-to, .downSlide-leave-from {
1268
- transform: translateY(0);
1269
- opacity: 1;
1270
- }
1271
-
1272
- .leftSlide-enter-active, .leftSlide-leave-active {
1273
- -webkit-animation: leftSlide .7s ease both;
1274
- animation: leftSlide .7s ease both
1275
- }
1276
- @-webkit-keyframes leftSlide {
1277
- 0% {
1278
- -webkit-transform: translateX(-100%);
1279
- transform: translateX(-100%)
1280
- }
1281
-
1282
- to {
1283
- -webkit-transform: translateX(0);
1284
- transform: translateX(0)
1285
- }
1286
- }
1287
-
1288
- @keyframes leftSlide {
1289
- 0% {
1290
- -webkit-transform: translateX(-100%);
1291
- transform: translateX(-100%)
1292
- }
1293
-
1294
- to {
1295
- -webkit-transform: translateX(0);
1296
- transform: translateX(0)
1297
- }
1298
- }
1299
- .leftSlide-enter-from {
1300
- transform: translateX(100%);
1301
- }
1302
- .leftSlide-leave-to {
1303
- transform: translateX(-100%);
1304
- }
1305
-
1306
- .rightSlide-enter-active, .rightSlide-leave-active {
1307
- -webkit-animation: rightSlide .7s ease both;
1308
- animation: rightSlide .7s ease both
1309
- }
1310
- @-webkit-keyframes rightSlide {
1311
- 0% {
1312
- -webkit-transform: translateX(100%);
1313
- transform: translateX(100%)
1314
- }
1315
-
1316
- to {
1317
- -webkit-transform: translateX(0);
1318
- transform: translateX(0)
1319
- }
1320
- }
1321
-
1322
- @keyframes rightSlide {
1323
- 0% {
1324
- -webkit-transform: translateX(100%);
1325
- transform: translateX(100%)
1326
- }
1327
-
1328
- to {
1329
- -webkit-transform: translateX(0);
1330
- transform: translateX(0)
1331
- }
1332
- }
1333
-
1334
- .rightSlide-enter-from {
1335
- transform: translateX(100%);
1336
- }
1337
- .rightSlide-leave-to {
1338
- transform: translateX(-100%);
1339
- }
1340
- * {
1341
- -webkit-box-sizing: border-box;
1342
- box-sizing: border-box;
1343
- white-space: normal;
1344
- word-break: break-all
1345
- }
1346
-
1347
-
1348
-
1349
- @-webkit-keyframes slideToBottom {
1350
- to {
1351
- -webkit-transform: translateY(100%);
1352
- transform: translateY(100%)
1353
- }
1354
- }
1355
-
1356
- @keyframes slideToBottom {
1357
- to {
1358
- -webkit-transform: translateY(100%);
1359
- transform: translateY(100%)
1360
- }
1361
- }
1362
-
1363
- @-webkit-keyframes slideFromTop {
1364
- 0% {
1365
- -webkit-transform: translateY(-100%);
1366
- transform: translateY(-100%)
1367
- }
1368
- }
1369
-
1370
- @keyframes slideFromTop {
1371
- 0% {
1372
- -webkit-transform: translateY(-100%);
1373
- transform: translateY(-100%)
1374
- }
1375
- }
1376
-
1377
- @-webkit-keyframes slideFromBottom {
1378
- 0% {
1379
- -webkit-transform: translateY(100%);
1380
- transform: translateY(100%)
1381
- }
1382
- }
1383
-
1384
- @keyframes slideFromBottom {
1385
- 0% {
1386
- -webkit-transform: translateY(100%);
1387
- transform: translateY(100%)
1388
- }
1389
- }
1390
-
1391
- @-webkit-keyframes rotateCubeTopOut {
1392
- 50% {
1393
- -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1394
- transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1395
- -webkit-animation-timing-function: ease-out;
1396
- animation-timing-function: ease-out
1397
- }
1398
-
1399
- to {
1400
- opacity: .3;
1401
- -webkit-transform: translateY(-100%) rotateX(90deg);
1402
- transform: translateY(-100%) rotateX(90deg)
1403
- }
1404
- }
1405
-
1406
- @keyframes rotateCubeTopOut {
1407
- 50% {
1408
- -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1409
- transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1410
- -webkit-animation-timing-function: ease-out;
1411
- animation-timing-function: ease-out
1412
- }
1413
-
1414
- to {
1415
- opacity: .3;
1416
- -webkit-transform: translateY(-100%) rotateX(90deg);
1417
- transform: translateY(-100%) rotateX(90deg)
1418
- }
1419
- }
1420
-
1421
- @-webkit-keyframes rotateCubeTopIn {
1422
- 0% {
1423
- opacity: .3;
1424
- -webkit-transform: translateY(100%) rotateX(-90deg);
1425
- transform: translateY(100%) rotateX(-90deg)
1426
- }
1427
-
1428
- 50% {
1429
- -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1430
- transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1431
- -webkit-animation-timing-function: ease-out;
1432
- animation-timing-function: ease-out
1433
- }
1434
- }
1435
-
1436
- @keyframes rotateCubeTopIn {
1437
- 0% {
1438
- opacity: .3;
1439
- -webkit-transform: translateY(100%) rotateX(-90deg);
1440
- transform: translateY(100%) rotateX(-90deg)
1441
- }
1442
-
1443
- 50% {
1444
- -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1445
- transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1446
- -webkit-animation-timing-function: ease-out;
1447
- animation-timing-function: ease-out
1448
- }
1449
- }
1450
-
1451
- @-webkit-keyframes rotateCubeBottomOut {
1452
- 50% {
1453
- -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1454
- transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1455
- -webkit-animation-timing-function: ease-out;
1456
- animation-timing-function: ease-out
1457
- }
1458
-
1459
- to {
1460
- opacity: .3;
1461
- -webkit-transform: translateY(100%) rotateX(-90deg);
1462
- transform: translateY(100%) rotateX(-90deg)
1463
- }
1464
- }
1465
-
1466
- @keyframes rotateCubeBottomOut {
1467
- 50% {
1468
- -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1469
- transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1470
- -webkit-animation-timing-function: ease-out;
1471
- animation-timing-function: ease-out
1472
- }
1473
-
1474
- to {
1475
- opacity: .3;
1476
- -webkit-transform: translateY(100%) rotateX(-90deg);
1477
- transform: translateY(100%) rotateX(-90deg)
1478
- }
1479
- }
1480
-
1481
- @-webkit-keyframes rotateCubeBottomIn {
1482
- 0% {
1483
- opacity: .3;
1484
- -webkit-transform: translateY(-100%) rotateX(90deg);
1485
- transform: translateY(-100%) rotateX(90deg)
1486
- }
1487
-
1488
- 50% {
1489
- -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1490
- transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1491
- -webkit-animation-timing-function: ease-out;
1492
- animation-timing-function: ease-out
1493
- }
1494
- }
1495
-
1496
- @keyframes rotateCubeBottomIn {
1497
- 0% {
1498
- opacity: .3;
1499
- -webkit-transform: translateY(-100%) rotateX(90deg);
1500
- transform: translateY(-100%) rotateX(90deg)
1501
- }
1502
-
1503
- 50% {
1504
- -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1505
- transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1506
- -webkit-animation-timing-function: ease-out;
1507
- animation-timing-function: ease-out
1508
- }
1509
- }
1510
-
1511
- @-webkit-keyframes windOut {
1512
- to {
1513
- opacity: 0;
1514
- -webkit-transform: translateZ(-3000px) rotate(1turn);
1515
- transform: translateZ(-3000px) rotate(1turn)
1516
- }
1517
- }
1518
-
1519
- @keyframes windOut {
1520
- to {
1521
- opacity: 0;
1522
- -webkit-transform: translateZ(-3000px) rotate(1turn);
1523
- transform: translateZ(-3000px) rotate(1turn)
1524
- }
1525
- }
1526
-
1527
- @-webkit-keyframes windIn {
1528
- 0% {
1529
- opacity: 0;
1530
- -webkit-transform: translateZ(-3000px) rotate(-1turn);
1531
- transform: translateZ(-3000px) rotate(-1turn)
1532
- }
1533
- }
1534
-
1535
- @keyframes windIn {
1536
- 0% {
1537
- opacity: 0;
1538
- -webkit-transform: translateZ(-3000px) rotate(-1turn);
1539
- transform: translateZ(-3000px) rotate(-1turn)
1540
- }
1541
- }
1542
-
1543
- @-webkit-keyframes rotateCarouselTopOut {
1544
- to {
1545
- opacity: .3;
1546
- -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
1547
- transform: translateY(-150%) scale(.4) rotateX(65deg)
1548
- }
1549
- }
1550
-
1551
- @keyframes rotateCarouselTopOut {
1552
- to {
1553
- opacity: .3;
1554
- -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
1555
- transform: translateY(-150%) scale(.4) rotateX(65deg)
1556
- }
1557
- }
1558
-
1559
- @-webkit-keyframes rotateCarouselTopIn {
1560
- 0% {
1561
- opacity: .3;
1562
- -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
1563
- transform: translateY(150%) scale(.4) rotateX(-65deg)
1564
- }
1565
- }
1566
-
1567
- @keyframes rotateCarouselTopIn {
1568
- 0% {
1569
- opacity: .3;
1570
- -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
1571
- transform: translateY(150%) scale(.4) rotateX(-65deg)
1572
- }
1573
- }
1574
-
1575
- @-webkit-keyframes rotateCarouselBottomOut {
1576
- to {
1577
- opacity: .3;
1578
- -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
1579
- transform: translateY(150%) scale(.4) rotateX(-65deg)
1580
- }
1581
- }
1582
-
1583
- @keyframes rotateCarouselBottomOut {
1584
- to {
1585
- opacity: .3;
1586
- -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
1587
- transform: translateY(150%) scale(.4) rotateX(-65deg)
1588
- }
1589
- }
1590
-
1591
- @-webkit-keyframes rotateCarouselBottomIn {
1592
- 0% {
1593
- opacity: .3;
1594
- -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
1595
- transform: translateY(-150%) scale(.4) rotateX(65deg)
1596
- }
1597
- }
1598
-
1599
- @keyframes rotateCarouselBottomIn {
1600
- 0% {
1601
- opacity: .3;
1602
- -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
1603
- transform: translateY(-150%) scale(.4) rotateX(65deg)
1604
- }
1605
- }
1606
-
1607
- @-webkit-keyframes scaleDown {
1608
- to {
1609
- opacity: 0;
1610
- -webkit-transform: scale(.8);
1611
- transform: scale(.8)
1612
- }
1613
- }
1614
-
1615
- @keyframes scaleDown {
1616
- to {
1617
- opacity: 0;
1618
- -webkit-transform: scale(.8);
1619
- transform: scale(.8)
1620
- }
1621
- }
1622
-
1623
- @-webkit-keyframes scaleUp {
1624
- 0% {
1625
- opacity: 0;
1626
- -webkit-transform: scale(.8);
1627
- transform: scale(.8)
1628
- }
1629
- }
1630
-
1631
- @keyframes scaleUp {
1632
- 0% {
1633
- opacity: 0;
1634
- -webkit-transform: scale(.8);
1635
- transform: scale(.8)
1636
- }
1637
- }
1638
-
1639
- @-webkit-keyframes scaleUpDown {
1640
- 0% {
1641
- opacity: 0;
1642
- -webkit-transform: scale(1.2);
1643
- transform: scale(1.2)
1644
- }
1645
- }
1646
-
1647
- @keyframes scaleUpDown {
1648
- 0% {
1649
- opacity: 0;
1650
- -webkit-transform: scale(1.2);
1651
- transform: scale(1.2)
1652
- }
1653
- }
1654
-
1655
- @-webkit-keyframes scaleDownUp {
1656
- to {
1657
- opacity: 0;
1658
- -webkit-transform: scale(1.2);
1659
- transform: scale(1.2)
1660
- }
1661
- }
1662
-
1663
- @keyframes scaleDownUp {
1664
- to {
1665
- opacity: 0;
1666
- -webkit-transform: scale(1.2);
1667
- transform: scale(1.2)
1668
- }
1669
- }
1670
-
1671
- @-webkit-keyframes scaleDownCenter {
1672
- to {
1673
- opacity: 0;
1674
- -webkit-transform: scale(.7);
1675
- transform: scale(.7)
1676
- }
1677
- }
1678
-
1679
- @keyframes scaleDownCenter {
1680
- to {
1681
- opacity: 0;
1682
- -webkit-transform: scale(.7);
1683
- transform: scale(.7)
1684
- }
1685
- }
1686
-
1687
- @-webkit-keyframes scaleUpCenter {
1688
- 0% {
1689
- opacity: 0;
1690
- -webkit-transform: scale(.7);
1691
- transform: scale(.7)
1692
- }
1693
- }
1694
-
1695
- @keyframes scaleUpCenter {
1696
- 0% {
1697
- opacity: 0;
1698
- -webkit-transform: scale(.7);
1699
- transform: scale(.7)
1700
- }
1701
- }
1702
-
1703
- @-webkit-keyframes rotatePushTop {
1704
- to {
1705
- opacity: 0;
1706
- -webkit-transform: rotateX(-90deg);
1707
- transform: rotateX(-90deg)
1708
- }
1709
- }
1710
-
1711
- @keyframes rotatePushTop {
1712
- to {
1713
- opacity: 0;
1714
- -webkit-transform: rotateX(-90deg);
1715
- transform: rotateX(-90deg)
1716
- }
1717
- }
1718
-
1719
- @-webkit-keyframes rotatePushBottom {
1720
- to {
1721
- opacity: 0;
1722
- -webkit-transform: rotateX(90deg);
1723
- transform: rotateX(90deg)
1724
- }
1725
- }
1726
-
1727
- @keyframes rotatePushBottom {
1728
- to {
1729
- opacity: 0;
1730
- -webkit-transform: rotateX(90deg);
1731
- transform: rotateX(90deg)
1732
- }
1733
- }
1734
-
1735
- @-webkit-keyframes rotatePullTop {
1736
- 0% {
1737
- opacity: 0;
1738
- -webkit-transform: rotateX(-90deg);
1739
- transform: rotateX(-90deg)
1740
- }
1741
- }
1742
-
1743
- @keyframes rotatePullTop {
1744
- 0% {
1745
- opacity: 0;
1746
- -webkit-transform: rotateX(-90deg);
1747
- transform: rotateX(-90deg)
1748
- }
1749
- }
1750
-
1751
- @-webkit-keyframes rotatePullBottom {
1752
- 0% {
1753
- opacity: 0;
1754
- -webkit-transform: rotateX(90deg);
1755
- transform: rotateX(90deg)
1756
- }
1757
- }
1758
-
1759
- @keyframes rotatePullBottom {
1760
- 0% {
1761
- opacity: 0;
1762
- -webkit-transform: rotateX(90deg);
1763
- transform: rotateX(90deg)
1764
- }
1765
- }
1766
-
1767
- @-webkit-keyframes coverInUp {
1768
- 0% {
1769
- -webkit-transform: translate3d(0,-100%,0);
1770
- transform: translate3d(0,-100%,0)
1771
- }
1772
- }
1773
-
1774
- @keyframes coverInUp {
1775
- 0% {
1776
- -webkit-transform: translate3d(0,-100%,0);
1777
- transform: translate3d(0,-100%,0)
1778
- }
1779
- }
1780
-
1781
- @-webkit-keyframes coverInDown {
1782
- 0% {
1783
- -webkit-transform: translate3d(0,100%,0);
1784
- transform: translate3d(0,100%,0)
1785
- }
1786
- }
1787
-
1788
- @keyframes coverInDown {
1789
- 0% {
1790
- -webkit-transform: translate3d(0,100%,0);
1791
- transform: translate3d(0,100%,0)
1792
- }
1793
- }
1794
-
1795
- .rotateInReverse {
1796
- -webkit-animation-name: rotateInReverse;
1797
- animation-name: rotateInReverse
1798
- }
1799
-
1800
- @-webkit-keyframes rotateInReverse {
1801
- 0% {
1802
- opacity: 0;
1803
- -webkit-transform: rotate(200deg);
1804
- transform: rotate(200deg);
1805
- -webkit-transform-origin: center;
1806
- transform-origin: center
1807
- }
1808
-
1809
- to {
1810
- opacity: 1;
1811
- -webkit-transform: none;
1812
- transform: none;
1813
- -webkit-transform-origin: center;
1814
- transform-origin: center
1815
- }
1816
- }
1817
-
1818
- @keyframes rotateInReverse {
1819
- 0% {
1820
- opacity: 0;
1821
- -webkit-transform: rotate(200deg);
1822
- transform: rotate(200deg);
1823
- -webkit-transform-origin: center;
1824
- transform-origin: center
1825
- }
1826
-
1827
- to {
1828
- opacity: 1;
1829
- -webkit-transform: none;
1830
- transform: none;
1831
- -webkit-transform-origin: center;
1832
- transform-origin: center
1833
- }
1834
- }
1835
-
1836
- .zoomInBig {
1837
- -webkit-animation-name: zoomInBig;
1838
- animation-name: zoomInBig;
1839
- -webkit-animation-timing-function: cubic-bezier(0,.44,.75,.99);
1840
- animation-timing-function: cubic-bezier(0,.44,.75,.99)
1841
- }
1842
-
1843
- @-webkit-keyframes zoomInBig {
1844
- 0% {
1845
- opacity: 0;
1846
- -webkit-transform: scale3d(2,2,2);
1847
- transform: scale3d(2,2,2)
1848
- }
1849
-
1850
- 50% {
1851
- opacity: 1
1852
- }
1853
-
1854
- 80% {
1855
- -webkit-transform: scaleX(1);
1856
- transform: scaleX(1)
1857
- }
1858
- }
1859
-
1860
- @keyframes zoomInBig {
1861
- 0% {
1862
- opacity: 0;
1863
- -webkit-transform: scale3d(2,2,2);
1864
- transform: scale3d(2,2,2)
1865
- }
1866
-
1867
- 50% {
1868
- opacity: 1
1869
- }
1870
-
1871
- 80% {
1872
- -webkit-transform: scaleX(1);
1873
- transform: scaleX(1)
1874
- }
1875
- }
1876
-
1877
- .flyIn {
1878
- -webkit-animation-name: flyIn;
1879
- animation-name: flyIn
1880
- }
1881
-
1882
- @-webkit-keyframes flyIn {
1883
- 0%,20%,40%,60%,80%,to {
1884
- -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
1885
- transition-timing-function: cubic-bezier(.215,.61,.355,1)
1886
- }
1887
-
1888
- 0% {
1889
- opacity: 0;
1890
- -webkit-transform: scale3d(2,2,2);
1891
- transform: scale3d(2,2,2)
1892
- }
1893
-
1894
- 40% {
1895
- -webkit-transform: scale3d(.9,.9,.9);
1896
- transform: scale3d(.9,.9,.9)
1897
- }
1898
-
1899
- 60% {
1900
- -webkit-transform: scale3d(1.03,1.03,1.03);
1901
- transform: scale3d(1.03,1.03,1.03)
1902
- }
1903
-
1904
- 80% {
1905
- opacity: 1;
1906
- -webkit-transform: scale3d(.97,.97,.97);
1907
- transform: scale3d(.97,.97,.97)
1908
- }
1909
-
1910
- to {
1911
- -webkit-transform: scaleX(1);
1912
- transform: scaleX(1)
1913
- }
1914
- }
1915
-
1916
- @keyframes flyIn {
1917
- 0%,20%,40%,60%,80%,to {
1918
- -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
1919
- transition-timing-function: cubic-bezier(.215,.61,.355,1)
1920
- }
1921
-
1922
- 0% {
1923
- opacity: 0;
1924
- -webkit-transform: scale3d(2,2,2);
1925
- transform: scale3d(2,2,2)
1926
- }
1927
-
1928
- 40% {
1929
- -webkit-transform: scale3d(.9,.9,.9);
1930
- transform: scale3d(.9,.9,.9)
1931
- }
1932
-
1933
- 60% {
1934
- -webkit-transform: scale3d(1.03,1.03,1.03);
1935
- transform: scale3d(1.03,1.03,1.03)
1936
- }
1937
-
1938
- 80% {
1939
- opacity: 1;
1940
- -webkit-transform: scale3d(.97,.97,.97);
1941
- transform: scale3d(.97,.97,.97)
1942
- }
1943
-
1944
- to {
1945
- -webkit-transform: scaleX(1);
1946
- transform: scaleX(1)
1947
- }
1948
- }
1949
-
1950
- .bounceSmall {
1951
- -webkit-animation-name: bounceSmall;
1952
- animation-name: bounceSmall;
1953
- -webkit-animation-timing-function: ease-out;
1954
- animation-timing-function: ease-out
1955
- }
1956
-
1957
- @-webkit-keyframes bounceSmall {
1958
- 0% {
1959
- opacity: 0;
1960
- -webkit-transform: scale(1.7)
1961
- }
1962
-
1963
- 50% {
1964
- opacity: 1;
1965
- -webkit-transform: scale(.95)
1966
- }
1967
-
1968
- 80% {
1969
- -webkit-transform: scale(1.05)
1970
- }
1971
-
1972
- 90% {
1973
- -webkit-transform: scale(.98)
1974
- }
1975
-
1976
- to {
1977
- -webkit-transform: scale(1)
1978
- }
1979
- }
1980
-
1981
- @keyframes bounceSmall {
1982
- 0% {
1983
- opacity: 0;
1984
- -webkit-transform: scale(1.7)
1985
- }
1986
-
1987
- 50% {
1988
- opacity: 1;
1989
- -webkit-transform: scale(.95)
1990
- }
1991
-
1992
- 80% {
1993
- -webkit-transform: scale(1.05)
1994
- }
1995
-
1996
- 90% {
1997
- -webkit-transform: scale(.98)
1998
- }
1999
-
2000
- to {
2001
- -webkit-transform: scale(1)
2002
- }
2003
- }
2004
-
2005
- .pullUp {
2006
- -webkit-transform-origin: 50% 100%;
2007
- transform-origin: 50% 100%;
2008
- -webkit-animation-name: pullUp;
2009
- animation-name: pullUp;
2010
- -webkit-animation-timing-function: ease-out;
2011
- animation-timing-function: ease-out
2012
- }
2013
-
2014
- @-webkit-keyframes pullUp {
2015
- 0%,40%,60%,80%,99% {
2016
- -webkit-animation-timing-function: ease-out;
2017
- animation-timing-function: ease-out
2018
- }
2019
-
2020
- 0% {
2021
- opacity: 0;
2022
- -webkit-transform: scaleY(.1);
2023
- transform: scaleY(.1);
2024
- -webkit-transform-origin: 50% 100%;
2025
- transform-origin: 50% 100%
2026
- }
2027
-
2028
- 40% {
2029
- opacity: 1;
2030
- -webkit-transform: scaleY(1.02);
2031
- transform: scaleY(1.02);
2032
- -webkit-transform-origin: 50% 100%;
2033
- transform-origin: 50% 100%
2034
- }
2035
-
2036
- 60% {
2037
- -webkit-transform: scaleY(.98);
2038
- transform: scaleY(.98);
2039
- -webkit-transform-origin: 50% 100%;
2040
- transform-origin: 50% 100%
2041
- }
2042
-
2043
- 80% {
2044
- -webkit-transform: scaleY(1.01);
2045
- transform: scaleY(1.01);
2046
- -webkit-transform-origin: 50% 100%;
2047
- transform-origin: 50% 100%
2048
- }
2049
-
2050
- 99% {
2051
- -webkit-transform: scaleY(1);
2052
- transform: scaleY(1);
2053
- -webkit-transform-origin: 50% 100%;
2054
- transform-origin: 50% 100%
2055
- }
2056
-
2057
- to {
2058
- -webkit-transform: none;
2059
- transform: none
2060
- }
2061
- }
2062
-
2063
- @keyframes pullUp {
2064
- 0%,40%,60%,80%,99% {
2065
- -webkit-animation-timing-function: ease-out;
2066
- animation-timing-function: ease-out
2067
- }
2068
-
2069
- 0% {
2070
- opacity: 0;
2071
- -webkit-transform: scaleY(.1);
2072
- transform: scaleY(.1);
2073
- -webkit-transform-origin: 50% 100%;
2074
- transform-origin: 50% 100%
2075
- }
2076
-
2077
- 40% {
2078
- opacity: 1;
2079
- -webkit-transform: scaleY(1.02);
2080
- transform: scaleY(1.02);
2081
- -webkit-transform-origin: 50% 100%;
2082
- transform-origin: 50% 100%
2083
- }
2084
-
2085
- 60% {
2086
- -webkit-transform: scaleY(.98);
2087
- transform: scaleY(.98);
2088
- -webkit-transform-origin: 50% 100%;
2089
- transform-origin: 50% 100%
2090
- }
2091
-
2092
- 80% {
2093
- -webkit-transform: scaleY(1.01);
2094
- transform: scaleY(1.01);
2095
- -webkit-transform-origin: 50% 100%;
2096
- transform-origin: 50% 100%
2097
- }
2098
-
2099
- 99% {
2100
- -webkit-transform: scaleY(1);
2101
- transform: scaleY(1);
2102
- -webkit-transform-origin: 50% 100%;
2103
- transform-origin: 50% 100%
2104
- }
2105
-
2106
- to {
2107
- -webkit-transform: none;
2108
- transform: none
2109
- }
2110
- }
2111
-
2112
- .pullDown {
2113
- -webkit-transform-origin: 50% 0;
2114
- transform-origin: 50% 0;
2115
- -webkit-animation-name: pullDown;
2116
- animation-name: pullDown;
2117
- -webkit-animation-timing-function: ease-out;
2118
- animation-timing-function: ease-out
2119
- }
2120
-
2121
- @-webkit-keyframes pullDown {
2122
- 0%,40%,60%,80%,99% {
2123
- -webkit-animation-timing-function: ease-out;
2124
- animation-timing-function: ease-out
2125
- }
2126
-
2127
- 0% {
2128
- opacity: 0;
2129
- -webkit-transform: scaleY(.1);
2130
- transform: scaleY(.1);
2131
- -webkit-transform-origin: 50% 0;
2132
- transform-origin: 50% 0
2133
- }
2134
-
2135
- 40% {
2136
- opacity: 1;
2137
- -webkit-transform: scaleY(1.02);
2138
- transform: scaleY(1.02);
2139
- -webkit-transform-origin: 50% 0;
2140
- transform-origin: 50% 0
2141
- }
2142
-
2143
- 60% {
2144
- -webkit-transform: scaleY(.98);
2145
- transform: scaleY(.98);
2146
- -webkit-transform-origin: 50% 0;
2147
- transform-origin: 50% 0
2148
- }
2149
-
2150
- 80% {
2151
- -webkit-transform: scaleY(1.01);
2152
- transform: scaleY(1.01);
2153
- -webkit-transform-origin: 50% 0;
2154
- transform-origin: 50% 0
2155
- }
2156
-
2157
- 99% {
2158
- -webkit-transform: scaleY(1);
2159
- transform: scaleY(1);
2160
- -webkit-transform-origin: 50% 0;
2161
- transform-origin: 50% 0
2162
- }
2163
-
2164
- to {
2165
- -webkit-transform: none;
2166
- transform: none
2167
- }
2168
- }
2169
-
2170
- @keyframes pullDown {
2171
- 0%,40%,60%,80%,99% {
2172
- -webkit-animation-timing-function: ease-out;
2173
- animation-timing-function: ease-out
2174
- }
2175
-
2176
- 0% {
2177
- opacity: 0;
2178
- -webkit-transform: scaleY(.1);
2179
- transform: scaleY(.1);
2180
- -webkit-transform-origin: 50% 0;
2181
- transform-origin: 50% 0
2182
- }
2183
-
2184
- 40% {
2185
- opacity: 1;
2186
- -webkit-transform: scaleY(1.02);
2187
- transform: scaleY(1.02);
2188
- -webkit-transform-origin: 50% 0;
2189
- transform-origin: 50% 0
2190
- }
2191
-
2192
- 60% {
2193
- -webkit-transform: scaleY(.98);
2194
- transform: scaleY(.98);
2195
- -webkit-transform-origin: 50% 0;
2196
- transform-origin: 50% 0
2197
- }
2198
-
2199
- 80% {
2200
- -webkit-transform: scaleY(1.01);
2201
- transform: scaleY(1.01);
2202
- -webkit-transform-origin: 50% 0;
2203
- transform-origin: 50% 0
2204
- }
2205
-
2206
- 99% {
2207
- -webkit-transform: scaleY(1);
2208
- transform: scaleY(1);
2209
- -webkit-transform-origin: 50% 0;
2210
- transform-origin: 50% 0
2211
- }
2212
-
2213
- to {
2214
- -webkit-transform: none;
2215
- transform: none
2216
- }
2217
- }
2218
- :deep(.vue-transition-group) {
2219
- display: block;
2220
- position: relative;
2221
- width: 100%;
2222
- height: 100%;
2223
- }
2224
- .transition-container {
2225
- display: block;
2226
- position: relative;
2227
- width: 100%;
2228
- height: 100%;
2229
- }
2230
- /* 确保循环时的过渡效果平滑 */
2231
- .pages-wrapper {
2232
- position: relative;
2233
- width: 100%;
2234
- height: 100%;
2235
- overflow: hidden;
2236
- }
2237
-
2238
- .page-container {
2239
- position: absolute;
2240
- width: 100%;
2241
- height: 100%;
2242
- background-size: cover;
2243
- background-position: center;
2244
- will-change: transform;
2245
- }
2246
-
2247
- .form-container {
2248
- position: relative;
2249
- width: 100%;
2250
- height: 100%;
2251
- }
2252
-
2253
- .form-input {
2254
- position: absolute;
2255
- }
2256
-
2257
- .input-wrapper {
2258
- display: flex;
2259
- align-items: center;
2260
- width: 100%;
2261
- height: 100%;
2262
- padding: 0 10px;
2263
- box-sizing: border-box;
2264
- position: relative;
2265
- transition: border-color 0.3s;
2266
- }
2267
-
2268
- .required-marker {
2269
- font-size: 12px;
2270
- padding: 0 5px 0 0;
2271
- color: red;
2272
- vertical-align: middle;
2273
- }
2274
-
2275
- input {
2276
- flex: 1;
2277
- border: none;
2278
- outline: none;
2279
- background: transparent;
2280
- height: 100%;
2281
- padding: 0;
2282
- margin: 0;
2283
- }
2284
- /*
2285
- input::placeholder {
2286
- color: #ccc;
2287
- opacity: 1;
2288
- } */
2289
-
2290
- .dynamic-placeholder-input::placeholder {
2291
- color: var(--placeholder-color, #999);
2292
- opacity: 1;
2293
- }
2294
- .dynamic-placeholder-input::-webkit-input-placeholder {
2295
- color: var(--placeholder-color, #999);
2296
- }
2297
- .dynamic-placeholder-input::-moz-placeholder {
2298
- color: var(--placeholder-color, #999);
2299
- opacity: 1;
2300
- }
2301
- .dynamic-placeholder-input:-ms-input-placeholder {
2302
- color: var(--placeholder-color, #999);
638
+ .uni-svg-component {
639
+ display: inline-block;
2303
640
  }
2304
641
 
2305
- /* 设计稿尺寸(如375px下20px的按钮) */
2306
- .btn {
2307
- width: 20px; /* 直接写设计稿px */
2308
- height: 10px;
642
+ .ant-input-number {
643
+ box-sizing: border-box;
644
+ margin: 0;
645
+ padding: 0;
646
+ color: rgba(0, 0, 0, 0.88);
647
+ font-size: 14px;
648
+ line-height: 1.5714285714285714;
649
+ list-style: none;
650
+ 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';
651
+ position: relative;
652
+ display: inline-block;
653
+ width: 100%;
654
+ min-width: 0;
655
+ background-color: #ffffff;
656
+ background-image: none;
657
+ border-width: 1px;
658
+ border-style: solid;
659
+ border-color: #d9d9d9;
660
+ border-radius: 6px;
661
+ transition: all 0.2s;
662
+ border: 1px solid #d9d9d9;
663
+ }
664
+ .ant-form-item {
665
+ box-sizing: border-box;
666
+ margin: 0;
667
+ padding: 0;
668
+ color: rgba(0, 0, 0, 0.88);
2309
669
  font-size: 14px;
670
+ line-height: 1.5714285714285714;
671
+ list-style: none;
672
+ 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';
673
+ margin-bottom: 0px;
674
+ vertical-align: top;
2310
675
  }
2311
676
 
2312
677
  /* Iconfont definition */
@@ -3221,18 +1586,1693 @@ i {
3221
1586
  animation: spin 1s linear infinite;
3222
1587
  }
3223
1588
 
3224
- @keyframes spin {
3225
- 0% { transform: rotate(0deg); }
3226
- 100% { transform: rotate(360deg); }
1589
+ @keyframes spin {
1590
+ 0% { transform: rotate(0deg); }
1591
+ 100% { transform: rotate(360deg); }
1592
+ }
1593
+
1594
+
1595
+ body, html {
1596
+ width: 100%;
1597
+ height: 100%;
1598
+ }
1599
+ * {
1600
+ padding: 0;
1601
+ margin: 0;
1602
+ box-sizing: border-box;
1603
+ white-space: normal;
1604
+ word-break: break-all;
1605
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1606
+ }
1607
+
1608
+ #index {
1609
+ position: relative;
1610
+ width: 100%;
1611
+ height: 100%;
1612
+ overflow: hidden;
1613
+ }
1614
+
1615
+ #page-list {
1616
+ position: relative;
1617
+ width: 100%;
1618
+ height: 100%;
1619
+ max-width: 800px;
1620
+ margin: 0 auto;
1621
+ z-index: 1
1622
+ }
1623
+
1624
+ #page-list.hardware .eles {
1625
+ will-change: transform
1626
+ }
1627
+
1628
+ #page-list .bg-wrap {
1629
+ position: absolute;
1630
+ left: 0;
1631
+ top: 0;
1632
+ right: 0;
1633
+ bottom: 0;
1634
+ z-index: -1
1635
+ }
1636
+
1637
+ #page-list .ani-pause .ani-wrap {
1638
+ animation-play-state: paused!important;
1639
+ -webkit-animation-play-state: paused!important
1640
+ }
1641
+
1642
+ #page-list .audio-wrap {
1643
+ z-index: 10
1644
+ }
1645
+
1646
+ #page-list .audio-wrap,#page-list .page-item {
1647
+ position: absolute;
1648
+ left: 0;
1649
+ top: 0;
1650
+ right: 0;
1651
+ bottom: 0
1652
+ }
1653
+
1654
+ #page-list .page-item {
1655
+ z-index: 0;
1656
+ overflow: hidden;
1657
+ display: none;
1658
+ visibility: hidden;
1659
+ transform-style: preserve-3d;
1660
+ -webkit-backface-visibility: hidden;
1661
+ backface-visibility: hidden;
1662
+ transition-timing-function: cubic-bezier(.1,.57,.1,1)
1663
+ }
1664
+
1665
+ #page-list .page-item .count-down {
1666
+ display: none
1667
+ }
1668
+
1669
+ #page-list .page-item .has-ani {
1670
+ display: none!important
1671
+ }
1672
+
1673
+ #page-list .page-item .ele-effect,#page-list .page-item .page-bg {
1674
+ display: none
1675
+ }
1676
+
1677
+ #page-list .page-item .limit-ani .ani-wrap {
1678
+ animation: none!important
1679
+ }
1680
+
1681
+ #page-list .page-item .ani-pause .ani-wrap {
1682
+ animation-play-state: paused!important;
1683
+ -webkit-animation-play-state: paused!important
1684
+ }
1685
+
1686
+ #page-list .page-item .showAniEle .has-ani {
1687
+ display: block!important
1688
+ }
1689
+
1690
+ #page-list .page-item .showAniEle .page-bg {
1691
+ display: block
1692
+ }
1693
+
1694
+ #page-list .page-item .scroll-wrap {
1695
+ position: relative;
1696
+ width: 100%;
1697
+ overflow: hidden
1698
+ }
1699
+
1700
+ #page-list .page-item .amap-maps {
1701
+ display: none
1702
+ }
1703
+
1704
+ #page-list .page-item.current {
1705
+ z-index: 1;
1706
+ display: block;
1707
+ visibility: visible
1708
+ }
1709
+
1710
+ #page-list .page-item.current .amap-maps,#page-list .page-item.current .count-down,#page-list .page-item.current .page-wrap .ele-effect {
1711
+ display: block
1712
+ }
1713
+
1714
+ #page-list .page-item.current .page-wrap .eles {
1715
+ text-align: left
1716
+ }
1717
+
1718
+ #page-list .page-item.current .page-wrap .page-bg {
1719
+ display: block
1720
+ }
1721
+
1722
+ #page-list .page-item.current .page-wrap .has-ani {
1723
+ display: block!important
1724
+ }
1725
+
1726
+ #page-list .page-item.visibility {
1727
+ display: block;
1728
+ visibility: hidden
1729
+ }
1730
+
1731
+ #page-list .page-item.active {
1732
+ z-index: 2;
1733
+ visibility: visible
1734
+ }
1735
+
1736
+ #page-list .page-item.active .amap-maps,#page-list .page-item.active .count-down {
1737
+ display: block
1738
+ }
1739
+
1740
+ #page-list .page-item .page-wrap {
1741
+ position: relative;
1742
+ width: 100%;
1743
+ height: 100%;
1744
+ overflow: hidden;
1745
+ z-index: 1
1746
+ }
1747
+
1748
+ #page-list .page-item .page-wrap .ele-wrap,#page-list .page-item .page-wrap .page-bg {
1749
+ position: absolute;
1750
+ right: 0;
1751
+ left: 0;
1752
+ top: 0;
1753
+ bottom: 0;
1754
+ width: 100%;
1755
+ height: 100%;
1756
+ overflow: hidden
1757
+ }
1758
+
1759
+ #page-list .page-item .page-wrap .page-bg {
1760
+ background-size: cover;
1761
+ background-repeat: no-repeat;
1762
+ background-position: 50% 50%;
1763
+ z-index: 0
1764
+ }
1765
+
1766
+ #page-list .page-item .page-wrap .ele-wrap {
1767
+ z-index: 1
1768
+ }
1769
+
1770
+ #page-list .page-item .page-wrap .eles {
1771
+ position: absolute
1772
+ }
1773
+
1774
+ .no-ani .ani-wrap,.no-ani .ele-text-long {
1775
+ animation: none!important
1776
+ }
1777
+
1778
+ .scroll-mode .page-container {
1779
+ position: relative;
1780
+ min-height: 100vh;
1781
+ }
1782
+
1783
+ /* 页面切换动画 */
1784
+ /* 过渡动画示例 */
1785
+ .slide-enter-active, .slide-leave-active {
1786
+ -webkit-animation: slideToTop .6s ease-in both;
1787
+ animation: slideToTop .6s ease-in both
1788
+ }
1789
+ @-webkit-keyframes slideToTop {
1790
+ to {
1791
+ -webkit-transform: translateY(-100%);
1792
+ transform: translateY(-100%)
1793
+ }
1794
+ }
1795
+
1796
+ @keyframes slideToTop {
1797
+ to {
1798
+ -webkit-transform: translateY(-100%);
1799
+ transform: translateY(-100%)
1800
+ }
1801
+ }
1802
+ .slide-enter-from {
1803
+ transform: translateX(100%);
1804
+ }
1805
+ .slide-leave-to {
1806
+ transform: translateX(-100%);
1807
+ }
1808
+
1809
+ .rotateCube-enter-active, .rotateCube-leave-active {
1810
+ -webkit-transform-origin: 50% 100%;
1811
+ transform-origin: 50% 100%;
1812
+ -webkit-animation: rotateCubeTopOut .6s ease-in both;
1813
+ animation: rotateCubeTopOut .6s ease-in both
1814
+ }
1815
+ .rotateCube-enter-from {
1816
+ transform: translateX(100%);
1817
+ }
1818
+ .rotateCube-leave-to {
1819
+ transform: translateX(-100%);
1820
+ }
1821
+
1822
+ .wind-enter-active, .wind-leave-active {
1823
+ -webkit-animation: windOut .5s ease-in both;
1824
+ animation: windOut .5s ease-in both
1825
+ }
1826
+ .wind-enter-from {
1827
+ transform: translateX(100%);
1828
+ }
1829
+ .wind-leave-to {
1830
+ transform: translateX(-100%);
1831
+ }
1832
+
1833
+ .popup-enter-active, .popup-leave-active {
1834
+ -webkit-transform-origin: 50% 100%;
1835
+ transform-origin: 50% 100%;
1836
+ -webkit-animation: rotateCarouselTopOut .7s ease both;
1837
+ animation: rotateCarouselTopOut .7s ease both
1838
+ }
1839
+ .popup-enter-from {
1840
+ transform: translateX(100%);
1841
+ }
1842
+ .popup-leave-to {
1843
+ transform: translateX(-100%);
1844
+ }
1845
+
1846
+ .scaleUpDown-enter-active, .scaleUpDown-leave-active {
1847
+ -webkit-animation: scaleUp .7s ease both;
1848
+ animation: scaleUp .7s ease both
1849
+ }
1850
+ .scaleUpDown-enter-from {
1851
+ transform: translateX(100%);
1852
+ }
1853
+ .scaleUpDown-leave-to {
1854
+ transform: translateX(-100%);
1855
+ }
1856
+
1857
+ .flipUpDown-enter-active, .flipUpDown-leave-active {
1858
+ -webkit-animation: rotatePushTop .7s ease both;
1859
+ animation: rotatePushTop .7s ease both
1860
+ }
1861
+ .flipUpDown-enter-from {
1862
+ transform: translateX(100%);
1863
+ }
1864
+ .flipUpDown-leave-to {
1865
+ transform: translateX(-100%);
1866
+ }
1867
+
1868
+ .cover-enter-active, .cover-leave-active {
1869
+ -webkit-animation: coverInDown .5s ease both;
1870
+ animation: coverInDown .5s ease both
1871
+ }
1872
+ .cover-enter-from {
1873
+ transform: translateX(100%);
1874
+ }
1875
+ .cover-leave-to {
1876
+ transform: translateX(-100%);
1877
+ }
1878
+
1879
+ .inertia-enter-active, .inertia-leave-active {
1880
+ -webkit-animation: inertiaOut .6s ease both;
1881
+ animation: inertiaOut .6s ease both
1882
+ }
1883
+ @-webkit-keyframes inertiaOut {
1884
+ to {
1885
+ -webkit-transform: scale(.2);
1886
+ transform: scale(.2)
1887
+ }
1888
+ }
1889
+
1890
+ @keyframes inertiaOut {
1891
+ to {
1892
+ -webkit-transform: scale(.2);
1893
+ transform: scale(.2)
1894
+ }
1895
+ }
1896
+ .inertia-enter-from {
1897
+ transform: translateX(100%);
1898
+ }
1899
+ .inertia-leave-to {
1900
+ transform: translateX(-100%);
1901
+ }
1902
+
1903
+ .push-enter-active, .push-leave-active {
1904
+ -webkit-transform-origin: center top;
1905
+ transform-origin: center top;
1906
+ -webkit-animation: pushInTop .6s linear .2s both;
1907
+ animation: pushInTop .6s linear .2s both
1908
+ }
1909
+ @-webkit-keyframes pushInTop {
1910
+ 0% {
1911
+ -webkit-transform: perspective(700px) rotateX(-90deg);
1912
+ transform: perspective(700px) rotateX(-90deg)
1913
+ }
1914
+ }
1915
+
1916
+ @keyframes pushInTop {
1917
+ 0% {
1918
+ -webkit-transform: perspective(700px) rotateX(-90deg);
1919
+ transform: perspective(700px) rotateX(-90deg)
1920
+ }
1921
+ }
1922
+ .push-enter-from {
1923
+ transform: translateX(100%);
1924
+ }
1925
+ .push-leave-to {
1926
+ transform: translateX(-100%);
1927
+ }
1928
+
1929
+ .drop-enter-active, .drop-leave-active {
1930
+ -webkit-transform-origin: 0 0;
1931
+ transform-origin: 0 0;
1932
+ -webkit-animation: dropOut .6s linear both;
1933
+ animation: dropOut .6s linear both
1934
+ }
1935
+ @-webkit-keyframes dropOut {
1936
+ 20% {
1937
+ -webkit-transform: rotate(5deg);
1938
+ transform: rotate(5deg)
1939
+ }
1940
+
1941
+ to {
1942
+ opacity: .6;
1943
+ -webkit-transform: translate3d(0,100%,0);
1944
+ transform: translate3d(0,100%,0)
1945
+ }
1946
+ }
1947
+
1948
+ @keyframes dropOut {
1949
+ 20% {
1950
+ -webkit-transform: rotate(5deg);
1951
+ transform: rotate(5deg)
1952
+ }
1953
+
1954
+ to {
1955
+ opacity: .6;
1956
+ -webkit-transform: translate3d(0,100%,0);
1957
+ transform: translate3d(0,100%,0)
1958
+ }
1959
+ }
1960
+
1961
+ .drop-enter-from {
1962
+ transform: translateX(100%);
1963
+ }
1964
+ .drop-leave-to {
1965
+ transform: translateX(-100%);
1966
+ }
1967
+
1968
+ .fadeIn-enter-active, .fadeIn-leave-active {
1969
+ -webkit-animation: pfadeIn .6s linear both;
1970
+ animation: pfadeIn .6s linear both
1971
+ }
1972
+ @-webkit-keyframes pfadeIn {
1973
+ 0% {
1974
+ opacity: 0
1975
+ }
1976
+
1977
+ to {
1978
+ opacity: 1
1979
+ }
1980
+ }
1981
+
1982
+ @keyframes pfadeIn {
1983
+ 0% {
1984
+ opacity: 0
1985
+ }
1986
+
1987
+ to {
1988
+ opacity: 1
1989
+ }
1990
+ }
1991
+ .fadeIn-enter-from {
1992
+ transform: translateX(100%);
1993
+ }
1994
+ .fadeIn-leave-to {
1995
+ transform: translateX(-100%);
1996
+ }
1997
+
1998
+ .zoomIn-enter-active, .zoomIn-leave-active {
1999
+ -webkit-animation: pzoomIn .6s linear both;
2000
+ animation: pzoomIn .6s linear both
2001
+ }
2002
+ @-webkit-keyframes pzoomIn {
2003
+ 0% {
2004
+ -webkit-transform: scale3d(0,0,0);
2005
+ transform: scale3d(0,0,0)
2006
+ }
2007
+ }
2008
+
2009
+ @keyframes pzoomIn {
2010
+ 0% {
2011
+ -webkit-transform: scale3d(0,0,0);
2012
+ transform: scale3d(0,0,0)
2013
+ }
2014
+ }
2015
+ .slide-enter-from {
2016
+ transform: translateX(100%);
2017
+ }
2018
+ .slide-leave-to {
2019
+ transform: translateX(-100%);
2020
+ }
2021
+
2022
+ .btFadeIn-enter-active, .btFadeIn-leave-active {
2023
+ -webkit-animation: btFadeInTop .6s ease both;
2024
+ animation: btFadeInTop .6s ease both
2025
+ }
2026
+ @keyframes btFadeInTop {
2027
+ 0% {
2028
+ opacity: 0;
2029
+ -webkit-transform: translate3d(0,100%,0);
2030
+ transform: translate3d(0,100%,0)
2031
+ }
2032
+ }
2033
+
2034
+ .btFadeIn-enter-from {
2035
+ transform: translateX(100%);
2036
+ }
2037
+ .btFadeIn-leave-to {
2038
+ transform: translateX(-100%);
2039
+ }
2040
+
2041
+ .hideSoon-enter-active, .hideSoon-leave-active {
2042
+ visibility: hidden
2043
+ }
2044
+ .hideSoon-enter-from {
2045
+ transform: translateX(100%);
2046
+ }
2047
+ .hideSoon-leave-to {
2048
+ transform: translateX(-100%);
2049
+ }
2050
+
2051
+ .upSlide-enter-active, .upSlide-leave-active {
2052
+ transition: transform 0.3s, opacity 0.3s;
2053
+ }
2054
+ .upSlide-enter-from, .upSlide-leave-to {
2055
+ transform: translateY(-100%);
2056
+ opacity: 0;
2057
+ }
2058
+ .upSlide-enter-to, .upSlide-leave-from {
2059
+ transform: translateY(0);
2060
+ opacity: 1;
2061
+ }
2062
+
2063
+ .downSlide-enter-active, .downSlide-leave-active {
2064
+ transition: transform 0.3s, opacity 0.3s;
2065
+ }
2066
+ .downSlide-enter-from, .downSlide-leave-to {
2067
+ transform: translateY(100%);
2068
+ opacity: 0;
2069
+ }
2070
+ .downSlide-enter-to, .downSlide-leave-from {
2071
+ transform: translateY(0);
2072
+ opacity: 1;
2073
+ }
2074
+
2075
+ .leftSlide-enter-active, .leftSlide-leave-active {
2076
+ -webkit-animation: leftSlide .7s ease both;
2077
+ animation: leftSlide .7s ease both
2078
+ }
2079
+ @-webkit-keyframes leftSlide {
2080
+ 0% {
2081
+ -webkit-transform: translateX(-100%);
2082
+ transform: translateX(-100%)
2083
+ }
2084
+
2085
+ to {
2086
+ -webkit-transform: translateX(0);
2087
+ transform: translateX(0)
2088
+ }
2089
+ }
2090
+
2091
+ @keyframes leftSlide {
2092
+ 0% {
2093
+ -webkit-transform: translateX(-100%);
2094
+ transform: translateX(-100%)
2095
+ }
2096
+
2097
+ to {
2098
+ -webkit-transform: translateX(0);
2099
+ transform: translateX(0)
2100
+ }
2101
+ }
2102
+ .leftSlide-enter-from {
2103
+ transform: translateX(100%);
2104
+ }
2105
+ .leftSlide-leave-to {
2106
+ transform: translateX(-100%);
2107
+ }
2108
+
2109
+ .rightSlide-enter-active, .rightSlide-leave-active {
2110
+ -webkit-animation: rightSlide .7s ease both;
2111
+ animation: rightSlide .7s ease both
2112
+ }
2113
+ @-webkit-keyframes rightSlide {
2114
+ 0% {
2115
+ -webkit-transform: translateX(100%);
2116
+ transform: translateX(100%)
2117
+ }
2118
+
2119
+ to {
2120
+ -webkit-transform: translateX(0);
2121
+ transform: translateX(0)
2122
+ }
2123
+ }
2124
+
2125
+ @keyframes rightSlide {
2126
+ 0% {
2127
+ -webkit-transform: translateX(100%);
2128
+ transform: translateX(100%)
2129
+ }
2130
+
2131
+ to {
2132
+ -webkit-transform: translateX(0);
2133
+ transform: translateX(0)
2134
+ }
2135
+ }
2136
+
2137
+ .rightSlide-enter-from {
2138
+ transform: translateX(100%);
2139
+ }
2140
+ .rightSlide-leave-to {
2141
+ transform: translateX(-100%);
2142
+ }
2143
+ * {
2144
+ -webkit-box-sizing: border-box;
2145
+ box-sizing: border-box;
2146
+ white-space: normal;
2147
+ word-break: break-all
2148
+ }
2149
+
2150
+
2151
+
2152
+ @-webkit-keyframes slideToBottom {
2153
+ to {
2154
+ -webkit-transform: translateY(100%);
2155
+ transform: translateY(100%)
2156
+ }
2157
+ }
2158
+
2159
+ @keyframes slideToBottom {
2160
+ to {
2161
+ -webkit-transform: translateY(100%);
2162
+ transform: translateY(100%)
2163
+ }
2164
+ }
2165
+
2166
+ @-webkit-keyframes slideFromTop {
2167
+ 0% {
2168
+ -webkit-transform: translateY(-100%);
2169
+ transform: translateY(-100%)
2170
+ }
2171
+ }
2172
+
2173
+ @keyframes slideFromTop {
2174
+ 0% {
2175
+ -webkit-transform: translateY(-100%);
2176
+ transform: translateY(-100%)
2177
+ }
2178
+ }
2179
+
2180
+ @-webkit-keyframes slideFromBottom {
2181
+ 0% {
2182
+ -webkit-transform: translateY(100%);
2183
+ transform: translateY(100%)
2184
+ }
2185
+ }
2186
+
2187
+ @keyframes slideFromBottom {
2188
+ 0% {
2189
+ -webkit-transform: translateY(100%);
2190
+ transform: translateY(100%)
2191
+ }
2192
+ }
2193
+
2194
+ @-webkit-keyframes rotateCubeTopOut {
2195
+ 50% {
2196
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2197
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2198
+ -webkit-animation-timing-function: ease-out;
2199
+ animation-timing-function: ease-out
2200
+ }
2201
+
2202
+ to {
2203
+ opacity: .3;
2204
+ -webkit-transform: translateY(-100%) rotateX(90deg);
2205
+ transform: translateY(-100%) rotateX(90deg)
2206
+ }
2207
+ }
2208
+
2209
+ @keyframes rotateCubeTopOut {
2210
+ 50% {
2211
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2212
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2213
+ -webkit-animation-timing-function: ease-out;
2214
+ animation-timing-function: ease-out
2215
+ }
2216
+
2217
+ to {
2218
+ opacity: .3;
2219
+ -webkit-transform: translateY(-100%) rotateX(90deg);
2220
+ transform: translateY(-100%) rotateX(90deg)
2221
+ }
2222
+ }
2223
+
2224
+ @-webkit-keyframes rotateCubeTopIn {
2225
+ 0% {
2226
+ opacity: .3;
2227
+ -webkit-transform: translateY(100%) rotateX(-90deg);
2228
+ transform: translateY(100%) rotateX(-90deg)
2229
+ }
2230
+
2231
+ 50% {
2232
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2233
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2234
+ -webkit-animation-timing-function: ease-out;
2235
+ animation-timing-function: ease-out
2236
+ }
2237
+ }
2238
+
2239
+ @keyframes rotateCubeTopIn {
2240
+ 0% {
2241
+ opacity: .3;
2242
+ -webkit-transform: translateY(100%) rotateX(-90deg);
2243
+ transform: translateY(100%) rotateX(-90deg)
2244
+ }
2245
+
2246
+ 50% {
2247
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2248
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2249
+ -webkit-animation-timing-function: ease-out;
2250
+ animation-timing-function: ease-out
2251
+ }
2252
+ }
2253
+
2254
+ @-webkit-keyframes rotateCubeBottomOut {
2255
+ 50% {
2256
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2257
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2258
+ -webkit-animation-timing-function: ease-out;
2259
+ animation-timing-function: ease-out
2260
+ }
2261
+
2262
+ to {
2263
+ opacity: .3;
2264
+ -webkit-transform: translateY(100%) rotateX(-90deg);
2265
+ transform: translateY(100%) rotateX(-90deg)
2266
+ }
2267
+ }
2268
+
2269
+ @keyframes rotateCubeBottomOut {
2270
+ 50% {
2271
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2272
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2273
+ -webkit-animation-timing-function: ease-out;
2274
+ animation-timing-function: ease-out
2275
+ }
2276
+
2277
+ to {
2278
+ opacity: .3;
2279
+ -webkit-transform: translateY(100%) rotateX(-90deg);
2280
+ transform: translateY(100%) rotateX(-90deg)
2281
+ }
2282
+ }
2283
+
2284
+ @-webkit-keyframes rotateCubeBottomIn {
2285
+ 0% {
2286
+ opacity: .3;
2287
+ -webkit-transform: translateY(-100%) rotateX(90deg);
2288
+ transform: translateY(-100%) rotateX(90deg)
2289
+ }
2290
+
2291
+ 50% {
2292
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2293
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2294
+ -webkit-animation-timing-function: ease-out;
2295
+ animation-timing-function: ease-out
2296
+ }
2297
+ }
2298
+
2299
+ @keyframes rotateCubeBottomIn {
2300
+ 0% {
2301
+ opacity: .3;
2302
+ -webkit-transform: translateY(-100%) rotateX(90deg);
2303
+ transform: translateY(-100%) rotateX(90deg)
2304
+ }
2305
+
2306
+ 50% {
2307
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2308
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2309
+ -webkit-animation-timing-function: ease-out;
2310
+ animation-timing-function: ease-out
2311
+ }
2312
+ }
2313
+
2314
+ @-webkit-keyframes windOut {
2315
+ to {
2316
+ opacity: 0;
2317
+ -webkit-transform: translateZ(-3000px) rotate(1turn);
2318
+ transform: translateZ(-3000px) rotate(1turn)
2319
+ }
2320
+ }
2321
+
2322
+ @keyframes windOut {
2323
+ to {
2324
+ opacity: 0;
2325
+ -webkit-transform: translateZ(-3000px) rotate(1turn);
2326
+ transform: translateZ(-3000px) rotate(1turn)
2327
+ }
2328
+ }
2329
+
2330
+ @-webkit-keyframes windIn {
2331
+ 0% {
2332
+ opacity: 0;
2333
+ -webkit-transform: translateZ(-3000px) rotate(-1turn);
2334
+ transform: translateZ(-3000px) rotate(-1turn)
2335
+ }
2336
+ }
2337
+
2338
+ @keyframes windIn {
2339
+ 0% {
2340
+ opacity: 0;
2341
+ -webkit-transform: translateZ(-3000px) rotate(-1turn);
2342
+ transform: translateZ(-3000px) rotate(-1turn)
2343
+ }
2344
+ }
2345
+
2346
+ @-webkit-keyframes rotateCarouselTopOut {
2347
+ to {
2348
+ opacity: .3;
2349
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2350
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
2351
+ }
2352
+ }
2353
+
2354
+ @keyframes rotateCarouselTopOut {
2355
+ to {
2356
+ opacity: .3;
2357
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2358
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
2359
+ }
2360
+ }
2361
+
2362
+ @-webkit-keyframes rotateCarouselTopIn {
2363
+ 0% {
2364
+ opacity: .3;
2365
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2366
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
2367
+ }
2368
+ }
2369
+
2370
+ @keyframes rotateCarouselTopIn {
2371
+ 0% {
2372
+ opacity: .3;
2373
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2374
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
2375
+ }
2376
+ }
2377
+
2378
+ @-webkit-keyframes rotateCarouselBottomOut {
2379
+ to {
2380
+ opacity: .3;
2381
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2382
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
2383
+ }
2384
+ }
2385
+
2386
+ @keyframes rotateCarouselBottomOut {
2387
+ to {
2388
+ opacity: .3;
2389
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2390
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
2391
+ }
2392
+ }
2393
+
2394
+ @-webkit-keyframes rotateCarouselBottomIn {
2395
+ 0% {
2396
+ opacity: .3;
2397
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2398
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
2399
+ }
2400
+ }
2401
+
2402
+ @keyframes rotateCarouselBottomIn {
2403
+ 0% {
2404
+ opacity: .3;
2405
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2406
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
2407
+ }
2408
+ }
2409
+
2410
+ @-webkit-keyframes scaleDown {
2411
+ to {
2412
+ opacity: 0;
2413
+ -webkit-transform: scale(.8);
2414
+ transform: scale(.8)
2415
+ }
2416
+ }
2417
+
2418
+ @keyframes scaleDown {
2419
+ to {
2420
+ opacity: 0;
2421
+ -webkit-transform: scale(.8);
2422
+ transform: scale(.8)
2423
+ }
2424
+ }
2425
+
2426
+ @-webkit-keyframes scaleUp {
2427
+ 0% {
2428
+ opacity: 0;
2429
+ -webkit-transform: scale(.8);
2430
+ transform: scale(.8)
2431
+ }
2432
+ }
2433
+
2434
+ @keyframes scaleUp {
2435
+ 0% {
2436
+ opacity: 0;
2437
+ -webkit-transform: scale(.8);
2438
+ transform: scale(.8)
2439
+ }
2440
+ }
2441
+
2442
+ @-webkit-keyframes scaleUpDown {
2443
+ 0% {
2444
+ opacity: 0;
2445
+ -webkit-transform: scale(1.2);
2446
+ transform: scale(1.2)
2447
+ }
2448
+ }
2449
+
2450
+ @keyframes scaleUpDown {
2451
+ 0% {
2452
+ opacity: 0;
2453
+ -webkit-transform: scale(1.2);
2454
+ transform: scale(1.2)
2455
+ }
2456
+ }
2457
+
2458
+ @-webkit-keyframes scaleDownUp {
2459
+ to {
2460
+ opacity: 0;
2461
+ -webkit-transform: scale(1.2);
2462
+ transform: scale(1.2)
2463
+ }
2464
+ }
2465
+
2466
+ @keyframes scaleDownUp {
2467
+ to {
2468
+ opacity: 0;
2469
+ -webkit-transform: scale(1.2);
2470
+ transform: scale(1.2)
2471
+ }
2472
+ }
2473
+
2474
+ @-webkit-keyframes scaleDownCenter {
2475
+ to {
2476
+ opacity: 0;
2477
+ -webkit-transform: scale(.7);
2478
+ transform: scale(.7)
2479
+ }
2480
+ }
2481
+
2482
+ @keyframes scaleDownCenter {
2483
+ to {
2484
+ opacity: 0;
2485
+ -webkit-transform: scale(.7);
2486
+ transform: scale(.7)
2487
+ }
2488
+ }
2489
+
2490
+ @-webkit-keyframes scaleUpCenter {
2491
+ 0% {
2492
+ opacity: 0;
2493
+ -webkit-transform: scale(.7);
2494
+ transform: scale(.7)
2495
+ }
2496
+ }
2497
+
2498
+ @keyframes scaleUpCenter {
2499
+ 0% {
2500
+ opacity: 0;
2501
+ -webkit-transform: scale(.7);
2502
+ transform: scale(.7)
2503
+ }
2504
+ }
2505
+
2506
+ @-webkit-keyframes rotatePushTop {
2507
+ to {
2508
+ opacity: 0;
2509
+ -webkit-transform: rotateX(-90deg);
2510
+ transform: rotateX(-90deg)
2511
+ }
2512
+ }
2513
+
2514
+ @keyframes rotatePushTop {
2515
+ to {
2516
+ opacity: 0;
2517
+ -webkit-transform: rotateX(-90deg);
2518
+ transform: rotateX(-90deg)
2519
+ }
2520
+ }
2521
+
2522
+ @-webkit-keyframes rotatePushBottom {
2523
+ to {
2524
+ opacity: 0;
2525
+ -webkit-transform: rotateX(90deg);
2526
+ transform: rotateX(90deg)
2527
+ }
2528
+ }
2529
+
2530
+ @keyframes rotatePushBottom {
2531
+ to {
2532
+ opacity: 0;
2533
+ -webkit-transform: rotateX(90deg);
2534
+ transform: rotateX(90deg)
2535
+ }
2536
+ }
2537
+
2538
+ @-webkit-keyframes rotatePullTop {
2539
+ 0% {
2540
+ opacity: 0;
2541
+ -webkit-transform: rotateX(-90deg);
2542
+ transform: rotateX(-90deg)
2543
+ }
2544
+ }
2545
+
2546
+ @keyframes rotatePullTop {
2547
+ 0% {
2548
+ opacity: 0;
2549
+ -webkit-transform: rotateX(-90deg);
2550
+ transform: rotateX(-90deg)
2551
+ }
2552
+ }
2553
+
2554
+ @-webkit-keyframes rotatePullBottom {
2555
+ 0% {
2556
+ opacity: 0;
2557
+ -webkit-transform: rotateX(90deg);
2558
+ transform: rotateX(90deg)
2559
+ }
2560
+ }
2561
+
2562
+ @keyframes rotatePullBottom {
2563
+ 0% {
2564
+ opacity: 0;
2565
+ -webkit-transform: rotateX(90deg);
2566
+ transform: rotateX(90deg)
2567
+ }
2568
+ }
2569
+
2570
+ @-webkit-keyframes coverInUp {
2571
+ 0% {
2572
+ -webkit-transform: translate3d(0,-100%,0);
2573
+ transform: translate3d(0,-100%,0)
2574
+ }
2575
+ }
2576
+
2577
+ @keyframes coverInUp {
2578
+ 0% {
2579
+ -webkit-transform: translate3d(0,-100%,0);
2580
+ transform: translate3d(0,-100%,0)
2581
+ }
2582
+ }
2583
+
2584
+ @-webkit-keyframes coverInDown {
2585
+ 0% {
2586
+ -webkit-transform: translate3d(0,100%,0);
2587
+ transform: translate3d(0,100%,0)
2588
+ }
2589
+ }
2590
+
2591
+ @keyframes coverInDown {
2592
+ 0% {
2593
+ -webkit-transform: translate3d(0,100%,0);
2594
+ transform: translate3d(0,100%,0)
2595
+ }
2596
+ }
2597
+
2598
+ .rotateInReverse {
2599
+ -webkit-animation-name: rotateInReverse;
2600
+ animation-name: rotateInReverse
2601
+ }
2602
+
2603
+ @-webkit-keyframes rotateInReverse {
2604
+ 0% {
2605
+ opacity: 0;
2606
+ -webkit-transform: rotate(200deg);
2607
+ transform: rotate(200deg);
2608
+ -webkit-transform-origin: center;
2609
+ transform-origin: center
2610
+ }
2611
+
2612
+ to {
2613
+ opacity: 1;
2614
+ -webkit-transform: none;
2615
+ transform: none;
2616
+ -webkit-transform-origin: center;
2617
+ transform-origin: center
2618
+ }
2619
+ }
2620
+
2621
+ @keyframes rotateInReverse {
2622
+ 0% {
2623
+ opacity: 0;
2624
+ -webkit-transform: rotate(200deg);
2625
+ transform: rotate(200deg);
2626
+ -webkit-transform-origin: center;
2627
+ transform-origin: center
2628
+ }
2629
+
2630
+ to {
2631
+ opacity: 1;
2632
+ -webkit-transform: none;
2633
+ transform: none;
2634
+ -webkit-transform-origin: center;
2635
+ transform-origin: center
2636
+ }
2637
+ }
2638
+
2639
+ .zoomInBig {
2640
+ -webkit-animation-name: zoomInBig;
2641
+ animation-name: zoomInBig;
2642
+ -webkit-animation-timing-function: cubic-bezier(0,.44,.75,.99);
2643
+ animation-timing-function: cubic-bezier(0,.44,.75,.99)
2644
+ }
2645
+
2646
+ @-webkit-keyframes zoomInBig {
2647
+ 0% {
2648
+ opacity: 0;
2649
+ -webkit-transform: scale3d(2,2,2);
2650
+ transform: scale3d(2,2,2)
2651
+ }
2652
+
2653
+ 50% {
2654
+ opacity: 1
2655
+ }
2656
+
2657
+ 80% {
2658
+ -webkit-transform: scaleX(1);
2659
+ transform: scaleX(1)
2660
+ }
2661
+ }
2662
+
2663
+ @keyframes zoomInBig {
2664
+ 0% {
2665
+ opacity: 0;
2666
+ -webkit-transform: scale3d(2,2,2);
2667
+ transform: scale3d(2,2,2)
2668
+ }
2669
+
2670
+ 50% {
2671
+ opacity: 1
2672
+ }
2673
+
2674
+ 80% {
2675
+ -webkit-transform: scaleX(1);
2676
+ transform: scaleX(1)
2677
+ }
2678
+ }
2679
+
2680
+ .flyIn {
2681
+ -webkit-animation-name: flyIn;
2682
+ animation-name: flyIn
2683
+ }
2684
+
2685
+ @-webkit-keyframes flyIn {
2686
+ 0%,20%,40%,60%,80%,to {
2687
+ -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
2688
+ transition-timing-function: cubic-bezier(.215,.61,.355,1)
2689
+ }
2690
+
2691
+ 0% {
2692
+ opacity: 0;
2693
+ -webkit-transform: scale3d(2,2,2);
2694
+ transform: scale3d(2,2,2)
2695
+ }
2696
+
2697
+ 40% {
2698
+ -webkit-transform: scale3d(.9,.9,.9);
2699
+ transform: scale3d(.9,.9,.9)
2700
+ }
2701
+
2702
+ 60% {
2703
+ -webkit-transform: scale3d(1.03,1.03,1.03);
2704
+ transform: scale3d(1.03,1.03,1.03)
2705
+ }
2706
+
2707
+ 80% {
2708
+ opacity: 1;
2709
+ -webkit-transform: scale3d(.97,.97,.97);
2710
+ transform: scale3d(.97,.97,.97)
2711
+ }
2712
+
2713
+ to {
2714
+ -webkit-transform: scaleX(1);
2715
+ transform: scaleX(1)
2716
+ }
2717
+ }
2718
+
2719
+ @keyframes flyIn {
2720
+ 0%,20%,40%,60%,80%,to {
2721
+ -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
2722
+ transition-timing-function: cubic-bezier(.215,.61,.355,1)
2723
+ }
2724
+
2725
+ 0% {
2726
+ opacity: 0;
2727
+ -webkit-transform: scale3d(2,2,2);
2728
+ transform: scale3d(2,2,2)
2729
+ }
2730
+
2731
+ 40% {
2732
+ -webkit-transform: scale3d(.9,.9,.9);
2733
+ transform: scale3d(.9,.9,.9)
2734
+ }
2735
+
2736
+ 60% {
2737
+ -webkit-transform: scale3d(1.03,1.03,1.03);
2738
+ transform: scale3d(1.03,1.03,1.03)
2739
+ }
2740
+
2741
+ 80% {
2742
+ opacity: 1;
2743
+ -webkit-transform: scale3d(.97,.97,.97);
2744
+ transform: scale3d(.97,.97,.97)
2745
+ }
2746
+
2747
+ to {
2748
+ -webkit-transform: scaleX(1);
2749
+ transform: scaleX(1)
2750
+ }
2751
+ }
2752
+
2753
+ .bounceSmall {
2754
+ -webkit-animation-name: bounceSmall;
2755
+ animation-name: bounceSmall;
2756
+ -webkit-animation-timing-function: ease-out;
2757
+ animation-timing-function: ease-out
2758
+ }
2759
+
2760
+ @-webkit-keyframes bounceSmall {
2761
+ 0% {
2762
+ opacity: 0;
2763
+ -webkit-transform: scale(1.7)
2764
+ }
2765
+
2766
+ 50% {
2767
+ opacity: 1;
2768
+ -webkit-transform: scale(.95)
2769
+ }
2770
+
2771
+ 80% {
2772
+ -webkit-transform: scale(1.05)
2773
+ }
2774
+
2775
+ 90% {
2776
+ -webkit-transform: scale(.98)
2777
+ }
2778
+
2779
+ to {
2780
+ -webkit-transform: scale(1)
2781
+ }
2782
+ }
2783
+
2784
+ @keyframes bounceSmall {
2785
+ 0% {
2786
+ opacity: 0;
2787
+ -webkit-transform: scale(1.7)
2788
+ }
2789
+
2790
+ 50% {
2791
+ opacity: 1;
2792
+ -webkit-transform: scale(.95)
2793
+ }
2794
+
2795
+ 80% {
2796
+ -webkit-transform: scale(1.05)
2797
+ }
2798
+
2799
+ 90% {
2800
+ -webkit-transform: scale(.98)
2801
+ }
2802
+
2803
+ to {
2804
+ -webkit-transform: scale(1)
2805
+ }
2806
+ }
2807
+
2808
+ .pullUp {
2809
+ -webkit-transform-origin: 50% 100%;
2810
+ transform-origin: 50% 100%;
2811
+ -webkit-animation-name: pullUp;
2812
+ animation-name: pullUp;
2813
+ -webkit-animation-timing-function: ease-out;
2814
+ animation-timing-function: ease-out
2815
+ }
2816
+
2817
+ @-webkit-keyframes pullUp {
2818
+ 0%,40%,60%,80%,99% {
2819
+ -webkit-animation-timing-function: ease-out;
2820
+ animation-timing-function: ease-out
2821
+ }
2822
+
2823
+ 0% {
2824
+ opacity: 0;
2825
+ -webkit-transform: scaleY(.1);
2826
+ transform: scaleY(.1);
2827
+ -webkit-transform-origin: 50% 100%;
2828
+ transform-origin: 50% 100%
2829
+ }
2830
+
2831
+ 40% {
2832
+ opacity: 1;
2833
+ -webkit-transform: scaleY(1.02);
2834
+ transform: scaleY(1.02);
2835
+ -webkit-transform-origin: 50% 100%;
2836
+ transform-origin: 50% 100%
2837
+ }
2838
+
2839
+ 60% {
2840
+ -webkit-transform: scaleY(.98);
2841
+ transform: scaleY(.98);
2842
+ -webkit-transform-origin: 50% 100%;
2843
+ transform-origin: 50% 100%
2844
+ }
2845
+
2846
+ 80% {
2847
+ -webkit-transform: scaleY(1.01);
2848
+ transform: scaleY(1.01);
2849
+ -webkit-transform-origin: 50% 100%;
2850
+ transform-origin: 50% 100%
2851
+ }
2852
+
2853
+ 99% {
2854
+ -webkit-transform: scaleY(1);
2855
+ transform: scaleY(1);
2856
+ -webkit-transform-origin: 50% 100%;
2857
+ transform-origin: 50% 100%
2858
+ }
2859
+
2860
+ to {
2861
+ -webkit-transform: none;
2862
+ transform: none
2863
+ }
2864
+ }
2865
+
2866
+ @keyframes pullUp {
2867
+ 0%,40%,60%,80%,99% {
2868
+ -webkit-animation-timing-function: ease-out;
2869
+ animation-timing-function: ease-out
2870
+ }
2871
+
2872
+ 0% {
2873
+ opacity: 0;
2874
+ -webkit-transform: scaleY(.1);
2875
+ transform: scaleY(.1);
2876
+ -webkit-transform-origin: 50% 100%;
2877
+ transform-origin: 50% 100%
2878
+ }
2879
+
2880
+ 40% {
2881
+ opacity: 1;
2882
+ -webkit-transform: scaleY(1.02);
2883
+ transform: scaleY(1.02);
2884
+ -webkit-transform-origin: 50% 100%;
2885
+ transform-origin: 50% 100%
2886
+ }
2887
+
2888
+ 60% {
2889
+ -webkit-transform: scaleY(.98);
2890
+ transform: scaleY(.98);
2891
+ -webkit-transform-origin: 50% 100%;
2892
+ transform-origin: 50% 100%
2893
+ }
2894
+
2895
+ 80% {
2896
+ -webkit-transform: scaleY(1.01);
2897
+ transform: scaleY(1.01);
2898
+ -webkit-transform-origin: 50% 100%;
2899
+ transform-origin: 50% 100%
2900
+ }
2901
+
2902
+ 99% {
2903
+ -webkit-transform: scaleY(1);
2904
+ transform: scaleY(1);
2905
+ -webkit-transform-origin: 50% 100%;
2906
+ transform-origin: 50% 100%
2907
+ }
2908
+
2909
+ to {
2910
+ -webkit-transform: none;
2911
+ transform: none
2912
+ }
2913
+ }
2914
+
2915
+ .pullDown {
2916
+ -webkit-transform-origin: 50% 0;
2917
+ transform-origin: 50% 0;
2918
+ -webkit-animation-name: pullDown;
2919
+ animation-name: pullDown;
2920
+ -webkit-animation-timing-function: ease-out;
2921
+ animation-timing-function: ease-out
2922
+ }
2923
+
2924
+ @-webkit-keyframes pullDown {
2925
+ 0%,40%,60%,80%,99% {
2926
+ -webkit-animation-timing-function: ease-out;
2927
+ animation-timing-function: ease-out
2928
+ }
2929
+
2930
+ 0% {
2931
+ opacity: 0;
2932
+ -webkit-transform: scaleY(.1);
2933
+ transform: scaleY(.1);
2934
+ -webkit-transform-origin: 50% 0;
2935
+ transform-origin: 50% 0
2936
+ }
2937
+
2938
+ 40% {
2939
+ opacity: 1;
2940
+ -webkit-transform: scaleY(1.02);
2941
+ transform: scaleY(1.02);
2942
+ -webkit-transform-origin: 50% 0;
2943
+ transform-origin: 50% 0
2944
+ }
2945
+
2946
+ 60% {
2947
+ -webkit-transform: scaleY(.98);
2948
+ transform: scaleY(.98);
2949
+ -webkit-transform-origin: 50% 0;
2950
+ transform-origin: 50% 0
2951
+ }
2952
+
2953
+ 80% {
2954
+ -webkit-transform: scaleY(1.01);
2955
+ transform: scaleY(1.01);
2956
+ -webkit-transform-origin: 50% 0;
2957
+ transform-origin: 50% 0
2958
+ }
2959
+
2960
+ 99% {
2961
+ -webkit-transform: scaleY(1);
2962
+ transform: scaleY(1);
2963
+ -webkit-transform-origin: 50% 0;
2964
+ transform-origin: 50% 0
2965
+ }
2966
+
2967
+ to {
2968
+ -webkit-transform: none;
2969
+ transform: none
2970
+ }
2971
+ }
2972
+
2973
+ @keyframes pullDown {
2974
+ 0%,40%,60%,80%,99% {
2975
+ -webkit-animation-timing-function: ease-out;
2976
+ animation-timing-function: ease-out
2977
+ }
2978
+
2979
+ 0% {
2980
+ opacity: 0;
2981
+ -webkit-transform: scaleY(.1);
2982
+ transform: scaleY(.1);
2983
+ -webkit-transform-origin: 50% 0;
2984
+ transform-origin: 50% 0
2985
+ }
2986
+
2987
+ 40% {
2988
+ opacity: 1;
2989
+ -webkit-transform: scaleY(1.02);
2990
+ transform: scaleY(1.02);
2991
+ -webkit-transform-origin: 50% 0;
2992
+ transform-origin: 50% 0
2993
+ }
2994
+
2995
+ 60% {
2996
+ -webkit-transform: scaleY(.98);
2997
+ transform: scaleY(.98);
2998
+ -webkit-transform-origin: 50% 0;
2999
+ transform-origin: 50% 0
3000
+ }
3001
+
3002
+ 80% {
3003
+ -webkit-transform: scaleY(1.01);
3004
+ transform: scaleY(1.01);
3005
+ -webkit-transform-origin: 50% 0;
3006
+ transform-origin: 50% 0
3007
+ }
3008
+
3009
+ 99% {
3010
+ -webkit-transform: scaleY(1);
3011
+ transform: scaleY(1);
3012
+ -webkit-transform-origin: 50% 0;
3013
+ transform-origin: 50% 0
3014
+ }
3015
+
3016
+ to {
3017
+ -webkit-transform: none;
3018
+ transform: none
3019
+ }
3020
+ }
3021
+ :deep(.vue-transition-group) {
3022
+ display: block;
3023
+ position: relative;
3024
+ width: 100%;
3025
+ height: 100%;
3026
+ }
3027
+ .transition-container {
3028
+ display: block;
3029
+ position: relative;
3030
+ width: 100%;
3031
+ height: 100%;
3032
+ }
3033
+ /* 确保循环时的过渡效果平滑 */
3034
+ .pages-wrapper {
3035
+ position: relative;
3036
+ width: 100%;
3037
+ height: 100%;
3038
+ overflow: hidden;
3039
+ }
3040
+
3041
+ .page-container {
3042
+ position: absolute;
3043
+ width: 100%;
3044
+ height: 100%;
3045
+ background-size: cover;
3046
+ background-position: center;
3047
+ will-change: transform;
3048
+ }
3049
+
3050
+ .ele-form {
3051
+ position: absolute;
3052
+ user-select: none;
3053
+ }
3054
+
3055
+ .f-single {
3056
+ cursor: pointer;
3057
+ }
3058
+
3059
+ .ani-wrap {
3060
+ position: relative;
3061
+ }
3062
+
3063
+ .fs-tit {
3064
+ display: flex;
3065
+ padding: 0 5px;
3066
+ height: 40px;
3067
+ align-items: center;
3068
+ white-space: nowrap;
3069
+ overflow: hidden;
3070
+ text-overflow: ellipsis;
3071
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
3072
+ }
3073
+
3074
+ .require {
3075
+ padding: 0 5px 0 0;
3076
+ color: red;
3077
+ vertical-align: middle;
3078
+ }
3079
+
3080
+ .f-single ul {
3081
+ padding: 15px;
3082
+ margin: 0;
3083
+ list-style: none;
3084
+ }
3085
+
3086
+ .f-single ul li {
3087
+ display: flex;
3088
+ align-items: center;
3089
+ margin-top: 12px;
3090
+ font-size: 0;
3091
+ }
3092
+
3093
+ .f-single ul li:first-child {
3094
+ margin-top: 0;
3095
+ }
3096
+
3097
+ .fs-circle {
3098
+ display: inline-block;
3099
+ width: 16px;
3100
+ height: 16px;
3101
+ border-radius: 50%;
3102
+ position: relative;
3103
+ transition: all 0.2s;
3104
+ }
3105
+
3106
+ .fs-circle.selected {
3107
+ background-color: #2687f1;
3108
+ border-color: #2687f1 !important;
3109
+ }
3110
+
3111
+ .fs-circle.selected::after {
3112
+ content: "";
3113
+ position: absolute;
3114
+ top: 3px;
3115
+ left: 3px;
3116
+ width: 8px;
3117
+ height: 8px;
3118
+ border-radius: 50%;
3119
+ background-color: white;
3120
+ }
3121
+
3122
+ .fs-txt {
3123
+ display: inline-block;
3124
+ width: calc(100% - 16px);
3125
+ padding-left: 8px;
3126
+ vertical-align: top;
3127
+ word-break: break-all;
3128
+ font-size: 14px;
3129
+ line-height: 1.2;
3130
+ }
3131
+
3132
+ .has-error .fs-tit {
3133
+ border-bottom-color: #ff4d4f;
3134
+ }
3135
+
3136
+ /* 错误提示样式 */
3137
+ .error-tip {
3138
+ position: fixed;
3139
+ left: 0;
3140
+ top: 0;
3141
+ width: 100%;
3142
+ height: 100%;
3143
+ z-index: 1000;
3144
+ }
3145
+
3146
+ .form-submit {
3147
+ cursor: pointer;
3148
+ transition: all 0.2s;
3149
+ outline: none;
3150
+ border: none;
3151
+ }
3152
+
3153
+ .form-submit:hover {
3154
+ opacity: 0.9;
3155
+ transform: translateY(-1px);
3156
+ }
3157
+
3158
+ .form-submit:active {
3159
+ opacity: 0.8;
3160
+ transform: translateY(0);
3161
+ }
3162
+
3163
+ .form-submit:disabled {
3164
+ opacity: 0.6;
3165
+ cursor: not-allowed;
3166
+ transform: none !important;
3167
+ }
3168
+
3169
+ /* 统一错误提示样式 */
3170
+ .tip-cover {
3171
+ position: fixed;
3172
+ left: 0;
3173
+ top: 0;
3174
+ width: 100%;
3175
+ height: 100%;
3176
+ display: flex;
3177
+ align-items: center;
3178
+ justify-content: center;
3179
+ z-index: 999;
3180
+ background-color: rgba(0,0,0,.7);
3181
+ }
3182
+
3183
+ .tip {
3184
+ width: 80%;
3185
+ max-width: 250px;
3186
+ padding: 10px;
3187
+ border-radius: 5px;
3188
+ background-color: #fff;
3189
+ }
3190
+
3191
+ .tip-btn {
3192
+ display: block;
3193
+ margin: 25px auto;
3194
+ width: 120px;
3195
+ height: 30px;
3196
+ color: #fff;
3197
+ border-radius: 4px;
3198
+ text-align: center;
3199
+ font-size: 14px;
3200
+ line-height: 30px;
3201
+ background: #ed5566;
3202
+ cursor: pointer;
3203
+ }
3204
+
3205
+ .tip-content {
3206
+ font-size: 14px;
3207
+ padding-top: 30px;
3208
+ text-align: center;
3209
+ }
3210
+
3211
+ .form-input {
3212
+ position: absolute;
3213
+ }
3214
+
3215
+ .input-wrapper {
3216
+ display: flex;
3217
+ align-items: center;
3218
+ width: 100%;
3219
+ height: 100%;
3220
+ padding: 0 10px;
3221
+ box-sizing: border-box;
3222
+ position: relative;
3223
+ transition: border-color 0.3s;
3224
+ }
3225
+
3226
+ .required-marker {
3227
+ font-size: 12px;
3228
+ padding: 0 5px 0 0;
3229
+ color: red;
3230
+ vertical-align: middle;
3231
+ }
3232
+
3233
+ input {
3234
+ flex: 1;
3235
+ border: none;
3236
+ outline: none;
3237
+ background: transparent;
3238
+ height: 100%;
3239
+ padding: 0;
3240
+ margin: 0;
3241
+ }
3242
+ /*
3243
+ input::placeholder {
3244
+ color: #ccc;
3245
+ opacity: 1;
3246
+ } */
3247
+
3248
+ .dynamic-placeholder-input::placeholder {
3249
+ color: var(--placeholder-color, #999);
3250
+ opacity: 1;
3251
+ }
3252
+ .dynamic-placeholder-input::-webkit-input-placeholder {
3253
+ color: var(--placeholder-color, #999);
3254
+ }
3255
+ .dynamic-placeholder-input::-moz-placeholder {
3256
+ color: var(--placeholder-color, #999);
3257
+ opacity: 1;
3258
+ }
3259
+ .dynamic-placeholder-input:-ms-input-placeholder {
3260
+ color: var(--placeholder-color, #999);
3261
+ }
3262
+
3263
+ /* 设计稿尺寸(如375px下20px的按钮) */
3264
+ .btn {
3265
+ width: 20px; /* 直接写设计稿px */
3266
+ height: 10px;
3267
+ font-size: 14px;
3227
3268
  }
3228
-
3229
3269
 
3230
3270
  .ele-form {
3231
3271
  position: absolute;
3232
3272
  user-select: none;
3233
3273
  }
3234
3274
 
3235
- .f-single {
3275
+ .f-select {
3236
3276
  cursor: pointer;
3237
3277
  }
3238
3278
 
@@ -3241,14 +3281,12 @@ i {
3241
3281
  }
3242
3282
 
3243
3283
  .fs-tit {
3284
+ position: relative;
3244
3285
  display: flex;
3245
3286
  padding: 0 5px;
3246
- height: 40px;
3287
+ height: 35px;
3288
+ line-height: 35px;
3247
3289
  align-items: center;
3248
- white-space: nowrap;
3249
- overflow: hidden;
3250
- text-overflow: ellipsis;
3251
- border-bottom: 1px solid rgba(153, 153, 153, 1);
3252
3290
  }
3253
3291
 
3254
3292
  .require {
@@ -3257,63 +3295,84 @@ i {
3257
3295
  vertical-align: middle;
3258
3296
  }
3259
3297
 
3260
- .f-single ul {
3261
- padding: 15px;
3262
- margin: 0;
3263
- list-style: none;
3298
+ .fs-cont {
3299
+ padding-right: 15px;
3300
+ white-space: nowrap;
3301
+ overflow: hidden;
3302
+ text-overflow: ellipsis;
3303
+ flex-grow: 1;
3264
3304
  }
3265
3305
 
3266
- .f-single ul li {
3267
- display: flex;
3268
- align-items: center;
3269
- margin-top: 12px;
3270
- font-size: 0;
3306
+ .icon-bofang1 {
3307
+ font-size: 12px;
3308
+ transition: transform 0.2s ease;
3271
3309
  }
3272
3310
 
3273
- .f-single ul li:first-child {
3274
- margin-top: 0;
3311
+ .rotate-180 {
3312
+ transform: rotate(180deg) !important;
3275
3313
  }
3276
3314
 
3277
- .fs-circle {
3278
- display: inline-block;
3279
- width: 16px;
3280
- height: 16px;
3281
- border-radius: 50%;
3282
- position: relative;
3283
- transition: all 0.2s;
3315
+ .f-real {
3316
+ position: absolute;
3317
+ left: 0;
3318
+ top: 0;
3319
+ width: 100%;
3320
+ height: 100%;
3321
+ z-index: 1;
3322
+ opacity: 0;
3323
+ cursor: pointer;
3284
3324
  }
3285
3325
 
3286
- .fs-circle.selected {
3287
- background-color: #2687f1;
3288
- border-color: #2687f1 !important;
3326
+ .dropdown-menu {
3327
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
3289
3328
  }
3290
3329
 
3291
- .fs-circle.selected::after {
3292
- content: "";
3293
- position: absolute;
3294
- top: 3px;
3295
- left: 3px;
3296
- width: 8px;
3297
- height: 8px;
3298
- border-radius: 50%;
3299
- background-color: white;
3330
+ .dropdown-item {
3331
+ padding: 8px 10px;
3332
+ cursor: pointer;
3333
+ transition: background-color 0.2s;
3300
3334
  }
3301
3335
 
3302
- .fs-txt {
3303
- display: inline-block;
3304
- width: calc(100% - 16px);
3305
- padding-left: 8px;
3306
- vertical-align: top;
3307
- word-break: break-all;
3336
+ .dropdown-item:hover {
3337
+ background-color: #f5f5f5;
3338
+ }
3339
+
3340
+ .dropdown-item.selected {
3341
+ background-color: #e6f7ff;
3342
+ color: #1890ff;
3343
+ }
3344
+
3345
+ .f-select .fs-tit .icon-bofang1 {
3346
+ position: absolute;
3347
+ right: 10px;
3348
+ font-size: 12px;
3349
+ display: inline-block;
3350
+ transform: rotate(90deg);
3351
+ }
3352
+
3353
+ @font-face {
3354
+ font-family: iconfont;
3355
+ src: url(https://h5static.hunbei.com/preview/static/fonts/iconfont.f1262e4.woff2) format("woff2"),
3356
+ url(https://h5static.hunbei.com/preview/static/fonts/iconfont.788d827.woff) format("woff"),
3357
+ url(https://h5static.hunbei.com/preview/static/fonts/iconfont.9541e59.ttf) format("truetype");
3358
+ }
3359
+
3360
+ .iconfont {
3361
+ font-family: iconfont !important;
3308
3362
  font-size: 14px;
3309
- line-height: 1.2;
3363
+ font-style: normal;
3364
+ -webkit-font-smoothing: antialiased;
3365
+ -moz-osx-font-smoothing: grayscale;
3310
3366
  }
3311
3367
 
3312
- .has-error .fs-tit {
3313
- border-bottom-color: #ff4d4f;
3368
+ .icon-bofang1:before {
3369
+ content: "\E6CF";
3370
+ }
3371
+
3372
+ .has-error {
3373
+ border-color: #ff4d4f !important;
3314
3374
  }
3315
3375
 
3316
- /* 错误提示样式 */
3317
3376
  .error-tip {
3318
3377
  position: fixed;
3319
3378
  left: 0;
@@ -3410,84 +3469,25 @@ i {
3410
3469
  border-bottom-color: #ff4d4f;
3411
3470
  }
3412
3471
 
3413
- .form-submit {
3414
- cursor: pointer;
3415
- transition: all 0.2s;
3416
- outline: none;
3417
- border: none;
3418
- }
3419
-
3420
- .form-submit:hover {
3421
- opacity: 0.9;
3422
- transform: translateY(-1px);
3423
- }
3424
-
3425
- .form-submit:active {
3426
- opacity: 0.8;
3427
- transform: translateY(0);
3428
- }
3429
-
3430
- .form-submit:disabled {
3431
- opacity: 0.6;
3432
- cursor: not-allowed;
3433
- transform: none !important;
3434
- }
3435
-
3436
- /* 统一错误提示样式 */
3437
- .tip-cover {
3438
- position: fixed;
3439
- left: 0;
3440
- top: 0;
3441
- width: 100%;
3442
- height: 100%;
3443
- display: flex;
3444
- align-items: center;
3445
- justify-content: center;
3446
- z-index: 999;
3447
- background-color: rgba(0,0,0,.7);
3448
- }
3449
-
3450
- .tip {
3451
- width: 80%;
3452
- max-width: 250px;
3453
- padding: 10px;
3454
- border-radius: 5px;
3455
- background-color: #fff;
3456
- }
3457
-
3458
- .tip-btn {
3459
- display: block;
3460
- margin: 25px auto;
3461
- width: 120px;
3462
- height: 30px;
3463
- color: #fff;
3464
- border-radius: 4px;
3465
- text-align: center;
3466
- font-size: 14px;
3467
- line-height: 30px;
3468
- background: #ed5566;
3469
- cursor: pointer;
3470
- }
3471
-
3472
- .tip-content {
3473
- font-size: 14px;
3474
- padding-top: 30px;
3475
- text-align: center;
3476
- }
3477
-
3478
- .global.video {
3472
+ .global.tel {
3479
3473
  width: 35px;
3480
3474
  height: 55px;
3481
3475
  border-radius: 50%;
3482
3476
  text-align: center;
3483
- margin-bottom: 5px;
3477
+ margin-bottom: 15px;
3484
3478
  border: 2px solid #fff;
3485
3479
  cursor: pointer;
3486
3480
  }
3487
- .icon-shipin2:before { content: "\E611"; }
3481
+ .icon-dianhua:before { content: "\E60E"; }
3488
3482
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3489
- .global.video > span { font-size: 12px; line-height: 20px; display: block; position: relative; top: -4px;}
3490
-
3483
+ .global.tel > span { font-size: 12px; line-height: 20px; display: block;}
3484
+
3485
+ .form-container {
3486
+ position: relative;
3487
+ width: 100%;
3488
+ height: 100%;
3489
+ }
3490
+
3491
3491
  /* 字体定义 */
3492
3492
  @font-face {
3493
3493
  font-family: iconfont;
@@ -3899,32 +3899,19 @@ i {
3899
3899
  color: #F44336; /* 失败的红色 */
3900
3900
  }
3901
3901
 
3902
-
3903
- .global.receipt {
3904
- width: 35px;
3905
- height: 55px;
3906
- border-radius: 50%;
3907
- text-align: center;
3908
- margin-bottom: 5px;
3909
- border: 2px solid #fff;
3910
- cursor: pointer;
3911
- }
3912
- .icon-liuyan:before { content: "\E636"; }
3913
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3914
- .global.receipt > span { font-size: 12px; line-height: 20px; display: block; }
3915
3902
 
3916
- .global.tel {
3903
+ .global.video {
3917
3904
  width: 35px;
3918
3905
  height: 55px;
3919
3906
  border-radius: 50%;
3920
3907
  text-align: center;
3921
- margin-bottom: 15px;
3908
+ margin-bottom: 5px;
3922
3909
  border: 2px solid #fff;
3923
3910
  cursor: pointer;
3924
3911
  }
3925
- .icon-dianhua:before { content: "\E60E"; }
3912
+ .icon-shipin2:before { content: "\E611"; }
3926
3913
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3927
- .global.tel > span { font-size: 12px; line-height: 20px; display: block;}
3914
+ .global.video > span { font-size: 12px; line-height: 20px; display: block; position: relative; top: -4px;}
3928
3915
 
3929
3916
  .global.map {
3930
3917
  width: 35px;
@@ -3938,7 +3925,20 @@ i {
3938
3925
  .icon-daohang1:before { content: "\E612"; }
3939
3926
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3940
3927
  .global.map > span { font-size: 12px; line-height: 20px; display: block;}
3941
-
3928
+
3929
+ .global.receipt {
3930
+ width: 35px;
3931
+ height: 55px;
3932
+ border-radius: 50%;
3933
+ text-align: center;
3934
+ margin-bottom: 5px;
3935
+ border: 2px solid #fff;
3936
+ cursor: pointer;
3937
+ }
3938
+ .icon-liuyan:before { content: "\E636"; }
3939
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3940
+ .global.receipt > span { font-size: 12px; line-height: 20px; display: block; }
3941
+
3942
3942
  @font-face {
3943
3943
  font-family: iconfont;
3944
3944
  src: url(https://h5static.hunbei.com/preview/static/fonts/iconfont.f1262e4.woff2) format("woff2"),url(https://h5static.hunbei.com/preview/static/fonts/iconfont.788d827.woff) format("woff"),url(https://h5static.hunbei.com/preview/static/fonts/iconfont.9541e59.ttf) format("truetype")