unika-components 1.1.88 → 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.
@@ -8,7 +8,235 @@
8
8
  max-height: 100%;
9
9
  width: 100%;
10
10
  }
11
- .count-down .drag-point {
11
+ .ele-img {
12
+ position: absolute;
13
+ overflow: hidden;
14
+ }
15
+
16
+ .ele-img .ani-wrap {
17
+ width: 100%;
18
+ height: 100%;
19
+ }
20
+
21
+ .ele-img .ele-image {
22
+ position: relative;
23
+ display: block;
24
+ }
25
+
26
+ .ele-img .rotate-wrap {
27
+ position: absolute;
28
+ left: 0;
29
+ right: 0;
30
+ top: 0;
31
+ bottom: 0;
32
+ }
33
+
34
+ .ele-img .ele-img-bg,
35
+ .ele-img .rotate-wrap .img-wrap {
36
+ width: 100%;
37
+ height: 100%;
38
+ overflow: hidden;
39
+ }
40
+
41
+ .ele-img .ele-bg-wrap {
42
+ width: 100%;
43
+ height: 100%;
44
+ background-size: cover;
45
+ background-position: 50% 50%;
46
+ background-repeat: no-repeat;
47
+ background-clip: border-box;
48
+ }
49
+
50
+ /* 动画关键帧 */
51
+ @keyframes zoomIn {
52
+ from {
53
+ opacity: 0;
54
+ transform: scale(0.5);
55
+ }
56
+ to {
57
+ opacity: 1;
58
+ transform: scale(1);
59
+ }
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 {
170
+ position: absolute;
171
+ right: 10px;
172
+ top: 10px;
173
+ z-index: 103;
174
+ width: 30px;
175
+ height: 30px;
176
+ display: flex;
177
+ align-items: center;
178
+ }
179
+
180
+ #audio .mrotate {
181
+ animation: mrotate 5s linear infinite;
182
+ }
183
+
184
+ @keyframes mrotate {
185
+ to {
186
+ transform: rotate(1turn);
187
+ }
188
+ }
189
+
190
+ #audio .audio {
191
+ width: 100%;
192
+ height: 100%;
193
+ display: flex;
194
+ align-items: center;
195
+ justify-content: center;
196
+ color: #fff;
197
+ background: #666;
198
+ border-radius: 50%;
199
+ overflow: hidden;
200
+ cursor: pointer;
201
+ transition: all 0.3s ease;
202
+ }
203
+
204
+ #audio .audio.a-border {
205
+ border: 1px solid #fff;
206
+ }
207
+
208
+ #audio .audio .music-icon {
209
+ display: block;
210
+ width: 60%;
211
+ height: 60%;
212
+ object-fit: contain;
213
+ }
214
+
215
+ #audio .audio .iconfont {
216
+ font-size: 2opx;
217
+ line-height: 1;
218
+ }
219
+ #audio .icon-cancel {
220
+ position: absolute;
221
+ width: 100%;
222
+ height: 100%;
223
+ border-radius: 50%;
224
+ overflow: hidden;
225
+ padding: 15px 0;
226
+ }
227
+ #audio .icon-cancel .icon-h {
228
+ transform: rotate(45deg);
229
+ width: 100%;
230
+ height: 2px;
231
+ background: #fff;
232
+ }
233
+ #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
234
+ content: '';
235
+ position: absolute;
236
+ width: 100%;
237
+ height: 2px;
238
+ background: #fff;
239
+ }.count-down .drag-point {
12
240
  cursor: default!important
13
241
  }
14
242
 
@@ -170,1644 +398,1814 @@
170
398
  align-items: center;
171
399
  white-space: nowrap
172
400
  }
