unika-components 1.2.3 → 1.2.4

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.
@@ -35,56 +35,7 @@
35
35
  background-size: 220px 140px;
36
36
  opacity: 0.5;
37
37
  }
38
- .ele-img {
39
- position: absolute;
40
- overflow: hidden;
41
- }
42
-
43
- .ele-img .ani-wrap {
44
- width: 100%;
45
- height: 100%;
46
- }
47
-
48
- .ele-img .ele-image {
49
- position: relative;
50
- display: block;
51
- }
52
-
53
- .ele-img .rotate-wrap {
54
- position: absolute;
55
- left: 0;
56
- right: 0;
57
- top: 0;
58
- bottom: 0;
59
- }
60
-
61
- .ele-img .ele-img-bg,
62
- .ele-img .rotate-wrap .img-wrap {
63
- width: 100%;
64
- height: 100%;
65
- overflow: hidden;
66
- }
67
-
68
- .ele-img .ele-bg-wrap {
69
- width: 100%;
70
- height: 100%;
71
- background-size: cover;
72
- background-position: 50% 50%;
73
- background-repeat: no-repeat;
74
- background-clip: border-box;
75
- }
76
-
77
- /* 动画关键帧 */
78
- @keyframes zoomIn {
79
- from {
80
- opacity: 0;
81
- transform: scale(0.5);
82
- }
83
- to {
84
- opacity: 1;
85
- transform: scale(1);
86
- }
87
- }
38
+
88
39
  .ele-text {
89
40
  position: relative;
90
41
  }
@@ -151,6 +102,49 @@
151
102
  transform: scale(1);
152
103
  opacity: 1;
153
104
  }
105
+ }.ele-shape {
106
+ position: absolute;
107
+ overflow: hidden;
108
+ }
109
+
110
+ .ani-wrap {
111
+ width: 100%;
112
+ height: 100%;
113
+ box-sizing: border-box;
114
+ }
115
+
116
+ .e-shape {
117
+ width: 100%;
118
+ height: 100%;
119
+ }
120
+
121
+ .svg-container :deep(svg) {
122
+ width: 100%;
123
+ height: 100%;
124
+ display: block;
125
+ }
126
+
127
+ .svg-container {
128
+ width: 100%;
129
+ height: 100%;
130
+ display: block;
131
+ }
132
+
133
+
134
+ .svg-loading,
135
+ .svg-error {
136
+ display: flex;
137
+ align-items: center;
138
+ justify-content: center;
139
+ width: 100%;
140
+ height: 100%;
141
+ background: rgba(0,0,0,0.05);
142
+ }
143
+
144
+ .ele-shape .svg-container svg {
145
+ width: 100%;
146
+ height: 100%;
147
+ overflow: visible;
154
148
  }
155
149
  @keyframes jumpheart {
156
150
  to {
@@ -493,50 +487,126 @@
493
487
  }
494
488
  .icon-xingzhuangjiehe:before {
495
489
  content: "\E6A6";
496
- }.ele-shape {
490
+ }.ele-img {
491
+ position: absolute;
492
+ overflow: hidden;
493
+ }
494
+
495
+ .ele-img .ani-wrap {
496
+ width: 100%;
497
+ height: 100%;
498
+ }
499
+
500
+ .ele-img .ele-image {
501
+ position: relative;
502
+ display: block;
503
+ }
504
+
505
+ .ele-img .rotate-wrap {
506
+ position: absolute;
507
+ left: 0;
508
+ right: 0;
509
+ top: 0;
510
+ bottom: 0;
511
+ }
512
+
513
+ .ele-img .ele-img-bg,
514
+ .ele-img .rotate-wrap .img-wrap {
515
+ width: 100%;
516
+ height: 100%;
517
+ overflow: hidden;
518
+ }
519
+
520
+ .ele-img .ele-bg-wrap {
521
+ width: 100%;
522
+ height: 100%;
523
+ background-size: cover;
524
+ background-position: 50% 50%;
525
+ background-repeat: no-repeat;
526
+ background-clip: border-box;
527
+ }
528
+
529
+ /* 动画关键帧 */
530
+ @keyframes zoomIn {
531
+ from {
532
+ opacity: 0;
533
+ transform: scale(0.5);
534
+ }
535
+ to {
536
+ opacity: 1;
537
+ transform: scale(1);
538
+ }
539
+ }#audio {
497
540
  position: absolute;
498
- overflow: hidden;
541
+ right: 10px;
542
+ top: 10px;
543
+ z-index: 103;
544
+ width: 30px;
545
+ height: 30px;
546
+ display: flex;
547
+ align-items: center;
499
548
  }
