unika-components 1.1.87 → 1.1.89

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.
@@ -57,7 +57,116 @@
57
57
  opacity: 1;
58
58
  transform: scale(1);
59
59
  }
60
- }#audio {
60
+ }
61
+ .element-video {
62
+ position: absolute;
63
+ overflow: hidden;
64
+ background-color: transparent;
65
+ }
66
+
67
+ .element-video .ani-wrap, .element-video img {
68
+ display: block;
69
+ width: 100%;
70
+ height: 100%;
71
+ }
72
+
73
+ .video-container {
74
+ width: 100%;
75
+ height: 100%;
76
+ }
77
+
78
+ .video-container iframe {
79
+ width: 100%;
80
+ height: 100%;
81
+ border: none;
82
+ }
83
+
84
+ .video-cover {
85
+ position: relative;
86
+ width: 100%;
87
+ height: 100%;
88
+ background-size: cover;
89
+ background-position: center;
90
+ cursor: pointer;
91
+ }
92
+
93
+ .video-cover .play-btn {
94
+ position: absolute;
95
+ left: 50%;
96
+ top: 50%;
97
+ transform: translate(-50%, -50%);
98
+ width: 50px;
99
+ height: 50px;
100
+ opacity: 0.8;
101
+ transition: opacity 0.2s;
102
+ }
103
+
104
+ .video-cover:hover .play-btn {
105
+ opacity: 1;
106
+ }.ele-shape {
107
+ position: absolute;
108
+ overflow: hidden;
109
+ }
110
+
111
+ .ani-wrap {
112
+ width: 100%;
113
+ height: 100%;
114
+ box-sizing: border-box;
115
+ }
116
+
117
+ .e-shape {
118
+ width: 100%;
119
+ height: 100%;
120
+ }
121
+
122
+ .svg-container :deep(svg) {
123
+ width: 100%;
124
+ height: 100%;
125
+ display: block;
126
+ }
127
+
128
+ .svg-loading,
129
+ .svg-error {
130
+ display: flex;
131
+ align-items: center;
132
+ justify-content: center;
133
+ width: 100%;
134
+ height: 100%;
135
+ background: rgba(0,0,0,0.05);
136
+ }.call {
137
+ position: absolute;
138
+ cursor: pointer;
139
+ user-select: none;
140
+ }
141
+
142
+ .call .ani-wrap {
143
+ display: flex;
144
+ justify-content: center;
145
+ align-items: center;
146
+ width: 100%;
147
+ height: 100%;
148
+ overflow: hidden;
149
+ transition: opacity 0.2s;
150
+ }
151
+
152
+ .call .ani-wrap:hover {
153
+ opacity: 0.9;
154
+ }
155
+
156
+ .call-content {
157
+ display: flex;
158
+ align-items: center;
159
+ justify-content: center;
160
+ }
161
+
162
+ .btn-text {
163
+ margin-left: 10px;
164
+ }
165
+
166
+
167
+ .hb-tel:before {
168
+ content: "\E642";
169
+ }#audio {
61
170
  position: absolute;
62
171
  right: 10px;
63
172
  top: 10px;
@@ -127,104 +236,7 @@
127
236
  width: 100%;
128
237
  height: 2px;
129
238
  background: #fff;
130
- }
131
- .ele-text {
132
- position: relative;
133
- }
134
-
135
- .ele-text .ani-wrap {
136
- width: 100%;
137
- height: 100%;
138
- }
139
-
140
- .text-common {
141
- padding: 5px;
142
- text-orientation: upright;
143
- white-space: pre-wrap;
144
- }
145
-
146
- /* 文本动画类 */
147
- .text-fadeIn {
148
- animation: fadeIn 1s ease-in-out;
149
- }
150
-
151
- .text-slideIn {
152
- animation: slideIn 1s ease-in-out;
153
- }
154
-
155
- .text-bounceIn {
156
- animation: bounceIn 1s ease-in-out;
157
- }
158
-
159
- /* 基础动画关键帧 */
160
- @keyframes fadeIn {
161
- from {
162
- opacity: 0;
163
- }
164
- to {
165
- opacity: 1;
166
- }
167
- }
168
-
169
- @keyframes slideIn {
170
- from {
171
- transform: translateY(20px);
172
- opacity: 0;
173
- }
174
- to {
175
- transform: translateY(0);
176
- opacity: 1;
177
- }
178
- }
179
-
180
- @keyframes bounceIn {
181
- 0% {
182
- transform: scale(0.3);
183
- opacity: 0;
184
- }
185
- 50% {
186
- transform: scale(1.05);
187
- opacity: 0.8;
188
- }
189
- 70% {
190
- transform: scale(0.9);
191
- opacity: 0.9;
192
- }
193
- 100% {
194
- transform: scale(1);
195
- opacity: 1;
196
- }
197
- }.ele-shape {
198
- position: absolute;
199
- overflow: hidden;
200
- }
201
-
202
- .ani-wrap {
203
- width: 100%;
204
- height: 100%;
205
- box-sizing: border-box;
206
- }
207
-
208
- .e-shape {
209
- width: 100%;
210
- height: 100%;
211
- }
212
-
213
- .svg-container :deep(svg) {
214
- width: 100%;
215
- height: 100%;
216
- display: block;
217
- }
218
-
219
- .svg-loading,
220
- .svg-error {
221
- display: flex;
222
- align-items: center;
223
- justify-content: center;
224
- width: 100%;
225
- height: 100%;
226
- background: rgba(0,0,0,0.05);
227
- }.count-down .drag-point {
239
+ }.count-down .drag-point {
228
240
  cursor: default!important
229
241
  }
230
242
 
@@ -386,1609 +398,1814 @@
386
398
  align-items: center;
387
399
  white-space: nowrap
388
400
  }
389
- .button {
390
- position: absolute;
391
- cursor: pointer;
392
- user-select: none;
393
- }
401
+ /* Iconfont definition */
402
+ .icon-danmuliebiao1:before {
403
+ content: "\E68A";
404
+ }
394
405
 
395
- .button .ani-wrap {
396
- display: flex;
397
- justify-content: center;
398
- align-items: center;
399
- width: 100%;
400
- height: 100%;
401
- overflow: hidden;
402
- transition: opacity 0.2s;
403
- }
406
+ .icon-cuowu2:before {
407
+ content: "\E65E";
408
+ }
404
409
 