173
- .ele-img {
174
- position: absolute;
175
- overflow: hidden;
401
+ /* Iconfont definition */
402
+ .icon-danmuliebiao1:before {
403
+ content: "\E68A";
176
404
  }
177
405
 
178
- .ele-img .ani-wrap {
179
- width: 100%;
180
- height: 100%;
406
+ .icon-cuowu2:before {
407
+ content: "\E65E";
181
408
  }
182
409
 
183
- .ele-img .ele-image {
184
- position: relative;
185
- display: block;
410
+ i {
411
+ font-style: normal;
186
412
  }
187
413
 
188
- .ele-img .rotate-wrap {
189
- position: absolute;
190
- left: 0;
191
- right: 0;
192
- top: 0;
193
- bottom: 0;
414
+ .v-modal {
415
+ position: fixed;
416
+ left: 0;
417
+ top: 0;
418
+ width: 100%;
419
+ height: 100%;
420
+ opacity: .5;
421
+ background: #000;
194
422
  }
195
-
196
- .ele-img .ele-img-bg,
197
- .ele-img .rotate-wrap .img-wrap {
423
+ /* 底部工具栏样式 */
424
+ #toolbarNew {
425
+ position: fixed;
426
+ left: 0;
427
+ bottom: 0;
198
428
  width: 100%;
199
- height: 100%;
200
- overflow: hidden;
429
+ padding: 12px 0;
430
+ background: url('https://h5cdn.unika.cc/static/img/uniComponents/inputBg.png') 0 0 repeat-x;
431
+ z-index: 100;
201
432
  }
202
433
 
203
- .ele-img .ele-bg-wrap {
204
- width: 100%;
205
- height: 100%;
206
- background-size: cover;
207
- background-position: 50% 50%;
208
- background-repeat: no-repeat;
209
- background-clip: border-box;
434
+ .toolbar {
435
+ display: flex;
436
+ align-items: center;
437
+ padding: 0 10px;
210
438
  }
211
439
 
212
- /* 动画关键帧 */
213
- @keyframes zoomIn {
214
- from {
215
- opacity: 0;
216
- transform: scale(0.5);
217
- }
218
- to {
219
- opacity: 1;
220
- transform: scale(1);
221
- }
222
- }
223
- .ele-text {
224
- position: relative;
225
- }
226
-
227
- .ele-text .ani-wrap {
228
- width: 100%;
229
- height: 100%;
230
- }
231
-
232
- .text-common {
233
- padding: 5px;
234
- text-orientation: upright;
235
- white-space: pre-wrap;
236
- }
237
-
238
- /* 文本动画类 */
239
- .text-fadeIn {
240
- animation: fadeIn 1s ease-in-out;
241
- }
242
-
243
- .text-slideIn {
244
- animation: slideIn 1s ease-in-out;
245
- }
246
-
247
- .text-bounceIn {
248
- animation: bounceIn 1s ease-in-out;
249
- }
250
-
251
- /* 基础动画关键帧 */
252
- @keyframes fadeIn {
253
- from {
254
- opacity: 0;
255
- }
256
- to {
257
- opacity: 1;
258
- }
259
- }
260
-
261
- @keyframes slideIn {
262
- from {
263
- transform: translateY(20px);
264
- opacity: 0;
440
+ .bar-left {
441
+ position: relative;
442
+ flex: 1;
265
443
  }
266
- to {
267
- transform: translateY(0);
268
- opacity: 1;
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);
269
456
  }
270
- }
271
-
272
- @keyframes bounceIn {
273
- 0% {
274
- transform: scale(0.3);
275
- opacity: 0;
457
+
458
+ .bar-mess::placeholder {
459
+ color: rgba(255, 255, 255, 0.7);
276
460
  }
277
- 50% {
278
- transform: scale(1.05);
279
- opacity: 0.8;
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;
280
472
  }
281
- 70% {
282
- transform: scale(0.9);
283
- opacity: 0.9;
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;
284
483
  }
285
- 100% {
286
- transform: scale(1);
287
- opacity: 1;
484
+
485
+ .toolbar-close img {
486
+ display: block;
487
+ width: 36px;
488
+ height: 36px;
489
+ cursor: pointer;
288
490
  }
289
- }
290
- .ele-lottie .ele-lotwrap {
491
+
492
+ /* 弹幕容器样式 */
493
+ .bullet-container {
494
+ position: fixed;
495
+ left: 10px;
496
+ right: 10px;
497
+ height: 120px;
291
498
  overflow: hidden;
292
- }.ele-shape {
293
- position: absolute;
294
- overflow: hidden;
295
- }
296
-
297
- .ani-wrap {
298
- width: 100%;
299
- height: 100%;
300
- box-sizing: border-box;
301
- }
302
-
303
- .e-shape {
304
- width: 100%;
305
- height: 100%;
306
- }
307
-
308
- .svg-container :deep(svg) {
309
- width: 100%;
310
- height: 100%;
311
- display: block;
312
- }
313
-
314
- .svg-loading,
315
- .svg-error {
316
- display: flex;
317
- align-items: center;
318
- justify-content: center;
319
- width: 100%;
320
- height: 100%;
321
- background: rgba(0,0,0,0.05);
322
- }
323
- .element-video {
499
+ z-index: 99;
500
+ pointer-events: none;
501
+ }
502
+
503
+ .bullet-item {
324
504
  position: absolute;
325
- overflow: hidden;
326
- background-color: transparent;
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%;
327
516
  }
328
517
 
329
- .element-video .ani-wrap, .element-video img {
330
- display: block;
331
- width: 100%;
332
- height: 100%;
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
+ }
333
527
  }
334
528
 
335
- .video-container {
336
- width: 100%;
337
- height: 100%;
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;
338
541
  }
339
542
 
340
- .video-container iframe {
341
- width: 100%;
342
- height: 100%;
343
- border: none;
543
+ #index .mint-popup {
544
+ background-color: transparent;
344
545
  }
345
546
 
346
- .video-cover {
347
- position: relative;
348
- width: 100%;
349
- height: 100%;
350
- background-size: cover;
351
- background-position: center;
352
- cursor: pointer;
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;
353
556
  }
354
557
 
355
- .video-cover .play-btn {
356
- position: absolute;
357
- left: 50%;
358
- top: 50%;
359
- transform: translate(-50%, -50%);
360
- width: 50px;
361
- height: 50px;
362
- opacity: 0.8;
363
- transition: opacity 0.2s;
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;
364
568
  }
365
569
 
366
- .video-cover:hover .play-btn {
367
- opacity: 1;
368
- }#audio {
369
- position: absolute;
370
- right: 10px;
371
- top: 10px;
372
- z-index: 103;
373
- width: 30px;
374
- height: 30px;
375
- display: flex;
376
- align-items: center;
377
- }
378
-
379
- #audio .mrotate {
380
- animation: mrotate 5s linear infinite;
381
- }
382
-
383
- @keyframes mrotate {
384
- to {
385
- transform: rotate(1turn);
570
+ .bar-messwin .mess-logo {
571
+ width: 171px;
572
+ height: 110px;
573
+ margin-top: -64px;
574
+ margin-left: 11px;
386
575
  }
387
- }
388
-
389
- #audio .audio {
390
- width: 100%;
391
- height: 100%;
392
- display: flex;
393
- align-items: center;
394
- justify-content: center;
395
- color: #fff;
396
- background: #666;
397
- border-radius: 50%;
398
- overflow: hidden;
399
- cursor: pointer;
400
- transition: all 0.3s ease;
401
- }
402
-
403
- #audio .audio.a-border {
404
- border: 1px solid #fff;
405
- }
406
-
407
- #audio .audio .music-icon {
408
- display: block;
409
- width: 60%;
410
- height: 60%;
411
- object-fit: contain;
412
- }
413
-
414
- #audio .audio .iconfont {
415
- font-size: 2opx;
416
- line-height: 1;
417
- }
418
- #audio .icon-cancel {
419
- position: absolute;
420
- width: 100%;
421
- height: 100%;
422
- border-radius: 50%;
423
- overflow: hidden;
424
- padding: 15px 0;
425
- }
426
- #audio .icon-cancel .icon-h {
427
- transform: rotate(45deg);
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 {
428
598
  width: 100%;
429
- height: 2px;
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;
430
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;
431
631
  }
432
- #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
433
- content: '';
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 {
434
664
  position: absolute;
435
- width: 100%;
436
- height: 2px;
665
+ top: 43px;
666
+ right: 0;
667
+ width: 267px;
437
668
  background: #fff;
438
- }.element-ditu .ani-wrap {
439
- width: 100%;
440
- height: 100%;
441
- overflow: hidden
442
- }
443
-
444
- .element-ditu .map {
445
- width: 100%;
446
- height: 100%
447
- }
448
-
449
- .element-ditu .map .el-button {
450
- width: 100%;
451
- height: 100%;
452
- display: -webkit-box;
453
- display: -ms-flexbox;
454
- display: flex;
455
- -webkit-box-align: center;
456
- -ms-flex-align: center;
457
- align-items: center;
458
- padding: 0;
459
- -webkit-box-pack: center;
460
- -ms-flex-pack: center;
461
- justify-content: center;
462
- background: inherit;
463
- color: inherit;
464
- border: none
465
- }
466
-
467
- .element-ditu .center-map {
468
- width: 100%;
469
- height: 100%;
470
- background: #fff
471
- }
472
-
473
- .element-ditu .mask-map {
474
- position: absolute;
475
- width: 100%;
476
- height: 100%;
477
- top: 0
478
- }
479
- .map-iframe {
480
- width: 100%;
481
- height: 100%;
482
- }
483
- @keyframes jumpheart {
484
- to {
485
- -webkit-transform: scale(1.2);
486
- transform: scale(1.2)
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;
487
676
  }
488
- }
489
- .ele-calendar {
490
- position: relative;
491
- width: 325px !important;
492
- min-height: 325px !important;
493
- height: auto !important;
494
- }
495
-
496
- .ele-calendar .drag-point {
497
- cursor: default !important;
498
- }
499
-
500
- .ele-calendar .ani-wrap {
501
- position: relative;
502
- width: 100%;
503
- min-height: 325px !important;
504
- height: auto !important;
505
- padding: 22px 0;
506
- }
507
-
508
- .ele-calendar .ani-wrap .can-wrap .can-top {
509
- display: flex;
510
- justify-content: space-between;
511
- align-items: flex-end;
512
- line-height: 1;
513
- padding: 0 47px 20px;
514
- }
515
-
516
- .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
517
- font-size: 25px;
518
- padding-bottom: 4px;
519
- }
520
-
521
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
522
- font-size: 25px;
523
- }
524
-
525
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
526
- position: relative;
527
- top: 2px;
528
- font-size: 57px;
529
- }
530
-
531
- .ele-calendar .ani-wrap .can-wrap .can-main {
532
- padding: 0 23px;
533
- }
534
-
535
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
536
- display: flex;
537
- justify-content: flex-start;
538
- height: 25px;
539
- line-height: 25px;
540
- padding: 0 10px;
541
- border-radius: 13px;
542
- }
543
-
544
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week span {
545
- width: 14.2%;
546
- text-align: center;
547
- color: #fff;
548
- font-size: 12px;
549
- }
550
-
551
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul {
552
- font-size: 0;
553
- padding: 5px 10px 0;
554
- text-align: left;
555
- }
556
-
557
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li {
558
- position: relative;
559
- display: inline-block;
560
- height: 25px;
561
- text-align: center;
562
- margin-top: 8px;
563
- }
564
-
565
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active .iconfont {
566
- display: block;
567
- }
568
-
569
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active span {
570
- color: #fff !important;
571
- }
572
-
573
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
574
- animation: jumpheart 0.8s ease infinite alternate;
575
- }
576
-
577
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
578
- display: none;
579
- font-size: 26px;
580
- }
581
-
582
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li span {
583
- position: absolute;
584
- left: 50%;
585
- top: 50%;
586
- z-index: 1;
587
- color: #666;
588
- font-size: 13px;
589
- transform: translate(-50%, -52%);
590
- }
591
-
592
- .ele-calendar .bottom-center,
593
- .ele-calendar .left-center,
594
- .ele-calendar .right-center,
595
- .ele-calendar .top-center {
596
- display: none !important;
597
- }
598
-
599
- .ele-calendar .ani-wrap .can-wrap2 {
600
- padding: 21px 23px 0
601
- }
602
-
603
- .ele-calendar .ani-wrap .can-wrap2 .can-top {
604
- display: -webkit-box;
605
- display: -ms-flexbox;
606
- display: flex;
607
- -webkit-box-pack: justify;
608
- -ms-flex-pack: justify;
609
- justify-content: space-between;
610
- -webkit-box-align: end;
611
- -ms-flex-align: end;
612
- align-items: flex-end;
613
- line-height: 1;
614
- padding: 0 16px 22px;
615
- font-size: 36px
616
- }
617
-
618
- .ele-calendar .ani-wrap .can-wrap2 .can-top span {
619
- font-size: 16px
620
- }
621
-
622
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week {
623
- display: -webkit-box;
624
- display: -ms-flexbox;
625
- display: flex;
626
- -webkit-box-pack: start;
627
- -ms-flex-pack: start;
628
- justify-content: flex-start;
629
- height: 25px;
630
- line-height: 25px;
631
- padding: 0 10px;
632
- border-radius: 13px
633
- }
634
-
635
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week span {
636
- width: 14.2%;
637
- text-align: center;
638
- color: #fff;
639
- font-size: 12px;
640
- font-weight: 600
641
- }
642
-
643
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date {
644
- position: relative
645
- }
646
-
647
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date .can-year {
648
- position: absolute;
649
- white-space: nowrap;
650
- left: 50%;
651
- top: 15%;
652
- -webkit-transform: translateX(-50%);
653
- transform: translateX(-50%);
654
- font-size: 76px;
655
- opacity: .1;
656
- font-weight: 600
657
- }
658
-
659
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul {
660
- font-size: 0;
661
- padding: 5px 10px 0;
662
- text-align: left
663
- }
664
-
665
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li {
666
- position: relative;
667
- display: inline-block;
668
- width: 14.2%;
669
- height: 25px;
670
- text-align: center;
671
- margin-top: 8px
672
- }
673
-
674
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active .iconfont {
675
- display: block;
676
- position: absolute;
677
- left: 17%;
678
- top: 0;
679
- font-size: 25px
680
- }
681
-
682
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active span {
683
- color: #fff!important
684
- }
685
-
686
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.heart-ani .iconfont {
687
- -webkit-animation: jumpheart .8s ease infinite alternate;
688
- animation: jumpheart .8s ease infinite alternate
689
- }
690
-
691
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li .iconfont {
692
- display: none;
693
- font-size: 26px
694
- }
695
-
696
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li span {
697
- position: absolute;
698
- left: 50%;
699
- top: 50%;
700
- z-index: 1;
701
- color: #666;
702
- font-size: 13px;
703
- -webkit-transform: translate(-50%,-52%);
704
- transform: translate(-50%,-52%)
705
- }
706
-
707
- .ele-calendar .ani-wrap .can-wrap3 .can-top {
708
- display: -webkit-box;
709
- display: -ms-flexbox;
710
- display: flex;
711
- -webkit-box-pack: justify;
712
- -ms-flex-pack: justify;
713
- justify-content: space-between;
714
- -webkit-box-align: end;
715
- -ms-flex-align: end;
716
- align-items: flex-end;
717
- line-height: 1;
718
- padding: 18px 33px 10px;
719
- font-size: 36px;
720
- }
721
-
722
- .ele-calendar .ani-wrap .can-wrap3 .can-top span {
723
- font-size: 16px
724
- }
725
-
726
- .ele-calendar .ani-wrap .can-wrap3 .can-top .can-year {
727
- font-size: 20px
728
- }
729
-
730
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week {
731
- display: -webkit-box;
732
- display: -ms-flexbox;
733
- display: flex;
734
- -webkit-box-pack: start;
735
- -ms-flex-pack: start;
736
- justify-content: flex-start;
737
- height: 40px;
738
- line-height: 40px;
739
- padding: 0 34px;
740
- border-bottom: 1px solid
741
- }
742
-
743
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week span {
744
- width: 14.2%;
745
- text-align: center;
746
- color: #fff;
747
- font-size: 12px;
748
- font-weight: 600
749
- }
750
-
751
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date {
752
- position: relative
753
- }
754
-
755
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul {
756
- font-size: 0;
757
- padding: 5px 33px 0;
758
- text-align: left
759
- }
760
-
761
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li {
762
- position: relative;
763
- display: inline-block;
764
- width: 14.2%;
765
- height: 25px;
766
- text-align: center;
767
- margin-top: 8px;
768
- }
769
-
770
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active {
771
- color: #eee
772
- }
773
-
774
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active .iconfont {
775
- display: block;
776
- position: absolute;
777
- left: 12%;
778
- top: 2px;
779
- }
780
-
781
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active span {
782
- font-size: 12px
783
- }
784
-
785
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.heart-ani .iconfont {
786
- -webkit-animation: jumpheart .8s ease infinite alternate;
787
- animation: jumpheart .8s ease infinite alternate
788
- }
789
-
790
- @keyframes jumpheart {
791
- to {
792
- -webkit-transform: scale(1.2);
793
- transform: scale(1.2)
794
- }
795
- }
796
-
797
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li .iconfont {
798
- display: none;
799
- font-size: 26px
800
- }
801
-
802
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li span {
803
- position: absolute;
804
- left: 50%;
805
- top: 50%;
806
- z-index: 1;
807
- color: #666;
808
- font-size: 13px;
809
- -webkit-transform: translate(-50%,-52%);
810
- transform: translate(-50%,-52%)
811
- }
812
-
813
- .ele-calendar .bottom-center,.ele-calendar .left-center,.ele-calendar .right-center,.ele-calendar .top-center {
814
- display: none!important
815
- }
816
- .icon-tuoyuanxing:before {
817
- content: "\E6A7";
818
- }
819
- .icon-zan1:before {
820
- content: "\E66D";
821
- }
822
- .icon-xingzhuangjiehe:before {
823
- content: "\E6A6";
824
- }.ele-effect {
825
- will-change: transform;
826
- }
827
-
828
- .ele-effect .effect-wrap {
829
- position: relative;
830
- width: 100%;
831
- height: 100%;
832
- }
833
-
834
- .particle {
835
- position: absolute;
836
- background-repeat: no-repeat;
837
- background-size: contain;
838
- animation-name: falling;
839
- animation-timing-function: linear;
840
- animation-iteration-count: infinite;
841
- will-change: transform;
842
- }
843
-
844
- @keyframes falling {
845
- 0% {
846
- transform: translateY(0) rotate(0deg);
847
- opacity: 1;
677
+
678
+ .bar-messwin .mess-textarea .wish-dropdown::-webkit-scrollbar {
679
+ width: 3px;
680
+ background-color: transparent;
681
+ display: block;
848
682
  }
849
- 80% {
850
- opacity: 0.8;
683
+
684
+ .bar-messwin .mess-textarea .wish-dropdown::-webkit-scrollbar-thumb {
685
+ background-color: #ccc;
686
+ border-radius: 9px;
687
+ min-height: 32px;
851
688
  }
852
- 100% {
853
- transform: translateY(100vh) rotate(360deg);
854
- opacity: 0;
689
+
690
+ .bar-messwin .mess-textarea .wish-dropdown::-webkit-scrollbar-track {
691
+ background-color: transparent;
692
+ border-radius: 3px;
693
+ margin: 4px 0;
855
694
  }
856
- }
857
- .ele-lottie .ele-lotwrap {
858
- overflow: hidden
859
- }
860
-
861
- .ele-effect .effect-wrap {
862
- position: relative;
863
- overflow: hidden;
864
- width: 100%;
865
- height: 100%
866
- }
867
-
868
- .ele-effect .e-small {
869
- position: absolute;
870
- width: 24px;
871
- height: 24px;
872
- background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
873
- background-size: cover;
874
- background-repeat: no-repeat;
875
- -webkit-transform-origin: center;
876
- transform-origin: center;
877
- -webkit-animation: snow 5s linear infinite;
878
- animation: snow 5s linear infinite
879
- }.button {
880
- position: absolute;
881
- cursor: pointer;
882
- user-select: none;
883
- }
884
695
 
885
- .button .ani-wrap {
886
- display: flex;
887
- justify-content: center;
888
- align-items: center;
889
- width: 100%;
890
- height: 100%;
891
- overflow: hidden;
892
- transition: opacity 0.2s;
893
- }
696
+ .bar-messwin .mess-textarea .wish-dropdown .wish-item {
697
+ padding: 11px 0;
698
+ display: flex;
699
+ align-items: flex-start;
700
+ cursor: pointer;
701
+ transition: background-color 0.2s;
702
+ border-bottom: 1px solid rgba(0,0,0,0.05);
703
+ }
894
704
 
895
- .button .ani-wrap:hover {
896
- opacity: 0.9;
897
- }
898
-
899
- .button-content {
900
- display: flex;
901
- align-items: center;
902
- justify-content: center;
903
- }
904
-
905
- .btn-text {
906
- margin-left: 10px;
907
- }/* Iconfont definition */
908
- .icon-danmuliebiao1:before {
909
- content: "\E68A";
705
+ .bar-messwin .mess-textarea .wish-dropdown .wish-item:last-child {
706
+ border-bottom: none;
910
707
  }
911
708
 
912
- .icon-cuowu2:before {
913
- content: "\E65E";
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;
914
714
  }
915
715
 
916
- i {
917
- font-style: normal;
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;
918
721
  }
919
722
 
920
- .v-modal {
921
- position: fixed;
922
- left: 0;
923
- top: 0;
924
- width: 100%;
925
- height: 100%;
926
- opacity: .5;
927
- background: #000;
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;
928
739
  }
929
- /* 底部工具栏样式 */
930
- #toolbarNew {
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;
748
+ cursor: pointer;
749
+ }
750
+
751
+ /* 提示弹窗样式 */
752
+ .mint-msgbox-wrapper {
931
753
  position: fixed;
754
+ top: 0;
932
755
  left: 0;
756
+ right: 0;
933
757
  bottom: 0;
934
- width: 100%;
935
- padding: 12px 0;
936
- background: url('https://h5cdn.unika.cc/static/img/uniComponents/inputBg.png') 0 0 repeat-x;
937
- z-index: 100;
938
- }
939
-
940
- .toolbar {
758
+ background-color: rgba(0,0,0,0.5);
759
+ z-index: 2005;
941
760
  display: flex;
761
+ justify-content: center;
942
762
  align-items: center;
943
- padding: 0 10px;
944
763
  }
945
764
 
946
- .bar-left {
765
+ .mint-msgbox {
766
+ position: relative;
767
+ background-color: #fff;
768
+ width: 85%;
769
+ border-radius: 3px;
770
+ font-size: 17px;
771
+ overflow: hidden;
772
+ }
773
+
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;
947
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;
948
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;
824
+ display: flex;
825
+ align-items: center;
826
+ }
827
+
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;
835
+ vertical-align: middle;
836
+ }
837
+
838
+ #toolbarNew .toolbar .bar-right .bar-r-com {
839
+ margin-left: 8px;
840
+ cursor: pointer;
949
841
  }
950
842
 
951
- .bar-mess {
952
- width: 100%;
843
+ #toolbarNew .toolbar .bar-right .bar-r-com.bar-r-gift {
844
+ width: 36px;
953
845
  height: 36px;
954
- line-height: 36px;
955
- font-size: 14px;
956
- color: #ccc;
957
- padding: 0 8px;
958
- border-radius: 18px;
959
- border: none;
960
- -webkit-appearance: none;
961
- background-color: rgba(0, 0, 0, 0.28);
846
+ transform-origin: center bottom;
847
+ animation: giftJump 3s ease infinite;
962
848
  }
963
849
 
964
- .bar-mess::placeholder {
965
- color: rgba(255, 255, 255, 0.7);
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
+ }
966
860
  }