500
549
 
501
- .ani-wrap {
502
- width: 100%;
503
- height: 100%;
504
- box-sizing: border-box;
550
+ #audio .mrotate {
551
+ animation: mrotate 5s linear infinite;
505
552
  }
506
553
 
507
- .e-shape {
508
- width: 100%;
509
- height: 100%;
554
+ @keyframes mrotate {
555
+ to {
556
+ transform: rotate(1turn);
557
+ }
510
558
  }
511
559
 
512
- .svg-container :deep(svg) {
560
+ #audio .audio {
513
561
  width: 100%;
514
562
  height: 100%;
515
- display: block;
563
+ display: flex;
564
+ align-items: center;
565
+ justify-content: center;
566
+ color: #fff;
567
+ background: #666;
568
+ border-radius: 50%;
569
+ overflow: hidden;
570
+ cursor: pointer;
571
+ transition: all 0.3s ease;
516
572
  }
517
573
 
518
- .svg-container {
519
- width: 100%;
520
- height: 100%;
521
- display: block;
574
+ #audio .audio.a-border {
575
+ border: 1px solid #fff;
522
576
  }
523
577
 
524
-
525
- .svg-loading,
526
- .svg-error {
527
- display: flex;
528
- align-items: center;
529
- justify-content: center;
530
- width: 100%;
531
- height: 100%;
532
- background: rgba(0,0,0,0.05);
578
+ #audio .audio .music-icon {
579
+ display: block;
580
+ width: 60%;
581
+ height: 60%;
582
+ object-fit: contain;
533
583
  }
534
584
 
535
- .ele-shape .svg-container svg {
536
- width: 100%;
537
- height: 100%;
538
- overflow: visible;
585
+ #audio .audio .iconfont {
586
+ font-size: 2opx;
587
+ line-height: 1;
588
+ }
589
+ #audio .icon-cancel {
590
+ position: absolute;
591
+ width: 100%;
592
+ height: 100%;
593
+ border-radius: 50%;
594
+ overflow: hidden;
595
+ padding: 15px 0;
539
596
  }
