unika-components 1.1.80 → 1.1.82

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.
@@ -38,7 +38,56 @@
38
38
  width: 100%;
39
39
  height: 100%;
40
40
  background: rgba(0,0,0,0.05);
41
- }.element-ditu .ani-wrap {
41
+ }.ele-img {
42
+ position: absolute;
43
+ overflow: hidden;
44
+ }
45
+
46
+ .ele-img .ani-wrap {
47
+ width: 100%;
48
+ height: 100%;
49
+ }
50
+
51
+ .ele-img .ele-image {
52
+ position: relative;
53
+ display: block;
54
+ }
55
+
56
+ .ele-img .rotate-wrap {
57
+ position: absolute;
58
+ left: 0;
59
+ right: 0;
60
+ top: 0;
61
+ bottom: 0;
62
+ }
63
+
64
+ .ele-img .ele-img-bg,
65
+ .ele-img .rotate-wrap .img-wrap {
66
+ width: 100%;
67
+ height: 100%;
68
+ overflow: hidden;
69
+ }
70
+
71
+ .ele-img .ele-bg-wrap {
72
+ width: 100%;
73
+ height: 100%;
74
+ background-size: cover;
75
+ background-position: 50% 50%;
76
+ background-repeat: no-repeat;
77
+ background-clip: border-box;
78
+ }
79
+
80
+ /* 动画关键帧 */
81
+ @keyframes zoomIn {
82
+ from {
83
+ opacity: 0;
84
+ transform: scale(0.5);
85
+ }
86
+ to {
87
+ opacity: 1;
88
+ transform: scale(1);
89
+ }
90
+ }.element-ditu .ani-wrap {
42
91
  width: 100%;
43
92
  height: 100%;
44
93
  overflow: hidden
@@ -83,6 +132,52 @@
83
132
  width: 100%;
84
133
  height: 100%;
85
134
  }
135
+ .element-video {
136
+ position: absolute;
137
+ overflow: hidden;
138
+ background-color: transparent;
139
+ }
140
+
141
+ .element-video .ani-wrap, .element-video img {
142
+ display: block;
143
+ width: 100%;
144
+ height: 100%;
145
+ }
146
+
147
+ .video-container {
148
+ width: 100%;
149
+ height: 100%;
150
+ }
151
+
152
+ .video-container iframe {
153
+ width: 100%;
154
+ height: 100%;
155
+ border: none;
156
+ }
157
+
158
+ .video-cover {
159
+ position: relative;
160
+ width: 100%;
161
+ height: 100%;
162
+ background-size: cover;
163
+ background-position: center;
164
+ cursor: pointer;
165
+ }
166
+
167
+ .video-cover .play-btn {
168
+ position: absolute;
169
+ left: 50%;
170
+ top: 50%;
171
+ transform: translate(-50%, -50%);
172
+ width: 50px;
173
+ height: 50px;
174
+ opacity: 0.8;
175
+ transition: opacity 0.2s;
176
+ }
177
+
178
+ .video-cover:hover .play-btn {
179
+ opacity: 1;
180
+ }
86
181
  .ele-text {
87
182
  position: relative;
88
183
  }
@@ -219,6 +314,9 @@
219
314
  width: 100%;
220
315
  height: 2px;
221
316
  background: #fff;
317
+ }
318
+ .ele-lottie .ele-lotwrap {
319
+ overflow: hidden;
222
320
  }.ele-effect {
223
321
  will-change: transform;
224
322
  }
@@ -274,2215 +372,2120 @@
274
372
  transform-origin: center;
275
373
  -webkit-animation: snow 5s linear infinite;
276
374
  animation: snow 5s linear infinite
375
+ }.call {
376
+ position: absolute;
377
+ cursor: pointer;
378
+ user-select: none;
277
379
  }
278
- .element-video {
279
- position: absolute;
280
- overflow: hidden;
281
- background-color: transparent;
282
- }
283
-
284
- .element-video .ani-wrap, .element-video img {
285
- display: block;
286
- width: 100%;
287
- height: 100%;
288
- }
289
-
290
- .video-container {
291
- width: 100%;
292
- height: 100%;
293
- }
294
-
295
- .video-container iframe {
296
- width: 100%;
297
- height: 100%;
298
- border: none;
299
- }
300
-
301
- .video-cover {
302
- position: relative;
303
- width: 100%;
304
- height: 100%;
305
- background-size: cover;
306
- background-position: center;
307
- cursor: pointer;
308
- }
309
-
310
- .video-cover .play-btn {
311
- position: absolute;
312
- left: 50%;
313
- top: 50%;
314
- transform: translate(-50%, -50%);
315
- width: 50px;
316
- height: 50px;
317
- opacity: 0.8;
318
- transition: opacity 0.2s;
319
- }
320
-
321
- .video-cover:hover .play-btn {
322
- opacity: 1;
323
- }.ele-img {
324
- position: absolute;
325
- overflow: hidden;
326
- }
327
-
328
- .ele-img .ani-wrap {
329
- width: 100%;
330
- height: 100%;
331
- }
332
-
333
- .ele-img .ele-image {
334
- position: relative;
335
- display: block;
336
- }
337
-
338
- .ele-img .rotate-wrap {
339
- position: absolute;
340
- left: 0;
341
- right: 0;
342
- top: 0;
343
- bottom: 0;
344
- }
345
-
346
- .ele-img .ele-img-bg,
347
- .ele-img .rotate-wrap .img-wrap {
348
- width: 100%;
349
- height: 100%;
350
- overflow: hidden;
351
- }
352
-
353
- .ele-img .ele-bg-wrap {
354
- width: 100%;
355
- height: 100%;
356
- background-size: cover;
357
- background-position: 50% 50%;
358
- background-repeat: no-repeat;
359
- background-clip: border-box;
360
- }
361
-
362
- /* 动画关键帧 */
363
- @keyframes zoomIn {
364
- from {
365
- opacity: 0;
366
- transform: scale(0.5);
367
- }
368
- to {
369
- opacity: 1;
370
- transform: scale(1);
371
- }
372
- }body, html {
380
+
381
+ .call .ani-wrap {
382
+ display: flex;
383
+ justify-content: center;
384
+ align-items: center;
373
385
  width: 100%;
374
386
  height: 100%;
375
- }
376
- * {
377
- padding: 0;
378
- margin: 0;
379
- box-sizing: border-box;
380
- white-space: normal;
381
- word-break: break-all;
382
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
387
+ overflow: hidden;
388
+ transition: opacity 0.2s;
383
389
  }
384
390
 
385
- @font-face {
386
- font-family: iconfont;
387
- src: url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.f1262e4.woff2) format("woff2"),
388
- url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.788d827.woff) format("woff"),
389
- url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.9541e59.ttf) format("truetype")
391
+ .call .ani-wrap:hover {
392
+ opacity: 0.9;
390
393
  }
391
394
 
392
- .iconfont {
393
- font-family: "iconfont" !important;
394
- font-size: 16px;
395
- font-style: normal;
396
- -webkit-font-smoothing: antialiased;
397
- -moz-osx-font-smoothing: grayscale;
395
+ .call-content {
396
+ display: flex;
397
+ align-items: center;
398
+ justify-content: center;
398
399
  }
399
400
 
400
- #index {
401
- position: relative;
402
- width: 100%;
403
- height: 100%;
404
- overflow: hidden;
401
+ .btn-text {
402
+ margin-left: 10px;
405
403
  }
406
404
 
407
- #page-list {
408
- position: relative;
405
+
406
+ .hb-tel:before {
407
+ content: "\E642";
408
+ }#page-list .tip-cover {
409
+ position: fixed;
410
+ left: 0;
411
+ top: 0;
409
412
  width: 100%;
410
413
  height: 100%;
411
- max-width: 800px;
412
- margin: 0 auto;
413
- z-index: 1
414
+ display: -ms-flexbox;
415
+ display: flex;
416
+ -ms-flex-align: center;
417
+ align-items: center;
418
+ -ms-flex-pack: center;
419
+ justify-content: center;
420
+ z-index: 999;
421
+ background-color: rgba(0,0,0,.7)
414
422
  }
415
423
 
416
- #page-list.hardware .eles {
417
- will-change: transform
418
- }
419
-
420
- #page-list .bg-wrap {
421
- position: absolute;
422
- left: 0;
423
- top: 0;
424
- right: 0;
425
- bottom: 0;
426
- z-index: -1
424
+ #page-list .tip-cover .tip {
425
+ width: 80%;
426
+ max-width: 250px;
427
+ padding: 10px;
428
+ border-radius: 5px;
429
+ background-color: #fff
427
430
  }
428
431
 
429
- #page-list .ani-pause .ani-wrap {
430
- animation-play-state: paused!important;
431
- -webkit-animation-play-state: paused!important
432
+ #page-list .tip-cover .tip-btn {
433
+ display: block;
434
+ margin: 25px auto;
435
+ width: 120px;
436
+ height: 30px;
437
+ color: #fff;
438
+ border-radius: 4px;
439
+ text-align: center;
440
+ font-size: 14px;
441
+ line-height: 30px;
442
+ background: #ed5566
432
443
  }
433
444
 
434
- #page-list .audio-wrap {
435
- z-index: 10
445
+ #page-list .tip-cover .tip-content {
446
+ font-size: 14px;
447
+ padding-top: 30px;
436
448
  }
437
449
 
438
- #page-list .audio-wrap,#page-list .page-item {
439
- position: absolute;
450
+ .tip-cover {
451
+ position: fixed;
440
452
  left: 0;
441
453
  top: 0;
442
- right: 0;
443
- bottom: 0
454
+ width: 100%;
455
+ height: 100%;
456
+ display: -ms-flexbox;
457
+ display: flex;
458
+ -ms-flex-align: center;
459
+ align-items: center;
460
+ -ms-flex-pack: center;
461
+ justify-content: center;
462
+ z-index: 999;
463
+ background-color: rgba(0,0,0,.7)
444
464
  }
445
465
 
446
- #page-list .page-item {
447
- z-index: 0;
448
- overflow: hidden;
449
- display: none;
450
- visibility: hidden;
451
- transform-style: preserve-3d;
452
- -webkit-backface-visibility: hidden;
453
- backface-visibility: hidden;
454
- transition-timing-function: cubic-bezier(.1,.57,.1,1)
466
+ .tip-cover .tip {
467
+ width: 80%;
468
+ max-width: 250px;
469
+ padding: 5px;
470
+ border-radius: 3px;
471
+ background-color: #fff
455
472
  }
456
473
 
457
- #page-list .page-item .count-down {
458
- display: none
474
+ .tip-cover .tip-btn {
475
+ display: block;
476
+ margin: 13px auto;
477
+ width: 64px;
478
+ height: 20px;
479
+ color: #fff;
480
+ border-radius: 4px;
481
+ text-align: center;
482
+ font-size: 14px;
483
+ line-height: 20px;
484
+ background: #ed5566;
485
+ }
486
+ @keyframes jumpheart {
487
+ to {
488
+ -webkit-transform: scale(1.2);
489
+ transform: scale(1.2)
490
+ }
459
491
  }
460
-
461
- #page-list .page-item .has-ani {
462
- display: none!important
492
+ .ele-calendar {
493
+ position: relative;
494
+ width: 325px !important;
495
+ min-height: 325px !important;
496
+ height: auto !important;
463
497
  }
464
498
 
465
- #page-list .page-item .ele-effect,#page-list .page-item .page-bg {
466
- display: none
499
+ .ele-calendar .drag-point {
500
+ cursor: default !important;
467
501
  }
468
502
 
469
- #page-list .page-item .limit-ani .ani-wrap {
470
- animation: none!important
503
+ .ele-calendar .ani-wrap {
504
+ position: relative;
505
+ width: 100%;
506
+ min-height: 325px !important;
507
+ height: auto !important;
508
+ padding: 22px 0;
471
509
  }
472
510
 
473
- #page-list .page-item .ani-pause .ani-wrap {
474
- animation-play-state: paused!important;
475
- -webkit-animation-play-state: paused!important
511
+ .ele-calendar .ani-wrap .can-wrap .can-top {
512
+ display: flex;
513
+ justify-content: space-between;
514
+ align-items: flex-end;
515
+ line-height: 1;
516
+ padding: 0 47px 20px;
476
517
  }
477
518
 
478
- #page-list .page-item .showAniEle .has-ani {
479
- display: block!important
519
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
520
+ font-size: 25px;
521
+ padding-bottom: 4px;
480
522
  }
481
523
 
482
- #page-list .page-item .showAniEle .page-bg {
483
- display: block
524
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
525
+ font-size: 25px;
484
526
  }
485
527
 
486
- #page-list .page-item .scroll-wrap {
528
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
487
529
  position: relative;
488
- width: 100%;
489
- overflow: hidden;
490
- }
491
-
492
- #page-list .page-item .scroll-wrap.scroll-long .bg-wrap {
493
- position: absolute;
494
- top: 0;
495
- left: 0;
496
- right: 0;
497
- bottom: 0;
498
- z-index: -1;
499
- }
500
-
501
- #page-list .page-item .amap-maps {
502
- display: none
530
+ top: 2px;
531
+ font-size: 57px;
503
532
  }
504
533
 
505
- #page-list .page-item.current {
506
- z-index: 1;
507
- display: block;
508
- visibility: visible
534
+ .ele-calendar .ani-wrap .can-wrap .can-main {
535
+ padding: 0 23px;
509
536
  }
510
537
 
511
- #page-list .page-item.current .amap-maps,#page-list .page-item.current .count-down,#page-list .page-item.current .page-wrap .ele-effect {
512
- display: block
538
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
539
+ display: flex;
540
+ justify-content: flex-start;
541
+ height: 25px;
542
+ line-height: 25px;
543
+ padding: 0 10px;
544
+ border-radius: 13px;
513
545
  }
514
546
 
515
- #page-list .page-item.current .page-wrap .eles {
516
- text-align: left
547
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-week span {
548
+ width: 14.2%;
549
+ text-align: center;
550
+ color: #fff;
551
+ font-size: 12px;
517
552
  }
518
553
 
519
- #page-list .page-item.current .page-wrap .page-bg {
520
- display: block
554
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul {
555
+ font-size: 0;
556
+ padding: 5px 10px 0;
557
+ text-align: left;
521
558
  }
522
559
 
523
- #page-list .page-item.current .page-wrap .has-ani {
524
- display: block!important
560
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li {
561
+ position: relative;
562
+ display: inline-block;
563
+ height: 25px;
564
+ text-align: center;
565
+ margin-top: 8px;
525
566
  }
526
567
 
527
- #page-list .page-item.visibility {
568
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active .iconfont {
528
569
  display: block;
529
- visibility: hidden
530
570
  }
531
571
 
532
- #page-list .page-item.active {
533
- z-index: 2;
534
- visibility: visible
572
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active span {
573
+ color: #fff !important;
535
574
  }
536
575
 
537
- #page-list .page-item.active .amap-maps,#page-list .page-item.active .count-down {
538
- display: block
576
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
577
+ animation: jumpheart 0.8s ease infinite alternate;
539
578
  }
540
579
 
541
- #page-list .page-item .page-wrap {
542
- position: relative;
543
- width: 100%;
544
- height: 100%;
545
- overflow: hidden;
546
- z-index: 1
580
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
581
+ display: none;
582
+ font-size: 26px;
547
583
  }
548
584
 
549
- #page-list .page-item .page-wrap .ele-wrap,#page-list .page-item .page-wrap .page-bg {
585
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li span {
550
586
  position: absolute;
551
- right: 0;
552
- left: 0;
553
- top: 0;
554
- bottom: 0;
555
- width: 100%;
556
- height: 100%;
557
- overflow: hidden
558
- }
559
-
560
- #page-list .page-item .page-wrap .page-bg {
561
- background-size: cover;
562
- background-repeat: no-repeat;
563
- background-position: 50% 50%;
564
- z-index: 0
587
+ left: 50%;
588
+ top: 50%;
589
+ z-index: 1;
590
+ color: #666;
591
+ font-size: 13px;
592
+ transform: translate(-50%, -52%);
565
593
  }
566
594
 
567
- #page-list .page-item .page-wrap .ele-wrap {
568
- z-index: 1
595
+ .ele-calendar .bottom-center,
596
+ .ele-calendar .left-center,
597
+ .ele-calendar .right-center,
598
+ .ele-calendar .top-center {
599
+ display: none !important;
569
600
  }
570
601
 
571
- #page-list .page-item .page-wrap .eles {
572
- position: absolute
602
+ .ele-calendar .ani-wrap .can-wrap2 {
603
+ padding: 21px 23px 0
573
604
  }
574
605
 