967
861
 
968
- .bar-left .iconfont {
969
- position: absolute;
970
- right: 10px;
971
- top: 50%;
972
- transform: translateY(-50%);
973
- color: #f2f2f2;
974
- font-size: 16px;
975
- cursor: pointer;
976
- z-index: 2;
977
- padding: 5px;
862
+ #toolbarNew .toolbar .bar-right .bar-r-com:first-child {
863
+ margin-left: 0;
978
864
  }
979
865
 
980
- /* 关闭弹幕按钮样式 */
981
- .toolbar-close {
982
- position: absolute;
983
- left: 10px;
984
- transform: translateY(-50%);
985
- display: flex;
986
- align-items: center;
987
- cursor: pointer;
988
- z-index: 2;
866
+ #toolbarNew .toolbar .bar-right>img {
867
+ position: relative;
868
+ z-index: 1;
869
+ width: 26px;
870
+ height: 26px;
989
871
  }
990
872
 
991
- .toolbar-close img {
992
- display: block;
873
+ #toolbarNew .toolbar .bar-right .bar-heart {
874
+ position: relative;
993
875
  width: 36px;
994
876
  height: 36px;
995
- cursor: pointer;
996
- }
997
-
998
- /* 弹幕容器样式 */
999
- .bullet-container {
1000
- position: fixed;
1001
- left: 10px;
1002
- right: 10px;
1003
- height: 120px;
1004
- overflow: hidden;
1005
- z-index: 99;
1006
- pointer-events: none;
877
+ text-align: center;
1007
878
  }
1008
879
 
1009
- .bullet-item {
880
+ #toolbarNew .toolbar .bar-right .bar-heart .bar-praise {
1010
881
  position: absolute;
1011
- left: 0;
1012
- bottom: 0;
1013
- padding: 5px 10px;
1014
- border-radius: 15px;
1015
- font-size: 14px;
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;
1016
893
  white-space: nowrap;
1017
- animation: bulletMove linear;
1018
- animation-fill-mode: forwards;
1019
- will-change: transform;
1020
- display: inline-block;
1021
- max-width: 90%;
894
+ background-color: #f38200;
895
+ transform: translateX(40%);
1022
896
  }
1023
897
 
1024
- @keyframes bulletMove {
1025
- 0% {
1026
- transform: translateY(0);
1027
- opacity: 1;
1028
- }
1029
- 100% {
1030
- transform: translateY(calc(-1 * 150px));
1031
- opacity: 0;
1032
- }
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;
1033
904
  }
1034
905
 
1035
- /* 弹幕输入弹窗样式 */
1036
- .popup-overlay {
1037
- position: fixed;
906
+ #toolbarNew .toolbar .bar-right .bar-zan .ani-num {
907
+ position: absolute;
1038
908
  top: 0;
909
+ left: 10px;
910
+ opacity: 0;
911
+ font-size: 15px;
912
+ color: #f07a87;
913
+ }
914
+
915
+ #toolbarNew .toolbar .bar-right .bar-zan .stop-longtap {
916
+ position: absolute;
1039
917
  left: 0;
1040
918
  right: 0;
1041
919
  bottom: 0;
1042
- background: rgba(0, 0, 0, 0.5);
1043
- display: flex;
1044
- justify-content: center;
1045
- align-items: flex-end;
1046
- z-index: 200;
1047
- }
1048
-
1049
- #index .mint-popup {
1050
- background-color: transparent;
920
+ top: 0;
921
+ z-index: 1;
1051
922
  }
1052
923
 
1053
- .mint-popup {
1054
- position: fixed;
1055
- background: #fff;
1056
- top: 50%;
1057
- left: 50%;
1058
- transform: translate3d(-50%, -50%, 0);
1059
- -webkit-backface-visibility: hidden;
1060
- backface-visibility: hidden;
1061
- transition: .2s ease-out;
924
+ #toolbarNew .toolbar .bar-right .bar-zan img {
925
+ width: 36px;
926
+ height: 36px;
1062
927
  }
1063
928
 
1064
- .bar-messwin {
1065
- width: 309px;
1066
- height: 341px;
1067
- background: url('https://h5cdn.unika.cc/static/img/uniComponents/mess-bg.png') no-repeat 50%;
1068
- background-size: 100% 100%;
1069
- position: relative;
1070
- display: flex;
1071
- flex-direction: column;
1072
- align-items: center;
1073
- margin-bottom: 20px;
929
+ #toolbarNew .toolbar .bar-right .bar-zan.active .ani-num {
930
+ z-index: 2;
931
+ animation: praise 1.2s;
932
+ animation-fill-mode: both;
1074
933
  }
1075
934
 
1076
- .bar-messwin .mess-logo {
1077
- width: 171px;
1078
- height: 110px;
1079
- margin-top: -64px;
1080
- margin-left: 11px;
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
+ }
1081
947
  }
1082
948
 