405
- .button .ani-wrap:hover {
406
- opacity: 0.9;
407
- }
408
-
409
- .button-content {
410
- display: flex;
411
- align-items: center;
412
- justify-content: center;
413
- }
414
-
415
- .btn-text {
416
- margin-left: 10px;
417
- }
418
- @keyframes jumpheart {
419
- to {
420
- -webkit-transform: scale(1.2);
421
- transform: scale(1.2)
410
+ i {
411
+ font-style: normal;
422
412
  }
423
- }
424
- .ele-calendar {
425
- position: relative;
426
- width: 325px !important;
427
- min-height: 325px !important;
428
- height: auto !important;
429
- }
430
-
431
- .ele-calendar .drag-point {
432
- cursor: default !important;
433
- }
434
-
435
- .ele-calendar .ani-wrap {
436
- position: relative;
437
- width: 100%;
438
- min-height: 325px !important;
439
- height: auto !important;
440
- padding: 22px 0;
441
- }
442
-
443
- .ele-calendar .ani-wrap .can-wrap .can-top {
444
- display: flex;
445
- justify-content: space-between;
446
- align-items: flex-end;
447
- line-height: 1;
448
- padding: 0 47px 20px;
449
- }
450
-
451
- .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
452
- font-size: 25px;
453
- padding-bottom: 4px;
454
- }
455
-
456
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
457
- font-size: 25px;
458
- }
459
-
460
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
461
- position: relative;
462
- top: 2px;
463
- font-size: 57px;
464
- }
465
-
466
- .ele-calendar .ani-wrap .can-wrap .can-main {
467
- padding: 0 23px;
468
- }
469
-
470
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
471
- display: flex;
472
- justify-content: flex-start;
473
- height: 25px;
474
- line-height: 25px;
475
- padding: 0 10px;
476
- border-radius: 13px;
477
- }
478
-
479
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week span {
480
- width: 14.2%;
481
- text-align: center;
482
- color: #fff;
483
- font-size: 12px;
484
- }
485
-
486
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul {
487
- font-size: 0;
488
- padding: 5px 10px 0;
489
- text-align: left;
490
- }
491
-
492
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li {
493
- position: relative;
494
- display: inline-block;
495
- height: 25px;
496
- text-align: center;
497
- margin-top: 8px;
498
- }
499
-
500
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active .iconfont {
501
- display: block;
502
- }
503
-
504
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active span {
505
- color: #fff !important;
506
- }
507
-
508
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
509
- animation: jumpheart 0.8s ease infinite alternate;
510
- }
511
-
512
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
513
- display: none;
514
- font-size: 26px;
515
- }
516
-
517
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li span {
518
- position: absolute;
519
- left: 50%;
520
- top: 50%;
521
- z-index: 1;
522
- color: #666;
523
- font-size: 13px;
524
- transform: translate(-50%, -52%);
525
- }
526
-
527
- .ele-calendar .bottom-center,
528
- .ele-calendar .left-center,
529
- .ele-calendar .right-center,
530
- .ele-calendar .top-center {
531
- display: none !important;
532
- }
533
-
534
- .ele-calendar .ani-wrap .can-wrap2 {
535
- padding: 21px 23px 0
536
- }
537
-
538
- .ele-calendar .ani-wrap .can-wrap2 .can-top {
539
- display: -webkit-box;
540
- display: -ms-flexbox;
541
- display: flex;
542
- -webkit-box-pack: justify;
543
- -ms-flex-pack: justify;
544
- justify-content: space-between;
545
- -webkit-box-align: end;
546
- -ms-flex-align: end;
547
- align-items: flex-end;
548
- line-height: 1;
549
- padding: 0 16px 22px;
550
- font-size: 36px
551
- }
552
-
553
- .ele-calendar .ani-wrap .can-wrap2 .can-top span {
554
- font-size: 16px
555
- }
556
-
557
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week {
558
- display: -webkit-box;
559
- display: -ms-flexbox;
560
- display: flex;
561
- -webkit-box-pack: start;
562
- -ms-flex-pack: start;
563
- justify-content: flex-start;
564
- height: 25px;
565
- line-height: 25px;
566
- padding: 0 10px;
567
- border-radius: 13px
568
- }
569
-
570
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week span {
571
- width: 14.2%;
572
- text-align: center;
573
- color: #fff;
574
- font-size: 12px;
575
- font-weight: 600
576
- }
577
-
578
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date {
579
- position: relative
580
- }
581
-
582
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date .can-year {
583
- position: absolute;
584
- white-space: nowrap;
585
- left: 50%;
586
- top: 15%;
587
- -webkit-transform: translateX(-50%);
588
- transform: translateX(-50%);
589
- font-size: 76px;
590
- opacity: .1;
591
- font-weight: 600
592
- }
593
-
594
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul {
595
- font-size: 0;
596
- padding: 5px 10px 0;
597
- text-align: left
598
- }
599
-
600
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li {
601
- position: relative;
602
- display: inline-block;
603
- width: 14.2%;
604
- height: 25px;
605
- text-align: center;
606
- margin-top: 8px
607
- }
608
-
609
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active .iconfont {
610
- display: block;
611
- position: absolute;
612
- left: 17%;
613
- top: 0;
614
- font-size: 25px
615
- }
616
-
617
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active span {
618
- color: #fff!important
619
- }
620
-
621
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.heart-ani .iconfont {
622
- -webkit-animation: jumpheart .8s ease infinite alternate;
623
- animation: jumpheart .8s ease infinite alternate
624
- }
625
-
626
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li .iconfont {
627
- display: none;
628
- font-size: 26px
629
- }
630
-
631
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li span {
632
- position: absolute;
633
- left: 50%;
634
- top: 50%;
635
- z-index: 1;
636
- color: #666;
637
- font-size: 13px;
638
- -webkit-transform: translate(-50%,-52%);
639
- transform: translate(-50%,-52%)
640
- }
641
-
642
- .ele-calendar .ani-wrap .can-wrap3 .can-top {
643
- display: -webkit-box;
644
- display: -ms-flexbox;
645
- display: flex;
646
- -webkit-box-pack: justify;
647
- -ms-flex-pack: justify;
648
- justify-content: space-between;
649
- -webkit-box-align: end;
650
- -ms-flex-align: end;
651
- align-items: flex-end;
652
- line-height: 1;
653
- padding: 18px 33px 10px;
654
- font-size: 36px;
655
- }
656
-
657
- .ele-calendar .ani-wrap .can-wrap3 .can-top span {
658
- font-size: 16px
659
- }
660
-
661
- .ele-calendar .ani-wrap .can-wrap3 .can-top .can-year {
662
- font-size: 20px
663
- }
664
-
665
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week {
666
- display: -webkit-box;
667
- display: -ms-flexbox;
668
- display: flex;
669
- -webkit-box-pack: start;
670
- -ms-flex-pack: start;
671
- justify-content: flex-start;
672
- height: 40px;
673
- line-height: 40px;
674
- padding: 0 34px;
675
- border-bottom: 1px solid
676
- }
677
-
678
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week span {
679
- width: 14.2%;
680
- text-align: center;
681
- color: #fff;
682
- font-size: 12px;
683
- font-weight: 600
684
- }
685
-
686
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date {
687
- position: relative
688
- }
689
-
690
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul {
691
- font-size: 0;
692
- padding: 5px 33px 0;
693
- text-align: left
694
- }
695
-
696
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li {
697
- position: relative;
698
- display: inline-block;
699
- width: 14.2%;
700
- height: 25px;
701
- text-align: center;
702
- margin-top: 8px;
703
- }
704
-
705
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active {
706
- color: #eee
707
- }
708
-
709
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active .iconfont {
710
- display: block;
711
- position: absolute;
712
- left: 12%;
713
- top: 2px;
714
- }
715
-
716
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active span {
717
- font-size: 12px
718
- }
719
-
720
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.heart-ani .iconfont {
721
- -webkit-animation: jumpheart .8s ease infinite alternate;
722
- animation: jumpheart .8s ease infinite alternate
723
- }
724
-
725
- @keyframes jumpheart {
726
- to {
727
- -webkit-transform: scale(1.2);
728
- transform: scale(1.2)
413
+
414
+ .v-modal {
415
+ position: fixed;
416
+ left: 0;
417
+ top: 0;
418
+ width: 100%;
419
+ height: 100%;
420
+ opacity: .5;
421
+ background: #000;
729
422
  }
730
- }
731
-
732
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li .iconfont {
733
- display: none;
734
- font-size: 26px
735
- }
736
-
737
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li span {
738
- position: absolute;
739
- left: 50%;
740
- top: 50%;
741
- z-index: 1;
742
- color: #666;
743
- font-size: 13px;
744
- -webkit-transform: translate(-50%,-52%);
745
- transform: translate(-50%,-52%)
746
- }
747
-
748
- .ele-calendar .bottom-center,.ele-calendar .left-center,.ele-calendar .right-center,.ele-calendar .top-center {
749
- display: none!important
750
- }
751
- .icon-tuoyuanxing:before {
752
- content: "\E6A7";
753
- }
754
- .icon-zan1:before {
755
- content: "\E66D";
756
- }
757
- .icon-xingzhuangjiehe:before {
758
- content: "\E6A6";
759
- }.call {
760
- position: absolute;
761
- cursor: pointer;
762
- user-select: none;
763
- }
764
-
765
- .call .ani-wrap {
766
- display: flex;
767
- justify-content: center;
768
- align-items: center;
769
- width: 100%;
770
- height: 100%;
771
- overflow: hidden;
772
- transition: opacity 0.2s;
773
- }
774
-
775
- .call .ani-wrap:hover {
776
- opacity: 0.9;
777
- }
778
-
779
- .call-content {
780
- display: flex;
781
- align-items: center;
782
- justify-content: center;
783
- }
784
-
785
- .btn-text {
786
- margin-left: 10px;
787
- }
788
-
789
-
790
- .hb-tel:before {
791
- content: "\E642";
792
- }.ele-effect {
793
- will-change: transform;
794
- }
795
-
796
- .ele-effect .effect-wrap {
797
- position: relative;
798
- width: 100%;
799
- height: 100%;
800
- }
801
-
802
- .particle {
803
- position: absolute;
804
- background-repeat: no-repeat;
805
- background-size: contain;
806
- animation-name: falling;
807
- animation-timing-function: linear;
808
- animation-iteration-count: infinite;
809
- will-change: transform;
810
- }
811
-
812
- @keyframes falling {
813
- 0% {
814
- transform: translateY(0) rotate(0deg);
815
- opacity: 1;
423
+ /* 底部工具栏样式 */
424
+ #toolbarNew {
425
+ position: fixed;
426
+ left: 0;
427
+ bottom: 0;
428
+ width: 100%;
429
+ padding: 12px 0;
430
+ background: url('https://h5cdn.unika.cc/static/img/uniComponents/inputBg.png') 0 0 repeat-x;
431
+ z-index: 100;
432
+ }
433
+
434
+ .toolbar {
435
+ display: flex;
436
+ align-items: center;
437
+ padding: 0 10px;
438
+ }
439
+
440
+ .bar-left {
441
+ position: relative;
442
+ flex: 1;
443
+ }
444
+
445
+ .bar-mess {
446
+ width: 100%;
447
+ height: 36px;
448
+ line-height: 36px;
449
+ font-size: 14px;
450
+ color: #ccc;
451
+ padding: 0 8px;
452
+ border-radius: 18px;
453
+ border: none;
454
+ -webkit-appearance: none;
455
+ background-color: rgba(0, 0, 0, 0.28);
456
+ }
457
+
458
+ .bar-mess::placeholder {
459
+ color: rgba(255, 255, 255, 0.7);
460
+ }
461
+
462
+ .bar-left .iconfont {
463
+ position: absolute;
464
+ right: 10px;
465
+ top: 50%;
466
+ transform: translateY(-50%);
467
+ color: #f2f2f2;
468
+ font-size: 16px;
469
+ cursor: pointer;
470
+ z-index: 2;
471
+ padding: 5px;
816
472
  }
817
- 80% {
818
- opacity: 0.8;
473
+
474
+ /* 关闭弹幕按钮样式 */
475
+ .toolbar-close {
476
+ position: absolute;
477
+ left: 10px;
478
+ transform: translateY(-50%);
479
+ display: flex;
480
+ align-items: center;
481
+ cursor: pointer;
482
+ z-index: 2;
819
483
  }
820
- 100% {
821
- transform: translateY(100vh) rotate(360deg);
822
- opacity: 0;
484
+
485
+ .toolbar-close img {
486
+ display: block;
487
+ width: 36px;
488
+ height: 36px;
489
+ cursor: pointer;
823
490
  }
824
- }
825
- .ele-lottie .ele-lotwrap {
826
- overflow: hidden
827
- }
828
-
829
- .ele-effect .effect-wrap {
830
- position: relative;
491
+
492
+ /* 弹幕容器样式 */
493
+ .bullet-container {
494
+ position: fixed;
495
+ left: 10px;
496
+ right: 10px;
497
+ height: 120px;
831
498
  overflow: hidden;
832
- width: 100%;
833
- height: 100%
834
- }
835
-
836
- .ele-effect .e-small {
499
+ z-index: 99;
500
+ pointer-events: none;
501
+ }
502
+
503
+ .bullet-item {
837
504
  position: absolute;
838
- width: 24px;
839
- height: 24px;
840
- background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
841
- background-size: cover;
842
- background-repeat: no-repeat;
843
- -webkit-transform-origin: center;
844
- transform-origin: center;
845
- -webkit-animation: snow 5s linear infinite;
846
- animation: snow 5s linear infinite
847
- }.element-ditu .ani-wrap {
848
- width: 100%;
849
- height: 100%;
850
- overflow: hidden
851
- }
852
-
853
- .element-ditu .map {
854
- width: 100%;
855
- height: 100%
856
- }
857
-
858
- .element-ditu .map .el-button {
859
- width: 100%;
860
- height: 100%;
861
- display: -webkit-box;
862
- display: -ms-flexbox;
863
- display: flex;
864
- -webkit-box-align: center;
865
- -ms-flex-align: center;
866
- align-items: center;
867
- padding: 0;
868
- -webkit-box-pack: center;
869
- -ms-flex-pack: center;
870
- justify-content: center;
871
- background: inherit;
872
- color: inherit;
873
- border: none
874
- }
875
-
876
- .element-ditu .center-map {
877
- width: 100%;
878
- height: 100%;
879
- background: #fff
880
- }
881
-
882
- .element-ditu .mask-map {
883
- position: absolute;
884
- width: 100%;
885
- height: 100%;
886
- top: 0
887
- }
888
- .map-iframe {
889
- width: 100%;
890
- height: 100%;
891
- }
892
- .element-video {
505
+ left: 0;
506
+ bottom: 0;
507
+ padding: 5px 10px;
508
+ border-radius: 15px;
509
+ font-size: 14px;
510
+ white-space: nowrap;
511
+ animation: bulletMove linear;
512
+ animation-fill-mode: forwards;
513
+ will-change: transform;
514
+ display: inline-block;
515
+ max-width: 90%;
516
+ }
517
+
518
+ @keyframes bulletMove {
519
+ 0% {
520
+ transform: translateY(0);
521
+ opacity: 1;
522
+ }
523
+ 100% {
524
+ transform: translateY(calc(-1 * 150px));
525
+ opacity: 0;
526
+ }
527
+ }
528
+
529
+ /* 弹幕输入弹窗样式 */
530
+ .popup-overlay {
531
+ position: fixed;
532
+ top: 0;
533
+ left: 0;
534
+ right: 0;
535
+ bottom: 0;
536
+ background: rgba(0, 0, 0, 0.5);
537
+ display: flex;
538
+ justify-content: center;
539
+ align-items: flex-end;
540
+ z-index: 200;
541
+ }
542
+
543
+ #index .mint-popup {
544
+ background-color: transparent;
545
+ }
546
+
547
+ .mint-popup {
548
+ position: fixed;
549
+ background: #fff;
550
+ top: 50%;
551
+ left: 50%;
552
+ transform: translate3d(-50%, -50%, 0);
553
+ -webkit-backface-visibility: hidden;
554
+ backface-visibility: hidden;
555
+ transition: .2s ease-out;
556
+ }
557
+
558
+ .bar-messwin {
559
+ width: 309px;
560
+ height: 341px;
561
+ background: url('https://h5cdn.unika.cc/static/img/uniComponents/mess-bg.png') no-repeat 50%;
562
+ background-size: 100% 100%;
563
+ position: relative;
564
+ display: flex;
565
+ flex-direction: column;
566
+ align-items: center;
567
+ margin-bottom: 20px;
568
+ }
569
+
570
+ .bar-messwin .mess-logo {
571
+ width: 171px;
572
+ height: 110px;
573
+ margin-top: -64px;
574
+ margin-left: 11px;
575
+ }
576
+
577
+ .bar-messwin .mess-title {
578
+ margin-top: 12px;
579
+ font-weight: 600;
580
+ font-size: 21px;
581
+ color: #333;
582
+ }
583
+
584
+ .bar-messwin .mess-input {
585
+ width: 267px;
586
+ height: 43px;
587
+ background: #fff;
588
+ border-radius: 9px;
589
+ border: 1px solid rgba(237,85,102,0.4);
590
+ margin-top: 12px;
591
+ display: flex;
592
+ align-items: center;
593
+ justify-content: center;
594
+ padding: 0 13px;
595
+ }
596
+
597
+ .bar-messwin .mess-input input {
598
+ width: 100%;
599
+ font-size: 17px;
600
+ font-family: PingFang SC;
601
+ font-weight: 400;
602
+ color: #333;
603
+ border: none;
604
+ outline: none;
605
+ background: transparent;
606
+ }
607
+
608
+ .bar-messwin .mess-input input::-webkit-input-placeholder {
609
+ color: #999;
610
+ }
611
+
612
+ .bar-messwin .mess-input input::-ms-input-placeholder {
613
+ color: #999;
614
+ }
615
+
616
+ .bar-messwin .mess-input input::placeholder {
617
+ color: #999;
618
+ }
619
+
620
+ .bar-messwin .mess-textarea {
621
+ width: 267px;
622
+ height: 85px;
623
+ background: #fff;
624
+ border-radius: 9px;
625
+ border: 1px solid rgba(237,85,102,0.4);
626
+ display: flex;
627
+ padding: 9px 13px;
628
+ justify-content: space-between;
629
+ margin-top: 12px;
630
+ position: relative;
631
+ }
632
+
633
+ .bar-messwin .mess-textarea textarea {
634
+ width: 203px;
635
+ height: 68px;
636
+ font-size: 17px;
637
+ resize: none;
638
+ outline: none;
639
+ border: none;
640
+ background: transparent;
641
+ color: #333;
642
+ font-family: PingFang SC;
643
+ }
644
+
645
+ .bar-messwin .mess-textarea textarea::-webkit-input-placeholder {
646
+ color: #999;
647
+ }
648
+
649
+ .bar-messwin .mess-textarea textarea::-ms-input-placeholder {
650
+ color: #999;
651
+ }
652
+
653
+ .bar-messwin .mess-textarea textarea::placeholder {
654
+ color: #999;
655
+ }
656
+
657
+ .bar-messwin .mess-textarea img {
658
+ width: 26px;
659
+ height: 26px;
660
+ cursor: pointer;
661
+ }
662
+
663
+ .bar-messwin .mess-textarea .wish-dropdown {
893
664
  position: absolute;
894
- overflow: hidden;
895
- background-color: transparent;
665
+ top: 43px;
666
+ right: 0;
667
+ width: 267px;
668
+ background: #fff;
669
+ border-radius: 9px;
670
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
671
+ z-index: 10;
672
+ max-height: 213px;
673
+ overflow-y: auto;
674
+ border: 1px solid rgba(237,85,102,0.2);
675
+ padding: 0 13px;
896
676
  }
897
677
 
898
- .element-video .ani-wrap, .element-video img {
899
- display: block;
900
- width: 100%;
901
- height: 100%;
678
+ .bar-messwin .mess-textarea .wish-dropdown::-webkit-scrollbar {
679
+ width: 3px;
680
+ background-color: transparent;
681
+ display: block;
902
682
  }
903
683
 
904
- .video-container {
905
- width: 100%;
906
- height: 100%;
684
+ .bar-messwin .mess-textarea .wish-dropdown::-webkit-scrollbar-thumb {
685
+ background-color: #ccc;
686
+ border-radius: 9px;
687
+ min-height: 32px;
907
688
  }
908
689
 
909
- .video-container iframe {
910
- width: 100%;
911
- height: 100%;
912
- border: none;
690
+ .bar-messwin .mess-textarea .wish-dropdown::-webkit-scrollbar-track {
691
+ background-color: transparent;
692
+ border-radius: 3px;
693
+ margin: 4px 0;
913
694
  }
914
695
 
915
- .video-cover {
916
- position: relative;
917
- width: 100%;
918
- height: 100%;
919
- background-size: cover;
920
- background-position: center;
696
+ .bar-messwin .mess-textarea .wish-dropdown .wish-item {
697
+ padding: 11px 0;
698
+ display: flex;
699
+ align-items: flex-start;
921
700
  cursor: pointer;
701
+ transition: background-color 0.2s;
702
+ border-bottom: 1px solid rgba(0,0,0,0.05);
922
703
  }
923
704
 
924
- .video-cover .play-btn {
925
- position: absolute;
926
- left: 50%;
927
- top: 50%;
928
- transform: translate(-50%, -50%);
929
- width: 50px;
930
- height: 50px;
931
- opacity: 0.8;
932
- transition: opacity 0.2s;
705
+ .bar-messwin .mess-textarea .wish-dropdown .wish-item:last-child {
706
+ border-bottom: none;
933
707
  }
934
708
 
935
- .video-cover:hover .play-btn {
936
- opacity: 1;
937
- }/* .ele-form {
938
- position: absolute;
939
- user-select: none;
940
- } */
709
+ .bar-messwin .mess-textarea .wish-dropdown .wish-item .wish-dot {
710
+ color: #ff4874;
711
+ margin-right: 5px;
712
+ font-size: 11px;
713
+ line-height: 21px;
714
+ }
941
715
 
942
- .f-select {
716
+ .bar-messwin .mess-textarea .wish-dropdown .wish-item .wish-text {
717
+ font-size: 15px;
718
+ color: #333;
719
+ line-height: 21px;
720
+ text-align: left;
721
+ }
722
+
723
+ .bar-messwin .bar-m-sub {
724
+ width: 267px;
725
+ height: 43px;
726
+ background: linear-gradient(270deg,#ff4874,#ff9061);
727
+ border-radius: 68px;
728
+ font-size: 17px;
729
+ font-family: PingFang SC;
730
+ font-weight: 400;
731
+ color: #fff;
732
+ margin-top: 26px;
733
+ border: none;
734
+ outline: none;
735
+ cursor: pointer;
736
+ display: flex;
737
+ align-items: center;
738
+ justify-content: center;
739
+ }
740
+
741
+ .bar-messwin .icon-cuowu2, .give-gift .icon-cuowu2 {
742
+ position: absolute;
743
+ bottom: -60px;
744
+ right: 50%;
745
+ transform: translateX(50%);
746
+ font-size: 28px;
747
+ color: #fff;
943
748
  cursor: pointer;
944
749
  }
945
750
 
946
- .ani-wrap {
751
+ /* 提示弹窗样式 */
752
+ .mint-msgbox-wrapper {
753
+ position: fixed;
754
+ top: 0;
755
+ left: 0;
756
+ right: 0;
757
+ bottom: 0;
758
+ background-color: rgba(0,0,0,0.5);
759
+ z-index: 2005;
760
+ display: flex;
761
+ justify-content: center;
762
+ align-items: center;
763
+ }
764
+
765
+ .mint-msgbox {
947
766
  position: relative;
767
+ background-color: #fff;
768
+ width: 85%;
769
+ border-radius: 3px;
770
+ font-size: 17px;
771
+ overflow: hidden;
948
772
  }
949
773
 
950
- .f-select .ani-wrap .fs-tit {
774
+ .mint-msgbox-header {
775
+ padding: 16px 0 0;
776
+ }
777
+
778
+ .mint-msgbox-content {
779
+ padding: 11px 21px 16px;
780
+ border-bottom: 1px solid #ddd;
781
+ min-height: 38px;
951
782
  position: relative;
783
+ }
784
+
785
+ .mint-msgbox-title {
786
+ text-align: center;
787
+ padding-left: 0;
788
+ margin-bottom: 0;
789
+ font-size: 17px;
790
+ font-weight: 700;
791
+ color: #333;
792
+ }
793
+
794
+ .mint-msgbox-message {
795
+ color: #999;
796
+ margin: 0;
797
+ text-align: center;
798
+ line-height: 38px;
799
+ }
800
+
801
+ .mint-msgbox-btns {
802
+ display: flex;
803
+ height: 43px;
804
+ line-height: 43px;
805
+ }
806
+
807
+ .mint-msgbox-btn {
808
+ line-height: 37px;
809
+ display: block;
810
+ background-color: #fff;
811
+ flex: 1;
812
+ margin: 0;
813
+ border: 0;
814
+ }
815
+
816
+ .mint-msgbox-confirm {
817
+ color: #26a2ff;
818
+ width: 100%;
819
+ }
820
+ /* 右侧按钮区域样式 */
821
+ #toolbarNew .toolbar .bar-right {
822
+ margin-left: 7px;
823
+ font-size: 0;
952
824
  display: flex;
953
- padding: 0 5px;
954
- height: 35px;
955
- line-height: 35px;
956
825
  align-items: center;
957
826
  }
958
827
 
959
- .require {
960
- padding: 0 5px 0 0;
961
- color: red;
828
+ #toolbarNew .toolbar .bar-right.move-left {
829
+ right: 64px;
830
+ }
831
+
832
+ #toolbarNew .toolbar .bar-right .bar-r-com,
833
+ #toolbarNew .toolbar .bar-right>img {
834
+ display: inline-block;
962
835
  vertical-align: middle;
963
836
  }
964
837
 
965
- .fs-cont {
966
- padding-right: 15px;
967
- white-space: nowrap;
968
- overflow: hidden;
969
- text-overflow: ellipsis;
970
- flex-grow: 1;
838
+ #toolbarNew .toolbar .bar-right .bar-r-com {
839
+ margin-left: 8px;
840
+ cursor: pointer;
971
841
  }
972
842
 
973
- .icon-bofang1 {
974
- font-size: 12px;
975
- transition: transform 0.2s ease;
843
+ #toolbarNew .toolbar .bar-right .bar-r-com.bar-r-gift {
844
+ width: 36px;
845
+ height: 36px;
846
+ transform-origin: center bottom;
847
+ animation: giftJump 3s ease infinite;
848
+ }
849
+
850
+ @keyframes giftJump {
851
+ 0%, 24%, 48%, to {
852
+ transform: translateZ(0);
853
+ }
854
+ 12% {
855
+ transform: translate3d(0, -10px, 0);
856
+ }
857
+ 36% {
858
+ transform: translate3d(0, -10px, 0);
859
+ }
860
+ }
861
+
862
+ #toolbarNew .toolbar .bar-right .bar-r-com:first-child {
863
+ margin-left: 0;
864
+ }
865
+
866
+ #toolbarNew .toolbar .bar-right>img {
867
+ position: relative;
868
+ z-index: 1;
869
+ width: 26px;
870
+ height: 26px;
871
+ }
872
+
873
+ #toolbarNew .toolbar .bar-right .bar-heart {
874
+ position: relative;
875
+ width: 36px;
876
+ height: 36px;
877
+ text-align: center;
878
+ }
879
+
880
+ #toolbarNew .toolbar .bar-right .bar-heart .bar-praise {
881
+ position: absolute;
882
+ max-width: 36px;
883
+ height: 15px;
884
+ line-height: 15px;
885
+ right: 0;
886
+ top: 0;
887
+ z-index: 3;
888
+ font-size: 10px;
889
+ color: #fff;
890
+ border-radius: 6px;
891
+ padding: 0 4px;
892
+ box-sizing: border-box;
893
+ white-space: nowrap;
894
+ background-color: #f38200;
895
+ transform: translateX(40%);
976
896
  }
977
897
 
978
- .rotate-180 {
979
- transform: rotate(180deg) !important;
898
+ #toolbarNew .toolbar .bar-right .bar-zan {
899
+ position: relative;
900
+ z-index: 2;
901
+ height: 33px;
902
+ width: 33px;
903
+ box-sizing: border-box;
980
904
  }
981
905
 
982
- .f-real {
906
+ #toolbarNew .toolbar .bar-right .bar-zan .ani-num {
983
907
  position: absolute;
984
- left: 0;
985
908
  top: 0;
986
- width: 100%;
987
- height: 100%;
988
- z-index: 1;
909
+ left: 10px;
989
910
  opacity: 0;
990
- cursor: pointer;
991
- }
992
-
993
- .dropdown-menu {
994
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
911
+ font-size: 15px;
912
+ color: #f07a87;
995
913
  }
996
914
 
997
- .dropdown-item {
998
- padding: 8px 10px;
999
- cursor: pointer;
1000
- transition: background-color 0.2s;
915
+ #toolbarNew .toolbar .bar-right .bar-zan .stop-longtap {
916
+ position: absolute;
917
+ left: 0;
918
+ right: 0;
919
+ bottom: 0;
920
+ top: 0;
921
+ z-index: 1;
1001
922
  }
1002
923
 
1003
- .dropdown-item:hover {
1004
- background-color: #f5f5f5;
924
+ #toolbarNew .toolbar .bar-right .bar-zan img {
925
+ width: 36px;
926
+ height: 36px;
1005
927
  }
1006
928
 
1007
- .dropdown-item.selected {
1008
- background-color: #e6f7ff;
1009
- color: #1890ff;
929
+ #toolbarNew .toolbar .bar-right .bar-zan.active .ani-num {
930
+ z-index: 2;
931
+ animation: praise 1.2s;
932
+ animation-fill-mode: both;
1010
933
  }
1011
934
 
1012
- .f-select .fs-tit .icon-bofang1 {
1013
- position: absolute;
1014
- right: 10px;
1015
- font-size: 12px;
1016
- display: inline-block;
1017
- transform: rotate(90deg);
935
+ @keyframes praise {
936
+ 0% {
937
+ opacity: 1;
938
+ }
939
+ 50% {
940
+ opacity: 1;
941
+ transform: translate3d(0, -35px, 0);
942
+ }
943
+ to {
944
+ opacity: 0;
945
+ transform: translate3d(0, -35px, 0);
946
+ }
1018
947
  }
1019
948
 
1020
- .icon-bofang1:before {
1021
- content: "\E6CF";
949
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap {
950
+ transform: scale(0.85);
1022
951
  }
1023
952
 
1024
- .has-error {
1025
- border-color: #ff4d4f !important;
953
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:first-of-type {
954
+ animation: jump .6s ease-out;
1026
955
  }
1027
956
 
1028
- .error-tip {
1029
- position: fixed;
1030
- left: 0;
1031
- top: 0;
1032
- width: 100%;
1033
- height: 100%;
1034
- z-index: 1000;
1035
- }
1036
- .ele-lottie .ele-lotwrap {
1037
- overflow: hidden;
1038
- }.form-input {
1039
- position: absolute;
957
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(2) {
958
+ animation: jump2 .6s ease-out;
1040
959
  }
1041
960
 
1042
- .input-wrapper {
1043
- display: flex;
1044
- align-items: center;
1045
- width: 100%;
1046
- height: 100%;
1047
- padding: 0 10px;
1048
- box-sizing: border-box;
1049
- position: relative;
1050
- transition: border-color 0.3s;
961
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(3) {
962
+ animation: jump3 .6s ease-out;
1051
963
  }
1052
964
 
1053
- .required-marker {
1054
- font-size: 12px;
1055
- padding: 0 5px 0 0;
1056
- color: red;
1057
- vertical-align: middle;
965
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(4) {
966
+ animation: jump4 .6s ease-out;
1058
967
  }
1059
968
 
1060
- input {
1061
- flex: 1;
1062
- border: none;
1063
- outline: none;
1064
- background: transparent;
1065
- height: 100%;
1066
- padding: 0;
1067
- margin: 0;
969
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(5) {
970
+ animation: jump5 .6s ease-out;
1068
971
  }
1069
- /*
1070
- input::placeholder {
1071
- color: #ccc;
1072
- opacity: 1;
1073
- } */
1074
972
 
1075
- .dynamic-placeholder-input::placeholder {
1076
- color: var(--placeholder-color, #999);
1077
- opacity: 1;
1078
- }
1079
- .dynamic-placeholder-input::-webkit-input-placeholder {
1080
- color: var(--placeholder-color, #999);
1081
- }
1082
- .dynamic-placeholder-input::-moz-placeholder {
1083
- color: var(--placeholder-color, #999);
1084
- opacity: 1;
1085
- }
1086
- .dynamic-placeholder-input:-ms-input-placeholder {
1087
- color: var(--placeholder-color, #999);
1088
- }/* Iconfont definition */
1089
- .icon-danmuliebiao1:before {
1090
- content: "\E68A";
973
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(6) {
974
+ animation: jump6 .6s ease-out;
1091
975
  }
1092
976
 
1093
- .icon-cuowu2:before {
1094
- content: "\E65E";
977
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(7) {
978
+ animation: jump7 .6s ease-out;
1095
979
  }
1096
980
 
1097
- i {
1098
- font-style: normal;
981
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(8) {
982
+ animation: jump8 .6s ease-out;
1099
983
  }
1100
984
 
1101
- .v-modal {
1102
- position: fixed;
1103
- left: 0;
1104
- top: 0;
1105
- width: 100%;
1106
- height: 100%;
1107
- opacity: .5;
1108
- background: #000;
1109
- }
1110
- /* 底部工具栏样式 */
1111
- #toolbarNew {
1112
- position: fixed;
985
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap {
986
+ position: absolute;
1113
987
  left: 0;
988
+ top: 0;
989
+ right: 0;
1114
990
  bottom: 0;
1115
- width: 100%;
1116
- padding: 12px 0;
1117
- background: url('https://h5cdn.unika.cc/static/img/uniComponents/inputBg.png') 0 0 repeat-x;
1118
- z-index: 100;
991
+ pointer-events: none;
992
+ overflow: visible;
1119
993
  }
1120
994
 
1121
- .toolbar {
1122
- display: flex;
1123
- align-items: center;
1124
- padding: 0 10px;
995
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span {
996
+ position: absolute;
997
+ width: 6px;
998
+ height: 6px;
999
+ border-radius: 50%;
1000
+ opacity: 0;
1125
1001
  }
1126
1002
 
1127
- .bar-left {
1128
- position: relative;
1129
- flex: 1;
1003
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:first-of-type {
1004
+ left: 50%;
1005
+ top: -8px;
1006
+ transform: translate3d(-50%, 0, 0);
1007
+ background-color: #b3e5c8;
1130
1008
  }
1131
1009
 
1132
- .bar-mess {
1133
- width: 100%;
1134
- height: 36px;
1135
- line-height: 36px;
1136
- font-size: 14px;
1137
- color: #ccc;
1138
- padding: 0 8px;
1139
- border-radius: 18px;
1140
- border: none;
1141
- -webkit-appearance: none;
1142
- background-color: rgba(0, 0, 0, 0.28);
1010
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(2) {
1011
+ left: -8px;
1012
+ top: 50%;
1013
+ transform: translate3d(0, -50%, 0);
1014
+ background-color: #f4ba31;
1143
1015
  }
1144
1016
 
1145
- .bar-mess::placeholder {
1146
- color: rgba(255, 255, 255, 0.7);
1017
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(3) {
1018
+ left: 50%;
1019
+ bottom: -8px;
1020
+ transform: translate3d(-50%, 0, 0);
1021
+ background-color: #339fef;
1147
1022
  }
1148
1023
 
1149
- .bar-left .iconfont {
1150
- position: absolute;
1151
- right: 10px;
1024
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(4) {
1152
1025
  top: 50%;
1153
- transform: translateY(-50%);
1154
- color: #f2f2f2;
1155
- font-size: 16px;
1156
- cursor: pointer;
1157
- z-index: 2;
1158
- padding: 5px;
1026
+ right: -8px;
1027
+ transform: translate3d(0, -50%, 0);
1028
+ background-color: #e2264d;
1159
1029
  }
1160
1030
 
1161
- /* 关闭弹幕按钮样式 */
1162
- .toolbar-close {
1163
- position: absolute;
1164
- left: 10px;
1165
- transform: translateY(-50%);
1166
- display: flex;
1167
- align-items: center;
1168
- cursor: pointer;
1169
- z-index: 2;
1031
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(5) {
1032
+ left: -5px;
1033
+ top: 0;
1034
+ transform: translate3d(0, -50%, 0);
1035
+ background-color: #a08880;
1170
1036
  }
1171
1037
 
1172
- .toolbar-close img {
1173
- display: block;
1174
- width: 36px;
1175
- height: 36px;
1176
- cursor: pointer;
1038
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(6) {
1039
+ left: -5px;
1040
+ bottom: 0;
1041
+ transform: translate3d(0, 50%, 0);
1042
+ background-color: #43c1b5;
1177
1043
  }
1178
1044
 
1179
- /* 弹幕容器样式 */
1180
- .bullet-container {
1181
- position: fixed;
1182
- left: 10px;
1183
- right: 10px;
1184
- height: 120px;
1185
- overflow: hidden;
1186
- z-index: 99;
1187
- pointer-events: none;
1045
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(7) {
1046
+ right: -5px;
1047
+ bottom: 0;
1048
+ transform: translate3d(0, 50%, 0);
1049
+ background-color: #f5be3b;
1188
1050
  }
1189
1051
 
1190
- .bullet-item {
1191
- position: absolute;
1192
- left: 0;
1193
- bottom: 0;
1194
- padding: 5px 10px;
1195
- border-radius: 15px;
1196
- font-size: 14px;
1197
- white-space: nowrap;
1198
- animation: bulletMove linear;
1199
- animation-fill-mode: forwards;
1200
- will-change: transform;
1201
- display: inline-block;
1202
- max-width: 90%;
1052
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(8) {
1053
+ right: -5px;
1054
+ top: 0;
1055
+ transform: translate3d(0, -50%, 0);
1056
+ background-color: coral;
1203
1057
  }
1204
1058
 
1205
- @keyframes bulletMove {
1059
+ @keyframes jump {
1206
1060
  0% {
1207
- transform: translateY(0);
1208
1061
  opacity: 1;
1062
+ transform: translate3d(-50%, 0, 0) scale(1);
1209
1063
  }
1210
- 100% {
1211
- transform: translateY(calc(-1 * 150px));
1212
- opacity: 0;
1064
+ 40% {
1065
+ transform: translate3d(-50%, -100%, 0) scale(0.7);
1066
+ }
1067
+ to {
1068
+ opacity: 1;
1069
+ transform: translate3d(-50%, -150%, 0) scale(0);
1213
1070
  }
1214
1071
  }
1215
1072
 
1216
- /* 弹幕输入弹窗样式 */
1217
- .popup-overlay {
1218
- position: fixed;
1219
- top: 0;
1220
- left: 0;
1221
- right: 0;
1222
- bottom: 0;
1223
- background: rgba(0, 0, 0, 0.5);
1224
- display: flex;
1225
- justify-content: center;
1226
- align-items: flex-end;
1227
- z-index: 200;
1073
+ @keyframes jump2 {
1074
+ 0% {
1075
+ opacity: 1;
1076
+ transform: translate3d(0, -50%, 0) scale(1);
1077
+ }
1078
+ 40% {
1079
+ transform: translate3d(-100%, -50%, 0) scale(0.7);
1080
+ }
1081
+ to {
1082
+ opacity: 1;
1083
+ transform: translate3d(-150%, -50%, 0) scale(0);
1084
+ }
1228
1085
  }
1229
1086
 
1230
- #index .mint-popup {
1231
- background-color: transparent;
1087
+ @keyframes jump3 {
1088
+ 0% {
1089
+ opacity: 1;
1090
+ transform: translate3d(-50%, 0, 0) scale(1);
1091
+ }
1092
+ 40% {
1093
+ transform: translate3d(-50%, 100%, 0) scale(0.7);
1094
+ }
1095
+ to {
1096
+ opacity: 1;
1097
+ transform: translate3d(-50%, 150%, 0) scale(0);
1098
+ }
1232
1099
  }
1233
1100
 
1234
- .mint-popup {
1235
- position: fixed;
1236
- background: #fff;
1237
- top: 50%;
1238
- left: 50%;
1239
- transform: translate3d(-50%, -50%, 0);
1240
- -webkit-backface-visibility: hidden;
1241
- backface-visibility: hidden;
1242
- transition: .2s ease-out;
1101
+ @keyframes jump4 {
1102
+ 0% {
1103
+ opacity: 1;
1104
+ transform: translate3d(0, -50%, 0) scale(1);
1105
+ }
1106
+ 40% {
1107
+ transform: translate3d(100%, -50%, 0) scale(0.7);
1108
+ }
1109
+ to {
1110
+ opacity: 1;
1111
+ transform: translate3d(150%, -50%, 0) scale(0);
1112
+ }
1243
1113
  }
1244
1114
 
1245
- .bar-messwin {
1246
- width: 309px;
1247
- height: 341px;
1248
- background: url('https://h5cdn.unika.cc/static/img/uniComponents/mess-bg.png') no-repeat 50%;
1249
- background-size: 100% 100%;
1250
- position: relative;
1251
- display: flex;
1252
- flex-direction: column;
1253
- align-items: center;
1254
- margin-bottom: 20px;
1115
+ @keyframes jump5 {
1116
+ 0% {
1117
+ opacity: 1;
1118
+ transform: translate3d(0, -50%, 0) scale(1);
1119
+ }
1120
+ 40% {
1121
+ transform: translate3d(-80%, -80%, 0) scale(0.7);
1122
+ }
1123
+ to {
1124
+ opacity: 1;
1125
+ transform: translate3d(-130%, -130%, 0) scale(0);
1126
+ }
1255
1127
  }
1256
1128
 
1257
- .bar-messwin .mess-logo {
1258
- width: 171px;
1259
- height: 110px;
1260
- margin-top: -64px;
1261
- margin-left: 11px;
1129
+ @keyframes jump6 {
1130
+ 0% {
1131
+ opacity: 1;
1132
+ transform: translate3d(0, 50%, 0) scale(1);
1133
+ }
1134
+ 40% {
1135
+ transform: translate3d(-80%, 80%, 0) scale(0.7);
1136
+ }
1137
+ to {
1138
+ opacity: 1;
1139
+ transform: translate3d(-130%, 130%, 0) scale(0);
1140
+ }
1262
1141
  }
1263
1142
 
1264
- .bar-messwin .mess-title {
1265
- margin-top: 12px;
1266
- font-weight: 600;
1267
- font-size: 21px;
1268
- color: #333;
1143
+ @keyframes jump7 {
1144
+ 0% {
1145
+ opacity: 1;
1146
+ transform: translate3d(0, 50%, 0) scale(1);
1147
+ }
1148
+ 40% {
1149
+ transform: translate3d(80%, 80%, 0) scale(0.7);
1150
+ }
1151
+ to {
1152
+ opacity: 1;
1153
+ transform: translate3d(130%, 130%, 0) scale(0);
1154
+ }
1269
1155
  }
1270
1156
 
1271
- .bar-messwin .mess-input {
1272
- width: 267px;
1273
- height: 43px;
1274
- background: #fff;
1275
- border-radius: 9px;
1276
- border: 1px solid rgba(237,85,102,0.4);
1277
- margin-top: 12px;
1278
- display: flex;
1279
- align-items: center;
1280
- justify-content: center;
1281
- padding: 0 13px;
1157
+ @keyframes jump8 {
1158
+ 0% {
1159
+ opacity: 1;
1160
+ transform: translate3d(0, 50%, 0) scale(1);
1161
+ }
1162
+ 40% {
1163
+ transform: translate3d(80%, -80%, 0) scale(0.7);
1164
+ }
1165
+ to {
1166
+ opacity: 1;
1167
+ transform: translate3d(130%, -130%, 0) scale(0);
1168
+ }
1282
1169
  }
1283
1170
 
1284
- .bar-messwin .mess-input input {
1285
- width: 100%;
1286
- font-size: 17px;
1287
- font-family: PingFang SC;
1288
- font-weight: 400;
1289
- color: #333;
1290
- border: none;
1291
- outline: none;
1292
- background: transparent;
1171
+ /* 礼物弹窗样式 */
1172
+ .give-gift {
1173
+ position: fixed;
1174
+ top: 50%;
1175
+ left: 50%;
1176
+ transform: translate(-50%, -50%);
1177
+ z-index: 2004;
1178
+ background: white;
1179
+ padding: 20px;
1180
+ border-radius: 10px;
1181
+ text-align: center;
1293
1182
  }
1294
1183
 
1295
- .bar-messwin .mess-input input::-webkit-input-placeholder {
1296
- color: #999;
1184
+ .give-gift .back {
1185
+ position: absolute;
1186
+ top: 10px;
1187
+ left: 10px;
1188
+ cursor: pointer;
1297
1189
  }
1298
1190
 
1299
- .bar-messwin .mess-input input::-ms-input-placeholder {
1300
- color: #999;
1191
+ .give-gift img {
1192
+ max-width: 300px;
1193
+ max-height: 300px;
1194
+ margin-top: 20px;
1301
1195
  }
1302
1196
 
1303
- .bar-messwin .mess-input input::placeholder {
1304
- color: #999;
1197
+ /* 留言成功弹窗样式 */
1198
+ .mess-success-popup {
1199
+ position: fixed;
1200
+ top: 0;
1201
+ left: 0;
1202
+ right: 0;
1203
+ bottom: 0;
1204
+ background-color: rgba(0, 0, 0, 0.5);
1205
+ z-index: 2003;
1206
+ display: flex;
1207
+ justify-content: center;
1208
+ align-items: center;
1305
1209
  }
1306
1210
 
1307
- .bar-messwin .mess-textarea {
1308
- width: 267px;
1309
- height: 85px;
1310
- background: #fff;
1311
- border-radius: 9px;
1312
- border: 1px solid rgba(237,85,102,0.4);
1313
- display: flex;
1314
- padding: 9px 13px;
1315
- justify-content: space-between;
1316
- margin-top: 12px;
1211
+ .mess-success-popup .gift-popup {
1212
+ width: 300px;
1213
+ height: 200px;
1214
+ background: url('https://h5cdn.unika.cc/static/img/uniComponents/bg-color.png') no-repeat;
1215
+ border-radius: 10px;
1216
+ padding: 20px;
1217
+ text-align: center;
1317
1218
  position: relative;
1318
1219
  }
1319
1220
 
1320
- .bar-messwin .mess-textarea textarea {
1321
- width: 203px;
1322
- height: 68px;
1323
- font-size: 17px;
1324
- resize: none;
1325
- outline: none;
1326
- border: none;
1327
- background: transparent;
1328
- color: #333;
1329
- font-family: PingFang SC;
1221
+ .mess-success-popup .gift-popup .icon-cuowu2 {
1222
+ position: absolute;
1223
+ top: 10px;
1224
+ right: 10px;
1225
+ cursor: pointer;
1330
1226
  }
1331
1227
 
1332
- .bar-messwin .mess-textarea textarea::-webkit-input-placeholder {
1333
- color: #999;
1228
+ .mess-success-popup .gift-popup .toast {
1229
+ display: flex;
1230
+ align-items: center;
1231
+ justify-content: center;
1232
+ margin: 10px 0;
1334
1233
  }
1335
1234
 
1336
- .bar-messwin .mess-textarea textarea::-ms-input-placeholder {
1337
- color: #999;
1235
+ .mess-success-popup .gift-popup .toast img {
1236
+ width: 20px;
1237
+ height: 15px;
1238
+ margin: 0 5px;
1338
1239
  }
1339
1240
 
1340
- .bar-messwin .mess-textarea textarea::placeholder {
1341
- color: #999;
1241
+ .mess-success-popup .gift-popup .title {
1242
+ margin: 15px 0;
1243
+ font-size: 16px;
1244
+ color: #333;
1342
1245
  }
1343
1246
 
1344
- .bar-messwin .mess-textarea img {
1345
- width: 26px;
1346
- height: 26px;
1247
+ .mess-success-popup .gift-popup .btn {
1248
+ background: linear-gradient(270deg, #ff4874, #ff9061);
1249
+ color: white;
1250
+ border: none;
1251
+ padding: 10px 20px;
1252
+ border-radius: 20px;
1253
+ margin-top: 15px;
1347
1254
  cursor: pointer;
1348
1255
  }
1349
1256
 
1350
- .bar-messwin .mess-textarea .wish-dropdown {
1351
- position: absolute;
1352
- top: 43px;
1353
- right: 0;
1354
- width: 267px;
1355
- background: #fff;
1356
- border-radius: 9px;
1357
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
1358
- z-index: 10;
1359
- max-height: 213px;
1360
- overflow-y: auto;
1361
- border: 1px solid rgba(237,85,102,0.2);
1362
- padding: 0 13px;
1363
- }
1364
-
1365
- .bar-messwin .mess-textarea .wish-dropdown::-webkit-scrollbar {
1366
- width: 3px;
1367
- background-color: transparent;
1368
- display: block;
1257
+ /* 新增图片加载动画样式 */
1258
+ .gift-image-container {
1259
+ position: relative;
1260
+ width: 300px;
1261
+ height: 300px;
1262
+ margin: 20px 0;
1263
+ overflow: hidden;
1369
1264
  }
1370
1265
 
1371
- .bar-messwin .mess-textarea .wish-dropdown::-webkit-scrollbar-thumb {
1372
- background-color: #ccc;
1373
- border-radius: 9px;
1374
- min-height: 32px;
1266
+ .gift-image-container img {
1267
+ width: 100%;
1268
+ height: 100%;
1269
+ object-fit: contain;
1270
+ opacity: 0;
1271
+ transition: opacity 0.5s ease-in-out;
1375
1272
  }
1376
1273
 
1377
- .bar-messwin .mess-textarea .wish-dropdown::-webkit-scrollbar-track {
1378
- background-color: transparent;
1379
- border-radius: 3px;
1380
- margin: 4px 0;
1274
+ .gift-image-container img.loaded {
1275
+ opacity: 1;
1381
1276
  }
1382
1277
 
1383
- .bar-messwin .mess-textarea .wish-dropdown .wish-item {
1384
- padding: 11px 0;
1278
+ .image-loading {
1279
+ position: absolute;
1280
+ top: 0;
1281
+ left: 0;
1282
+ width: 100%;
1283
+ height: 100%;
1385
1284
  display: flex;
1386
- align-items: flex-start;
1387
- cursor: pointer;
1388
- transition: background-color 0.2s;
1389
- border-bottom: 1px solid rgba(0,0,0,0.05);
1285
+ justify-content: center;
1286
+ align-items: center;
1287
+ background: rgba(255, 255, 255, 0.8);
1390
1288
  }
1391
1289
 
1392
- .bar-messwin .mess-textarea .wish-dropdown .wish-item:last-child {
1393
- border-bottom: none;
1290
+ .loading-spinner {
1291
+ width: 40px;
1292
+ height: 40px;
1293
+ border: 4px solid #f3f3f3;
1294
+ border-top: 4px solid #ed5566;
1295
+ border-radius: 50%;
1296
+ animation: spin 1s linear infinite;
1394
1297
  }
1395
1298
 
1396
- .bar-messwin .mess-textarea .wish-dropdown .wish-item .wish-dot {
1397
- color: #ff4874;
1398
- margin-right: 5px;
1399
- font-size: 11px;
1400
- line-height: 21px;
1299
+ @keyframes spin {
1300
+ 0% { transform: rotate(0deg); }
1301
+ 100% { transform: rotate(360deg); }
1401
1302
  }
1402
1303
 
1403
- .bar-messwin .mess-textarea .wish-dropdown .wish-item .wish-text {
1404
- font-size: 15px;
1405
- color: #333;
1406
- line-height: 21px;
1407
- text-align: left;
1304
+ .ele-effect {
1305
+ will-change: transform;
1306
+ }
1307
+
1308
+ .ele-effect .effect-wrap {
1309
+ position: relative;
1310
+ width: 100%;
1311
+ height: 100%;
1312
+ }
1313
+
1314
+ .particle {
1315
+ position: absolute;
1316
+ background-repeat: no-repeat;
1317
+ background-size: contain;
1318
+ animation-name: falling;
1319
+ animation-timing-function: linear;
1320
+ animation-iteration-count: infinite;
1321
+ will-change: transform;
1322
+ }
1323
+
1324
+ @keyframes falling {
1325
+ 0% {
1326
+ transform: translateY(0) rotate(0deg);
1327
+ opacity: 1;
1328
+ }
1329
+ 80% {
1330
+ opacity: 0.8;
1331
+ }
1332
+ 100% {
1333
+ transform: translateY(100vh) rotate(360deg);
1334
+ opacity: 0;
1335
+ }
1336
+ }
1337
+ .ele-lottie .ele-lotwrap {
1338
+ overflow: hidden
1339
+ }
1340
+
1341
+ .ele-effect .effect-wrap {
1342
+ position: relative;
1343
+ overflow: hidden;
1344
+ width: 100%;
1345
+ height: 100%
1346
+ }
1347
+
1348
+ .ele-effect .e-small {
1349
+ position: absolute;
1350
+ width: 24px;
1351
+ height: 24px;
1352
+ background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
1353
+ background-size: cover;
1354
+ background-repeat: no-repeat;
1355
+ -webkit-transform-origin: center;
1356
+ transform-origin: center;
1357
+ -webkit-animation: snow 5s linear infinite;
1358
+ animation: snow 5s linear infinite
1359
+ }.element-ditu .ani-wrap {
1360
+ width: 100%;
1361
+ height: 100%;
1362
+ overflow: hidden
1363
+ }
1364
+
1365
+ .element-ditu .map {
1366
+ width: 100%;
1367
+ height: 100%
1368
+ }
1369
+
1370
+ .element-ditu .map .el-button {
1371
+ width: 100%;
1372
+ height: 100%;
1373
+ display: -webkit-box;
1374
+ display: -ms-flexbox;
1375
+ display: flex;
1376
+ -webkit-box-align: center;
1377
+ -ms-flex-align: center;
1378
+ align-items: center;
1379
+ padding: 0;
1380
+ -webkit-box-pack: center;
1381
+ -ms-flex-pack: center;
1382
+ justify-content: center;
1383
+ background: inherit;
1384
+ color: inherit;
1385
+ border: none
1386
+ }
1387
+
1388
+ .element-ditu .center-map {
1389
+ width: 100%;
1390
+ height: 100%;
1391
+ background: #fff
1392
+ }
1393
+
1394
+ .element-ditu .mask-map {
1395
+ position: absolute;
1396
+ width: 100%;
1397
+ height: 100%;
1398
+ top: 0
1399
+ }
1400
+ .map-iframe {
1401
+ width: 100%;
1402
+ height: 100%;
1403
+ }
1404
+ .ele-text {
1405
+ position: relative;
1406
+ }
1407
+
1408
+ .ele-text .ani-wrap {
1409
+ width: 100%;
1410
+ height: 100%;
1411
+ }
1412
+
1413
+ .text-common {
1414
+ padding: 5px;
1415
+ text-orientation: upright;
1416
+ white-space: pre-wrap;
1417
+ }
1418
+
1419
+ /* 文本动画类 */
1420
+ .text-fadeIn {
1421
+ animation: fadeIn 1s ease-in-out;
1422
+ }
1423
+
1424
+ .text-slideIn {
1425
+ animation: slideIn 1s ease-in-out;
1426
+ }
1427
+
1428
+ .text-bounceIn {
1429
+ animation: bounceIn 1s ease-in-out;
1430
+ }
1431
+
1432
+ /* 基础动画关键帧 */
1433
+ @keyframes fadeIn {
1434
+ from {
1435
+ opacity: 0;
1436
+ }
1437
+ to {
1438
+ opacity: 1;
1439
+ }
1440
+ }
1441
+
1442
+ @keyframes slideIn {
1443
+ from {
1444
+ transform: translateY(20px);
1445
+ opacity: 0;
1446
+ }
1447
+ to {
1448
+ transform: translateY(0);
1449
+ opacity: 1;
1450
+ }
1451
+ }
1452
+
1453
+ @keyframes bounceIn {
1454
+ 0% {
1455
+ transform: scale(0.3);
1456
+ opacity: 0;
1457
+ }
1458
+ 50% {
1459
+ transform: scale(1.05);
1460
+ opacity: 0.8;
1408
1461
  }
1409
-
1410
- .bar-messwin .bar-m-sub {
1411
- width: 267px;
1412
- height: 43px;
1413
- background: linear-gradient(270deg,#ff4874,#ff9061);
1414
- border-radius: 68px;
1415
- font-size: 17px;
1416
- font-family: PingFang SC;
1417
- font-weight: 400;
1418
- color: #fff;
1419
- margin-top: 26px;
1420
- border: none;
1421
- outline: none;
1422
- cursor: pointer;
1423
- display: flex;
1424
- align-items: center;
1425
- justify-content: center;
1462
+ 70% {
1463
+ transform: scale(0.9);
1464
+ opacity: 0.9;
1426
1465
  }
1427
-
1428
- .bar-messwin .icon-cuowu2, .give-gift .icon-cuowu2 {
1429
- position: absolute;
1430
- bottom: -60px;
1431
- right: 50%;
1432
- transform: translateX(50%);
1433
- font-size: 28px;
1434
- color: #fff;
1435
- cursor: pointer;
1466
+ 100% {
1467
+ transform: scale(1);
1468
+ opacity: 1;
1436
1469
  }
1437
-
1438
- /* 提示弹窗样式 */
1439
- .mint-msgbox-wrapper {
1440
- position: fixed;
1441
- top: 0;
1442
- left: 0;
1443
- right: 0;
1444
- bottom: 0;
1445
- background-color: rgba(0,0,0,0.5);
1446
- z-index: 2005;
1447
- display: flex;
1448
- justify-content: center;
1449
- align-items: center;
1470
+ }
1471
+ @keyframes jumpheart {
1472
+ to {
1473
+ -webkit-transform: scale(1.2);
1474
+ transform: scale(1.2)
1475
+ }
1476
+ }
1477
+ .ele-calendar {
1478
+ position: relative;
1479
+ width: 325px !important;
1480
+ min-height: 325px !important;
1481
+ height: auto !important;
1482
+ }
1483
+
1484
+ .ele-calendar .drag-point {
1485
+ cursor: default !important;
1486
+ }
1487
+
1488
+ .ele-calendar .ani-wrap {
1489
+ position: relative;
1490
+ width: 100%;
1491
+ min-height: 325px !important;
1492
+ height: auto !important;
1493
+ padding: 22px 0;
1494
+ }
1495
+
1496
+ .ele-calendar .ani-wrap .can-wrap .can-top {
1497
+ display: flex;
1498
+ justify-content: space-between;
1499
+ align-items: flex-end;
1500
+ line-height: 1;
1501
+ padding: 0 47px 20px;
1502
+ }
1503
+
1504
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
1505
+ font-size: 25px;
1506
+ padding-bottom: 4px;
1507
+ }
1508
+
1509
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
1510
+ font-size: 25px;
1511
+ }
1512
+
1513
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
1514
+ position: relative;
1515
+ top: 2px;
1516
+ font-size: 57px;
1517
+ }
1518
+
1519
+ .ele-calendar .ani-wrap .can-wrap .can-main {
1520
+ padding: 0 23px;
1521
+ }
1522
+
1523
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
1524
+ display: flex;
1525
+ justify-content: flex-start;
1526
+ height: 25px;
1527
+ line-height: 25px;
1528
+ padding: 0 10px;
1529
+ border-radius: 13px;
1530
+ }
1531
+
1532
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-week span {
1533
+ width: 14.2%;
1534
+ text-align: center;
1535
+ color: #fff;
1536
+ font-size: 12px;
1537
+ }
1538
+
1539
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul {
1540
+ font-size: 0;
1541
+ padding: 5px 10px 0;
1542
+ text-align: left;
1543
+ }
1544
+
1545
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li {
1546
+ position: relative;
1547
+ display: inline-block;
1548
+ height: 25px;
1549
+ text-align: center;
1550
+ margin-top: 8px;
1551
+ }
1552
+
1553
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active .iconfont {
1554
+ display: block;
1555
+ }
1556
+
1557
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active span {
1558
+ color: #fff !important;
1559
+ }
1560
+
1561
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
1562
+ animation: jumpheart 0.8s ease infinite alternate;
1563
+ }
1564
+
1565
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
1566
+ display: none;
1567
+ font-size: 26px;
1568
+ }
1569
+
1570
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li span {
1571
+ position: absolute;
1572
+ left: 50%;
1573
+ top: 50%;
1574
+ z-index: 1;
1575
+ color: #666;
1576
+ font-size: 13px;
1577
+ transform: translate(-50%, -52%);
1578
+ }
1579
+
1580
+ .ele-calendar .bottom-center,
1581
+ .ele-calendar .left-center,
1582
+ .ele-calendar .right-center,
1583
+ .ele-calendar .top-center {
1584
+ display: none !important;
1585
+ }
1586
+
1587
+ .ele-calendar .ani-wrap .can-wrap2 {
1588
+ padding: 21px 23px 0
1589
+ }
1590
+
1591
+ .ele-calendar .ani-wrap .can-wrap2 .can-top {
1592
+ display: -webkit-box;
1593
+ display: -ms-flexbox;
1594
+ display: flex;
1595
+ -webkit-box-pack: justify;
1596
+ -ms-flex-pack: justify;
1597
+ justify-content: space-between;
1598
+ -webkit-box-align: end;
1599
+ -ms-flex-align: end;
1600
+ align-items: flex-end;
1601
+ line-height: 1;
1602
+ padding: 0 16px 22px;
1603
+ font-size: 36px
1604
+ }
1605
+
1606
+ .ele-calendar .ani-wrap .can-wrap2 .can-top span {
1607
+ font-size: 16px
1608
+ }
1609
+
1610
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week {
1611
+ display: -webkit-box;
1612
+ display: -ms-flexbox;
1613
+ display: flex;
1614
+ -webkit-box-pack: start;
1615
+ -ms-flex-pack: start;
1616
+ justify-content: flex-start;
1617
+ height: 25px;
1618
+ line-height: 25px;
1619
+ padding: 0 10px;
1620
+ border-radius: 13px
1621
+ }
1622
+
1623
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week span {
1624
+ width: 14.2%;
1625
+ text-align: center;
1626
+ color: #fff;
1627
+ font-size: 12px;
1628
+ font-weight: 600
1629
+ }
1630
+
1631
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date {
1632
+ position: relative
1633
+ }
1634
+
1635
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date .can-year {
1636
+ position: absolute;
1637
+ white-space: nowrap;
1638
+ left: 50%;
1639
+ top: 15%;
1640
+ -webkit-transform: translateX(-50%);
1641
+ transform: translateX(-50%);
1642
+ font-size: 76px;
1643
+ opacity: .1;
1644
+ font-weight: 600
1645
+ }
1646
+
1647
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul {
1648
+ font-size: 0;
1649
+ padding: 5px 10px 0;
1650
+ text-align: left
1651
+ }
1652
+
1653
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li {
1654
+ position: relative;
1655
+ display: inline-block;
1656
+ width: 14.2%;
1657
+ height: 25px;
1658
+ text-align: center;
1659
+ margin-top: 8px
1660
+ }
1661
+
1662
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active .iconfont {
1663
+ display: block;
1664
+ position: absolute;
1665
+ left: 17%;
1666
+ top: 0;
1667
+ font-size: 25px
1668
+ }
1669
+
1670
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active span {
1671
+ color: #fff!important
1672
+ }
1673
+
1674
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.heart-ani .iconfont {
1675
+ -webkit-animation: jumpheart .8s ease infinite alternate;
1676
+ animation: jumpheart .8s ease infinite alternate
1677
+ }
1678
+
1679
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li .iconfont {
1680
+ display: none;
1681
+ font-size: 26px
1682
+ }
1683
+
1684
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li span {
1685
+ position: absolute;
1686
+ left: 50%;
1687
+ top: 50%;
1688
+ z-index: 1;
1689
+ color: #666;
1690
+ font-size: 13px;
1691
+ -webkit-transform: translate(-50%,-52%);
1692
+ transform: translate(-50%,-52%)
1693
+ }
1694
+
1695
+ .ele-calendar .ani-wrap .can-wrap3 .can-top {
1696
+ display: -webkit-box;
1697
+ display: -ms-flexbox;
1698
+ display: flex;
1699
+ -webkit-box-pack: justify;
1700
+ -ms-flex-pack: justify;
1701
+ justify-content: space-between;
1702
+ -webkit-box-align: end;
1703
+ -ms-flex-align: end;
1704
+ align-items: flex-end;
1705
+ line-height: 1;
1706
+ padding: 18px 33px 10px;
1707
+ font-size: 36px;
1708
+ }
1709
+
1710
+ .ele-calendar .ani-wrap .can-wrap3 .can-top span {
1711
+ font-size: 16px
1712
+ }
1713
+
1714
+ .ele-calendar .ani-wrap .can-wrap3 .can-top .can-year {
1715
+ font-size: 20px
1716
+ }
1717
+
1718
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week {
1719
+ display: -webkit-box;
1720
+ display: -ms-flexbox;
1721
+ display: flex;
1722
+ -webkit-box-pack: start;
1723
+ -ms-flex-pack: start;
1724
+ justify-content: flex-start;
1725
+ height: 40px;
1726
+ line-height: 40px;
1727
+ padding: 0 34px;
1728
+ border-bottom: 1px solid
1729
+ }
1730
+
1731
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week span {
1732
+ width: 14.2%;
1733
+ text-align: center;
1734
+ color: #fff;
1735
+ font-size: 12px;
1736
+ font-weight: 600
1737
+ }
1738
+
1739
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date {
1740
+ position: relative
1741
+ }
1742
+
1743
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul {
1744
+ font-size: 0;
1745
+ padding: 5px 33px 0;
1746
+ text-align: left
1747
+ }
1748
+
1749
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li {
1750
+ position: relative;
1751
+ display: inline-block;
1752
+ width: 14.2%;
1753
+ height: 25px;
1754
+ text-align: center;
1755
+ margin-top: 8px;
1756
+ }
1757
+
1758
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active {
1759
+ color: #eee
1760
+ }
1761
+
1762
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active .iconfont {
1763
+ display: block;
1764
+ position: absolute;
1765
+ left: 12%;
1766
+ top: 2px;
1767
+ }
1768
+
1769
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active span {
1770
+ font-size: 12px
1771
+ }
1772
+
1773
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.heart-ani .iconfont {
1774
+ -webkit-animation: jumpheart .8s ease infinite alternate;
1775
+ animation: jumpheart .8s ease infinite alternate
1776
+ }
1777
+
1778
+ @keyframes jumpheart {
1779
+ to {
1780
+ -webkit-transform: scale(1.2);
1781
+ transform: scale(1.2)
1450
1782
  }
1451
-
1452
- .mint-msgbox {
1453
- position: relative;
1454
- background-color: #fff;
1455
- width: 85%;
1456
- border-radius: 3px;
1457
- font-size: 17px;
1783
+ }
1784
+
1785
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li .iconfont {
1786
+ display: none;
1787
+ font-size: 26px
1788
+ }
1789
+
1790
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li span {
1791
+ position: absolute;
1792
+ left: 50%;
1793
+ top: 50%;
1794
+ z-index: 1;
1795
+ color: #666;
1796
+ font-size: 13px;
1797
+ -webkit-transform: translate(-50%,-52%);
1798
+ transform: translate(-50%,-52%)
1799
+ }
1800
+
1801
+ .ele-calendar .bottom-center,.ele-calendar .left-center,.ele-calendar .right-center,.ele-calendar .top-center {
1802
+ display: none!important
1803
+ }
1804
+ .icon-tuoyuanxing:before {
1805
+ content: "\E6A7";
1806
+ }
1807
+ .icon-zan1:before {
1808
+ content: "\E66D";
1809
+ }
1810
+ .icon-xingzhuangjiehe:before {
1811
+ content: "\E6A6";
1812
+ }#page-list .tip-cover {
1813
+ position: fixed;
1814
+ left: 0;
1815
+ top: 0;
1816
+ width: 100%;
1817
+ height: 100%;
1818
+ display: -ms-flexbox;
1819
+ display: flex;
1820
+ -ms-flex-align: center;
1821
+ align-items: center;
1822
+ -ms-flex-pack: center;
1823
+ justify-content: center;
1824
+ z-index: 999;
1825
+ background-color: rgba(0,0,0,.7)
1826
+ }
1827
+
1828
+ #page-list .tip-cover .tip {
1829
+ width: 80%;
1830
+ max-width: 250px;
1831
+ padding: 10px;
1832
+ border-radius: 5px;
1833
+ background-color: #fff
1834
+ }
1835
+
1836
+ #page-list .tip-cover .tip-btn {
1837
+ display: block;
1838
+ margin: 25px auto;
1839
+ width: 120px;
1840
+ height: 30px;
1841
+ color: #fff;
1842
+ border-radius: 4px;
1843
+ text-align: center;
1844
+ font-size: 14px;
1845
+ line-height: 30px;
1846
+ background: #ed5566
1847
+ }
1848
+
1849
+ #page-list .tip-cover .tip-content {
1850
+ font-size: 14px;
1851
+ padding-top: 30px;
1852
+ }
1853
+
1854
+ .tip-cover {
1855
+ position: fixed;
1856
+ left: 0;
1857
+ top: 0;
1858
+ width: 100%;
1859
+ height: 100%;
1860
+ display: -ms-flexbox;
1861
+ display: flex;
1862
+ -ms-flex-align: center;
1863
+ align-items: center;
1864
+ -ms-flex-pack: center;
1865
+ justify-content: center;
1866
+ z-index: 999;
1867
+ background-color: rgba(0,0,0,.7)
1868
+ }
1869
+
1870
+ .tip-cover .tip {
1871
+ width: 80%;
1872
+ max-width: 250px;
1873
+ padding: 5px;
1874
+ border-radius: 3px;
1875
+ background-color: #fff
1876
+ }
1877
+
1878
+ .tip-cover .tip-btn {
1879
+ display: block;
1880
+ margin: 13px auto;
1881
+ width: 64px;
1882
+ height: 20px;
1883
+ color: #fff;
1884
+ border-radius: 4px;
1885
+ text-align: center;
1886
+ font-size: 14px;
1887
+ line-height: 20px;
1888
+ background: #ed5566;
1889
+ }
1890
+ .ele-lottie .ele-lotwrap {
1458
1891
  overflow: hidden;
1459
- }
1460
-
1461
- .mint-msgbox-header {
1462
- padding: 16px 0 0;
1463
- }
1464
-
1465
- .mint-msgbox-content {
1466
- padding: 11px 21px 16px;
1467
- border-bottom: 1px solid #ddd;
1468
- min-height: 38px;
1469
- position: relative;
1470
- }
1471
-
1472
- .mint-msgbox-title {
1473
- text-align: center;
1474
- padding-left: 0;
1475
- margin-bottom: 0;
1476
- font-size: 17px;
1477
- font-weight: 700;
1478
- color: #333;
1479
- }
1480
-
1481
- .mint-msgbox-message {
1482
- color: #999;
1483
- margin: 0;
1484
- text-align: center;
1485
- line-height: 38px;
1486
- }
1892
+ }.button {
1893
+ position: absolute;
1894
+ cursor: pointer;
1895
+ user-select: none;
1896
+ }
1487
1897
 
1488
- .mint-msgbox-btns {
1489
- display: flex;
1490
- height: 43px;
1491
- line-height: 43px;
1492
- }
1898
+ .button .ani-wrap {
1899
+ display: flex;
1900
+ justify-content: center;
1901
+ align-items: center;
1902
+ width: 100%;
1903
+ height: 100%;
1904
+ overflow: hidden;
1905
+ transition: opacity 0.2s;
1906
+ }
1493
1907
 
1494
- .mint-msgbox-btn {
1495
- line-height: 37px;
1496
- display: block;
1497
- background-color: #fff;
1498
- flex: 1;
1499
- margin: 0;
1500
- border: 0;
1908
+ .button .ani-wrap:hover {
1909
+ opacity: 0.9;
1910
+ }
1911
+
1912
+ .button-content {
1913
+ display: flex;
1914
+ align-items: center;
1915
+ justify-content: center;
1916
+ }
1917
+
1918
+ .btn-text {
1919
+ margin-left: 10px;
1920
+ }.form-input {
1921
+ position: absolute;
1501
1922
  }
1502
1923
 
1503
- .mint-msgbox-confirm {
1504
- color: #26a2ff;
1505
- width: 100%;
1506
- }
1507
- /* 右侧按钮区域样式 */
1508
- #toolbarNew .toolbar .bar-right {
1509
- margin-left: 7px;
1510
- font-size: 0;
1924
+ .input-wrapper {
1511
1925
  display: flex;
1512
1926
  align-items: center;
1513
- }
1514
-
1515
- #toolbarNew .toolbar .bar-right.move-left {
1516
- right: 64px;
1517
- }
1518
-
1519
- #toolbarNew .toolbar .bar-right .bar-r-com,
1520
- #toolbarNew .toolbar .bar-right>img {
1521
- display: inline-block;
1522
- vertical-align: middle;
1523
- }
1524
-
1525
- #toolbarNew .toolbar .bar-right .bar-r-com {
1526
- margin-left: 8px;
1527
- cursor: pointer;
1528
- }
1529
-
1530
- #toolbarNew .toolbar .bar-right .bar-r-com.bar-r-gift {
1531
- width: 36px;
1532
- height: 36px;
1533
- transform-origin: center bottom;
1534
- animation: giftJump 3s ease infinite;
1535
- }
1536
-
1537
- @keyframes giftJump {
1538
- 0%, 24%, 48%, to {
1539
- transform: translateZ(0);
1540
- }
1541
- 12% {
1542
- transform: translate3d(0, -10px, 0);
1543
- }
1544
- 36% {
1545
- transform: translate3d(0, -10px, 0);
1546
- }
1547
- }
1548
-
1549
- #toolbarNew .toolbar .bar-right .bar-r-com:first-child {
1550
- margin-left: 0;
1551
- }
1552
-
1553
- #toolbarNew .toolbar .bar-right>img {
1554
- position: relative;
1555
- z-index: 1;
1556
- width: 26px;
1557
- height: 26px;
1558
- }
1559
-
1560
- #toolbarNew .toolbar .bar-right .bar-heart {
1561
- position: relative;
1562
- width: 36px;
1563
- height: 36px;
1564
- text-align: center;
1565
- }
1566
-
1567
- #toolbarNew .toolbar .bar-right .bar-heart .bar-praise {
1568
- position: absolute;
1569
- max-width: 36px;
1570
- height: 15px;
1571
- line-height: 15px;
1572
- right: 0;
1573
- top: 0;
1574
- z-index: 3;
1575
- font-size: 10px;
1576
- color: #fff;
1577
- border-radius: 6px;
1578
- padding: 0 4px;
1927
+ width: 100%;
1928
+ height: 100%;
1929
+ padding: 0 10px;
1579
1930
  box-sizing: border-box;
1580
- white-space: nowrap;
1581
- background-color: #f38200;
1582
- transform: translateX(40%);
1583
- }
1584
-
1585
- #toolbarNew .toolbar .bar-right .bar-zan {
1586
1931
  position: relative;
1587
- z-index: 2;
1588
- height: 33px;
1589
- width: 33px;
1590
- box-sizing: border-box;
1591
- }
1592
-
1593
- #toolbarNew .toolbar .bar-right .bar-zan .ani-num {
1594
- position: absolute;
1595
- top: 0;
1596
- left: 10px;
1597
- opacity: 0;
1598
- font-size: 15px;
1599
- color: #f07a87;
1600
- }
1601
-
1602
- #toolbarNew .toolbar .bar-right .bar-zan .stop-longtap {
1603
- position: absolute;
1604
- left: 0;
1605
- right: 0;
1606
- bottom: 0;
1607
- top: 0;
1608
- z-index: 1;
1609
- }
1610
-
1611
- #toolbarNew .toolbar .bar-right .bar-zan img {
1612
- width: 36px;
1613
- height: 36px;
1614
- }
1615
-
1616
- #toolbarNew .toolbar .bar-right .bar-zan.active .ani-num {
1617
- z-index: 2;
1618
- animation: praise 1.2s;
1619
- animation-fill-mode: both;
1620
- }
1621
-
1622
- @keyframes praise {
1623
- 0% {
1624
- opacity: 1;
1625
- }
1626
- 50% {
1627
- opacity: 1;
1628
- transform: translate3d(0, -35px, 0);
1629
- }
1630
- to {
1631
- opacity: 0;
1632
- transform: translate3d(0, -35px, 0);
1633
- }
1634
- }
1635
-
1636
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap {
1637
- transform: scale(0.85);
1638
- }
1639
-
1640
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:first-of-type {
1641
- animation: jump .6s ease-out;
1642
- }
1643
-
1644
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(2) {
1645
- animation: jump2 .6s ease-out;
1646
- }
1647
-
1648
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(3) {
1649
- animation: jump3 .6s ease-out;
1650
- }
1651
-
1652
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(4) {
1653
- animation: jump4 .6s ease-out;
1654
- }
1655
-
1656
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(5) {
1657
- animation: jump5 .6s ease-out;
1658
- }
1659
-
1660
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(6) {
1661
- animation: jump6 .6s ease-out;
1662
- }
1663
-
1664
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(7) {
1665
- animation: jump7 .6s ease-out;
1666
- }
1667
-
1668
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(8) {
1669
- animation: jump8 .6s ease-out;
1670
- }
1671
-
1672
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap {
1673
- position: absolute;
1674
- left: 0;
1675
- top: 0;
1676
- right: 0;
1677
- bottom: 0;
1678
- pointer-events: none;
1679
- overflow: visible;
1680
- }
1681
-
1682
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span {
1683
- position: absolute;
1684
- width: 6px;
1685
- height: 6px;
1686
- border-radius: 50%;
1687
- opacity: 0;
1688
- }
1689
-
1690
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:first-of-type {
1691
- left: 50%;
1692
- top: -8px;
1693
- transform: translate3d(-50%, 0, 0);
1694
- background-color: #b3e5c8;
1695
- }
1696
-
1697
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(2) {
1698
- left: -8px;
1699
- top: 50%;
1700
- transform: translate3d(0, -50%, 0);
1701
- background-color: #f4ba31;
1702
- }
1703
-
1704
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(3) {
1705
- left: 50%;
1706
- bottom: -8px;
1707
- transform: translate3d(-50%, 0, 0);
1708
- background-color: #339fef;
1709
- }
1710
-
1711
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(4) {
1712
- top: 50%;
1713
- right: -8px;
1714
- transform: translate3d(0, -50%, 0);
1715
- background-color: #e2264d;
1716
- }
1717
-
1718
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(5) {
1719
- left: -5px;
1720
- top: 0;
1721
- transform: translate3d(0, -50%, 0);
1722
- background-color: #a08880;
1932
+ transition: border-color 0.3s;
1723
1933
  }
1724
1934
 
1725
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(6) {
1726
- left: -5px;
1727
- bottom: 0;
1728
- transform: translate3d(0, 50%, 0);
1729
- background-color: #43c1b5;
1935
+ .required-marker {
1936
+ font-size: 12px;
1937
+ padding: 0 5px 0 0;
1938
+ color: red;
1939
+ vertical-align: middle;
1730
1940
  }
1731
1941
 
1732
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(7) {
1733
- right: -5px;
1734
- bottom: 0;
1735
- transform: translate3d(0, 50%, 0);
1736
- background-color: #f5be3b;
1942
+ input {
1943
+ flex: 1;
1944
+ border: none;
1945
+ outline: none;
1946
+ background: transparent;
1947
+ height: 100%;
1948
+ padding: 0;
1949
+ margin: 0;
1737
1950
  }
1951
+ /*
1952
+ input::placeholder {
1953
+ color: #ccc;
1954
+ opacity: 1;
1955
+ } */
1738
1956
 
1739
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(8) {
1740
- right: -5px;
1741
- top: 0;
1742
- transform: translate3d(0, -50%, 0);
1743
- background-color: coral;
1957
+ .dynamic-placeholder-input::placeholder {
1958
+ color: var(--placeholder-color, #999);
1959
+ opacity: 1;
1744
1960
  }
1745
-
1746
- @keyframes jump {
1747
- 0% {
1748
- opacity: 1;
1749
- transform: translate3d(-50%, 0, 0) scale(1);
1750
- }
1751
- 40% {
1752
- transform: translate3d(-50%, -100%, 0) scale(0.7);
1753
- }
1754
- to {
1755
- opacity: 1;
1756
- transform: translate3d(-50%, -150%, 0) scale(0);
1757
- }
1961
+ .dynamic-placeholder-input::-webkit-input-placeholder {
1962
+ color: var(--placeholder-color, #999);
1963
+ }
1964
+ .dynamic-placeholder-input::-moz-placeholder {
1965
+ color: var(--placeholder-color, #999);
1966
+ opacity: 1;
1967
+ }
1968
+ .dynamic-placeholder-input:-ms-input-placeholder {
1969
+ color: var(--placeholder-color, #999);
1970
+ }.form-submit {
1971
+ cursor: pointer;
1972
+ transition: all 0.2s;
1973
+ outline: none;
1974
+ border: none;
1975
+ }
1976
+
1977
+ .form-submit:hover {
1978
+ opacity: 0.9;
1979
+ transform: translateY(-1px);
1980
+ }
1981
+
1982
+ .form-submit:active {
1983
+ opacity: 0.8;
1984
+ transform: translateY(0);
1985
+ }
1986
+
1987
+ .form-submit:disabled {
1988
+ opacity: 0.6;
1989
+ cursor: not-allowed;
1990
+ transform: none !important;
1991
+ }
1992
+
1993
+ .f-submit {
1994
+ position: relative;
1995
+ display: block
1996
+ }
1997
+
1998
+ .f-submit .ani-wrap {
1999
+ width: 100%;
2000
+ height: 100%;
2001
+ padding: 10px;
2002
+ overflow: hidden;
2003
+ position: relative
2004
+ }
2005
+
2006
+ .f-submit .f-ovh {
2007
+ position: absolute;
2008
+ left: 50%;
2009
+ top: 50%;
2010
+ transform: translate(-50%,-50%)
2011
+ }
2012
+
2013
+ .form-submit:disabled {
2014
+ opacity: 0.7;
2015
+ cursor: not-allowed;
2016
+ }/* .ele-form {
2017
+ position: absolute;
2018
+ user-select: none;
2019
+ }
2020
+ */
2021
+ .f-single {
2022
+ cursor: pointer;
1758
2023
  }
1759
2024
 
1760
- @keyframes jump2 {
1761
- 0% {
1762
- opacity: 1;
1763
- transform: translate3d(0, -50%, 0) scale(1);
1764
- }
1765
- 40% {
1766
- transform: translate3d(-100%, -50%, 0) scale(0.7);
1767
- }
1768
- to {
1769
- opacity: 1;
1770
- transform: translate3d(-150%, -50%, 0) scale(0);
1771
- }
2025
+ .ani-wrap {
2026
+ position: relative;
1772
2027
  }
1773
2028
 
1774
- @keyframes jump3 {
1775
- 0% {
1776
- opacity: 1;
1777
- transform: translate3d(-50%, 0, 0) scale(1);
1778
- }
1779
- 40% {
1780
- transform: translate3d(-50%, 100%, 0) scale(0.7);
1781
- }
1782
- to {
1783
- opacity: 1;
1784
- transform: translate3d(-50%, 150%, 0) scale(0);
1785
- }
2029
+ .f-single .ani-wrap .fs-tit {
2030
+ display: flex;
2031
+ padding: 0 5px;
2032
+ height: 40px;
2033
+ align-items: center;
2034
+ white-space: nowrap;
2035
+ overflow: hidden;
2036
+ text-overflow: ellipsis;
2037
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
1786
2038
  }
1787
2039
 
1788
- @keyframes jump4 {
1789
- 0% {
1790
- opacity: 1;
1791
- transform: translate3d(0, -50%, 0) scale(1);
1792
- }
1793
- 40% {
1794
- transform: translate3d(100%, -50%, 0) scale(0.7);
1795
- }
1796
- to {
1797
- opacity: 1;
1798
- transform: translate3d(150%, -50%, 0) scale(0);
1799
- }
2040
+ .require {
2041
+ padding: 0 5px 0 0;
2042
+ color: red;
2043
+ vertical-align: middle;
1800
2044
  }
1801
2045
 
1802
- @keyframes jump5 {
1803
- 0% {
1804
- opacity: 1;
1805
- transform: translate3d(0, -50%, 0) scale(1);
1806
- }
1807
- 40% {
1808
- transform: translate3d(-80%, -80%, 0) scale(0.7);
1809
- }
1810
- to {
1811
- opacity: 1;
1812
- transform: translate3d(-130%, -130%, 0) scale(0);
1813
- }
2046
+ .f-single ul {
2047
+ padding: 15px;
2048
+ margin: 0;
2049
+ list-style: none;
1814
2050
  }
1815
2051
 
1816
- @keyframes jump6 {
1817
- 0% {
1818
- opacity: 1;
1819
- transform: translate3d(0, 50%, 0) scale(1);
1820
- }
1821
- 40% {
1822
- transform: translate3d(-80%, 80%, 0) scale(0.7);
1823
- }
1824
- to {
1825
- opacity: 1;
1826
- transform: translate3d(-130%, 130%, 0) scale(0);
1827
- }
2052
+ .f-single ul li {
2053
+ display: flex;
2054
+ align-items: center;
2055
+ margin-top: 12px;
2056
+ font-size: 0;
1828
2057
  }
1829
2058
 
1830
- @keyframes jump7 {
1831
- 0% {
1832
- opacity: 1;
1833
- transform: translate3d(0, 50%, 0) scale(1);
1834
- }
1835
- 40% {
1836
- transform: translate3d(80%, 80%, 0) scale(0.7);
1837
- }
1838
- to {
1839
- opacity: 1;
1840
- transform: translate3d(130%, 130%, 0) scale(0);
1841
- }
2059
+ .f-single ul li:first-child {
2060
+ margin-top: 0;
1842
2061
  }
1843
2062
 
1844
- @keyframes jump8 {
1845
- 0% {
1846
- opacity: 1;
1847
- transform: translate3d(0, 50%, 0) scale(1);
1848
- }
1849
- 40% {
1850
- transform: translate3d(80%, -80%, 0) scale(0.7);
1851
- }
1852
- to {
1853
- opacity: 1;
1854
- transform: translate3d(130%, -130%, 0) scale(0);
1855
- }
2063
+ .fs-circle {
2064
+ display: inline-block;
2065
+ width: 16px;
2066
+ height: 16px;
2067
+ border-radius: 50%;
2068
+ position: relative;
2069
+ transition: all 0.2s;
1856
2070
  }
1857
2071
 
1858
- /* 礼物弹窗样式 */
1859
- .give-gift {
1860
- position: fixed;
1861
- top: 50%;
1862
- left: 50%;
1863
- transform: translate(-50%, -50%);
1864
- z-index: 2004;
1865
- background: white;
1866
- padding: 20px;
1867
- border-radius: 10px;
1868
- text-align: center;
2072
+ .fs-circle.selected {
2073
+ background-color: #2687f1;
2074
+ border-color: #2687f1 !important;
1869
2075
  }
1870
2076
 
1871
- .give-gift .back {
2077
+ .fs-circle.selected::after {
2078
+ content: "";
1872
2079
  position: absolute;
1873
- top: 10px;
1874
- left: 10px;
1875
- cursor: pointer;
2080
+ top: 3px;
2081
+ left: 3px;
2082
+ width: 8px;
2083
+ height: 8px;
2084
+ border-radius: 50%;
2085
+ background-color: white;
1876
2086
  }
1877
2087
 
1878
- .give-gift img {
1879
- max-width: 300px;
1880
- max-height: 300px;
1881
- margin-top: 20px;
2088
+ .fs-txt {
2089
+ display: inline-block;
2090
+ width: calc(100% - 16px);
2091
+ padding-left: 8px;
2092
+ vertical-align: top;
2093
+ word-break: break-all;
2094
+ font-size: 14px;
2095
+ line-height: 1.2;
1882
2096
  }
1883
2097
 
1884
- /* 留言成功弹窗样式 */
1885
- .mess-success-popup {
2098
+ .has-error .fs-tit {
2099
+ border-bottom-color: #ff4d4f;
2100
+ }
2101
+
2102
+ /* 错误提示样式 */
2103
+ .error-tip {
1886
2104
  position: fixed;
1887
- top: 0;
1888
2105
  left: 0;
1889
- right: 0;
1890
- bottom: 0;
1891
- background-color: rgba(0, 0, 0, 0.5);
1892
- z-index: 2003;
1893
- display: flex;
1894
- justify-content: center;
1895
- align-items: center;
1896
- }
2106
+ top: 0;
2107
+ width: 100%;
2108
+ height: 100%;
2109
+ z-index: 1000;
2110
+ }/* .ele-form {
2111
+ position: absolute;
2112
+ user-select: none;
2113
+ } */
1897
2114
 
1898
- .mess-success-popup .gift-popup {
1899
- width: 300px;
1900
- height: 200px;
1901
- background: url('https://h5cdn.unika.cc/static/img/uniComponents/bg-color.png') no-repeat;
1902
- border-radius: 10px;
1903
- padding: 20px;
1904
- text-align: center;
1905
- position: relative;
2115
+ .f-select {
2116
+ cursor: pointer;
1906
2117
  }
1907
2118
 
1908
- .mess-success-popup .gift-popup .icon-cuowu2 {
1909
- position: absolute;
1910
- top: 10px;
1911
- right: 10px;
1912
- cursor: pointer;
2119
+ .ani-wrap {
2120
+ position: relative;
1913
2121
  }
1914
2122
 
1915
- .mess-success-popup .gift-popup .toast {
2123
+ .f-select .ani-wrap .fs-tit {
2124
+ position: relative;
1916
2125
  display: flex;
2126
+ padding: 0 5px;
2127
+ height: 35px;
2128
+ line-height: 35px;
1917
2129
  align-items: center;
1918
- justify-content: center;
1919
- margin: 10px 0;
1920
2130
  }
1921
2131
 
1922
- .mess-success-popup .gift-popup .toast img {
1923
- width: 20px;
1924
- height: 15px;
1925
- margin: 0 5px;
2132
+ .require {
2133
+ padding: 0 5px 0 0;
2134
+ color: red;
2135
+ vertical-align: middle;
1926
2136
  }
1927
2137
 
1928
- .mess-success-popup .gift-popup .title {
1929
- margin: 15px 0;
1930
- font-size: 16px;
1931
- color: #333;
2138
+ .fs-cont {
2139
+ padding-right: 15px;
2140
+ white-space: nowrap;
2141
+ overflow: hidden;
2142
+ text-overflow: ellipsis;
2143
+ flex-grow: 1;
1932
2144
  }
1933
2145
 
1934
- .mess-success-popup .gift-popup .btn {
1935
- background: linear-gradient(270deg, #ff4874, #ff9061);
1936
- color: white;
1937
- border: none;
1938
- padding: 10px 20px;
1939
- border-radius: 20px;
1940
- margin-top: 15px;
1941
- cursor: pointer;
2146
+ .icon-bofang1 {
2147
+ font-size: 12px;
2148
+ transition: transform 0.2s ease;
1942
2149
  }
1943
2150
 
1944
- /* 新增图片加载动画样式 */
1945
- .gift-image-container {
1946
- position: relative;
1947
- width: 300px;
1948
- height: 300px;
1949
- margin: 20px 0;
1950
- overflow: hidden;
2151
+ .rotate-180 {
2152
+ transform: rotate(180deg) !important;
1951
2153
  }
1952
2154
 
1953
- .gift-image-container img {
2155
+ .f-real {
2156
+ position: absolute;
2157
+ left: 0;
2158
+ top: 0;
1954
2159
  width: 100%;
1955
2160
  height: 100%;
1956
- object-fit: contain;
2161
+ z-index: 1;
1957
2162
  opacity: 0;
1958
- transition: opacity 0.5s ease-in-out;
2163
+ cursor: pointer;
1959
2164
  }
1960
2165
 
1961
- .gift-image-container img.loaded {
1962
- opacity: 1;
2166
+ .dropdown-menu {
2167
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
1963
2168
  }
1964
2169
 
1965
- .image-loading {
1966
- position: absolute;
1967
- top: 0;
1968
- left: 0;
1969
- width: 100%;
1970
- height: 100%;
1971
- display: flex;
1972
- justify-content: center;
1973
- align-items: center;
1974
- background: rgba(255, 255, 255, 0.8);
2170
+ .dropdown-item {
2171
+ padding: 8px 10px;
2172
+ cursor: pointer;
2173
+ transition: background-color 0.2s;
1975
2174
  }
1976
2175
 
1977
- .loading-spinner {
1978
- width: 40px;
1979
- height: 40px;
1980
- border: 4px solid #f3f3f3;
1981
- border-top: 4px solid #ed5566;
1982
- border-radius: 50%;
1983
- animation: spin 1s linear infinite;
2176
+ .dropdown-item:hover {
2177
+ background-color: #f5f5f5;
1984
2178
  }
1985
2179
 
1986
- @keyframes spin {
1987
- 0% { transform: rotate(0deg); }
1988
- 100% { transform: rotate(360deg); }
2180
+ .dropdown-item.selected {
2181
+ background-color: #e6f7ff;
2182
+ color: #1890ff;
2183
+ }
2184
+
2185
+ .f-select .fs-tit .icon-bofang1 {
2186
+ position: absolute;
2187
+ right: 10px;
2188
+ font-size: 12px;
2189
+ display: inline-block;
2190
+ transform: rotate(90deg);
2191
+ }
2192
+
2193
+ .icon-bofang1:before {
2194
+ content: "\E6CF";
2195
+ }
2196
+
2197
+ .has-error {
2198
+ border-color: #ff4d4f !important;
1989
2199
  }
1990
2200
 
1991
- body, html {
2201
+ .error-tip {
2202
+ position: fixed;
2203
+ left: 0;
2204
+ top: 0;
2205
+ width: 100%;
2206
+ height: 100%;
2207
+ z-index: 1000;
2208
+ }body, html {
1992
2209
  width: 100%;
1993
2210
  height: 100%;
1994
2211
  }
@@ -3399,283 +3616,66 @@ animation-timing-function: ease-out
3399
3616
  transform-origin: 50% 0
3400
3617
  }
3401
3618
 
3402
- 99% {
3403
- -webkit-transform: scaleY(1);
3404
- transform: scaleY(1);
3405
- -webkit-transform-origin: 50% 0;
3406
- transform-origin: 50% 0
3407
- }
3408
-
3409
- to {
3410
- -webkit-transform: none;
3411
- transform: none
3412
- }
3413
- }
3414
-
3415
- @keyframes pullDown {
3416
- 0%,40%,60%,80%,99% {
3417
- -webkit-animation-timing-function: ease-out;
3418
- animation-timing-function: ease-out
3419
- }
3420
-
3421
- 0% {
3422
- opacity: 0;
3423
- -webkit-transform: scaleY(.1);
3424
- transform: scaleY(.1);
3425
- -webkit-transform-origin: 50% 0;
3426
- transform-origin: 50% 0
3427
- }
3428
-
3429
- 40% {
3430
- opacity: 1;
3431
- -webkit-transform: scaleY(1.02);
3432
- transform: scaleY(1.02);
3433
- -webkit-transform-origin: 50% 0;
3434
- transform-origin: 50% 0
3435
- }
3436
-
3437
- 60% {
3438
- -webkit-transform: scaleY(.98);
3439
- transform: scaleY(.98);
3440
- -webkit-transform-origin: 50% 0;
3441
- transform-origin: 50% 0
3442
- }
3443
-
3444
- 80% {
3445
- -webkit-transform: scaleY(1.01);
3446
- transform: scaleY(1.01);
3447
- -webkit-transform-origin: 50% 0;
3448
- transform-origin: 50% 0
3449
- }
3450
-
3451
- 99% {
3452
- -webkit-transform: scaleY(1);
3453
- transform: scaleY(1);
3454
- -webkit-transform-origin: 50% 0;
3455
- transform-origin: 50% 0
3456
- }
3457
-
3458
- to {
3459
- -webkit-transform: none;
3460
- transform: none
3461
- }
3462
- }#page-list .tip-cover {
3463
- position: fixed;
3464
- left: 0;
3465
- top: 0;
3466
- width: 100%;
3467
- height: 100%;
3468
- display: -ms-flexbox;
3469
- display: flex;
3470
- -ms-flex-align: center;
3471
- align-items: center;
3472
- -ms-flex-pack: center;
3473
- justify-content: center;
3474
- z-index: 999;
3475
- background-color: rgba(0,0,0,.7)
3476
- }
3477
-
3478
- #page-list .tip-cover .tip {
3479
- width: 80%;
3480
- max-width: 250px;
3481
- padding: 10px;
3482
- border-radius: 5px;
3483
- background-color: #fff
3484
- }
3485
-
3486
- #page-list .tip-cover .tip-btn {
3487
- display: block;
3488
- margin: 25px auto;
3489
- width: 120px;
3490
- height: 30px;
3491
- color: #fff;
3492
- border-radius: 4px;
3493
- text-align: center;
3494
- font-size: 14px;
3495
- line-height: 30px;
3496
- background: #ed5566
3497
- }
3498
-
3499
- #page-list .tip-cover .tip-content {
3500
- font-size: 14px;
3501
- padding-top: 30px;
3502
- }
3503
-
3504
- .tip-cover {
3505
- position: fixed;
3506
- left: 0;
3507
- top: 0;
3508
- width: 100%;
3509
- height: 100%;
3510
- display: -ms-flexbox;
3511
- display: flex;
3512
- -ms-flex-align: center;
3513
- align-items: center;
3514
- -ms-flex-pack: center;
3515
- justify-content: center;
3516
- z-index: 999;
3517
- background-color: rgba(0,0,0,.7)
3619
+ 99% {
3620
+ -webkit-transform: scaleY(1);
3621
+ transform: scaleY(1);
3622
+ -webkit-transform-origin: 50% 0;
3623
+ transform-origin: 50% 0
3518
3624
  }
3519
3625
 
3520
- .tip-cover .tip {
3521
- width: 80%;
3522
- max-width: 250px;
3523
- padding: 5px;
3524
- border-radius: 3px;
3525
- background-color: #fff
3626
+ to {
3627
+ -webkit-transform: none;
3628
+ transform: none
3526
3629
  }
3527
-
3528
- .tip-cover .tip-btn {
3529
- display: block;
3530
- margin: 13px auto;
3531
- width: 64px;
3532
- height: 20px;
3533
- color: #fff;
3534
- border-radius: 4px;
3535
- text-align: center;
3536
- font-size: 14px;
3537
- line-height: 20px;
3538
- background: #ed5566;
3539
- } /* .ele-form {
3540
- position: absolute;
3541
- user-select: none;
3542
- }
3543
- */
3544
- .f-single {
3545
- cursor: pointer;
3546
- }
3547
-
3548
- .ani-wrap {
3549
- position: relative;
3550
- }
3551
-
3552
- .f-single .ani-wrap .fs-tit {
3553
- display: flex;
3554
- padding: 0 5px;
3555
- height: 40px;
3556
- align-items: center;
3557
- white-space: nowrap;
3558
- overflow: hidden;
3559
- text-overflow: ellipsis;
3560
- border-bottom: 1px solid rgba(153, 153, 153, 1);
3561
- }
3562
-
3563
- .require {
3564
- padding: 0 5px 0 0;
3565
- color: red;
3566
- vertical-align: middle;
3567
- }
3568
-
3569
- .f-single ul {
3570
- padding: 15px;
3571
- margin: 0;
3572
- list-style: none;
3573
- }
3574
-
3575
- .f-single ul li {
3576
- display: flex;
3577
- align-items: center;
3578
- margin-top: 12px;
3579
- font-size: 0;
3580
- }
3581
-
3582
- .f-single ul li:first-child {
3583
- margin-top: 0;
3584
- }
3585
-
3586
- .fs-circle {
3587
- display: inline-block;
3588
- width: 16px;
3589
- height: 16px;
3590
- border-radius: 50%;
3591
- position: relative;
3592
- transition: all 0.2s;
3593
- }
3594
-
3595
- .fs-circle.selected {
3596
- background-color: #2687f1;
3597
- border-color: #2687f1 !important;
3598
- }
3599
-
3600
- .fs-circle.selected::after {
3601
- content: "";
3602
- position: absolute;
3603
- top: 3px;
3604
- left: 3px;
3605
- width: 8px;
3606
- height: 8px;
3607
- border-radius: 50%;
3608
- background-color: white;
3609
- }
3610
-
3611
- .fs-txt {
3612
- display: inline-block;
3613
- width: calc(100% - 16px);
3614
- padding-left: 8px;
3615
- vertical-align: top;
3616
- word-break: break-all;
3617
- font-size: 14px;
3618
- line-height: 1.2;
3619
- }
3620
-
3621
- .has-error .fs-tit {
3622
- border-bottom-color: #ff4d4f;
3623
- }
3624
-
3625
- /* 错误提示样式 */
3626
- .error-tip {
3627
- position: fixed;
3628
- left: 0;
3629
- top: 0;
3630
- width: 100%;
3631
- height: 100%;
3632
- z-index: 1000;
3633
- }.form-submit {
3634
- cursor: pointer;
3635
- transition: all 0.2s;
3636
- outline: none;
3637
- border: none;
3638
3630
  }
3639
3631
 
3640
- .form-submit:hover {
3641
- opacity: 0.9;
3642
- transform: translateY(-1px);
3632
+ @keyframes pullDown {
3633
+ 0%,40%,60%,80%,99% {
3634
+ -webkit-animation-timing-function: ease-out;
3635
+ animation-timing-function: ease-out
3643
3636
  }
3644
3637
 
3645
- .form-submit:active {
3646
- opacity: 0.8;
3647
- transform: translateY(0);
3638
+ 0% {
3639
+ opacity: 0;
3640
+ -webkit-transform: scaleY(.1);
3641
+ transform: scaleY(.1);
3642
+ -webkit-transform-origin: 50% 0;
3643
+ transform-origin: 50% 0
3648
3644
  }
3649
3645
 
3650
- .form-submit:disabled {
3651
- opacity: 0.6;
3652
- cursor: not-allowed;
3653
- transform: none !important;
3646
+ 40% {
3647
+ opacity: 1;
3648
+ -webkit-transform: scaleY(1.02);
3649
+ transform: scaleY(1.02);
3650
+ -webkit-transform-origin: 50% 0;
3651
+ transform-origin: 50% 0
3654
3652
  }
3655
3653
 
3656
- .f-submit {
3657
- position: relative;
3658
- display: block
3654
+ 60% {
3655
+ -webkit-transform: scaleY(.98);
3656
+ transform: scaleY(.98);
3657
+ -webkit-transform-origin: 50% 0;
3658
+ transform-origin: 50% 0
3659
3659
  }
3660
3660
 
3661
- .f-submit .ani-wrap {
3662
- width: 100%;
3663
- height: 100%;
3664
- padding: 10px;
3665
- overflow: hidden;
3666
- position: relative
3661
+ 80% {
3662
+ -webkit-transform: scaleY(1.01);
3663
+ transform: scaleY(1.01);
3664
+ -webkit-transform-origin: 50% 0;
3665
+ transform-origin: 50% 0
3667
3666
  }
3668
3667
 
3669
- .f-submit .f-ovh {
3670
- position: absolute;
3671
- left: 50%;
3672
- top: 50%;
3673
- transform: translate(-50%,-50%)
3668
+ 99% {
3669
+ -webkit-transform: scaleY(1);
3670
+ transform: scaleY(1);
3671
+ -webkit-transform-origin: 50% 0;
3672
+ transform-origin: 50% 0
3674
3673
  }
3675
3674
 
3676
- .form-submit:disabled {
3677
- opacity: 0.7;
3678
- cursor: not-allowed;
3675
+ to {
3676
+ -webkit-transform: none;
3677
+ transform: none
3678
+ }
3679
3679
  }/* .ele-form {
3680
3680
  position: absolute;
3681
3681
  user-select: none;
@@ -3762,32 +3762,6 @@ cursor: not-allowed;
3762
3762
  .has-error .fs-tit {
3763
3763
  border-bottom-color: #ff4d4f;
3764
3764
  }
3765
- .global.video {
3766
- width: 35px;
3767
- height: 55px;
3768
- border-radius: 50%;
3769
- text-align: center;
3770
- margin-bottom: 5px;
3771
- border: 2px solid #fff;
3772
- cursor: pointer;
3773
- }
3774
- .icon-shipin2:before { content: "\E611"; }
3775
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3776
- .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
3777
- }
3778
-
3779
- .global.receipt {
3780
- width: 35px;
3781
- height: 55px;
3782
- border-radius: 50%;
3783
- text-align: center;
3784
- margin-bottom: 5px;
3785
- border: 2px solid #fff;
3786
- cursor: pointer;
3787
- }
3788
- .icon-liuyan:before { content: "\E636"; }
3789
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3790
- .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }
3791
3765
  .icon-guanbi:before {
3792
3766
  content: "\E676";
3793
3767
  }
@@ -4182,6 +4156,32 @@ cursor: not-allowed;
4182
4156
  color: #F44336; /* 失败的红色 */
4183
4157
  }
4184
4158
 
4159
+ .global.tel {
4160
+ width: 35px;
4161
+ height: 55px;
4162
+ border-radius: 50%;
4163
+ text-align: center;
4164
+ margin-bottom: 15px;
4165
+ border: 2px solid #fff;
4166
+ cursor: pointer;
4167
+ }
4168
+ .icon-dianhua:before { content: "\E60E"; }
4169
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4170
+ .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
4171
+ .global.video {
4172
+ width: 35px;
4173
+ height: 55px;
4174
+ border-radius: 50%;
4175
+ text-align: center;
4176
+ margin-bottom: 5px;
4177
+ border: 2px solid #fff;
4178
+ cursor: pointer;
4179
+ }
4180
+ .icon-shipin2:before { content: "\E611"; }
4181
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4182
+ .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
4183
+ }
4184
+
4185
4185
  .global.map {
4186
4186
  width: 35px;
4187
4187
  height: 55px;
@@ -4194,15 +4194,15 @@ cursor: not-allowed;
4194
4194
  .icon-daohang1:before { content: "\E612"; }
4195
4195
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4196
4196
  .global.map > span { font-size: 10px; line-height: 20px; display: block;}
4197
- .global.tel {
4197
+ .global.receipt {
4198
4198
  width: 35px;
4199
4199
  height: 55px;
4200
4200
  border-radius: 50%;
4201
4201
  text-align: center;
4202
- margin-bottom: 15px;
4202
+ margin-bottom: 5px;
4203
4203
  border: 2px solid #fff;
4204
4204
  cursor: pointer;
4205
4205
  }
4206
- .icon-dianhua:before { content: "\E60E"; }
4206
+ .icon-liuyan:before { content: "\E636"; }
4207
4207
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4208
- .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
4208
+ .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }