unika-components 1.0.398 → 1.0.400

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,36 +1,4 @@
1
1
 
2
- .ele-shape {
3
- position: absolute;
4
- overflow: hidden;
5
- }
6
-
7
- .ani-wrap {
8
- width: 100%;
9
- height: 100%;
10
- box-sizing: border-box;
11
- }
12
-
13
- .e-shape {
14
- width: 100%;
15
- height: 100%;
16
- }
17
-
18
- .svg-container :deep(svg) {
19
- width: 100%;
20
- height: 100%;
21
- display: block;
22
- }
23
-
24
- .svg-loading,
25
- .svg-error {
26
- display: flex;
27
- align-items: center;
28
- justify-content: center;
29
- width: 100%;
30
- height: 100%;
31
- background: rgba(0,0,0,0.05);
32
- }
33
-
34
2
  .ele-img {
35
3
  position: absolute;
36
4
  overflow: hidden;
@@ -82,6 +50,38 @@
82
50
  }
83
51
  }
84
52
 
53
+ .ele-shape {
54
+ position: absolute;
55
+ overflow: hidden;
56
+ }
57
+
58
+ .ani-wrap {
59
+ width: 100%;
60
+ height: 100%;
61
+ box-sizing: border-box;
62
+ }
63
+
64
+ .e-shape {
65
+ width: 100%;
66
+ height: 100%;
67
+ }
68
+
69
+ .svg-container :deep(svg) {
70
+ width: 100%;
71
+ height: 100%;
72
+ display: block;
73
+ }
74
+
75
+ .svg-loading,
76
+ .svg-error {
77
+ display: flex;
78
+ align-items: center;
79
+ justify-content: center;
80
+ width: 100%;
81
+ height: 100%;
82
+ background: rgba(0,0,0,0.05);
83
+ }
84
+
85
85
  .ele-text {
86
86
  position: relative;
87
87
  }
@@ -197,130 +197,287 @@
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;
201
207
  display: flex;
202
- flex-direction: column;
203
208
  align-items: center;
204
- cursor: pointer;
205
209
  }
206
210
 
207
- .icon-heart {
208
- font-size: 24px;
209
- color: #e74c3c;
211
+ #audio .mrotate {
212
+ animation: mrotate 5s linear infinite;
210
213
  }
211
214
 
212
- .liked {
213
- color: #f00; /* 更改颜色以示已赞 */
215
+ @keyframes mrotate {
216
+ to {
217
+ transform: rotate(1turn);
218
+ }
214
219
  }
215
220
 
216
- .like-count {
217
- margin-top: 4px;
218
- font-size: 16px;
219
- color: #333;
221
+ #audio .audio {
222
+ width: 100%;
223
+ height: 100%;
224
+ display: flex;
225
+ align-items: center;
226
+ justify-content: center;
227
+ color: #fff;
228
+ background: #666;
229
+ border-radius: 50%;
230
+ overflow: hidden;
231
+ cursor: pointer;
232
+ transition: all 0.3s ease;
220
233
  }
221
234
 
222
- .element-ditu .ani-wrap {
235
+ #audio .audio.a-border {
236
+ border: 1px solid #fff;
237
+ }
238
+
239
+ #audio .audio .music-icon {
240
+ display: block;
241
+ width: 60%;
242
+ height: 60%;
243
+ object-fit: contain;
244
+ }
245
+
246
+ #audio .audio .iconfont {
247
+ font-size: 2opx;
248
+ line-height: 1;
249
+ }
250
+ #audio .icon-cancel {
251
+ position: absolute;
223
252
  width: 100%;
224
253
  height: 100%;
225
- overflow: hidden
254
+ border-radius: 50%;
255
+ overflow: hidden;
256
+ padding: 15px 0;
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
+ }
271
+
272
+ .count-down .drag-point {
273
+ cursor: default!important
226
274
  }
227
275
 