597
+ #audio .icon-cancel .icon-h {
598
+ transform: rotate(45deg);
599
+ width: 100%;
600
+ height: 2px;
601
+ background: #fff;
602
+ }
603
+ #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
604
+ content: '';
605
+ position: absolute;
606
+ width: 100%;
607
+ height: 2px;
608
+ background: #fff;
609
+ }
540
610
  .element-video {
541
611
  position: absolute;
542
612
  overflow: hidden;
@@ -582,62 +652,7 @@
582
652
 
583
653
  .video-cover:hover .play-btn {
584
654
  opacity: 1;
585
- }.ele-effect {
586
- will-change: transform;
587
- }
588
-
589
- .ele-effect .effect-wrap {
590
- position: relative;
591
- width: 100%;
592
- height: 100%;
593
- }
594
-
595
- .particle {
596
- position: absolute;
597
- background-repeat: no-repeat;
598
- background-size: contain;
599
- animation-name: falling;
600
- animation-timing-function: linear;
601
- animation-iteration-count: infinite;
602
- will-change: transform;
603
- }
604
-
605
- @keyframes falling {
606
- 0% {
607
- transform: translateY(0) rotate(0deg);
608
- opacity: 1;
609
- }
610
- 80% {
611
- opacity: 0.8;
612
- }
613
- 100% {
614
- transform: translateY(100vh) rotate(360deg);
615
- opacity: 0;
616
- }
617
- }
618
- .ele-lottie .ele-lotwrap {
619
- overflow: hidden
620
- }
621
-
622
- .ele-effect .effect-wrap {
623
- position: relative;
624
- overflow: hidden;
625
- width: 100%;
626
- height: 100%
627
- }
628
-
629
- .ele-effect .e-small {
630
- position: absolute;
631
- width: 24px;
632
- height: 24px;
633
- background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
634
- background-size: cover;
635
- background-repeat: no-repeat;
636
- -webkit-transform-origin: center;
637
- transform-origin: center;
638
- -webkit-animation: snow 5s linear infinite;
639
- animation: snow 5s linear infinite
640
- }.element-ditu .ani-wrap {
655
+ }.element-ditu .ani-wrap {
641
656
  width: 100%;
642
657
  height: 100%;
643
658
  overflow: hidden
@@ -681,238 +696,86 @@
681
696
  .map-iframe {
682
697
  width: 100%;
683
698
  height: 100%;
684
- }.count-down .drag-point {
685
- cursor: default!important
686
- }
687
-
688
- .count-down .ani-wrap {
699
+ }#page-list .tip-cover {
700
+ position: fixed;
701
+ left: 0;
702
+ top: 0;
689
703
  width: 100%;
690
- height: 100%
691
- }
692
-
693
- .count-down .count-text,.count-down .finish-cont {
694
- display: -webkit-box;
695
- display: -ms-flexbox;
696
- display: flex;
697
704
  height: 100%;
698
- -webkit-box-align: center;
699
- -ms-flex-align: center;
700
- align-items: center;
701
- -webkit-box-pack: center;
702
- -ms-flex-pack: center;
703
- justify-content: center
704
- }
705
-
706
- .count-down .finish-cont {
707
- width: 100%
708
- }
709
-
710
- .count-down .count-flip {
711
- display: -webkit-box;
712
705
  display: -ms-flexbox;
713
706
  display: flex;
714
- height: 100%;
715
- -webkit-box-align: center;
716
707
  -ms-flex-align: center;
717
708
  align-items: center;
718
- -webkit-box-pack: center;
719
- -ms-flex-pack: center;
720
- justify-content: center
721
- }
722
-
723
- .count-down .count-flip .numscroll {
724
- -webkit-animation: numscroll .4s ease-in-out;
725
- animation: numscroll .4s ease-in-out;
726
- -webkit-animation-fill-mode: both;
727
- animation-fill-mode: both
728
- }
729
-
730
- .count-down .count-flip .numscroll .curr-num {
731
- -webkit-transition: all .3s ease-in-out;
732
- transition: all .3s ease-in-out;
733
- opacity: .6;
734
- -webkit-transform: scale(.5)!important;
735
- transform: scale(.5)!important
736
- }
737
-
738
- @-webkit-keyframes numscroll {
739
- 0% {
740
- -webkit-transform: translateZ(0);
741
- transform: translateZ(0)
742
- }
743
-
744
- to {
745
- -webkit-transform: translate3d(0,100%,0);
746
- transform: translate3d(0,100%,0)
747
- }
748
- }
749
-
750
- @keyframes numscroll {
751
- 0% {
752
- -webkit-transform: translateZ(0);
753
- transform: translateZ(0)
754
- }
755
-
756
- to {
757
- -webkit-transform: translate3d(0,100%,0);
758
- transform: translate3d(0,100%,0)
759
- }
760
- }
761
-
762
- .count-down .count-flip .c-com {
763
- min-width: 50px;
764
- height: auto;
765
- margin: 6px;
766
- padding: 5px 0 6px;
767
- background-color: #111
768
- }
769
-
770
- .count-down .count-flip .c-com .flex-wrap {
771
- display: -webkit-box;
772
- display: -ms-flexbox;
773
- display: flex;
774
- position: relative;
775
- width: 100%;
776
- height: 100%;
777
- -webkit-box-align: center;
778
- -ms-flex-align: center;
779
- align-items: center
780
- }
781
-
782
- .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
783
- line-height: 27px
784
- }
785
-
786
- .count-down .count-flip .c-com .flex-wrap .next-num {
787
- position: absolute;
788
- top: -100%
789
- }
790
-
791
- .count-down .count-flip .c-com .flex-wrap .curr-num {
792
- -webkit-transform: scale(1);
793
- transform: scale(1)
794
- }
795
-
796
- .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 {
797
- display: none!important
798
- }
799
-
800
- .c-wrap {
801
- width: 100%;
802
- height: 100%;
803
- overflow: hidden;
804
- font-size: 0
805
- }
806
-
807
- .c-wrap.c-day-wrap {
808
- text-align: center
809
- }
810
-
811
- .c-wrap.c-day-wrap .c-num {
812
- width: auto
813
- }
814
-
815
- .c-wrap .c-num {
816
- display: inline-block;
817
- width: 50%;
818
- overflow: hidden;
819
- font-size: 20px;
820
- color: #999
821
- }
822
-
823
- .c-wrap .c-left .flex-wrap {
824
- display: -webkit-box;
825
- display: -ms-flexbox;
826
- display: flex;
827
- -webkit-box-pack: end;
828
- -ms-flex-pack: end;
829
- justify-content: flex-end
830
- }
831
-
832
- .c-wrap .c-text {
833
- display: -webkit-box;
834
- display: -ms-flexbox;
835
- display: flex;
836
- width: 100%;
837
- font-size: 12px;
838
- -webkit-box-pack: center;
839
709
  -ms-flex-pack: center;
840
710
  justify-content: center;
841
- -webkit-box-align: center;
842
- -ms-flex-align: center;
843
- align-items: center;
844
- white-space: nowrap
711
+ z-index: 999;
712
+ background-color: rgba(0,0,0,.7)
845
713
  }
846
- #audio {
847
- position: absolute;
848
- right: 10px;
849
- top: 10px;
850
- z-index: 103;
851
- width: 30px;
852
- height: 30px;
853
- display: flex;
854
- align-items: center;
714
+
715
+ #page-list .tip-cover .tip {
716
+ width: 80%;
717
+ max-width: 250px;
718
+ padding: 10px;
719
+ border-radius: 5px;
720
+ background-color: #fff
855
721
  }
856
722
 
857
- #audio .mrotate {
858
- animation: mrotate 5s linear infinite;
723
+ #page-list .tip-cover .tip-btn {
724
+ display: block;
725
+ margin: 25px auto;
726
+ width: 120px;
727
+ height: 30px;
728
+ color: #fff;
729
+ border-radius: 4px;
730
+ text-align: center;
731
+ font-size: 14px;
732
+ line-height: 30px;
733
+ background: #ed5566
859
734
  }
860
735
 
861
- @keyframes mrotate {
862
- to {
863
- transform: rotate(1turn);
864
- }
736
+ #page-list .tip-cover .tip-content {
737
+ font-size: 14px;
738
+ padding-top: 30px;
865
739
  }
866
740
 
867
- #audio .audio {
741
+ .tip-cover {
742
+ position: fixed;
743
+ left: 0;
744
+ top: 0;
868
745
  width: 100%;
869
746
  height: 100%;
747
+ display: -ms-flexbox;
870
748
  display: flex;
749
+ -ms-flex-align: center;
871
750
  align-items: center;
751
+ -ms-flex-pack: center;
872
752
  justify-content: center;
873
- color: #fff;
874
- background: #666;
875
- border-radius: 50%;
876
- overflow: hidden;
877
- cursor: pointer;
878
- transition: all 0.3s ease;
753
+ z-index: 999;
754
+ background-color: rgba(0,0,0,.7)
879
755
  }
880
756
 
881
- #audio .audio.a-border {
882
- border: 1px solid #fff;
757
+ .tip-cover .tip {
758
+ width: 80%;
759
+ max-width: 250px;
760
+ padding: 5px;
761
+ border-radius: 3px;
762
+ background-color: #fff
883
763
  }
884
764
 
