unika-components 1.2.8 → 1.2.9

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.
@@ -36,73 +36,52 @@
36
36
  opacity: 0.5;
37
37
  }
38
38
 
39
- .ele-text {
40
- position: relative;
41
- }
42
-
43
- .ele-text .ani-wrap {
44
- width: 100%;
45
- height: 100%;
46
- }
47
-
48
- .text-common {
49
- padding: 5px;
50
- text-orientation: upright;
51
- white-space: pre-wrap;
52
- }
53
-
54
- /* 文本动画类 */
55
- .text-fadeIn {
56
- animation: fadeIn 1s ease-in-out;
57
- }
58
-
59
- .text-slideIn {
60
- animation: slideIn 1s ease-in-out;
61
- }
62
-
63
- .text-bounceIn {
64
- animation: bounceIn 1s ease-in-out;
65
- }
66
-
67
- /* 基础动画关键帧 */
68
- @keyframes fadeIn {
69
- from {
70
- opacity: 0;
39
+ .element-video {
40
+ position: absolute;
41
+ overflow: hidden;
42
+ background-color: transparent;
71
43
  }
72
- to {
73
- opacity: 1;
44
+
45
+ .element-video .ani-wrap, .element-video img {
46
+ display: block;
47
+ width: 100%;
48
+ height: 100%;
74
49
  }
75
- }
76
-
77
- @keyframes slideIn {
78
- from {
79
- transform: translateY(20px);
80
- opacity: 0;
50
+
51
+ .video-container {
52
+ width: 100%;
53
+ height: 100%;
81
54
  }
82
- to {
83
- transform: translateY(0);
84
- opacity: 1;
55
+
56
+ .video-container iframe {
57
+ width: 100%;
58
+ height: 100%;
59
+ border: none;
85
60
  }
86
- }
87
-
88
- @keyframes bounceIn {
89
- 0% {
90
- transform: scale(0.3);
91
- opacity: 0;
61
+
62
+ .video-cover {
63
+ position: relative;
64
+ width: 100%;
65
+ height: 100%;
66
+ background-size: cover;
67
+ background-position: center;
68
+ cursor: pointer;
92
69
  }
93
- 50% {
94
- transform: scale(1.05);
70
+
71
+ .video-cover .play-btn {
72
+ position: absolute;
73
+ left: 50%;
74
+ top: 50%;
75
+ transform: translate(-50%, -50%);
76
+ width: 50px;
77
+ height: 50px;
95
78
  opacity: 0.8;
79
+ transition: opacity 0.2s;
96
80
  }
97
- 70% {
98
- transform: scale(0.9);
99
- opacity: 0.9;
100
- }
101
- 100% {
102
- transform: scale(1);
81
+
82
+ .video-cover:hover .play-btn {
103
83
  opacity: 1;
104
- }
105
- }#audio {
84
+ }#audio {
106
85
  position: absolute;
107
86
  right: 10px;
108
87
  top: 10px;
@@ -173,6 +152,125 @@
173
152
  height: 2px;
174
153
  background: #fff;
175
154
  }
155
+ .ele-text {
156
+ position: relative;
157
+ }
158
+
159
+ .ele-text .ani-wrap {
160
+ width: 100%;
161
+ height: 100%;
162
+ }
163
+
164
+ .text-common {
165
+ padding: 5px;
166
+ text-orientation: upright;
167
+ white-space: pre-wrap;
168
+ }
169
+
170
+ /* 文本动画类 */
171
+ .text-fadeIn {
172
+ animation: fadeIn 1s ease-in-out;
173
+ }
174
+
175
+ .text-slideIn {
176
+ animation: slideIn 1s ease-in-out;
177
+ }
178
+
179
+ .text-bounceIn {
180
+ animation: bounceIn 1s ease-in-out;
181
+ }
182
+
183
+ /* 基础动画关键帧 */
184
+ @keyframes fadeIn {
185
+ from {
186
+ opacity: 0;
187
+ }
188
+ to {
189
+ opacity: 1;
190
+ }
191
+ }
192
+
193
+ @keyframes slideIn {
194
+ from {
195
+ transform: translateY(20px);
196
+ opacity: 0;
197
+ }
198
+ to {
199
+ transform: translateY(0);
200
+ opacity: 1;
201
+ }
202
+ }
203
+
204
+ @keyframes bounceIn {
205
+ 0% {
206
+ transform: scale(0.3);
207
+ opacity: 0;
208
+ }
209
+ 50% {
210
+ transform: scale(1.05);
211
+ opacity: 0.8;
212
+ }
213
+ 70% {
214
+ transform: scale(0.9);
215
+ opacity: 0.9;
216
+ }
217
+ 100% {
218
+ transform: scale(1);
219
+ opacity: 1;
220
+ }
221
+ }.ele-img {
222
+ position: absolute;
223
+ overflow: hidden;
224
+ }
225
+
226
+ .ele-img .ani-wrap {
227
+ width: 100%;
228
+ height: 100%;
229
+ }
230
+
231
+ .ele-img .ele-image {
232
+ position: relative;
233
+ display: block;
234
+ }
235
+
236
+ .ele-img .rotate-wrap {
237
+ position: absolute;
238
+ left: 0;
239
+ right: 0;
240
+ top: 0;
241
+ bottom: 0;
242
+ }
243
+
244
+ .ele-img .ele-img-bg,
245
+ .ele-img .rotate-wrap .img-wrap {
246
+ width: 100%;
247
+ height: 100%;
248
+ overflow: hidden;
249
+ }
250
+
251
+ .ele-img .ele-bg-wrap {
252
+ width: 100%;
253
+ height: 100%;
254
+ background-size: cover;
255
+ background-position: 50% 50%;
256
+ background-repeat: no-repeat;
257
+ background-clip: border-box;
258
+ }
259
+
260
+ /* 动画关键帧 */
261
+ @keyframes zoomIn {
262
+ from {
263
+ opacity: 0;
264
+ transform: scale(0.5);
265
+ }
266
+ to {
267
+ opacity: 1;
268
+ transform: scale(1);
269
+ }
270
+ }
271
+ .ele-lottie .ele-lotwrap {
272
+ overflow: hidden;
273
+ }
176
274
  @keyframes jumpheart {
177
275
  to {
178
276
  -webkit-transform: scale(1.2);
@@ -514,594 +612,180 @@
514
612
  }
515
613
  .icon-xingzhuangjiehe:before {
516
614
  content: "\E6A6";
517
- }.element-ditu .ani-wrap {
518
- width: 100%;
519
- height: 100%;
520
- overflow: hidden
521
- }
522
-
523
- .element-ditu .map {
524
- width: 100%;
525
- height: 100%
526
- }
527
-
528
- .element-ditu .map .el-button {
529
- width: 100%;
530
- height: 100%;
531
- display: -webkit-box;
532
- display: -ms-flexbox;
533
- display: flex;
534
- -webkit-box-align: center;
535
- -ms-flex-align: center;
536
- align-items: center;
537
- padding: 0;
538
- -webkit-box-pack: center;
539
- -ms-flex-pack: center;
540
- justify-content: center;
541
- background: inherit;
542
- color: inherit;
543
- border: none
544
- }
545
-
546
- .element-ditu .center-map {
547
- width: 100%;
548
- height: 100%;
549
- background: #fff
550
- }
551
-
552
- .element-ditu .mask-map {
553
- position: absolute;
554
- width: 100%;
555
- height: 100%;
556
- top: 0
557
- }
558
- .map-iframe {
559
- width: 100%;
560
- height: 100%;
561
- }.ele-shape {
562
- position: absolute;
563
- overflow: hidden;
564
- }
565
-
566
- .ani-wrap {
567
- width: 100%;
568
- height: 100%;
569
- box-sizing: border-box;
570
- }
571
-
572
- .e-shape {
573
- width: 100%;
574
- height: 100%;
575
- }
576
-
577
- .svg-container :deep(svg) {
578
- width: 100%;
579
- height: 100%;
580
- display: block;
581
- }
582
-
583
- .svg-container {
584
- width: 100%;
585
- height: 100%;
586
- display: block;
587
- }
588
-
589
-
590
- .svg-loading,
591
- .svg-error {
592
- display: flex;
593
- align-items: center;
594
- justify-content: center;
595
- width: 100%;
596
- height: 100%;
597
- background: rgba(0,0,0,0.05);
598
- }
599
-
600
- .ele-shape .svg-container svg {
601
- width: 100%;
602
- height: 100%;
603
- overflow: visible;
604
- }.ele-img {
605
- position: absolute;
606
- overflow: hidden;
615
+ }/* Iconfont definition */
616
+ .icon-danmuliebiao1:before {
617
+ content: "\E68A";
607
618
  }
608
619
 
609
- .ele-img .ani-wrap {
610
- width: 100%;
611
- height: 100%;
620
+ .icon-cuowu2:before {
621
+ content: "\E65E";
612
622
  }
613
623
 
614
- .ele-img .ele-image {
615
- position: relative;
616
- display: block;
624
+ i {
625
+ font-style: normal;
617
626
  }
618
627
 
619
- .ele-img .rotate-wrap {
620
- position: absolute;
628
+ .v-modal {
629
+ position: fixed;
630
+ left: 0;
631
+ top: 0;
632
+ width: 100%;
633
+ height: 100%;
634
+ opacity: .5;
635
+ background: #000;
636
+ }
637
+ /* 底部工具栏样式 */
638
+ #toolbarNew {
639
+ position: fixed;
621
640
  left: 0;
622
- right: 0;
623
- top: 0;
624
641
  bottom: 0;
642
+ width: 100%;
643
+ padding: 12px 0;
644
+ background: url('https://h5cdn.unika.cc/static/img/uniComponents/inputBg.png') 0 0 repeat-x;
645
+ z-index: 100;
625
646
  }
626
647
 
627
- .ele-img .ele-img-bg,
628
- .ele-img .rotate-wrap .img-wrap {
629
- width: 100%;
630
- height: 100%;
631
- overflow: hidden;
648
+ .toolbar {
649
+ display: flex;
650
+ align-items: center;
651
+ padding: 0 10px;
632
652
  }
633
653
 
634
- .ele-img .ele-bg-wrap {
654
+ .bar-left {
655
+ position: relative;
656
+ flex: 1;
657
+ }
658
+
659
+ .bar-mess {
635
660
  width: 100%;
636
- height: 100%;
637
- background-size: cover;
638
- background-position: 50% 50%;
639
- background-repeat: no-repeat;
640
- background-clip: border-box;
661
+ height: 36px;
662
+ line-height: 36px;
663
+ font-size: 14px;
664
+ color: #ccc;
665
+ padding: 0 8px;
666
+ border-radius: 18px;
667
+ border: none;
668
+ -webkit-appearance: none;
669
+ background-color: rgba(0, 0, 0, 0.28);
641
670
  }
642
671
 
643
- /* 动画关键帧 */
644
- @keyframes zoomIn {
645
- from {
646
- opacity: 0;
647
- transform: scale(0.5);
648
- }
649
- to {
650
- opacity: 1;
651
- transform: scale(1);
652
- }
672
+ .bar-mess::placeholder {
673
+ color: rgba(255, 255, 255, 0.7);
653
674
  }
654
- .element-video {
675
+
676
+ .bar-left .iconfont {
677
+ position: absolute;
678
+ right: 10px;
679
+ top: 50%;
680
+ transform: translateY(-50%);
681
+ color: #f2f2f2;
682
+ font-size: 16px;
683
+ cursor: pointer;
684
+ z-index: 2;
685
+ padding: 5px;
686
+ }
687
+
688
+ /* 关闭弹幕按钮样式 */
689
+ .toolbar-close {
655
690
  position: absolute;
691
+ left: 10px;
692
+ transform: translateY(-50%);
693
+ display: flex;
694
+ align-items: center;
695
+ cursor: pointer;
696
+ z-index: 2;
697
+ }
698
+
699
+ .toolbar-close img {
700
+ display: block;
701
+ width: 36px;
702
+ height: 36px;
703
+ cursor: pointer;
704
+ }
705
+
706
+ /* 弹幕容器样式 */
707
+ .bullet-container {
708
+ position: fixed;
709
+ left: 10px;
710
+ right: 10px;
711
+ height: 120px;
656
712
  overflow: hidden;
657
- background-color: transparent;
713
+ z-index: 99;
714
+ pointer-events: none;
658
715
  }
659
716
 
660
- .element-video .ani-wrap, .element-video img {
661
- display: block;
662
- width: 100%;
663
- height: 100%;
717
+ .bullet-item {
718
+ position: absolute;
719
+ left: 0;
720
+ bottom: 0;
721
+ padding: 5px 10px;
722
+ border-radius: 15px;
723
+ font-size: 14px;
724
+ white-space: nowrap;
725
+ animation: bulletMove linear;
726
+ animation-fill-mode: forwards;
727
+ will-change: transform;
728
+ display: inline-block;
729
+ max-width: 90%;
664
730
  }
665
731
 
666
- .video-container {
667
- width: 100%;
668
- height: 100%;
732
+ @keyframes bulletMove {
733
+ 0% {
734
+ transform: translateY(0);
735
+ opacity: 1;
736
+ }
737
+ 100% {
738
+ transform: translateY(calc(-1 * 150px));
739
+ opacity: 0;
740
+ }
669
741
  }
670
742
 
671
- .video-container iframe {
672
- width: 100%;
673
- height: 100%;
674
- border: none;
743
+ /* 弹幕输入弹窗样式 */
744
+ .popup-overlay {
745
+ position: fixed;
746
+ top: 0;
747
+ left: 0;
748
+ right: 0;
749
+ bottom: 0;
750
+ background: rgba(0, 0, 0, 0.5);
751
+ display: flex;
752
+ justify-content: center;
753
+ align-items: flex-end;
754
+ z-index: 200;
675
755
  }
676
756
 
677
- .video-cover {
757
+ #index .mint-popup {
758
+ background-color: transparent;
759
+ }
760
+
761
+ .mint-popup {
762
+ position: fixed;
763
+ background: #fff;
764
+ top: 50%;
765
+ left: 50%;
766
+ transform: translate3d(-50%, -50%, 0);
767
+ -webkit-backface-visibility: hidden;
768
+ backface-visibility: hidden;
769
+ transition: .2s ease-out;
770
+ }
771
+
772
+ .bar-messwin {
773
+ width: 309px;
774
+ height: 341px;
775
+ background: url('https://h5cdn.unika.cc/static/img/uniComponents/mess-bg.png') no-repeat 50%;
776
+ background-size: 100% 100%;
678
777
  position: relative;
679
- width: 100%;
680
- height: 100%;
681
- background-size: cover;
682
- background-position: center;
683
- cursor: pointer;
778
+ display: flex;
779
+ flex-direction: column;
780
+ align-items: center;
781
+ margin-bottom: 20px;
684
782
  }
685
783
 
686
- .video-cover .play-btn {
687
- position: absolute;
688
- left: 50%;
689
- top: 50%;
690
- transform: translate(-50%, -50%);
691
- width: 50px;
692
- height: 50px;
693
- opacity: 0.8;
694
- transition: opacity 0.2s;
695
- }
696
-
697
- .video-cover:hover .play-btn {
698
- opacity: 1;
699
- }.count-down .drag-point {
700
- cursor: default!important
701
- }
702
-
703
- .count-down .ani-wrap {
704
- width: 100%;
705
- height: 100%;
706
- overflow: visible;
707
- }
708
-
709
- .count-down .count-text,.count-down .finish-cont {
710
- display: -webkit-box;
711
- display: -ms-flexbox;
712
- display: flex;
713
- height: 100%;
714
- -webkit-box-align: center;
715
- -ms-flex-align: center;
716
- align-items: center;
717
- -webkit-box-pack: center;
718
- -ms-flex-pack: center;
719
- justify-content: center
720
- }
721
-
722
- .count-down .finish-cont {
723
- width: 100%
724
- }
725
-
726
- .count-down .count-flip {
727
- display: -webkit-box;
728
- display: -ms-flexbox;
729
- display: flex;
730
- height: 100%;
731
- -webkit-box-align: center;
732
- -ms-flex-align: center;
733
- align-items: center;
734
- -webkit-box-pack: center;
735
- -ms-flex-pack: center;
736
- justify-content: center
737
- }
738
-
739
- .count-down .count-flip[data-direction="vertical"] {
740
- -webkit-box-orient: vertical;
741
- -webkit-box-direction: normal;
742
- -ms-flex-direction: column;
743
- flex-direction: column;
744
- height: auto;
745
- min-height: 100%;
746
- }
747
-
748
- .count-down .count-flip[data-direction="vertical"] .c-com {
749
- margin: 6px 0;
750
- width: auto;
751
- }
752
-
753
- .count-down .count-flip .numscroll {
754
- -webkit-animation: numscroll .4s ease-in-out;
755
- animation: numscroll .4s ease-in-out;
756
- -webkit-animation-fill-mode: both;
757
- animation-fill-mode: both
758
- }
759
-
760
- .count-down .count-flip .numscroll .curr-num {
761
- -webkit-transition: all .3s ease-in-out;
762
- transition: all .3s ease-in-out;
763
- opacity: .6;
764
- -webkit-transform: scale(.5)!important;
765
- transform: scale(.5)!important
766
- }
767
-
768
- @-webkit-keyframes numscroll {
769
- 0% {
770
- -webkit-transform: translateZ(0);
771
- transform: translateZ(0)
772
- }
773
-
774
- to {
775
- -webkit-transform: translate3d(0,100%,0);
776
- transform: translate3d(0,100%,0)
777
- }
778
- }
779
-
780
- @keyframes numscroll {
781
- 0% {
782
- -webkit-transform: translateZ(0);
783
- transform: translateZ(0)
784
- }
785
-
786
- to {
787
- -webkit-transform: translate3d(0,100%,0);
788
- transform: translate3d(0,100%,0)
789
- }
790
- }
791
-
792
- .count-down .count-flip .c-com {
793
- min-width: 50px;
794
- height: auto;
795
- margin: 6px;
796
- padding: 5px 0 6px;
797
- background-color: #111
798
- }
799
-
800
- .count-down .count-flip .c-com .flex-wrap {
801
- display: -webkit-box;
802
- display: -ms-flexbox;
803
- display: flex;
804
- position: relative;
805
- width: 100%;
806
- height: 100%;
807
- -webkit-box-align: center;
808
- -ms-flex-align: center;
809
- align-items: center
810
- }
811
-
812
- .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
813
- line-height: 27px
814
- }
815
-
816
- .count-down .count-flip .c-com .flex-wrap .next-num {
817
- position: absolute;
818
- top: -100%
819
- }
820
-
821
- .count-down .count-flip .c-com .flex-wrap .curr-num {
822
- -webkit-transform: scale(1);
823
- transform: scale(1)
824
- }
825
-
826
- .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 {
827
- display: none!important
828
- }
829
-
830
- .c-wrap {
831
- width: 100%;
832
- height: 100%;
833
- overflow: hidden;
834
- font-size: 0
835
- }
836
-
837
- .c-wrap.c-day-wrap {
838
- text-align: center
839
- }
840
-
841
- .c-wrap.c-day-wrap .c-num {
842
- width: auto
843
- }
844
-
845
- .c-wrap .c-num {
846
- display: inline-block;
847
- width: 50%;
848
- overflow: hidden;
849
- font-size: 20px;
850
- color: #999
851
- }
852
-
853
- .c-wrap .c-left .flex-wrap {
854
- display: -webkit-box;
855
- display: -ms-flexbox;
856
- display: flex;
857
- -webkit-box-pack: end;
858
- -ms-flex-pack: end;
859
- justify-content: flex-end
860
- }
861
-
862
- .c-wrap .c-text {
863
- display: -webkit-box;
864
- display: -ms-flexbox;
865
- display: flex;
866
- width: 100%;
867
- font-size: 12px;
868
- -webkit-box-pack: center;
869
- -ms-flex-pack: center;
870
- justify-content: center;
871
- -webkit-box-align: center;
872
- -ms-flex-align: center;
873
- align-items: center;
874
- white-space: nowrap
875
- }
876
- .ele-effect {
877
- will-change: transform;
878
- }
879
-
880
- .ele-effect .effect-wrap {
881
- position: relative;
882
- width: 100%;
883
- height: 100%;
884
- }
885
-
886
- .particle {
887
- position: absolute;
888
- background-repeat: no-repeat;
889
- background-size: contain;
890
- animation-name: falling;
891
- animation-timing-function: linear;
892
- animation-iteration-count: infinite;
893
- will-change: transform;
894
- }
895
-
896
- @keyframes falling {
897
- 0% {
898
- transform: translateY(0) rotate(0deg);
899
- opacity: 1;
900
- }
901
- 80% {
902
- opacity: 0.8;
903
- }
904
- 100% {
905
- transform: translateY(100vh) rotate(360deg);
906
- opacity: 0;
907
- }
908
- }
909
- .ele-lottie .ele-lotwrap {
910
- overflow: hidden
911
- }
912
-
913
- .ele-effect .effect-wrap {
914
- position: relative;
915
- overflow: hidden;
916
- width: 100%;
917
- height: 100%
918
- }
919
-
920
- .ele-effect .e-small {
921
- position: absolute;
922
- width: 24px;
923
- height: 24px;
924
- background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
925
- background-size: cover;
926
- background-repeat: no-repeat;
927
- -webkit-transform-origin: center;
928
- transform-origin: center;
929
- -webkit-animation: snow 5s linear infinite;
930
- animation: snow 5s linear infinite
931
- }/* Iconfont definition */
932
- .icon-danmuliebiao1:before {
933
- content: "\E68A";
934
- }
935
-
936
- .icon-cuowu2:before {
937
- content: "\E65E";
938
- }
939
-
940
- i {
941
- font-style: normal;
942
- }
943
-
944
- .v-modal {
945
- position: fixed;
946
- left: 0;
947
- top: 0;
948
- width: 100%;
949
- height: 100%;
950
- opacity: .5;
951
- background: #000;
952
- }
953
- /* 底部工具栏样式 */
954
- #toolbarNew {
955
- position: fixed;
956
- left: 0;
957
- bottom: 0;
958
- width: 100%;
959
- padding: 12px 0;
960
- background: url('https://h5cdn.unika.cc/static/img/uniComponents/inputBg.png') 0 0 repeat-x;
961
- z-index: 100;
962
- }
963
-
964
- .toolbar {
965
- display: flex;
966
- align-items: center;
967
- padding: 0 10px;
968
- }
969
-
970
- .bar-left {
971
- position: relative;
972
- flex: 1;
973
- }
974
-
975
- .bar-mess {
976
- width: 100%;
977
- height: 36px;
978
- line-height: 36px;
979
- font-size: 14px;
980
- color: #ccc;
981
- padding: 0 8px;
982
- border-radius: 18px;
983
- border: none;
984
- -webkit-appearance: none;
985
- background-color: rgba(0, 0, 0, 0.28);
986
- }
987
-
988
- .bar-mess::placeholder {
989
- color: rgba(255, 255, 255, 0.7);
990
- }
991
-
992
- .bar-left .iconfont {
993
- position: absolute;
994
- right: 10px;
995
- top: 50%;
996
- transform: translateY(-50%);
997
- color: #f2f2f2;
998
- font-size: 16px;
999
- cursor: pointer;
1000
- z-index: 2;
1001
- padding: 5px;
1002
- }
1003
-
1004
- /* 关闭弹幕按钮样式 */
1005
- .toolbar-close {
1006
- position: absolute;
1007
- left: 10px;
1008
- transform: translateY(-50%);
1009
- display: flex;
1010
- align-items: center;
1011
- cursor: pointer;
1012
- z-index: 2;
1013
- }
1014
-
1015
- .toolbar-close img {
1016
- display: block;
1017
- width: 36px;
1018
- height: 36px;
1019
- cursor: pointer;
1020
- }
1021
-
1022
- /* 弹幕容器样式 */
1023
- .bullet-container {
1024
- position: fixed;
1025
- left: 10px;
1026
- right: 10px;
1027
- height: 120px;
1028
- overflow: hidden;
1029
- z-index: 99;
1030
- pointer-events: none;
1031
- }
1032
-
1033
- .bullet-item {
1034
- position: absolute;
1035
- left: 0;
1036
- bottom: 0;
1037
- padding: 5px 10px;
1038
- border-radius: 15px;
1039
- font-size: 14px;
1040
- white-space: nowrap;
1041
- animation: bulletMove linear;
1042
- animation-fill-mode: forwards;
1043
- will-change: transform;
1044
- display: inline-block;
1045
- max-width: 90%;
1046
- }
1047
-
1048
- @keyframes bulletMove {
1049
- 0% {
1050
- transform: translateY(0);
1051
- opacity: 1;
1052
- }
1053
- 100% {
1054
- transform: translateY(calc(-1 * 150px));
1055
- opacity: 0;
1056
- }
1057
- }
1058
-
1059
- /* 弹幕输入弹窗样式 */
1060
- .popup-overlay {
1061
- position: fixed;
1062
- top: 0;
1063
- left: 0;
1064
- right: 0;
1065
- bottom: 0;
1066
- background: rgba(0, 0, 0, 0.5);
1067
- display: flex;
1068
- justify-content: center;
1069
- align-items: flex-end;
1070
- z-index: 200;
1071
- }
1072
-
1073
- #index .mint-popup {
1074
- background-color: transparent;
1075
- }
1076
-
1077
- .mint-popup {
1078
- position: fixed;
1079
- background: #fff;
1080
- top: 50%;
1081
- left: 50%;
1082
- transform: translate3d(-50%, -50%, 0);
1083
- -webkit-backface-visibility: hidden;
1084
- backface-visibility: hidden;
1085
- transition: .2s ease-out;
1086
- }
1087
-
1088
- .bar-messwin {
1089
- width: 309px;
1090
- height: 341px;
1091
- background: url('https://h5cdn.unika.cc/static/img/uniComponents/mess-bg.png') no-repeat 50%;
1092
- background-size: 100% 100%;
1093
- position: relative;
1094
- display: flex;
1095
- flex-direction: column;
1096
- align-items: center;
1097
- margin-bottom: 20px;
1098
- }
1099
-
1100
- .bar-messwin .mess-logo {
1101
- width: 171px;
1102
- height: 110px;
1103
- margin-top: -64px;
1104
- margin-left: 11px;
784
+ .bar-messwin .mess-logo {
785
+ width: 171px;
786
+ height: 110px;
787
+ margin-top: -64px;
788
+ margin-left: 11px;
1105
789
  }
1106
790
 
1107
791
  .bar-messwin .mess-title {
@@ -1724,114 +1408,564 @@
1724
1408
  margin-top: 20px;
1725
1409
  }
1726
1410
 
1727
- /* 留言成功弹窗样式 */
1728
- .mess-success-popup {
1729
- position: fixed;
1730
- top: 0;
1731
- left: 0;
1732
- right: 0;
1733
- bottom: 0;
1734
- background-color: rgba(0, 0, 0, 0.5);
1735
- z-index: 2003;
1736
- display: flex;
1737
- justify-content: center;
1738
- align-items: center;
1411
+ /* 留言成功弹窗样式 */
1412
+ .mess-success-popup {
1413
+ position: fixed;
1414
+ top: 0;
1415
+ left: 0;
1416
+ right: 0;
1417
+ bottom: 0;
1418
+ background-color: rgba(0, 0, 0, 0.5);
1419
+ z-index: 2003;
1420
+ display: flex;
1421
+ justify-content: center;
1422
+ align-items: center;
1423
+ }
1424
+
1425
+ .mess-success-popup .gift-popup {
1426
+ width: 300px;
1427
+ height: 200px;
1428
+ background: url('https://h5cdn.unika.cc/static/img/uniComponents/bg-color.png') no-repeat;
1429
+ border-radius: 10px;
1430
+ padding: 20px;
1431
+ text-align: center;
1432
+ position: relative;
1433
+ }
1434
+
1435
+ .mess-success-popup .gift-popup .icon-cuowu2 {
1436
+ position: absolute;
1437
+ top: 10px;
1438
+ right: 10px;
1439
+ cursor: pointer;
1440
+ }
1441
+
1442
+ .mess-success-popup .gift-popup .toast {
1443
+ display: flex;
1444
+ align-items: center;
1445
+ justify-content: center;
1446
+ margin: 10px 0;
1447
+ }
1448
+
1449
+ .mess-success-popup .gift-popup .toast img {
1450
+ width: 20px;
1451
+ height: 15px;
1452
+ margin: 0 5px;
1453
+ }
1454
+
1455
+ .mess-success-popup .gift-popup .title {
1456
+ margin: 15px 0;
1457
+ font-size: 16px;
1458
+ color: #333;
1459
+ }
1460
+
1461
+ .mess-success-popup .gift-popup .btn {
1462
+ background: linear-gradient(270deg, #ff4874, #ff9061);
1463
+ color: white;
1464
+ border: none;
1465
+ padding: 10px 20px;
1466
+ border-radius: 20px;
1467
+ margin-top: 15px;
1468
+ cursor: pointer;
1469
+ }
1470
+
1471
+ /* 新增图片加载动画样式 */
1472
+ .gift-image-container {
1473
+ position: relative;
1474
+ width: 300px;
1475
+ height: 300px;
1476
+ margin: 20px 0;
1477
+ overflow: hidden;
1478
+ }
1479
+
1480
+ .gift-image-container img {
1481
+ width: 100%;
1482
+ height: 100%;
1483
+ object-fit: contain;
1484
+ opacity: 0;
1485
+ transition: opacity 0.5s ease-in-out;
1486
+ }
1487
+
1488
+ .gift-image-container img.loaded {
1489
+ opacity: 1;
1490
+ }
1491
+
1492
+ .image-loading {
1493
+ position: absolute;
1494
+ top: 0;
1495
+ left: 0;
1496
+ width: 100%;
1497
+ height: 100%;
1498
+ display: flex;
1499
+ justify-content: center;
1500
+ align-items: center;
1501
+ background: rgba(255, 255, 255, 0.8);
1502
+ }
1503
+
1504
+ .loading-spinner {
1505
+ width: 40px;
1506
+ height: 40px;
1507
+ border: 4px solid #f3f3f3;
1508
+ border-top: 4px solid #ed5566;
1509
+ border-radius: 50%;
1510
+ animation: spin 1s linear infinite;
1511
+ }
1512
+
1513
+ @keyframes spin {
1514
+ 0% { transform: rotate(0deg); }
1515
+ 100% { transform: rotate(360deg); }
1516
+ }
1517
+
1518
+ .element-ditu .ani-wrap {
1519
+ width: 100%;
1520
+ height: 100%;
1521
+ overflow: hidden
1522
+ }
1523
+
1524
+ .element-ditu .map {
1525
+ width: 100%;
1526
+ height: 100%
1527
+ }
1528
+
1529
+ .element-ditu .map .el-button {
1530
+ width: 100%;
1531
+ height: 100%;
1532
+ display: -webkit-box;
1533
+ display: -ms-flexbox;
1534
+ display: flex;
1535
+ -webkit-box-align: center;
1536
+ -ms-flex-align: center;
1537
+ align-items: center;
1538
+ padding: 0;
1539
+ -webkit-box-pack: center;
1540
+ -ms-flex-pack: center;
1541
+ justify-content: center;
1542
+ background: inherit;
1543
+ color: inherit;
1544
+ border: none
1545
+ }
1546
+
1547
+ .element-ditu .center-map {
1548
+ width: 100%;
1549
+ height: 100%;
1550
+ background: #fff
1551
+ }
1552
+
1553
+ .element-ditu .mask-map {
1554
+ position: absolute;
1555
+ width: 100%;
1556
+ height: 100%;
1557
+ top: 0
1558
+ }
1559
+ .map-iframe {
1560
+ width: 100%;
1561
+ height: 100%;
1562
+ }.ele-shape {
1563
+ position: absolute;
1564
+ overflow: hidden;
1565
+ }
1566
+
1567
+ .ani-wrap {
1568
+ width: 100%;
1569
+ height: 100%;
1570
+ box-sizing: border-box;
1571
+ }
1572
+
1573
+ .e-shape {
1574
+ width: 100%;
1575
+ height: 100%;
1576
+ }
1577
+
1578
+ .svg-container :deep(svg) {
1579
+ width: 100%;
1580
+ height: 100%;
1581
+ display: block;
1582
+ }
1583
+
1584
+ .svg-container {
1585
+ width: 100%;
1586
+ height: 100%;
1587
+ display: block;
1588
+ }
1589
+
1590
+
1591
+ .svg-loading,
1592
+ .svg-error {
1593
+ display: flex;
1594
+ align-items: center;
1595
+ justify-content: center;
1596
+ width: 100%;
1597
+ height: 100%;
1598
+ background: rgba(0,0,0,0.05);
1599
+ }
1600
+
1601
+ .ele-shape .svg-container svg {
1602
+ width: 100%;
1603
+ height: 100%;
1604
+ overflow: visible;
1605
+ }/* .ele-form {
1606
+ position: absolute;
1607
+ user-select: none;
1608
+ } */
1609
+
1610
+ .f-select {
1611
+ cursor: pointer;
1612
+ }
1613
+
1614
+ .ani-wrap {
1615
+ position: relative;
1616
+ }
1617
+
1618
+ .f-select .ani-wrap .fs-tit {
1619
+ position: relative;
1620
+ display: flex;
1621
+ padding: 0 5px;
1622
+ height: 35px;
1623
+ line-height: 35px;
1624
+ align-items: center;
1625
+ }
1626
+
1627
+ .require {
1628
+ padding: 0 5px 0 0;
1629
+ color: red;
1630
+ vertical-align: middle;
1631
+ }
1632
+
1633
+ .fs-cont {
1634
+ padding-right: 15px;
1635
+ white-space: nowrap;
1636
+ overflow: hidden;
1637
+ text-overflow: ellipsis;
1638
+ flex-grow: 1;
1639
+ }
1640
+
1641
+ .icon-bofang1 {
1642
+ font-size: 12px;
1643
+ transition: transform 0.2s ease;
1739
1644
  }
1740
1645
 
1741
- .mess-success-popup .gift-popup {
1742
- width: 300px;
1743
- height: 200px;
1744
- background: url('https://h5cdn.unika.cc/static/img/uniComponents/bg-color.png') no-repeat;
1745
- border-radius: 10px;
1746
- padding: 20px;
1747
- text-align: center;
1748
- position: relative;
1646
+ .rotate-180 {
1647
+ transform: rotate(180deg) !important;
1749
1648
  }
1750
1649
 
1751
- .mess-success-popup .gift-popup .icon-cuowu2 {
1650
+ .f-real {
1752
1651
  position: absolute;
1753
- top: 10px;
1754
- right: 10px;
1652
+ left: 0;
1653
+ top: 0;
1654
+ width: 100%;
1655
+ height: 100%;
1656
+ z-index: 1;
1657
+ opacity: 0;
1755
1658
  cursor: pointer;
1756
1659
  }
1757
1660
 
1758
- .mess-success-popup .gift-popup .toast {
1759
- display: flex;
1760
- align-items: center;
1761
- justify-content: center;
1762
- margin: 10px 0;
1661
+ .dropdown-menu {
1662
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
1763
1663
  }
1764
1664
 
1765
- .mess-success-popup .gift-popup .toast img {
1766
- width: 20px;
1767
- height: 15px;
1768
- margin: 0 5px;
1665
+ .dropdown-item {
1666
+ padding: 8px 10px;
1667
+ cursor: pointer;
1668
+ transition: background-color 0.2s;
1769
1669
  }
1770
1670
 
1771
- .mess-success-popup .gift-popup .title {
1772
- margin: 15px 0;
1773
- font-size: 16px;
1774
- color: #333;
1671
+ .dropdown-item:hover {
1672
+ background-color: #f5f5f5;
1775
1673
  }
1776
1674
 
1777
- .mess-success-popup .gift-popup .btn {
1778
- background: linear-gradient(270deg, #ff4874, #ff9061);
1779
- color: white;
1780
- border: none;
1781
- padding: 10px 20px;
1782
- border-radius: 20px;
1783
- margin-top: 15px;
1784
- cursor: pointer;
1675
+ .dropdown-item.selected {
1676
+ background-color: #e6f7ff;
1677
+ color: #1890ff;
1785
1678
  }
1786
1679
 
1787
- /* 新增图片加载动画样式 */
1788
- .gift-image-container {
1789
- position: relative;
1790
- width: 300px;
1791
- height: 300px;
1792
- margin: 20px 0;
1793
- overflow: hidden;
1680
+ .f-select .fs-tit .icon-bofang1 {
1681
+ position: absolute;
1682
+ right: 10px;
1683
+ font-size: 12px;
1684
+ display: inline-block;
1685
+ transform: rotate(90deg);
1794
1686
  }
1795
1687
 
1796
- .gift-image-container img {
1797
- width: 100%;
1798
- height: 100%;
1799
- object-fit: contain;
1800
- opacity: 0;
1801
- transition: opacity 0.5s ease-in-out;
1688
+ .icon-bofang1:before {
1689
+ content: "\E6CF";
1802
1690
  }
1803
1691
 
1804
- .gift-image-container img.loaded {
1805
- opacity: 1;
1692
+ .has-error {
1693
+ border-color: #ff4d4f !important;
1806
1694
  }
1807
1695
 
1808
- .image-loading {
1809
- position: absolute;
1810
- top: 0;
1696
+ .error-tip {
1697
+ position: fixed;
1811
1698
  left: 0;
1699
+ top: 0;
1812
1700
  width: 100%;
1813
1701
  height: 100%;
1814
- display: flex;
1815
- justify-content: center;
1816
- align-items: center;
1817
- background: rgba(255, 255, 255, 0.8);
1702
+ z-index: 1000;
1703
+ }.ele-effect {
1704
+ will-change: transform;
1705
+ }
1706
+
1707
+ .ele-effect .effect-wrap {
1708
+ position: relative;
1709
+ width: 100%;
1710
+ height: 100%;
1711
+ }
1712
+
1713
+ .particle {
1714
+ position: absolute;
1715
+ background-repeat: no-repeat;
1716
+ background-size: contain;
1717
+ animation-name: falling;
1718
+ animation-timing-function: linear;
1719
+ animation-iteration-count: infinite;
1720
+ will-change: transform;
1721
+ }
1722
+
1723
+ @keyframes falling {
1724
+ 0% {
1725
+ transform: translateY(0) rotate(0deg);
1726
+ opacity: 1;
1818
1727
  }
1819
-
1820
- .loading-spinner {
1821
- width: 40px;
1822
- height: 40px;
1823
- border: 4px solid #f3f3f3;
1824
- border-top: 4px solid #ed5566;
1825
- border-radius: 50%;
1826
- animation: spin 1s linear infinite;
1728
+ 80% {
1729
+ opacity: 0.8;
1827
1730
  }
1828
-
1829
- @keyframes spin {
1830
- 0% { transform: rotate(0deg); }
1831
- 100% { transform: rotate(360deg); }
1731
+ 100% {
1732
+ transform: translateY(100vh) rotate(360deg);
1733
+ opacity: 0;
1734
+ }
1735
+ }
1736
+ .ele-lottie .ele-lotwrap {
1737
+ overflow: hidden
1738
+ }
1739
+
1740
+ .ele-effect .effect-wrap {
1741
+ position: relative;
1742
+ overflow: hidden;
1743
+ width: 100%;
1744
+ height: 100%
1745
+ }
1746
+
1747
+ .ele-effect .e-small {
1748
+ position: absolute;
1749
+ width: 24px;
1750
+ height: 24px;
1751
+ background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
1752
+ background-size: cover;
1753
+ background-repeat: no-repeat;
1754
+ -webkit-transform-origin: center;
1755
+ transform-origin: center;
1756
+ -webkit-animation: snow 5s linear infinite;
1757
+ animation: snow 5s linear infinite
1758
+ }.count-down .drag-point {
1759
+ cursor: default!important
1760
+ }
1761
+
1762
+ .count-down .ani-wrap {
1763
+ width: 100%;
1764
+ height: 100%;
1765
+ overflow: visible;
1766
+ }
1767
+
1768
+ .count-down .count-text,.count-down .finish-cont {
1769
+ display: -webkit-box;
1770
+ display: -ms-flexbox;
1771
+ display: flex;
1772
+ height: 100%;
1773
+ -webkit-box-align: center;
1774
+ -ms-flex-align: center;
1775
+ align-items: center;
1776
+ -webkit-box-pack: center;
1777
+ -ms-flex-pack: center;
1778
+ justify-content: center
1779
+ }
1780
+
1781
+ .count-down .finish-cont {
1782
+ width: 100%
1783
+ }
1784
+
1785
+ .count-down .count-flip {
1786
+ display: -webkit-box;
1787
+ display: -ms-flexbox;
1788
+ display: flex;
1789
+ height: 100%;
1790
+ -webkit-box-align: center;
1791
+ -ms-flex-align: center;
1792
+ align-items: center;
1793
+ -webkit-box-pack: center;
1794
+ -ms-flex-pack: center;
1795
+ justify-content: center
1796
+ }
1797
+
1798
+ .count-down .count-flip[data-direction="vertical"] {
1799
+ -webkit-box-orient: vertical;
1800
+ -webkit-box-direction: normal;
1801
+ -ms-flex-direction: column;
1802
+ flex-direction: column;
1803
+ height: auto;
1804
+ min-height: 100%;
1805
+ }
1806
+
1807
+ .count-down .count-flip[data-direction="vertical"] .c-com {
1808
+ margin: 6px 0;
1809
+ width: auto;
1810
+ }
1811
+
1812
+ .count-down .count-flip .numscroll {
1813
+ -webkit-animation: numscroll .4s ease-in-out;
1814
+ animation: numscroll .4s ease-in-out;
1815
+ -webkit-animation-fill-mode: both;
1816
+ animation-fill-mode: both
1817
+ }
1818
+
1819
+ .count-down .count-flip .numscroll .curr-num {
1820
+ -webkit-transition: all .3s ease-in-out;
1821
+ transition: all .3s ease-in-out;
1822
+ opacity: .6;
1823
+ -webkit-transform: scale(.5)!important;
1824
+ transform: scale(.5)!important
1825
+ }
1826
+
1827
+ @-webkit-keyframes numscroll {
1828
+ 0% {
1829
+ -webkit-transform: translateZ(0);
1830
+ transform: translateZ(0)
1831
+ }
1832
+
1833
+ to {
1834
+ -webkit-transform: translate3d(0,100%,0);
1835
+ transform: translate3d(0,100%,0)
1836
+ }
1837
+ }
1838
+
1839
+ @keyframes numscroll {
1840
+ 0% {
1841
+ -webkit-transform: translateZ(0);
1842
+ transform: translateZ(0)
1832
1843
  }
1833
-
1834
- body, html {
1844
+
1845
+ to {
1846
+ -webkit-transform: translate3d(0,100%,0);
1847
+ transform: translate3d(0,100%,0)
1848
+ }
1849
+ }
1850
+
1851
+ .count-down .count-flip .c-com {
1852
+ min-width: 50px;
1853
+ height: auto;
1854
+ margin: 6px;
1855
+ padding: 5px 0 6px;
1856
+ background-color: #111
1857
+ }
1858
+
1859
+ .count-down .count-flip .c-com .flex-wrap {
1860
+ display: -webkit-box;
1861
+ display: -ms-flexbox;
1862
+ display: flex;
1863
+ position: relative;
1864
+ width: 100%;
1865
+ height: 100%;
1866
+ -webkit-box-align: center;
1867
+ -ms-flex-align: center;
1868
+ align-items: center
1869
+ }
1870
+
1871
+ .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
1872
+ line-height: 27px
1873
+ }
1874
+
1875
+ .count-down .count-flip .c-com .flex-wrap .next-num {
1876
+ position: absolute;
1877
+ top: -100%
1878
+ }
1879
+
1880
+ .count-down .count-flip .c-com .flex-wrap .curr-num {
1881
+ -webkit-transform: scale(1);
1882
+ transform: scale(1)
1883
+ }
1884
+
1885
+ .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 {
1886
+ display: none!important
1887
+ }
1888
+
1889
+ .c-wrap {
1890
+ width: 100%;
1891
+ height: 100%;
1892
+ overflow: hidden;
1893
+ font-size: 0
1894
+ }
1895
+
1896
+ .c-wrap.c-day-wrap {
1897
+ text-align: center
1898
+ }
1899
+
1900
+ .c-wrap.c-day-wrap .c-num {
1901
+ width: auto
1902
+ }
1903
+
1904
+ .c-wrap .c-num {
1905
+ display: inline-block;
1906
+ width: 50%;
1907
+ overflow: hidden;
1908
+ font-size: 20px;
1909
+ color: #999
1910
+ }
1911
+
1912
+ .c-wrap .c-left .flex-wrap {
1913
+ display: -webkit-box;
1914
+ display: -ms-flexbox;
1915
+ display: flex;
1916
+ -webkit-box-pack: end;
1917
+ -ms-flex-pack: end;
1918
+ justify-content: flex-end
1919
+ }
1920
+
1921
+ .c-wrap .c-text {
1922
+ display: -webkit-box;
1923
+ display: -ms-flexbox;
1924
+ display: flex;
1925
+ width: 100%;
1926
+ font-size: 12px;
1927
+ -webkit-box-pack: center;
1928
+ -ms-flex-pack: center;
1929
+ justify-content: center;
1930
+ -webkit-box-align: center;
1931
+ -ms-flex-align: center;
1932
+ align-items: center;
1933
+ white-space: nowrap
1934
+ }
1935
+ .call {
1936
+ position: absolute;
1937
+ cursor: pointer;
1938
+ user-select: none;
1939
+ }
1940
+
1941
+ .call .ani-wrap {
1942
+ display: flex;
1943
+ justify-content: center;
1944
+ align-items: center;
1945
+ width: 100%;
1946
+ height: 100%;
1947
+ overflow: hidden;
1948
+ transition: opacity 0.2s;
1949
+ }
1950
+
1951
+ .call .ani-wrap:hover {
1952
+ opacity: 0.9;
1953
+ }
1954
+
1955
+ .call-content {
1956
+ display: flex;
1957
+ align-items: center;
1958
+ justify-content: center;
1959
+ }
1960
+
1961
+ .btn-text {
1962
+ margin-left: 10px;
1963
+ }
1964
+
1965
+
1966
+ .hb-tel:before {
1967
+ content: "\E642";
1968
+ }body, html {
1835
1969
  width: 100%;
1836
1970
  height: 100%;
1837
1971
  }
@@ -3434,13 +3568,59 @@ to {
3434
3568
  }
3435
3569
  }
3436
3570
 
3437
- .call {
3571
+ .form-submit {
3572
+ cursor: pointer;
3573
+ transition: all 0.2s;
3574
+ outline: none;
3575
+ border: none;
3576
+ }
3577
+
3578
+ .form-submit:hover {
3579
+ opacity: 0.9;
3580
+ transform: translateY(-1px);
3581
+ }
3582
+
3583
+ .form-submit:active {
3584
+ opacity: 0.8;
3585
+ transform: translateY(0);
3586
+ }
3587
+
3588
+ .form-submit:disabled {
3589
+ opacity: 0.6;
3590
+ cursor: not-allowed;
3591
+ transform: none !important;
3592
+ }
3593
+
3594
+ .f-submit {
3595
+ position: relative;
3596
+ display: block
3597
+ }
3598
+
3599
+ .f-submit .ani-wrap {
3600
+ width: 100%;
3601
+ height: 100%;
3602
+ padding: 10px;
3603
+ overflow: hidden;
3604
+ position: relative
3605
+ }
3606
+
3607
+ .f-submit .f-ovh {
3608
+ position: absolute;
3609
+ left: 50%;
3610
+ top: 50%;
3611
+ transform: translate(-50%,-50%)
3612
+ }
3613
+
3614
+ .form-submit:disabled {
3615
+ opacity: 0.7;
3616
+ cursor: not-allowed;
3617
+ }.button {
3438
3618
  position: absolute;
3439
3619
  cursor: pointer;
3440
3620
  user-select: none;
3441
3621
  }
3442
-
3443
- .call .ani-wrap {
3622
+
3623
+ .button .ani-wrap {
3444
3624
  display: flex;
3445
3625
  justify-content: center;
3446
3626
  align-items: center;
@@ -3449,53 +3629,154 @@ to {
3449
3629
  overflow: hidden;
3450
3630
  transition: opacity 0.2s;
3451
3631
  }
3452
-
3453
- .call .ani-wrap:hover {
3632
+
3633
+ .button .ani-wrap:hover {
3454
3634
  opacity: 0.9;
3455
3635
  }
3456
3636
 
3457
- .call-content {
3637
+ .button-content {
3638
+ display: flex;
3639
+ align-items: center;
3640
+ justify-content: center;
3641
+ }
3642
+
3643
+ .btn-text {
3644
+ margin-left: 10px;
3645
+ }.form-input.form-input--editing,
3646
+ .form-input.form-input--editing input {
3647
+ pointer-events: none;
3648
+ user-select: none;
3649
+ -webkit-user-select: none;
3650
+ }
3651
+
3652
+ .form-input {
3653
+ position: absolute;
3654
+ }
3655
+
3656
+ .input-wrapper {
3657
+ display: flex;
3658
+ align-items: center;
3659
+ width: 100%;
3660
+ height: 100%;
3661
+ padding: 0 10px;
3662
+ box-sizing: border-box;
3663
+ position: relative;
3664
+ transition: border-color 0.3s;
3665
+ }
3666
+
3667
+ .required-marker {
3668
+ font-size: 12px;
3669
+ padding: 0 5px 0 0;
3670
+ color: red;
3671
+ vertical-align: middle;
3672
+ }
3673
+
3674
+ input {
3675
+ flex: 1;
3676
+ border: none;
3677
+ outline: none;
3678
+ background: transparent;
3679
+ height: 100%;
3680
+ padding: 0;
3681
+ margin: 0;
3682
+ }
3683
+ /*
3684
+ input::placeholder {
3685
+ color: #ccc;
3686
+ opacity: 1;
3687
+ } */
3688
+
3689
+ .dynamic-placeholder-input::placeholder {
3690
+ color: var(--placeholder-color, #999);
3691
+ opacity: 1;
3692
+ }
3693
+ .dynamic-placeholder-input::-webkit-input-placeholder {
3694
+ color: var(--placeholder-color, #999);
3695
+ }
3696
+ .dynamic-placeholder-input::-moz-placeholder {
3697
+ color: var(--placeholder-color, #999);
3698
+ opacity: 1;
3699
+ }
3700
+ .dynamic-placeholder-input:-ms-input-placeholder {
3701
+ color: var(--placeholder-color, #999);
3702
+ }#page-list .tip-cover {
3703
+ position: fixed;
3704
+ left: 0;
3705
+ top: 0;
3706
+ width: 100%;
3707
+ height: 100%;
3708
+ display: -ms-flexbox;
3458
3709
  display: flex;
3710
+ -ms-flex-align: center;
3459
3711
  align-items: center;
3712
+ -ms-flex-pack: center;
3460
3713
  justify-content: center;
3714
+ z-index: 999;
3715
+ background-color: rgba(0,0,0,.7)
3461
3716
  }
3462
3717
 
3463
- .btn-text {
3464
- margin-left: 10px;
3718
+ #page-list .tip-cover .tip {
3719
+ width: 80%;
3720
+ max-width: 250px;
3721
+ padding: 10px;
3722
+ border-radius: 5px;
3723
+ background-color: #fff
3465
3724
  }
3466
3725
 
3726
+ #page-list .tip-cover .tip-btn {
3727
+ display: block;
3728
+ margin: 25px auto;
3729
+ width: 120px;
3730
+ height: 30px;
3731
+ color: #fff;
3732
+ border-radius: 4px;
3733
+ text-align: center;
3734
+ font-size: 14px;
3735
+ line-height: 30px;
3736
+ background: #ed5566
3737
+ }
3467
3738
 
3468
- .hb-tel:before {
3469
- content: "\E642";
3470
- }.button {
3471
- position: absolute;
3472
- cursor: pointer;
3473
- user-select: none;
3739
+ #page-list .tip-cover .tip-content {
3740
+ font-size: 14px;
3741
+ padding-top: 30px;
3474
3742
  }
3475
-
3476
- .button .ani-wrap {
3477
- display: flex;
3478
- justify-content: center;
3479
- align-items: center;
3743
+
3744
+ .tip-cover {
3745
+ position: fixed;
3746
+ left: 0;
3747
+ top: 0;
3480
3748
  width: 100%;
3481
3749
  height: 100%;
3482
- overflow: hidden;
3483
- transition: opacity 0.2s;
3484
- }
3485
-
3486
- .button .ani-wrap:hover {
3487
- opacity: 0.9;
3488
- }
3489
-
3490
- .button-content {
3750
+ display: -ms-flexbox;
3491
3751
  display: flex;
3752
+ -ms-flex-align: center;
3492
3753
  align-items: center;
3754
+ -ms-flex-pack: center;
3493
3755
  justify-content: center;
3756
+ z-index: 999;
3757
+ background-color: rgba(0,0,0,.7)
3494
3758
  }
3495
3759
 
3496
- .btn-text {
3497
- margin-left: 10px;
3498
- }@charset"UTF-8";.animated {
3760
+ .tip-cover .tip {
3761
+ width: 80%;
3762
+ max-width: 250px;
3763
+ padding: 5px;
3764
+ border-radius: 3px;
3765
+ background-color: #fff
3766
+ }
3767
+
3768
+ .tip-cover .tip-btn {
3769
+ display: block;
3770
+ margin: 13px auto;
3771
+ width: 64px;
3772
+ height: 20px;
3773
+ color: #fff;
3774
+ border-radius: 4px;
3775
+ text-align: center;
3776
+ font-size: 14px;
3777
+ line-height: 20px;
3778
+ background: #ed5566;
3779
+ } @charset"UTF-8";.animated {
3499
3780
  animation-duration: 1s;
3500
3781
  animation-fill-mode: both
3501
3782
  }
@@ -8381,149 +8662,12 @@ to {
8381
8662
  transform: translateX(0)
8382
8663
  }
8383
8664
  }
8384
- .form-input.form-input--editing,
8385
- .form-input.form-input--editing input {
8386
- pointer-events: none;
8387
- user-select: none;
8388
- -webkit-user-select: none;
8389
- }
8390
-
8391
- .form-input {
8392
- position: absolute;
8393
- }
8394
-
8395
- .input-wrapper {
8396
- display: flex;
8397
- align-items: center;
8398
- width: 100%;
8399
- height: 100%;
8400
- padding: 0 10px;
8401
- box-sizing: border-box;
8402
- position: relative;
8403
- transition: border-color 0.3s;
8404
- }
8405
-
8406
- .required-marker {
8407
- font-size: 12px;
8408
- padding: 0 5px 0 0;
8409
- color: red;
8410
- vertical-align: middle;
8411
- }
8412
-
8413
- input {
8414
- flex: 1;
8415
- border: none;
8416
- outline: none;
8417
- background: transparent;
8418
- height: 100%;
8419
- padding: 0;
8420
- margin: 0;
8421
- }
8422
- /*
8423
- input::placeholder {
8424
- color: #ccc;
8425
- opacity: 1;
8426
- } */
8427
-
8428
- .dynamic-placeholder-input::placeholder {
8429
- color: var(--placeholder-color, #999);
8430
- opacity: 1;
8431
- }
8432
- .dynamic-placeholder-input::-webkit-input-placeholder {
8433
- color: var(--placeholder-color, #999);
8434
- }
8435
- .dynamic-placeholder-input::-moz-placeholder {
8436
- color: var(--placeholder-color, #999);
8437
- opacity: 1;
8438
- }
8439
- .dynamic-placeholder-input:-ms-input-placeholder {
8440
- color: var(--placeholder-color, #999);
8441
- }#page-list .tip-cover {
8442
- position: fixed;
8443
- left: 0;
8444
- top: 0;
8445
- width: 100%;
8446
- height: 100%;
8447
- display: -ms-flexbox;
8448
- display: flex;
8449
- -ms-flex-align: center;
8450
- align-items: center;
8451
- -ms-flex-pack: center;
8452
- justify-content: center;
8453
- z-index: 999;
8454
- background-color: rgba(0,0,0,.7)
8455
- }
8456
-
8457
- #page-list .tip-cover .tip {
8458
- width: 80%;
8459
- max-width: 250px;
8460
- padding: 10px;
8461
- border-radius: 5px;
8462
- background-color: #fff
8463
- }
8464
-
8465
- #page-list .tip-cover .tip-btn {
8466
- display: block;
8467
- margin: 25px auto;
8468
- width: 120px;
8469
- height: 30px;
8470
- color: #fff;
8471
- border-radius: 4px;
8472
- text-align: center;
8473
- font-size: 14px;
8474
- line-height: 30px;
8475
- background: #ed5566
8476
- }
8477
-
8478
- #page-list .tip-cover .tip-content {
8479
- font-size: 14px;
8480
- padding-top: 30px;
8481
- }
8482
-
8483
- .tip-cover {
8484
- position: fixed;
8485
- left: 0;
8486
- top: 0;
8487
- width: 100%;
8488
- height: 100%;
8489
- display: -ms-flexbox;
8490
- display: flex;
8491
- -ms-flex-align: center;
8492
- align-items: center;
8493
- -ms-flex-pack: center;
8494
- justify-content: center;
8495
- z-index: 999;
8496
- background-color: rgba(0,0,0,.7)
8497
- }
8498
-
8499
- .tip-cover .tip {
8500
- width: 80%;
8501
- max-width: 250px;
8502
- padding: 5px;
8503
- border-radius: 3px;
8504
- background-color: #fff
8505
- }
8506
-
8507
- .tip-cover .tip-btn {
8508
- display: block;
8509
- margin: 13px auto;
8510
- width: 64px;
8511
- height: 20px;
8512
- color: #fff;
8513
- border-radius: 4px;
8514
- text-align: center;
8515
- font-size: 14px;
8516
- line-height: 20px;
8517
- background: #ed5566;
8518
- }
8519
- .ele-lottie .ele-lotwrap {
8520
- overflow: hidden;
8521
- }/* .ele-form {
8665
+ /* .ele-form {
8522
8666
  position: absolute;
8523
8667
  user-select: none;
8524
- } */
8525
-
8526
- .f-select {
8668
+ }
8669
+ */
8670
+ .f-single {
8527
8671
  cursor: pointer;
8528
8672
  }
8529
8673
 
@@ -8531,13 +8675,15 @@ to {
8531
8675
  position: relative;
8532
8676
  }
8533
8677
 
8534
- .f-select .ani-wrap .fs-tit {
8535
- position: relative;
8678
+ .f-single .ani-wrap .fs-tit {
8536
8679
  display: flex;
8537
8680
  padding: 0 5px;
8538
- height: 35px;
8539
- line-height: 35px;
8681
+ height: 40px;
8540
8682
  align-items: center;
8683
+ white-space: nowrap;
8684
+ overflow: hidden;
8685
+ text-overflow: ellipsis;
8686
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
8541
8687
  }
8542
8688
 
8543
8689
  .require {
@@ -8546,69 +8692,63 @@ to {
8546
8692
  vertical-align: middle;
8547
8693
  }
8548
8694
 
8549
- .fs-cont {
8550
- padding-right: 15px;
8551
- white-space: nowrap;
8552
- overflow: hidden;
8553
- text-overflow: ellipsis;
8554
- flex-grow: 1;
8555
- }
8556
-
8557
- .icon-bofang1 {
8558
- font-size: 12px;
8559
- transition: transform 0.2s ease;
8560
- }
8561
-
8562
- .rotate-180 {
8563
- transform: rotate(180deg) !important;
8564
- }
8565
-
8566
- .f-real {
8567
- position: absolute;
8568
- left: 0;
8569
- top: 0;
8570
- width: 100%;
8571
- height: 100%;
8572
- z-index: 1;
8573
- opacity: 0;
8574
- cursor: pointer;
8575
- }
8576
-
8577
- .dropdown-menu {
8578
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
8695
+ .f-single ul {
8696
+ padding: 15px;
8697
+ margin: 0;
8698
+ list-style: none;
8579
8699
  }
8580
8700
 
8581
- .dropdown-item {
8582
- padding: 8px 10px;
8583
- cursor: pointer;
8584
- transition: background-color 0.2s;
8701
+ .f-single ul li {
8702
+ display: flex;
8703
+ align-items: center;
8704
+ margin-top: 12px;
8705
+ font-size: 0;
8585
8706
  }
8586
8707
 
8587
- .dropdown-item:hover {
8588
- background-color: #f5f5f5;
8708
+ .f-single ul li:first-child {
8709
+ margin-top: 0;
8589
8710
  }
8590
8711
 
8591
- .dropdown-item.selected {
8592
- background-color: #e6f7ff;
8593
- color: #1890ff;
8712
+ .fs-circle {
8713
+ display: inline-block;
8714
+ width: 16px;
8715
+ height: 16px;
8716
+ border-radius: 50%;
8717
+ position: relative;
8718
+ transition: all 0.2s;
8594
8719
  }
8595
8720
 
8596
- .f-select .fs-tit .icon-bofang1 {
8597
- position: absolute;
8598
- right: 10px;
8599
- font-size: 12px;
8600
- display: inline-block;
8601
- transform: rotate(90deg);
8721
+ .fs-circle.selected {
8722
+ background-color: #2687f1;
8723
+ border-color: #2687f1 !important;
8602
8724
  }
8603
8725
 
8604
- .icon-bofang1:before {
8605
- content: "\E6CF";
8726
+ .fs-circle.selected::after {
8727
+ content: "";
8728
+ position: absolute;
8729
+ top: 3px;
8730
+ left: 3px;
8731
+ width: 8px;
8732
+ height: 8px;
8733
+ border-radius: 50%;
8734
+ background-color: white;
8606
8735
  }
8607
8736
 
8608
- .has-error {
8609
- border-color: #ff4d4f !important;
8737
+ .fs-txt {
8738
+ display: inline-block;
8739
+ width: calc(100% - 16px);
8740
+ padding-left: 8px;
8741
+ vertical-align: top;
8742
+ word-break: break-all;
8743
+ font-size: 14px;
8744
+ line-height: 1.2;
8745
+ }
8746
+
8747
+ .has-error .fs-tit {
8748
+ border-bottom-color: #ff4d4f;
8610
8749
  }
8611
8750
 
8751
+ /* 错误提示样式 */
8612
8752
  .error-tip {
8613
8753
  position: fixed;
8614
8754
  left: 0;
@@ -8616,53 +8756,7 @@ to {
8616
8756
  width: 100%;
8617
8757
  height: 100%;
8618
8758
  z-index: 1000;
8619
- }.form-submit {
8620
- cursor: pointer;
8621
- transition: all 0.2s;
8622
- outline: none;
8623
- border: none;
8624
- }
8625
-
8626
- .form-submit:hover {
8627
- opacity: 0.9;
8628
- transform: translateY(-1px);
8629
- }
8630
-
8631
- .form-submit:active {
8632
- opacity: 0.8;
8633
- transform: translateY(0);
8634
- }
8635
-
8636
- .form-submit:disabled {
8637
- opacity: 0.6;
8638
- cursor: not-allowed;
8639
- transform: none !important;
8640
- }
8641
-
8642
- .f-submit {
8643
- position: relative;
8644
- display: block
8645
- }
8646
-
8647
- .f-submit .ani-wrap {
8648
- width: 100%;
8649
- height: 100%;
8650
- padding: 10px;
8651
- overflow: hidden;
8652
- position: relative
8653
- }
8654
-
8655
- .f-submit .f-ovh {
8656
- position: absolute;
8657
- left: 50%;
8658
- top: 50%;
8659
- transform: translate(-50%,-50%)
8660
- }
8661
-
8662
- .form-submit:disabled {
8663
- opacity: 0.7;
8664
- cursor: not-allowed;
8665
- }/* .ele-form {
8759
+ }/* .ele-form {
8666
8760
  position: absolute;
8667
8761
  user-select: none;
8668
8762
  } */
@@ -8748,6 +8842,20 @@ cursor: not-allowed;
8748
8842
  .has-error .fs-tit {
8749
8843
  border-bottom-color: #ff4d4f;
8750
8844
  }
8845
+ .global.video {
8846
+ width: 35px;
8847
+ height: 55px;
8848
+ border-radius: 50%;
8849
+ text-align: center;
8850
+ margin-bottom: 5px;
8851
+ border: 2px solid #fff;
8852
+ cursor: pointer;
8853
+ }
8854
+ .icon-shipin2:before { content: "\E611"; }
8855
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
8856
+ .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
8857
+ }
8858
+
8751
8859
  .global.receipt {
8752
8860
  width: 35px;
8753
8861
  height: 55px;
@@ -8759,101 +8867,19 @@ cursor: not-allowed;
8759
8867
  }
8760
8868
  .icon-liuyan:before { content: "\E636"; }
8761
8869
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
8762
- .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }/* .ele-form {
8763
- position: absolute;
8764
- user-select: none;
8765
- }
8766
- */
8767
- .f-single {
8768
- cursor: pointer;
8769
- }
8770
-
8771
- .ani-wrap {
8772
- position: relative;
8773
- }
8774
-
8775
- .f-single .ani-wrap .fs-tit {
8776
- display: flex;
8777
- padding: 0 5px;
8778
- height: 40px;
8779
- align-items: center;
8780
- white-space: nowrap;
8781
- overflow: hidden;
8782
- text-overflow: ellipsis;
8783
- border-bottom: 1px solid rgba(153, 153, 153, 1);
8784
- }
8785
-
8786
- .require {
8787
- padding: 0 5px 0 0;
8788
- color: red;
8789
- vertical-align: middle;
8790
- }
8791
-
8792
- .f-single ul {
8793
- padding: 15px;
8794
- margin: 0;
8795
- list-style: none;
8796
- }
8797
-
8798
- .f-single ul li {
8799
- display: flex;
8800
- align-items: center;
8801
- margin-top: 12px;
8802
- font-size: 0;
8803
- }
8804
-
8805
- .f-single ul li:first-child {
8806
- margin-top: 0;
8807
- }
8808
-
8809
- .fs-circle {
8810
- display: inline-block;
8811
- width: 16px;
8812
- height: 16px;
8813
- border-radius: 50%;
8814
- position: relative;
8815
- transition: all 0.2s;
8816
- }
8817
-
8818
- .fs-circle.selected {
8819
- background-color: #2687f1;
8820
- border-color: #2687f1 !important;
8821
- }
8822
-
8823
- .fs-circle.selected::after {
8824
- content: "";
8825
- position: absolute;
8826
- top: 3px;
8827
- left: 3px;
8828
- width: 8px;
8829
- height: 8px;
8830
- border-radius: 50%;
8831
- background-color: white;
8832
- }
8833
-
8834
- .fs-txt {
8835
- display: inline-block;
8836
- width: calc(100% - 16px);
8837
- padding-left: 8px;
8838
- vertical-align: top;
8839
- word-break: break-all;
8840
- font-size: 14px;
8841
- line-height: 1.2;
8842
- }
8843
-
8844
- .has-error .fs-tit {
8845
- border-bottom-color: #ff4d4f;
8846
- }
8847
-
8848
- /* 错误提示样式 */
8849
- .error-tip {
8850
- position: fixed;
8851
- left: 0;
8852
- top: 0;
8853
- width: 100%;
8854
- height: 100%;
8855
- z-index: 1000;
8856
- }
8870
+ .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }
8871
+ .global.tel {
8872
+ width: 35px;
8873
+ height: 55px;
8874
+ border-radius: 50%;
8875
+ text-align: center;
8876
+ margin-bottom: 15px;
8877
+ border: 2px solid #fff;
8878
+ cursor: pointer;
8879
+ }
8880
+ .icon-dianhua:before { content: "\E60E"; }
8881
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
8882
+ .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
8857
8883
  .icon-guanbi:before {
8858
8884
  content: "\E676";
8859
8885
  }
@@ -9247,33 +9273,7 @@ cursor: not-allowed;
9247
9273
  content: "\E65E";
9248
9274
  color: #F44336; /* 失败的红色 */
9249
9275
  }
9250
-
9251
- .global.video {
9252
- width: 35px;
9253
- height: 55px;
9254
- border-radius: 50%;
9255
- text-align: center;
9256
- margin-bottom: 5px;
9257
- border: 2px solid #fff;
9258
- cursor: pointer;
9259
- }
9260
- .icon-shipin2:before { content: "\E611"; }
9261
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
9262
- .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
9263
- }
9264
-
9265
- .global.tel {
9266
- width: 35px;
9267
- height: 55px;
9268
- border-radius: 50%;
9269
- text-align: center;
9270
- margin-bottom: 15px;
9271
- border: 2px solid #fff;
9272
- cursor: pointer;
9273
- }
9274
- .icon-dianhua:before { content: "\E60E"; }
9275
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
9276
- .global.tel > span { font-size: 10px; line-height: 20px; display: block;}/* ===== 送呈(启呈)运行时样式 ===== */
9276
+ /* ===== 送呈(启呈)运行时样式 ===== */
9277
9277
  #invite {
9278
9278
  position: absolute;
9279
9279
  left: 0;