228
- .element-ditu .map {
276
+ .count-down .ani-wrap {
229
277
  width: 100%;
230
278
  height: 100%
231
279
  }
232
280
 
233
- .element-ditu .map .el-button {
234
- width: 100%;
235
- height: 100%;
281
+ .count-down .count-text,.count-down .finish-cont {
236
282
  display: -webkit-box;
237
283
  display: -ms-flexbox;
238
284
  display: flex;
285
+ height: 100%;
239
286
  -webkit-box-align: center;
240
287
  -ms-flex-align: center;
241
288
  align-items: center;
242
- padding: 0;
243
289
  -webkit-box-pack: center;
244
290
  -ms-flex-pack: center;
245
- justify-content: center;
246
- background: inherit;
247
- color: inherit;
248
- border: none
291
+ justify-content: center
249
292
  }
250
293
 
251
- .element-ditu .center-map {
252
- width: 100%;
253
- height: 100%;
254
- background: #fff
294
+ .count-down .finish-cont {
295
+ width: 100%
255
296
  }
256
297
 
257
- .element-ditu .mask-map {
258
- position: absolute;
259
- width: 100%;
260
- height: 100%;
261
- top: 0
262
- }
263
- .map-iframe {
264
- width: 100%;
298
+ .count-down .count-flip {
299
+ display: -webkit-box;
300
+ display: -ms-flexbox;
301
+ display: flex;
265
302
  height: 100%;
303
+ -webkit-box-align: center;
304
+ -ms-flex-align: center;
305
+ align-items: center;
306
+ -webkit-box-pack: center;
307
+ -ms-flex-pack: center;
308
+ justify-content: center
266
309
  }
267
310
 
268
- .ele-lottie .ele-lotwrap {
269
- overflow: hidden;
311
+ .count-down .count-flip .numscroll {
312
+ -webkit-animation: numscroll .4s ease-in-out;
313
+ animation: numscroll .4s ease-in-out;
314
+ -webkit-animation-fill-mode: both;
315
+ animation-fill-mode: both
270
316
  }
271
317
 
272
- .ele-effect .effect-wrap {
273
- position: relative;
274
- overflow: hidden;
275
- width: 100%;
276
- height: 100%;
318
+ .count-down .count-flip .numscroll .curr-num {
319
+ -webkit-transition: all .3s ease-in-out;
320
+ transition: all .3s ease-in-out;
321
+ opacity: .6;
322
+ -webkit-transform: scale(.5)!important;
323
+ transform: scale(.5)!important
277
324
  }
278
325
 
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;
288
- }
326
+ @-webkit-keyframes numscroll {
327
+ 0% {
328
+ -webkit-transform: translateZ(0);
329
+ transform: translateZ(0)
330
+ }
289
331
 
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
- }
332
+ to {
333
+ -webkit-transform: translate3d(0,100%,0);
334
+ transform: translate3d(0,100%,0)
335
+ }
299
336
  }
300
337
 
301
- .effect-container {
302
- will-change: transform;
303
- }
338
+ @keyframes numscroll {
339
+ 0% {
340
+ -webkit-transform: translateZ(0);
341
+ transform: translateZ(0)
342
+ }
304
343
 
305
- .particles-wrapper {
306
- position: relative;
307
- width: 100%;
308
- height: 100%;
344
+ to {
345
+ -webkit-transform: translate3d(0,100%,0);
346
+ transform: translate3d(0,100%,0)
347
+ }
309
348
  }
310
349
 
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;
350
+ .count-down .count-flip .c-com {
351
+ min-width: 50px;
352
+ height: auto;
353
+ margin: 6px;
354
+ padding: 5px 0 6px;
355
+ background-color: #111
319
356
  }
320
357
 
321
- @keyframes falling {
322
- 0% {
323
- transform: translateY(0) rotate(0deg);
358
+ .count-down .count-flip .c-com .flex-wrap {
359
+ display: -webkit-box;
360
+ display: -ms-flexbox;
361
+ display: flex;
362
+ position: relative;
363
+ width: 100%;
364
+ height: 100%;
365
+ -webkit-box-align: center;
366
+ -ms-flex-align: center;
367
+ align-items: center
368
+ }
369
+
370
+ .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
371
+ line-height: 27px
372
+ }
373
+
374
+ .count-down .count-flip .c-com .flex-wrap .next-num {
375
+ position: absolute;
376
+ top: -100%
377
+ }
378
+
379
+ .count-down .count-flip .c-com .flex-wrap .curr-num {
380
+ -webkit-transform: scale(1);
381
+ transform: scale(1)
382
+ }
383
+
384
+ .count-down .bottom-center,.count-down .left-bottom,.count-down .left-center,.count-down .left-top,.count-down .right-bottom,.count-down .right-center,.count-down .right-top,.count-down .top-center {
385
+ display: none!important
386
+ }
387
+
388
+ .c-wrap {
389
+ width: 100%;
390
+ height: 100%;
391
+ overflow: hidden;
392
+ font-size: 0
393
+ }
394
+
395
+ .c-wrap.c-day-wrap {
396
+ text-align: center
397
+ }
398
+
399
+ .c-wrap.c-day-wrap .c-num {
400
+ width: auto
401
+ }
402
+
403
+ .c-wrap .c-num {
404
+ display: inline-block;
405
+ width: 50%;
406
+ overflow: hidden;
407
+ font-size: 20px;
408
+ color: #999
409
+ }
410
+
411
+ .c-wrap .c-left .flex-wrap {
412
+ display: -webkit-box;
413
+ display: -ms-flexbox;
414
+ display: flex;
415
+ -webkit-box-pack: end;
416
+ -ms-flex-pack: end;
417
+ justify-content: flex-end
418
+ }
419
+
420
+ .c-wrap .c-text {
421
+ display: -webkit-box;
422
+ display: -ms-flexbox;
423
+ display: flex;
424
+ width: 100%;
425
+ font-size: 12px;
426
+ -webkit-box-pack: center;
427
+ -ms-flex-pack: center;
428
+ justify-content: center;
429
+ -webkit-box-align: center;
430
+ -ms-flex-align: center;
431
+ align-items: center;
432
+ white-space: nowrap
433
+ }
434
+
435
+
436
+ .like-button {
437
+ display: flex;
438
+ flex-direction: column;
439
+ align-items: center;
440
+ cursor: pointer;
441
+ }
442
+
443
+ .icon-heart {
444
+ font-size: 24px;
445
+ color: #e74c3c;
446
+ }
447
+
448
+ .liked {
449
+ color: #f00; /* 更改颜色以示已赞 */
450
+ }
451
+
452
+ .like-count {
453
+ margin-top: 4px;
454
+ font-size: 16px;
455
+ color: #333;
456
+ }
457
+
458
+ .effect-container {
459
+ will-change: transform;
460
+ }
461
+
462
+ .particles-wrapper {
463
+ position: relative;
464
+ width: 100%;
465
+ height: 100%;
466
+ }
467
+
468
+ .particle {
469
+ position: absolute;
470
+ background-repeat: no-repeat;
471
+ background-size: contain;
472
+ animation-name: falling;
473
+ animation-timing-function: linear;
474
+ animation-iteration-count: infinite;
475
+ will-change: transform;
476
+ }
477
+
478
+ @keyframes falling {
479
+ 0% {
480
+ transform: translateY(0) rotate(0deg);
324
481
  opacity: 1;
325
482
  }
326
483
  80% {
@@ -355,41 +512,6 @@
355
512
  animation: snow 5s linear infinite
356
513
  }
357
514
 
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
515
  .call {
394
516
  position: absolute;
395
517
  cursor: pointer;
@@ -431,1982 +553,221 @@
431
553
  background-size: contain;
432
554
  }
433
555
 
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;
556
+ .element-ditu .ani-wrap {
486
557
  width: 100%;
487
558
  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
559
+ overflow: hidden
512
560
  }
513
561
 
514
- .count-down .ani-wrap {
562
+ .element-ditu .map {
515
563
  width: 100%;
516
564
  height: 100%
517
565
  }
518
566
 
519
- .count-down .count-text,.count-down .finish-cont {
567
+ .element-ditu .map .el-button {
568
+ width: 100%;
569
+ height: 100%;
520
570
  display: -webkit-box;
521
571
  display: -ms-flexbox;
522
572
  display: flex;
523
- height: 100%;
524
573
  -webkit-box-align: center;
525
574
  -ms-flex-align: center;
526
575
  align-items: center;
576
+ padding: 0;
527
577
  -webkit-box-pack: center;
528
578
  -ms-flex-pack: center;
529
- justify-content: center
579
+ justify-content: center;
580
+ background: inherit;
581
+ color: inherit;
582
+ border: none
530
583
  }
531
584
 
532
- .count-down .finish-cont {
533
- width: 100%
585
+ .element-ditu .center-map {
586
+ width: 100%;
587
+ height: 100%;
588
+ background: #fff
534
589
  }
535
590
 
536
- .count-down .count-flip {
537
- display: -webkit-box;
538
- display: -ms-flexbox;
539
- display: flex;
591
+ .element-ditu .mask-map {
592
+ position: absolute;
593
+ width: 100%;
540
594
  height: 100%;
541
- -webkit-box-align: center;
542
- -ms-flex-align: center;
543
- align-items: center;
544
- -webkit-box-pack: center;
545
- -ms-flex-pack: center;
546
- justify-content: center
595
+ top: 0
547
596
  }
548
-
549
- .count-down .count-flip .numscroll {
550
- -webkit-animation: numscroll .4s ease-in-out;
551
- animation: numscroll .4s ease-in-out;
552
- -webkit-animation-fill-mode: both;
553
- animation-fill-mode: both
597
+ .map-iframe {
598
+ width: 100%;
599
+ height: 100%;
554
600
  }
555
601
 
556
- .count-down .count-flip .numscroll .curr-num {
557
- -webkit-transition: all .3s ease-in-out;
558
- transition: all .3s ease-in-out;
559
- opacity: .6;
560
- -webkit-transform: scale(.5)!important;
561
- transform: scale(.5)!important
562
- }
602
+ .uni-build-up-component {
603
+ }
563
604
 
564
- @-webkit-keyframes numscroll {
565
- 0% {
566
- -webkit-transform: translateZ(0);
567
- transform: translateZ(0)
568
- }
605
+ .ant-input-number {
606
+ box-sizing: border-box;
607
+ margin: 0;
608
+ padding: 0;
609
+ color: rgba(0, 0, 0, 0.88);
610
+ font-size: 14px;
611
+ line-height: 1.5714285714285714;
612
+ list-style: none;
613
+ 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';
614
+ position: relative;
615
+ display: inline-block;
616
+ width: 100%;
617
+ min-width: 0;
618
+ background-color: #ffffff;
619
+ background-image: none;
620
+ border-width: 1px;
621
+ border-style: solid;
622
+ border-color: #d9d9d9;
623
+ border-radius: 6px;
624
+ transition: all 0.2s;
625
+ border: 1px solid #d9d9d9;
626
+ }
627
+ .ant-form-item {
628
+ box-sizing: border-box;
629
+ margin: 0;
630
+ padding: 0;
631
+ color: rgba(0, 0, 0, 0.88);
632
+ font-size: 14px;
633
+ line-height: 1.5714285714285714;
634
+ list-style: none;
635
+ 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';
636
+ margin-bottom: 0px;
637
+ vertical-align: top;
638
+ }
569
639
 
570
- to {
571
- -webkit-transform: translate3d(0,100%,0);
572
- transform: translate3d(0,100%,0)
573
- }
640
+ .ele-lottie .ele-lotwrap {
641
+ overflow: hidden;
574
642
  }
575
643
 
576
- @keyframes numscroll {
577
- 0% {
578
- -webkit-transform: translateZ(0);
579
- transform: translateZ(0)
580
- }
644
+ .ele-effect .effect-wrap {
645
+ position: relative;
646
+ overflow: hidden;
647
+ width: 100%;
648
+ height: 100%;
649
+ }
581
650
 
582
- to {
583
- -webkit-transform: translate3d(0,100%,0);
584
- transform: translate3d(0,100%,0)
585
- }
651
+ .ele-effect .e-small {
652
+ position: absolute;
653
+ width: 24px;
654
+ height: 24px;
655
+ background-image: url(http://cdn.h5ds.com/static/images/snow.png);
656
+ background-size: cover;
657
+ background-repeat: no-repeat;
658
+ transform-origin: center;
659
+ animation: snow 5s linear infinite;
586
660
  }
587
661
 
588
- .count-down .count-flip .c-com {
589
- min-width: 50px;
590
- height: auto;
591
- margin: 6px;
592
- padding: 5px 0 6px;
593
- background-color: #111
662
+ @keyframes snow {
663
+ 0% {
664
+ transform: translateY(0) rotate(0deg);
665
+ opacity: 1;
666
+ }
667
+ 100% {
668
+ transform: translateY(100vh) rotate(360deg);
669
+ opacity: 0;
670
+ }
594
671
  }
595
672
 
596
- .count-down .count-flip .c-com .flex-wrap {
597
- display: -webkit-box;
598
- display: -ms-flexbox;
599
- display: flex;
600
- position: relative;
601
- width: 100%;
602
- height: 100%;
603
- -webkit-box-align: center;
604
- -ms-flex-align: center;
605
- align-items: center
673
+ /* Iconfont definition */
674
+ @font-face {
675
+ font-family: iconfont;
676
+ src: url(https://h5static.hunbei.com/preview/static/fonts/iconfont.f1262e4.woff2) format("woff2"),
677
+ url(https://h5static.hunbei.com/preview/static/fonts/iconfont.788d827.woff) format("woff"),
678
+ url(https://h5static.hunbei.com/preview/static/fonts/iconfont.9541e59.ttf) format("truetype");
606
679
  }
607
680
 
608
- .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
609
- line-height: 27px
681
+ .iconfont {
682
+ font-family: iconfont !important;
683
+ font-size: 16px;
684
+ font-style: normal;
685
+ -webkit-font-smoothing: antialiased;
686
+ -moz-osx-font-smoothing: grayscale;
610
687
  }
611
688
 
612
- .count-down .count-flip .c-com .flex-wrap .next-num {
613
- position: absolute;
614
- top: -100%
689
+ .icon-danmuliebiao1:before {
690
+ content: "\E68A";
615
691
  }
616
692
 
617
- .count-down .count-flip .c-com .flex-wrap .curr-num {
618
- -webkit-transform: scale(1);
619
- transform: scale(1)
693
+ .icon-cuowu2:before {
694
+ content: "\E65E";
620
695
  }
621
696
 
622
- .count-down .bottom-center,.count-down .left-bottom,.count-down .left-center,.count-down .left-top,.count-down .right-bottom,.count-down .right-center,.count-down .right-top,.count-down .top-center {
623
- display: none!important
697
+ i {
698
+ font-style: normal;
624
699
  }
625
700
 
626
- .c-wrap {
701
+ .v-modal {
702
+ position: fixed;
703
+ left: 0;
704
+ top: 0;
627
705
  width: 100%;
628
706
  height: 100%;
629
- overflow: hidden;
630
- font-size: 0
707
+ opacity: .5;
708
+ background: #000;
709
+ }
710
+ /* 底部工具栏样式 */
711
+ #toolbarNew {
712
+ position: fixed;
713
+ left: 0;
714
+ bottom: 0;
715
+ width: 100%;
716
+ padding: 12px 0;
717
+ background: url('https://unika-static-dev.oss-ap-southeast-7.aliyuncs.com/inputBg.png') 0 0 repeat-x;
718
+ z-index: 100;
631
719
  }
632
720
 
633
- .c-wrap.c-day-wrap {
634
- text-align: center
721
+ .toolbar {
722
+ display: flex;
723
+ align-items: center;
724
+ padding: 0 10px;
635
725
  }
636
726
 
637
- .c-wrap.c-day-wrap .c-num {
638
- width: auto
727
+ .bar-left {
728
+ position: relative;
729
+ flex: 1;
639
730
  }
640
731
 
641
- .c-wrap .c-num {
642
- display: inline-block;
643
- width: 50%;
644
- overflow: hidden;
645
- font-size: 20px;
646
- color: #999
732
+ .bar-mess {
733
+ width: 100%;
734
+ height: 36px;
735
+ line-height: 36px;
736
+ font-size: 14px;
737
+ color: #ccc;
738
+ padding: 0 8px;
739
+ border-radius: 18px;
740
+ border: none;
741
+ -webkit-appearance: none;
742
+ background-color: rgba(0, 0, 0, 0.28);
647
743
  }
648
744
 
649
- .c-wrap .c-left .flex-wrap {
650
- display: -webkit-box;
651
- display: -ms-flexbox;
652
- display: flex;
653
- -webkit-box-pack: end;
654
- -ms-flex-pack: end;
655
- justify-content: flex-end
745
+ .bar-mess::placeholder {
746
+ color: rgba(255, 255, 255, 0.7);
656
747
  }
657
748
 
658
- .c-wrap .c-text {
659
- display: -webkit-box;
660
- display: -ms-flexbox;
661
- display: flex;
662
- width: 100%;
663
- font-size: 12px;
664
- -webkit-box-pack: center;
665
- -ms-flex-pack: center;
666
- justify-content: center;
667
- -webkit-box-align: center;
668
- -ms-flex-align: center;
669
- align-items: center;
670
- white-space: nowrap
749
+ .bar-left .iconfont {
750
+ position: absolute;
751
+ right: 10px;
752
+ top: 50%;
753
+ transform: translateY(-50%);
754
+ color: #f2f2f2;
755
+ font-size: 16px;
756
+ cursor: pointer;
757
+ z-index: 2;
758
+ padding: 5px;
671
759
  }
672
760
 
673
-
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
- }
791
-
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);
2303
- }
2304
-
2305
- /* 设计稿尺寸(如375px下20px的按钮) */
2306
- .btn {
2307
- width: 20px; /* 直接写设计稿px */
2308
- height: 10px;
2309
- font-size: 14px;
2310
- }
2311
-
2312
- /* Iconfont definition */
2313
- @font-face {
2314
- font-family: iconfont;
2315
- src: url(https://h5static.hunbei.com/preview/static/fonts/iconfont.f1262e4.woff2) format("woff2"),
2316
- url(https://h5static.hunbei.com/preview/static/fonts/iconfont.788d827.woff) format("woff"),
2317
- url(https://h5static.hunbei.com/preview/static/fonts/iconfont.9541e59.ttf) format("truetype");
2318
- }
2319
-
2320
- .iconfont {
2321
- font-family: iconfont !important;
2322
- font-size: 16px;
2323
- font-style: normal;
2324
- -webkit-font-smoothing: antialiased;
2325
- -moz-osx-font-smoothing: grayscale;
2326
- }
2327
-
2328
- .icon-danmuliebiao1:before {
2329
- content: "\E68A";
2330
- }
2331
-
2332
- .icon-cuowu2:before {
2333
- content: "\E65E";
2334
- }
2335
-
2336
- i {
2337
- font-style: normal;
2338
- }
2339
-
2340
- .v-modal {
2341
- position: fixed;
2342
- left: 0;
2343
- top: 0;
2344
- width: 100%;
2345
- height: 100%;
2346
- opacity: .5;
2347
- background: #000;
2348
- }
2349
- /* 底部工具栏样式 */
2350
- #toolbarNew {
2351
- position: fixed;
2352
- left: 0;
2353
- bottom: 0;
2354
- width: 100%;
2355
- padding: 12px 0;
2356
- background: url('https://unika-static-dev.oss-ap-southeast-7.aliyuncs.com/inputBg.png') 0 0 repeat-x;
2357
- z-index: 100;
2358
- }
2359
-
2360
- .toolbar {
2361
- display: flex;
2362
- align-items: center;
2363
- padding: 0 10px;
2364
- }
2365
-
2366
- .bar-left {
2367
- position: relative;
2368
- flex: 1;
2369
- }
2370
-
2371
- .bar-mess {
2372
- width: 100%;
2373
- height: 36px;
2374
- line-height: 36px;
2375
- font-size: 14px;
2376
- color: #ccc;
2377
- padding: 0 8px;
2378
- border-radius: 18px;
2379
- border: none;
2380
- -webkit-appearance: none;
2381
- background-color: rgba(0, 0, 0, 0.28);
2382
- }
2383
-
2384
- .bar-mess::placeholder {
2385
- color: rgba(255, 255, 255, 0.7);
2386
- }
2387
-
2388
- .bar-left .iconfont {
2389
- position: absolute;
2390
- right: 10px;
2391
- top: 50%;
2392
- transform: translateY(-50%);
2393
- color: #f2f2f2;
2394
- font-size: 16px;
2395
- cursor: pointer;
2396
- z-index: 2;
2397
- padding: 5px;
2398
- }
2399
-
2400
- /* 关闭弹幕按钮样式 */
2401
- .toolbar-close {
2402
- position: absolute;
2403
- left: 10px;
2404
- transform: translateY(-50%);
2405
- display: flex;
2406
- align-items: center;
2407
- cursor: pointer;
2408
- z-index: 2;
2409
- }
761
+ /* 关闭弹幕按钮样式 */
762
+ .toolbar-close {
763
+ position: absolute;
764
+ left: 10px;
765
+ transform: translateY(-50%);
766
+ display: flex;
767
+ align-items: center;
768
+ cursor: pointer;
769
+ z-index: 2;
770
+ }
2410
771
 
2411
772
  .toolbar-close img {
2412
773
  display: block;
@@ -3226,253 +1587,1892 @@ i {
3226
1587
  100% { transform: rotate(360deg); }
3227
1588
  }
3228
1589
 
1590
+
1591
+ /* 设计稿尺寸(如375px下20px的按钮) */
1592
+ .btn {
1593
+ width: 20px; /* 直接写设计稿px */
1594
+ height: 10px;
1595
+ font-size: 14px;
1596
+ }
1597
+
1598
+ .uni-svg-component {
1599
+ display: inline-block;
1600
+ }
1601
+
1602
+ .ele-form {
1603
+ position: absolute;
1604
+ user-select: none;
1605
+ }
1606
+
1607
+ .f-select {
1608
+ cursor: pointer;
1609
+ }
1610
+
1611
+ .ani-wrap {
1612
+ position: relative;
1613
+ }
1614
+
1615
+ .fs-tit {
1616
+ position: relative;
1617
+ display: flex;
1618
+ padding: 0 5px;
1619
+ height: 35px;
1620
+ line-height: 35px;
1621
+ align-items: center;
1622
+ }
1623
+
1624
+ .require {
1625
+ padding: 0 5px 0 0;
1626
+ color: red;
1627
+ vertical-align: middle;
1628
+ }
1629
+
1630
+ .fs-cont {
1631
+ padding-right: 15px;
1632
+ white-space: nowrap;
1633
+ overflow: hidden;
1634
+ text-overflow: ellipsis;
1635
+ flex-grow: 1;
1636
+ }
1637
+
1638
+ .icon-bofang1 {
1639
+ font-size: 12px;
1640
+ transition: transform 0.2s ease;
1641
+ }
1642
+
1643
+ .rotate-180 {
1644
+ transform: rotate(180deg) !important;
1645
+ }
1646
+
1647
+ .f-real {
1648
+ position: absolute;
1649
+ left: 0;
1650
+ top: 0;
1651
+ width: 100%;
1652
+ height: 100%;
1653
+ z-index: 1;
1654
+ opacity: 0;
1655
+ cursor: pointer;
1656
+ }
1657
+
1658
+ .dropdown-menu {
1659
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
1660
+ }
1661
+
1662
+ .dropdown-item {
1663
+ padding: 8px 10px;
1664
+ cursor: pointer;
1665
+ transition: background-color 0.2s;
1666
+ }
1667
+
1668
+ .dropdown-item:hover {
1669
+ background-color: #f5f5f5;
1670
+ }
1671
+
1672
+ .dropdown-item.selected {
1673
+ background-color: #e6f7ff;
1674
+ color: #1890ff;
1675
+ }
1676
+
1677
+ .f-select .fs-tit .icon-bofang1 {
1678
+ position: absolute;
1679
+ right: 10px;
1680
+ font-size: 12px;
1681
+ display: inline-block;
1682
+ transform: rotate(90deg);
1683
+ }
1684
+
1685
+ @font-face {
1686
+ font-family: iconfont;
1687
+ src: url(https://h5static.hunbei.com/preview/static/fonts/iconfont.f1262e4.woff2) format("woff2"),
1688
+ url(https://h5static.hunbei.com/preview/static/fonts/iconfont.788d827.woff) format("woff"),
1689
+ url(https://h5static.hunbei.com/preview/static/fonts/iconfont.9541e59.ttf) format("truetype");
1690
+ }
1691
+
1692
+ .iconfont {
1693
+ font-family: iconfont !important;
1694
+ font-size: 14px;
1695
+ font-style: normal;
1696
+ -webkit-font-smoothing: antialiased;
1697
+ -moz-osx-font-smoothing: grayscale;
1698
+ }
1699
+
1700
+ .icon-bofang1:before {
1701
+ content: "\E6CF";
1702
+ }
1703
+
1704
+ .has-error {
1705
+ border-color: #ff4d4f !important;
1706
+ }
1707
+
1708
+ .error-tip {
1709
+ position: fixed;
1710
+ left: 0;
1711
+ top: 0;
1712
+ width: 100%;
1713
+ height: 100%;
1714
+ z-index: 1000;
1715
+ }
1716
+
1717
+ .ele-form {
1718
+ position: absolute;
1719
+ user-select: none;
1720
+ }
1721
+
1722
+ .f-single {
1723
+ cursor: pointer;
1724
+ }
1725
+
1726
+ .ani-wrap {
1727
+ position: relative;
1728
+ }
1729
+
1730
+ .fs-tit {
1731
+ display: flex;
1732
+ padding: 0 5px;
1733
+ height: 40px;
1734
+ align-items: center;
1735
+ white-space: nowrap;
1736
+ overflow: hidden;
1737
+ text-overflow: ellipsis;
1738
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
1739
+ }
1740
+
1741
+ .require {
1742
+ padding: 0 5px 0 0;
1743
+ color: red;
1744
+ vertical-align: middle;
1745
+ }
1746
+
1747
+ .f-single ul {
1748
+ padding: 15px;
1749
+ margin: 0;
1750
+ list-style: none;
1751
+ }
1752
+
1753
+ .f-single ul li {
1754
+ display: flex;
1755
+ align-items: center;
1756
+ margin-top: 12px;
1757
+ font-size: 0;
1758
+ }
1759
+
1760
+ .f-single ul li:first-child {
1761
+ margin-top: 0;
1762
+ }
1763
+
1764
+ .fs-circle {
1765
+ display: inline-block;
1766
+ width: 16px;
1767
+ height: 16px;
1768
+ border-radius: 50%;
1769
+ position: relative;
1770
+ transition: all 0.2s;
1771
+ }
1772
+
1773
+ .fs-circle.selected {
1774
+ background-color: #2687f1;
1775
+ border-color: #2687f1 !important;
1776
+ }
1777
+
1778
+ .fs-circle.selected::after {
1779
+ content: "";
1780
+ position: absolute;
1781
+ top: 3px;
1782
+ left: 3px;
1783
+ width: 8px;
1784
+ height: 8px;
1785
+ border-radius: 50%;
1786
+ background-color: white;
1787
+ }
1788
+
1789
+ .fs-txt {
1790
+ display: inline-block;
1791
+ width: calc(100% - 16px);
1792
+ padding-left: 8px;
1793
+ vertical-align: top;
1794
+ word-break: break-all;
1795
+ font-size: 14px;
1796
+ line-height: 1.2;
1797
+ }
1798
+
1799
+ .has-error .fs-tit {
1800
+ border-bottom-color: #ff4d4f;
1801
+ }
1802
+
1803
+ /* 错误提示样式 */
1804
+ .error-tip {
1805
+ position: fixed;
1806
+ left: 0;
1807
+ top: 0;
1808
+ width: 100%;
1809
+ height: 100%;
1810
+ z-index: 1000;
1811
+ }
1812
+
1813
+ .form-input {
1814
+ position: absolute;
1815
+ }
1816
+
1817
+ .input-wrapper {
1818
+ display: flex;
1819
+ align-items: center;
1820
+ width: 100%;
1821
+ height: 100%;
1822
+ padding: 0 10px;
1823
+ box-sizing: border-box;
1824
+ position: relative;
1825
+ transition: border-color 0.3s;
1826
+ }
1827
+
1828
+ .required-marker {
1829
+ font-size: 12px;
1830
+ padding: 0 5px 0 0;
1831
+ color: red;
1832
+ vertical-align: middle;
1833
+ }
1834
+
1835
+ input {
1836
+ flex: 1;
1837
+ border: none;
1838
+ outline: none;
1839
+ background: transparent;
1840
+ height: 100%;
1841
+ padding: 0;
1842
+ margin: 0;
1843
+ }
1844
+ /*
1845
+ input::placeholder {
1846
+ color: #ccc;
1847
+ opacity: 1;
1848
+ } */
1849
+
1850
+ .dynamic-placeholder-input::placeholder {
1851
+ color: var(--placeholder-color, #999);
1852
+ opacity: 1;
1853
+ }
1854
+ .dynamic-placeholder-input::-webkit-input-placeholder {
1855
+ color: var(--placeholder-color, #999);
1856
+ }
1857
+ .dynamic-placeholder-input::-moz-placeholder {
1858
+ color: var(--placeholder-color, #999);
1859
+ opacity: 1;
1860
+ }
1861
+ .dynamic-placeholder-input:-ms-input-placeholder {
1862
+ color: var(--placeholder-color, #999);
1863
+ }
1864
+
1865
+ .form-submit {
1866
+ cursor: pointer;
1867
+ transition: all 0.2s;
1868
+ outline: none;
1869
+ border: none;
1870
+ }
1871
+
1872
+ .form-submit:hover {
1873
+ opacity: 0.9;
1874
+ transform: translateY(-1px);
1875
+ }
1876
+
1877
+ .form-submit:active {
1878
+ opacity: 0.8;
1879
+ transform: translateY(0);
1880
+ }
1881
+
1882
+ .form-submit:disabled {
1883
+ opacity: 0.6;
1884
+ cursor: not-allowed;
1885
+ transform: none !important;
1886
+ }
1887
+
1888
+ /* 统一错误提示样式 */
1889
+ .tip-cover {
1890
+ position: fixed;
1891
+ left: 0;
1892
+ top: 0;
1893
+ width: 100%;
1894
+ height: 100%;
1895
+ display: flex;
1896
+ align-items: center;
1897
+ justify-content: center;
1898
+ z-index: 999;
1899
+ background-color: rgba(0,0,0,.7);
1900
+ }
1901
+
1902
+ .tip {
1903
+ width: 80%;
1904
+ max-width: 250px;
1905
+ padding: 10px;
1906
+ border-radius: 5px;
1907
+ background-color: #fff;
1908
+ }
1909
+
1910
+ .tip-btn {
1911
+ display: block;
1912
+ margin: 25px auto;
1913
+ width: 120px;
1914
+ height: 30px;
1915
+ color: #fff;
1916
+ border-radius: 4px;
1917
+ text-align: center;
1918
+ font-size: 14px;
1919
+ line-height: 30px;
1920
+ background: #ed5566;
1921
+ cursor: pointer;
1922
+ }
1923
+
1924
+ .tip-content {
1925
+ font-size: 14px;
1926
+ padding-top: 30px;
1927
+ text-align: center;
1928
+ }
1929
+
1930
+ .ele-form {
1931
+ position: absolute;
1932
+ user-select: none;
1933
+ }
1934
+
1935
+ .f-multiple {
1936
+ cursor: pointer;
1937
+ }
1938
+
1939
+ .ani-wrap {
1940
+ position: relative;
1941
+ }
1942
+
1943
+ .fs-tit {
1944
+ display: flex;
1945
+ padding: 0 5px;
1946
+ height: 40px;
1947
+ align-items: center;
1948
+ white-space: nowrap;
1949
+ overflow: hidden;
1950
+ text-overflow: ellipsis;
1951
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
1952
+ }
1953
+
1954
+ .require {
1955
+ padding: 0 5px 0 0;
1956
+ color: red;
1957
+ vertical-align: middle;
1958
+ }
1959
+
1960
+ .f-multiple ul {
1961
+ padding: 15px;
1962
+ margin: 0;
1963
+ list-style: none;
1964
+ }
1965
+
1966
+ .f-multiple ul li {
1967
+ margin-top: 12px;
1968
+ font-size: 0;
1969
+ display: flex;
1970
+ align-items: center;
1971
+ cursor: pointer;
1972
+ }
1973
+
1974
+ .f-multiple ul li:first-child {
1975
+ margin-top: 0;
1976
+ }
1977
+
1978
+ .fs-circle {
1979
+ display: inline-block;
1980
+ width: 16px;
1981
+ height: 16px;
1982
+ border-radius: 50%;
1983
+ position: relative;
1984
+ transition: all 0.2s;
1985
+ }
1986
+
1987
+ .fs-circle.selected {
1988
+ background-color: #2687f1;
1989
+ border-color: #2687f1 !important;
1990
+ }
1991
+
1992
+ .fs-circle.selected::after {
1993
+ content: "";
1994
+ position: absolute;
1995
+ top: 3px;
1996
+ left: 3px;
1997
+ width: 8px;
1998
+ height: 8px;
1999
+ border-radius: 50%;
2000
+ background-color: white;
2001
+ }
2002
+
2003
+ .fs-txt {
2004
+ display: inline-block;
2005
+ width: calc(100% - 16px);
2006
+ padding-left: 8px;
2007
+ vertical-align: top;
2008
+ word-break: break-all;
2009
+ font-size: 14px;
2010
+ line-height: 1.2;
2011
+ }
2012
+
2013
+ .has-error .fs-tit {
2014
+ border-bottom-color: #ff4d4f;
2015
+ }
2016
+
2017
+ body, html {
2018
+ width: 100%;
2019
+ height: 100%;
2020
+ }
2021
+ * {
2022
+ padding: 0;
2023
+ margin: 0;
2024
+ box-sizing: border-box;
2025
+ white-space: normal;
2026
+ word-break: break-all;
2027
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
2028
+ }
2029
+
2030
+ #index {
2031
+ position: relative;
2032
+ width: 100%;
2033
+ height: 100%;
2034
+ overflow: hidden;
2035
+ }
2036
+
2037
+ #page-list {
2038
+ position: relative;
2039
+ width: 100%;
2040
+ height: 100%;
2041
+ max-width: 800px;
2042
+ margin: 0 auto;
2043
+ z-index: 1
2044
+ }
2045
+
2046
+ #page-list.hardware .eles {
2047
+ will-change: transform
2048
+ }
2049
+
2050
+ #page-list .bg-wrap {
2051
+ position: absolute;
2052
+ left: 0;
2053
+ top: 0;
2054
+ right: 0;
2055
+ bottom: 0;
2056
+ z-index: -1
2057
+ }
2058
+
2059
+ #page-list .ani-pause .ani-wrap {
2060
+ animation-play-state: paused!important;
2061
+ -webkit-animation-play-state: paused!important
2062
+ }
2063
+
2064
+ #page-list .audio-wrap {
2065
+ z-index: 10
2066
+ }
2067
+
2068
+ #page-list .audio-wrap,#page-list .page-item {
2069
+ position: absolute;
2070
+ left: 0;
2071
+ top: 0;
2072
+ right: 0;
2073
+ bottom: 0
2074
+ }
2075
+
2076
+ #page-list .page-item {
2077
+ z-index: 0;
2078
+ overflow: hidden;
2079
+ display: none;
2080
+ visibility: hidden;
2081
+ transform-style: preserve-3d;
2082
+ -webkit-backface-visibility: hidden;
2083
+ backface-visibility: hidden;
2084
+ transition-timing-function: cubic-bezier(.1,.57,.1,1)
2085
+ }
2086
+
2087
+ #page-list .page-item .count-down {
2088
+ display: none
2089
+ }
2090
+
2091
+ #page-list .page-item .has-ani {
2092
+ display: none!important
2093
+ }
2094
+
2095
+ #page-list .page-item .ele-effect,#page-list .page-item .page-bg {
2096
+ display: none
2097
+ }
2098
+
2099
+ #page-list .page-item .limit-ani .ani-wrap {
2100
+ animation: none!important
2101
+ }
2102
+
2103
+ #page-list .page-item .ani-pause .ani-wrap {
2104
+ animation-play-state: paused!important;
2105
+ -webkit-animation-play-state: paused!important
2106
+ }
2107
+
2108
+ #page-list .page-item .showAniEle .has-ani {
2109
+ display: block!important
2110
+ }
2111
+
2112
+ #page-list .page-item .showAniEle .page-bg {
2113
+ display: block
2114
+ }
2115
+
2116
+ #page-list .page-item .scroll-wrap {
2117
+ position: relative;
2118
+ width: 100%;
2119
+ overflow: hidden
2120
+ }
2121
+
2122
+ #page-list .page-item .amap-maps {
2123
+ display: none
2124
+ }
2125
+
2126
+ #page-list .page-item.current {
2127
+ z-index: 1;
2128
+ display: block;
2129
+ visibility: visible
2130
+ }
2131
+
2132
+ #page-list .page-item.current .amap-maps,#page-list .page-item.current .count-down,#page-list .page-item.current .page-wrap .ele-effect {
2133
+ display: block
2134
+ }
2135
+
2136
+ #page-list .page-item.current .page-wrap .eles {
2137
+ text-align: left
2138
+ }
2139
+
2140
+ #page-list .page-item.current .page-wrap .page-bg {
2141
+ display: block
2142
+ }
2143
+
2144
+ #page-list .page-item.current .page-wrap .has-ani {
2145
+ display: block!important
2146
+ }
2147
+
2148
+ #page-list .page-item.visibility {
2149
+ display: block;
2150
+ visibility: hidden
2151
+ }
2152
+
2153
+ #page-list .page-item.active {
2154
+ z-index: 2;
2155
+ visibility: visible
2156
+ }
2157
+
2158
+ #page-list .page-item.active .amap-maps,#page-list .page-item.active .count-down {
2159
+ display: block
2160
+ }
2161
+
2162
+ #page-list .page-item .page-wrap {
2163
+ position: relative;
2164
+ width: 100%;
2165
+ height: 100%;
2166
+ overflow: hidden;
2167
+ z-index: 1
2168
+ }
2169
+
2170
+ #page-list .page-item .page-wrap .ele-wrap,#page-list .page-item .page-wrap .page-bg {
2171
+ position: absolute;
2172
+ right: 0;
2173
+ left: 0;
2174
+ top: 0;
2175
+ bottom: 0;
2176
+ width: 100%;
2177
+ height: 100%;
2178
+ overflow: hidden
2179
+ }
2180
+
2181
+ #page-list .page-item .page-wrap .page-bg {
2182
+ background-size: cover;
2183
+ background-repeat: no-repeat;
2184
+ background-position: 50% 50%;
2185
+ z-index: 0
2186
+ }
2187
+
2188
+ #page-list .page-item .page-wrap .ele-wrap {
2189
+ z-index: 1
2190
+ }
2191
+
2192
+ #page-list .page-item .page-wrap .eles {
2193
+ position: absolute
2194
+ }
2195
+
2196
+ .no-ani .ani-wrap,.no-ani .ele-text-long {
2197
+ animation: none!important
2198
+ }
2199
+
2200
+ .scroll-mode .page-container {
2201
+ position: relative;
2202
+ min-height: 100vh;
2203
+ }
2204
+
2205
+ /* 页面切换动画 */
2206
+ /* 过渡动画示例 */
2207
+ .slide-enter-active, .slide-leave-active {
2208
+ -webkit-animation: slideToTop .6s ease-in both;
2209
+ animation: slideToTop .6s ease-in both
2210
+ }
2211
+ @-webkit-keyframes slideToTop {
2212
+ to {
2213
+ -webkit-transform: translateY(-100%);
2214
+ transform: translateY(-100%)
2215
+ }
2216
+ }
2217
+
2218
+ @keyframes slideToTop {
2219
+ to {
2220
+ -webkit-transform: translateY(-100%);
2221
+ transform: translateY(-100%)
2222
+ }
2223
+ }
2224
+ .slide-enter-from {
2225
+ transform: translateX(100%);
2226
+ }
2227
+ .slide-leave-to {
2228
+ transform: translateX(-100%);
2229
+ }
2230
+
2231
+ .rotateCube-enter-active, .rotateCube-leave-active {
2232
+ -webkit-transform-origin: 50% 100%;
2233
+ transform-origin: 50% 100%;
2234
+ -webkit-animation: rotateCubeTopOut .6s ease-in both;
2235
+ animation: rotateCubeTopOut .6s ease-in both
2236
+ }
2237
+ .rotateCube-enter-from {
2238
+ transform: translateX(100%);
2239
+ }
2240
+ .rotateCube-leave-to {
2241
+ transform: translateX(-100%);
2242
+ }
2243
+
2244
+ .wind-enter-active, .wind-leave-active {
2245
+ -webkit-animation: windOut .5s ease-in both;
2246
+ animation: windOut .5s ease-in both
2247
+ }
2248
+ .wind-enter-from {
2249
+ transform: translateX(100%);
2250
+ }
2251
+ .wind-leave-to {
2252
+ transform: translateX(-100%);
2253
+ }
2254
+
2255
+ .popup-enter-active, .popup-leave-active {
2256
+ -webkit-transform-origin: 50% 100%;
2257
+ transform-origin: 50% 100%;
2258
+ -webkit-animation: rotateCarouselTopOut .7s ease both;
2259
+ animation: rotateCarouselTopOut .7s ease both
2260
+ }
2261
+ .popup-enter-from {
2262
+ transform: translateX(100%);
2263
+ }
2264
+ .popup-leave-to {
2265
+ transform: translateX(-100%);
2266
+ }
2267
+
2268
+ .scaleUpDown-enter-active, .scaleUpDown-leave-active {
2269
+ -webkit-animation: scaleUp .7s ease both;
2270
+ animation: scaleUp .7s ease both
2271
+ }
2272
+ .scaleUpDown-enter-from {
2273
+ transform: translateX(100%);
2274
+ }
2275
+ .scaleUpDown-leave-to {
2276
+ transform: translateX(-100%);
2277
+ }
2278
+
2279
+ .flipUpDown-enter-active, .flipUpDown-leave-active {
2280
+ -webkit-animation: rotatePushTop .7s ease both;
2281
+ animation: rotatePushTop .7s ease both
2282
+ }
2283
+ .flipUpDown-enter-from {
2284
+ transform: translateX(100%);
2285
+ }
2286
+ .flipUpDown-leave-to {
2287
+ transform: translateX(-100%);
2288
+ }
2289
+
2290
+ .cover-enter-active, .cover-leave-active {
2291
+ -webkit-animation: coverInDown .5s ease both;
2292
+ animation: coverInDown .5s ease both
2293
+ }
2294
+ .cover-enter-from {
2295
+ transform: translateX(100%);
2296
+ }
2297
+ .cover-leave-to {
2298
+ transform: translateX(-100%);
2299
+ }
2300
+
2301
+ .inertia-enter-active, .inertia-leave-active {
2302
+ -webkit-animation: inertiaOut .6s ease both;
2303
+ animation: inertiaOut .6s ease both
2304
+ }
2305
+ @-webkit-keyframes inertiaOut {
2306
+ to {
2307
+ -webkit-transform: scale(.2);
2308
+ transform: scale(.2)
2309
+ }
2310
+ }
2311
+
2312
+ @keyframes inertiaOut {
2313
+ to {
2314
+ -webkit-transform: scale(.2);
2315
+ transform: scale(.2)
2316
+ }
2317
+ }
2318
+ .inertia-enter-from {
2319
+ transform: translateX(100%);
2320
+ }
2321
+ .inertia-leave-to {
2322
+ transform: translateX(-100%);
2323
+ }
2324
+
2325
+ .push-enter-active, .push-leave-active {
2326
+ -webkit-transform-origin: center top;
2327
+ transform-origin: center top;
2328
+ -webkit-animation: pushInTop .6s linear .2s both;
2329
+ animation: pushInTop .6s linear .2s both
2330
+ }
2331
+ @-webkit-keyframes pushInTop {
2332
+ 0% {
2333
+ -webkit-transform: perspective(700px) rotateX(-90deg);
2334
+ transform: perspective(700px) rotateX(-90deg)
2335
+ }
2336
+ }
2337
+
2338
+ @keyframes pushInTop {
2339
+ 0% {
2340
+ -webkit-transform: perspective(700px) rotateX(-90deg);
2341
+ transform: perspective(700px) rotateX(-90deg)
2342
+ }
2343
+ }
2344
+ .push-enter-from {
2345
+ transform: translateX(100%);
2346
+ }
2347
+ .push-leave-to {
2348
+ transform: translateX(-100%);
2349
+ }
2350
+
2351
+ .drop-enter-active, .drop-leave-active {
2352
+ -webkit-transform-origin: 0 0;
2353
+ transform-origin: 0 0;
2354
+ -webkit-animation: dropOut .6s linear both;
2355
+ animation: dropOut .6s linear both
2356
+ }
2357
+ @-webkit-keyframes dropOut {
2358
+ 20% {
2359
+ -webkit-transform: rotate(5deg);
2360
+ transform: rotate(5deg)
2361
+ }
2362
+
2363
+ to {
2364
+ opacity: .6;
2365
+ -webkit-transform: translate3d(0,100%,0);
2366
+ transform: translate3d(0,100%,0)
2367
+ }
2368
+ }
2369
+
2370
+ @keyframes dropOut {
2371
+ 20% {
2372
+ -webkit-transform: rotate(5deg);
2373
+ transform: rotate(5deg)
2374
+ }
2375
+
2376
+ to {
2377
+ opacity: .6;
2378
+ -webkit-transform: translate3d(0,100%,0);
2379
+ transform: translate3d(0,100%,0)
2380
+ }
2381
+ }
2382
+
2383
+ .drop-enter-from {
2384
+ transform: translateX(100%);
2385
+ }
2386
+ .drop-leave-to {
2387
+ transform: translateX(-100%);
2388
+ }
2389
+
2390
+ .fadeIn-enter-active, .fadeIn-leave-active {
2391
+ -webkit-animation: pfadeIn .6s linear both;
2392
+ animation: pfadeIn .6s linear both
2393
+ }
2394
+ @-webkit-keyframes pfadeIn {
2395
+ 0% {
2396
+ opacity: 0
2397
+ }
2398
+
2399
+ to {
2400
+ opacity: 1
2401
+ }
2402
+ }
2403
+
2404
+ @keyframes pfadeIn {
2405
+ 0% {
2406
+ opacity: 0
2407
+ }
2408
+
2409
+ to {
2410
+ opacity: 1
2411
+ }
2412
+ }
2413
+ .fadeIn-enter-from {
2414
+ transform: translateX(100%);
2415
+ }
2416
+ .fadeIn-leave-to {
2417
+ transform: translateX(-100%);
2418
+ }
2419
+
2420
+ .zoomIn-enter-active, .zoomIn-leave-active {
2421
+ -webkit-animation: pzoomIn .6s linear both;
2422
+ animation: pzoomIn .6s linear both
2423
+ }
2424
+ @-webkit-keyframes pzoomIn {
2425
+ 0% {
2426
+ -webkit-transform: scale3d(0,0,0);
2427
+ transform: scale3d(0,0,0)
2428
+ }
2429
+ }
2430
+
2431
+ @keyframes pzoomIn {
2432
+ 0% {
2433
+ -webkit-transform: scale3d(0,0,0);
2434
+ transform: scale3d(0,0,0)
2435
+ }
2436
+ }
2437
+ .slide-enter-from {
2438
+ transform: translateX(100%);
2439
+ }
2440
+ .slide-leave-to {
2441
+ transform: translateX(-100%);
2442
+ }
2443
+
2444
+ .btFadeIn-enter-active, .btFadeIn-leave-active {
2445
+ -webkit-animation: btFadeInTop .6s ease both;
2446
+ animation: btFadeInTop .6s ease both
2447
+ }
2448
+ @keyframes btFadeInTop {
2449
+ 0% {
2450
+ opacity: 0;
2451
+ -webkit-transform: translate3d(0,100%,0);
2452
+ transform: translate3d(0,100%,0)
2453
+ }
2454
+ }
2455
+
2456
+ .btFadeIn-enter-from {
2457
+ transform: translateX(100%);
2458
+ }
2459
+ .btFadeIn-leave-to {
2460
+ transform: translateX(-100%);
2461
+ }
2462
+
2463
+ .hideSoon-enter-active, .hideSoon-leave-active {
2464
+ visibility: hidden
2465
+ }
2466
+ .hideSoon-enter-from {
2467
+ transform: translateX(100%);
2468
+ }
2469
+ .hideSoon-leave-to {
2470
+ transform: translateX(-100%);
2471
+ }
2472
+
2473
+ .upSlide-enter-active, .upSlide-leave-active {
2474
+ transition: transform 0.3s, opacity 0.3s;
2475
+ }
2476
+ .upSlide-enter-from, .upSlide-leave-to {
2477
+ transform: translateY(-100%);
2478
+ opacity: 0;
2479
+ }
2480
+ .upSlide-enter-to, .upSlide-leave-from {
2481
+ transform: translateY(0);
2482
+ opacity: 1;
2483
+ }
2484
+
2485
+ .downSlide-enter-active, .downSlide-leave-active {
2486
+ transition: transform 0.3s, opacity 0.3s;
2487
+ }
2488
+ .downSlide-enter-from, .downSlide-leave-to {
2489
+ transform: translateY(100%);
2490
+ opacity: 0;
2491
+ }
2492
+ .downSlide-enter-to, .downSlide-leave-from {
2493
+ transform: translateY(0);
2494
+ opacity: 1;
2495
+ }
2496
+
2497
+ .leftSlide-enter-active, .leftSlide-leave-active {
2498
+ -webkit-animation: leftSlide .7s ease both;
2499
+ animation: leftSlide .7s ease both
2500
+ }
2501
+ @-webkit-keyframes leftSlide {
2502
+ 0% {
2503
+ -webkit-transform: translateX(-100%);
2504
+ transform: translateX(-100%)
2505
+ }
2506
+
2507
+ to {
2508
+ -webkit-transform: translateX(0);
2509
+ transform: translateX(0)
2510
+ }
2511
+ }
2512
+
2513
+ @keyframes leftSlide {
2514
+ 0% {
2515
+ -webkit-transform: translateX(-100%);
2516
+ transform: translateX(-100%)
2517
+ }
2518
+
2519
+ to {
2520
+ -webkit-transform: translateX(0);
2521
+ transform: translateX(0)
2522
+ }
2523
+ }
2524
+ .leftSlide-enter-from {
2525
+ transform: translateX(100%);
2526
+ }
2527
+ .leftSlide-leave-to {
2528
+ transform: translateX(-100%);
2529
+ }
2530
+
2531
+ .rightSlide-enter-active, .rightSlide-leave-active {
2532
+ -webkit-animation: rightSlide .7s ease both;
2533
+ animation: rightSlide .7s ease both
2534
+ }
2535
+ @-webkit-keyframes rightSlide {
2536
+ 0% {
2537
+ -webkit-transform: translateX(100%);
2538
+ transform: translateX(100%)
2539
+ }
2540
+
2541
+ to {
2542
+ -webkit-transform: translateX(0);
2543
+ transform: translateX(0)
2544
+ }
2545
+ }
2546
+
2547
+ @keyframes rightSlide {
2548
+ 0% {
2549
+ -webkit-transform: translateX(100%);
2550
+ transform: translateX(100%)
2551
+ }
2552
+
2553
+ to {
2554
+ -webkit-transform: translateX(0);
2555
+ transform: translateX(0)
2556
+ }
2557
+ }
2558
+
2559
+ .rightSlide-enter-from {
2560
+ transform: translateX(100%);
2561
+ }
2562
+ .rightSlide-leave-to {
2563
+ transform: translateX(-100%);
2564
+ }
2565
+ * {
2566
+ -webkit-box-sizing: border-box;
2567
+ box-sizing: border-box;
2568
+ white-space: normal;
2569
+ word-break: break-all
2570
+ }
2571
+
2572
+
2573
+
2574
+ @-webkit-keyframes slideToBottom {
2575
+ to {
2576
+ -webkit-transform: translateY(100%);
2577
+ transform: translateY(100%)
2578
+ }
2579
+ }
2580
+
2581
+ @keyframes slideToBottom {
2582
+ to {
2583
+ -webkit-transform: translateY(100%);
2584
+ transform: translateY(100%)
2585
+ }
2586
+ }
2587
+
2588
+ @-webkit-keyframes slideFromTop {
2589
+ 0% {
2590
+ -webkit-transform: translateY(-100%);
2591
+ transform: translateY(-100%)
2592
+ }
2593
+ }
2594
+
2595
+ @keyframes slideFromTop {
2596
+ 0% {
2597
+ -webkit-transform: translateY(-100%);
2598
+ transform: translateY(-100%)
2599
+ }
2600
+ }
2601
+
2602
+ @-webkit-keyframes slideFromBottom {
2603
+ 0% {
2604
+ -webkit-transform: translateY(100%);
2605
+ transform: translateY(100%)
2606
+ }
2607
+ }
2608
+
2609
+ @keyframes slideFromBottom {
2610
+ 0% {
2611
+ -webkit-transform: translateY(100%);
2612
+ transform: translateY(100%)
2613
+ }
2614
+ }
2615
+
2616
+ @-webkit-keyframes rotateCubeTopOut {
2617
+ 50% {
2618
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2619
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2620
+ -webkit-animation-timing-function: ease-out;
2621
+ animation-timing-function: ease-out
2622
+ }
2623
+
2624
+ to {
2625
+ opacity: .3;
2626
+ -webkit-transform: translateY(-100%) rotateX(90deg);
2627
+ transform: translateY(-100%) rotateX(90deg)
2628
+ }
2629
+ }
2630
+
2631
+ @keyframes rotateCubeTopOut {
2632
+ 50% {
2633
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2634
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2635
+ -webkit-animation-timing-function: ease-out;
2636
+ animation-timing-function: ease-out
2637
+ }
2638
+
2639
+ to {
2640
+ opacity: .3;
2641
+ -webkit-transform: translateY(-100%) rotateX(90deg);
2642
+ transform: translateY(-100%) rotateX(90deg)
2643
+ }
2644
+ }
2645
+
2646
+ @-webkit-keyframes rotateCubeTopIn {
2647
+ 0% {
2648
+ opacity: .3;
2649
+ -webkit-transform: translateY(100%) rotateX(-90deg);
2650
+ transform: translateY(100%) rotateX(-90deg)
2651
+ }
2652
+
2653
+ 50% {
2654
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2655
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2656
+ -webkit-animation-timing-function: ease-out;
2657
+ animation-timing-function: ease-out
2658
+ }
2659
+ }
2660
+
2661
+ @keyframes rotateCubeTopIn {
2662
+ 0% {
2663
+ opacity: .3;
2664
+ -webkit-transform: translateY(100%) rotateX(-90deg);
2665
+ transform: translateY(100%) rotateX(-90deg)
2666
+ }
2667
+
2668
+ 50% {
2669
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2670
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2671
+ -webkit-animation-timing-function: ease-out;
2672
+ animation-timing-function: ease-out
2673
+ }
2674
+ }
2675
+
2676
+ @-webkit-keyframes rotateCubeBottomOut {
2677
+ 50% {
2678
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2679
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2680
+ -webkit-animation-timing-function: ease-out;
2681
+ animation-timing-function: ease-out
2682
+ }
2683
+
2684
+ to {
2685
+ opacity: .3;
2686
+ -webkit-transform: translateY(100%) rotateX(-90deg);
2687
+ transform: translateY(100%) rotateX(-90deg)
2688
+ }
2689
+ }
2690
+
2691
+ @keyframes rotateCubeBottomOut {
2692
+ 50% {
2693
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2694
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2695
+ -webkit-animation-timing-function: ease-out;
2696
+ animation-timing-function: ease-out
2697
+ }
2698
+
2699
+ to {
2700
+ opacity: .3;
2701
+ -webkit-transform: translateY(100%) rotateX(-90deg);
2702
+ transform: translateY(100%) rotateX(-90deg)
2703
+ }
2704
+ }
2705
+
2706
+ @-webkit-keyframes rotateCubeBottomIn {
2707
+ 0% {
2708
+ opacity: .3;
2709
+ -webkit-transform: translateY(-100%) rotateX(90deg);
2710
+ transform: translateY(-100%) rotateX(90deg)
2711
+ }
2712
+
2713
+ 50% {
2714
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2715
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2716
+ -webkit-animation-timing-function: ease-out;
2717
+ animation-timing-function: ease-out
2718
+ }
2719
+ }
2720
+
2721
+ @keyframes rotateCubeBottomIn {
2722
+ 0% {
2723
+ opacity: .3;
2724
+ -webkit-transform: translateY(-100%) rotateX(90deg);
2725
+ transform: translateY(-100%) rotateX(90deg)
2726
+ }
2727
+
2728
+ 50% {
2729
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2730
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2731
+ -webkit-animation-timing-function: ease-out;
2732
+ animation-timing-function: ease-out
2733
+ }
2734
+ }
2735
+
2736
+ @-webkit-keyframes windOut {
2737
+ to {
2738
+ opacity: 0;
2739
+ -webkit-transform: translateZ(-3000px) rotate(1turn);
2740
+ transform: translateZ(-3000px) rotate(1turn)
2741
+ }
2742
+ }
2743
+
2744
+ @keyframes windOut {
2745
+ to {
2746
+ opacity: 0;
2747
+ -webkit-transform: translateZ(-3000px) rotate(1turn);
2748
+ transform: translateZ(-3000px) rotate(1turn)
2749
+ }
2750
+ }
2751
+
2752
+ @-webkit-keyframes windIn {
2753
+ 0% {
2754
+ opacity: 0;
2755
+ -webkit-transform: translateZ(-3000px) rotate(-1turn);
2756
+ transform: translateZ(-3000px) rotate(-1turn)
2757
+ }
2758
+ }
2759
+
2760
+ @keyframes windIn {
2761
+ 0% {
2762
+ opacity: 0;
2763
+ -webkit-transform: translateZ(-3000px) rotate(-1turn);
2764
+ transform: translateZ(-3000px) rotate(-1turn)
2765
+ }
2766
+ }
2767
+
2768
+ @-webkit-keyframes rotateCarouselTopOut {
2769
+ to {
2770
+ opacity: .3;
2771
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2772
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
2773
+ }
2774
+ }
2775
+
2776
+ @keyframes rotateCarouselTopOut {
2777
+ to {
2778
+ opacity: .3;
2779
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2780
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
2781
+ }
2782
+ }
2783
+
2784
+ @-webkit-keyframes rotateCarouselTopIn {
2785
+ 0% {
2786
+ opacity: .3;
2787
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2788
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
2789
+ }
2790
+ }
2791
+
2792
+ @keyframes rotateCarouselTopIn {
2793
+ 0% {
2794
+ opacity: .3;
2795
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2796
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
2797
+ }
2798
+ }
2799
+
2800
+ @-webkit-keyframes rotateCarouselBottomOut {
2801
+ to {
2802
+ opacity: .3;
2803
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2804
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
2805
+ }
2806
+ }
2807
+
2808
+ @keyframes rotateCarouselBottomOut {
2809
+ to {
2810
+ opacity: .3;
2811
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2812
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
2813
+ }
2814
+ }
2815
+
2816
+ @-webkit-keyframes rotateCarouselBottomIn {
2817
+ 0% {
2818
+ opacity: .3;
2819
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2820
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
2821
+ }
2822
+ }
2823
+
2824
+ @keyframes rotateCarouselBottomIn {
2825
+ 0% {
2826
+ opacity: .3;
2827
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2828
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
2829
+ }
2830
+ }
2831
+
2832
+ @-webkit-keyframes scaleDown {
2833
+ to {
2834
+ opacity: 0;
2835
+ -webkit-transform: scale(.8);
2836
+ transform: scale(.8)
2837
+ }
2838
+ }
2839
+
2840
+ @keyframes scaleDown {
2841
+ to {
2842
+ opacity: 0;
2843
+ -webkit-transform: scale(.8);
2844
+ transform: scale(.8)
2845
+ }
2846
+ }
2847
+
2848
+ @-webkit-keyframes scaleUp {
2849
+ 0% {
2850
+ opacity: 0;
2851
+ -webkit-transform: scale(.8);
2852
+ transform: scale(.8)
2853
+ }
2854
+ }
2855
+
2856
+ @keyframes scaleUp {
2857
+ 0% {
2858
+ opacity: 0;
2859
+ -webkit-transform: scale(.8);
2860
+ transform: scale(.8)
2861
+ }
2862
+ }
2863
+
2864
+ @-webkit-keyframes scaleUpDown {
2865
+ 0% {
2866
+ opacity: 0;
2867
+ -webkit-transform: scale(1.2);
2868
+ transform: scale(1.2)
2869
+ }
2870
+ }
2871
+
2872
+ @keyframes scaleUpDown {
2873
+ 0% {
2874
+ opacity: 0;
2875
+ -webkit-transform: scale(1.2);
2876
+ transform: scale(1.2)
2877
+ }
2878
+ }
2879
+
2880
+ @-webkit-keyframes scaleDownUp {
2881
+ to {
2882
+ opacity: 0;
2883
+ -webkit-transform: scale(1.2);
2884
+ transform: scale(1.2)
2885
+ }
2886
+ }
3229
2887
 
3230
- .ele-form {
3231
- position: absolute;
3232
- user-select: none;
2888
+ @keyframes scaleDownUp {
2889
+ to {
2890
+ opacity: 0;
2891
+ -webkit-transform: scale(1.2);
2892
+ transform: scale(1.2)
2893
+ }
2894
+ }
2895
+
2896
+ @-webkit-keyframes scaleDownCenter {
2897
+ to {
2898
+ opacity: 0;
2899
+ -webkit-transform: scale(.7);
2900
+ transform: scale(.7)
2901
+ }
2902
+ }
2903
+
2904
+ @keyframes scaleDownCenter {
2905
+ to {
2906
+ opacity: 0;
2907
+ -webkit-transform: scale(.7);
2908
+ transform: scale(.7)
2909
+ }
2910
+ }
2911
+
2912
+ @-webkit-keyframes scaleUpCenter {
2913
+ 0% {
2914
+ opacity: 0;
2915
+ -webkit-transform: scale(.7);
2916
+ transform: scale(.7)
2917
+ }
2918
+ }
2919
+
2920
+ @keyframes scaleUpCenter {
2921
+ 0% {
2922
+ opacity: 0;
2923
+ -webkit-transform: scale(.7);
2924
+ transform: scale(.7)
2925
+ }
2926
+ }
2927
+
2928
+ @-webkit-keyframes rotatePushTop {
2929
+ to {
2930
+ opacity: 0;
2931
+ -webkit-transform: rotateX(-90deg);
2932
+ transform: rotateX(-90deg)
2933
+ }
2934
+ }
2935
+
2936
+ @keyframes rotatePushTop {
2937
+ to {
2938
+ opacity: 0;
2939
+ -webkit-transform: rotateX(-90deg);
2940
+ transform: rotateX(-90deg)
2941
+ }
2942
+ }
2943
+
2944
+ @-webkit-keyframes rotatePushBottom {
2945
+ to {
2946
+ opacity: 0;
2947
+ -webkit-transform: rotateX(90deg);
2948
+ transform: rotateX(90deg)
2949
+ }
2950
+ }
2951
+
2952
+ @keyframes rotatePushBottom {
2953
+ to {
2954
+ opacity: 0;
2955
+ -webkit-transform: rotateX(90deg);
2956
+ transform: rotateX(90deg)
2957
+ }
2958
+ }
2959
+
2960
+ @-webkit-keyframes rotatePullTop {
2961
+ 0% {
2962
+ opacity: 0;
2963
+ -webkit-transform: rotateX(-90deg);
2964
+ transform: rotateX(-90deg)
2965
+ }
2966
+ }
2967
+
2968
+ @keyframes rotatePullTop {
2969
+ 0% {
2970
+ opacity: 0;
2971
+ -webkit-transform: rotateX(-90deg);
2972
+ transform: rotateX(-90deg)
2973
+ }
2974
+ }
2975
+
2976
+ @-webkit-keyframes rotatePullBottom {
2977
+ 0% {
2978
+ opacity: 0;
2979
+ -webkit-transform: rotateX(90deg);
2980
+ transform: rotateX(90deg)
2981
+ }
2982
+ }
2983
+
2984
+ @keyframes rotatePullBottom {
2985
+ 0% {
2986
+ opacity: 0;
2987
+ -webkit-transform: rotateX(90deg);
2988
+ transform: rotateX(90deg)
2989
+ }
2990
+ }
2991
+
2992
+ @-webkit-keyframes coverInUp {
2993
+ 0% {
2994
+ -webkit-transform: translate3d(0,-100%,0);
2995
+ transform: translate3d(0,-100%,0)
2996
+ }
2997
+ }
2998
+
2999
+ @keyframes coverInUp {
3000
+ 0% {
3001
+ -webkit-transform: translate3d(0,-100%,0);
3002
+ transform: translate3d(0,-100%,0)
3003
+ }
3004
+ }
3005
+
3006
+ @-webkit-keyframes coverInDown {
3007
+ 0% {
3008
+ -webkit-transform: translate3d(0,100%,0);
3009
+ transform: translate3d(0,100%,0)
3010
+ }
3011
+ }
3012
+
3013
+ @keyframes coverInDown {
3014
+ 0% {
3015
+ -webkit-transform: translate3d(0,100%,0);
3016
+ transform: translate3d(0,100%,0)
3017
+ }
3018
+ }
3019
+
3020
+ .rotateInReverse {
3021
+ -webkit-animation-name: rotateInReverse;
3022
+ animation-name: rotateInReverse
3023
+ }
3024
+
3025
+ @-webkit-keyframes rotateInReverse {
3026
+ 0% {
3027
+ opacity: 0;
3028
+ -webkit-transform: rotate(200deg);
3029
+ transform: rotate(200deg);
3030
+ -webkit-transform-origin: center;
3031
+ transform-origin: center
3032
+ }
3033
+
3034
+ to {
3035
+ opacity: 1;
3036
+ -webkit-transform: none;
3037
+ transform: none;
3038
+ -webkit-transform-origin: center;
3039
+ transform-origin: center
3040
+ }
3041
+ }
3042
+
3043
+ @keyframes rotateInReverse {
3044
+ 0% {
3045
+ opacity: 0;
3046
+ -webkit-transform: rotate(200deg);
3047
+ transform: rotate(200deg);
3048
+ -webkit-transform-origin: center;
3049
+ transform-origin: center
3050
+ }
3051
+
3052
+ to {
3053
+ opacity: 1;
3054
+ -webkit-transform: none;
3055
+ transform: none;
3056
+ -webkit-transform-origin: center;
3057
+ transform-origin: center
3058
+ }
3059
+ }
3060
+
3061
+ .zoomInBig {
3062
+ -webkit-animation-name: zoomInBig;
3063
+ animation-name: zoomInBig;
3064
+ -webkit-animation-timing-function: cubic-bezier(0,.44,.75,.99);
3065
+ animation-timing-function: cubic-bezier(0,.44,.75,.99)
3066
+ }
3067
+
3068
+ @-webkit-keyframes zoomInBig {
3069
+ 0% {
3070
+ opacity: 0;
3071
+ -webkit-transform: scale3d(2,2,2);
3072
+ transform: scale3d(2,2,2)
3073
+ }
3074
+
3075
+ 50% {
3076
+ opacity: 1
3077
+ }
3078
+
3079
+ 80% {
3080
+ -webkit-transform: scaleX(1);
3081
+ transform: scaleX(1)
3082
+ }
3083
+ }
3084
+
3085
+ @keyframes zoomInBig {
3086
+ 0% {
3087
+ opacity: 0;
3088
+ -webkit-transform: scale3d(2,2,2);
3089
+ transform: scale3d(2,2,2)
3090
+ }
3091
+
3092
+ 50% {
3093
+ opacity: 1
3094
+ }
3095
+
3096
+ 80% {
3097
+ -webkit-transform: scaleX(1);
3098
+ transform: scaleX(1)
3099
+ }
3100
+ }
3101
+
3102
+ .flyIn {
3103
+ -webkit-animation-name: flyIn;
3104
+ animation-name: flyIn
3105
+ }
3106
+
3107
+ @-webkit-keyframes flyIn {
3108
+ 0%,20%,40%,60%,80%,to {
3109
+ -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
3110
+ transition-timing-function: cubic-bezier(.215,.61,.355,1)
3111
+ }
3112
+
3113
+ 0% {
3114
+ opacity: 0;
3115
+ -webkit-transform: scale3d(2,2,2);
3116
+ transform: scale3d(2,2,2)
3117
+ }
3118
+
3119
+ 40% {
3120
+ -webkit-transform: scale3d(.9,.9,.9);
3121
+ transform: scale3d(.9,.9,.9)
3122
+ }
3123
+
3124
+ 60% {
3125
+ -webkit-transform: scale3d(1.03,1.03,1.03);
3126
+ transform: scale3d(1.03,1.03,1.03)
3127
+ }
3128
+
3129
+ 80% {
3130
+ opacity: 1;
3131
+ -webkit-transform: scale3d(.97,.97,.97);
3132
+ transform: scale3d(.97,.97,.97)
3133
+ }
3134
+
3135
+ to {
3136
+ -webkit-transform: scaleX(1);
3137
+ transform: scaleX(1)
3138
+ }
3233
3139
  }
3234
3140
 
3235
- .f-single {
3236
- cursor: pointer;
3237
- }
3141
+ @keyframes flyIn {
3142
+ 0%,20%,40%,60%,80%,to {
3143
+ -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
3144
+ transition-timing-function: cubic-bezier(.215,.61,.355,1)
3145
+ }
3238
3146
 
3239
- .ani-wrap {
3240
- position: relative;
3241
- }
3147
+ 0% {
3148
+ opacity: 0;
3149
+ -webkit-transform: scale3d(2,2,2);
3150
+ transform: scale3d(2,2,2)
3151
+ }
3242
3152
 
3243
- .fs-tit {
3244
- display: flex;
3245
- padding: 0 5px;
3246
- height: 40px;
3247
- 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
- }
3153
+ 40% {
3154
+ -webkit-transform: scale3d(.9,.9,.9);
3155
+ transform: scale3d(.9,.9,.9)
3156
+ }
3253
3157
 
3254
- .require {
3255
- padding: 0 5px 0 0;
3256
- color: red;
3257
- vertical-align: middle;
3258
- }
3158
+ 60% {
3159
+ -webkit-transform: scale3d(1.03,1.03,1.03);
3160
+ transform: scale3d(1.03,1.03,1.03)
3161
+ }
3259
3162
 
3260
- .f-single ul {
3261
- padding: 15px;
3262
- margin: 0;
3263
- list-style: none;
3264
- }
3163
+ 80% {
3164
+ opacity: 1;
3165
+ -webkit-transform: scale3d(.97,.97,.97);
3166
+ transform: scale3d(.97,.97,.97)
3167
+ }
3265
3168
 
3266
- .f-single ul li {
3267
- display: flex;
3268
- align-items: center;
3269
- margin-top: 12px;
3270
- font-size: 0;
3169
+ to {
3170
+ -webkit-transform: scaleX(1);
3171
+ transform: scaleX(1)
3172
+ }
3271
3173
  }
3272
3174
 
3273
- .f-single ul li:first-child {
3274
- margin-top: 0;
3175
+ .bounceSmall {
3176
+ -webkit-animation-name: bounceSmall;
3177
+ animation-name: bounceSmall;
3178
+ -webkit-animation-timing-function: ease-out;
3179
+ animation-timing-function: ease-out
3275
3180
  }
3276
3181
 
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;
3284
- }
3182
+ @-webkit-keyframes bounceSmall {
3183
+ 0% {
3184
+ opacity: 0;
3185
+ -webkit-transform: scale(1.7)
3186
+ }
3285
3187
 
3286
- .fs-circle.selected {
3287
- background-color: #2687f1;
3288
- border-color: #2687f1 !important;
3289
- }
3188
+ 50% {
3189
+ opacity: 1;
3190
+ -webkit-transform: scale(.95)
3191
+ }
3290
3192
 
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;
3193
+ 80% {
3194
+ -webkit-transform: scale(1.05)
3195
+ }
3196
+
3197
+ 90% {
3198
+ -webkit-transform: scale(.98)
3199
+ }
3200
+
3201
+ to {
3202
+ -webkit-transform: scale(1)
3203
+ }
3300
3204
  }
3301
3205
 
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;
3308
- font-size: 14px;
3309
- line-height: 1.2;
3206
+ @keyframes bounceSmall {
3207
+ 0% {
3208
+ opacity: 0;
3209
+ -webkit-transform: scale(1.7)
3210
+ }
3211
+
3212
+ 50% {
3213
+ opacity: 1;
3214
+ -webkit-transform: scale(.95)
3215
+ }
3216
+
3217
+ 80% {
3218
+ -webkit-transform: scale(1.05)
3219
+ }
3220
+
3221
+ 90% {
3222
+ -webkit-transform: scale(.98)
3223
+ }
3224
+
3225
+ to {
3226
+ -webkit-transform: scale(1)
3227
+ }
3310
3228
  }
3311
3229
 
3312
- .has-error .fs-tit {
3313
- border-bottom-color: #ff4d4f;
3230
+ .pullUp {
3231
+ -webkit-transform-origin: 50% 100%;
3232
+ transform-origin: 50% 100%;
3233
+ -webkit-animation-name: pullUp;
3234
+ animation-name: pullUp;
3235
+ -webkit-animation-timing-function: ease-out;
3236
+ animation-timing-function: ease-out
3314
3237
  }
3315
3238
 
3316
- /* 错误提示样式 */
3317
- .error-tip {
3318
- position: fixed;
3319
- left: 0;
3320
- top: 0;
3321
- width: 100%;
3322
- height: 100%;
3323
- z-index: 1000;
3239
+ @-webkit-keyframes pullUp {
3240
+ 0%,40%,60%,80%,99% {
3241
+ -webkit-animation-timing-function: ease-out;
3242
+ animation-timing-function: ease-out
3243
+ }
3244
+
3245
+ 0% {
3246
+ opacity: 0;
3247
+ -webkit-transform: scaleY(.1);
3248
+ transform: scaleY(.1);
3249
+ -webkit-transform-origin: 50% 100%;
3250
+ transform-origin: 50% 100%
3251
+ }
3252
+
3253
+ 40% {
3254
+ opacity: 1;
3255
+ -webkit-transform: scaleY(1.02);
3256
+ transform: scaleY(1.02);
3257
+ -webkit-transform-origin: 50% 100%;
3258
+ transform-origin: 50% 100%
3259
+ }
3260
+
3261
+ 60% {
3262
+ -webkit-transform: scaleY(.98);
3263
+ transform: scaleY(.98);
3264
+ -webkit-transform-origin: 50% 100%;
3265
+ transform-origin: 50% 100%
3266
+ }
3267
+
3268
+ 80% {
3269
+ -webkit-transform: scaleY(1.01);
3270
+ transform: scaleY(1.01);
3271
+ -webkit-transform-origin: 50% 100%;
3272
+ transform-origin: 50% 100%
3273
+ }
3274
+
3275
+ 99% {
3276
+ -webkit-transform: scaleY(1);
3277
+ transform: scaleY(1);
3278
+ -webkit-transform-origin: 50% 100%;
3279
+ transform-origin: 50% 100%
3280
+ }
3281
+
3282
+ to {
3283
+ -webkit-transform: none;
3284
+ transform: none
3285
+ }
3324
3286
  }
3325
3287
 
3326
- .ele-form {
3327
- position: absolute;
3328
- user-select: none;
3288
+ @keyframes pullUp {
3289
+ 0%,40%,60%,80%,99% {
3290
+ -webkit-animation-timing-function: ease-out;
3291
+ animation-timing-function: ease-out
3292
+ }
3293
+
3294
+ 0% {
3295
+ opacity: 0;
3296
+ -webkit-transform: scaleY(.1);
3297
+ transform: scaleY(.1);
3298
+ -webkit-transform-origin: 50% 100%;
3299
+ transform-origin: 50% 100%
3300
+ }
3301
+
3302
+ 40% {
3303
+ opacity: 1;
3304
+ -webkit-transform: scaleY(1.02);
3305
+ transform: scaleY(1.02);
3306
+ -webkit-transform-origin: 50% 100%;
3307
+ transform-origin: 50% 100%
3308
+ }
3309
+
3310
+ 60% {
3311
+ -webkit-transform: scaleY(.98);
3312
+ transform: scaleY(.98);
3313
+ -webkit-transform-origin: 50% 100%;
3314
+ transform-origin: 50% 100%
3315
+ }
3316
+
3317
+ 80% {
3318
+ -webkit-transform: scaleY(1.01);
3319
+ transform: scaleY(1.01);
3320
+ -webkit-transform-origin: 50% 100%;
3321
+ transform-origin: 50% 100%
3322
+ }
3323
+
3324
+ 99% {
3325
+ -webkit-transform: scaleY(1);
3326
+ transform: scaleY(1);
3327
+ -webkit-transform-origin: 50% 100%;
3328
+ transform-origin: 50% 100%
3329
+ }
3330
+
3331
+ to {
3332
+ -webkit-transform: none;
3333
+ transform: none
3334
+ }
3329
3335
  }
3330
3336
 
3331
- .f-multiple {
3332
- cursor: pointer;
3337
+ .pullDown {
3338
+ -webkit-transform-origin: 50% 0;
3339
+ transform-origin: 50% 0;
3340
+ -webkit-animation-name: pullDown;
3341
+ animation-name: pullDown;
3342
+ -webkit-animation-timing-function: ease-out;
3343
+ animation-timing-function: ease-out
3333
3344
  }
3334
3345
 
3335
- .ani-wrap {
3336
- position: relative;
3337
- }
3346
+ @-webkit-keyframes pullDown {
3347
+ 0%,40%,60%,80%,99% {
3348
+ -webkit-animation-timing-function: ease-out;
3349
+ animation-timing-function: ease-out
3350
+ }
3338
3351
 
3339
- .fs-tit {
3340
- display: flex;
3341
- padding: 0 5px;
3342
- height: 40px;
3343
- align-items: center;
3344
- white-space: nowrap;
3345
- overflow: hidden;
3346
- text-overflow: ellipsis;
3347
- border-bottom: 1px solid rgba(153, 153, 153, 1);
3348
- }
3352
+ 0% {
3353
+ opacity: 0;
3354
+ -webkit-transform: scaleY(.1);
3355
+ transform: scaleY(.1);
3356
+ -webkit-transform-origin: 50% 0;
3357
+ transform-origin: 50% 0
3358
+ }
3349
3359
 
3350
- .require {
3351
- padding: 0 5px 0 0;
3352
- color: red;
3353
- vertical-align: middle;
3354
- }
3360
+ 40% {
3361
+ opacity: 1;
3362
+ -webkit-transform: scaleY(1.02);
3363
+ transform: scaleY(1.02);
3364
+ -webkit-transform-origin: 50% 0;
3365
+ transform-origin: 50% 0
3366
+ }
3355
3367
 
3356
- .f-multiple ul {
3357
- padding: 15px;
3358
- margin: 0;
3359
- list-style: none;
3360
- }
3368
+ 60% {
3369
+ -webkit-transform: scaleY(.98);
3370
+ transform: scaleY(.98);
3371
+ -webkit-transform-origin: 50% 0;
3372
+ transform-origin: 50% 0
3373
+ }
3361
3374
 
3362
- .f-multiple ul li {
3363
- margin-top: 12px;
3364
- font-size: 0;
3365
- display: flex;
3366
- align-items: center;
3367
- cursor: pointer;
3368
- }
3375
+ 80% {
3376
+ -webkit-transform: scaleY(1.01);
3377
+ transform: scaleY(1.01);
3378
+ -webkit-transform-origin: 50% 0;
3379
+ transform-origin: 50% 0
3380
+ }
3369
3381
 
3370
- .f-multiple ul li:first-child {
3371
- margin-top: 0;
3372
- }
3382
+ 99% {
3383
+ -webkit-transform: scaleY(1);
3384
+ transform: scaleY(1);
3385
+ -webkit-transform-origin: 50% 0;
3386
+ transform-origin: 50% 0
3387
+ }
3373
3388
 
3374
- .fs-circle {
3375
- display: inline-block;
3376
- width: 16px;
3377
- height: 16px;
3378
- border-radius: 50%;
3379
- position: relative;
3380
- transition: all 0.2s;
3389
+ to {
3390
+ -webkit-transform: none;
3391
+ transform: none
3392
+ }
3381
3393
  }
3382
3394
 
3383
- .fs-circle.selected {
3384
- background-color: #2687f1;
3385
- border-color: #2687f1 !important;
3386
- }
3395
+ @keyframes pullDown {
3396
+ 0%,40%,60%,80%,99% {
3397
+ -webkit-animation-timing-function: ease-out;
3398
+ animation-timing-function: ease-out
3399
+ }
3387
3400
 
3388
- .fs-circle.selected::after {
3389
- content: "";
3390
- position: absolute;
3391
- top: 3px;
3392
- left: 3px;
3393
- width: 8px;
3394
- height: 8px;
3395
- border-radius: 50%;
3396
- background-color: white;
3397
- }
3401
+ 0% {
3402
+ opacity: 0;
3403
+ -webkit-transform: scaleY(.1);
3404
+ transform: scaleY(.1);
3405
+ -webkit-transform-origin: 50% 0;
3406
+ transform-origin: 50% 0
3407
+ }
3398
3408
 
3399
- .fs-txt {
3400
- display: inline-block;
3401
- width: calc(100% - 16px);
3402
- padding-left: 8px;
3403
- vertical-align: top;
3404
- word-break: break-all;
3405
- font-size: 14px;
3406
- line-height: 1.2;
3407
- }
3409
+ 40% {
3410
+ opacity: 1;
3411
+ -webkit-transform: scaleY(1.02);
3412
+ transform: scaleY(1.02);
3413
+ -webkit-transform-origin: 50% 0;
3414
+ transform-origin: 50% 0
3415
+ }
3408
3416
 
3409
- .has-error .fs-tit {
3410
- border-bottom-color: #ff4d4f;
3411
- }
3417
+ 60% {
3418
+ -webkit-transform: scaleY(.98);
3419
+ transform: scaleY(.98);
3420
+ -webkit-transform-origin: 50% 0;
3421
+ transform-origin: 50% 0
3422
+ }
3412
3423
 
3413
- .form-submit {
3414
- cursor: pointer;
3415
- transition: all 0.2s;
3416
- outline: none;
3417
- border: none;
3418
- }
3424
+ 80% {
3425
+ -webkit-transform: scaleY(1.01);
3426
+ transform: scaleY(1.01);
3427
+ -webkit-transform-origin: 50% 0;
3428
+ transform-origin: 50% 0
3429
+ }
3419
3430
 
3420
- .form-submit:hover {
3421
- opacity: 0.9;
3422
- transform: translateY(-1px);
3423
- }
3431
+ 99% {
3432
+ -webkit-transform: scaleY(1);
3433
+ transform: scaleY(1);
3434
+ -webkit-transform-origin: 50% 0;
3435
+ transform-origin: 50% 0
3436
+ }
3424
3437
 
3425
- .form-submit:active {
3426
- opacity: 0.8;
3427
- transform: translateY(0);
3438
+ to {
3439
+ -webkit-transform: none;
3440
+ transform: none
3441
+ }
3428
3442
  }
3429
-
3430
- .form-submit:disabled {
3431
- opacity: 0.6;
3432
- cursor: not-allowed;
3433
- transform: none !important;
3443
+ :deep(.vue-transition-group) {
3444
+ display: block;
3445
+ position: relative;
3446
+ width: 100%;
3447
+ height: 100%;
3434
3448
  }
3435
-
3436
- /* 统一错误提示样式 */
3437
- .tip-cover {
3438
- position: fixed;
3439
- left: 0;
3440
- top: 0;
3449
+ .transition-container {
3450
+ display: block;
3451
+ position: relative;
3441
3452
  width: 100%;
3442
3453
  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
3454
  }
3449
-
3450
- .tip {
3451
- width: 80%;
3452
- max-width: 250px;
3453
- padding: 10px;
3454
- border-radius: 5px;
3455
- background-color: #fff;
3455
+ /* 确保循环时的过渡效果平滑 */
3456
+ .pages-wrapper {
3457
+ position: relative;
3458
+ width: 100%;
3459
+ height: 100%;
3460
+ overflow: hidden;
3456
3461
  }
3457
3462
 
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;
3463
+ .page-container {
3464
+ position: absolute;
3465
+ width: 100%;
3466
+ height: 100%;
3467
+ background-size: cover;
3468
+ background-position: center;
3469
+ will-change: transform;
3470
3470
  }
3471
3471
 
3472
- .tip-content {
3473
- font-size: 14px;
3474
- padding-top: 30px;
3475
- text-align: center;
3472
+ .form-container {
3473
+ position: relative;
3474
+ width: 100%;
3475
+ height: 100%;
3476
3476
  }
3477
3477
 
3478
3478
  .global.video {
@@ -3899,19 +3899,6 @@ 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
3903
  .global.tel {
3917
3904
  width: 35px;
@@ -3925,7 +3912,20 @@ i {
3925
3912
  .icon-dianhua:before { content: "\E60E"; }
3926
3913
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3927
3914
  .global.tel > span { font-size: 12px; line-height: 20px; display: block;}
3928
-
3915
+
3916
+ .global.receipt {
3917
+ width: 35px;
3918
+ height: 55px;
3919
+ border-radius: 50%;
3920
+ text-align: center;
3921
+ margin-bottom: 5px;
3922
+ border: 2px solid #fff;
3923
+ cursor: pointer;
3924
+ }
3925
+ .icon-liuyan:before { content: "\E636"; }
3926
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3927
+ .global.receipt > span { font-size: 12px; line-height: 20px; display: block; }
3928
+
3929
3929
  .global.map {
3930
3930
  width: 35px;
3931
3931
  height: 55px;