885
- #audio .audio .music-icon {
765
+ .tip-cover .tip-btn {
886
766
  display: block;
887
- width: 60%;
888
- height: 60%;
889
- object-fit: contain;
890
- }
891
-
892
- #audio .audio .iconfont {
893
- font-size: 2opx;
894
- line-height: 1;
895
- }
896
- #audio .icon-cancel {
897
- position: absolute;
898
- width: 100%;
899
- height: 100%;
900
- border-radius: 50%;
767
+ margin: 13px auto;
768
+ width: 64px;
769
+ height: 20px;
770
+ color: #fff;
771
+ border-radius: 4px;
772
+ text-align: center;
773
+ font-size: 14px;
774
+ line-height: 20px;
775
+ background: #ed5566;
776
+ }
777
+ .ele-lottie .ele-lotwrap {
901
778
  overflow: hidden;
902
- padding: 15px 0;
903
- }
904
- #audio .icon-cancel .icon-h {
905
- transform: rotate(45deg);
906
- width: 100%;
907
- height: 2px;
908
- background: #fff;
909
- }
910
- #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
911
- content: '';
912
- position: absolute;
913
- width: 100%;
914
- height: 2px;
915
- background: #fff;
916
779
  }.call {
917
780
  position: absolute;
918
781
  cursor: pointer;
@@ -946,37 +809,6 @@
946
809
 
947
810
  .hb-tel:before {
948
811
  content: "\E642";
949
- }
950
- .ele-lottie .ele-lotwrap {
951
- overflow: hidden;
952
- }.button {
953
- position: absolute;
954
- cursor: pointer;
955
- user-select: none;
956
- }
957
-
958
- .button .ani-wrap {
959
- display: flex;
960
- justify-content: center;
961
- align-items: center;
962
- width: 100%;
963
- height: 100%;
964
- overflow: hidden;
965
- transition: opacity 0.2s;
966
- }
967
-
968
- .button .ani-wrap:hover {
969
- opacity: 0.9;
970
- }
971
-
972
- .button-content {
973
- display: flex;
974
- align-items: center;
975
- justify-content: center;
976
- }
977
-
978
- .btn-text {
979
- margin-left: 10px;
980
812
  }/* Iconfont definition */
981
813
  .icon-danmuliebiao1:before {
982
814
  content: "\E68A";
@@ -8300,153 +8132,321 @@ to {
8300
8132
  }
8301
8133
  }
8302
8134
 
8303
- @keyframes downSlide {
8304
- 0% {
8305
- -webkit-transform: translateY(100%);
8306
- transform: translateY(100%)
8307
- }
8308
-
8309
- to {
8310
- -webkit-transform: translateY(0);
8311
- transform: translateY(0)
8312
- }
8135
+ @keyframes downSlide {
8136
+ 0% {
8137
+ -webkit-transform: translateY(100%);
8138
+ transform: translateY(100%)
8139
+ }
8140
+
8141
+ to {
8142
+ -webkit-transform: translateY(0);
8143
+ transform: translateY(0)
8144
+ }
8145
+ }
8146
+
8147
+ .p-leftSlide {
8148
+ -webkit-animation: leftSlide .7s ease both;
8149
+ animation: leftSlide .7s ease both
8150
+ }
8151
+
8152
+ @-webkit-keyframes leftSlide {
8153
+ 0% {
8154
+ -webkit-transform: translateX(-100%);
8155
+ transform: translateX(-100%)
8156
+ }
8157
+
8158
+ to {
8159
+ -webkit-transform: translateX(0);
8160
+ transform: translateX(0)
8161
+ }
8162
+ }
8163
+
8164
+ @keyframes leftSlide {
8165
+ 0% {
8166
+ -webkit-transform: translateX(-100%);
8167
+ transform: translateX(-100%)
8168
+ }
8169
+
8170
+ to {
8171
+ -webkit-transform: translateX(0);
8172
+ transform: translateX(0)
8173
+ }
8174
+ }
8175
+
8176
+ .p-rightSlide {
8177
+ -webkit-animation: rightSlide .7s ease both;
8178
+ animation: rightSlide .7s ease both
8179
+ }
8180
+
8181
+ @-webkit-keyframes rightSlide {
8182
+ 0% {
8183
+ -webkit-transform: translateX(100%);
8184
+ transform: translateX(100%)
8185
+ }
8186
+
8187
+ to {
8188
+ -webkit-transform: translateX(0);
8189
+ transform: translateX(0)
8190
+ }
8191
+ }
8192
+
8193
+ @keyframes rightSlide {
8194
+ 0% {
8195
+ -webkit-transform: translateX(100%);
8196
+ transform: translateX(100%)
8197
+ }
8198
+
8199
+ to {
8200
+ -webkit-transform: translateX(0);
8201
+ transform: translateX(0)
8202
+ }
8203
+ }
8204
+ .count-down .drag-point {
8205
+ cursor: default!important
8206
+ }
8207
+
8208
+ .count-down .ani-wrap {
8209
+ width: 100%;
8210
+ height: 100%
8211
+ }
8212
+
8213
+ .count-down .count-text,.count-down .finish-cont {
8214
+ display: -webkit-box;
8215
+ display: -ms-flexbox;
8216
+ display: flex;
8217
+ height: 100%;
8218
+ -webkit-box-align: center;
8219
+ -ms-flex-align: center;
8220
+ align-items: center;
8221
+ -webkit-box-pack: center;
8222
+ -ms-flex-pack: center;
8223
+ justify-content: center
8224
+ }
8225
+
8226
+ .count-down .finish-cont {
8227
+ width: 100%
8228
+ }
8229
+
8230
+ .count-down .count-flip {
8231
+ display: -webkit-box;
8232
+ display: -ms-flexbox;
8233
+ display: flex;
8234
+ height: 100%;
8235
+ -webkit-box-align: center;
8236
+ -ms-flex-align: center;
8237
+ align-items: center;
8238
+ -webkit-box-pack: center;
8239
+ -ms-flex-pack: center;
8240
+ justify-content: center
8241
+ }
8242
+
8243
+ .count-down .count-flip .numscroll {
8244
+ -webkit-animation: numscroll .4s ease-in-out;
8245
+ animation: numscroll .4s ease-in-out;
8246
+ -webkit-animation-fill-mode: both;
8247
+ animation-fill-mode: both
8248
+ }
8249
+
8250
+ .count-down .count-flip .numscroll .curr-num {
8251
+ -webkit-transition: all .3s ease-in-out;
8252
+ transition: all .3s ease-in-out;
8253
+ opacity: .6;
8254
+ -webkit-transform: scale(.5)!important;
8255
+ transform: scale(.5)!important
8256
+ }
8257
+
8258
+ @-webkit-keyframes numscroll {
8259
+ 0% {
8260
+ -webkit-transform: translateZ(0);
8261
+ transform: translateZ(0)
8262
+ }
8263
+
8264
+ to {
8265
+ -webkit-transform: translate3d(0,100%,0);
8266
+ transform: translate3d(0,100%,0)
8267
+ }
8268
+ }
8269
+
8270
+ @keyframes numscroll {
8271
+ 0% {
8272
+ -webkit-transform: translateZ(0);
8273
+ transform: translateZ(0)
8274
+ }
8275
+
8276
+ to {
8277
+ -webkit-transform: translate3d(0,100%,0);
8278
+ transform: translate3d(0,100%,0)
8279
+ }
8280
+ }
8281
+
8282
+ .count-down .count-flip .c-com {
8283
+ min-width: 50px;
8284
+ height: auto;
8285
+ margin: 6px;
8286
+ padding: 5px 0 6px;
8287
+ background-color: #111
8313
8288
  }
8314
8289
 
8315
- .p-leftSlide {
8316
- -webkit-animation: leftSlide .7s ease both;
8317
- animation: leftSlide .7s ease both
8290
+ .count-down .count-flip .c-com .flex-wrap {
8291
+ display: -webkit-box;
8292
+ display: -ms-flexbox;
8293
+ display: flex;
8294
+ position: relative;
8295
+ width: 100%;
8296
+ height: 100%;
8297
+ -webkit-box-align: center;
8298
+ -ms-flex-align: center;
8299
+ align-items: center
8318
8300
  }
8319
8301
 
8320
- @-webkit-keyframes leftSlide {
8321
- 0% {
8322
- -webkit-transform: translateX(-100%);
8323
- transform: translateX(-100%)
8324
- }
8302
+ .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
8303
+ line-height: 27px
8304
+ }
8325
8305
 
8326
- to {
8327
- -webkit-transform: translateX(0);
8328
- transform: translateX(0)
8329
- }
8306
+ .count-down .count-flip .c-com .flex-wrap .next-num {
8307
+ position: absolute;
8308
+ top: -100%
8330
8309
  }
8331
8310
 
8332
- @keyframes leftSlide {
8333
- 0% {
8334
- -webkit-transform: translateX(-100%);
8335
- transform: translateX(-100%)
8336
- }
8311
+ .count-down .count-flip .c-com .flex-wrap .curr-num {
8312
+ -webkit-transform: scale(1);
8313
+ transform: scale(1)
8314
+ }
8337
8315
 
8338
- to {
8339
- -webkit-transform: translateX(0);
8340
- transform: translateX(0)
8341
- }
8316
+ .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 {
8317
+ display: none!important
8342
8318
  }
8343
8319
 
8344
- .p-rightSlide {
8345
- -webkit-animation: rightSlide .7s ease both;
8346
- animation: rightSlide .7s ease both
8320
+ .c-wrap {
8321
+ width: 100%;
8322
+ height: 100%;
8323
+ overflow: hidden;
8324
+ font-size: 0
8347
8325
  }
8348
8326
 
8349
- @-webkit-keyframes rightSlide {
8350
- 0% {
8351
- -webkit-transform: translateX(100%);
8352
- transform: translateX(100%)
8353
- }
8327
+ .c-wrap.c-day-wrap {
8328
+ text-align: center
8329
+ }
8354
8330
 
8355
- to {
8356
- -webkit-transform: translateX(0);
8357
- transform: translateX(0)
8358
- }
8331
+ .c-wrap.c-day-wrap .c-num {
8332
+ width: auto
8359
8333
  }
8360
8334
 
8361
- @keyframes rightSlide {
8362
- 0% {
8363
- -webkit-transform: translateX(100%);
8364
- transform: translateX(100%)
8365
- }
8335
+ .c-wrap .c-num {
8336
+ display: inline-block;
8337
+ width: 50%;
8338
+ overflow: hidden;
8339
+ font-size: 20px;
8340
+ color: #999
8341
+ }
8366
8342
 
8367
- to {
8368
- -webkit-transform: translateX(0);
8369
- transform: translateX(0)
8370
- }
8343
+ .c-wrap .c-left .flex-wrap {
8344
+ display: -webkit-box;
8345
+ display: -ms-flexbox;
8346
+ display: flex;
8347
+ -webkit-box-pack: end;
8348
+ -ms-flex-pack: end;
8349
+ justify-content: flex-end
8371
8350
  }
8372
- #page-list .tip-cover {
8373
- position: fixed;
8374
- left: 0;
8375
- top: 0;
8376
- width: 100%;
8377
- height: 100%;
8351
+
8352
+ .c-wrap .c-text {
8353
+ display: -webkit-box;
8378
8354
  display: -ms-flexbox;
8379
8355
  display: flex;
8356
+ width: 100%;
8357
+ font-size: 12px;
8358
+ -webkit-box-pack: center;
8359
+ -ms-flex-pack: center;
8360
+ justify-content: center;
8361
+ -webkit-box-align: center;
8380
8362
  -ms-flex-align: center;
8381
8363
  align-items: center;
8382
- -ms-flex-pack: center;
8364
+ white-space: nowrap
8365
+ }
8366
+ .button {
8367
+ position: absolute;
8368
+ cursor: pointer;
8369
+ user-select: none;
8370
+ }
8371
+
8372
+ .button .ani-wrap {
8373
+ display: flex;
8383
8374
  justify-content: center;
8384
- z-index: 999;
8385
- background-color: rgba(0,0,0,.7)
8375
+ align-items: center;
8376
+ width: 100%;
8377
+ height: 100%;
8378
+ overflow: hidden;
8379
+ transition: opacity 0.2s;
8386
8380
  }
8387
-
8388
- #page-list .tip-cover .tip {
8389
- width: 80%;
8390
- max-width: 250px;
8391
- padding: 10px;
8392
- border-radius: 5px;
8393
- background-color: #fff
8381
+
8382
+ .button .ani-wrap:hover {
8383
+ opacity: 0.9;
8394
8384
  }
8395
8385
 
8396
- #page-list .tip-cover .tip-btn {
8397
- display: block;
8398
- margin: 25px auto;
8399
- width: 120px;
8400
- height: 30px;
8401
- color: #fff;
8402
- border-radius: 4px;
8403
- text-align: center;
8404
- font-size: 14px;
8405
- line-height: 30px;
8406
- background: #ed5566
8386
+ .button-content {
8387
+ display: flex;
8388
+ align-items: center;
8389
+ justify-content: center;
8407
8390
  }
8408
8391
 
8409
- #page-list .tip-cover .tip-content {
8410
- font-size: 14px;
8411
- padding-top: 30px;
8392
+ .btn-text {
8393
+ margin-left: 10px;
8394
+ }.ele-effect {
8395
+ will-change: transform;
8412
8396
  }
8413
8397
 
8414
- .tip-cover {
8415
- position: fixed;
8416
- left: 0;
8417
- top: 0;
8398
+ .ele-effect .effect-wrap {
8399
+ position: relative;
8418
8400
  width: 100%;
8419
8401
  height: 100%;
8420
- display: -ms-flexbox;
8421
- display: flex;
8422
- -ms-flex-align: center;
8423
- align-items: center;
8424
- -ms-flex-pack: center;
8425
- justify-content: center;
8426
- z-index: 999;
8427
- background-color: rgba(0,0,0,.7)
8428
8402
  }
8429
8403
 
8430
- .tip-cover .tip {
8431
- width: 80%;
8432
- max-width: 250px;
8433
- padding: 5px;
8434
- border-radius: 3px;
8435
- background-color: #fff
8404
+ .particle {
8405
+ position: absolute;
8406
+ background-repeat: no-repeat;
8407
+ background-size: contain;
8408
+ animation-name: falling;
8409
+ animation-timing-function: linear;
8410
+ animation-iteration-count: infinite;
8411
+ will-change: transform;
8436
8412
  }
8437
8413
 
8438
- .tip-cover .tip-btn {
8439
- display: block;
8440
- margin: 13px auto;
8441
- width: 64px;
8442
- height: 20px;
8443
- color: #fff;
8444
- border-radius: 4px;
8445
- text-align: center;
8446
- font-size: 14px;
8447
- line-height: 20px;
8448
- background: #ed5566;
8449
- } .form-submit {
8414
+ @keyframes falling {
8415
+ 0% {
8416
+ transform: translateY(0) rotate(0deg);
8417
+ opacity: 1;
8418
+ }
8419
+ 80% {
8420
+ opacity: 0.8;
8421
+ }
8422
+ 100% {
8423
+ transform: translateY(100vh) rotate(360deg);
8424
+ opacity: 0;
8425
+ }
8426
+ }
8427
+ .ele-lottie .ele-lotwrap {
8428
+ overflow: hidden
8429
+ }
8430
+
8431
+ .ele-effect .effect-wrap {
8432
+ position: relative;
8433
+ overflow: hidden;
8434
+ width: 100%;
8435
+ height: 100%
8436
+ }
8437
+
8438
+ .ele-effect .e-small {
8439
+ position: absolute;
8440
+ width: 24px;
8441
+ height: 24px;
8442
+ background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
8443
+ background-size: cover;
8444
+ background-repeat: no-repeat;
8445
+ -webkit-transform-origin: center;
8446
+ transform-origin: center;
8447
+ -webkit-animation: snow 5s linear infinite;
8448
+ animation: snow 5s linear infinite
8449
+ }.form-submit {
8450
8450
  cursor: pointer;
8451
8451
  transition: all 0.2s;
8452
8452
  outline: none;
@@ -9228,30 +9228,30 @@ cursor: not-allowed;
9228
9228
  .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
9229
9229
  }
9230
9230
 
9231
- .global.tel {
9231
+ .global.map {
9232
9232
  width: 35px;
9233
9233
  height: 55px;
9234
9234
  border-radius: 50%;
9235
9235
  text-align: center;
9236
- margin-bottom: 15px;
9236
+ margin-bottom: 5px;
9237
9237
  border: 2px solid #fff;
9238
9238
  cursor: pointer;
9239
9239
  }
9240
- .icon-dianhua:before { content: "\E60E"; }
9240
+ .icon-daohang1:before { content: "\E612"; }
9241
9241
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
9242
- .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
9243
- .global.map {
9242
+ .global.map > span { font-size: 10px; line-height: 20px; display: block;}
9243
+ .global.tel {
9244
9244
  width: 35px;
9245
9245
  height: 55px;
9246
9246
  border-radius: 50%;
9247
9247
  text-align: center;
9248
- margin-bottom: 5px;
9248
+ margin-bottom: 15px;
9249
9249
  border: 2px solid #fff;
9250
9250
  cursor: pointer;
9251
9251
  }
9252
- .icon-daohang1:before { content: "\E612"; }
9252
+ .icon-dianhua:before { content: "\E60E"; }
9253
9253
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
9254
- .global.map > span { font-size: 10px; line-height: 20px; display: block;}
9254
+ .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
9255
9255
  .global.receipt {
9256
9256
  width: 35px;
9257
9257
  height: 55px;