1083
- .bar-messwin .mess-title {
1084
- margin-top: 12px;
1085
- font-weight: 600;
1086
- font-size: 21px;
1087
- color: #333;
949
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap {
950
+ transform: scale(0.85);
1088
951
  }
1089
952
 
1090
- .bar-messwin .mess-input {
1091
- width: 267px;
1092
- height: 43px;
1093
- background: #fff;
1094
- border-radius: 9px;
1095
- border: 1px solid rgba(237,85,102,0.4);
1096
- margin-top: 12px;
1097
- display: flex;
1098
- align-items: center;
1099
- justify-content: center;
1100
- padding: 0 13px;
953
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:first-of-type {
954
+ animation: jump .6s ease-out;
1101
955
  }
1102
956
 
1103
- .bar-messwin .mess-input input {
1104
- width: 100%;
1105
- font-size: 17px;
1106
- font-family: PingFang SC;
1107
- font-weight: 400;
1108
- color: #333;
1109
- border: none;
1110
- outline: none;
1111
- background: transparent;
957
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(2) {
958
+ animation: jump2 .6s ease-out;
1112
959
  }
1113
960
 
1114
- .bar-messwin .mess-input input::-webkit-input-placeholder {
1115
- color: #999;
961
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(3) {
962
+ animation: jump3 .6s ease-out;
1116
963
  }
1117
964
 
1118
- .bar-messwin .mess-input input::-ms-input-placeholder {
1119
- color: #999;
965
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(4) {
966
+ animation: jump4 .6s ease-out;
1120
967
  }
1121
968
 
1122
- .bar-messwin .mess-input input::placeholder {
1123
- color: #999;
969
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(5) {
970
+ animation: jump5 .6s ease-out;
1124
971
  }
1125
972
 
1126
- .bar-messwin .mess-textarea {
1127
- width: 267px;
1128
- height: 85px;
1129
- background: #fff;
1130
- border-radius: 9px;
1131
- border: 1px solid rgba(237,85,102,0.4);
1132
- display: flex;
1133
- padding: 9px 13px;
1134
- justify-content: space-between;
1135
- margin-top: 12px;
1136
- position: relative;
973
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(6) {
974
+ animation: jump6 .6s ease-out;
1137
975
  }
1138
976
 
1139
- .bar-messwin .mess-textarea textarea {
1140
- width: 203px;
1141
- height: 68px;
1142
- font-size: 17px;
1143
- resize: none;
1144
- outline: none;
1145
- border: none;
1146
- background: transparent;
1147
- color: #333;
1148
- font-family: PingFang SC;
977
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(7) {
978
+ animation: jump7 .6s ease-out;
1149
979
  }
1150
980
 
1151
- .bar-messwin .mess-textarea textarea::-webkit-input-placeholder {
1152
- color: #999;
981
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(8) {
982
+ animation: jump8 .6s ease-out;
1153
983
  }
1154
984
 
1155
- .bar-messwin .mess-textarea textarea::-ms-input-placeholder {
1156
- color: #999;
985
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap {
986
+ position: absolute;
987
+ left: 0;
988
+ top: 0;
989
+ right: 0;
990
+ bottom: 0;
991
+ pointer-events: none;
992
+ overflow: visible;
1157
993
  }
1158
994
 
1159
- .bar-messwin .mess-textarea textarea::placeholder {
1160
- color: #999;
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;
1161
1001
  }
1162
1002
 
1163
- .bar-messwin .mess-textarea img {
1164
- width: 26px;
1165
- height: 26px;
1166
- cursor: pointer;
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;
1167
1008
  }
1168
1009
 
1169
- .bar-messwin .mess-textarea .wish-dropdown {
1170
- position: absolute;
1171
- top: 43px;
1172
- right: 0;
1173
- width: 267px;
1174
- background: #fff;
1175
- border-radius: 9px;
1176
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
1177
- z-index: 10;
1178
- max-height: 213px;
1179
- overflow-y: auto;
1180
- border: 1px solid rgba(237,85,102,0.2);
1181
- padding: 0 13px;
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;
1182
1015
  }
1183
1016
 
1184
- .bar-messwin .mess-textarea .wish-dropdown::-webkit-scrollbar {
1185
- width: 3px;
1186
- background-color: transparent;
1187
- display: block;
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;
1188
1022
  }
1189
1023
 
1190
- .bar-messwin .mess-textarea .wish-dropdown::-webkit-scrollbar-thumb {
1191
- background-color: #ccc;
1192
- border-radius: 9px;
1193
- min-height: 32px;
1024
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(4) {
1025
+ top: 50%;
1026
+ right: -8px;
1027
+ transform: translate3d(0, -50%, 0);
1028
+ background-color: #e2264d;
1194
1029
  }
1195
1030
 
1196
- .bar-messwin .mess-textarea .wish-dropdown::-webkit-scrollbar-track {
1197
- background-color: transparent;
1198
- border-radius: 3px;
1199
- margin: 4px 0;
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;
1200
1036
  }
1201
1037
 
1202
- .bar-messwin .mess-textarea .wish-dropdown .wish-item {
1203
- padding: 11px 0;
1204
- display: flex;
1205
- align-items: flex-start;
1206
- cursor: pointer;
1207
- transition: background-color 0.2s;
1208
- border-bottom: 1px solid rgba(0,0,0,0.05);
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;
1209
1043
  }
1210
1044
 
1211
- .bar-messwin .mess-textarea .wish-dropdown .wish-item:last-child {
1212
- border-bottom: 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;
1213
1050
  }
1214
1051
 
1215
- .bar-messwin .mess-textarea .wish-dropdown .wish-item .wish-dot {
1216
- color: #ff4874;
1217
- margin-right: 5px;
1218
- font-size: 11px;
1219
- line-height: 21px;
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;
1220
1057
  }
1221
1058
 
1222
- .bar-messwin .mess-textarea .wish-dropdown .wish-item .wish-text {
1223
- font-size: 15px;
1224
- color: #333;
1225
- line-height: 21px;
1226
- text-align: left;
1059
+ @keyframes jump {
1060
+ 0% {
1061
+ opacity: 1;
1062
+ transform: translate3d(-50%, 0, 0) scale(1);
1063
+ }
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);
1070
+ }
1227
1071
  }
1228
1072
 
1229
- .bar-messwin .bar-m-sub {
1230
- width: 267px;
1231
- height: 43px;
1232
- background: linear-gradient(270deg,#ff4874,#ff9061);
1233
- border-radius: 68px;
1234
- font-size: 17px;
1235
- font-family: PingFang SC;
1236
- font-weight: 400;
1237
- color: #fff;
1238
- margin-top: 26px;
1239
- border: none;
1240
- outline: none;
1241
- cursor: pointer;
1242
- display: flex;
1243
- align-items: center;
1244
- justify-content: center;
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
+ }
1245
1085
  }
1246
1086
 
1247
- .bar-messwin .icon-cuowu2, .give-gift .icon-cuowu2 {
1248
- position: absolute;
1249
- bottom: -60px;
1250
- right: 50%;
1251
- transform: translateX(50%);
1252
- font-size: 28px;
1253
- color: #fff;
1254
- cursor: pointer;
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
+ }
1255
1099
  }
1256
1100
 
1257
- /* 提示弹窗样式 */
1258
- .mint-msgbox-wrapper {
1259
- position: fixed;
1260
- top: 0;
1261
- left: 0;
1262
- right: 0;
1263
- bottom: 0;
1264
- background-color: rgba(0,0,0,0.5);
1265
- z-index: 2005;
1266
- display: flex;
1267
- justify-content: center;
1268
- align-items: center;
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
+ }
1269
1113
  }
1270
1114
 
1271
- .mint-msgbox {
1272
- position: relative;
1273
- background-color: #fff;
1274
- width: 85%;
1275
- border-radius: 3px;
1276
- font-size: 17px;
1277
- overflow: hidden;
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
+ }
1278
1127
  }
1279
1128
 
1280
- .mint-msgbox-header {
1281
- padding: 16px 0 0;
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
+ }
1282
1141
  }
1283
1142
 
1284
- .mint-msgbox-content {
1285
- padding: 11px 21px 16px;
1286
- border-bottom: 1px solid #ddd;
1287
- min-height: 38px;
1288
- position: relative;
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
+ }
1289
1155
  }
1290
1156
 
1291
- .mint-msgbox-title {
1292
- text-align: center;
1293
- padding-left: 0;
1294
- margin-bottom: 0;
1295
- font-size: 17px;
1296
- font-weight: 700;
1297
- color: #333;
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
+ }
1298
1169
  }
1299
1170
 
1300
- .mint-msgbox-message {
1301
- color: #999;
1302
- margin: 0;
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;
1303
1181
  text-align: center;
1304
- line-height: 38px;
1305
1182
  }
1306
1183
 
1307
- .mint-msgbox-btns {
1308
- display: flex;
1309
- height: 43px;
1310
- line-height: 43px;
1184
+ .give-gift .back {
1185
+ position: absolute;
1186
+ top: 10px;
1187
+ left: 10px;
1188
+ cursor: pointer;
1311
1189
  }
1312
1190
 
1313
- .mint-msgbox-btn {
1314
- line-height: 37px;
1315
- display: block;
1316
- background-color: #fff;
1317
- flex: 1;
1318
- margin: 0;
1319
- border: 0;
1191
+ .give-gift img {
1192
+ max-width: 300px;
1193
+ max-height: 300px;
1194
+ margin-top: 20px;
1320
1195
  }
1321
1196
 
1322
- .mint-msgbox-confirm {
1323
- color: #26a2ff;
1324
- width: 100%;
1325
- }
1326
- /* 右侧按钮区域样式 */
1327
- #toolbarNew .toolbar .bar-right {
1328
- margin-left: 7px;
1329
- font-size: 0;
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;
1330
1206
  display: flex;
1207
+ justify-content: center;
1331
1208
  align-items: center;
1332
1209
  }
1333
1210
 
1334
- #toolbarNew .toolbar .bar-right.move-left {
1335
- right: 64px;
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;
1218
+ position: relative;
1336
1219
  }
1337
1220
 
1338
- #toolbarNew .toolbar .bar-right .bar-r-com,
1339
- #toolbarNew .toolbar .bar-right>img {
1340
- display: inline-block;
1341
- vertical-align: middle;
1221
+ .mess-success-popup .gift-popup .icon-cuowu2 {
1222
+ position: absolute;
1223
+ top: 10px;
1224
+ right: 10px;
1225
+ cursor: pointer;
1342
1226
  }
1343
1227
 
1344
- #toolbarNew .toolbar .bar-right .bar-r-com {
1345
- margin-left: 8px;
1346
- cursor: pointer;
1228
+ .mess-success-popup .gift-popup .toast {
1229
+ display: flex;
1230
+ align-items: center;
1231
+ justify-content: center;
1232
+ margin: 10px 0;
1347
1233
  }
1348
1234
 
1349
- #toolbarNew .toolbar .bar-right .bar-r-com.bar-r-gift {
1350
- width: 36px;
1351
- height: 36px;
1352
- transform-origin: center bottom;
1353
- animation: giftJump 3s ease infinite;
1235
+ .mess-success-popup .gift-popup .toast img {
1236
+ width: 20px;
1237
+ height: 15px;
1238
+ margin: 0 5px;
1354
1239
  }
1355
1240
 
1356
- @keyframes giftJump {
1357
- 0%, 24%, 48%, to {
1358
- transform: translateZ(0);
1359
- }
1360
- 12% {
1361
- transform: translate3d(0, -10px, 0);
1362
- }
1363
- 36% {
1364
- transform: translate3d(0, -10px, 0);
1365
- }
1241
+ .mess-success-popup .gift-popup .title {
1242
+ margin: 15px 0;
1243
+ font-size: 16px;
1244
+ color: #333;
1366
1245
  }
1367
1246
 
1368
- #toolbarNew .toolbar .bar-right .bar-r-com:first-child {
1369
- margin-left: 0;
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;
1254
+ cursor: pointer;
1370
1255
  }
1371
1256
 
1372
- #toolbarNew .toolbar .bar-right>img {
1257
+ /* 新增图片加载动画样式 */
1258
+ .gift-image-container {
1373
1259
  position: relative;
1374
- z-index: 1;
1375
- width: 26px;
1376
- height: 26px;
1260
+ width: 300px;
1261
+ height: 300px;
1262
+ margin: 20px 0;
1263
+ overflow: hidden;
1377
1264
  }
1378
1265
 
1379
- #toolbarNew .toolbar .bar-right .bar-heart {
1380
- position: relative;
1381
- width: 36px;
1382
- height: 36px;
1383
- text-align: center;
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;
1384
1272
  }
1385
1273
 
1386
- #toolbarNew .toolbar .bar-right .bar-heart .bar-praise {
1274
+ .gift-image-container img.loaded {
1275
+ opacity: 1;
1276
+ }
1277
+
1278
+ .image-loading {
1387
1279
  position: absolute;
1388
- max-width: 36px;
1389
- height: 15px;
1390
- line-height: 15px;
1391
- right: 0;
1392
1280
  top: 0;
1393
- z-index: 3;
1394
- font-size: 10px;
1395
- color: #fff;
1396
- border-radius: 6px;
1397
- padding: 0 4px;
1398
- box-sizing: border-box;
1399
- white-space: nowrap;
1400
- background-color: #f38200;
1401
- transform: translateX(40%);
1281
+ left: 0;
1282
+ width: 100%;
1283
+ height: 100%;
1284
+ display: flex;
1285
+ justify-content: center;
1286
+ align-items: center;
1287
+ background: rgba(255, 255, 255, 0.8);
1402
1288
  }
1403
1289
 
1404
- #toolbarNew .toolbar .bar-right .bar-zan {
1405
- position: relative;
1406
- z-index: 2;
1407
- height: 33px;
1408
- width: 33px;
1409
- box-sizing: border-box;
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;
1410
1297
  }
1411
1298
 
1412
- #toolbarNew .toolbar .bar-right .bar-zan .ani-num {
1299
+ @keyframes spin {
1300
+ 0% { transform: rotate(0deg); }
1301
+ 100% { transform: rotate(360deg); }
1302
+ }
1303
+
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 {
1413
1349
  position: absolute;
1414
- top: 0;
1415
- left: 10px;
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 {
1416
1435
  opacity: 0;
1417
- font-size: 15px;
1418
- color: #f07a87;
1419
- }
1420
-
1421
- #toolbarNew .toolbar .bar-right .bar-zan .stop-longtap {
1422
- position: absolute;
1423
- left: 0;
1424
- right: 0;
1425
- bottom: 0;
1426
- top: 0;
1427
- z-index: 1;
1428
- }
1429
-
1430
- #toolbarNew .toolbar .bar-right .bar-zan img {
1431
- width: 36px;
1432
- height: 36px;
1433
- }
1434
-
1435
- #toolbarNew .toolbar .bar-right .bar-zan.active .ani-num {
1436
- z-index: 2;
1437
- animation: praise 1.2s;
1438
- animation-fill-mode: both;
1439
- }
1440
-
1441
- @keyframes praise {
1442
- 0% {
1443
- opacity: 1;
1444
- }
1445
- 50% {
1446
- opacity: 1;
1447
- transform: translate3d(0, -35px, 0);
1448
- }
1449
- to {
1450
- opacity: 0;
1451
- transform: translate3d(0, -35px, 0);
1452
- }
1453
1436
  }