575
-
576
- :deep(.vue-transition-group) {
577
- display: block;
578
- position: relative;
579
- width: 100%;
580
- height: 100%;
606
+ .ele-calendar .ani-wrap .can-wrap2 .can-top {
607
+ display: -webkit-box;
608
+ display: -ms-flexbox;
609
+ display: flex;
610
+ -webkit-box-pack: justify;
611
+ -ms-flex-pack: justify;
612
+ justify-content: space-between;
613
+ -webkit-box-align: end;
614
+ -ms-flex-align: end;
615
+ align-items: flex-end;
616
+ line-height: 1;
617
+ padding: 0 16px 22px;
618
+ font-size: 36px
581
619
  }
582
620
 
583
- .pages-wrapper {
584
- position: relative;
585
- width: 100%;
586
- height: 100%;
587
- overflow: hidden;
621
+ .ele-calendar .ani-wrap .can-wrap2 .can-top span {
622
+ font-size: 16px
588
623
  }
589
624
 
590
- .page-container {
591
- position: absolute;
592
- width: 100%;
593
- height: 100%;
594
- background-size: cover;
595
- background-position: center;
596
- will-change: transform;
597
- }
598
-
599
- .no-ani .ani-wrap,.no-ani .ele-text-long {
600
- animation: none!important
601
- }
602
-
603
- .scroll-mode .page-container {
604
- position: relative;
605
- min-height: 100vh;
606
- }
607
-
608
- .slide-enter-active, .slide-leave-active {
609
- -webkit-animation: slideToTop .6s ease-in both;
610
- animation: slideToTop .6s ease-in both
611
- }
612
- @-webkit-keyframes slideToTop {
613
- to {
614
- -webkit-transform: translateY(-100%);
615
- transform: translateY(-100%)
616
- }
617
- }
618
-
619
- @keyframes slideToTop {
620
- to {
621
- -webkit-transform: translateY(-100%);
622
- transform: translateY(-100%)
623
- }
624
- }
625
- .slide-enter-from {
626
- transform: translateX(100%);
627
- }
628
- .slide-leave-to {
629
- transform: translateX(-100%);
630
- }
631
-
632
- .rotateCube-enter-active, .rotateCube-leave-active {
633
- -webkit-transform-origin: 50% 100%;
634
- transform-origin: 50% 100%;
635
- -webkit-animation: rotateCubeTopOut .6s ease-in both;
636
- animation: rotateCubeTopOut .6s ease-in both
637
- }
638
- .rotateCube-enter-from {
639
- transform: translateX(100%);
640
- }
641
- .rotateCube-leave-to {
642
- transform: translateX(-100%);
625
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week {
626
+ display: -webkit-box;
627
+ display: -ms-flexbox;
628
+ display: flex;
629
+ -webkit-box-pack: start;
630
+ -ms-flex-pack: start;
631
+ justify-content: flex-start;
632
+ height: 25px;
633
+ line-height: 25px;
634
+ padding: 0 10px;
635
+ border-radius: 13px
643
636
  }
644
637
 
645
- .wind-enter-active, .wind-leave-active {
646
- -webkit-animation: windOut .5s ease-in both;
647
- animation: windOut .5s ease-in both
648
- }
649
- .wind-enter-from {
650
- transform: translateX(100%);
651
- }
652
- .wind-leave-to {
653
- transform: translateX(-100%);
638
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week span {
639
+ width: 14.2%;
640
+ text-align: center;
641
+ color: #fff;
642
+ font-size: 12px;
643
+ font-weight: 600
654
644
  }
655
645
 
656
- .popup-enter-active, .popup-leave-active {
657
- -webkit-transform-origin: 50% 100%;
658
- transform-origin: 50% 100%;
659
- -webkit-animation: rotateCarouselTopOut .7s ease both;
660
- animation: rotateCarouselTopOut .7s ease both
661
- }
662
- .popup-enter-from {
663
- transform: translateX(100%);
664
- }
665
- .popup-leave-to {
666
- transform: translateX(-100%);
646
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date {
647
+ position: relative
667
648
  }
668
649
 
669
- .scaleUpDown-enter-active, .scaleUpDown-leave-active {
670
- -webkit-animation: scaleUp .7s ease both;
671
- animation: scaleUp .7s ease both
672
- }
673
- .scaleUpDown-enter-from {
674
- transform: translateX(100%);
675
- }
676
- .scaleUpDown-leave-to {
677
- transform: translateX(-100%);
650
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date .can-year {
651
+ position: absolute;
652
+ white-space: nowrap;
653
+ left: 50%;
654
+ top: 15%;
655
+ -webkit-transform: translateX(-50%);
656
+ transform: translateX(-50%);
657
+ font-size: 76px;
658
+ opacity: .1;
659
+ font-weight: 600
678
660
  }
679
661
 
680
- .flipUpDown-enter-active, .flipUpDown-leave-active {
681
- -webkit-animation: rotatePushTop .7s ease both;
682
- animation: rotatePushTop .7s ease both
683
- }
684
- .flipUpDown-enter-from {
685
- transform: translateX(100%);
686
- }
687
- .flipUpDown-leave-to {
688
- transform: translateX(-100%);
662
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul {
663
+ font-size: 0;
664
+ padding: 5px 10px 0;
665
+ text-align: left
689
666
  }
690
667
 
691
- .cover-enter-active, .cover-leave-active {
692
- -webkit-animation: coverInDown .5s ease both;
693
- animation: coverInDown .5s ease both
694
- }
695
- .cover-enter-from {
696
- transform: translateX(100%);
697
- }
698
- .cover-leave-to {
699
- transform: translateX(-100%);
668
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li {
669
+ position: relative;
670
+ display: inline-block;
671
+ width: 14.2%;
672
+ height: 25px;
673
+ text-align: center;
674
+ margin-top: 8px
700
675
  }
701
676
 
702
- .inertia-enter-active, .inertia-leave-active {
703
- -webkit-animation: inertiaOut .6s ease both;
704
- animation: inertiaOut .6s ease both
705
- }
706
- @-webkit-keyframes inertiaOut {
707
- to {
708
- -webkit-transform: scale(.2);
709
- transform: scale(.2)
710
- }
677
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active .iconfont {
678
+ display: block;
679
+ position: absolute;
680
+ left: 17%;
681
+ top: 0;
682
+ font-size: 25px
711
683
  }
712
684
 
713
- @keyframes inertiaOut {
714
- to {
715
- -webkit-transform: scale(.2);
716
- transform: scale(.2)
717
- }
718
- }
719
- .inertia-enter-from {
720
- transform: translateX(100%);
721
- }
722
- .inertia-leave-to {
723
- transform: translateX(-100%);
685
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active span {
686
+ color: #fff!important
724
687
  }
725
688
 
726
- .push-enter-active, .push-leave-active {
727
- -webkit-transform-origin: center top;
728
- transform-origin: center top;
729
- -webkit-animation: pushInTop .6s linear .2s both;
730
- animation: pushInTop .6s linear .2s both
731
- }
732
- @-webkit-keyframes pushInTop {
733
- 0% {
734
- -webkit-transform: perspective(700px) rotateX(-90deg);
735
- transform: perspective(700px) rotateX(-90deg)
736
- }
689
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.heart-ani .iconfont {
690
+ -webkit-animation: jumpheart .8s ease infinite alternate;
691
+ animation: jumpheart .8s ease infinite alternate
737
692
  }
738
693
 
739
- @keyframes pushInTop {
740
- 0% {
741
- -webkit-transform: perspective(700px) rotateX(-90deg);
742
- transform: perspective(700px) rotateX(-90deg)
743
- }
744
- }
745
- .push-enter-from {
746
- transform: translateX(100%);
747
- }
748
- .push-leave-to {
749
- transform: translateX(-100%);
694
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li .iconfont {
695
+ display: none;
696
+ font-size: 26px
750
697
  }
751
698
 
752
- .drop-enter-active, .drop-leave-active {
753
- -webkit-transform-origin: 0 0;
754
- transform-origin: 0 0;
755
- -webkit-animation: dropOut .6s linear both;
756
- animation: dropOut .6s linear both
757
- }
758
- @-webkit-keyframes dropOut {
759
- 20% {
760
- -webkit-transform: rotate(5deg);
761
- transform: rotate(5deg)
699
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li span {
700
+ position: absolute;
701
+ left: 50%;
702
+ top: 50%;
703
+ z-index: 1;
704
+ color: #666;
705
+ font-size: 13px;
706
+ -webkit-transform: translate(-50%,-52%);
707
+ transform: translate(-50%,-52%)
762
708
  }
763
709
 
764
- to {
765
- opacity: .6;
766
- -webkit-transform: translate3d(0,100%,0);
767
- transform: translate3d(0,100%,0)
768
- }
710
+ .ele-calendar .ani-wrap .can-wrap3 .can-top {
711
+ display: -webkit-box;
712
+ display: -ms-flexbox;
713
+ display: flex;
714
+ -webkit-box-pack: justify;
715
+ -ms-flex-pack: justify;
716
+ justify-content: space-between;
717
+ -webkit-box-align: end;
718
+ -ms-flex-align: end;
719
+ align-items: flex-end;
720
+ line-height: 1;
721
+ padding: 18px 33px 10px;
722
+ font-size: 36px;
769
723
  }
770
724
 
771
- @keyframes dropOut {
772
- 20% {
773
- -webkit-transform: rotate(5deg);
774
- transform: rotate(5deg)
725
+ .ele-calendar .ani-wrap .can-wrap3 .can-top span {
726
+ font-size: 16px
775
727
  }
776
728
 
777
- to {
778
- opacity: .6;
779
- -webkit-transform: translate3d(0,100%,0);
780
- transform: translate3d(0,100%,0)
781
- }
729
+ .ele-calendar .ani-wrap .can-wrap3 .can-top .can-year {
730
+ font-size: 20px
782
731
  }
783
732
 
784
- .drop-enter-from {
785
- transform: translateX(100%);
786
- }
787
- .drop-leave-to {
788
- transform: translateX(-100%);
733
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week {
734
+ display: -webkit-box;
735
+ display: -ms-flexbox;
736
+ display: flex;
737
+ -webkit-box-pack: start;
738
+ -ms-flex-pack: start;
739
+ justify-content: flex-start;
740
+ height: 40px;
741
+ line-height: 40px;
742
+ padding: 0 34px;
743
+ border-bottom: 1px solid
789
744
  }
790
745
 
791
- .fadeIn-enter-active, .fadeIn-leave-active {
792
- -webkit-animation: pfadeIn .6s linear both;
793
- animation: pfadeIn .6s linear both
794
- }
795
- @-webkit-keyframes pfadeIn {
796
- 0% {
797
- opacity: 0
746
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week span {
747
+ width: 14.2%;
748
+ text-align: center;
749
+ color: #fff;
750
+ font-size: 12px;
751
+ font-weight: 600
798
752
  }
799
753
 
800
- to {
801
- opacity: 1
754
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date {
755
+ position: relative
802
756
  }
757
+
758
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul {
759
+ font-size: 0;
760
+ padding: 5px 33px 0;
761
+ text-align: left
803
762
  }
804
763
 
805
- @keyframes pfadeIn {
806
- 0% {
807
- opacity: 0
764
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li {
765
+ position: relative;
766
+ display: inline-block;
767
+ width: 14.2%;
768
+ height: 25px;
769
+ text-align: center;
770
+ margin-top: 8px;
808
771
  }
809
772
 
810
- to {
811
- opacity: 1
773
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active {
774
+ color: #eee
812
775
  }
776
+
777
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active .iconfont {
778
+ display: block;
779
+ position: absolute;
780
+ left: 12%;
781
+ top: 2px;
813
782
  }
814
- .fadeIn-enter-from {
815
- transform: translateX(100%);
783
+
784
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active span {
785
+ font-size: 12px
816
786
  }
817
- .fadeIn-leave-to {
818
- transform: translateX(-100%);
787
+
788
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.heart-ani .iconfont {
789
+ -webkit-animation: jumpheart .8s ease infinite alternate;
790
+ animation: jumpheart .8s ease infinite alternate
819
791
  }
820
792
 
821
- .zoomIn-enter-active, .zoomIn-leave-active {
822
- -webkit-animation: pzoomIn .6s linear both;
823
- animation: pzoomIn .6s linear both
793
+ @keyframes jumpheart {
794
+ to {
795
+ -webkit-transform: scale(1.2);
796
+ transform: scale(1.2)
797
+ }
824
798
  }
825
- @-webkit-keyframes pzoomIn {
826
- 0% {
827
- -webkit-transform: scale3d(0,0,0);
828
- transform: scale3d(0,0,0)
799
+
800
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li .iconfont {
801
+ display: none;
802
+ font-size: 26px
829
803
  }
804
+
805
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li span {
806
+ position: absolute;
807
+ left: 50%;
808
+ top: 50%;
809
+ z-index: 1;
810
+ color: #666;
811
+ font-size: 13px;
812
+ -webkit-transform: translate(-50%,-52%);
813
+ transform: translate(-50%,-52%)
830
814
  }
831
815
 
832
- @keyframes pzoomIn {
833
- 0% {
834
- -webkit-transform: scale3d(0,0,0);
835
- transform: scale3d(0,0,0)
816
+ .ele-calendar .bottom-center,.ele-calendar .left-center,.ele-calendar .right-center,.ele-calendar .top-center {
817
+ display: none!important
836
818
  }
819
+ .icon-tuoyuanxing:before {
820
+ content: "\E6A7";
837
821
  }
838
- .slide-enter-from {
839
- transform: translateX(100%);
822
+ .icon-zan1:before {
823
+ content: "\E66D";
840
824
  }
841
- .slide-leave-to {
842
- transform: translateX(-100%);
825
+ .icon-xingzhuangjiehe:before {
826
+ content: "\E6A6";
827
+ }.count-down .drag-point {
828
+ cursor: default!important
843
829
  }
844
830
 
845
- .btFadeIn-enter-active, .btFadeIn-leave-active {
846
- -webkit-animation: btFadeInTop .6s ease both;
847
- animation: btFadeInTop .6s ease both
848
- }
849
- @keyframes btFadeInTop {
850
- 0% {
851
- opacity: 0;
852
- -webkit-transform: translate3d(0,100%,0);
853
- transform: translate3d(0,100%,0)
854
- }
831
+ .count-down .ani-wrap {
832
+ width: 100%;
833
+ height: 100%
855
834
  }
856
835
 
857
- .btFadeIn-enter-from {
858
- transform: translateX(100%);
859
- }
860
- .btFadeIn-leave-to {
861
- transform: translateX(-100%);
836
+ .count-down .count-text,.count-down .finish-cont {
837
+ display: -webkit-box;
838
+ display: -ms-flexbox;
839
+ display: flex;
840
+ height: 100%;
841
+ -webkit-box-align: center;
842
+ -ms-flex-align: center;
843
+ align-items: center;
844
+ -webkit-box-pack: center;
845
+ -ms-flex-pack: center;
846
+ justify-content: center
862
847
  }
863
848
 
864
- .hideSoon-enter-active, .hideSoon-leave-active {
865
- visibility: hidden
866
- }
867
- .hideSoon-enter-from {
868
- transform: translateX(100%);
869
- }
870
- .hideSoon-leave-to {
871
- transform: translateX(-100%);
849
+ .count-down .finish-cont {
850
+ width: 100%
872
851
  }
873
852
 
874
- .upSlide-enter-active, .upSlide-leave-active {
875
- transition: transform 0.3s, opacity 0.3s;
876
- }
877
- .upSlide-enter-from, .upSlide-leave-to {
878
- transform: translateY(-100%);
879
- opacity: 0;
880
- }
881
- .upSlide-enter-to, .upSlide-leave-from {
882
- transform: translateY(0);
883
- opacity: 1;
853
+ .count-down .count-flip {
854
+ display: -webkit-box;
855
+ display: -ms-flexbox;
856
+ display: flex;
857
+ height: 100%;
858
+ -webkit-box-align: center;
859
+ -ms-flex-align: center;
860
+ align-items: center;
861
+ -webkit-box-pack: center;
862
+ -ms-flex-pack: center;
863
+ justify-content: center
884
864
  }
885
865
 
886
- .downSlide-enter-active, .downSlide-leave-active {
887
- transition: transform 0.3s, opacity 0.3s;
888
- }
889
- .downSlide-enter-from, .downSlide-leave-to {
890
- transform: translateY(100%);
891
- opacity: 0;
892
- }
893
- .downSlide-enter-to, .downSlide-leave-from {
894
- transform: translateY(0);
895
- opacity: 1;
866
+ .count-down .count-flip .numscroll {
867
+ -webkit-animation: numscroll .4s ease-in-out;
868
+ animation: numscroll .4s ease-in-out;
869
+ -webkit-animation-fill-mode: both;
870
+ animation-fill-mode: both
896
871
  }
897
872
 
898
- .leftSlide-enter-active, .leftSlide-leave-active {
899
- -webkit-animation: leftSlide .7s ease both;
900
- animation: leftSlide .7s ease both
901
- }
902
- @-webkit-keyframes leftSlide {
903
- 0% {
904
- -webkit-transform: translateX(-100%);
905
- transform: translateX(-100%)
873
+ .count-down .count-flip .numscroll .curr-num {
874
+ -webkit-transition: all .3s ease-in-out;
875
+ transition: all .3s ease-in-out;
876
+ opacity: .6;
877
+ -webkit-transform: scale(.5)!important;
878
+ transform: scale(.5)!important
906
879
  }
907
880
 
908
- to {
909
- -webkit-transform: translateX(0);
910
- transform: translateX(0)
911
- }
881
+ @-webkit-keyframes numscroll {
882
+ 0% {
883
+ -webkit-transform: translateZ(0);
884
+ transform: translateZ(0)
885
+ }
886
+
887
+ to {
888
+ -webkit-transform: translate3d(0,100%,0);
889
+ transform: translate3d(0,100%,0)
890
+ }
912
891
  }
913
892
 
914
- @keyframes leftSlide {
915
- 0% {
916
- -webkit-transform: translateX(-100%);
917
- transform: translateX(-100%)
893
+ @keyframes numscroll {
894
+ 0% {
895
+ -webkit-transform: translateZ(0);
896
+ transform: translateZ(0)
897
+ }
898
+
899
+ to {
900
+ -webkit-transform: translate3d(0,100%,0);
901
+ transform: translate3d(0,100%,0)
902
+ }
918
903
  }
919
904
 
920
- to {
921
- -webkit-transform: translateX(0);
922
- transform: translateX(0)
905
+ .count-down .count-flip .c-com {
906
+ min-width: 50px;
907
+ height: auto;
908
+ margin: 6px;
909
+ padding: 5px 0 6px;
910
+ background-color: #111
923
911
  }
912
+
913
+ .count-down .count-flip .c-com .flex-wrap {
914
+ display: -webkit-box;
915
+ display: -ms-flexbox;
916
+ display: flex;
917
+ position: relative;
918
+ width: 100%;
919
+ height: 100%;
920
+ -webkit-box-align: center;
921
+ -ms-flex-align: center;
922
+ align-items: center
924
923
  }
925
- .leftSlide-enter-from {
926
- transform: translateX(100%);
924
+
925
+ .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
926
+ line-height: 27px
927
927
  }
928
- .leftSlide-leave-to {
929
- transform: translateX(-100%);
928
+
929
+ .count-down .count-flip .c-com .flex-wrap .next-num {
930
+ position: absolute;
931
+ top: -100%
930
932
  }
931
933
 
932
- .rightSlide-enter-active, .rightSlide-leave-active {
933
- -webkit-animation: rightSlide .7s ease both;
934
- animation: rightSlide .7s ease both
934
+ .count-down .count-flip .c-com .flex-wrap .curr-num {
935
+ -webkit-transform: scale(1);
936
+ transform: scale(1)
935
937
  }
936
- @-webkit-keyframes rightSlide {
937
- 0% {
938
- -webkit-transform: translateX(100%);
939
- transform: translateX(100%)
938
+
939
+ .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 {
940
+ display: none!important
940
941
  }
941
942
 
942
- to {
943
- -webkit-transform: translateX(0);
944
- transform: translateX(0)
943
+ .c-wrap {
944
+ width: 100%;
945
+ height: 100%;
946
+ overflow: hidden;
947
+ font-size: 0
945
948
  }
949
+
950
+ .c-wrap.c-day-wrap {
951
+ text-align: center
946
952
  }
947
953
 
948
- @keyframes rightSlide {
949
- 0% {
950
- -webkit-transform: translateX(100%);
951
- transform: translateX(100%)
954
+ .c-wrap.c-day-wrap .c-num {
955
+ width: auto
952
956
  }
953
957
 
954
- to {
955
- -webkit-transform: translateX(0);
956
- transform: translateX(0)
958
+ .c-wrap .c-num {
959
+ display: inline-block;
960
+ width: 50%;
961
+ overflow: hidden;
962
+ font-size: 20px;
963
+ color: #999
957
964
  }
965
+
966
+ .c-wrap .c-left .flex-wrap {
967
+ display: -webkit-box;
968
+ display: -ms-flexbox;
969
+ display: flex;
970
+ -webkit-box-pack: end;
971
+ -ms-flex-pack: end;
972
+ justify-content: flex-end
958
973
  }
959
974
 
960
- .rightSlide-enter-from {
961
- transform: translateX(100%);
975
+ .c-wrap .c-text {
976
+ display: -webkit-box;
977
+ display: -ms-flexbox;
978
+ display: flex;
979
+ width: 100%;
980
+ font-size: 12px;
981
+ -webkit-box-pack: center;
982
+ -ms-flex-pack: center;
983
+ justify-content: center;
984
+ -webkit-box-align: center;
985
+ -ms-flex-align: center;
986
+ align-items: center;
987
+ white-space: nowrap
962
988
  }
963
- .rightSlide-leave-to {
964
- transform: translateX(-100%);
989
+ body, html {
990
+ width: 100%;
991
+ height: 100%;
965
992
  }
966
993
  * {
967
- -webkit-box-sizing: border-box;
968
- box-sizing: border-box;
969
- white-space: normal;
970
- word-break: break-all
994
+ padding: 0;
995
+ margin: 0;
996
+ box-sizing: border-box;
997
+ white-space: normal;
998
+ word-break: break-all;
999
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
971
1000
  }
972
1001
 
1002
+ @font-face {
1003
+ font-family: iconfont;
1004
+ src: url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.f1262e4.woff2) format("woff2"),
1005
+ url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.788d827.woff) format("woff"),
1006
+ url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.9541e59.ttf) format("truetype")
1007
+ }
973
1008
 
1009
+ .iconfont {
1010
+ font-family: "iconfont" !important;
1011
+ font-size: 16px;
1012
+ font-style: normal;
1013
+ -webkit-font-smoothing: antialiased;
1014
+ -moz-osx-font-smoothing: grayscale;
1015
+ }
974
1016
 
975
- @-webkit-keyframes slideToBottom {
976
- to {
977
- -webkit-transform: translateY(100%);
978
- transform: translateY(100%)
1017
+ #index {
1018
+ position: relative;
1019
+ width: 100%;
1020
+ height: 100%;
1021
+ overflow: hidden;
979
1022
  }
1023
+
1024
+ #page-list {
1025
+ position: relative;
1026
+ width: 100%;
1027
+ height: 100%;
1028
+ max-width: 800px;
1029
+ margin: 0 auto;
1030
+ z-index: 1
980
1031
  }
981
1032
 
982
- @keyframes slideToBottom {
983
- to {
984
- -webkit-transform: translateY(100%);
985
- transform: translateY(100%)
1033
+ #page-list.hardware .eles {
1034
+ will-change: transform
986
1035
  }
1036
+
1037
+ #page-list .bg-wrap {
1038
+ position: absolute;
1039
+ left: 0;
1040
+ top: 0;
1041
+ right: 0;
1042
+ bottom: 0;
1043
+ z-index: -1
987
1044
  }
988
1045
 
989
- @-webkit-keyframes slideFromTop {
990
- 0% {
991
- -webkit-transform: translateY(-100%);
992
- transform: translateY(-100%)
1046
+ #page-list .ani-pause .ani-wrap {
1047
+ animation-play-state: paused!important;
1048
+ -webkit-animation-play-state: paused!important
993
1049
  }
1050
+
1051
+ #page-list .audio-wrap {
1052
+ z-index: 10
994
1053
  }
995
1054
 
996
- @keyframes slideFromTop {
997
- 0% {
998
- -webkit-transform: translateY(-100%);
999
- transform: translateY(-100%)
1055
+ #page-list .audio-wrap,#page-list .page-item {
1056
+ position: absolute;
1057
+ left: 0;
1058
+ top: 0;
1059
+ right: 0;
1060
+ bottom: 0
1000
1061
  }
1062
+
1063
+ #page-list .page-item {
1064
+ z-index: 0;
1065
+ overflow: hidden;
1066
+ display: none;
1067
+ visibility: hidden;
1068
+ transform-style: preserve-3d;
1069
+ -webkit-backface-visibility: hidden;
1070
+ backface-visibility: hidden;
1071
+ transition-timing-function: cubic-bezier(.1,.57,.1,1)
1001
1072
  }
1002
1073
 
1003
- @-webkit-keyframes slideFromBottom {
1004
- 0% {
1005
- -webkit-transform: translateY(100%);
1006
- transform: translateY(100%)
1074
+ #page-list .page-item .count-down {
1075
+ display: none
1007
1076
  }
1077
+
1078
+ #page-list .page-item .has-ani {
1079
+ display: none!important
1008
1080
  }
1009
1081
 
1010
- @keyframes slideFromBottom {
1011
- 0% {
1012
- -webkit-transform: translateY(100%);
1013
- transform: translateY(100%)
1082
+ #page-list .page-item .ele-effect,#page-list .page-item .page-bg {
1083
+ display: none
1014
1084
  }
1085
+
1086
+ #page-list .page-item .limit-ani .ani-wrap {
1087
+ animation: none!important
1015
1088
  }
1016
1089
 
1017
- @-webkit-keyframes rotateCubeTopOut {
1018
- 50% {
1019
- -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1020
- transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1021
- -webkit-animation-timing-function: ease-out;
1022
- animation-timing-function: ease-out
1090
+ #page-list .page-item .ani-pause .ani-wrap {
1091
+ animation-play-state: paused!important;
1092
+ -webkit-animation-play-state: paused!important
1023
1093
  }
1024
1094
 
1025
- to {
1026
- opacity: .3;
1027
- -webkit-transform: translateY(-100%) rotateX(90deg);
1028
- transform: translateY(-100%) rotateX(90deg)
1095
+ #page-list .page-item .showAniEle .has-ani {
1096
+ display: block!important
1029
1097
  }
1098
+
1099
+ #page-list .page-item .showAniEle .page-bg {
1100
+ display: block
1030
1101
  }
1031
1102
 
1032
- @keyframes rotateCubeTopOut {
1033
- 50% {
1034
- -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1035
- transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1036
- -webkit-animation-timing-function: ease-out;
1037
- animation-timing-function: ease-out
1103
+ #page-list .page-item .scroll-wrap {
1104
+ position: relative;
1105
+ width: 100%;
1106
+ overflow: hidden;
1038
1107
  }
1039
1108
 
1040
- to {
1041
- opacity: .3;
1042
- -webkit-transform: translateY(-100%) rotateX(90deg);
1043
- transform: translateY(-100%) rotateX(90deg)
1109
+ #page-list .page-item .scroll-wrap.scroll-long .bg-wrap {
1110
+ position: absolute;
1111
+ top: 0;
1112
+ left: 0;
1113
+ right: 0;
1114
+ bottom: 0;
1115
+ z-index: -1;
1044
1116
  }
1117
+
1118
+ #page-list .page-item .amap-maps {
1119
+ display: none
1045
1120
  }
1046
1121
 
1047
- @-webkit-keyframes rotateCubeTopIn {
1048
- 0% {
1049
- opacity: .3;
1050
- -webkit-transform: translateY(100%) rotateX(-90deg);
1051
- transform: translateY(100%) rotateX(-90deg)
1122
+ #page-list .page-item.current {
1123
+ z-index: 1;
1124
+ display: block;
1125
+ visibility: visible
1052
1126
  }
1053
1127
 
1054
- 50% {
1055
- -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1056
- transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1057
- -webkit-animation-timing-function: ease-out;
1058
- animation-timing-function: ease-out
1128
+ #page-list .page-item.current .amap-maps,#page-list .page-item.current .count-down,#page-list .page-item.current .page-wrap .ele-effect {
1129
+ display: block
1059
1130
  }
1131
+
1132
+ #page-list .page-item.current .page-wrap .eles {
1133
+ text-align: left
1060
1134
  }
1061
1135
 
1062
- @keyframes rotateCubeTopIn {
1063
- 0% {
1064
- opacity: .3;
1065
- -webkit-transform: translateY(100%) rotateX(-90deg);
1066
- transform: translateY(100%) rotateX(-90deg)
1136
+ #page-list .page-item.current .page-wrap .page-bg {
1137
+ display: block
1067
1138
  }
1068
1139
 
1069
- 50% {
1070
- -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1071
- transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1072
- -webkit-animation-timing-function: ease-out;
1073
- animation-timing-function: ease-out
1140
+ #page-list .page-item.current .page-wrap .has-ani {
1141
+ display: block!important
1074
1142
  }
1143
+
1144
+ #page-list .page-item.visibility {
1145
+ display: block;
1146
+ visibility: hidden
1075
1147
  }
1076
1148
 
1077
- @-webkit-keyframes rotateCubeBottomOut {
1078
- 50% {
1079
- -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1080
- transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1081
- -webkit-animation-timing-function: ease-out;
1082
- animation-timing-function: ease-out
1149
+ #page-list .page-item.active {
1150
+ z-index: 2;
1151
+ visibility: visible
1083
1152
  }
1084
1153
 
1085
- to {
1086
- opacity: .3;
1087
- -webkit-transform: translateY(100%) rotateX(-90deg);
1088
- transform: translateY(100%) rotateX(-90deg)
1154
+ #page-list .page-item.active .amap-maps,#page-list .page-item.active .count-down {
1155
+ display: block
1156
+ }
1157
+
1158
+ #page-list .page-item .page-wrap {
1159
+ position: relative;
1160
+ width: 100%;
1161
+ height: 100%;
1162
+ overflow: hidden;
1163
+ z-index: 1
1089
1164
  }
1165
+
1166
+ #page-list .page-item .page-wrap .ele-wrap,#page-list .page-item .page-wrap .page-bg {
1167
+ position: absolute;
1168
+ right: 0;
1169
+ left: 0;
1170
+ top: 0;
1171
+ bottom: 0;
1172
+ width: 100%;
1173
+ height: 100%;
1174
+ overflow: hidden
1090
1175
  }
1091
1176
 
1092
- @keyframes rotateCubeBottomOut {
1093
- 50% {
1094
- -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1095
- transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1096
- -webkit-animation-timing-function: ease-out;
1097
- animation-timing-function: ease-out
1177
+ #page-list .page-item .page-wrap .page-bg {
1178
+ background-size: cover;
1179
+ background-repeat: no-repeat;
1180
+ background-position: 50% 50%;
1181
+ z-index: 0
1098
1182
  }
1099
1183
 
1100
- to {
1101
- opacity: .3;
1102
- -webkit-transform: translateY(100%) rotateX(-90deg);
1103
- transform: translateY(100%) rotateX(-90deg)
1104
- }
1184
+ #page-list .page-item .page-wrap .ele-wrap {
1185
+ z-index: 1
1105
1186
  }
1106
1187
 
1107
- @-webkit-keyframes rotateCubeBottomIn {
1108
- 0% {
1109
- opacity: .3;
1110
- -webkit-transform: translateY(-100%) rotateX(90deg);
1111
- transform: translateY(-100%) rotateX(90deg)
1188
+ #page-list .page-item .page-wrap .eles {
1189
+ position: absolute
1112
1190
  }
1113
1191
 
1114
- 50% {
1115
- -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1116
- transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1117
- -webkit-animation-timing-function: ease-out;
1118
- animation-timing-function: ease-out
1192
+
1193
+ :deep(.vue-transition-group) {
1194
+ display: block;
1195
+ position: relative;
1196
+ width: 100%;
1197
+ height: 100%;
1119
1198
  }
1199
+
1200
+ .pages-wrapper {
1201
+ position: relative;
1202
+ width: 100%;
1203
+ height: 100%;
1204
+ overflow: hidden;
1120
1205
  }
1121
1206
 
1122
- @keyframes rotateCubeBottomIn {
1123
- 0% {
1124
- opacity: .3;
1125
- -webkit-transform: translateY(-100%) rotateX(90deg);
1126
- transform: translateY(-100%) rotateX(90deg)
1207
+ .page-container {
1208
+ position: absolute;
1209
+ width: 100%;
1210
+ height: 100%;
1211
+ background-size: cover;
1212
+ background-position: center;
1213
+ will-change: transform;
1127
1214
  }
1128
1215
 
1129
- 50% {
1130
- -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1131
- transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1132
- -webkit-animation-timing-function: ease-out;
1133
- animation-timing-function: ease-out
1216
+ .no-ani .ani-wrap,.no-ani .ele-text-long {
1217
+ animation: none!important
1134
1218
  }
1219
+
1220
+ .scroll-mode .page-container {
1221
+ position: relative;
1222
+ min-height: 100vh;
1135
1223
  }
1136
1224
 
1137
- @-webkit-keyframes windOut {
1225
+ .slide-enter-active, .slide-leave-active {
1226
+ -webkit-animation: slideToTop .6s ease-in both;
1227
+ animation: slideToTop .6s ease-in both
1228
+ }
1229
+ @-webkit-keyframes slideToTop {
1138
1230
  to {
1139
- opacity: 0;
1140
- -webkit-transform: translateZ(-3000px) rotate(1turn);
1141
- transform: translateZ(-3000px) rotate(1turn)
1231
+ -webkit-transform: translateY(-100%);
1232
+ transform: translateY(-100%)
1142
1233
  }
1143
1234
  }
1144
1235
 
1145
- @keyframes windOut {
1236
+ @keyframes slideToTop {
1146
1237
  to {
1147
- opacity: 0;
1148
- -webkit-transform: translateZ(-3000px) rotate(1turn);
1149
- transform: translateZ(-3000px) rotate(1turn)
1238
+ -webkit-transform: translateY(-100%);
1239
+ transform: translateY(-100%)
1240
+ }
1150
1241
  }
1242
+ .slide-enter-from {
1243
+ transform: translateX(100%);
1244
+ }
1245
+ .slide-leave-to {
1246
+ transform: translateX(-100%);
1151
1247
  }
1152
1248
 
1153
- @-webkit-keyframes windIn {
1154
- 0% {
1155
- opacity: 0;
1156
- -webkit-transform: translateZ(-3000px) rotate(-1turn);
1157
- transform: translateZ(-3000px) rotate(-1turn)
1249
+ .rotateCube-enter-active, .rotateCube-leave-active {
1250
+ -webkit-transform-origin: 50% 100%;
1251
+ transform-origin: 50% 100%;
1252
+ -webkit-animation: rotateCubeTopOut .6s ease-in both;
1253
+ animation: rotateCubeTopOut .6s ease-in both
1254
+ }
1255
+ .rotateCube-enter-from {
1256
+ transform: translateX(100%);
1158
1257
  }
1258
+ .rotateCube-leave-to {
1259
+ transform: translateX(-100%);
1159
1260
  }
1160
1261
 
1161
- @keyframes windIn {
1162
- 0% {
1163
- opacity: 0;
1164
- -webkit-transform: translateZ(-3000px) rotate(-1turn);
1165
- transform: translateZ(-3000px) rotate(-1turn)
1262
+ .wind-enter-active, .wind-leave-active {
1263
+ -webkit-animation: windOut .5s ease-in both;
1264
+ animation: windOut .5s ease-in both
1166
1265
  }
1266
+ .wind-enter-from {
1267
+ transform: translateX(100%);
1268
+ }
1269
+ .wind-leave-to {
1270
+ transform: translateX(-100%);
1167
1271
  }
1168
1272
 
1169
- @-webkit-keyframes rotateCarouselTopOut {
1170
- to {
1171
- opacity: .3;
1172
- -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
1173
- transform: translateY(-150%) scale(.4) rotateX(65deg)
1273
+ .popup-enter-active, .popup-leave-active {
1274
+ -webkit-transform-origin: 50% 100%;
1275
+ transform-origin: 50% 100%;
1276
+ -webkit-animation: rotateCarouselTopOut .7s ease both;
1277
+ animation: rotateCarouselTopOut .7s ease both
1278
+ }
1279
+ .popup-enter-from {
1280
+ transform: translateX(100%);
1174
1281
  }
1282
+ .popup-leave-to {
1283
+ transform: translateX(-100%);
1175
1284
  }
1176
1285
 
1177
- @keyframes rotateCarouselTopOut {
1178
- to {
1179
- opacity: .3;
1180
- -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
1181
- transform: translateY(-150%) scale(.4) rotateX(65deg)
1286
+ .scaleUpDown-enter-active, .scaleUpDown-leave-active {
1287
+ -webkit-animation: scaleUp .7s ease both;
1288
+ animation: scaleUp .7s ease both
1182
1289
  }
1290
+ .scaleUpDown-enter-from {
1291
+ transform: translateX(100%);
1292
+ }
1293
+ .scaleUpDown-leave-to {
1294
+ transform: translateX(-100%);
1183
1295
  }
1184
1296
 
1185
- @-webkit-keyframes rotateCarouselTopIn {
1186
- 0% {
1187
- opacity: .3;
1188
- -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
1189
- transform: translateY(150%) scale(.4) rotateX(-65deg)
1297
+ .flipUpDown-enter-active, .flipUpDown-leave-active {
1298
+ -webkit-animation: rotatePushTop .7s ease both;
1299
+ animation: rotatePushTop .7s ease both
1300
+ }
1301
+ .flipUpDown-enter-from {
1302
+ transform: translateX(100%);
1190
1303
  }
1304
+ .flipUpDown-leave-to {
1305
+ transform: translateX(-100%);
1191
1306
  }
1192
1307
 
1193
- @keyframes rotateCarouselTopIn {
1194
- 0% {
1195
- opacity: .3;
1196
- -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
1197
- transform: translateY(150%) scale(.4) rotateX(-65deg)
1308
+ .cover-enter-active, .cover-leave-active {
1309
+ -webkit-animation: coverInDown .5s ease both;
1310
+ animation: coverInDown .5s ease both
1311
+ }
1312
+ .cover-enter-from {
1313
+ transform: translateX(100%);
1198
1314
  }
1315
+ .cover-leave-to {
1316
+ transform: translateX(-100%);
1199
1317
  }
1200
1318
 
1201
- @-webkit-keyframes rotateCarouselBottomOut {
1319
+ .inertia-enter-active, .inertia-leave-active {
1320
+ -webkit-animation: inertiaOut .6s ease both;
1321
+ animation: inertiaOut .6s ease both
1322
+ }
1323
+ @-webkit-keyframes inertiaOut {
1202
1324
  to {
1203
- opacity: .3;
1204
- -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
1205
- transform: translateY(150%) scale(.4) rotateX(-65deg)
1325
+ -webkit-transform: scale(.2);
1326
+ transform: scale(.2)
1206
1327
  }
1207
1328
  }
1208
1329
 
1209
- @keyframes rotateCarouselBottomOut {
1330
+ @keyframes inertiaOut {
1210
1331
  to {
1211
- opacity: .3;
1212
- -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
1213
- transform: translateY(150%) scale(.4) rotateX(-65deg)
1332
+ -webkit-transform: scale(.2);
1333
+ transform: scale(.2)
1334
+ }
1335
+ }
1336
+ .inertia-enter-from {
1337
+ transform: translateX(100%);
1214
1338
  }
1339
+ .inertia-leave-to {
1340
+ transform: translateX(-100%);
1215
1341
  }
1216
1342
 
1217
- @-webkit-keyframes rotateCarouselBottomIn {
1343
+ .push-enter-active, .push-leave-active {
1344
+ -webkit-transform-origin: center top;
1345
+ transform-origin: center top;
1346
+ -webkit-animation: pushInTop .6s linear .2s both;
1347
+ animation: pushInTop .6s linear .2s both
1348
+ }
1349
+ @-webkit-keyframes pushInTop {
1218
1350
  0% {
1219
- opacity: .3;
1220
- -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
1221
- transform: translateY(-150%) scale(.4) rotateX(65deg)
1351
+ -webkit-transform: perspective(700px) rotateX(-90deg);
1352
+ transform: perspective(700px) rotateX(-90deg)
1222
1353
  }
1223
1354
  }
1224
1355
 
1225
- @keyframes rotateCarouselBottomIn {
1356
+ @keyframes pushInTop {
1226
1357
  0% {
1227
- opacity: .3;
1228
- -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
1229
- transform: translateY(-150%) scale(.4) rotateX(65deg)
1358
+ -webkit-transform: perspective(700px) rotateX(-90deg);
1359
+ transform: perspective(700px) rotateX(-90deg)
1360
+ }
1230
1361
  }
1362
+ .push-enter-from {
1363
+ transform: translateX(100%);
1364
+ }
1365
+ .push-leave-to {
1366
+ transform: translateX(-100%);
1231
1367
  }
1232
1368
 
1233
- @-webkit-keyframes scaleDown {
1234
- to {
1235
- opacity: 0;
1236
- -webkit-transform: scale(.8);
1237
- transform: scale(.8)
1369
+ .drop-enter-active, .drop-leave-active {
1370
+ -webkit-transform-origin: 0 0;
1371
+ transform-origin: 0 0;
1372
+ -webkit-animation: dropOut .6s linear both;
1373
+ animation: dropOut .6s linear both
1238
1374
  }
1375
+ @-webkit-keyframes dropOut {
1376
+ 20% {
1377
+ -webkit-transform: rotate(5deg);
1378
+ transform: rotate(5deg)
1239
1379
  }
1240
1380
 
1241
- @keyframes scaleDown {
1242
1381
  to {
1243
- opacity: 0;
1244
- -webkit-transform: scale(.8);
1245
- transform: scale(.8)
1382
+ opacity: .6;
1383
+ -webkit-transform: translate3d(0,100%,0);
1384
+ transform: translate3d(0,100%,0)
1246
1385
  }
1247
1386
  }
1248
1387
 
1249
- @-webkit-keyframes scaleUp {
1250
- 0% {
1251
- opacity: 0;
1252
- -webkit-transform: scale(.8);
1253
- transform: scale(.8)
1388
+ @keyframes dropOut {
1389
+ 20% {
1390
+ -webkit-transform: rotate(5deg);
1391
+ transform: rotate(5deg)
1392
+ }
1393
+
1394
+ to {
1395
+ opacity: .6;
1396
+ -webkit-transform: translate3d(0,100%,0);
1397
+ transform: translate3d(0,100%,0)
1254
1398
  }
1255
1399
  }
1256
1400
 
1257
- @keyframes scaleUp {
1258
- 0% {
1259
- opacity: 0;
1260
- -webkit-transform: scale(.8);
1261
- transform: scale(.8)
1401
+ .drop-enter-from {
1402
+ transform: translateX(100%);
1262
1403
  }
1404
+ .drop-leave-to {
1405
+ transform: translateX(-100%);
1263
1406
  }
1264
1407
 
1265
- @-webkit-keyframes scaleUpDown {
1266
- 0% {
1267
- opacity: 0;
1268
- -webkit-transform: scale(1.2);
1269
- transform: scale(1.2)
1270
- }
1408
+ .fadeIn-enter-active, .fadeIn-leave-active {
1409
+ -webkit-animation: pfadeIn .6s linear both;
1410
+ animation: pfadeIn .6s linear both
1271
1411
  }
1272
-
1273
- @keyframes scaleUpDown {
1412
+ @-webkit-keyframes pfadeIn {
1274
1413
  0% {
1275
- opacity: 0;
1276
- -webkit-transform: scale(1.2);
1277
- transform: scale(1.2)
1278
- }
1414
+ opacity: 0
1279
1415
  }
1280
1416
 
1281
- @-webkit-keyframes scaleDownUp {
1282
1417
  to {
1283
- opacity: 0;
1284
- -webkit-transform: scale(1.2);
1285
- transform: scale(1.2)
1418
+ opacity: 1
1286
1419
  }
1287
1420
  }
1288
1421
 
1289
- @keyframes scaleDownUp {
1290
- to {
1291
- opacity: 0;
1292
- -webkit-transform: scale(1.2);
1293
- transform: scale(1.2)
1294
- }
1422
+ @keyframes pfadeIn {
1423
+ 0% {
1424
+ opacity: 0
1295
1425
  }
1296
1426
 
1297
- @-webkit-keyframes scaleDownCenter {
1298
1427
  to {
1299
- opacity: 0;
1300
- -webkit-transform: scale(.7);
1301
- transform: scale(.7)
1428
+ opacity: 1
1302
1429
  }
1303
1430
  }
1304
-
1305
- @keyframes scaleDownCenter {
1306
- to {
1307
- opacity: 0;
1308
- -webkit-transform: scale(.7);
1309
- transform: scale(.7)
1431
+ .fadeIn-enter-from {
1432
+ transform: translateX(100%);
1310
1433
  }
1434
+ .fadeIn-leave-to {
1435
+ transform: translateX(-100%);
1311
1436
  }
1312
1437
 
1313
- @-webkit-keyframes scaleUpCenter {
1438
+ .zoomIn-enter-active, .zoomIn-leave-active {
1439
+ -webkit-animation: pzoomIn .6s linear both;
1440
+ animation: pzoomIn .6s linear both
1441
+ }
1442
+ @-webkit-keyframes pzoomIn {
1314
1443
  0% {
1315
- opacity: 0;
1316
- -webkit-transform: scale(.7);
1317
- transform: scale(.7)
1444
+ -webkit-transform: scale3d(0,0,0);
1445
+ transform: scale3d(0,0,0)
1318
1446
  }
1319
1447
  }
1320
1448
 
1321
- @keyframes scaleUpCenter {
1449
+ @keyframes pzoomIn {
1322
1450
  0% {
1323
- opacity: 0;
1324
- -webkit-transform: scale(.7);
1325
- transform: scale(.7)
1451
+ -webkit-transform: scale3d(0,0,0);
1452
+ transform: scale3d(0,0,0)
1326
1453
  }
1327
1454
  }
1328
-
1329
- @-webkit-keyframes rotatePushTop {
1330
- to {
1331
- opacity: 0;
1332
- -webkit-transform: rotateX(-90deg);
1333
- transform: rotateX(-90deg)
1455
+ .slide-enter-from {
1456
+ transform: translateX(100%);
1334
1457
  }
1458
+ .slide-leave-to {
1459
+ transform: translateX(-100%);
1335
1460
  }
1336
1461
 
1337
- @keyframes rotatePushTop {
1338
- to {
1339
- opacity: 0;
1340
- -webkit-transform: rotateX(-90deg);
1341
- transform: rotateX(-90deg)
1342
- }
1462
+ .btFadeIn-enter-active, .btFadeIn-leave-active {
1463
+ -webkit-animation: btFadeInTop .6s ease both;
1464
+ animation: btFadeInTop .6s ease both
1343
1465
  }
1344
-
1345
- @-webkit-keyframes rotatePushBottom {
1346
- to {
1466
+ @keyframes btFadeInTop {
1467
+ 0% {
1347
1468
  opacity: 0;
1348
- -webkit-transform: rotateX(90deg);
1349
- transform: rotateX(90deg)
1469
+ -webkit-transform: translate3d(0,100%,0);
1470
+ transform: translate3d(0,100%,0)
1350
1471
  }
1351
1472
  }
1352
1473
 
1353
- @keyframes rotatePushBottom {
1354
- to {
1355
- opacity: 0;
1356
- -webkit-transform: rotateX(90deg);
1357
- transform: rotateX(90deg)
1474
+ .btFadeIn-enter-from {
1475
+ transform: translateX(100%);
1358
1476
  }
1477
+ .btFadeIn-leave-to {
1478
+ transform: translateX(-100%);
1359
1479
  }
1360
1480
 
1361
- @-webkit-keyframes rotatePullTop {
1362
- 0% {
1363
- opacity: 0;
1364
- -webkit-transform: rotateX(-90deg);
1365
- transform: rotateX(-90deg)
1481
+ .hideSoon-enter-active, .hideSoon-leave-active {
1482
+ visibility: hidden
1483
+ }
1484
+ .hideSoon-enter-from {
1485
+ transform: translateX(100%);
1366
1486
  }
1487
+ .hideSoon-leave-to {
1488
+ transform: translateX(-100%);
1367
1489
  }
1368
1490
 
1369
- @keyframes rotatePullTop {
1370
- 0% {
1371
- opacity: 0;
1372
- -webkit-transform: rotateX(-90deg);
1373
- transform: rotateX(-90deg)
1491
+ .upSlide-enter-active, .upSlide-leave-active {
1492
+ transition: transform 0.3s, opacity 0.3s;
1493
+ }
1494
+ .upSlide-enter-from, .upSlide-leave-to {
1495
+ transform: translateY(-100%);
1496
+ opacity: 0;
1374
1497
  }
1498
+ .upSlide-enter-to, .upSlide-leave-from {
1499
+ transform: translateY(0);
1500
+ opacity: 1;
1375
1501
  }
1376
1502
 
1377
- @-webkit-keyframes rotatePullBottom {
1378
- 0% {
1379
- opacity: 0;
1380
- -webkit-transform: rotateX(90deg);
1381
- transform: rotateX(90deg)
1503
+ .downSlide-enter-active, .downSlide-leave-active {
1504
+ transition: transform 0.3s, opacity 0.3s;
1382
1505
  }
1506
+ .downSlide-enter-from, .downSlide-leave-to {
1507
+ transform: translateY(100%);
1508
+ opacity: 0;
1509
+ }
1510
+ .downSlide-enter-to, .downSlide-leave-from {
1511
+ transform: translateY(0);
1512
+ opacity: 1;
1383
1513
  }
1384
1514
 
1385
- @keyframes rotatePullBottom {
1386
- 0% {
1387
- opacity: 0;
1388
- -webkit-transform: rotateX(90deg);
1389
- transform: rotateX(90deg)
1515
+ .leftSlide-enter-active, .leftSlide-leave-active {
1516
+ -webkit-animation: leftSlide .7s ease both;
1517
+ animation: leftSlide .7s ease both
1390
1518
  }
1519
+ @-webkit-keyframes leftSlide {
1520
+ 0% {
1521
+ -webkit-transform: translateX(-100%);
1522
+ transform: translateX(-100%)
1391
1523
  }
1392
1524
 
1393
- @-webkit-keyframes coverInUp {
1394
- 0% {
1395
- -webkit-transform: translate3d(0,-100%,0);
1396
- transform: translate3d(0,-100%,0)
1525
+ to {
1526
+ -webkit-transform: translateX(0);
1527
+ transform: translateX(0)
1397
1528
  }
1398
1529
  }
1399
1530
 
1400
- @keyframes coverInUp {
1531
+ @keyframes leftSlide {
1401
1532
  0% {
1402
- -webkit-transform: translate3d(0,-100%,0);
1403
- transform: translate3d(0,-100%,0)
1404
- }
1533
+ -webkit-transform: translateX(-100%);
1534
+ transform: translateX(-100%)
1405
1535
  }
1406
1536
 
1407
- @-webkit-keyframes coverInDown {
1408
- 0% {
1409
- -webkit-transform: translate3d(0,100%,0);
1410
- transform: translate3d(0,100%,0)
1537
+ to {
1538
+ -webkit-transform: translateX(0);
1539
+ transform: translateX(0)
1411
1540
  }
1412
1541
  }
1413
-
1414
- @keyframes coverInDown {
1415
- 0% {
1416
- -webkit-transform: translate3d(0,100%,0);
1417
- transform: translate3d(0,100%,0)
1542
+ .leftSlide-enter-from {
1543
+ transform: translateX(100%);
1418
1544
  }
1545
+ .leftSlide-leave-to {
1546
+ transform: translateX(-100%);
1419
1547
  }
1420
1548
 
1421
- .rotateInReverse {
1422
- -webkit-animation-name: rotateInReverse;
1423
- animation-name: rotateInReverse
1549
+ .rightSlide-enter-active, .rightSlide-leave-active {
1550
+ -webkit-animation: rightSlide .7s ease both;
1551
+ animation: rightSlide .7s ease both
1424
1552
  }
1425
-
1426
- @-webkit-keyframes rotateInReverse {
1553
+ @-webkit-keyframes rightSlide {
1427
1554
  0% {
1428
- opacity: 0;
1429
- -webkit-transform: rotate(200deg);
1430
- transform: rotate(200deg);
1431
- -webkit-transform-origin: center;
1432
- transform-origin: center
1555
+ -webkit-transform: translateX(100%);
1556
+ transform: translateX(100%)
1433
1557
  }
1434
1558
 
1435
1559
  to {
1436
- opacity: 1;
1437
- -webkit-transform: none;
1438
- transform: none;
1439
- -webkit-transform-origin: center;
1440
- transform-origin: center
1560
+ -webkit-transform: translateX(0);
1561
+ transform: translateX(0)
1441
1562
  }
1442
1563
  }
1443
1564
 
1444
- @keyframes rotateInReverse {
1565
+ @keyframes rightSlide {
1445
1566
  0% {
1446
- opacity: 0;
1447
- -webkit-transform: rotate(200deg);
1448
- transform: rotate(200deg);
1449
- -webkit-transform-origin: center;
1450
- transform-origin: center
1567
+ -webkit-transform: translateX(100%);
1568
+ transform: translateX(100%)
1451
1569
  }
1452
1570
 
1453
1571
  to {
1454
- opacity: 1;
1455
- -webkit-transform: none;
1456
- transform: none;
1457
- -webkit-transform-origin: center;
1458
- transform-origin: center
1572
+ -webkit-transform: translateX(0);
1573
+ transform: translateX(0)
1459
1574
  }
1460
1575
  }
1461
1576
 
1462
- .zoomInBig {
1463
- -webkit-animation-name: zoomInBig;
1464
- animation-name: zoomInBig;
1465
- -webkit-animation-timing-function: cubic-bezier(0,.44,.75,.99);
1466
- animation-timing-function: cubic-bezier(0,.44,.75,.99)
1577
+ .rightSlide-enter-from {
1578
+ transform: translateX(100%);
1579
+ }
1580
+ .rightSlide-leave-to {
1581
+ transform: translateX(-100%);
1582
+ }
1583
+ * {
1584
+ -webkit-box-sizing: border-box;
1585
+ box-sizing: border-box;
1586
+ white-space: normal;
1587
+ word-break: break-all
1467
1588
  }
1468
1589
 
1469
- @-webkit-keyframes zoomInBig {
1470
- 0% {
1471
- opacity: 0;
1472
- -webkit-transform: scale3d(2,2,2);
1473
- transform: scale3d(2,2,2)
1590
+
1591
+
1592
+ @-webkit-keyframes slideToBottom {
1593
+ to {
1594
+ -webkit-transform: translateY(100%);
1595
+ transform: translateY(100%)
1474
1596
  }
1475
-
1476
- 50% {
1477
- opacity: 1
1478
1597
  }
1479
1598
 
1480
- 80% {
1481
- -webkit-transform: scaleX(1);
1482
- transform: scaleX(1)
1599
+ @keyframes slideToBottom {
1600
+ to {
1601
+ -webkit-transform: translateY(100%);
1602
+ transform: translateY(100%)
1483
1603
  }
1484
1604
  }
1485
1605
 
1486
- @keyframes zoomInBig {
1606
+ @-webkit-keyframes slideFromTop {
1487
1607
  0% {
1488
- opacity: 0;
1489
- -webkit-transform: scale3d(2,2,2);
1490
- transform: scale3d(2,2,2)
1608
+ -webkit-transform: translateY(-100%);
1609
+ transform: translateY(-100%)
1491
1610
  }
1492
-
1493
- 50% {
1494
- opacity: 1
1495
1611
  }
1496
1612
 
1497
- 80% {
1498
- -webkit-transform: scaleX(1);
1499
- transform: scaleX(1)
1613
+ @keyframes slideFromTop {
1614
+ 0% {
1615
+ -webkit-transform: translateY(-100%);
1616
+ transform: translateY(-100%)
1500
1617
  }
1501
1618
  }
1502
1619
 
1503
- .flyIn {
1504
- -webkit-animation-name: flyIn;
1505
- animation-name: flyIn
1620
+ @-webkit-keyframes slideFromBottom {
1621
+ 0% {
1622
+ -webkit-transform: translateY(100%);
1623
+ transform: translateY(100%)
1506
1624
  }
1507
-
1508
- @-webkit-keyframes flyIn {
1509
- 0%,20%,40%,60%,80%,to {
1510
- -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
1511
- transition-timing-function: cubic-bezier(.215,.61,.355,1)
1512
1625
  }
1513
1626
 
1627
+ @keyframes slideFromBottom {
1514
1628
  0% {
1515
- opacity: 0;
1516
- -webkit-transform: scale3d(2,2,2);
1517
- transform: scale3d(2,2,2)
1629
+ -webkit-transform: translateY(100%);
1630
+ transform: translateY(100%)
1631
+ }
1518
1632
  }
1519
1633
 
1520
- 40% {
1521
- -webkit-transform: scale3d(.9,.9,.9);
1522
- transform: scale3d(.9,.9,.9)
1634
+ @-webkit-keyframes rotateCubeTopOut {
1635
+ 50% {
1636
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1637
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1638
+ -webkit-animation-timing-function: ease-out;
1639
+ animation-timing-function: ease-out
1523
1640
  }
1524
1641
 
1525
- 60% {
1526
- -webkit-transform: scale3d(1.03,1.03,1.03);
1527
- transform: scale3d(1.03,1.03,1.03)
1642
+ to {
1643
+ opacity: .3;
1644
+ -webkit-transform: translateY(-100%) rotateX(90deg);
1645
+ transform: translateY(-100%) rotateX(90deg)
1646
+ }
1528
1647
  }
1529
1648
 
1530
- 80% {
1531
- opacity: 1;
1532
- -webkit-transform: scale3d(.97,.97,.97);
1533
- transform: scale3d(.97,.97,.97)
1649
+ @keyframes rotateCubeTopOut {
1650
+ 50% {
1651
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1652
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1653
+ -webkit-animation-timing-function: ease-out;
1654
+ animation-timing-function: ease-out
1534
1655
  }
1535
1656
 
1536
1657
  to {
1537
- -webkit-transform: scaleX(1);
1538
- transform: scaleX(1)
1539
- }
1658
+ opacity: .3;
1659
+ -webkit-transform: translateY(-100%) rotateX(90deg);
1660
+ transform: translateY(-100%) rotateX(90deg)
1540
1661
  }
1541
-
1542
- @keyframes flyIn {
1543
- 0%,20%,40%,60%,80%,to {
1544
- -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
1545
- transition-timing-function: cubic-bezier(.215,.61,.355,1)
1546
1662
  }
1547
1663
 
1664
+ @-webkit-keyframes rotateCubeTopIn {
1548
1665
  0% {
1549
- opacity: 0;
1550
- -webkit-transform: scale3d(2,2,2);
1551
- transform: scale3d(2,2,2)
1666
+ opacity: .3;
1667
+ -webkit-transform: translateY(100%) rotateX(-90deg);
1668
+ transform: translateY(100%) rotateX(-90deg)
1552
1669
  }
1553
1670
 
1554
- 40% {
1555
- -webkit-transform: scale3d(.9,.9,.9);
1556
- transform: scale3d(.9,.9,.9)
1671
+ 50% {
1672
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1673
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1674
+ -webkit-animation-timing-function: ease-out;
1675
+ animation-timing-function: ease-out
1557
1676
  }
1558
-
1559
- 60% {
1560
- -webkit-transform: scale3d(1.03,1.03,1.03);
1561
- transform: scale3d(1.03,1.03,1.03)
1562
1677
  }
1563
1678
 
1564
- 80% {
1565
- opacity: 1;
1566
- -webkit-transform: scale3d(.97,.97,.97);
1567
- transform: scale3d(.97,.97,.97)
1679
+ @keyframes rotateCubeTopIn {
1680
+ 0% {
1681
+ opacity: .3;
1682
+ -webkit-transform: translateY(100%) rotateX(-90deg);
1683
+ transform: translateY(100%) rotateX(-90deg)
1568
1684
  }
1569
1685
 
1570
- to {
1571
- -webkit-transform: scaleX(1);
1572
- transform: scaleX(1)
1686
+ 50% {
1687
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1688
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1689
+ -webkit-animation-timing-function: ease-out;
1690
+ animation-timing-function: ease-out
1573
1691
  }
1574
1692
  }
1575
1693
 
1576
- .bounceSmall {
1577
- -webkit-animation-name: bounceSmall;
1578
- animation-name: bounceSmall;
1579
- -webkit-animation-timing-function: ease-out;
1580
- animation-timing-function: ease-out
1694
+ @-webkit-keyframes rotateCubeBottomOut {
1695
+ 50% {
1696
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1697
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1698
+ -webkit-animation-timing-function: ease-out;
1699
+ animation-timing-function: ease-out
1581
1700
  }
1582
1701
 
1583
- @-webkit-keyframes bounceSmall {
1584
- 0% {
1585
- opacity: 0;
1586
- -webkit-transform: scale(1.7)
1702
+ to {
1703
+ opacity: .3;
1704
+ -webkit-transform: translateY(100%) rotateX(-90deg);
1705
+ transform: translateY(100%) rotateX(-90deg)
1706
+ }
1587
1707
  }
1588
1708
 
1709
+ @keyframes rotateCubeBottomOut {
1589
1710
  50% {
1590
- opacity: 1;
1591
- -webkit-transform: scale(.95)
1711
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1712
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
1713
+ -webkit-animation-timing-function: ease-out;
1714
+ animation-timing-function: ease-out
1592
1715
  }
1593
1716
 
1594
- 80% {
1595
- -webkit-transform: scale(1.05)
1717
+ to {
1718
+ opacity: .3;
1719
+ -webkit-transform: translateY(100%) rotateX(-90deg);
1720
+ transform: translateY(100%) rotateX(-90deg)
1721
+ }
1596
1722
  }
1597
1723
 
1598
- 90% {
1599
- -webkit-transform: scale(.98)
1724
+ @-webkit-keyframes rotateCubeBottomIn {
1725
+ 0% {
1726
+ opacity: .3;
1727
+ -webkit-transform: translateY(-100%) rotateX(90deg);
1728
+ transform: translateY(-100%) rotateX(90deg)
1600
1729
  }
1601
1730
 
1602
- to {
1603
- -webkit-transform: scale(1)
1731
+ 50% {
1732
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1733
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1734
+ -webkit-animation-timing-function: ease-out;
1735
+ animation-timing-function: ease-out
1604
1736
  }
1605
1737
  }
1606
1738
 
1607
- @keyframes bounceSmall {
1739
+ @keyframes rotateCubeBottomIn {
1608
1740
  0% {
1609
- opacity: 0;
1610
- -webkit-transform: scale(1.7)
1741
+ opacity: .3;
1742
+ -webkit-transform: translateY(-100%) rotateX(90deg);
1743
+ transform: translateY(-100%) rotateX(90deg)
1611
1744
  }
1612
1745
 
1613
1746
  50% {
1614
- opacity: 1;
1615
- -webkit-transform: scale(.95)
1747
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1748
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
1749
+ -webkit-animation-timing-function: ease-out;
1750
+ animation-timing-function: ease-out
1616
1751
  }
1617
-
1618
- 80% {
1619
- -webkit-transform: scale(1.05)
1620
1752
  }
1621
1753
 
1622
- 90% {
1623
- -webkit-transform: scale(.98)
1754
+ @-webkit-keyframes windOut {
1755
+ to {
1756
+ opacity: 0;
1757
+ -webkit-transform: translateZ(-3000px) rotate(1turn);
1758
+ transform: translateZ(-3000px) rotate(1turn)
1759
+ }
1624
1760
  }
1625
1761
 
1762
+ @keyframes windOut {
1626
1763
  to {
1627
- -webkit-transform: scale(1)
1764
+ opacity: 0;
1765
+ -webkit-transform: translateZ(-3000px) rotate(1turn);
1766
+ transform: translateZ(-3000px) rotate(1turn)
1628
1767
  }
1629
1768
  }
1630
1769
 
1631
- .pullUp {
1632
- -webkit-transform-origin: 50% 100%;
1633
- transform-origin: 50% 100%;
1634
- -webkit-animation-name: pullUp;
1635
- animation-name: pullUp;
1636
- -webkit-animation-timing-function: ease-out;
1637
- animation-timing-function: ease-out
1770
+ @-webkit-keyframes windIn {
1771
+ 0% {
1772
+ opacity: 0;
1773
+ -webkit-transform: translateZ(-3000px) rotate(-1turn);
1774
+ transform: translateZ(-3000px) rotate(-1turn)
1638
1775
  }
1639
-
1640
- @-webkit-keyframes pullUp {
1641
- 0%,40%,60%,80%,99% {
1642
- -webkit-animation-timing-function: ease-out;
1643
- animation-timing-function: ease-out
1644
1776
  }
1645
1777
 
1778
+ @keyframes windIn {
1646
1779
  0% {
1647
1780
  opacity: 0;
1648
- -webkit-transform: scaleY(.1);
1649
- transform: scaleY(.1);
1650
- -webkit-transform-origin: 50% 100%;
1651
- transform-origin: 50% 100%
1781
+ -webkit-transform: translateZ(-3000px) rotate(-1turn);
1782
+ transform: translateZ(-3000px) rotate(-1turn)
1783
+ }
1652
1784
  }
1653
1785
 
1654
- 40% {
1655
- opacity: 1;
1656
- -webkit-transform: scaleY(1.02);
1657
- transform: scaleY(1.02);
1658
- -webkit-transform-origin: 50% 100%;
1659
- transform-origin: 50% 100%
1786
+ @-webkit-keyframes rotateCarouselTopOut {
1787
+ to {
1788
+ opacity: .3;
1789
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
1790
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
1791
+ }
1660
1792
  }
1661
1793
 
1662
- 60% {
1663
- -webkit-transform: scaleY(.98);
1664
- transform: scaleY(.98);
1665
- -webkit-transform-origin: 50% 100%;
1666
- transform-origin: 50% 100%
1794
+ @keyframes rotateCarouselTopOut {
1795
+ to {
1796
+ opacity: .3;
1797
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
1798
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
1799
+ }
1667
1800
  }
1668
1801
 
1669
- 80% {
1670
- -webkit-transform: scaleY(1.01);
1671
- transform: scaleY(1.01);
1672
- -webkit-transform-origin: 50% 100%;
1673
- transform-origin: 50% 100%
1802
+ @-webkit-keyframes rotateCarouselTopIn {
1803
+ 0% {
1804
+ opacity: .3;
1805
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
1806
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
1807
+ }
1674
1808
  }
1675
1809
 
1676
- 99% {
1677
- -webkit-transform: scaleY(1);
1678
- transform: scaleY(1);
1679
- -webkit-transform-origin: 50% 100%;
1680
- transform-origin: 50% 100%
1810
+ @keyframes rotateCarouselTopIn {
1811
+ 0% {
1812
+ opacity: .3;
1813
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
1814
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
1815
+ }
1681
1816
  }
1682
1817
 
1818
+ @-webkit-keyframes rotateCarouselBottomOut {
1683
1819
  to {
1684
- -webkit-transform: none;
1685
- transform: none
1820
+ opacity: .3;
1821
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
1822
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
1686
1823
  }
1687
1824
  }
1688
1825
 
1689
- @keyframes pullUp {
1690
- 0%,40%,60%,80%,99% {
1691
- -webkit-animation-timing-function: ease-out;
1692
- animation-timing-function: ease-out
1826
+ @keyframes rotateCarouselBottomOut {
1827
+ to {
1828
+ opacity: .3;
1829
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
1830
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
1831
+ }
1693
1832
  }
1694
1833
 
1834
+ @-webkit-keyframes rotateCarouselBottomIn {
1695
1835
  0% {
1696
- opacity: 0;
1697
- -webkit-transform: scaleY(.1);
1698
- transform: scaleY(.1);
1699
- -webkit-transform-origin: 50% 100%;
1700
- transform-origin: 50% 100%
1836
+ opacity: .3;
1837
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
1838
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
1701
1839
  }
1702
-
1703
- 40% {
1704
- opacity: 1;
1705
- -webkit-transform: scaleY(1.02);
1706
- transform: scaleY(1.02);
1707
- -webkit-transform-origin: 50% 100%;
1708
- transform-origin: 50% 100%
1709
1840
  }
1710
1841
 
1711
- 60% {
1712
- -webkit-transform: scaleY(.98);
1713
- transform: scaleY(.98);
1714
- -webkit-transform-origin: 50% 100%;
1715
- transform-origin: 50% 100%
1842
+ @keyframes rotateCarouselBottomIn {
1843
+ 0% {
1844
+ opacity: .3;
1845
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
1846
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
1716
1847
  }
1717
-
1718
- 80% {
1719
- -webkit-transform: scaleY(1.01);
1720
- transform: scaleY(1.01);
1721
- -webkit-transform-origin: 50% 100%;
1722
- transform-origin: 50% 100%
1723
1848
  }
1724
1849
 
1725
- 99% {
1726
- -webkit-transform: scaleY(1);
1727
- transform: scaleY(1);
1728
- -webkit-transform-origin: 50% 100%;
1729
- transform-origin: 50% 100%
1850
+ @-webkit-keyframes scaleDown {
1851
+ to {
1852
+ opacity: 0;
1853
+ -webkit-transform: scale(.8);
1854
+ transform: scale(.8)
1855
+ }
1730
1856
  }
1731
1857
 
1858
+ @keyframes scaleDown {
1732
1859
  to {
1733
- -webkit-transform: none;
1734
- transform: none
1860
+ opacity: 0;
1861
+ -webkit-transform: scale(.8);
1862
+ transform: scale(.8)
1735
1863
  }
1736
1864
  }
1737
1865
 
1738
- .pullDown {
1739
- -webkit-transform-origin: 50% 0;
1740
- transform-origin: 50% 0;
1741
- -webkit-animation-name: pullDown;
1742
- animation-name: pullDown;
1743
- -webkit-animation-timing-function: ease-out;
1744
- animation-timing-function: ease-out
1866
+ @-webkit-keyframes scaleUp {
1867
+ 0% {
1868
+ opacity: 0;
1869
+ -webkit-transform: scale(.8);
1870
+ transform: scale(.8)
1745
1871
  }
1746
-
1747
- @-webkit-keyframes pullDown {
1748
- 0%,40%,60%,80%,99% {
1749
- -webkit-animation-timing-function: ease-out;
1750
- animation-timing-function: ease-out
1751
1872
  }
1752
1873
 
1874
+ @keyframes scaleUp {
1753
1875
  0% {
1754
1876
  opacity: 0;
1755
- -webkit-transform: scaleY(.1);
1756
- transform: scaleY(.1);
1757
- -webkit-transform-origin: 50% 0;
1758
- transform-origin: 50% 0
1877
+ -webkit-transform: scale(.8);
1878
+ transform: scale(.8)
1759
1879
  }
1760
-
1761
- 40% {
1762
- opacity: 1;
1763
- -webkit-transform: scaleY(1.02);
1764
- transform: scaleY(1.02);
1765
- -webkit-transform-origin: 50% 0;
1766
- transform-origin: 50% 0
1767
1880
  }
1768
1881
 
1769
- 60% {
1770
- -webkit-transform: scaleY(.98);
1771
- transform: scaleY(.98);
1772
- -webkit-transform-origin: 50% 0;
1773
- transform-origin: 50% 0
1882
+ @-webkit-keyframes scaleUpDown {
1883
+ 0% {
1884
+ opacity: 0;
1885
+ -webkit-transform: scale(1.2);
1886
+ transform: scale(1.2)
1774
1887
  }
1775
-
1776
- 80% {
1777
- -webkit-transform: scaleY(1.01);
1778
- transform: scaleY(1.01);
1779
- -webkit-transform-origin: 50% 0;
1780
- transform-origin: 50% 0
1781
1888
  }
1782
1889
 
1783
- 99% {
1784
- -webkit-transform: scaleY(1);
1785
- transform: scaleY(1);
1786
- -webkit-transform-origin: 50% 0;
1787
- transform-origin: 50% 0
1890
+ @keyframes scaleUpDown {
1891
+ 0% {
1892
+ opacity: 0;
1893
+ -webkit-transform: scale(1.2);
1894
+ transform: scale(1.2)
1895
+ }
1788
1896
  }
1789
1897
 
1898
+ @-webkit-keyframes scaleDownUp {
1790
1899
  to {
1791
- -webkit-transform: none;
1792
- transform: none
1900
+ opacity: 0;
1901
+ -webkit-transform: scale(1.2);
1902
+ transform: scale(1.2)
1793
1903
  }
1794
1904
  }
1795
1905
 
1796
- @keyframes pullDown {
1797
- 0%,40%,60%,80%,99% {
1798
- -webkit-animation-timing-function: ease-out;
1799
- animation-timing-function: ease-out
1906
+ @keyframes scaleDownUp {
1907
+ to {
1908
+ opacity: 0;
1909
+ -webkit-transform: scale(1.2);
1910
+ transform: scale(1.2)
1911
+ }
1800
1912
  }
1801
1913
 
1802
- 0% {
1914
+ @-webkit-keyframes scaleDownCenter {
1915
+ to {
1803
1916
  opacity: 0;
1804
- -webkit-transform: scaleY(.1);
1805
- transform: scaleY(.1);
1806
- -webkit-transform-origin: 50% 0;
1807
- transform-origin: 50% 0
1917
+ -webkit-transform: scale(.7);
1918
+ transform: scale(.7)
1808
1919
  }
1809
-
1810
- 40% {
1811
- opacity: 1;
1812
- -webkit-transform: scaleY(1.02);
1813
- transform: scaleY(1.02);
1814
- -webkit-transform-origin: 50% 0;
1815
- transform-origin: 50% 0
1816
1920
  }
1817
1921
 
1818
- 60% {
1819
- -webkit-transform: scaleY(.98);
1820
- transform: scaleY(.98);
1821
- -webkit-transform-origin: 50% 0;
1822
- transform-origin: 50% 0
1922
+ @keyframes scaleDownCenter {
1923
+ to {
1924
+ opacity: 0;
1925
+ -webkit-transform: scale(.7);
1926
+ transform: scale(.7)
1823
1927
  }
1824
-
1825
- 80% {
1826
- -webkit-transform: scaleY(1.01);
1827
- transform: scaleY(1.01);
1828
- -webkit-transform-origin: 50% 0;
1829
- transform-origin: 50% 0
1830
1928
  }
1831
1929
 
1832
- 99% {
1833
- -webkit-transform: scaleY(1);
1834
- transform: scaleY(1);
1835
- -webkit-transform-origin: 50% 0;
1836
- transform-origin: 50% 0
1930
+ @-webkit-keyframes scaleUpCenter {
1931
+ 0% {
1932
+ opacity: 0;
1933
+ -webkit-transform: scale(.7);
1934
+ transform: scale(.7)
1935
+ }
1837
1936
  }
1838
1937
 
1839
- to {
1840
- -webkit-transform: none;
1841
- transform: none
1938
+ @keyframes scaleUpCenter {
1939
+ 0% {
1940
+ opacity: 0;
1941
+ -webkit-transform: scale(.7);
1942
+ transform: scale(.7)
1842
1943
  }
1843
- }.button {
1844
- position: absolute;
1845
- cursor: pointer;
1846
- user-select: none;
1847
1944
  }
1848
-
1849
- .button .ani-wrap {
1850
- display: flex;
1851
- justify-content: center;
1852
- align-items: center;
1853
- width: 100%;
1854
- height: 100%;
1855
- overflow: hidden;
1856
- transition: opacity 0.2s;
1945
+
1946
+ @-webkit-keyframes rotatePushTop {
1947
+ to {
1948
+ opacity: 0;
1949
+ -webkit-transform: rotateX(-90deg);
1950
+ transform: rotateX(-90deg)
1857
1951
  }
1858
-
1859
- .button .ani-wrap:hover {
1860
- opacity: 0.9;
1861
1952
  }
1862
1953
 
1863
- .button-content {
1864
- display: flex;
1865
- align-items: center;
1866
- justify-content: center;
1954
+ @keyframes rotatePushTop {
1955
+ to {
1956
+ opacity: 0;
1957
+ -webkit-transform: rotateX(-90deg);
1958
+ transform: rotateX(-90deg)
1867
1959
  }
1868
-
1869
- .btn-text {
1870
- margin-left: 10px;
1871
- }.call {
1872
- position: absolute;
1873
- cursor: pointer;
1874
- user-select: none;
1875
1960
  }
1876
1961
 
1877
- .call .ani-wrap {
1878
- display: flex;
1879
- justify-content: center;
1880
- align-items: center;
1881
- width: 100%;
1882
- height: 100%;
1883
- overflow: hidden;
1884
- transition: opacity 0.2s;
1962
+ @-webkit-keyframes rotatePushBottom {
1963
+ to {
1964
+ opacity: 0;
1965
+ -webkit-transform: rotateX(90deg);
1966
+ transform: rotateX(90deg)
1967
+ }
1885
1968
  }
1886
1969
 
1887
- .call .ani-wrap:hover {
1888
- opacity: 0.9;
1970
+ @keyframes rotatePushBottom {
1971
+ to {
1972
+ opacity: 0;
1973
+ -webkit-transform: rotateX(90deg);
1974
+ transform: rotateX(90deg)
1889
1975
  }
1890
-
1891
- .call-content {
1892
- display: flex;
1893
- align-items: center;
1894
- justify-content: center;
1895
1976
  }
1896
1977
 
1897
- .btn-text {
1898
- margin-left: 10px;
1978
+ @-webkit-keyframes rotatePullTop {
1979
+ 0% {
1980
+ opacity: 0;
1981
+ -webkit-transform: rotateX(-90deg);
1982
+ transform: rotateX(-90deg)
1983
+ }
1899
1984
  }
1900
1985
 
1986
+ @keyframes rotatePullTop {
1987
+ 0% {
1988
+ opacity: 0;
1989
+ -webkit-transform: rotateX(-90deg);
1990
+ transform: rotateX(-90deg)
1991
+ }
1992
+ }
1901
1993
 
1902
- .hb-tel:before {
1903
- content: "\E642";
1904
- }.count-down .drag-point {
1905
- cursor: default!important
1994
+ @-webkit-keyframes rotatePullBottom {
1995
+ 0% {
1996
+ opacity: 0;
1997
+ -webkit-transform: rotateX(90deg);
1998
+ transform: rotateX(90deg)
1999
+ }
1906
2000
  }
1907
2001
 
1908
- .count-down .ani-wrap {
1909
- width: 100%;
1910
- height: 100%
2002
+ @keyframes rotatePullBottom {
2003
+ 0% {
2004
+ opacity: 0;
2005
+ -webkit-transform: rotateX(90deg);
2006
+ transform: rotateX(90deg)
2007
+ }
1911
2008
  }
1912
2009
 
1913
- .count-down .count-text,.count-down .finish-cont {
1914
- display: -webkit-box;
1915
- display: -ms-flexbox;
1916
- display: flex;
1917
- height: 100%;
1918
- -webkit-box-align: center;
1919
- -ms-flex-align: center;
1920
- align-items: center;
1921
- -webkit-box-pack: center;
1922
- -ms-flex-pack: center;
1923
- justify-content: center
2010
+ @-webkit-keyframes coverInUp {
2011
+ 0% {
2012
+ -webkit-transform: translate3d(0,-100%,0);
2013
+ transform: translate3d(0,-100%,0)
2014
+ }
1924
2015
  }
1925
2016
 
1926
- .count-down .finish-cont {
1927
- width: 100%
2017
+ @keyframes coverInUp {
2018
+ 0% {
2019
+ -webkit-transform: translate3d(0,-100%,0);
2020
+ transform: translate3d(0,-100%,0)
2021
+ }
1928
2022
  }
1929
2023
 
1930
- .count-down .count-flip {
1931
- display: -webkit-box;
1932
- display: -ms-flexbox;
1933
- display: flex;
1934
- height: 100%;
1935
- -webkit-box-align: center;
1936
- -ms-flex-align: center;
1937
- align-items: center;
1938
- -webkit-box-pack: center;
1939
- -ms-flex-pack: center;
1940
- justify-content: center
2024
+ @-webkit-keyframes coverInDown {
2025
+ 0% {
2026
+ -webkit-transform: translate3d(0,100%,0);
2027
+ transform: translate3d(0,100%,0)
2028
+ }
1941
2029
  }
1942
2030
 
1943
- .count-down .count-flip .numscroll {
1944
- -webkit-animation: numscroll .4s ease-in-out;
1945
- animation: numscroll .4s ease-in-out;
1946
- -webkit-animation-fill-mode: both;
1947
- animation-fill-mode: both
2031
+ @keyframes coverInDown {
2032
+ 0% {
2033
+ -webkit-transform: translate3d(0,100%,0);
2034
+ transform: translate3d(0,100%,0)
2035
+ }
1948
2036
  }
1949
2037
 
1950
- .count-down .count-flip .numscroll .curr-num {
1951
- -webkit-transition: all .3s ease-in-out;
1952
- transition: all .3s ease-in-out;
1953
- opacity: .6;
1954
- -webkit-transform: scale(.5)!important;
1955
- transform: scale(.5)!important
2038
+ .rotateInReverse {
2039
+ -webkit-animation-name: rotateInReverse;
2040
+ animation-name: rotateInReverse
1956
2041
  }
1957
2042
 
1958
- @-webkit-keyframes numscroll {
1959
- 0% {
1960
- -webkit-transform: translateZ(0);
1961
- transform: translateZ(0)
1962
- }
2043
+ @-webkit-keyframes rotateInReverse {
2044
+ 0% {
2045
+ opacity: 0;
2046
+ -webkit-transform: rotate(200deg);
2047
+ transform: rotate(200deg);
2048
+ -webkit-transform-origin: center;
2049
+ transform-origin: center
2050
+ }
1963
2051
 
1964
- to {
1965
- -webkit-transform: translate3d(0,100%,0);
1966
- transform: translate3d(0,100%,0)
1967
- }
2052
+ to {
2053
+ opacity: 1;
2054
+ -webkit-transform: none;
2055
+ transform: none;
2056
+ -webkit-transform-origin: center;
2057
+ transform-origin: center
2058
+ }
1968
2059
  }
1969
2060
 
1970
- @keyframes numscroll {
1971
- 0% {
1972
- -webkit-transform: translateZ(0);
1973
- transform: translateZ(0)
1974
- }
2061
+ @keyframes rotateInReverse {
2062
+ 0% {
2063
+ opacity: 0;
2064
+ -webkit-transform: rotate(200deg);
2065
+ transform: rotate(200deg);
2066
+ -webkit-transform-origin: center;
2067
+ transform-origin: center
2068
+ }
1975
2069
 
1976
- to {
1977
- -webkit-transform: translate3d(0,100%,0);
1978
- transform: translate3d(0,100%,0)
1979
- }
2070
+ to {
2071
+ opacity: 1;
2072
+ -webkit-transform: none;
2073
+ transform: none;
2074
+ -webkit-transform-origin: center;
2075
+ transform-origin: center
2076
+ }
1980
2077
  }
1981
2078
 
1982
- .count-down .count-flip .c-com {
1983
- min-width: 50px;
1984
- height: auto;
1985
- margin: 6px;
1986
- padding: 5px 0 6px;
1987
- background-color: #111
2079
+ .zoomInBig {
2080
+ -webkit-animation-name: zoomInBig;
2081
+ animation-name: zoomInBig;
2082
+ -webkit-animation-timing-function: cubic-bezier(0,.44,.75,.99);
2083
+ animation-timing-function: cubic-bezier(0,.44,.75,.99)
1988
2084
  }
1989
2085
 
1990
- .count-down .count-flip .c-com .flex-wrap {
1991
- display: -webkit-box;
1992
- display: -ms-flexbox;
1993
- display: flex;
1994
- position: relative;
1995
- width: 100%;
1996
- height: 100%;
1997
- -webkit-box-align: center;
1998
- -ms-flex-align: center;
1999
- align-items: center
2086
+ @-webkit-keyframes zoomInBig {
2087
+ 0% {
2088
+ opacity: 0;
2089
+ -webkit-transform: scale3d(2,2,2);
2090
+ transform: scale3d(2,2,2)
2000
2091
  }
2001
2092
 
2002
- .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
2003
- line-height: 27px
2093
+ 50% {
2094
+ opacity: 1
2004
2095
  }
2005
2096
 
2006
- .count-down .count-flip .c-com .flex-wrap .next-num {
2007
- position: absolute;
2008
- top: -100%
2097
+ 80% {
2098
+ -webkit-transform: scaleX(1);
2099
+ transform: scaleX(1)
2100
+ }
2009
2101
  }
2010
2102
 
2011
- .count-down .count-flip .c-com .flex-wrap .curr-num {
2012
- -webkit-transform: scale(1);
2013
- transform: scale(1)
2103
+ @keyframes zoomInBig {
2104
+ 0% {
2105
+ opacity: 0;
2106
+ -webkit-transform: scale3d(2,2,2);
2107
+ transform: scale3d(2,2,2)
2014
2108
  }
2015
2109
 
2016
- .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 {
2017
- display: none!important
2110
+ 50% {
2111
+ opacity: 1
2018
2112
  }
2019
2113
 
2020
- .c-wrap {
2021
- width: 100%;
2022
- height: 100%;
2023
- overflow: hidden;
2024
- font-size: 0
2114
+ 80% {
2115
+ -webkit-transform: scaleX(1);
2116
+ transform: scaleX(1)
2117
+ }
2025
2118
  }
2026
2119
 
2027
- .c-wrap.c-day-wrap {
2028
- text-align: center
2120
+ .flyIn {
2121
+ -webkit-animation-name: flyIn;
2122
+ animation-name: flyIn
2029
2123
  }
2030
2124
 
2031
- .c-wrap.c-day-wrap .c-num {
2032
- width: auto
2125
+ @-webkit-keyframes flyIn {
2126
+ 0%,20%,40%,60%,80%,to {
2127
+ -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
2128
+ transition-timing-function: cubic-bezier(.215,.61,.355,1)
2033
2129
  }
2034
2130
 
2035
- .c-wrap .c-num {
2036
- display: inline-block;
2037
- width: 50%;
2038
- overflow: hidden;
2039
- font-size: 20px;
2040
- color: #999
2131
+ 0% {
2132
+ opacity: 0;
2133
+ -webkit-transform: scale3d(2,2,2);
2134
+ transform: scale3d(2,2,2)
2041
2135
  }
2042
2136
 
2043
- .c-wrap .c-left .flex-wrap {
2044
- display: -webkit-box;
2045
- display: -ms-flexbox;
2046
- display: flex;
2047
- -webkit-box-pack: end;
2048
- -ms-flex-pack: end;
2049
- justify-content: flex-end
2137
+ 40% {
2138
+ -webkit-transform: scale3d(.9,.9,.9);
2139
+ transform: scale3d(.9,.9,.9)
2050
2140
  }
2051
2141
 
2052
- .c-wrap .c-text {
2053
- display: -webkit-box;
2054
- display: -ms-flexbox;
2055
- display: flex;
2056
- width: 100%;
2057
- font-size: 12px;
2058
- -webkit-box-pack: center;
2059
- -ms-flex-pack: center;
2060
- justify-content: center;
2061
- -webkit-box-align: center;
2062
- -ms-flex-align: center;
2063
- align-items: center;
2064
- white-space: nowrap
2142
+ 60% {
2143
+ -webkit-transform: scale3d(1.03,1.03,1.03);
2144
+ transform: scale3d(1.03,1.03,1.03)
2065
2145
  }
2066
2146
 
2067
- @keyframes jumpheart {
2068
- to {
2069
- -webkit-transform: scale(1.2);
2070
- transform: scale(1.2)
2071
- }
2147
+ 80% {
2148
+ opacity: 1;
2149
+ -webkit-transform: scale3d(.97,.97,.97);
2150
+ transform: scale3d(.97,.97,.97)
2151
+ }
2152
+
2153
+ to {
2154
+ -webkit-transform: scaleX(1);
2155
+ transform: scaleX(1)
2072
2156
  }
2073
- .ele-calendar {
2074
- position: relative;
2075
- width: 325px !important;
2076
- min-height: 325px !important;
2077
- height: auto !important;
2078
2157
  }
2079
2158
 
2080
- .ele-calendar .drag-point {
2081
- cursor: default !important;
2159
+ @keyframes flyIn {
2160
+ 0%,20%,40%,60%,80%,to {
2161
+ -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
2162
+ transition-timing-function: cubic-bezier(.215,.61,.355,1)
2082
2163
  }
2083
2164
 
2084
- .ele-calendar .ani-wrap {
2085
- position: relative;
2086
- width: 100%;
2087
- min-height: 325px !important;
2088
- height: auto !important;
2089
- padding: 22px 0;
2165
+ 0% {
2166
+ opacity: 0;
2167
+ -webkit-transform: scale3d(2,2,2);
2168
+ transform: scale3d(2,2,2)
2090
2169
  }
2091
2170
 
2092
- .ele-calendar .ani-wrap .can-wrap .can-top {
2093
- display: flex;
2094
- justify-content: space-between;
2095
- align-items: flex-end;
2096
- line-height: 1;
2097
- padding: 0 47px 20px;
2171
+ 40% {
2172
+ -webkit-transform: scale3d(.9,.9,.9);
2173
+ transform: scale3d(.9,.9,.9)
2098
2174
  }
2099
2175
 
2100
- .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
2101
- font-size: 25px;
2102
- padding-bottom: 4px;
2176
+ 60% {
2177
+ -webkit-transform: scale3d(1.03,1.03,1.03);
2178
+ transform: scale3d(1.03,1.03,1.03)
2103
2179
  }
2104
2180
 
2105
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
2106
- font-size: 25px;
2181
+ 80% {
2182
+ opacity: 1;
2183
+ -webkit-transform: scale3d(.97,.97,.97);
2184
+ transform: scale3d(.97,.97,.97)
2107
2185
  }
2108
2186
 
2109
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
2110
- position: relative;
2111
- top: 2px;
2112
- font-size: 57px;
2187
+ to {
2188
+ -webkit-transform: scaleX(1);
2189
+ transform: scaleX(1)
2190
+ }
2113
2191
  }
2114
2192
 
2115
- .ele-calendar .ani-wrap .can-wrap .can-main {
2116
- padding: 0 23px;
2193
+ .bounceSmall {
2194
+ -webkit-animation-name: bounceSmall;
2195
+ animation-name: bounceSmall;
2196
+ -webkit-animation-timing-function: ease-out;
2197
+ animation-timing-function: ease-out
2117
2198
  }
2118
2199
 
2119
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
2120
- display: flex;
2121
- justify-content: flex-start;
2122
- height: 25px;
2123
- line-height: 25px;
2124
- padding: 0 10px;
2125
- border-radius: 13px;
2200
+ @-webkit-keyframes bounceSmall {
2201
+ 0% {
2202
+ opacity: 0;
2203
+ -webkit-transform: scale(1.7)
2126
2204
  }
2127
2205
 
2128
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week span {
2129
- width: 14.2%;
2130
- text-align: center;
2131
- color: #fff;
2132
- font-size: 12px;
2206
+ 50% {
2207
+ opacity: 1;
2208
+ -webkit-transform: scale(.95)
2133
2209
  }
2134
2210
 
2135
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul {
2136
- font-size: 0;
2137
- padding: 5px 10px 0;
2138
- text-align: left;
2211
+ 80% {
2212
+ -webkit-transform: scale(1.05)
2139
2213
  }
2140
2214
 
2141
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li {
2142
- position: relative;
2143
- display: inline-block;
2144
- height: 25px;
2145
- text-align: center;
2146
- margin-top: 8px;
2215
+ 90% {
2216
+ -webkit-transform: scale(.98)
2147
2217
  }
2148
2218
 
2149
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active .iconfont {
2150
- display: block;
2219
+ to {
2220
+ -webkit-transform: scale(1)
2221
+ }
2151
2222
  }
2152
2223
 
2153
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active span {
2154
- color: #fff !important;
2224
+ @keyframes bounceSmall {
2225
+ 0% {
2226
+ opacity: 0;
2227
+ -webkit-transform: scale(1.7)
2155
2228
  }
2156
2229
 
2157
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
2158
- animation: jumpheart 0.8s ease infinite alternate;
2230
+ 50% {
2231
+ opacity: 1;
2232
+ -webkit-transform: scale(.95)
2159
2233
  }
2160
2234
 
2161
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
2162
- display: none;
2163
- font-size: 26px;
2235
+ 80% {
2236
+ -webkit-transform: scale(1.05)
2164
2237
  }
2165
2238
 
2166
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li span {
2167
- position: absolute;
2168
- left: 50%;
2169
- top: 50%;
2170
- z-index: 1;
2171
- color: #666;
2172
- font-size: 13px;
2173
- transform: translate(-50%, -52%);
2239
+ 90% {
2240
+ -webkit-transform: scale(.98)
2174
2241
  }
2175
2242
 
2176
- .ele-calendar .bottom-center,
2177
- .ele-calendar .left-center,
2178
- .ele-calendar .right-center,
2179
- .ele-calendar .top-center {
2180
- display: none !important;
2243
+ to {
2244
+ -webkit-transform: scale(1)
2245
+ }
2181
2246
  }
2182
2247
 
2183
- .ele-calendar .ani-wrap .can-wrap2 {
2184
- padding: 21px 23px 0
2248
+ .pullUp {
2249
+ -webkit-transform-origin: 50% 100%;
2250
+ transform-origin: 50% 100%;
2251
+ -webkit-animation-name: pullUp;
2252
+ animation-name: pullUp;
2253
+ -webkit-animation-timing-function: ease-out;
2254
+ animation-timing-function: ease-out
2185
2255
  }
2186
2256
 
2187
- .ele-calendar .ani-wrap .can-wrap2 .can-top {
2188
- display: -webkit-box;
2189
- display: -ms-flexbox;
2190
- display: flex;
2191
- -webkit-box-pack: justify;
2192
- -ms-flex-pack: justify;
2193
- justify-content: space-between;
2194
- -webkit-box-align: end;
2195
- -ms-flex-align: end;
2196
- align-items: flex-end;
2197
- line-height: 1;
2198
- padding: 0 16px 22px;
2199
- font-size: 36px
2257
+ @-webkit-keyframes pullUp {
2258
+ 0%,40%,60%,80%,99% {
2259
+ -webkit-animation-timing-function: ease-out;
2260
+ animation-timing-function: ease-out
2200
2261
  }
2201
2262
 
2202
- .ele-calendar .ani-wrap .can-wrap2 .can-top span {
2203
- font-size: 16px
2263
+ 0% {
2264
+ opacity: 0;
2265
+ -webkit-transform: scaleY(.1);
2266
+ transform: scaleY(.1);
2267
+ -webkit-transform-origin: 50% 100%;
2268
+ transform-origin: 50% 100%
2204
2269
  }
2205
2270
 
2206
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week {
2207
- display: -webkit-box;
2208
- display: -ms-flexbox;
2209
- display: flex;
2210
- -webkit-box-pack: start;
2211
- -ms-flex-pack: start;
2212
- justify-content: flex-start;
2213
- height: 25px;
2214
- line-height: 25px;
2215
- padding: 0 10px;
2216
- border-radius: 13px
2271
+ 40% {
2272
+ opacity: 1;
2273
+ -webkit-transform: scaleY(1.02);
2274
+ transform: scaleY(1.02);
2275
+ -webkit-transform-origin: 50% 100%;
2276
+ transform-origin: 50% 100%
2217
2277
  }
2218
2278
 
2219
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week span {
2220
- width: 14.2%;
2221
- text-align: center;
2222
- color: #fff;
2223
- font-size: 12px;
2224
- font-weight: 600
2279
+ 60% {
2280
+ -webkit-transform: scaleY(.98);
2281
+ transform: scaleY(.98);
2282
+ -webkit-transform-origin: 50% 100%;
2283
+ transform-origin: 50% 100%
2225
2284
  }
2226
2285
 
2227
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date {
2228
- position: relative
2286
+ 80% {
2287
+ -webkit-transform: scaleY(1.01);
2288
+ transform: scaleY(1.01);
2289
+ -webkit-transform-origin: 50% 100%;
2290
+ transform-origin: 50% 100%
2229
2291
  }
2230
2292
 
2231
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date .can-year {
2232
- position: absolute;
2233
- white-space: nowrap;
2234
- left: 50%;
2235
- top: 15%;
2236
- -webkit-transform: translateX(-50%);
2237
- transform: translateX(-50%);
2238
- font-size: 76px;
2239
- opacity: .1;
2240
- font-weight: 600
2293
+ 99% {
2294
+ -webkit-transform: scaleY(1);
2295
+ transform: scaleY(1);
2296
+ -webkit-transform-origin: 50% 100%;
2297
+ transform-origin: 50% 100%
2241
2298
  }
2242
2299
 
2243
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul {
2244
- font-size: 0;
2245
- padding: 5px 10px 0;
2246
- text-align: left
2300
+ to {
2301
+ -webkit-transform: none;
2302
+ transform: none
2303
+ }
2247
2304
  }
2248
2305
 
2249
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li {
2250
- position: relative;
2251
- display: inline-block;
2252
- width: 14.2%;
2253
- height: 25px;
2254
- text-align: center;
2255
- margin-top: 8px
2306
+ @keyframes pullUp {
2307
+ 0%,40%,60%,80%,99% {
2308
+ -webkit-animation-timing-function: ease-out;
2309
+ animation-timing-function: ease-out
2256
2310
  }
2257
2311
 
2258
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active .iconfont {
2259
- display: block;
2260
- position: absolute;
2261
- left: 17%;
2262
- top: 0;
2263
- font-size: 25px
2312
+ 0% {
2313
+ opacity: 0;
2314
+ -webkit-transform: scaleY(.1);
2315
+ transform: scaleY(.1);
2316
+ -webkit-transform-origin: 50% 100%;
2317
+ transform-origin: 50% 100%
2264
2318
  }
2265
2319
 
2266
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active span {
2267
- color: #fff!important
2320
+ 40% {
2321
+ opacity: 1;
2322
+ -webkit-transform: scaleY(1.02);
2323
+ transform: scaleY(1.02);
2324
+ -webkit-transform-origin: 50% 100%;
2325
+ transform-origin: 50% 100%
2268
2326
  }
2269
2327
 
2270
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.heart-ani .iconfont {
2271
- -webkit-animation: jumpheart .8s ease infinite alternate;
2272
- animation: jumpheart .8s ease infinite alternate
2328
+ 60% {
2329
+ -webkit-transform: scaleY(.98);
2330
+ transform: scaleY(.98);
2331
+ -webkit-transform-origin: 50% 100%;
2332
+ transform-origin: 50% 100%
2273
2333
  }
2274
2334
 
2275
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li .iconfont {
2276
- display: none;
2277
- font-size: 26px
2335
+ 80% {
2336
+ -webkit-transform: scaleY(1.01);
2337
+ transform: scaleY(1.01);
2338
+ -webkit-transform-origin: 50% 100%;
2339
+ transform-origin: 50% 100%
2278
2340
  }
2279
2341
 
2280
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li span {
2281
- position: absolute;
2282
- left: 50%;
2283
- top: 50%;
2284
- z-index: 1;
2285
- color: #666;
2286
- font-size: 13px;
2287
- -webkit-transform: translate(-50%,-52%);
2288
- transform: translate(-50%,-52%)
2342
+ 99% {
2343
+ -webkit-transform: scaleY(1);
2344
+ transform: scaleY(1);
2345
+ -webkit-transform-origin: 50% 100%;
2346
+ transform-origin: 50% 100%
2289
2347
  }
2290
2348
 
2291
- .ele-calendar .ani-wrap .can-wrap3 .can-top {
2292
- display: -webkit-box;
2293
- display: -ms-flexbox;
2294
- display: flex;
2295
- -webkit-box-pack: justify;
2296
- -ms-flex-pack: justify;
2297
- justify-content: space-between;
2298
- -webkit-box-align: end;
2299
- -ms-flex-align: end;
2300
- align-items: flex-end;
2301
- line-height: 1;
2302
- padding: 18px 33px 10px;
2303
- font-size: 36px;
2349
+ to {
2350
+ -webkit-transform: none;
2351
+ transform: none
2304
2352
  }
2305
-
2306
- .ele-calendar .ani-wrap .can-wrap3 .can-top span {
2307
- font-size: 16px
2308
2353
  }
2309
2354
 
2310
- .ele-calendar .ani-wrap .can-wrap3 .can-top .can-year {
2311
- font-size: 20px
2355
+ .pullDown {
2356
+ -webkit-transform-origin: 50% 0;
2357
+ transform-origin: 50% 0;
2358
+ -webkit-animation-name: pullDown;
2359
+ animation-name: pullDown;
2360
+ -webkit-animation-timing-function: ease-out;
2361
+ animation-timing-function: ease-out
2312
2362
  }
2313
2363
 
2314
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week {
2315
- display: -webkit-box;
2316
- display: -ms-flexbox;
2317
- display: flex;
2318
- -webkit-box-pack: start;
2319
- -ms-flex-pack: start;
2320
- justify-content: flex-start;
2321
- height: 40px;
2322
- line-height: 40px;
2323
- padding: 0 34px;
2324
- border-bottom: 1px solid
2364
+ @-webkit-keyframes pullDown {
2365
+ 0%,40%,60%,80%,99% {
2366
+ -webkit-animation-timing-function: ease-out;
2367
+ animation-timing-function: ease-out
2325
2368
  }
2326
2369
 
2327
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week span {
2328
- width: 14.2%;
2329
- text-align: center;
2330
- color: #fff;
2331
- font-size: 12px;
2332
- font-weight: 600
2370
+ 0% {
2371
+ opacity: 0;
2372
+ -webkit-transform: scaleY(.1);
2373
+ transform: scaleY(.1);
2374
+ -webkit-transform-origin: 50% 0;
2375
+ transform-origin: 50% 0
2333
2376
  }
2334
2377
 
2335
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date {
2336
- position: relative
2378
+ 40% {
2379
+ opacity: 1;
2380
+ -webkit-transform: scaleY(1.02);
2381
+ transform: scaleY(1.02);
2382
+ -webkit-transform-origin: 50% 0;
2383
+ transform-origin: 50% 0
2337
2384
  }
2338
2385
 
2339
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul {
2340
- font-size: 0;
2341
- padding: 5px 33px 0;
2342
- text-align: left
2386
+ 60% {
2387
+ -webkit-transform: scaleY(.98);
2388
+ transform: scaleY(.98);
2389
+ -webkit-transform-origin: 50% 0;
2390
+ transform-origin: 50% 0
2343
2391
  }
2344
2392
 
2345
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li {
2346
- position: relative;
2347
- display: inline-block;
2348
- width: 14.2%;
2349
- height: 25px;
2350
- text-align: center;
2351
- margin-top: 8px;
2393
+ 80% {
2394
+ -webkit-transform: scaleY(1.01);
2395
+ transform: scaleY(1.01);
2396
+ -webkit-transform-origin: 50% 0;
2397
+ transform-origin: 50% 0
2352
2398
  }
2353
2399
 
2354
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active {
2355
- color: #eee
2400
+ 99% {
2401
+ -webkit-transform: scaleY(1);
2402
+ transform: scaleY(1);
2403
+ -webkit-transform-origin: 50% 0;
2404
+ transform-origin: 50% 0
2356
2405
  }
2357
2406
 
2358
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active .iconfont {
2359
- display: block;
2360
- position: absolute;
2361
- left: 12%;
2362
- top: 2px;
2407
+ to {
2408
+ -webkit-transform: none;
2409
+ transform: none
2410
+ }
2363
2411
  }
2364
2412
 
2365
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active span {
2366
- font-size: 12px
2413
+ @keyframes pullDown {
2414
+ 0%,40%,60%,80%,99% {
2415
+ -webkit-animation-timing-function: ease-out;
2416
+ animation-timing-function: ease-out
2367
2417
  }
2368
2418
 
2369
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.heart-ani .iconfont {
2370
- -webkit-animation: jumpheart .8s ease infinite alternate;
2371
- animation: jumpheart .8s ease infinite alternate
2419
+ 0% {
2420
+ opacity: 0;
2421
+ -webkit-transform: scaleY(.1);
2422
+ transform: scaleY(.1);
2423
+ -webkit-transform-origin: 50% 0;
2424
+ transform-origin: 50% 0
2372
2425
  }
2373
2426
 
2374
- @keyframes jumpheart {
2375
- to {
2376
- -webkit-transform: scale(1.2);
2377
- transform: scale(1.2)
2378
- }
2427
+ 40% {
2428
+ opacity: 1;
2429
+ -webkit-transform: scaleY(1.02);
2430
+ transform: scaleY(1.02);
2431
+ -webkit-transform-origin: 50% 0;
2432
+ transform-origin: 50% 0
2379
2433
  }
2380
2434
 
2381
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li .iconfont {
2382
- display: none;
2383
- font-size: 26px
2435
+ 60% {
2436
+ -webkit-transform: scaleY(.98);
2437
+ transform: scaleY(.98);
2438
+ -webkit-transform-origin: 50% 0;
2439
+ transform-origin: 50% 0
2384
2440
  }
2385
2441
 
2386
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li span {
2387
- position: absolute;
2388
- left: 50%;
2389
- top: 50%;
2390
- z-index: 1;
2391
- color: #666;
2392
- font-size: 13px;
2393
- -webkit-transform: translate(-50%,-52%);
2394
- transform: translate(-50%,-52%)
2442
+ 80% {
2443
+ -webkit-transform: scaleY(1.01);
2444
+ transform: scaleY(1.01);
2445
+ -webkit-transform-origin: 50% 0;
2446
+ transform-origin: 50% 0
2395
2447
  }
2396
2448
 
2397
- .ele-calendar .bottom-center,.ele-calendar .left-center,.ele-calendar .right-center,.ele-calendar .top-center {
2398
- display: none!important
2449
+ 99% {
2450
+ -webkit-transform: scaleY(1);
2451
+ transform: scaleY(1);
2452
+ -webkit-transform-origin: 50% 0;
2453
+ transform-origin: 50% 0
2399
2454
  }
2400
- .icon-tuoyuanxing:before {
2401
- content: "\E6A7";
2455
+
2456
+ to {
2457
+ -webkit-transform: none;
2458
+ transform: none
2402
2459
  }
2403
- .icon-zan1:before {
2404
- content: "\E66D";
2460
+ }.button {
2461
+ position: absolute;
2462
+ cursor: pointer;
2463
+ user-select: none;
2405
2464
  }
2406
- .icon-xingzhuangjiehe:before {
2407
- content: "\E6A6";
2408
- }#page-list .tip-cover {
2409
- position: fixed;
2410
- left: 0;
2411
- top: 0;
2412
- width: 100%;
2413
- height: 100%;
2414
- display: -ms-flexbox;
2465
+
2466
+ .button .ani-wrap {
2415
2467
  display: flex;
2416
- -ms-flex-align: center;
2417
- align-items: center;
2418
- -ms-flex-pack: center;
2419
2468
  justify-content: center;
2420
- z-index: 999;
2421
- background-color: rgba(0,0,0,.7)
2422
- }
2423
-
2424
- #page-list .tip-cover .tip {
2425
- width: 80%;
2426
- max-width: 250px;
2427
- padding: 10px;
2428
- border-radius: 5px;
2429
- background-color: #fff
2430
- }
2431
-
2432
- #page-list .tip-cover .tip-btn {
2433
- display: block;
2434
- margin: 25px auto;
2435
- width: 120px;
2436
- height: 30px;
2437
- color: #fff;
2438
- border-radius: 4px;
2439
- text-align: center;
2440
- font-size: 14px;
2441
- line-height: 30px;
2442
- background: #ed5566
2469
+ align-items: center;
2470
+ width: 100%;
2471
+ height: 100%;
2472
+ overflow: hidden;
2473
+ transition: opacity 0.2s;
2443
2474
  }
2444
-
2445
- #page-list .tip-cover .tip-content {
2446
- font-size: 14px;
2447
- padding-top: 30px;
2475
+
2476
+ .button .ani-wrap:hover {
2477
+ opacity: 0.9;
2448
2478
  }
2449
2479
 
2450
- .tip-cover {
2451
- position: fixed;
2452
- left: 0;
2453
- top: 0;
2454
- width: 100%;
2455
- height: 100%;
2456
- display: -ms-flexbox;
2480
+ .button-content {
2457
2481
  display: flex;
2458
- -ms-flex-align: center;
2459
2482
  align-items: center;
2460
- -ms-flex-pack: center;
2461
2483
  justify-content: center;
2462
- z-index: 999;
2463
- background-color: rgba(0,0,0,.7)
2464
- }
2465
-
2466
- .tip-cover .tip {
2467
- width: 80%;
2468
- max-width: 250px;
2469
- padding: 5px;
2470
- border-radius: 3px;
2471
- background-color: #fff
2472
2484
  }
2473
2485
 
2474
- .tip-cover .tip-btn {
2475
- display: block;
2476
- margin: 13px auto;
2477
- width: 64px;
2478
- height: 20px;
2479
- color: #fff;
2480
- border-radius: 4px;
2481
- text-align: center;
2482
- font-size: 14px;
2483
- line-height: 20px;
2484
- background: #ed5566;
2485
- } .form-input {
2486
+ .btn-text {
2487
+ margin-left: 10px;
2488
+ }.form-input {
2486
2489
  position: absolute;
2487
2490
  }
2488
2491
 
@@ -2532,92 +2535,7 @@ to {
2532
2535
  }
2533
2536
  .dynamic-placeholder-input:-ms-input-placeholder {
2534
2537
  color: var(--placeholder-color, #999);
2535
- }/* .ele-form {
2536
- position: absolute;
2537
- user-select: none;
2538
- } */
2539
-
2540
- .f-multiple {
2541
- cursor: pointer;
2542
- }
2543
-
2544
- .ani-wrap {
2545
- position: relative;
2546
- }
2547
-
2548
- .f-multiple .ani-wrap .fs-tit {
2549
- display: flex;
2550
- padding: 0 5px;
2551
- height: 40px;
2552
- align-items: center;
2553
- white-space: nowrap;
2554
- overflow: hidden;
2555
- text-overflow: ellipsis;
2556
- border-bottom: 1px solid rgba(153, 153, 153, 1);
2557
- }
2558
-
2559
- .require {
2560
- padding: 0 5px 0 0;
2561
- color: red;
2562
- vertical-align: middle;
2563
- }
2564
-
2565
- .f-multiple ul {
2566
- padding: 15px;
2567
- margin: 0;
2568
- list-style: none;
2569
- }
2570
-
2571
- .f-multiple ul li {
2572
- margin-top: 12px;
2573
- font-size: 0;
2574
- display: flex;
2575
- align-items: center;
2576
- cursor: pointer;
2577
- }
2578
-
2579
- .f-multiple ul li:first-child {
2580
- margin-top: 0;
2581
- }
2582
-
2583
- .fs-circle {
2584
- display: inline-block;
2585
- width: 16px;
2586
- height: 16px;
2587
- border-radius: 50%;
2588
- position: relative;
2589
- transition: all 0.2s;
2590
- }
2591
-
2592
- .fs-circle.selected {
2593
- background-color: #2687f1;
2594
- border-color: #2687f1 !important;
2595
- }
2596
-
2597
- .fs-circle.selected::after {
2598
- content: "";
2599
- position: absolute;
2600
- top: 3px;
2601
- left: 3px;
2602
- width: 8px;
2603
- height: 8px;
2604
- border-radius: 50%;
2605
- background-color: white;
2606
- }
2607
-
2608
- .fs-txt {
2609
- display: inline-block;
2610
- width: calc(100% - 16px);
2611
- padding-left: 8px;
2612
- vertical-align: top;
2613
- word-break: break-all;
2614
- font-size: 14px;
2615
- line-height: 1.2;
2616
- }
2617
-
2618
- .has-error .fs-tit {
2619
- border-bottom-color: #ff4d4f;
2620
- }.form-submit {
2538
+ }.form-submit {
2621
2539
  cursor: pointer;
2622
2540
  transition: all 0.2s;
2623
2541
  outline: none;
@@ -2626,145 +2544,44 @@ to {
2626
2544
 
2627
2545
  .form-submit:hover {
2628
2546
  opacity: 0.9;
2629
- transform: translateY(-1px);
2630
- }
2631
-
2632
- .form-submit:active {
2633
- opacity: 0.8;
2634
- transform: translateY(0);
2635
- }
2636
-
2637
- .form-submit:disabled {
2638
- opacity: 0.6;
2639
- cursor: not-allowed;
2640
- transform: none !important;
2641
- }
2642
-
2643
- .f-submit {
2644
- position: relative;
2645
- display: block
2646
- }
2647
-
2648
- .f-submit .ani-wrap {
2649
- width: 100%;
2650
- height: 100%;
2651
- padding: 10px;
2652
- overflow: hidden;
2653
- position: relative
2654
- }
2655
-
2656
- .f-submit .f-ovh {
2657
- position: absolute;
2658
- left: 50%;
2659
- top: 50%;
2660
- transform: translate(-50%,-50%)
2661
- }
2662
-
2663
- .form-submit:disabled {
2664
- opacity: 0.7;
2665
- cursor: not-allowed;
2666
- }/* .ele-form {
2667
- position: absolute;
2668
- user-select: none;
2669
- } */
2670
-
2671
- .f-select {
2672
- cursor: pointer;
2673
- }
2674
-
2675
- .ani-wrap {
2676
- position: relative;
2677
- }
2678
-
2679
- .f-select .ani-wrap .fs-tit {
2680
- position: relative;
2681
- display: flex;
2682
- padding: 0 5px;
2683
- height: 35px;
2684
- line-height: 35px;
2685
- align-items: center;
2686
- }
2687
-
2688
- .require {
2689
- padding: 0 5px 0 0;
2690
- color: red;
2691
- vertical-align: middle;
2692
- }
2693
-
2694
- .fs-cont {
2695
- padding-right: 15px;
2696
- white-space: nowrap;
2697
- overflow: hidden;
2698
- text-overflow: ellipsis;
2699
- flex-grow: 1;
2700
- }
2701
-
2702
- .icon-bofang1 {
2703
- font-size: 12px;
2704
- transition: transform 0.2s ease;
2705
- }
2706
-
2707
- .rotate-180 {
2708
- transform: rotate(180deg) !important;
2709
- }
2710
-
2711
- .f-real {
2712
- position: absolute;
2713
- left: 0;
2714
- top: 0;
2715
- width: 100%;
2716
- height: 100%;
2717
- z-index: 1;
2718
- opacity: 0;
2719
- cursor: pointer;
2720
- }
2721
-
2722
- .dropdown-menu {
2723
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
2724
- }
2725
-
2726
- .dropdown-item {
2727
- padding: 8px 10px;
2728
- cursor: pointer;
2729
- transition: background-color 0.2s;
2730
- }
2731
-
2732
- .dropdown-item:hover {
2733
- background-color: #f5f5f5;
2734
- }
2735
-
2736
- .dropdown-item.selected {
2737
- background-color: #e6f7ff;
2738
- color: #1890ff;
2739
- }
2740
-
2741
- .f-select .fs-tit .icon-bofang1 {
2742
- position: absolute;
2743
- right: 10px;
2744
- font-size: 12px;
2745
- display: inline-block;
2746
- transform: rotate(90deg);
2747
- }
2748
-
2749
- .icon-bofang1:before {
2750
- content: "\E6CF";
2751
- }
2752
-
2753
- .has-error {
2754
- border-color: #ff4d4f !important;
2755
- }
2756
-
2757
- .error-tip {
2758
- position: fixed;
2759
- left: 0;
2760
- top: 0;
2761
- width: 100%;
2762
- height: 100%;
2763
- z-index: 1000;
2764
- }
2765
- .ele-lottie .ele-lotwrap {
2766
- overflow: hidden;
2767
- }/* Iconfont definition */
2547
+ transform: translateY(-1px);
2548
+ }
2549
+
2550
+ .form-submit:active {
2551
+ opacity: 0.8;
2552
+ transform: translateY(0);
2553
+ }
2554
+
2555
+ .form-submit:disabled {
2556
+ opacity: 0.6;
2557
+ cursor: not-allowed;
2558
+ transform: none !important;
2559
+ }
2560
+
2561
+ .f-submit {
2562
+ position: relative;
2563
+ display: block
2564
+ }
2565
+
2566
+ .f-submit .ani-wrap {
2567
+ width: 100%;
2568
+ height: 100%;
2569
+ padding: 10px;
2570
+ overflow: hidden;
2571
+ position: relative
2572
+ }
2573
+
2574
+ .f-submit .f-ovh {
2575
+ position: absolute;
2576
+ left: 50%;
2577
+ top: 50%;
2578
+ transform: translate(-50%,-50%)
2579
+ }
2580
+
2581
+ .form-submit:disabled {
2582
+ opacity: 0.7;
2583
+ cursor: not-allowed;
2584
+ }/* Iconfont definition */
2768
2585
  .icon-danmuliebiao1:before {
2769
2586
  content: "\E68A";
2770
2587
  }
@@ -3667,7 +3484,202 @@ cursor: not-allowed;
3667
3484
  100% { transform: rotate(360deg); }
3668
3485
  }
3669
3486
 
3487
+ /* .ele-form {
3488
+ position: absolute;
3489
+ user-select: none;
3490
+ } */
3491
+
3492
+ .f-select {
3493
+ cursor: pointer;
3494
+ }
3495
+
3496
+ .ani-wrap {
3497
+ position: relative;
3498
+ }
3499
+
3500
+ .f-select .ani-wrap .fs-tit {
3501
+ position: relative;
3502
+ display: flex;
3503
+ padding: 0 5px;
3504
+ height: 35px;
3505
+ line-height: 35px;
3506
+ align-items: center;
3507
+ }
3508
+
3509
+ .require {
3510
+ padding: 0 5px 0 0;
3511
+ color: red;
3512
+ vertical-align: middle;
3513
+ }
3514
+
3515
+ .fs-cont {
3516
+ padding-right: 15px;
3517
+ white-space: nowrap;
3518
+ overflow: hidden;
3519
+ text-overflow: ellipsis;
3520
+ flex-grow: 1;
3521
+ }
3522
+
3523
+ .icon-bofang1 {
3524
+ font-size: 12px;
3525
+ transition: transform 0.2s ease;
3526
+ }
3527
+
3528
+ .rotate-180 {
3529
+ transform: rotate(180deg) !important;
3530
+ }
3531
+
3532
+ .f-real {
3533
+ position: absolute;
3534
+ left: 0;
3535
+ top: 0;
3536
+ width: 100%;
3537
+ height: 100%;
3538
+ z-index: 1;
3539
+ opacity: 0;
3540
+ cursor: pointer;
3541
+ }
3542
+
3543
+ .dropdown-menu {
3544
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
3545
+ }
3546
+
3547
+ .dropdown-item {
3548
+ padding: 8px 10px;
3549
+ cursor: pointer;
3550
+ transition: background-color 0.2s;
3551
+ }
3552
+
3553
+ .dropdown-item:hover {
3554
+ background-color: #f5f5f5;
3555
+ }
3556
+
3557
+ .dropdown-item.selected {
3558
+ background-color: #e6f7ff;
3559
+ color: #1890ff;
3560
+ }
3561
+
3562
+ .f-select .fs-tit .icon-bofang1 {
3563
+ position: absolute;
3564
+ right: 10px;
3565
+ font-size: 12px;
3566
+ display: inline-block;
3567
+ transform: rotate(90deg);
3568
+ }
3569
+
3570
+ .icon-bofang1:before {
3571
+ content: "\E6CF";
3572
+ }
3573
+
3574
+ .has-error {
3575
+ border-color: #ff4d4f !important;
3576
+ }
3670
3577
 
3578
+ .error-tip {
3579
+ position: fixed;
3580
+ left: 0;
3581
+ top: 0;
3582
+ width: 100%;
3583
+ height: 100%;
3584
+ z-index: 1000;
3585
+ }/* .ele-form {
3586
+ position: absolute;
3587
+ user-select: none;
3588
+ } */
3589
+
3590
+ .f-multiple {
3591
+ cursor: pointer;
3592
+ }
3593
+
3594
+ .ani-wrap {
3595
+ position: relative;
3596
+ }
3597
+
3598
+ .f-multiple .ani-wrap .fs-tit {
3599
+ display: flex;
3600
+ padding: 0 5px;
3601
+ height: 40px;
3602
+ align-items: center;
3603
+ white-space: nowrap;
3604
+ overflow: hidden;
3605
+ text-overflow: ellipsis;
3606
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
3607
+ }
3608
+
3609
+ .require {
3610
+ padding: 0 5px 0 0;
3611
+ color: red;
3612
+ vertical-align: middle;
3613
+ }
3614
+
3615
+ .f-multiple ul {
3616
+ padding: 15px;
3617
+ margin: 0;
3618
+ list-style: none;
3619
+ }
3620
+
3621
+ .f-multiple ul li {
3622
+ margin-top: 12px;
3623
+ font-size: 0;
3624
+ display: flex;
3625
+ align-items: center;
3626
+ cursor: pointer;
3627
+ }
3628
+
3629
+ .f-multiple ul li:first-child {
3630
+ margin-top: 0;
3631
+ }
3632
+
3633
+ .fs-circle {
3634
+ display: inline-block;
3635
+ width: 16px;
3636
+ height: 16px;
3637
+ border-radius: 50%;
3638
+ position: relative;
3639
+ transition: all 0.2s;
3640
+ }
3641
+
3642
+ .fs-circle.selected {
3643
+ background-color: #2687f1;
3644
+ border-color: #2687f1 !important;
3645
+ }
3646
+
3647
+ .fs-circle.selected::after {
3648
+ content: "";
3649
+ position: absolute;
3650
+ top: 3px;
3651
+ left: 3px;
3652
+ width: 8px;
3653
+ height: 8px;
3654
+ border-radius: 50%;
3655
+ background-color: white;
3656
+ }
3657
+
3658
+ .fs-txt {
3659
+ display: inline-block;
3660
+ width: calc(100% - 16px);
3661
+ padding-left: 8px;
3662
+ vertical-align: top;
3663
+ word-break: break-all;
3664
+ font-size: 14px;
3665
+ line-height: 1.2;
3666
+ }
3667
+
3668
+ .has-error .fs-tit {
3669
+ border-bottom-color: #ff4d4f;
3670
+ }
3671
+ .global.tel {
3672
+ width: 35px;
3673
+ height: 55px;
3674
+ border-radius: 50%;
3675
+ text-align: center;
3676
+ margin-bottom: 15px;
3677
+ border: 2px solid #fff;
3678
+ cursor: pointer;
3679
+ }
3680
+ .icon-dianhua:before { content: "\E60E"; }
3681
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3682
+ .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
3671
3683
  .icon-guanbi:before {
3672
3684
  content: "\E676";
3673
3685
  }
@@ -4062,7 +4074,7 @@ cursor: not-allowed;
4062
4074
  color: #F44336; /* 失败的红色 */
4063
4075
  }
4064
4076
 
4065
- .global.map {
4077
+ .global.video {
4066
4078
  width: 35px;
4067
4079
  height: 55px;
4068
4080
  border-radius: 50%;
@@ -4071,10 +4083,12 @@ cursor: not-allowed;
4071
4083
  border: 2px solid #fff;
4072
4084
  cursor: pointer;
4073
4085
  }
4074
- .icon-daohang1:before { content: "\E612"; }
4086
+ .icon-shipin2:before { content: "\E611"; }
4075
4087
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4076
- .global.map > span { font-size: 10px; line-height: 20px; display: block;}
4077
- .global.video {
4088
+ .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
4089
+ }
4090
+
4091
+ .global.map {
4078
4092
  width: 35px;
4079
4093
  height: 55px;
4080
4094
  border-radius: 50%;
@@ -4083,11 +4097,9 @@ cursor: not-allowed;
4083
4097
  border: 2px solid #fff;
4084
4098
  cursor: pointer;
4085
4099
  }
4086
- .icon-shipin2:before { content: "\E611"; }
4100
+ .icon-daohang1:before { content: "\E612"; }
4087
4101
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4088
- .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
4089
- }
4090
- /* .ele-form {
4102
+ .global.map > span { font-size: 10px; line-height: 20px; display: block;}/* .ele-form {
4091
4103
  position: absolute;
4092
4104
  user-select: none;
4093
4105
  }
@@ -4182,18 +4194,6 @@ cursor: not-allowed;
4182
4194
  height: 100%;
4183
4195
  z-index: 1000;
4184
4196
  }
4185
- .global.tel {
4186
- width: 35px;
4187
- height: 55px;
4188
- border-radius: 50%;
4189
- text-align: center;
4190
- margin-bottom: 15px;
4191
- border: 2px solid #fff;
4192
- cursor: pointer;
4193
- }
4194
- .icon-dianhua:before { content: "\E60E"; }
4195
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4196
- .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
4197
4197
  .global.receipt {
4198
4198
  width: 35px;
4199
4199
  height: 55px;