1454
-
1455
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap {
1456
- transform: scale(0.85);
1437
+ to {
1438
+ opacity: 1;
1457
1439
  }
1458
-
1459
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:first-of-type {
1460
- animation: jump .6s ease-out;
1440
+ }
1441
+
1442
+ @keyframes slideIn {
1443
+ from {
1444
+ transform: translateY(20px);
1445
+ opacity: 0;
1461
1446
  }
1462
-
1463
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(2) {
1464
- animation: jump2 .6s ease-out;
1447
+ to {
1448
+ transform: translateY(0);
1449
+ opacity: 1;
1465
1450
  }
1466
-
1467
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(3) {
1468
- animation: jump3 .6s ease-out;
1451
+ }
1452
+
1453
+ @keyframes bounceIn {
1454
+ 0% {
1455
+ transform: scale(0.3);
1456
+ opacity: 0;
1469
1457
  }
1470
-
1471
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(4) {
1472
- animation: jump4 .6s ease-out;
1458
+ 50% {
1459
+ transform: scale(1.05);
1460
+ opacity: 0.8;
1473
1461
  }
1474
-
1475
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(5) {
1476
- animation: jump5 .6s ease-out;
1462
+ 70% {
1463
+ transform: scale(0.9);
1464
+ opacity: 0.9;
1477
1465
  }
1478
-
1479
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(6) {
1480
- animation: jump6 .6s ease-out;
1466
+ 100% {
1467
+ transform: scale(1);
1468
+ opacity: 1;
1481
1469
  }
1482
-
1483
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(7) {
1484
- animation: jump7 .6s ease-out;
1470
+ }
1471
+ @keyframes jumpheart {
1472
+ to {
1473
+ -webkit-transform: scale(1.2);
1474
+ transform: scale(1.2)
1485
1475
  }
1486
-
1487
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(8) {
1488
- animation: jump8 .6s ease-out;
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)
1489
1782
  }
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 {
1891
+ overflow: hidden;
1892
+ }.button {
1893
+ position: absolute;
1894
+ cursor: pointer;
1895
+ user-select: none;
1896
+ }
1490
1897
 
1491
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap {
1492
- position: absolute;
1493
- left: 0;
1494
- top: 0;
1495
- right: 0;
1496
- bottom: 0;
1497
- pointer-events: none;
1498
- overflow: visible;
1499
- }
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
+ }
1500
1907
 
1501
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span {
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 {
1502
1921
  position: absolute;
1503
- width: 6px;
1504
- height: 6px;
1505
- border-radius: 50%;
1506
- opacity: 0;
1507
- }
1508
-
1509
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:first-of-type {
1510
- left: 50%;
1511
- top: -8px;
1512
- transform: translate3d(-50%, 0, 0);
1513
- background-color: #b3e5c8;
1514
1922
  }
1515
1923
 
1516
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(2) {
1517
- left: -8px;
1518
- top: 50%;
1519
- transform: translate3d(0, -50%, 0);
1520
- background-color: #f4ba31;
1924
+ .input-wrapper {
1925
+ display: flex;
1926
+ align-items: center;
1927
+ width: 100%;
1928
+ height: 100%;
1929
+ padding: 0 10px;
1930
+ box-sizing: border-box;
1931
+ position: relative;
1932
+ transition: border-color 0.3s;
1521
1933
  }
1522
1934
 
1523
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(3) {
1524
- left: 50%;
1525
- bottom: -8px;
1526
- transform: translate3d(-50%, 0, 0);
1527
- background-color: #339fef;
1935
+ .required-marker {
1936
+ font-size: 12px;
1937
+ padding: 0 5px 0 0;
1938
+ color: red;
1939
+ vertical-align: middle;
1528
1940
  }
1529
1941
 
1530
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(4) {
1531
- top: 50%;
1532
- right: -8px;
1533
- transform: translate3d(0, -50%, 0);
1534
- background-color: #e2264d;
1942
+ input {
1943
+ flex: 1;
1944
+ border: none;
1945
+ outline: none;
1946
+ background: transparent;
1947
+ height: 100%;
1948
+ padding: 0;
1949
+ margin: 0;
1535
1950
  }
1951
+ /*
1952
+ input::placeholder {
1953
+ color: #ccc;
1954
+ opacity: 1;
1955
+ } */
1536
1956
 
1537
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(5) {
1538
- left: -5px;
1539
- top: 0;
1540
- transform: translate3d(0, -50%, 0);
1541
- background-color: #a08880;
1957
+ .dynamic-placeholder-input::placeholder {
1958
+ color: var(--placeholder-color, #999);
1959
+ opacity: 1;
1542
1960
  }
1543
-
1544
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(6) {
1545
- left: -5px;
1546
- bottom: 0;
1547
- transform: translate3d(0, 50%, 0);
1548
- background-color: #43c1b5;
1961
+ .dynamic-placeholder-input::-webkit-input-placeholder {
1962
+ color: var(--placeholder-color, #999);
1549
1963
  }
1550
-
1551
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(7) {
1552
- right: -5px;
1553
- bottom: 0;
1554
- transform: translate3d(0, 50%, 0);
1555
- background-color: #f5be3b;
1964
+ .dynamic-placeholder-input::-moz-placeholder {
1965
+ color: var(--placeholder-color, #999);
1966
+ opacity: 1;
1556
1967
  }
1557
-
1558
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(8) {
1559
- right: -5px;
1560
- top: 0;
1561
- transform: translate3d(0, -50%, 0);
1562
- background-color: coral;
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;
1563
2019
  }
1564
-
1565
- @keyframes jump {
1566
- 0% {
1567
- opacity: 1;
1568
- transform: translate3d(-50%, 0, 0) scale(1);
1569
- }
1570
- 40% {
1571
- transform: translate3d(-50%, -100%, 0) scale(0.7);
1572
- }
1573
- to {
1574
- opacity: 1;
1575
- transform: translate3d(-50%, -150%, 0) scale(0);
1576
- }
2020
+ */
2021
+ .f-single {
2022
+ cursor: pointer;
1577
2023
  }
1578
2024
 
1579
- @keyframes jump2 {
1580
- 0% {
1581
- opacity: 1;
1582
- transform: translate3d(0, -50%, 0) scale(1);
1583
- }
1584
- 40% {
1585
- transform: translate3d(-100%, -50%, 0) scale(0.7);
1586
- }
1587
- to {
1588
- opacity: 1;
1589
- transform: translate3d(-150%, -50%, 0) scale(0);
1590
- }
2025
+ .ani-wrap {
2026
+ position: relative;
1591
2027
  }
1592
2028
 
1593
- @keyframes jump3 {
1594
- 0% {
1595
- opacity: 1;
1596
- transform: translate3d(-50%, 0, 0) scale(1);
1597
- }
1598
- 40% {
1599
- transform: translate3d(-50%, 100%, 0) scale(0.7);
1600
- }
1601
- to {
1602
- opacity: 1;
1603
- transform: translate3d(-50%, 150%, 0) scale(0);
1604
- }
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);
1605
2038
  }
1606
2039
 
1607
- @keyframes jump4 {
1608
- 0% {
1609
- opacity: 1;
1610
- transform: translate3d(0, -50%, 0) scale(1);
1611
- }
1612
- 40% {
1613
- transform: translate3d(100%, -50%, 0) scale(0.7);
1614
- }
1615
- to {
1616
- opacity: 1;
1617
- transform: translate3d(150%, -50%, 0) scale(0);
1618
- }
2040
+ .require {
2041
+ padding: 0 5px 0 0;
2042
+ color: red;
2043
+ vertical-align: middle;
1619
2044
  }
1620
2045
 
1621
- @keyframes jump5 {
1622
- 0% {
1623
- opacity: 1;
1624
- transform: translate3d(0, -50%, 0) scale(1);
1625
- }
1626
- 40% {
1627
- transform: translate3d(-80%, -80%, 0) scale(0.7);
1628
- }
1629
- to {
1630
- opacity: 1;
1631
- transform: translate3d(-130%, -130%, 0) scale(0);
1632
- }
2046
+ .f-single ul {
2047
+ padding: 15px;
2048
+ margin: 0;
2049
+ list-style: none;
1633
2050
  }
1634
2051
 
1635
- @keyframes jump6 {
1636
- 0% {
1637
- opacity: 1;
1638
- transform: translate3d(0, 50%, 0) scale(1);
1639
- }
1640
- 40% {
1641
- transform: translate3d(-80%, 80%, 0) scale(0.7);
1642
- }
1643
- to {
1644
- opacity: 1;
1645
- transform: translate3d(-130%, 130%, 0) scale(0);
1646
- }
2052
+ .f-single ul li {
2053
+ display: flex;
2054
+ align-items: center;
2055
+ margin-top: 12px;
2056
+ font-size: 0;
1647
2057
  }
1648
2058
 
1649
- @keyframes jump7 {
1650
- 0% {
1651
- opacity: 1;
1652
- transform: translate3d(0, 50%, 0) scale(1);
1653
- }
1654
- 40% {
1655
- transform: translate3d(80%, 80%, 0) scale(0.7);
1656
- }
1657
- to {
1658
- opacity: 1;
1659
- transform: translate3d(130%, 130%, 0) scale(0);
1660
- }
2059
+ .f-single ul li:first-child {
2060
+ margin-top: 0;
1661
2061
  }
1662
2062
 
1663
- @keyframes jump8 {
1664
- 0% {
1665
- opacity: 1;
1666
- transform: translate3d(0, 50%, 0) scale(1);
1667
- }
1668
- 40% {
1669
- transform: translate3d(80%, -80%, 0) scale(0.7);
1670
- }
1671
- to {
1672
- opacity: 1;
1673
- transform: translate3d(130%, -130%, 0) scale(0);
1674
- }
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;
1675
2070
  }
1676
2071
 
1677
- /* 礼物弹窗样式 */
1678
- .give-gift {
1679
- position: fixed;
1680
- top: 50%;
1681
- left: 50%;
1682
- transform: translate(-50%, -50%);
1683
- z-index: 2004;
1684
- background: white;
1685
- padding: 20px;
1686
- border-radius: 10px;
1687
- text-align: center;
2072
+ .fs-circle.selected {
2073
+ background-color: #2687f1;
2074
+ border-color: #2687f1 !important;
1688
2075
  }
1689
2076
 
1690
- .give-gift .back {
2077
+ .fs-circle.selected::after {
2078
+ content: "";
1691
2079
  position: absolute;
1692
- top: 10px;
1693
- left: 10px;
1694
- cursor: pointer;
2080
+ top: 3px;
2081
+ left: 3px;
2082
+ width: 8px;
2083
+ height: 8px;
2084
+ border-radius: 50%;
2085
+ background-color: white;
1695
2086
  }
1696
2087
 
1697
- .give-gift img {
1698
- max-width: 300px;
1699
- max-height: 300px;
1700
- 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;
1701
2096
  }
1702
2097
 
1703
- /* 留言成功弹窗样式 */
1704
- .mess-success-popup {
2098
+ .has-error .fs-tit {
2099
+ border-bottom-color: #ff4d4f;
2100
+ }
2101
+
2102
+ /* 错误提示样式 */
2103
+ .error-tip {
1705
2104
  position: fixed;
1706
- top: 0;
1707
2105
  left: 0;
1708
- right: 0;
1709
- bottom: 0;
1710
- background-color: rgba(0, 0, 0, 0.5);
1711
- z-index: 2003;
1712
- display: flex;
1713
- justify-content: center;
1714
- align-items: center;
1715
- }
2106
+ top: 0;
2107
+ width: 100%;
2108
+ height: 100%;
2109
+ z-index: 1000;
2110
+ }/* .ele-form {
2111
+ position: absolute;
2112
+ user-select: none;
2113
+ } */
1716
2114
 
1717
- .mess-success-popup .gift-popup {
1718
- width: 300px;
1719
- height: 200px;
1720
- background: url('https://h5cdn.unika.cc/static/img/uniComponents/bg-color.png') no-repeat;
1721
- border-radius: 10px;
1722
- padding: 20px;
1723
- text-align: center;
1724
- position: relative;
2115
+ .f-select {
2116
+ cursor: pointer;
1725
2117
  }
1726
2118
 
1727
- .mess-success-popup .gift-popup .icon-cuowu2 {
1728
- position: absolute;
1729
- top: 10px;
1730
- right: 10px;
1731
- cursor: pointer;
2119
+ .ani-wrap {
2120
+ position: relative;
1732
2121
  }
1733
2122
 
1734
- .mess-success-popup .gift-popup .toast {
2123
+ .f-select .ani-wrap .fs-tit {
2124
+ position: relative;
1735
2125
  display: flex;
2126
+ padding: 0 5px;
2127
+ height: 35px;
2128
+ line-height: 35px;
1736
2129
  align-items: center;
1737
- justify-content: center;
1738
- margin: 10px 0;
1739
2130
  }
1740
2131
 
1741
- .mess-success-popup .gift-popup .toast img {
1742
- width: 20px;
1743
- height: 15px;
1744
- margin: 0 5px;
2132
+ .require {
2133
+ padding: 0 5px 0 0;
2134
+ color: red;
2135
+ vertical-align: middle;
1745
2136
  }
1746
2137
 
1747
- .mess-success-popup .gift-popup .title {
1748
- margin: 15px 0;
1749
- font-size: 16px;
1750
- color: #333;
2138
+ .fs-cont {
2139
+ padding-right: 15px;
2140
+ white-space: nowrap;
2141
+ overflow: hidden;
2142
+ text-overflow: ellipsis;
2143
+ flex-grow: 1;
1751
2144
  }
1752
2145
 
1753
- .mess-success-popup .gift-popup .btn {
1754
- background: linear-gradient(270deg, #ff4874, #ff9061);
1755
- color: white;
1756
- border: none;
1757
- padding: 10px 20px;
1758
- border-radius: 20px;
1759
- margin-top: 15px;
1760
- cursor: pointer;
2146
+ .icon-bofang1 {
2147
+ font-size: 12px;
2148
+ transition: transform 0.2s ease;
1761
2149
  }
1762
2150
 
1763
- /* 新增图片加载动画样式 */
1764
- .gift-image-container {
1765
- position: relative;
1766
- width: 300px;
1767
- height: 300px;
1768
- margin: 20px 0;
1769
- overflow: hidden;
2151
+ .rotate-180 {
2152
+ transform: rotate(180deg) !important;
1770
2153
  }
1771
2154
 
1772
- .gift-image-container img {
2155
+ .f-real {
2156
+ position: absolute;
2157
+ left: 0;
2158
+ top: 0;
1773
2159
  width: 100%;
1774
2160
  height: 100%;
1775
- object-fit: contain;
2161
+ z-index: 1;
1776
2162
  opacity: 0;
1777
- transition: opacity 0.5s ease-in-out;
2163
+ cursor: pointer;
1778
2164
  }
1779
2165
 
1780
- .gift-image-container img.loaded {
1781
- opacity: 1;
2166
+ .dropdown-menu {
2167
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
1782
2168
  }
1783
2169
 
1784
- .image-loading {
1785
- position: absolute;
1786
- top: 0;
1787
- left: 0;
1788
- width: 100%;
1789
- height: 100%;
1790
- display: flex;
1791
- justify-content: center;
1792
- align-items: center;
1793
- background: rgba(255, 255, 255, 0.8);
2170
+ .dropdown-item {
2171
+ padding: 8px 10px;
2172
+ cursor: pointer;
2173
+ transition: background-color 0.2s;
2174
+ }
2175
+
2176
+ .dropdown-item:hover {
2177
+ background-color: #f5f5f5;
2178
+ }
2179
+
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);
1794
2191
  }
1795
2192
 
1796
- .loading-spinner {
1797
- width: 40px;
1798
- height: 40px;
1799
- border: 4px solid #f3f3f3;
1800
- border-top: 4px solid #ed5566;
1801
- border-radius: 50%;
1802
- animation: spin 1s linear infinite;
2193
+ .icon-bofang1:before {
2194
+ content: "\E6CF";
1803
2195
  }
1804
2196
 
1805
- @keyframes spin {
1806
- 0% { transform: rotate(0deg); }
1807
- 100% { transform: rotate(360deg); }
2197
+ .has-error {
2198
+ border-color: #ff4d4f !important;
1808
2199
  }
1809
2200
 
1810
- 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 {
1811
2209
  width: 100%;
1812
2210
  height: 100%;
1813
2211
  }
@@ -3071,612 +3469,214 @@ to {
3071
3469
  transform-origin: 50% 100%;
3072
3470
  -webkit-animation-name: pullUp;
3073
3471
  animation-name: pullUp;
3074
- -webkit-animation-timing-function: ease-out;
3075
- animation-timing-function: ease-out
3076
- }
3077
-
3078
- @-webkit-keyframes pullUp {
3079
- 0%,40%,60%,80%,99% {
3080
- -webkit-animation-timing-function: ease-out;
3081
- animation-timing-function: ease-out
3082
- }
3083
-
3084
- 0% {
3085
- opacity: 0;
3086
- -webkit-transform: scaleY(.1);
3087
- transform: scaleY(.1);
3088
- -webkit-transform-origin: 50% 100%;
3089
- transform-origin: 50% 100%
3090
- }
3091
-
3092
- 40% {
3093
- opacity: 1;
3094
- -webkit-transform: scaleY(1.02);
3095
- transform: scaleY(1.02);
3096
- -webkit-transform-origin: 50% 100%;
3097
- transform-origin: 50% 100%
3098
- }
3099
-
3100
- 60% {
3101
- -webkit-transform: scaleY(.98);
3102
- transform: scaleY(.98);
3103
- -webkit-transform-origin: 50% 100%;
3104
- transform-origin: 50% 100%
3105
- }
3106
-
3107
- 80% {
3108
- -webkit-transform: scaleY(1.01);
3109
- transform: scaleY(1.01);
3110
- -webkit-transform-origin: 50% 100%;
3111
- transform-origin: 50% 100%
3112
- }
3113
-
3114
- 99% {
3115
- -webkit-transform: scaleY(1);
3116
- transform: scaleY(1);
3117
- -webkit-transform-origin: 50% 100%;
3118
- transform-origin: 50% 100%
3119
- }
3120
-
3121
- to {
3122
- -webkit-transform: none;
3123
- transform: none
3124
- }
3125
- }
3126
-
3127
- @keyframes pullUp {
3128
- 0%,40%,60%,80%,99% {
3129
- -webkit-animation-timing-function: ease-out;
3130
- animation-timing-function: ease-out
3131
- }
3132
-
3133
- 0% {
3134
- opacity: 0;
3135
- -webkit-transform: scaleY(.1);
3136
- transform: scaleY(.1);
3137
- -webkit-transform-origin: 50% 100%;
3138
- transform-origin: 50% 100%
3139
- }
3140
-
3141
- 40% {
3142
- opacity: 1;
3143
- -webkit-transform: scaleY(1.02);
3144
- transform: scaleY(1.02);
3145
- -webkit-transform-origin: 50% 100%;
3146
- transform-origin: 50% 100%
3147
- }
3148
-
3149
- 60% {
3150
- -webkit-transform: scaleY(.98);
3151
- transform: scaleY(.98);
3152
- -webkit-transform-origin: 50% 100%;
3153
- transform-origin: 50% 100%
3154
- }
3155
-
3156
- 80% {
3157
- -webkit-transform: scaleY(1.01);
3158
- transform: scaleY(1.01);
3159
- -webkit-transform-origin: 50% 100%;
3160
- transform-origin: 50% 100%
3161
- }
3162
-
3163
- 99% {
3164
- -webkit-transform: scaleY(1);
3165
- transform: scaleY(1);
3166
- -webkit-transform-origin: 50% 100%;
3167
- transform-origin: 50% 100%
3168
- }
3169
-
3170
- to {
3171
- -webkit-transform: none;
3172
- transform: none
3173
- }
3174
- }
3175
-
3176
- .pullDown {
3177
- -webkit-transform-origin: 50% 0;
3178
- transform-origin: 50% 0;
3179
- -webkit-animation-name: pullDown;
3180
- animation-name: pullDown;
3181
- -webkit-animation-timing-function: ease-out;
3182
- animation-timing-function: ease-out
3183
- }
3184
-
3185
- @-webkit-keyframes pullDown {
3186
- 0%,40%,60%,80%,99% {
3187
- -webkit-animation-timing-function: ease-out;
3188
- animation-timing-function: ease-out
3189
- }
3190
-
3191
- 0% {
3192
- opacity: 0;
3193
- -webkit-transform: scaleY(.1);
3194
- transform: scaleY(.1);
3195
- -webkit-transform-origin: 50% 0;
3196
- transform-origin: 50% 0
3197
- }
3198
-
3199
- 40% {
3200
- opacity: 1;
3201
- -webkit-transform: scaleY(1.02);
3202
- transform: scaleY(1.02);
3203
- -webkit-transform-origin: 50% 0;
3204
- transform-origin: 50% 0
3205
- }
3206
-
3207
- 60% {
3208
- -webkit-transform: scaleY(.98);
3209
- transform: scaleY(.98);
3210
- -webkit-transform-origin: 50% 0;
3211
- transform-origin: 50% 0
3212
- }
3213
-
3214
- 80% {
3215
- -webkit-transform: scaleY(1.01);
3216
- transform: scaleY(1.01);
3217
- -webkit-transform-origin: 50% 0;
3218
- transform-origin: 50% 0
3219
- }
3220
-
3221
- 99% {
3222
- -webkit-transform: scaleY(1);
3223
- transform: scaleY(1);
3224
- -webkit-transform-origin: 50% 0;
3225
- transform-origin: 50% 0
3226
- }
3227
-
3228
- to {
3229
- -webkit-transform: none;
3230
- transform: none
3231
- }
3232
- }
3233
-
3234
- @keyframes pullDown {
3235
- 0%,40%,60%,80%,99% {
3236
- -webkit-animation-timing-function: ease-out;
3237
- animation-timing-function: ease-out
3238
- }
3239
-
3240
- 0% {
3241
- opacity: 0;
3242
- -webkit-transform: scaleY(.1);
3243
- transform: scaleY(.1);
3244
- -webkit-transform-origin: 50% 0;
3245
- transform-origin: 50% 0
3246
- }
3247
-
3248
- 40% {
3249
- opacity: 1;
3250
- -webkit-transform: scaleY(1.02);
3251
- transform: scaleY(1.02);
3252
- -webkit-transform-origin: 50% 0;
3253
- transform-origin: 50% 0
3254
- }
3255
-
3256
- 60% {
3257
- -webkit-transform: scaleY(.98);
3258
- transform: scaleY(.98);
3259
- -webkit-transform-origin: 50% 0;
3260
- transform-origin: 50% 0
3261
- }
3262
-
3263
- 80% {
3264
- -webkit-transform: scaleY(1.01);
3265
- transform: scaleY(1.01);
3266
- -webkit-transform-origin: 50% 0;
3267
- transform-origin: 50% 0
3268
- }
3269
-
3270
- 99% {
3271
- -webkit-transform: scaleY(1);
3272
- transform: scaleY(1);
3273
- -webkit-transform-origin: 50% 0;
3274
- transform-origin: 50% 0
3275
- }
3276
-
3277
- to {
3278
- -webkit-transform: none;
3279
- transform: none
3280
- }
3281
- }.form-submit {
3282
- cursor: pointer;
3283
- transition: all 0.2s;
3284
- outline: none;
3285
- border: none;
3286
- }
3287
-
3288
- .form-submit:hover {
3289
- opacity: 0.9;
3290
- transform: translateY(-1px);
3291
- }
3292
-
3293
- .form-submit:active {
3294
- opacity: 0.8;
3295
- transform: translateY(0);
3296
- }
3297
-
3298
- .form-submit:disabled {
3299
- opacity: 0.6;
3300
- cursor: not-allowed;
3301
- transform: none !important;
3302
- }
3303
-
3304
- .f-submit {
3305
- position: relative;
3306
- display: block
3472
+ -webkit-animation-timing-function: ease-out;
3473
+ animation-timing-function: ease-out
3307
3474
  }
3308
3475
 
3309
- .f-submit .ani-wrap {
3310
- width: 100%;
3311
- height: 100%;
3312
- padding: 10px;
3313
- overflow: hidden;
3314
- position: relative
3476
+ @-webkit-keyframes pullUp {
3477
+ 0%,40%,60%,80%,99% {
3478
+ -webkit-animation-timing-function: ease-out;
3479
+ animation-timing-function: ease-out
3315
3480
  }
3316
3481
 
3317
- .f-submit .f-ovh {
3318
- position: absolute;
3319
- left: 50%;
3320
- top: 50%;
3321
- transform: translate(-50%,-50%)
3482
+ 0% {
3483
+ opacity: 0;
3484
+ -webkit-transform: scaleY(.1);
3485
+ transform: scaleY(.1);
3486
+ -webkit-transform-origin: 50% 100%;
3487
+ transform-origin: 50% 100%
3322
3488
  }
3323
3489
 
3324
- .form-submit:disabled {
3325
- opacity: 0.7;
3326
- cursor: not-allowed;
3327
- }#page-list .tip-cover {
3328
- position: fixed;
3329
- left: 0;
3330
- top: 0;
3331
- width: 100%;
3332
- height: 100%;
3333
- display: -ms-flexbox;
3334
- display: flex;
3335
- -ms-flex-align: center;
3336
- align-items: center;
3337
- -ms-flex-pack: center;
3338
- justify-content: center;
3339
- z-index: 999;
3340
- background-color: rgba(0,0,0,.7)
3490
+ 40% {
3491
+ opacity: 1;
3492
+ -webkit-transform: scaleY(1.02);
3493
+ transform: scaleY(1.02);
3494
+ -webkit-transform-origin: 50% 100%;
3495
+ transform-origin: 50% 100%
3341
3496
  }
3342
3497
 
3343
- #page-list .tip-cover .tip {
3344
- width: 80%;
3345
- max-width: 250px;
3346
- padding: 10px;
3347
- border-radius: 5px;
3348
- background-color: #fff
3498
+ 60% {
3499
+ -webkit-transform: scaleY(.98);
3500
+ transform: scaleY(.98);
3501
+ -webkit-transform-origin: 50% 100%;
3502
+ transform-origin: 50% 100%
3349
3503
  }
3350
3504
 
3351
- #page-list .tip-cover .tip-btn {
3352
- display: block;
3353
- margin: 25px auto;
3354
- width: 120px;
3355
- height: 30px;
3356
- color: #fff;
3357
- border-radius: 4px;
3358
- text-align: center;
3359
- font-size: 14px;
3360
- line-height: 30px;
3361
- background: #ed5566
3505
+ 80% {
3506
+ -webkit-transform: scaleY(1.01);
3507
+ transform: scaleY(1.01);
3508
+ -webkit-transform-origin: 50% 100%;
3509
+ transform-origin: 50% 100%
3362
3510
  }
3363
3511
 
3364
- #page-list .tip-cover .tip-content {
3365
- font-size: 14px;
3366
- padding-top: 30px;
3512
+ 99% {
3513
+ -webkit-transform: scaleY(1);
3514
+ transform: scaleY(1);
3515
+ -webkit-transform-origin: 50% 100%;
3516
+ transform-origin: 50% 100%
3367
3517
  }
3368
3518
 
3369
- .tip-cover {
3370
- position: fixed;
3371
- left: 0;
3372
- top: 0;
3373
- width: 100%;
3374
- height: 100%;
3375
- display: -ms-flexbox;
3376
- display: flex;
3377
- -ms-flex-align: center;
3378
- align-items: center;
3379
- -ms-flex-pack: center;
3380
- justify-content: center;
3381
- z-index: 999;
3382
- background-color: rgba(0,0,0,.7)
3519
+ to {
3520
+ -webkit-transform: none;
3521
+ transform: none
3522
+ }
3383
3523
  }
3384
3524
 
3385
- .tip-cover .tip {
3386
- width: 80%;
3387
- max-width: 250px;
3388
- padding: 5px;
3389
- border-radius: 3px;
3390
- background-color: #fff
3525
+ @keyframes pullUp {
3526
+ 0%,40%,60%,80%,99% {
3527
+ -webkit-animation-timing-function: ease-out;
3528
+ animation-timing-function: ease-out
3391
3529
  }
3392
3530
 
3393
- .tip-cover .tip-btn {
3394
- display: block;
3395
- margin: 13px auto;
3396
- width: 64px;
3397
- height: 20px;
3398
- color: #fff;
3399
- border-radius: 4px;
3400
- text-align: center;
3401
- font-size: 14px;
3402
- line-height: 20px;
3403
- background: #ed5566;
3404
- } /* .ele-form {
3405
- position: absolute;
3406
- user-select: none;
3407
- } */
3408
-
3409
- .f-select {
3410
- cursor: pointer;
3411
- }
3412
-
3413
- .ani-wrap {
3414
- position: relative;
3415
- }
3416
-
3417
- .f-select .ani-wrap .fs-tit {
3418
- position: relative;
3419
- display: flex;
3420
- padding: 0 5px;
3421
- height: 35px;
3422
- line-height: 35px;
3423
- align-items: center;
3424
- }
3425
-
3426
- .require {
3427
- padding: 0 5px 0 0;
3428
- color: red;
3429
- vertical-align: middle;
3430
- }
3431
-
3432
- .fs-cont {
3433
- padding-right: 15px;
3434
- white-space: nowrap;
3435
- overflow: hidden;
3436
- text-overflow: ellipsis;
3437
- flex-grow: 1;
3438
- }
3439
-
3440
- .icon-bofang1 {
3441
- font-size: 12px;
3442
- transition: transform 0.2s ease;
3443
- }
3444
-
3445
- .rotate-180 {
3446
- transform: rotate(180deg) !important;
3447
- }
3448
-
3449
- .f-real {
3450
- position: absolute;
3451
- left: 0;
3452
- top: 0;
3453
- width: 100%;
3454
- height: 100%;
3455
- z-index: 1;
3531
+ 0% {
3456
3532
  opacity: 0;
3457
- cursor: pointer;
3458
- }
3459
-
3460
- .dropdown-menu {
3461
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
3462
- }
3463
-
3464
- .dropdown-item {
3465
- padding: 8px 10px;
3466
- cursor: pointer;
3467
- transition: background-color 0.2s;
3468
- }
3469
-
3470
- .dropdown-item:hover {
3471
- background-color: #f5f5f5;
3472
- }
3473
-
3474
- .dropdown-item.selected {
3475
- background-color: #e6f7ff;
3476
- color: #1890ff;
3477
- }
3478
-
3479
- .f-select .fs-tit .icon-bofang1 {
3480
- position: absolute;
3481
- right: 10px;
3482
- font-size: 12px;
3483
- display: inline-block;
3484
- transform: rotate(90deg);
3485
- }
3486
-
3487
- .icon-bofang1:before {
3488
- content: "\E6CF";
3489
- }
3490
-
3491
- .has-error {
3492
- border-color: #ff4d4f !important;
3493
- }
3494
-
3495
- .error-tip {
3496
- position: fixed;
3497
- left: 0;
3498
- top: 0;
3499
- width: 100%;
3500
- height: 100%;
3501
- z-index: 1000;
3502
- }.form-input {
3503
- position: absolute;
3504
- }
3505
-
3506
- .input-wrapper {
3507
- display: flex;
3508
- align-items: center;
3509
- width: 100%;
3510
- height: 100%;
3511
- padding: 0 10px;
3512
- box-sizing: border-box;
3513
- position: relative;
3514
- transition: border-color 0.3s;
3515
- }
3516
-
3517
- .required-marker {
3518
- font-size: 12px;
3519
- padding: 0 5px 0 0;
3520
- color: red;
3521
- vertical-align: middle;
3522
- }
3523
-
3524
- input {
3525
- flex: 1;
3526
- border: none;
3527
- outline: none;
3528
- background: transparent;
3529
- height: 100%;
3530
- padding: 0;
3531
- margin: 0;
3532
- }
3533
- /*
3534
- input::placeholder {
3535
- color: #ccc;
3536
- opacity: 1;
3537
- } */
3538
-
3539
- .dynamic-placeholder-input::placeholder {
3540
- color: var(--placeholder-color, #999);
3533
+ -webkit-transform: scaleY(.1);
3534
+ transform: scaleY(.1);
3535
+ -webkit-transform-origin: 50% 100%;
3536
+ transform-origin: 50% 100%
3537
+ }
3538
+
3539
+ 40% {
3541
3540
  opacity: 1;
3542
- }
3543
- .dynamic-placeholder-input::-webkit-input-placeholder {
3544
- color: var(--placeholder-color, #999);
3545
- }
3546
- .dynamic-placeholder-input::-moz-placeholder {
3547
- color: var(--placeholder-color, #999);
3541
+ -webkit-transform: scaleY(1.02);
3542
+ transform: scaleY(1.02);
3543
+ -webkit-transform-origin: 50% 100%;
3544
+ transform-origin: 50% 100%
3545
+ }
3546
+
3547
+ 60% {
3548
+ -webkit-transform: scaleY(.98);
3549
+ transform: scaleY(.98);
3550
+ -webkit-transform-origin: 50% 100%;
3551
+ transform-origin: 50% 100%
3552
+ }
3553
+
3554
+ 80% {
3555
+ -webkit-transform: scaleY(1.01);
3556
+ transform: scaleY(1.01);
3557
+ -webkit-transform-origin: 50% 100%;
3558
+ transform-origin: 50% 100%
3559
+ }
3560
+
3561
+ 99% {
3562
+ -webkit-transform: scaleY(1);
3563
+ transform: scaleY(1);
3564
+ -webkit-transform-origin: 50% 100%;
3565
+ transform-origin: 50% 100%
3566
+ }
3567
+
3568
+ to {
3569
+ -webkit-transform: none;
3570
+ transform: none
3571
+ }
3572
+ }
3573
+
3574
+ .pullDown {
3575
+ -webkit-transform-origin: 50% 0;
3576
+ transform-origin: 50% 0;
3577
+ -webkit-animation-name: pullDown;
3578
+ animation-name: pullDown;
3579
+ -webkit-animation-timing-function: ease-out;
3580
+ animation-timing-function: ease-out
3581
+ }
3582
+
3583
+ @-webkit-keyframes pullDown {
3584
+ 0%,40%,60%,80%,99% {
3585
+ -webkit-animation-timing-function: ease-out;
3586
+ animation-timing-function: ease-out
3587
+ }
3588
+
3589
+ 0% {
3590
+ opacity: 0;
3591
+ -webkit-transform: scaleY(.1);
3592
+ transform: scaleY(.1);
3593
+ -webkit-transform-origin: 50% 0;
3594
+ transform-origin: 50% 0
3595
+ }
3596
+
3597
+ 40% {
3548
3598
  opacity: 1;
3549
- }
3550
- .dynamic-placeholder-input:-ms-input-placeholder {
3551
- color: var(--placeholder-color, #999);
3552
- }.call {
3553
- position: absolute;
3554
- cursor: pointer;
3555
- user-select: none;
3599
+ -webkit-transform: scaleY(1.02);
3600
+ transform: scaleY(1.02);
3601
+ -webkit-transform-origin: 50% 0;
3602
+ transform-origin: 50% 0
3556
3603
  }
3557
3604
 
3558
- .call .ani-wrap {
3559
- display: flex;
3560
- justify-content: center;
3561
- align-items: center;
3562
- width: 100%;
3563
- height: 100%;
3564
- overflow: hidden;
3565
- transition: opacity 0.2s;
3605
+ 60% {
3606
+ -webkit-transform: scaleY(.98);
3607
+ transform: scaleY(.98);
3608
+ -webkit-transform-origin: 50% 0;
3609
+ transform-origin: 50% 0
3566
3610
  }
3567
3611
 
3568
- .call .ani-wrap:hover {
3569
- opacity: 0.9;
3612
+ 80% {
3613
+ -webkit-transform: scaleY(1.01);
3614
+ transform: scaleY(1.01);
3615
+ -webkit-transform-origin: 50% 0;
3616
+ transform-origin: 50% 0
3570
3617
  }
3571
3618
 
3572
- .call-content {
3573
- display: flex;
3574
- align-items: center;
3575
- justify-content: center;
3619
+ 99% {
3620
+ -webkit-transform: scaleY(1);
3621
+ transform: scaleY(1);
3622
+ -webkit-transform-origin: 50% 0;
3623
+ transform-origin: 50% 0
3576
3624
  }
3577
3625
 
3578
- .btn-text {
3579
- margin-left: 10px;
3626
+ to {
3627
+ -webkit-transform: none;
3628
+ transform: none
3629
+ }
3580
3630
  }
3581
3631
 
3632
+ @keyframes pullDown {
3633
+ 0%,40%,60%,80%,99% {
3634
+ -webkit-animation-timing-function: ease-out;
3635
+ animation-timing-function: ease-out
3636
+ }
3582
3637
 
3583
- .hb-tel:before {
3584
- content: "\E642";
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
3644
+ }
3645
+
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
3652
+ }
3653
+
3654
+ 60% {
3655
+ -webkit-transform: scaleY(.98);
3656
+ transform: scaleY(.98);
3657
+ -webkit-transform-origin: 50% 0;
3658
+ transform-origin: 50% 0
3659
+ }
3660
+
3661
+ 80% {
3662
+ -webkit-transform: scaleY(1.01);
3663
+ transform: scaleY(1.01);
3664
+ -webkit-transform-origin: 50% 0;
3665
+ transform-origin: 50% 0
3666
+ }
3667
+
3668
+ 99% {
3669
+ -webkit-transform: scaleY(1);
3670
+ transform: scaleY(1);
3671
+ -webkit-transform-origin: 50% 0;
3672
+ transform-origin: 50% 0
3673
+ }
3674
+
3675
+ to {
3676
+ -webkit-transform: none;
3677
+ transform: none
3678
+ }
3585
3679
  }/* .ele-form {
3586
- position: absolute;
3587
- user-select: none;
3588
- }
3589
- */
3590
- .f-single {
3591
- cursor: pointer;
3592
- }
3593
-
3594
- .ani-wrap {
3595
- position: relative;
3596
- }
3597
-
3598
- .f-single .ani-wrap .fs-tit {
3599
- display: flex;
3600
- padding: 0 5px;
3601
- height: 40px;
3602
- align-items: center;
3603
- white-space: nowrap;
3604
- overflow: hidden;
3605
- text-overflow: ellipsis;
3606
- border-bottom: 1px solid rgba(153, 153, 153, 1);
3607
- }
3608
-
3609
- .require {
3610
- padding: 0 5px 0 0;
3611
- color: red;
3612
- vertical-align: middle;
3613
- }
3614
-
3615
- .f-single ul {
3616
- padding: 15px;
3617
- margin: 0;
3618
- list-style: none;
3619
- }
3620
-
3621
- .f-single ul li {
3622
- display: flex;
3623
- align-items: center;
3624
- margin-top: 12px;
3625
- font-size: 0;
3626
- }
3627
-
3628
- .f-single ul li:first-child {
3629
- margin-top: 0;
3630
- }
3631
-
3632
- .fs-circle {
3633
- display: inline-block;
3634
- width: 16px;
3635
- height: 16px;
3636
- border-radius: 50%;
3637
- position: relative;
3638
- transition: all 0.2s;
3639
- }
3640
-
3641
- .fs-circle.selected {
3642
- background-color: #2687f1;
3643
- border-color: #2687f1 !important;
3644
- }
3645
-
3646
- .fs-circle.selected::after {
3647
- content: "";
3648
- position: absolute;
3649
- top: 3px;
3650
- left: 3px;
3651
- width: 8px;
3652
- height: 8px;
3653
- border-radius: 50%;
3654
- background-color: white;
3655
- }
3656
-
3657
- .fs-txt {
3658
- display: inline-block;
3659
- width: calc(100% - 16px);
3660
- padding-left: 8px;
3661
- vertical-align: top;
3662
- word-break: break-all;
3663
- font-size: 14px;
3664
- line-height: 1.2;
3665
- }
3666
-
3667
- .has-error .fs-tit {
3668
- border-bottom-color: #ff4d4f;
3669
- }
3670
-
3671
- /* 错误提示样式 */
3672
- .error-tip {
3673
- position: fixed;
3674
- left: 0;
3675
- top: 0;
3676
- width: 100%;
3677
- height: 100%;
3678
- z-index: 1000;
3679
- }/* .ele-form {
3680
3680
  position: absolute;
3681
3681
  user-select: none;
3682
3682
  } */