unika-components 1.1.20 → 1.1.21

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.
@@ -1,4 +1,95 @@
1
1
 
2
+ /* 父容器样式调整 */
3
+ #index {
4
+ position: relative;
5
+ width: 100%;
6
+ height: 100vh;
7
+ overflow: hidden;
8
+ -webkit-overflow-scrolling: touch;
9
+ overscroll-behavior: contain;
10
+ touch-action: pan-y;
11
+ transform: translate3d(0, 0, 0);
12
+ -webkit-transform: translate3d(0, 0, 0);
13
+ }
14
+
15
+ /* 页面容器样式调整 */
16
+ .scroll-normal {
17
+ position: relative;
18
+ width: 100%;
19
+ height: 100%;
20
+ overflow: hidden;
21
+ overscroll-behavior: contain;
22
+ transform: translate3d(0, 0, 0);
23
+ -webkit-transform: translate3d(0, 0, 0);
24
+ }
25
+
26
+ /* 输入框容器特殊处理 */
27
+ .ele-wrap {
28
+ position: relative;
29
+ width: 100%;
30
+ height: 100%;
31
+ transform: translate3d(0, 0, 0);
32
+ -webkit-transform: translate3d(0, 0, 0);
33
+ contain: layout;
34
+ }
35
+
36
+ /* 移动设备键盘弹出时的特殊处理 */
37
+ @media screen and (max-aspect-ratio: 13/9) {
38
+ #index {
39
+ height: auto;
40
+ min-height: 100vh;
41
+ padding-bottom: env(keyboard-inset-height, 0px);
42
+ }
43
+
44
+ .scroll-normal {
45
+ height: auto;
46
+ min-height: 100%;
47
+ }
48
+ }
49
+
50
+ /* 安卓特定修复 */
51
+ @supports (-webkit-touch-callout: none) {
52
+ .ele-wrap {
53
+ position: relative;
54
+ z-index: 1;
55
+ }
56
+ }
57
+
58
+ /* 确保输入框可见 */
59
+ :deep(.form-input) {
60
+ position: absolute;
61
+ z-index: 2;
62
+ transform: translate3d(0, 0, 0);
63
+ -webkit-transform: translate3d(0, 0, 0);
64
+ }
65
+
66
+ /* 防止输入框被其他元素覆盖 */
67
+ :deep(.input-wrapper) {
68
+ position: relative;
69
+ z-index: 3;
70
+ }
71
+
72
+ .scroll-wrap.scroll-long {
73
+ position: relative;
74
+ width: 100%;
75
+ height: 100vh;
76
+ overflow: hidden;
77
+ -webkit-overflow-scrolling: touch;
78
+ overscroll-behavior: contain;
79
+ touch-action: pan-y;
80
+ transform: translate3d(0, 0, 0);
81
+ -webkit-transform: translate3d(0, 0, 0);
82
+ }
83
+
84
+ /* 移动设备键盘弹出时的特殊处理 */
85
+ @media screen and (max-aspect-ratio: 13/9) {
86
+ .scroll-wrap.scroll-long {
87
+ height: auto;
88
+ min-height: 100vh;
89
+ padding-bottom: env(keyboard-inset-height, 0px);
90
+ }
91
+ }
92
+
2
93
  .form-container {
3
94
  position: relative;
4
95
  width: 100%;
@@ -14,7 +105,83 @@
14
105
  max-height: 100%;
15
106
  width: 100%;
16
107
  }
108
+ .ele-shape {
109
+ position: absolute;
110
+ overflow: hidden;
111
+ }
112
+
113
+ .ani-wrap {
114
+ width: 100%;
115
+ height: 100%;
116
+ box-sizing: border-box;
117
+ }
118
+
119
+ .e-shape {
120
+ width: 100%;
121
+ height: 100%;
122
+ }
17
123
 
124
+ .svg-container :deep(svg) {
125
+ width: 100%;
126
+ height: 100%;
127
+ display: block;
128
+ }
129
+
130
+ .svg-loading,
131
+ .svg-error {
132
+ display: flex;
133
+ align-items: center;
134
+ justify-content: center;
135
+ width: 100%;
136
+ height: 100%;
137
+ background: rgba(0,0,0,0.05);
138
+ }
139
+ .element-video {
140
+ position: absolute;
141
+ overflow: hidden;
142
+ background-color: transparent;
143
+ }
144
+
145
+ .element-video .ani-wrap, .element-video img {
146
+ display: block;
147
+ width: 100%;
148
+ height: 100%;
149
+ }
150
+
151
+ .video-container {
152
+ width: 100%;
153
+ height: 100%;
154
+ }
155
+
156
+ .video-container iframe {
157
+ width: 100%;
158
+ height: 100%;
159
+ border: none;
160
+ }
161
+
162
+ .video-cover {
163
+ position: relative;
164
+ width: 100%;
165
+ height: 100%;
166
+ background-size: cover;
167
+ background-position: center;
168
+ cursor: pointer;
169
+ }
170
+
171
+ .video-cover .play-btn {
172
+ position: absolute;
173
+ left: 50%;
174
+ top: 50%;
175
+ transform: translate(-50%, -50%);
176
+ width: 50px;
177
+ height: 50px;
178
+ opacity: 0.8;
179
+ transition: opacity 0.2s;
180
+ }
181
+
182
+ .video-cover:hover .play-btn {
183
+ opacity: 1;
184
+ }
18
185
  .ele-text {
19
186
  position: relative;
20
187
  }
@@ -81,1731 +248,1706 @@
81
248
  transform: scale(1);
82
249
  opacity: 1;
83
250
  }
84
- }.ele-shape {
85
- position: absolute;
86
- overflow: hidden;
87
251
  }
88
-
89
- .ani-wrap {
90
- width: 100%;
91
- height: 100%;
92
- box-sizing: border-box;
252
+ .ele-lottie .ele-lotwrap {
253
+ overflow: hidden;
254
+ }
255
+ @keyframes jumpheart {
256
+ to {
257
+ -webkit-transform: scale(1.2);
258
+ transform: scale(1.2)
259
+ }
260
+ }
261
+ .ele-calendar {
262
+ position: relative;
263
+ width: 325px !important;
264
+ min-height: 325px !important;
265
+ height: auto !important;
93
266
  }
94
267
 
95
- .e-shape {
96
- width: 100%;
97
- height: 100%;
268
+ .ele-calendar .drag-point {
269
+ cursor: default !important;
98
270
  }
99
271
 
100
- .svg-container :deep(svg) {
272
+ .ele-calendar .ani-wrap {
273
+ position: relative;
101
274
  width: 100%;
102
- height: 100%;
103
- display: block;
275
+ min-height: 325px !important;
276
+ height: auto !important;
277
+ padding: 22px 0;
104
278
  }
105
279
 
106
- .svg-loading,
107
- .svg-error {
280
+ .ele-calendar .ani-wrap .can-wrap .can-top {
108
281
  display: flex;
109
- align-items: center;
110
- justify-content: center;
111
- width: 100%;
112
- height: 100%;
113
- background: rgba(0,0,0,0.05);
114
- }.ele-img {
115
- position: absolute;
116
- overflow: hidden;
117
- }
118
-
119
- .ele-img .ani-wrap {
120
- width: 100%;
121
- height: 100%;
122
- }
123
-
124
- .ele-img .ele-image {
125
- position: relative;
126
- display: block;
127
- }
128
-
129
- .ele-img .rotate-wrap {
130
- position: absolute;
131
- left: 0;
132
- right: 0;
133
- top: 0;
134
- bottom: 0;
135
- }
136
-
137
- .ele-img .ele-img-bg,
138
- .ele-img .rotate-wrap .img-wrap {
139
- width: 100%;
140
- height: 100%;
141
- overflow: hidden;
142
- }
143
-
144
- .ele-img .ele-bg-wrap {
145
- width: 100%;
146
- height: 100%;
147
- background-size: cover;
148
- background-position: 50% 50%;
149
- background-repeat: no-repeat;
150
- background-clip: border-box;
151
- }
152
-
153
- /* 动画关键帧 */
154
- @keyframes zoomIn {
155
- from {
156
- opacity: 0;
157
- transform: scale(0.5);
158
- }
159
- to {
160
- opacity: 1;
161
- transform: scale(1);
162
- }
163
- }.element-ditu .ani-wrap {
164
- width: 100%;
165
- height: 100%;
166
- overflow: hidden
282
+ justify-content: space-between;
283
+ align-items: flex-end;
284
+ line-height: 1;
285
+ padding: 0 47px 20px;
167
286
  }
168
287
 
169
- .element-ditu .map {
170
- width: 100%;
171
- height: 100%
288
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
289
+ font-size: 25px;
290
+ padding-bottom: 4px;
172
291
  }
173
292
 
174
- .element-ditu .map .el-button {
175
- width: 100%;
176
- height: 100%;
177
- display: -webkit-box;
178
- display: -ms-flexbox;
179
- display: flex;
180
- -webkit-box-align: center;
181
- -ms-flex-align: center;
182
- align-items: center;
183
- padding: 0;
184
- -webkit-box-pack: center;
185
- -ms-flex-pack: center;
186
- justify-content: center;
187
- background: inherit;
188
- color: inherit;
189
- border: none
293
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
294
+ font-size: 25px;
190
295
  }
191
296
 
192
- .element-ditu .center-map {
193
- width: 100%;
194
- height: 100%;
195
- background: #fff
297
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
298
+ position: relative;
299
+ top: 2px;
300
+ font-size: 57px;
196
301
  }
197
302
 
198
- .element-ditu .mask-map {
199
- position: absolute;
200
- width: 100%;
201
- height: 100%;
202
- top: 0
303
+ .ele-calendar .ani-wrap .can-wrap .can-main {
304
+ padding: 0 23px;
203
305
  }
204
- .map-iframe {
205
- width: 100%;
206
- height: 100%;
207
- }/* Iconfont definition */
208
- .icon-danmuliebiao1:before {
209
- content: "\E68A";
210
- }
211
-
212
- .icon-cuowu2:before {
213
- content: "\E65E";
214
- }
215
-
216
- i {
217
- font-style: normal;
218
- }
219
-
220
- .v-modal {
221
- position: fixed;
222
- left: 0;
223
- top: 0;
224
- width: 100%;
225
- height: 100%;
226
- opacity: .5;
227
- background: #000;
228
- }
229
- /* 底部工具栏样式 */
230
- #toolbarNew {
231
- position: fixed;
232
- left: 0;
233
- bottom: 0;
234
- width: 100%;
235
- padding: 12px 0;
236
- background: url('https://h5cdn.unika.cc/static/img/uniComponents/inputBg.png') 0 0 repeat-x;
237
- z-index: 100;
238
- }
239
-
240
- .toolbar {
241
- display: flex;
242
- align-items: center;
243
- padding: 0 10px;
244
- }
245
-
246
- .bar-left {
247
- position: relative;
248
- flex: 1;
249
- }
250
-
251
- .bar-mess {
252
- width: 100%;
253
- height: 36px;
254
- line-height: 36px;
255
- font-size: 14px;
256
- color: #ccc;
257
- padding: 0 8px;
258
- border-radius: 18px;
259
- border: none;
260
- -webkit-appearance: none;
261
- background-color: rgba(0, 0, 0, 0.28);
262
- }
263
-
264
- .bar-mess::placeholder {
265
- color: rgba(255, 255, 255, 0.7);
266
- }
267
-
268
- .bar-left .iconfont {
269
- position: absolute;
270
- right: 10px;
271
- top: 50%;
272
- transform: translateY(-50%);
273
- color: #f2f2f2;
274
- font-size: 16px;
275
- cursor: pointer;
276
- z-index: 2;
277
- padding: 5px;
278
- }
279
-
280
- /* 关闭弹幕按钮样式 */
281
- .toolbar-close {
282
- position: absolute;
283
- left: 10px;
284
- transform: translateY(-50%);
285
- display: flex;
286
- align-items: center;
287
- cursor: pointer;
288
- z-index: 2;
289
- }
290
-
291
- .toolbar-close img {
292
- display: block;
293
- width: 36px;
294
- height: 36px;
295
- cursor: pointer;
296
- }
297
-
298
- /* 弹幕容器样式 */
299
- .bullet-container {
300
- position: fixed;
301
- left: 10px;
302
- right: 10px;
303
- height: 120px;
304
- overflow: hidden;
305
- z-index: 99;
306
- pointer-events: none;
307
- }
308
-
309
- .bullet-item {
310
- position: absolute;
311
- left: 0;
312
- bottom: 0;
313
- padding: 5px 10px;
314
- border-radius: 15px;
315
- font-size: 14px;
316
- white-space: nowrap;
317
- animation: bulletMove linear;
318
- animation-fill-mode: forwards;
319
- will-change: transform;
320
- display: inline-block;
321
- max-width: 90%;
322
- }
323
-
324
- @keyframes bulletMove {
325
- 0% {
326
- transform: translateY(0);
327
- opacity: 1;
328
- }
329
- 100% {
330
- transform: translateY(calc(-1 * 150px));
331
- opacity: 0;
332
- }
333
- }
334
-
335
- /* 弹幕输入弹窗样式 */
336
- .popup-overlay {
337
- position: fixed;
338
- top: 0;
339
- left: 0;
340
- right: 0;
341
- bottom: 0;
342
- background: rgba(0, 0, 0, 0.5);
343
- display: flex;
344
- justify-content: center;
345
- align-items: flex-end;
346
- z-index: 200;
347
- }
348
-
349
- #index .mint-popup {
350
- background-color: transparent;
351
- }
352
-
353
- .mint-popup {
354
- position: fixed;
355
- background: #fff;
356
- top: 50%;
357
- left: 50%;
358
- transform: translate3d(-50%, -50%, 0);
359
- -webkit-backface-visibility: hidden;
360
- backface-visibility: hidden;
361
- transition: .2s ease-out;
362
- }
363
-
364
- .bar-messwin {
365
- width: 309px;
366
- height: 341px;
367
- background: url('https://h5cdn.unika.cc/static/img/uniComponents/mess-bg.png') no-repeat 50%;
368
- background-size: 100% 100%;
369
- position: relative;
370
- display: flex;
371
- flex-direction: column;
372
- align-items: center;
373
- margin-bottom: 20px;
374
- }
375
-
376
- .bar-messwin .mess-logo {
377
- width: 171px;
378
- height: 110px;
379
- margin-top: -64px;
380
- margin-left: 11px;
381
- }
382
-
383
- .bar-messwin .mess-title {
384
- margin-top: 12px;
385
- font-weight: 600;
386
- font-size: 21px;
387
- color: #333;
388
- }
389
-
390
- .bar-messwin .mess-input {
391
- width: 267px;
392
- height: 43px;
393
- background: #fff;
394
- border-radius: 9px;
395
- border: 1px solid rgba(237,85,102,0.4);
396
- margin-top: 12px;
397
- display: flex;
398
- align-items: center;
399
- justify-content: center;
400
- padding: 0 13px;
401
- }
402
-
403
- .bar-messwin .mess-input input {
404
- width: 100%;
405
- font-size: 17px;
406
- font-family: PingFang SC;
407
- font-weight: 400;
408
- color: #333;
409
- border: none;
410
- outline: none;
411
- background: transparent;
412
- }
413
-
414
- .bar-messwin .mess-input input::-webkit-input-placeholder {
415
- color: #999;
416
- }
417
-
418
- .bar-messwin .mess-input input::-ms-input-placeholder {
419
- color: #999;
420
- }
421
-
422
- .bar-messwin .mess-input input::placeholder {
423
- color: #999;
424
- }
425
-
426
- .bar-messwin .mess-textarea {
427
- width: 267px;
428
- height: 85px;
429
- background: #fff;
430
- border-radius: 9px;
431
- border: 1px solid rgba(237,85,102,0.4);
432
- display: flex;
433
- padding: 9px 13px;
434
- justify-content: space-between;
435
- margin-top: 12px;
436
- position: relative;
437
- }
438
-
439
- .bar-messwin .mess-textarea textarea {
440
- width: 203px;
441
- height: 68px;
442
- font-size: 17px;
443
- resize: none;
444
- outline: none;
445
- border: none;
446
- background: transparent;
447
- color: #333;
448
- font-family: PingFang SC;
449
- }
450
-
451
- .bar-messwin .mess-textarea textarea::-webkit-input-placeholder {
452
- color: #999;
453
- }
454
-
455
- .bar-messwin .mess-textarea textarea::-ms-input-placeholder {
456
- color: #999;
457
- }
458
-
459
- .bar-messwin .mess-textarea textarea::placeholder {
460
- color: #999;
461
- }
462
-
463
- .bar-messwin .mess-textarea img {
464
- width: 26px;
465
- height: 26px;
466
- cursor: pointer;
467
- }
468
-
469
- .bar-messwin .mess-textarea .wish-dropdown {
470
- position: absolute;
471
- top: 43px;
472
- right: 0;
473
- width: 267px;
474
- background: #fff;
475
- border-radius: 9px;
476
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
477
- z-index: 10;
478
- max-height: 213px;
479
- overflow-y: auto;
480
- border: 1px solid rgba(237,85,102,0.2);
481
- padding: 0 13px;
482
- }
483
-
484
- .bar-messwin .mess-textarea .wish-dropdown::-webkit-scrollbar {
485
- width: 3px;
486
- background-color: transparent;
487
- display: block;
488
- }
489
-
490
- .bar-messwin .mess-textarea .wish-dropdown::-webkit-scrollbar-thumb {
491
- background-color: #ccc;
492
- border-radius: 9px;
493
- min-height: 32px;
494
- }
495
-
496
- .bar-messwin .mess-textarea .wish-dropdown::-webkit-scrollbar-track {
497
- background-color: transparent;
498
- border-radius: 3px;
499
- margin: 4px 0;
500
- }
501
-
502
- .bar-messwin .mess-textarea .wish-dropdown .wish-item {
503
- padding: 11px 0;
504
- display: flex;
505
- align-items: flex-start;
506
- cursor: pointer;
507
- transition: background-color 0.2s;
508
- border-bottom: 1px solid rgba(0,0,0,0.05);
509
- }
510
-
511
- .bar-messwin .mess-textarea .wish-dropdown .wish-item:last-child {
512
- border-bottom: none;
513
- }
514
-
515
- .bar-messwin .mess-textarea .wish-dropdown .wish-item .wish-dot {
516
- color: #ff4874;
517
- margin-right: 5px;
518
- font-size: 11px;
519
- line-height: 21px;
520
- }
521
-
522
- .bar-messwin .mess-textarea .wish-dropdown .wish-item .wish-text {
523
- font-size: 15px;
524
- color: #333;
525
- line-height: 21px;
526
- text-align: left;
527
- }
528
-
529
- .bar-messwin .bar-m-sub {
530
- width: 267px;
531
- height: 43px;
532
- background: linear-gradient(270deg,#ff4874,#ff9061);
533
- border-radius: 68px;
534
- font-size: 17px;
535
- font-family: PingFang SC;
536
- font-weight: 400;
537
- color: #fff;
538
- margin-top: 26px;
539
- border: none;
540
- outline: none;
541
- cursor: pointer;
542
- display: flex;
543
- align-items: center;
544
- justify-content: center;
545
- }
546
-
547
- .bar-messwin .icon-cuowu2, .give-gift .icon-cuowu2 {
548
- position: absolute;
549
- bottom: -60px;
550
- right: 50%;
551
- transform: translateX(50%);
552
- font-size: 28px;
553
- color: #fff;
554
- cursor: pointer;
555
- }
556
-
557
- /* 提示弹窗样式 */
558
- .mint-msgbox-wrapper {
559
- position: fixed;
560
- top: 0;
561
- left: 0;
562
- right: 0;
563
- bottom: 0;
564
- background-color: rgba(0,0,0,0.5);
565
- z-index: 2005;
566
- display: flex;
567
- justify-content: center;
568
- align-items: center;
569
- }
570
-
571
- .mint-msgbox {
572
- position: relative;
573
- background-color: #fff;
574
- width: 85%;
575
- border-radius: 3px;
576
- font-size: 17px;
577
- overflow: hidden;
578
- }
579
-
580
- .mint-msgbox-header {
581
- padding: 16px 0 0;
582
- }
583
-
584
- .mint-msgbox-content {
585
- padding: 11px 21px 16px;
586
- border-bottom: 1px solid #ddd;
587
- min-height: 38px;
588
- position: relative;
589
- }
590
-
591
- .mint-msgbox-title {
592
- text-align: center;
593
- padding-left: 0;
594
- margin-bottom: 0;
595
- font-size: 17px;
596
- font-weight: 700;
597
- color: #333;
598
- }
599
-
600
- .mint-msgbox-message {
601
- color: #999;
602
- margin: 0;
603
- text-align: center;
604
- line-height: 38px;
605
- }
606
-
607
- .mint-msgbox-btns {
608
- display: flex;
609
- height: 43px;
610
- line-height: 43px;
611
- }
612
-
613
- .mint-msgbox-btn {
614
- line-height: 37px;
615
- display: block;
616
- background-color: #fff;
617
- flex: 1;
618
- margin: 0;
619
- border: 0;
620
- }
621
-
622
- .mint-msgbox-confirm {
623
- color: #26a2ff;
624
- width: 100%;
625
- }
626
- /* 右侧按钮区域样式 */
627
- #toolbarNew .toolbar .bar-right {
628
- margin-left: 7px;
629
- font-size: 0;
630
- display: flex;
631
- align-items: center;
632
- }
633
-
634
- #toolbarNew .toolbar .bar-right.move-left {
635
- right: 64px;
636
- }
637
-
638
- #toolbarNew .toolbar .bar-right .bar-r-com,
639
- #toolbarNew .toolbar .bar-right>img {
640
- display: inline-block;
641
- vertical-align: middle;
642
- }
643
-
644
- #toolbarNew .toolbar .bar-right .bar-r-com {
645
- margin-left: 8px;
646
- cursor: pointer;
647
- }
648
-
649
- #toolbarNew .toolbar .bar-right .bar-r-com.bar-r-gift {
650
- width: 36px;
651
- height: 36px;
652
- transform-origin: center bottom;
653
- animation: giftJump 3s ease infinite;
654
- }
655
-
656
- @keyframes giftJump {
657
- 0%, 24%, 48%, to {
658
- transform: translateZ(0);
659
- }
660
- 12% {
661
- transform: translate3d(0, -10px, 0);
662
- }
663
- 36% {
664
- transform: translate3d(0, -10px, 0);
665
- }
666
- }
667
-
668
- #toolbarNew .toolbar .bar-right .bar-r-com:first-child {
669
- margin-left: 0;
670
- }
671
-
672
- #toolbarNew .toolbar .bar-right>img {
673
- position: relative;
674
- z-index: 1;
675
- width: 26px;
676
- height: 26px;
677
- }
678
-
679
- #toolbarNew .toolbar .bar-right .bar-heart {
680
- position: relative;
681
- width: 36px;
682
- height: 36px;
683
- text-align: center;
684
- }
685
-
686
- #toolbarNew .toolbar .bar-right .bar-heart .bar-praise {
687
- position: absolute;
688
- max-width: 36px;
689
- height: 15px;
690
- line-height: 15px;
691
- right: 0;
692
- top: 0;
693
- z-index: 3;
694
- font-size: 10px;
695
- color: #fff;
696
- border-radius: 6px;
697
- padding: 0 4px;
698
- box-sizing: border-box;
699
- white-space: nowrap;
700
- background-color: #f38200;
701
- transform: translateX(40%);
702
- }
703
-
704
- #toolbarNew .toolbar .bar-right .bar-zan {
705
- position: relative;
706
- z-index: 2;
707
- height: 33px;
708
- width: 33px;
709
- box-sizing: border-box;
710
- }
711
-
712
- #toolbarNew .toolbar .bar-right .bar-zan .ani-num {
713
- position: absolute;
714
- top: 0;
715
- left: 10px;
716
- opacity: 0;
717
- font-size: 15px;
718
- color: #f07a87;
719
- }
720
-
721
- #toolbarNew .toolbar .bar-right .bar-zan .stop-longtap {
722
- position: absolute;
723
- left: 0;
724
- right: 0;
725
- bottom: 0;
726
- top: 0;
727
- z-index: 1;
728
- }
729
-
730
- #toolbarNew .toolbar .bar-right .bar-zan img {
731
- width: 36px;
732
- height: 36px;
733
- }
734
-
735
- #toolbarNew .toolbar .bar-right .bar-zan.active .ani-num {
736
- z-index: 2;
737
- animation: praise 1.2s;
738
- animation-fill-mode: both;
739
- }
740
-
741
- @keyframes praise {
742
- 0% {
743
- opacity: 1;
744
- }
745
- 50% {
746
- opacity: 1;
747
- transform: translate3d(0, -35px, 0);
748
- }
749
- to {
750
- opacity: 0;
751
- transform: translate3d(0, -35px, 0);
752
- }
753
- }
754
-
755
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap {
756
- transform: scale(0.85);
757
- }
758
-
759
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:first-of-type {
760
- animation: jump .6s ease-out;
761
- }
762
-
763
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(2) {
764
- animation: jump2 .6s ease-out;
765
- }
766
-
767
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(3) {
768
- animation: jump3 .6s ease-out;
769
- }
770
-
771
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(4) {
772
- animation: jump4 .6s ease-out;
773
- }
774
-
775
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(5) {
776
- animation: jump5 .6s ease-out;
777
- }
778
-
779
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(6) {
780
- animation: jump6 .6s ease-out;
781
- }
782
-
783
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(7) {
784
- animation: jump7 .6s ease-out;
785
- }
786
-
787
- #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(8) {
788
- animation: jump8 .6s ease-out;
789
- }
790
-
791
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap {
792
- position: absolute;
793
- left: 0;
794
- top: 0;
795
- right: 0;
796
- bottom: 0;
797
- pointer-events: none;
798
- overflow: visible;
799
- }
800
-
801
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span {
802
- position: absolute;
803
- width: 6px;
804
- height: 6px;
805
- border-radius: 50%;
806
- opacity: 0;
807
- }
808
-
809
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:first-of-type {
810
- left: 50%;
811
- top: -8px;
812
- transform: translate3d(-50%, 0, 0);
813
- background-color: #b3e5c8;
814
- }
815
-
816
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(2) {
817
- left: -8px;
818
- top: 50%;
819
- transform: translate3d(0, -50%, 0);
820
- background-color: #f4ba31;
821
- }
822
-
823
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(3) {
824
- left: 50%;
825
- bottom: -8px;
826
- transform: translate3d(-50%, 0, 0);
827
- background-color: #339fef;
828
- }
829
-
830
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(4) {
831
- top: 50%;
832
- right: -8px;
833
- transform: translate3d(0, -50%, 0);
834
- background-color: #e2264d;
835
- }
836
-
837
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(5) {
838
- left: -5px;
839
- top: 0;
840
- transform: translate3d(0, -50%, 0);
841
- background-color: #a08880;
842
- }
843
-
844
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(6) {
845
- left: -5px;
846
- bottom: 0;
847
- transform: translate3d(0, 50%, 0);
848
- background-color: #43c1b5;
849
- }
850
-
851
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(7) {
852
- right: -5px;
853
- bottom: 0;
854
- transform: translate3d(0, 50%, 0);
855
- background-color: #f5be3b;
856
- }
857
-
858
- #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(8) {
859
- right: -5px;
860
- top: 0;
861
- transform: translate3d(0, -50%, 0);
862
- background-color: coral;
863
- }
864
-
865
- @keyframes jump {
866
- 0% {
867
- opacity: 1;
868
- transform: translate3d(-50%, 0, 0) scale(1);
869
- }
870
- 40% {
871
- transform: translate3d(-50%, -100%, 0) scale(0.7);
872
- }
873
- to {
874
- opacity: 1;
875
- transform: translate3d(-50%, -150%, 0) scale(0);
876
- }
877
- }
878
-
879
- @keyframes jump2 {
880
- 0% {
881
- opacity: 1;
882
- transform: translate3d(0, -50%, 0) scale(1);
883
- }
884
- 40% {
885
- transform: translate3d(-100%, -50%, 0) scale(0.7);
886
- }
887
- to {
888
- opacity: 1;
889
- transform: translate3d(-150%, -50%, 0) scale(0);
890
- }
891
- }
892
-
893
- @keyframes jump3 {
894
- 0% {
895
- opacity: 1;
896
- transform: translate3d(-50%, 0, 0) scale(1);
897
- }
898
- 40% {
899
- transform: translate3d(-50%, 100%, 0) scale(0.7);
900
- }
901
- to {
902
- opacity: 1;
903
- transform: translate3d(-50%, 150%, 0) scale(0);
904
- }
905
- }
906
-
907
- @keyframes jump4 {
908
- 0% {
909
- opacity: 1;
910
- transform: translate3d(0, -50%, 0) scale(1);
911
- }
912
- 40% {
913
- transform: translate3d(100%, -50%, 0) scale(0.7);
914
- }
915
- to {
916
- opacity: 1;
917
- transform: translate3d(150%, -50%, 0) scale(0);
918
- }
919
- }
920
-
921
- @keyframes jump5 {
922
- 0% {
923
- opacity: 1;
924
- transform: translate3d(0, -50%, 0) scale(1);
925
- }
926
- 40% {
927
- transform: translate3d(-80%, -80%, 0) scale(0.7);
928
- }
929
- to {
930
- opacity: 1;
931
- transform: translate3d(-130%, -130%, 0) scale(0);
932
- }
933
- }
934
-
935
- @keyframes jump6 {
936
- 0% {
937
- opacity: 1;
938
- transform: translate3d(0, 50%, 0) scale(1);
939
- }
940
- 40% {
941
- transform: translate3d(-80%, 80%, 0) scale(0.7);
942
- }
943
- to {
944
- opacity: 1;
945
- transform: translate3d(-130%, 130%, 0) scale(0);
946
- }
947
- }
948
-
949
- @keyframes jump7 {
950
- 0% {
951
- opacity: 1;
952
- transform: translate3d(0, 50%, 0) scale(1);
953
- }
954
- 40% {
955
- transform: translate3d(80%, 80%, 0) scale(0.7);
956
- }
957
- to {
958
- opacity: 1;
959
- transform: translate3d(130%, 130%, 0) scale(0);
960
- }
961
- }
962
-
963
- @keyframes jump8 {
964
- 0% {
965
- opacity: 1;
966
- transform: translate3d(0, 50%, 0) scale(1);
967
- }
968
- 40% {
969
- transform: translate3d(80%, -80%, 0) scale(0.7);
970
- }
971
- to {
972
- opacity: 1;
973
- transform: translate3d(130%, -130%, 0) scale(0);
974
- }
975
- }
976
-
977
- /* 礼物弹窗样式 */
978
- .give-gift {
979
- position: fixed;
980
- top: 50%;
981
- left: 50%;
982
- transform: translate(-50%, -50%);
983
- z-index: 2004;
984
- background: white;
985
- padding: 20px;
986
- border-radius: 10px;
987
- text-align: center;
988
- }
989
-
990
- .give-gift .back {
991
- position: absolute;
992
- top: 10px;
993
- left: 10px;
994
- cursor: pointer;
995
- }
996
-
997
- .give-gift img {
998
- max-width: 300px;
999
- max-height: 300px;
1000
- margin-top: 20px;
1001
- }
1002
-
1003
- /* 留言成功弹窗样式 */
1004
- .mess-success-popup {
1005
- position: fixed;
1006
- top: 0;
1007
- left: 0;
1008
- right: 0;
1009
- bottom: 0;
1010
- background-color: rgba(0, 0, 0, 0.5);
1011
- z-index: 2003;
1012
- display: flex;
1013
- justify-content: center;
1014
- align-items: center;
1015
- }
1016
-
1017
- .mess-success-popup .gift-popup {
1018
- width: 300px;
1019
- height: 200px;
1020
- background: url('https://h5cdn.unika.cc/static/img/uniComponents/bg-color.png') no-repeat;
1021
- border-radius: 10px;
1022
- padding: 20px;
1023
- text-align: center;
1024
- position: relative;
1025
- }
1026
-
1027
- .mess-success-popup .gift-popup .icon-cuowu2 {
1028
- position: absolute;
1029
- top: 10px;
1030
- right: 10px;
1031
- cursor: pointer;
1032
- }
1033
-
1034
- .mess-success-popup .gift-popup .toast {
1035
- display: flex;
1036
- align-items: center;
1037
- justify-content: center;
1038
- margin: 10px 0;
1039
- }
1040
-
1041
- .mess-success-popup .gift-popup .toast img {
1042
- width: 20px;
1043
- height: 15px;
1044
- margin: 0 5px;
1045
- }
1046
-
1047
- .mess-success-popup .gift-popup .title {
1048
- margin: 15px 0;
1049
- font-size: 16px;
1050
- color: #333;
1051
- }
1052
-
1053
- .mess-success-popup .gift-popup .btn {
1054
- background: linear-gradient(270deg, #ff4874, #ff9061);
1055
- color: white;
1056
- border: none;
1057
- padding: 10px 20px;
1058
- border-radius: 20px;
1059
- margin-top: 15px;
1060
- cursor: pointer;
306
+
307
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
308
+ display: flex;
309
+ justify-content: flex-start;
310
+ height: 25px;
311
+ line-height: 25px;
312
+ padding: 0 10px;
313
+ border-radius: 13px;
314
+ }
315
+
316
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-week span {
317
+ width: 14.2%;
318
+ text-align: center;
319
+ color: #fff;
320
+ font-size: 12px;
321
+ }
322
+
323
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul {
324
+ font-size: 0;
325
+ padding: 5px 10px 0;
326
+ text-align: left;
327
+ }
328
+
329
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li {
330
+ position: relative;
331
+ display: inline-block;
332
+ height: 25px;
333
+ text-align: center;
334
+ margin-top: 8px;
335
+ }
336
+
337
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active .iconfont {
338
+ display: block;
339
+ }
340
+
341
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active span {
342
+ color: #fff !important;
343
+ }
344
+
345
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
346
+ animation: jumpheart 0.8s ease infinite alternate;
347
+ }
348
+
349
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
350
+ display: none;
351
+ font-size: 26px;
352
+ }
353
+
354
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li span {
355
+ position: absolute;
356
+ left: 50%;
357
+ top: 50%;
358
+ z-index: 1;
359
+ color: #666;
360
+ font-size: 13px;
361
+ transform: translate(-50%, -52%);
362
+ }
363
+
364
+ .ele-calendar .bottom-center,
365
+ .ele-calendar .left-center,
366
+ .ele-calendar .right-center,
367
+ .ele-calendar .top-center {
368
+ display: none !important;
369
+ }
370
+
371
+ .ele-calendar .ani-wrap .can-wrap2 {
372
+ padding: 21px 23px 0
373
+ }
374
+
375
+ .ele-calendar .ani-wrap .can-wrap2 .can-top {
376
+ display: -webkit-box;
377
+ display: -ms-flexbox;
378
+ display: flex;
379
+ -webkit-box-pack: justify;
380
+ -ms-flex-pack: justify;
381
+ justify-content: space-between;
382
+ -webkit-box-align: end;
383
+ -ms-flex-align: end;
384
+ align-items: flex-end;
385
+ line-height: 1;
386
+ padding: 0 16px 22px;
387
+ font-size: 36px
388
+ }
389
+
390
+ .ele-calendar .ani-wrap .can-wrap2 .can-top span {
391
+ font-size: 16px
392
+ }
393
+
394
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week {
395
+ display: -webkit-box;
396
+ display: -ms-flexbox;
397
+ display: flex;
398
+ -webkit-box-pack: start;
399
+ -ms-flex-pack: start;
400
+ justify-content: flex-start;
401
+ height: 25px;
402
+ line-height: 25px;
403
+ padding: 0 10px;
404
+ border-radius: 13px
405
+ }
406
+
407
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week span {
408
+ width: 14.2%;
409
+ text-align: center;
410
+ color: #fff;
411
+ font-size: 12px;
412
+ font-weight: 600
413
+ }
414
+
415
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date {
416
+ position: relative
417
+ }
418
+
419
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date .can-year {
420
+ position: absolute;
421
+ white-space: nowrap;
422
+ left: 50%;
423
+ top: 15%;
424
+ -webkit-transform: translateX(-50%);
425
+ transform: translateX(-50%);
426
+ font-size: 76px;
427
+ opacity: .1;
428
+ font-weight: 600
429
+ }
430
+
431
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul {
432
+ font-size: 0;
433
+ padding: 5px 10px 0;
434
+ text-align: left
435
+ }
436
+
437
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li {
438
+ position: relative;
439
+ display: inline-block;
440
+ width: 14.2%;
441
+ height: 25px;
442
+ text-align: center;
443
+ margin-top: 8px
444
+ }
445
+
446
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active .iconfont {
447
+ display: block;
448
+ position: absolute;
449
+ left: 17%;
450
+ top: 0;
451
+ font-size: 25px
452
+ }
453
+
454
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active span {
455
+ color: #fff!important
456
+ }
457
+
458
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.heart-ani .iconfont {
459
+ -webkit-animation: jumpheart .8s ease infinite alternate;
460
+ animation: jumpheart .8s ease infinite alternate
461
+ }
462
+
463
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li .iconfont {
464
+ display: none;
465
+ font-size: 26px
466
+ }
467
+
468
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li span {
469
+ position: absolute;
470
+ left: 50%;
471
+ top: 50%;
472
+ z-index: 1;
473
+ color: #666;
474
+ font-size: 13px;
475
+ -webkit-transform: translate(-50%,-52%);
476
+ transform: translate(-50%,-52%)
477
+ }
478
+
479
+ .ele-calendar .ani-wrap .can-wrap3 .can-top {
480
+ display: -webkit-box;
481
+ display: -ms-flexbox;
482
+ display: flex;
483
+ -webkit-box-pack: justify;
484
+ -ms-flex-pack: justify;
485
+ justify-content: space-between;
486
+ -webkit-box-align: end;
487
+ -ms-flex-align: end;
488
+ align-items: flex-end;
489
+ line-height: 1;
490
+ padding: 18px 33px 10px;
491
+ font-size: 36px;
492
+ }
493
+
494
+ .ele-calendar .ani-wrap .can-wrap3 .can-top span {
495
+ font-size: 16px
496
+ }
497
+
498
+ .ele-calendar .ani-wrap .can-wrap3 .can-top .can-year {
499
+ font-size: 20px
500
+ }
501
+
502
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week {
503
+ display: -webkit-box;
504
+ display: -ms-flexbox;
505
+ display: flex;
506
+ -webkit-box-pack: start;
507
+ -ms-flex-pack: start;
508
+ justify-content: flex-start;
509
+ height: 40px;
510
+ line-height: 40px;
511
+ padding: 0 34px;
512
+ border-bottom: 1px solid
513
+ }
514
+
515
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week span {
516
+ width: 14.2%;
517
+ text-align: center;
518
+ color: #fff;
519
+ font-size: 12px;
520
+ font-weight: 600
521
+ }
522
+
523
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date {
524
+ position: relative
525
+ }
526
+
527
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul {
528
+ font-size: 0;
529
+ padding: 5px 33px 0;
530
+ text-align: left
531
+ }
532
+
533
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li {
534
+ position: relative;
535
+ display: inline-block;
536
+ width: 14.2%;
537
+ height: 25px;
538
+ text-align: center;
539
+ margin-top: 8px;
540
+ }
541
+
542
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active {
543
+ color: #eee
544
+ }
545
+
546
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active .iconfont {
547
+ display: block;
548
+ position: absolute;
549
+ left: 12%;
550
+ top: 2px;
551
+ }
552
+
553
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active span {
554
+ font-size: 12px
555
+ }
556
+
557
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.heart-ani .iconfont {
558
+ -webkit-animation: jumpheart .8s ease infinite alternate;
559
+ animation: jumpheart .8s ease infinite alternate
560
+ }
561
+
562
+ @keyframes jumpheart {
563
+ to {
564
+ -webkit-transform: scale(1.2);
565
+ transform: scale(1.2)
1061
566
  }
1062
-
1063
- /* 新增图片加载动画样式 */
1064
- .gift-image-container {
1065
- position: relative;
1066
- width: 300px;
1067
- height: 300px;
1068
- margin: 20px 0;
567
+ }
568
+
569
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li .iconfont {
570
+ display: none;
571
+ font-size: 26px
572
+ }
573
+
574
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li span {
575
+ position: absolute;
576
+ left: 50%;
577
+ top: 50%;
578
+ z-index: 1;
579
+ color: #666;
580
+ font-size: 13px;
581
+ -webkit-transform: translate(-50%,-52%);
582
+ transform: translate(-50%,-52%)
583
+ }
584
+
585
+ .ele-calendar .bottom-center,.ele-calendar .left-center,.ele-calendar .right-center,.ele-calendar .top-center {
586
+ display: none!important
587
+ }
588
+ .icon-tuoyuanxing:before {
589
+ content: "\E6A7";
590
+ }
591
+ .icon-zan1:before {
592
+ content: "\E66D";
593
+ }
594
+ .icon-xingzhuangjiehe:before {
595
+ content: "\E6A6";
596
+ }.ele-img {
597
+ position: absolute;
1069
598
  overflow: hidden;
1070
599
  }
1071
600
 
1072
- .gift-image-container img {
601
+ .ele-img .ani-wrap {
1073
602
  width: 100%;
1074
603
  height: 100%;
1075
- object-fit: contain;
1076
- opacity: 0;
1077
- transition: opacity 0.5s ease-in-out;
1078
604
  }
1079
605
 
1080
- .gift-image-container img.loaded {
1081
- opacity: 1;
606
+ .ele-img .ele-image {
607
+ position: relative;
608
+ display: block;
1082
609
  }
1083
610
 
1084
- .image-loading {
611
+ .ele-img .rotate-wrap {
1085
612
  position: absolute;
1086
- top: 0;
1087
613
  left: 0;
1088
- width: 100%;
1089
- height: 100%;
1090
- display: flex;
1091
- justify-content: center;
1092
- align-items: center;
1093
- background: rgba(255, 255, 255, 0.8);
614
+ right: 0;
615
+ top: 0;
616
+ bottom: 0;
1094
617
  }
1095
618
 
1096
- .loading-spinner {
1097
- width: 40px;
1098
- height: 40px;
1099
- border: 4px solid #f3f3f3;
1100
- border-top: 4px solid #ed5566;
1101
- border-radius: 50%;
1102
- animation: spin 1s linear infinite;
619
+ .ele-img .ele-img-bg,
620
+ .ele-img .rotate-wrap .img-wrap {
621
+ width: 100%;
622
+ height: 100%;
623
+ overflow: hidden;
1103
624
  }
1104
625
 
1105
- @keyframes spin {
1106
- 0% { transform: rotate(0deg); }
1107
- 100% { transform: rotate(360deg); }
626
+ .ele-img .ele-bg-wrap {
627
+ width: 100%;
628
+ height: 100%;
629
+ background-size: cover;
630
+ background-position: 50% 50%;
631
+ background-repeat: no-repeat;
632
+ background-clip: border-box;
1108
633
  }
1109
634
 
1110
- #audio {
1111
- position: absolute;
1112
- right: 10px;
1113
- top: 10px;
1114
- z-index: 103;
1115
- width: 30px;
1116
- height: 30px;
1117
- display: flex;
1118
- align-items: center;
1119
- }
1120
-
1121
- #audio .mrotate {
1122
- animation: mrotate 5s linear infinite;
635
+ /* 动画关键帧 */
636
+ @keyframes zoomIn {
637
+ from {
638
+ opacity: 0;
639
+ transform: scale(0.5);
640
+ }
641
+ to {
642
+ opacity: 1;
643
+ transform: scale(1);
644
+ }
645
+ }.element-ditu .ani-wrap {
646
+ width: 100%;
647
+ height: 100%;
648
+ overflow: hidden
1123
649
  }
1124
650
 
1125
- @keyframes mrotate {
1126
- to {
1127
- transform: rotate(1turn);
1128
- }
651
+ .element-ditu .map {
652
+ width: 100%;
653
+ height: 100%
1129
654
  }
1130
655
 
1131
- #audio .audio {
656
+ .element-ditu .map .el-button {
1132
657
  width: 100%;
1133
658
  height: 100%;
659
+ display: -webkit-box;
660
+ display: -ms-flexbox;
1134
661
  display: flex;
662
+ -webkit-box-align: center;
663
+ -ms-flex-align: center;
1135
664
  align-items: center;
665
+ padding: 0;
666
+ -webkit-box-pack: center;
667
+ -ms-flex-pack: center;
1136
668
  justify-content: center;
1137
- color: #fff;
1138
- background: #666;
1139
- border-radius: 50%;
1140
- overflow: hidden;
1141
- cursor: pointer;
1142
- transition: all 0.3s ease;
1143
- }
1144
-
1145
- #audio .audio.a-border {
1146
- border: 1px solid #fff;
669
+ background: inherit;
670
+ color: inherit;
671
+ border: none
1147
672
  }
1148
673
 
1149
- #audio .audio .music-icon {
1150
- display: block;
1151
- width: 60%;
1152
- height: 60%;
1153
- object-fit: contain;
674
+ .element-ditu .center-map {
675
+ width: 100%;
676
+ height: 100%;
677
+ background: #fff
1154
678
  }
1155
679
 
1156
- #audio .audio .iconfont {
1157
- font-size: 2opx;
1158
- line-height: 1;
680
+ .element-ditu .mask-map {
681
+ position: absolute;
682
+ width: 100%;
683
+ height: 100%;
684
+ top: 0
1159
685
  }
1160
- #audio .icon-cancel {
686
+ .map-iframe {
687
+ width: 100%;
688
+ height: 100%;
689
+ }.ele-form {
1161
690
  position: absolute;
1162
- width: 100%;
1163
- height: 100%;
1164
- border-radius: 50%;
691
+ user-select: none;
692
+ }
693
+
694
+ .f-select {
695
+ cursor: pointer;
696
+ }
697
+
698
+ .ani-wrap {
699
+ position: relative;
700
+ }
701
+
702
+ .f-select .ani-wrap .fs-tit {
703
+ position: relative;
704
+ display: flex;
705
+ padding: 0 5px;
706
+ height: 35px;
707
+ line-height: 35px;
708
+ align-items: center;
709
+ }
710
+
711
+ .require {
712
+ padding: 0 5px 0 0;
713
+ color: red;
714
+ vertical-align: middle;
715
+ }
716
+
717
+ .fs-cont {
718
+ padding-right: 15px;
719
+ white-space: nowrap;
1165
720
  overflow: hidden;
1166
- padding: 15px 0;
1167
- }
1168
- #audio .icon-cancel .icon-h {
1169
- transform: rotate(45deg);
1170
- width: 100%;
1171
- height: 2px;
1172
- background: #fff;
721
+ text-overflow: ellipsis;
722
+ flex-grow: 1;
1173
723
  }
1174
- #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
1175
- content: '';
724
+
725
+ .icon-bofang1 {
726
+ font-size: 12px;
727
+ transition: transform 0.2s ease;
728
+ }
729
+
730
+ .rotate-180 {
731
+ transform: rotate(180deg) !important;
732
+ }
733
+
734
+ .f-real {
1176
735
  position: absolute;
736
+ left: 0;
737
+ top: 0;
1177
738
  width: 100%;
1178
- height: 2px;
1179
- background: #fff;
739
+ height: 100%;
740
+ z-index: 1;
741
+ opacity: 0;
742
+ cursor: pointer;
1180
743
  }
1181
- @keyframes jumpheart {
1182
- to {
1183
- -webkit-transform: scale(1.2);
1184
- transform: scale(1.2)
744
+
745
+ .dropdown-menu {
746
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
747
+ }
748
+
749
+ .dropdown-item {
750
+ padding: 8px 10px;
751
+ cursor: pointer;
752
+ transition: background-color 0.2s;
753
+ }
754
+
755
+ .dropdown-item:hover {
756
+ background-color: #f5f5f5;
757
+ }
758
+
759
+ .dropdown-item.selected {
760
+ background-color: #e6f7ff;
761
+ color: #1890ff;
762
+ }
763
+
764
+ .f-select .fs-tit .icon-bofang1 {
765
+ position: absolute;
766
+ right: 10px;
767
+ font-size: 12px;
768
+ display: inline-block;
769
+ transform: rotate(90deg);
770
+ }
771
+
772
+ .icon-bofang1:before {
773
+ content: "\E6CF";
1185
774
  }
1186
- }
1187
- .ele-calendar {
1188
- position: relative;
1189
- width: 325px !important;
1190
- min-height: 325px !important;
1191
- height: auto !important;
1192
- }
1193
-
1194
- .ele-calendar .drag-point {
1195
- cursor: default !important;
775
+
776
+ .has-error {
777
+ border-color: #ff4d4f !important;
778
+ }
779
+
780
+ .error-tip {
781
+ position: fixed;
782
+ left: 0;
783
+ top: 0;
784
+ width: 100%;
785
+ height: 100%;
786
+ z-index: 1000;
787
+ }.count-down .drag-point {
788
+ cursor: default!important
1196
789
  }
1197
790
 
1198
- .ele-calendar .ani-wrap {
1199
- position: relative;
791
+ .count-down .ani-wrap {
1200
792
  width: 100%;
1201
- min-height: 325px !important;
1202
- height: auto !important;
1203
- padding: 22px 0;
793
+ height: 100%
1204
794
  }
1205
795
 
1206
- .ele-calendar .ani-wrap .can-wrap .can-top {
796
+ .count-down .count-text,.count-down .finish-cont {
797
+ display: -webkit-box;
798
+ display: -ms-flexbox;
1207
799
  display: flex;
1208
- justify-content: space-between;
1209
- align-items: flex-end;
1210
- line-height: 1;
1211
- padding: 0 47px 20px;
1212
- }
1213
-
1214
- .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
1215
- font-size: 25px;
1216
- padding-bottom: 4px;
1217
- }
1218
-
1219
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
1220
- font-size: 25px;
1221
- }
1222
-
1223
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
1224
- position: relative;
1225
- top: 2px;
1226
- font-size: 57px;
800
+ height: 100%;
801
+ -webkit-box-align: center;
802
+ -ms-flex-align: center;
803
+ align-items: center;
804
+ -webkit-box-pack: center;
805
+ -ms-flex-pack: center;
806
+ justify-content: center
1227
807
  }
1228
808
 
1229
- .ele-calendar .ani-wrap .can-wrap .can-main {
1230
- padding: 0 23px;
809
+ .count-down .finish-cont {
810
+ width: 100%
1231
811
  }
1232
812
 
1233
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
813
+ .count-down .count-flip {
814
+ display: -webkit-box;
815
+ display: -ms-flexbox;
1234
816
  display: flex;
1235
- justify-content: flex-start;
1236
- height: 25px;
1237
- line-height: 25px;
1238
- padding: 0 10px;
1239
- border-radius: 13px;
1240
- }
1241
-
1242
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week span {
1243
- width: 14.2%;
1244
- text-align: center;
1245
- color: #fff;
1246
- font-size: 12px;
1247
- }
1248
-
1249
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul {
1250
- font-size: 0;
1251
- padding: 5px 10px 0;
1252
- text-align: left;
1253
- }
1254
-
1255
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li {
1256
- position: relative;
1257
- display: inline-block;
1258
- height: 25px;
1259
- text-align: center;
1260
- margin-top: 8px;
1261
- }
1262
-
1263
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active .iconfont {
1264
- display: block;
1265
- }
1266
-
1267
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active span {
1268
- color: #fff !important;
817
+ height: 100%;
818
+ -webkit-box-align: center;
819
+ -ms-flex-align: center;
820
+ align-items: center;
821
+ -webkit-box-pack: center;
822
+ -ms-flex-pack: center;
823
+ justify-content: center
1269
824
  }
1270
825
 
1271
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
1272
- animation: jumpheart 0.8s ease infinite alternate;
826
+ .count-down .count-flip .numscroll {
827
+ -webkit-animation: numscroll .4s ease-in-out;
828
+ animation: numscroll .4s ease-in-out;
829
+ -webkit-animation-fill-mode: both;
830
+ animation-fill-mode: both
1273
831
  }
1274
832
 
1275
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
1276
- display: none;
1277
- font-size: 26px;
833
+ .count-down .count-flip .numscroll .curr-num {
834
+ -webkit-transition: all .3s ease-in-out;
835
+ transition: all .3s ease-in-out;
836
+ opacity: .6;
837
+ -webkit-transform: scale(.5)!important;
838
+ transform: scale(.5)!important
1278
839
  }
1279
840
 
1280
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li span {
1281
- position: absolute;
1282
- left: 50%;
1283
- top: 50%;
1284
- z-index: 1;
1285
- color: #666;
1286
- font-size: 13px;
1287
- transform: translate(-50%, -52%);
1288
- }
841
+ @-webkit-keyframes numscroll {
842
+ 0% {
843
+ -webkit-transform: translateZ(0);
844
+ transform: translateZ(0)
845
+ }
1289
846
 
1290
- .ele-calendar .bottom-center,
1291
- .ele-calendar .left-center,
1292
- .ele-calendar .right-center,
1293
- .ele-calendar .top-center {
1294
- display: none !important;
847
+ to {
848
+ -webkit-transform: translate3d(0,100%,0);
849
+ transform: translate3d(0,100%,0)
850
+ }
1295
851
  }
1296
852
 
1297
- .ele-calendar .ani-wrap .can-wrap2 {
1298
- padding: 21px 23px 0
1299
- }
853
+ @keyframes numscroll {
854
+ 0% {
855
+ -webkit-transform: translateZ(0);
856
+ transform: translateZ(0)
857
+ }
1300
858
 
1301
- .ele-calendar .ani-wrap .can-wrap2 .can-top {
1302
- display: -webkit-box;
1303
- display: -ms-flexbox;
1304
- display: flex;
1305
- -webkit-box-pack: justify;
1306
- -ms-flex-pack: justify;
1307
- justify-content: space-between;
1308
- -webkit-box-align: end;
1309
- -ms-flex-align: end;
1310
- align-items: flex-end;
1311
- line-height: 1;
1312
- padding: 0 16px 22px;
1313
- font-size: 36px
859
+ to {
860
+ -webkit-transform: translate3d(0,100%,0);
861
+ transform: translate3d(0,100%,0)
862
+ }
1314
863
  }
1315
864
 
1316
- .ele-calendar .ani-wrap .can-wrap2 .can-top span {
1317
- font-size: 16px
865
+ .count-down .count-flip .c-com {
866
+ min-width: 50px;
867
+ height: auto;
868
+ margin: 6px;
869
+ padding: 5px 0 6px;
870
+ background-color: #111
1318
871
  }
1319
872
 
1320
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week {
873
+ .count-down .count-flip .c-com .flex-wrap {
1321
874
  display: -webkit-box;
1322
875
  display: -ms-flexbox;
1323
876
  display: flex;
1324
- -webkit-box-pack: start;
1325
- -ms-flex-pack: start;
1326
- justify-content: flex-start;
1327
- height: 25px;
1328
- line-height: 25px;
1329
- padding: 0 10px;
1330
- border-radius: 13px
1331
- }
1332
-
1333
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week span {
1334
- width: 14.2%;
1335
- text-align: center;
1336
- color: #fff;
1337
- font-size: 12px;
1338
- font-weight: 600
877
+ position: relative;
878
+ width: 100%;
879
+ height: 100%;
880
+ -webkit-box-align: center;
881
+ -ms-flex-align: center;
882
+ align-items: center
1339
883
  }
1340
884
 
1341
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date {
1342
- position: relative
885
+ .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
886
+ line-height: 27px
1343
887
  }
1344
888
 
1345
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date .can-year {
889
+ .count-down .count-flip .c-com .flex-wrap .next-num {
1346
890
  position: absolute;
1347
- white-space: nowrap;
1348
- left: 50%;
1349
- top: 15%;
1350
- -webkit-transform: translateX(-50%);
1351
- transform: translateX(-50%);
1352
- font-size: 76px;
1353
- opacity: .1;
1354
- font-weight: 600
1355
- }
1356
-
1357
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul {
1358
- font-size: 0;
1359
- padding: 5px 10px 0;
1360
- text-align: left
891
+ top: -100%
1361
892
  }
1362
893
 
1363
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li {
1364
- position: relative;
1365
- display: inline-block;
1366
- width: 14.2%;
1367
- height: 25px;
1368
- text-align: center;
1369
- margin-top: 8px
894
+ .count-down .count-flip .c-com .flex-wrap .curr-num {
895
+ -webkit-transform: scale(1);
896
+ transform: scale(1)
1370
897
  }
1371
898
 
1372
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active .iconfont {
1373
- display: block;
1374
- position: absolute;
1375
- left: 17%;
1376
- top: 0;
1377
- font-size: 25px
899
+ .count-down .bottom-center,.count-down .left-bottom,.count-down .left-center,.count-down .left-top,.count-down .right-bottom,.count-down .right-center,.count-down .right-top,.count-down .top-center {
900
+ display: none!important
1378
901
  }
1379
902
 
1380
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active span {
1381
- color: #fff!important
903
+ .c-wrap {
904
+ width: 100%;
905
+ height: 100%;
906
+ overflow: hidden;
907
+ font-size: 0
1382
908
  }
1383
-
1384
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.heart-ani .iconfont {
1385
- -webkit-animation: jumpheart .8s ease infinite alternate;
1386
- animation: jumpheart .8s ease infinite alternate
909
+
910
+ .c-wrap.c-day-wrap {
911
+ text-align: center
1387
912
  }
1388
913
 
1389
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li .iconfont {
1390
- display: none;
1391
- font-size: 26px
914
+ .c-wrap.c-day-wrap .c-num {
915
+ width: auto
1392
916
  }
1393
917
 
1394
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li span {
1395
- position: absolute;
1396
- left: 50%;
1397
- top: 50%;
1398
- z-index: 1;
1399
- color: #666;
1400
- font-size: 13px;
1401
- -webkit-transform: translate(-50%,-52%);
1402
- transform: translate(-50%,-52%)
918
+ .c-wrap .c-num {
919
+ display: inline-block;
920
+ width: 50%;
921
+ overflow: hidden;
922
+ font-size: 20px;
923
+ color: #999
1403
924
  }
1404
925
 
1405
- .ele-calendar .ani-wrap .can-wrap3 .can-top {
926
+ .c-wrap .c-left .flex-wrap {
1406
927
  display: -webkit-box;
1407
928
  display: -ms-flexbox;
1408
929
  display: flex;
1409
- -webkit-box-pack: justify;
1410
- -ms-flex-pack: justify;
1411
- justify-content: space-between;
1412
- -webkit-box-align: end;
1413
- -ms-flex-align: end;
1414
- align-items: flex-end;
1415
- line-height: 1;
1416
- padding: 18px 33px 10px;
1417
- font-size: 36px;
1418
- }
1419
-
1420
- .ele-calendar .ani-wrap .can-wrap3 .can-top span {
1421
- font-size: 16px
1422
- }
1423
-
1424
- .ele-calendar .ani-wrap .can-wrap3 .can-top .can-year {
1425
- font-size: 20px
930
+ -webkit-box-pack: end;
931
+ -ms-flex-pack: end;
932
+ justify-content: flex-end
1426
933
  }
1427
934
 
1428
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week {
935
+ .c-wrap .c-text {
1429
936
  display: -webkit-box;
1430
937
  display: -ms-flexbox;
1431
938
  display: flex;
1432
- -webkit-box-pack: start;
1433
- -ms-flex-pack: start;
1434
- justify-content: flex-start;
1435
- height: 40px;
1436
- line-height: 40px;
1437
- padding: 0 34px;
1438
- border-bottom: 1px solid
1439
- }
1440
-
1441
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week span {
1442
- width: 14.2%;
1443
- text-align: center;
1444
- color: #fff;
939
+ width: 100%;
1445
940
  font-size: 12px;
1446
- font-weight: 600
941
+ -webkit-box-pack: center;
942
+ -ms-flex-pack: center;
943
+ justify-content: center;
944
+ -webkit-box-align: center;
945
+ -ms-flex-align: center;
946
+ align-items: center;
947
+ white-space: nowrap
948
+ }
949
+ #audio {
950
+ position: absolute;
951
+ right: 10px;
952
+ top: 10px;
953
+ z-index: 103;
954
+ width: 30px;
955
+ height: 30px;
956
+ display: flex;
957
+ align-items: center;
1447
958
  }
1448
959
 
1449
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date {
1450
- position: relative
960
+ #audio .mrotate {
961
+ animation: mrotate 5s linear infinite;
1451
962
  }
1452
963
 
1453
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul {
1454
- font-size: 0;
1455
- padding: 5px 33px 0;
1456
- text-align: left
964
+ @keyframes mrotate {
965
+ to {
966
+ transform: rotate(1turn);
967
+ }
1457
968
  }
1458
969
 
1459
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li {
1460
- position: relative;
1461
- display: inline-block;
1462
- width: 14.2%;
1463
- height: 25px;
1464
- text-align: center;
1465
- margin-top: 8px;
970
+ #audio .audio {
971
+ width: 100%;
972
+ height: 100%;
973
+ display: flex;
974
+ align-items: center;
975
+ justify-content: center;
976
+ color: #fff;
977
+ background: #666;
978
+ border-radius: 50%;
979
+ overflow: hidden;
980
+ cursor: pointer;
981
+ transition: all 0.3s ease;
1466
982
  }
1467
983
 
1468
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active {
1469
- color: #eee
984
+ #audio .audio.a-border {
985
+ border: 1px solid #fff;
1470
986
  }
1471
987
 
1472
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active .iconfont {
988
+ #audio .audio .music-icon {
1473
989
  display: block;
1474
- position: absolute;
1475
- left: 12%;
1476
- top: 2px;
990
+ width: 60%;
991
+ height: 60%;
992
+ object-fit: contain;
1477
993
  }
1478
994
 
1479
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active span {
1480
- font-size: 12px
995
+ #audio .audio .iconfont {
996
+ font-size: 2opx;
997
+ line-height: 1;
1481
998
  }
1482
-
1483
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.heart-ani .iconfont {
1484
- -webkit-animation: jumpheart .8s ease infinite alternate;
1485
- animation: jumpheart .8s ease infinite alternate
999
+ #audio .icon-cancel {
1000
+ position: absolute;
1001
+ width: 100%;
1002
+ height: 100%;
1003
+ border-radius: 50%;
1004
+ overflow: hidden;
1005
+ padding: 15px 0;
1486
1006
  }
1487
-
1488
- @keyframes jumpheart {
1489
- to {
1490
- -webkit-transform: scale(1.2);
1491
- transform: scale(1.2)
1007
+ #audio .icon-cancel .icon-h {
1008
+ transform: rotate(45deg);
1009
+ width: 100%;
1010
+ height: 2px;
1011
+ background: #fff;
1012
+ }
1013
+ #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
1014
+ content: '';
1015
+ position: absolute;
1016
+ width: 100%;
1017
+ height: 2px;
1018
+ background: #fff;
1019
+ }/* Iconfont definition */
1020
+ .icon-danmuliebiao1:before {
1021
+ content: "\E68A";
1022
+ }
1023
+
1024
+ .icon-cuowu2:before {
1025
+ content: "\E65E";
1026
+ }
1027
+
1028
+ i {
1029
+ font-style: normal;
1030
+ }
1031
+
1032
+ .v-modal {
1033
+ position: fixed;
1034
+ left: 0;
1035
+ top: 0;
1036
+ width: 100%;
1037
+ height: 100%;
1038
+ opacity: .5;
1039
+ background: #000;
1040
+ }
1041
+ /* 底部工具栏样式 */
1042
+ #toolbarNew {
1043
+ position: fixed;
1044
+ left: 0;
1045
+ bottom: 0;
1046
+ width: 100%;
1047
+ padding: 12px 0;
1048
+ background: url('https://h5cdn.unika.cc/static/img/uniComponents/inputBg.png') 0 0 repeat-x;
1049
+ z-index: 100;
1050
+ }
1051
+
1052
+ .toolbar {
1053
+ display: flex;
1054
+ align-items: center;
1055
+ padding: 0 10px;
1056
+ }
1057
+
1058
+ .bar-left {
1059
+ position: relative;
1060
+ flex: 1;
1061
+ }
1062
+
1063
+ .bar-mess {
1064
+ width: 100%;
1065
+ height: 36px;
1066
+ line-height: 36px;
1067
+ font-size: 14px;
1068
+ color: #ccc;
1069
+ padding: 0 8px;
1070
+ border-radius: 18px;
1071
+ border: none;
1072
+ -webkit-appearance: none;
1073
+ background-color: rgba(0, 0, 0, 0.28);
1074
+ }
1075
+
1076
+ .bar-mess::placeholder {
1077
+ color: rgba(255, 255, 255, 0.7);
1078
+ }
1079
+
1080
+ .bar-left .iconfont {
1081
+ position: absolute;
1082
+ right: 10px;
1083
+ top: 50%;
1084
+ transform: translateY(-50%);
1085
+ color: #f2f2f2;
1086
+ font-size: 16px;
1087
+ cursor: pointer;
1088
+ z-index: 2;
1089
+ padding: 5px;
1090
+ }
1091
+
1092
+ /* 关闭弹幕按钮样式 */
1093
+ .toolbar-close {
1094
+ position: absolute;
1095
+ left: 10px;
1096
+ transform: translateY(-50%);
1097
+ display: flex;
1098
+ align-items: center;
1099
+ cursor: pointer;
1100
+ z-index: 2;
1101
+ }
1102
+
1103
+ .toolbar-close img {
1104
+ display: block;
1105
+ width: 36px;
1106
+ height: 36px;
1107
+ cursor: pointer;
1108
+ }
1109
+
1110
+ /* 弹幕容器样式 */
1111
+ .bullet-container {
1112
+ position: fixed;
1113
+ left: 10px;
1114
+ right: 10px;
1115
+ height: 120px;
1116
+ overflow: hidden;
1117
+ z-index: 99;
1118
+ pointer-events: none;
1119
+ }
1120
+
1121
+ .bullet-item {
1122
+ position: absolute;
1123
+ left: 0;
1124
+ bottom: 0;
1125
+ padding: 5px 10px;
1126
+ border-radius: 15px;
1127
+ font-size: 14px;
1128
+ white-space: nowrap;
1129
+ animation: bulletMove linear;
1130
+ animation-fill-mode: forwards;
1131
+ will-change: transform;
1132
+ display: inline-block;
1133
+ max-width: 90%;
1134
+ }
1135
+
1136
+ @keyframes bulletMove {
1137
+ 0% {
1138
+ transform: translateY(0);
1139
+ opacity: 1;
1140
+ }
1141
+ 100% {
1142
+ transform: translateY(calc(-1 * 150px));
1143
+ opacity: 0;
1144
+ }
1145
+ }
1146
+
1147
+ /* 弹幕输入弹窗样式 */
1148
+ .popup-overlay {
1149
+ position: fixed;
1150
+ top: 0;
1151
+ left: 0;
1152
+ right: 0;
1153
+ bottom: 0;
1154
+ background: rgba(0, 0, 0, 0.5);
1155
+ display: flex;
1156
+ justify-content: center;
1157
+ align-items: flex-end;
1158
+ z-index: 200;
1159
+ }
1160
+
1161
+ #index .mint-popup {
1162
+ background-color: transparent;
1163
+ }
1164
+
1165
+ .mint-popup {
1166
+ position: fixed;
1167
+ background: #fff;
1168
+ top: 50%;
1169
+ left: 50%;
1170
+ transform: translate3d(-50%, -50%, 0);
1171
+ -webkit-backface-visibility: hidden;
1172
+ backface-visibility: hidden;
1173
+ transition: .2s ease-out;
1174
+ }
1175
+
1176
+ .bar-messwin {
1177
+ width: 309px;
1178
+ height: 341px;
1179
+ background: url('https://h5cdn.unika.cc/static/img/uniComponents/mess-bg.png') no-repeat 50%;
1180
+ background-size: 100% 100%;
1181
+ position: relative;
1182
+ display: flex;
1183
+ flex-direction: column;
1184
+ align-items: center;
1185
+ margin-bottom: 20px;
1186
+ }
1187
+
1188
+ .bar-messwin .mess-logo {
1189
+ width: 171px;
1190
+ height: 110px;
1191
+ margin-top: -64px;
1192
+ margin-left: 11px;
1193
+ }
1194
+
1195
+ .bar-messwin .mess-title {
1196
+ margin-top: 12px;
1197
+ font-weight: 600;
1198
+ font-size: 21px;
1199
+ color: #333;
1200
+ }
1201
+
1202
+ .bar-messwin .mess-input {
1203
+ width: 267px;
1204
+ height: 43px;
1205
+ background: #fff;
1206
+ border-radius: 9px;
1207
+ border: 1px solid rgba(237,85,102,0.4);
1208
+ margin-top: 12px;
1209
+ display: flex;
1210
+ align-items: center;
1211
+ justify-content: center;
1212
+ padding: 0 13px;
1213
+ }
1214
+
1215
+ .bar-messwin .mess-input input {
1216
+ width: 100%;
1217
+ font-size: 17px;
1218
+ font-family: PingFang SC;
1219
+ font-weight: 400;
1220
+ color: #333;
1221
+ border: none;
1222
+ outline: none;
1223
+ background: transparent;
1224
+ }
1225
+
1226
+ .bar-messwin .mess-input input::-webkit-input-placeholder {
1227
+ color: #999;
1228
+ }
1229
+
1230
+ .bar-messwin .mess-input input::-ms-input-placeholder {
1231
+ color: #999;
1232
+ }
1233
+
1234
+ .bar-messwin .mess-input input::placeholder {
1235
+ color: #999;
1236
+ }
1237
+
1238
+ .bar-messwin .mess-textarea {
1239
+ width: 267px;
1240
+ height: 85px;
1241
+ background: #fff;
1242
+ border-radius: 9px;
1243
+ border: 1px solid rgba(237,85,102,0.4);
1244
+ display: flex;
1245
+ padding: 9px 13px;
1246
+ justify-content: space-between;
1247
+ margin-top: 12px;
1248
+ position: relative;
1249
+ }
1250
+
1251
+ .bar-messwin .mess-textarea textarea {
1252
+ width: 203px;
1253
+ height: 68px;
1254
+ font-size: 17px;
1255
+ resize: none;
1256
+ outline: none;
1257
+ border: none;
1258
+ background: transparent;
1259
+ color: #333;
1260
+ font-family: PingFang SC;
1261
+ }
1262
+
1263
+ .bar-messwin .mess-textarea textarea::-webkit-input-placeholder {
1264
+ color: #999;
1265
+ }
1266
+
1267
+ .bar-messwin .mess-textarea textarea::-ms-input-placeholder {
1268
+ color: #999;
1269
+ }
1270
+
1271
+ .bar-messwin .mess-textarea textarea::placeholder {
1272
+ color: #999;
1273
+ }
1274
+
1275
+ .bar-messwin .mess-textarea img {
1276
+ width: 26px;
1277
+ height: 26px;
1278
+ cursor: pointer;
1279
+ }
1280
+
1281
+ .bar-messwin .mess-textarea .wish-dropdown {
1282
+ position: absolute;
1283
+ top: 43px;
1284
+ right: 0;
1285
+ width: 267px;
1286
+ background: #fff;
1287
+ border-radius: 9px;
1288
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
1289
+ z-index: 10;
1290
+ max-height: 213px;
1291
+ overflow-y: auto;
1292
+ border: 1px solid rgba(237,85,102,0.2);
1293
+ padding: 0 13px;
1294
+ }
1295
+
1296
+ .bar-messwin .mess-textarea .wish-dropdown::-webkit-scrollbar {
1297
+ width: 3px;
1298
+ background-color: transparent;
1299
+ display: block;
1300
+ }
1301
+
1302
+ .bar-messwin .mess-textarea .wish-dropdown::-webkit-scrollbar-thumb {
1303
+ background-color: #ccc;
1304
+ border-radius: 9px;
1305
+ min-height: 32px;
1306
+ }
1307
+
1308
+ .bar-messwin .mess-textarea .wish-dropdown::-webkit-scrollbar-track {
1309
+ background-color: transparent;
1310
+ border-radius: 3px;
1311
+ margin: 4px 0;
1312
+ }
1313
+
1314
+ .bar-messwin .mess-textarea .wish-dropdown .wish-item {
1315
+ padding: 11px 0;
1316
+ display: flex;
1317
+ align-items: flex-start;
1318
+ cursor: pointer;
1319
+ transition: background-color 0.2s;
1320
+ border-bottom: 1px solid rgba(0,0,0,0.05);
1321
+ }
1322
+
1323
+ .bar-messwin .mess-textarea .wish-dropdown .wish-item:last-child {
1324
+ border-bottom: none;
1325
+ }
1326
+
1327
+ .bar-messwin .mess-textarea .wish-dropdown .wish-item .wish-dot {
1328
+ color: #ff4874;
1329
+ margin-right: 5px;
1330
+ font-size: 11px;
1331
+ line-height: 21px;
1332
+ }
1333
+
1334
+ .bar-messwin .mess-textarea .wish-dropdown .wish-item .wish-text {
1335
+ font-size: 15px;
1336
+ color: #333;
1337
+ line-height: 21px;
1338
+ text-align: left;
1339
+ }
1340
+
1341
+ .bar-messwin .bar-m-sub {
1342
+ width: 267px;
1343
+ height: 43px;
1344
+ background: linear-gradient(270deg,#ff4874,#ff9061);
1345
+ border-radius: 68px;
1346
+ font-size: 17px;
1347
+ font-family: PingFang SC;
1348
+ font-weight: 400;
1349
+ color: #fff;
1350
+ margin-top: 26px;
1351
+ border: none;
1352
+ outline: none;
1353
+ cursor: pointer;
1354
+ display: flex;
1355
+ align-items: center;
1356
+ justify-content: center;
1357
+ }
1358
+
1359
+ .bar-messwin .icon-cuowu2, .give-gift .icon-cuowu2 {
1360
+ position: absolute;
1361
+ bottom: -60px;
1362
+ right: 50%;
1363
+ transform: translateX(50%);
1364
+ font-size: 28px;
1365
+ color: #fff;
1366
+ cursor: pointer;
1367
+ }
1368
+
1369
+ /* 提示弹窗样式 */
1370
+ .mint-msgbox-wrapper {
1371
+ position: fixed;
1372
+ top: 0;
1373
+ left: 0;
1374
+ right: 0;
1375
+ bottom: 0;
1376
+ background-color: rgba(0,0,0,0.5);
1377
+ z-index: 2005;
1378
+ display: flex;
1379
+ justify-content: center;
1380
+ align-items: center;
1492
1381
  }
1493
- }
1494
-
1495
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li .iconfont {
1496
- display: none;
1497
- font-size: 26px
1498
- }
1499
-
1500
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li span {
1501
- position: absolute;
1502
- left: 50%;
1503
- top: 50%;
1504
- z-index: 1;
1505
- color: #666;
1506
- font-size: 13px;
1507
- -webkit-transform: translate(-50%,-52%);
1508
- transform: translate(-50%,-52%)
1509
- }
1510
-
1511
- .ele-calendar .bottom-center,.ele-calendar .left-center,.ele-calendar .right-center,.ele-calendar .top-center {
1512
- display: none!important
1513
- }
1514
- .icon-tuoyuanxing:before {
1515
- content: "\E6A7";
1516
- }
1517
- .icon-zan1:before {
1518
- content: "\E66D";
1519
- }
1520
- .icon-xingzhuangjiehe:before {
1521
- content: "\E6A6";
1522
- }.count-down .drag-point {
1523
- cursor: default!important
1524
- }
1525
-
1526
- .count-down .ani-wrap {
1527
- width: 100%;
1528
- height: 100%
1529
- }
1530
-
1531
- .count-down .count-text,.count-down .finish-cont {
1532
- display: -webkit-box;
1533
- display: -ms-flexbox;
1534
- display: flex;
1535
- height: 100%;
1536
- -webkit-box-align: center;
1537
- -ms-flex-align: center;
1538
- align-items: center;
1539
- -webkit-box-pack: center;
1540
- -ms-flex-pack: center;
1541
- justify-content: center
1542
- }
1543
-
1544
- .count-down .finish-cont {
1545
- width: 100%
1546
- }
1547
-
1548
- .count-down .count-flip {
1549
- display: -webkit-box;
1550
- display: -ms-flexbox;
1551
- display: flex;
1552
- height: 100%;
1553
- -webkit-box-align: center;
1554
- -ms-flex-align: center;
1555
- align-items: center;
1556
- -webkit-box-pack: center;
1557
- -ms-flex-pack: center;
1558
- justify-content: center
1559
- }
1560
-
1561
- .count-down .count-flip .numscroll {
1562
- -webkit-animation: numscroll .4s ease-in-out;
1563
- animation: numscroll .4s ease-in-out;
1564
- -webkit-animation-fill-mode: both;
1565
- animation-fill-mode: both
1566
- }
1567
-
1568
- .count-down .count-flip .numscroll .curr-num {
1569
- -webkit-transition: all .3s ease-in-out;
1570
- transition: all .3s ease-in-out;
1571
- opacity: .6;
1572
- -webkit-transform: scale(.5)!important;
1573
- transform: scale(.5)!important
1574
- }
1575
-
1576
- @-webkit-keyframes numscroll {
1577
- 0% {
1578
- -webkit-transform: translateZ(0);
1579
- transform: translateZ(0)
1382
+
1383
+ .mint-msgbox {
1384
+ position: relative;
1385
+ background-color: #fff;
1386
+ width: 85%;
1387
+ border-radius: 3px;
1388
+ font-size: 17px;
1389
+ overflow: hidden;
1390
+ }
1391
+
1392
+ .mint-msgbox-header {
1393
+ padding: 16px 0 0;
1394
+ }
1395
+
1396
+ .mint-msgbox-content {
1397
+ padding: 11px 21px 16px;
1398
+ border-bottom: 1px solid #ddd;
1399
+ min-height: 38px;
1400
+ position: relative;
1401
+ }
1402
+
1403
+ .mint-msgbox-title {
1404
+ text-align: center;
1405
+ padding-left: 0;
1406
+ margin-bottom: 0;
1407
+ font-size: 17px;
1408
+ font-weight: 700;
1409
+ color: #333;
1410
+ }
1411
+
1412
+ .mint-msgbox-message {
1413
+ color: #999;
1414
+ margin: 0;
1415
+ text-align: center;
1416
+ line-height: 38px;
1417
+ }
1418
+
1419
+ .mint-msgbox-btns {
1420
+ display: flex;
1421
+ height: 43px;
1422
+ line-height: 43px;
1423
+ }
1424
+
1425
+ .mint-msgbox-btn {
1426
+ line-height: 37px;
1427
+ display: block;
1428
+ background-color: #fff;
1429
+ flex: 1;
1430
+ margin: 0;
1431
+ border: 0;
1432
+ }
1433
+
1434
+ .mint-msgbox-confirm {
1435
+ color: #26a2ff;
1436
+ width: 100%;
1437
+ }
1438
+ /* 右侧按钮区域样式 */
1439
+ #toolbarNew .toolbar .bar-right {
1440
+ margin-left: 7px;
1441
+ font-size: 0;
1442
+ display: flex;
1443
+ align-items: center;
1444
+ }
1445
+
1446
+ #toolbarNew .toolbar .bar-right.move-left {
1447
+ right: 64px;
1448
+ }
1449
+
1450
+ #toolbarNew .toolbar .bar-right .bar-r-com,
1451
+ #toolbarNew .toolbar .bar-right>img {
1452
+ display: inline-block;
1453
+ vertical-align: middle;
1454
+ }
1455
+
1456
+ #toolbarNew .toolbar .bar-right .bar-r-com {
1457
+ margin-left: 8px;
1458
+ cursor: pointer;
1459
+ }
1460
+
1461
+ #toolbarNew .toolbar .bar-right .bar-r-com.bar-r-gift {
1462
+ width: 36px;
1463
+ height: 36px;
1464
+ transform-origin: center bottom;
1465
+ animation: giftJump 3s ease infinite;
1466
+ }
1467
+
1468
+ @keyframes giftJump {
1469
+ 0%, 24%, 48%, to {
1470
+ transform: translateZ(0);
1471
+ }
1472
+ 12% {
1473
+ transform: translate3d(0, -10px, 0);
1474
+ }
1475
+ 36% {
1476
+ transform: translate3d(0, -10px, 0);
1477
+ }
1478
+ }
1479
+
1480
+ #toolbarNew .toolbar .bar-right .bar-r-com:first-child {
1481
+ margin-left: 0;
1482
+ }
1483
+
1484
+ #toolbarNew .toolbar .bar-right>img {
1485
+ position: relative;
1486
+ z-index: 1;
1487
+ width: 26px;
1488
+ height: 26px;
1489
+ }
1490
+
1491
+ #toolbarNew .toolbar .bar-right .bar-heart {
1492
+ position: relative;
1493
+ width: 36px;
1494
+ height: 36px;
1495
+ text-align: center;
1496
+ }
1497
+
1498
+ #toolbarNew .toolbar .bar-right .bar-heart .bar-praise {
1499
+ position: absolute;
1500
+ max-width: 36px;
1501
+ height: 15px;
1502
+ line-height: 15px;
1503
+ right: 0;
1504
+ top: 0;
1505
+ z-index: 3;
1506
+ font-size: 10px;
1507
+ color: #fff;
1508
+ border-radius: 6px;
1509
+ padding: 0 4px;
1510
+ box-sizing: border-box;
1511
+ white-space: nowrap;
1512
+ background-color: #f38200;
1513
+ transform: translateX(40%);
1514
+ }
1515
+
1516
+ #toolbarNew .toolbar .bar-right .bar-zan {
1517
+ position: relative;
1518
+ z-index: 2;
1519
+ height: 33px;
1520
+ width: 33px;
1521
+ box-sizing: border-box;
1522
+ }
1523
+
1524
+ #toolbarNew .toolbar .bar-right .bar-zan .ani-num {
1525
+ position: absolute;
1526
+ top: 0;
1527
+ left: 10px;
1528
+ opacity: 0;
1529
+ font-size: 15px;
1530
+ color: #f07a87;
1531
+ }
1532
+
1533
+ #toolbarNew .toolbar .bar-right .bar-zan .stop-longtap {
1534
+ position: absolute;
1535
+ left: 0;
1536
+ right: 0;
1537
+ bottom: 0;
1538
+ top: 0;
1539
+ z-index: 1;
1540
+ }
1541
+
1542
+ #toolbarNew .toolbar .bar-right .bar-zan img {
1543
+ width: 36px;
1544
+ height: 36px;
1545
+ }
1546
+
1547
+ #toolbarNew .toolbar .bar-right .bar-zan.active .ani-num {
1548
+ z-index: 2;
1549
+ animation: praise 1.2s;
1550
+ animation-fill-mode: both;
1580
1551
  }
1581
-
1582
- to {
1583
- -webkit-transform: translate3d(0,100%,0);
1584
- transform: translate3d(0,100%,0)
1552
+
1553
+ @keyframes praise {
1554
+ 0% {
1555
+ opacity: 1;
1556
+ }
1557
+ 50% {
1558
+ opacity: 1;
1559
+ transform: translate3d(0, -35px, 0);
1560
+ }
1561
+ to {
1562
+ opacity: 0;
1563
+ transform: translate3d(0, -35px, 0);
1564
+ }
1585
1565
  }
1586
- }
1587
-
1588
- @keyframes numscroll {
1589
- 0% {
1590
- -webkit-transform: translateZ(0);
1591
- transform: translateZ(0)
1566
+
1567
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap {
1568
+ transform: scale(0.85);
1592
1569
  }
1593
-
1594
- to {
1595
- -webkit-transform: translate3d(0,100%,0);
1596
- transform: translate3d(0,100%,0)
1570
+
1571
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:first-of-type {
1572
+ animation: jump .6s ease-out;
1597
1573
  }
1598
- }
1599
-
1600
- .count-down .count-flip .c-com {
1601
- min-width: 50px;
1602
- height: auto;
1603
- margin: 6px;
1604
- padding: 5px 0 6px;
1605
- background-color: #111
1606
- }
1607
-
1608
- .count-down .count-flip .c-com .flex-wrap {
1609
- display: -webkit-box;
1610
- display: -ms-flexbox;
1611
- display: flex;
1612
- position: relative;
1613
- width: 100%;
1614
- height: 100%;
1615
- -webkit-box-align: center;
1616
- -ms-flex-align: center;
1617
- align-items: center
1618
- }
1619
-
1620
- .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
1621
- line-height: 27px
1622
- }
1623
-
1624
- .count-down .count-flip .c-com .flex-wrap .next-num {
1625
- position: absolute;
1626
- top: -100%
1627
- }
1628
-
1629
- .count-down .count-flip .c-com .flex-wrap .curr-num {
1630
- -webkit-transform: scale(1);
1631
- transform: scale(1)
1632
- }
1633
-
1634
- .count-down .bottom-center,.count-down .left-bottom,.count-down .left-center,.count-down .left-top,.count-down .right-bottom,.count-down .right-center,.count-down .right-top,.count-down .top-center {
1635
- display: none!important
1636
- }
1637
-
1638
- .c-wrap {
1639
- width: 100%;
1640
- height: 100%;
1641
- overflow: hidden;
1642
- font-size: 0
1643
- }
1644
-
1645
- .c-wrap.c-day-wrap {
1646
- text-align: center
1647
- }
1648
-
1649
- .c-wrap.c-day-wrap .c-num {
1650
- width: auto
1651
- }
1652
-
1653
- .c-wrap .c-num {
1654
- display: inline-block;
1655
- width: 50%;
1656
- overflow: hidden;
1657
- font-size: 20px;
1658
- color: #999
1659
- }
1660
-
1661
- .c-wrap .c-left .flex-wrap {
1662
- display: -webkit-box;
1663
- display: -ms-flexbox;
1664
- display: flex;
1665
- -webkit-box-pack: end;
1666
- -ms-flex-pack: end;
1667
- justify-content: flex-end
1668
- }
1669
-
1670
- .c-wrap .c-text {
1671
- display: -webkit-box;
1672
- display: -ms-flexbox;
1673
- display: flex;
1674
- width: 100%;
1675
- font-size: 12px;
1676
- -webkit-box-pack: center;
1677
- -ms-flex-pack: center;
1678
- justify-content: center;
1679
- -webkit-box-align: center;
1680
- -ms-flex-align: center;
1681
- align-items: center;
1682
- white-space: nowrap
1683
- }
1684
-
1685
- .element-video {
1574
+
1575
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(2) {
1576
+ animation: jump2 .6s ease-out;
1577
+ }
1578
+
1579
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(3) {
1580
+ animation: jump3 .6s ease-out;
1581
+ }
1582
+
1583
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(4) {
1584
+ animation: jump4 .6s ease-out;
1585
+ }
1586
+
1587
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(5) {
1588
+ animation: jump5 .6s ease-out;
1589
+ }
1590
+
1591
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(6) {
1592
+ animation: jump6 .6s ease-out;
1593
+ }
1594
+
1595
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(7) {
1596
+ animation: jump7 .6s ease-out;
1597
+ }
1598
+
1599
+ #toolbarNew .toolbar .bar-right .bar-zan.active .zan-wrap span:nth-of-type(8) {
1600
+ animation: jump8 .6s ease-out;
1601
+ }
1602
+
1603
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap {
1686
1604
  position: absolute;
1687
- overflow: hidden;
1688
- background-color: transparent;
1605
+ left: 0;
1606
+ top: 0;
1607
+ right: 0;
1608
+ bottom: 0;
1609
+ pointer-events: none;
1610
+ overflow: visible;
1611
+ }
1612
+
1613
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span {
1614
+ position: absolute;
1615
+ width: 6px;
1616
+ height: 6px;
1617
+ border-radius: 50%;
1618
+ opacity: 0;
1619
+ }
1620
+
1621
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:first-of-type {
1622
+ left: 50%;
1623
+ top: -8px;
1624
+ transform: translate3d(-50%, 0, 0);
1625
+ background-color: #b3e5c8;
1626
+ }
1627
+
1628
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(2) {
1629
+ left: -8px;
1630
+ top: 50%;
1631
+ transform: translate3d(0, -50%, 0);
1632
+ background-color: #f4ba31;
1633
+ }
1634
+
1635
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(3) {
1636
+ left: 50%;
1637
+ bottom: -8px;
1638
+ transform: translate3d(-50%, 0, 0);
1639
+ background-color: #339fef;
1640
+ }
1641
+
1642
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(4) {
1643
+ top: 50%;
1644
+ right: -8px;
1645
+ transform: translate3d(0, -50%, 0);
1646
+ background-color: #e2264d;
1647
+ }
1648
+
1649
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(5) {
1650
+ left: -5px;
1651
+ top: 0;
1652
+ transform: translate3d(0, -50%, 0);
1653
+ background-color: #a08880;
1654
+ }
1655
+
1656
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(6) {
1657
+ left: -5px;
1658
+ bottom: 0;
1659
+ transform: translate3d(0, 50%, 0);
1660
+ background-color: #43c1b5;
1661
+ }
1662
+
1663
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(7) {
1664
+ right: -5px;
1665
+ bottom: 0;
1666
+ transform: translate3d(0, 50%, 0);
1667
+ background-color: #f5be3b;
1668
+ }
1669
+
1670
+ #toolbarNew .toolbar .bar-right .bar-zan .zan-wrap span:nth-of-type(8) {
1671
+ right: -5px;
1672
+ top: 0;
1673
+ transform: translate3d(0, -50%, 0);
1674
+ background-color: coral;
1675
+ }
1676
+
1677
+ @keyframes jump {
1678
+ 0% {
1679
+ opacity: 1;
1680
+ transform: translate3d(-50%, 0, 0) scale(1);
1681
+ }
1682
+ 40% {
1683
+ transform: translate3d(-50%, -100%, 0) scale(0.7);
1684
+ }
1685
+ to {
1686
+ opacity: 1;
1687
+ transform: translate3d(-50%, -150%, 0) scale(0);
1688
+ }
1689
+ }
1690
+
1691
+ @keyframes jump2 {
1692
+ 0% {
1693
+ opacity: 1;
1694
+ transform: translate3d(0, -50%, 0) scale(1);
1695
+ }
1696
+ 40% {
1697
+ transform: translate3d(-100%, -50%, 0) scale(0.7);
1698
+ }
1699
+ to {
1700
+ opacity: 1;
1701
+ transform: translate3d(-150%, -50%, 0) scale(0);
1702
+ }
1703
+ }
1704
+
1705
+ @keyframes jump3 {
1706
+ 0% {
1707
+ opacity: 1;
1708
+ transform: translate3d(-50%, 0, 0) scale(1);
1709
+ }
1710
+ 40% {
1711
+ transform: translate3d(-50%, 100%, 0) scale(0.7);
1712
+ }
1713
+ to {
1714
+ opacity: 1;
1715
+ transform: translate3d(-50%, 150%, 0) scale(0);
1716
+ }
1689
1717
  }
1690
1718
 
1691
- .element-video .ani-wrap, .element-video img {
1692
- display: block;
1693
- width: 100%;
1694
- height: 100%;
1719
+ @keyframes jump4 {
1720
+ 0% {
1721
+ opacity: 1;
1722
+ transform: translate3d(0, -50%, 0) scale(1);
1723
+ }
1724
+ 40% {
1725
+ transform: translate3d(100%, -50%, 0) scale(0.7);
1726
+ }
1727
+ to {
1728
+ opacity: 1;
1729
+ transform: translate3d(150%, -50%, 0) scale(0);
1730
+ }
1695
1731
  }
1696
1732
 
1697
- .video-container {
1698
- width: 100%;
1699
- height: 100%;
1733
+ @keyframes jump5 {
1734
+ 0% {
1735
+ opacity: 1;
1736
+ transform: translate3d(0, -50%, 0) scale(1);
1737
+ }
1738
+ 40% {
1739
+ transform: translate3d(-80%, -80%, 0) scale(0.7);
1740
+ }
1741
+ to {
1742
+ opacity: 1;
1743
+ transform: translate3d(-130%, -130%, 0) scale(0);
1744
+ }
1700
1745
  }
1701
1746
 
1702
- .video-container iframe {
1703
- width: 100%;
1704
- height: 100%;
1705
- border: none;
1747
+ @keyframes jump6 {
1748
+ 0% {
1749
+ opacity: 1;
1750
+ transform: translate3d(0, 50%, 0) scale(1);
1751
+ }
1752
+ 40% {
1753
+ transform: translate3d(-80%, 80%, 0) scale(0.7);
1754
+ }
1755
+ to {
1756
+ opacity: 1;
1757
+ transform: translate3d(-130%, 130%, 0) scale(0);
1758
+ }
1706
1759
  }
1707
1760
 
1708
- .video-cover {
1709
- position: relative;
1710
- width: 100%;
1711
- height: 100%;
1712
- background-size: cover;
1713
- background-position: center;
1714
- cursor: pointer;
1761
+ @keyframes jump7 {
1762
+ 0% {
1763
+ opacity: 1;
1764
+ transform: translate3d(0, 50%, 0) scale(1);
1765
+ }
1766
+ 40% {
1767
+ transform: translate3d(80%, 80%, 0) scale(0.7);
1768
+ }
1769
+ to {
1770
+ opacity: 1;
1771
+ transform: translate3d(130%, 130%, 0) scale(0);
1772
+ }
1715
1773
  }
1716
1774
 
1717
- .video-cover .play-btn {
1718
- position: absolute;
1719
- left: 50%;
1775
+ @keyframes jump8 {
1776
+ 0% {
1777
+ opacity: 1;
1778
+ transform: translate3d(0, 50%, 0) scale(1);
1779
+ }
1780
+ 40% {
1781
+ transform: translate3d(80%, -80%, 0) scale(0.7);
1782
+ }
1783
+ to {
1784
+ opacity: 1;
1785
+ transform: translate3d(130%, -130%, 0) scale(0);
1786
+ }
1787
+ }
1788
+
1789
+ /* 礼物弹窗样式 */
1790
+ .give-gift {
1791
+ position: fixed;
1720
1792
  top: 50%;
1793
+ left: 50%;
1721
1794
  transform: translate(-50%, -50%);
1722
- width: 50px;
1723
- height: 50px;
1724
- opacity: 0.8;
1725
- transition: opacity 0.2s;
1795
+ z-index: 2004;
1796
+ background: white;
1797
+ padding: 20px;
1798
+ border-radius: 10px;
1799
+ text-align: center;
1726
1800
  }
1727
1801
 
1728
- .video-cover:hover .play-btn {
1729
- opacity: 1;
1730
- }.button {
1731
- position: absolute;
1732
- cursor: pointer;
1733
- user-select: none;
1734
- }
1802
+ .give-gift .back {
1803
+ position: absolute;
1804
+ top: 10px;
1805
+ left: 10px;
1806
+ cursor: pointer;
1807
+ }
1735
1808
 
1736
- .button .ani-wrap {
1737
- display: flex;
1738
- justify-content: center;
1739
- align-items: center;
1740
- width: 100%;
1741
- height: 100%;
1742
- overflow: hidden;
1743
- transition: opacity 0.2s;
1744
- }
1809
+ .give-gift img {
1810
+ max-width: 300px;
1811
+ max-height: 300px;
1812
+ margin-top: 20px;
1813
+ }
1745
1814
 
1746
- .button .ani-wrap:hover {
1747
- opacity: 0.9;
1748
- }
1749
-
1750
- .button-content {
1751
- display: flex;
1752
- align-items: center;
1753
- justify-content: center;
1754
- }
1755
-
1756
- .btn-text {
1757
- margin-left: 10px;
1758
- }.form-input {
1815
+ /* 留言成功弹窗样式 */
1816
+ .mess-success-popup {
1817
+ position: fixed;
1818
+ top: 0;
1819
+ left: 0;
1820
+ right: 0;
1821
+ bottom: 0;
1822
+ background-color: rgba(0, 0, 0, 0.5);
1823
+ z-index: 2003;
1824
+ display: flex;
1825
+ justify-content: center;
1826
+ align-items: center;
1827
+ }
1828
+
1829
+ .mess-success-popup .gift-popup {
1830
+ width: 300px;
1831
+ height: 200px;
1832
+ background: url('https://h5cdn.unika.cc/static/img/uniComponents/bg-color.png') no-repeat;
1833
+ border-radius: 10px;
1834
+ padding: 20px;
1835
+ text-align: center;
1836
+ position: relative;
1837
+ }
1838
+
1839
+ .mess-success-popup .gift-popup .icon-cuowu2 {
1759
1840
  position: absolute;
1841
+ top: 10px;
1842
+ right: 10px;
1843
+ cursor: pointer;
1760
1844
  }
1761
1845
 
1762
- .input-wrapper {
1846
+ .mess-success-popup .gift-popup .toast {
1763
1847
  display: flex;
1764
1848
  align-items: center;
1765
- width: 100%;
1766
- height: 100%;
1767
- padding: 0 10px;
1768
- box-sizing: border-box;
1769
- position: relative;
1770
- transition: border-color 0.3s;
1849
+ justify-content: center;
1850
+ margin: 10px 0;
1771
1851
  }
1772
1852
 
1773
- .required-marker {
1774
- font-size: 12px;
1775
- padding: 0 5px 0 0;
1776
- color: red;
1777
- vertical-align: middle;
1853
+ .mess-success-popup .gift-popup .toast img {
1854
+ width: 20px;
1855
+ height: 15px;
1856
+ margin: 0 5px;
1778
1857
  }
1779
1858
 
1780
- input {
1781
- flex: 1;
1859
+ .mess-success-popup .gift-popup .title {
1860
+ margin: 15px 0;
1861
+ font-size: 16px;
1862
+ color: #333;
1863
+ }
1864
+
1865
+ .mess-success-popup .gift-popup .btn {
1866
+ background: linear-gradient(270deg, #ff4874, #ff9061);
1867
+ color: white;
1782
1868
  border: none;
1783
- outline: none;
1784
- background: transparent;
1869
+ padding: 10px 20px;
1870
+ border-radius: 20px;
1871
+ margin-top: 15px;
1872
+ cursor: pointer;
1873
+ }
1874
+
1875
+ /* 新增图片加载动画样式 */
1876
+ .gift-image-container {
1877
+ position: relative;
1878
+ width: 300px;
1879
+ height: 300px;
1880
+ margin: 20px 0;
1881
+ overflow: hidden;
1882
+ }
1883
+
1884
+ .gift-image-container img {
1885
+ width: 100%;
1785
1886
  height: 100%;
1786
- padding: 0;
1787
- margin: 0;
1887
+ object-fit: contain;
1888
+ opacity: 0;
1889
+ transition: opacity 0.5s ease-in-out;
1788
1890
  }
1789
- /*
1790
- input::placeholder {
1791
- color: #ccc;
1792
- opacity: 1;
1793
- } */
1794
1891
 
1795
- .dynamic-placeholder-input::placeholder {
1796
- color: var(--placeholder-color, #999);
1892
+ .gift-image-container img.loaded {
1797
1893
  opacity: 1;
1798
1894
  }
1799
- .dynamic-placeholder-input::-webkit-input-placeholder {
1800
- color: var(--placeholder-color, #999);
1895
+
1896
+ .image-loading {
1897
+ position: absolute;
1898
+ top: 0;
1899
+ left: 0;
1900
+ width: 100%;
1901
+ height: 100%;
1902
+ display: flex;
1903
+ justify-content: center;
1904
+ align-items: center;
1905
+ background: rgba(255, 255, 255, 0.8);
1906
+ }
1907
+
1908
+ .loading-spinner {
1909
+ width: 40px;
1910
+ height: 40px;
1911
+ border: 4px solid #f3f3f3;
1912
+ border-top: 4px solid #ed5566;
1913
+ border-radius: 50%;
1914
+ animation: spin 1s linear infinite;
1801
1915
  }
1802
- .dynamic-placeholder-input::-moz-placeholder {
1803
- color: var(--placeholder-color, #999);
1804
- opacity: 1;
1916
+
1917
+ @keyframes spin {
1918
+ 0% { transform: rotate(0deg); }
1919
+ 100% { transform: rotate(360deg); }
1805
1920
  }
1806
- .dynamic-placeholder-input:-ms-input-placeholder {
1807
- color: var(--placeholder-color, #999);
1808
- }.ele-effect {
1921
+
1922
+ .button {
1923
+ position: absolute;
1924
+ cursor: pointer;
1925
+ user-select: none;
1926
+ }
1927
+
1928
+ .button .ani-wrap {
1929
+ display: flex;
1930
+ justify-content: center;
1931
+ align-items: center;
1932
+ width: 100%;
1933
+ height: 100%;
1934
+ overflow: hidden;
1935
+ transition: opacity 0.2s;
1936
+ }
1937
+
1938
+ .button .ani-wrap:hover {
1939
+ opacity: 0.9;
1940
+ }
1941
+
1942
+ .button-content {
1943
+ display: flex;
1944
+ align-items: center;
1945
+ justify-content: center;
1946
+ }
1947
+
1948
+ .btn-text {
1949
+ margin-left: 10px;
1950
+ }.ele-effect {
1809
1951
  will-change: transform;
1810
1952
  }
1811
1953
 
@@ -1860,6 +2002,49 @@
1860
2002
  transform-origin: center;
1861
2003
  -webkit-animation: snow 5s linear infinite;
1862
2004
  animation: snow 5s linear infinite
2005
+ }.call {
2006
+ position: absolute;
2007
+ cursor: pointer;
2008
+ user-select: none;
2009
+ }
2010
+
2011
+ .call .ani-wrap {
2012
+ display: flex;
2013
+ justify-content: center;
2014
+ align-items: center;
2015
+ width: 100%;
2016
+ height: 100%;
2017
+ overflow: hidden;
2018
+ transition: opacity 0.2s;
2019
+ }
2020
+
2021
+ .call .ani-wrap:hover {
2022
+ opacity: 0.9;
2023
+ }
2024
+
2025
+ .call-content {
2026
+ display: flex;
2027
+ align-items: center;
2028
+ justify-content: center;
2029
+ }
2030
+
2031
+ .btn-text {
2032
+ margin-left: 10px;
2033
+ }
2034
+
2035
+ /* 这里可以添加实际的电话图标样式 */
2036
+ /* .iconfont.hb-tel {
2037
+ display: inline-block;
2038
+ width: 16px;
2039
+ height: 16px;
2040
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>');
2041
+ background-repeat: no-repeat;
2042
+ background-position: center;
2043
+ background-size: contain;
2044
+ } */
2045
+
2046
+ .hb-tel:before {
2047
+ content: "\E642";
1863
2048
  }body, html {
1864
2049
  width: 100%;
1865
2050
  height: 100%;
@@ -3347,7 +3532,59 @@
3347
3532
  -webkit-transform: none;
3348
3533
  transform: none
3349
3534
  }
3350
- }.form-submit {
3535
+ }.form-input {
3536
+ position: absolute;
3537
+ }
3538
+
3539
+ .input-wrapper {
3540
+ display: flex;
3541
+ align-items: center;
3542
+ width: 100%;
3543
+ height: 100%;
3544
+ padding: 0 10px;
3545
+ box-sizing: border-box;
3546
+ position: relative;
3547
+ transition: border-color 0.3s;
3548
+ }
3549
+
3550
+ .required-marker {
3551
+ font-size: 12px;
3552
+ padding: 0 5px 0 0;
3553
+ color: red;
3554
+ vertical-align: middle;
3555
+ }
3556
+
3557
+ input {
3558
+ flex: 1;
3559
+ border: none;
3560
+ outline: none;
3561
+ background: transparent;
3562
+ height: 100%;
3563
+ padding: 0;
3564
+ margin: 0;
3565
+ }
3566
+ /*
3567
+ input::placeholder {
3568
+ color: #ccc;
3569
+ opacity: 1;
3570
+ } */
3571
+
3572
+ .dynamic-placeholder-input::placeholder {
3573
+ color: var(--placeholder-color, #999);
3574
+ opacity: 1;
3575
+ }
3576
+ .dynamic-placeholder-input::-webkit-input-placeholder {
3577
+ color: var(--placeholder-color, #999);
3578
+ }
3579
+ .dynamic-placeholder-input::-moz-placeholder {
3580
+ color: var(--placeholder-color, #999);
3581
+ opacity: 1;
3582
+ }
3583
+ .dynamic-placeholder-input:-ms-input-placeholder {
3584
+ color: var(--placeholder-color, #999);
3585
+ }
3586
+
3587
+ .form-submit {
3351
3588
  cursor: pointer;
3352
3589
  transition: all 0.2s;
3353
3590
  outline: none;
@@ -3370,50 +3607,226 @@
3370
3607
  transform: none !important;
3371
3608
  }
3372
3609
 
3373
- /* 统一错误提示样式 */
3374
- .tip-cover {
3610
+ /* 统一错误提示样式 */
3611
+ .tip-cover {
3612
+ position: fixed;
3613
+ left: 0;
3614
+ top: 0;
3615
+ width: 100%;
3616
+ height: 100%;
3617
+ display: flex;
3618
+ align-items: center;
3619
+ justify-content: center;
3620
+ z-index: 999;
3621
+ background-color: rgba(0,0,0,.7);
3622
+ }
3623
+
3624
+ .tip {
3625
+ width: 80%;
3626
+ max-width: 250px;
3627
+ padding: 10px;
3628
+ border-radius: 5px;
3629
+ background-color: #fff;
3630
+ }
3631
+
3632
+ .tip-btn {
3633
+ display: block;
3634
+ margin: 25px auto;
3635
+ width: 120px;
3636
+ height: 30px;
3637
+ color: #fff;
3638
+ border-radius: 4px;
3639
+ text-align: center;
3640
+ font-size: 14px;
3641
+ line-height: 30px;
3642
+ background: #ed5566;
3643
+ cursor: pointer;
3644
+ }
3645
+
3646
+ .tip-content {
3647
+ font-size: 14px;
3648
+ padding-top: 30px;
3649
+ text-align: center;
3650
+ }.ele-form {
3651
+ position: absolute;
3652
+ user-select: none;
3653
+ }
3654
+
3655
+ .f-single {
3656
+ cursor: pointer;
3657
+ }
3658
+
3659
+ .ani-wrap {
3660
+ position: relative;
3661
+ }
3662
+
3663
+ .f-single .ani-wrap .fs-tit {
3664
+ display: flex;
3665
+ padding: 0 5px;
3666
+ height: 40px;
3667
+ align-items: center;
3668
+ white-space: nowrap;
3669
+ overflow: hidden;
3670
+ text-overflow: ellipsis;
3671
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
3672
+ }
3673
+
3674
+ .require {
3675
+ padding: 0 5px 0 0;
3676
+ color: red;
3677
+ vertical-align: middle;
3678
+ }
3679
+
3680
+ .f-single ul {
3681
+ padding: 15px;
3682
+ margin: 0;
3683
+ list-style: none;
3684
+ }
3685
+
3686
+ .f-single ul li {
3687
+ display: flex;
3688
+ align-items: center;
3689
+ margin-top: 12px;
3690
+ font-size: 0;
3691
+ }
3692
+
3693
+ .f-single ul li:first-child {
3694
+ margin-top: 0;
3695
+ }
3696
+
3697
+ .fs-circle {
3698
+ display: inline-block;
3699
+ width: 16px;
3700
+ height: 16px;
3701
+ border-radius: 50%;
3702
+ position: relative;
3703
+ transition: all 0.2s;
3704
+ }
3705
+
3706
+ .fs-circle.selected {
3707
+ background-color: #2687f1;
3708
+ border-color: #2687f1 !important;
3709
+ }
3710
+
3711
+ .fs-circle.selected::after {
3712
+ content: "";
3713
+ position: absolute;
3714
+ top: 3px;
3715
+ left: 3px;
3716
+ width: 8px;
3717
+ height: 8px;
3718
+ border-radius: 50%;
3719
+ background-color: white;
3720
+ }
3721
+
3722
+ .fs-txt {
3723
+ display: inline-block;
3724
+ width: calc(100% - 16px);
3725
+ padding-left: 8px;
3726
+ vertical-align: top;
3727
+ word-break: break-all;
3728
+ font-size: 14px;
3729
+ line-height: 1.2;
3730
+ }
3731
+
3732
+ .has-error .fs-tit {
3733
+ border-bottom-color: #ff4d4f;
3734
+ }
3735
+
3736
+ /* 错误提示样式 */
3737
+ .error-tip {
3375
3738
  position: fixed;
3376
3739
  left: 0;
3377
3740
  top: 0;
3378
3741
  width: 100%;
3379
3742
  height: 100%;
3380
- display: flex;
3381
- align-items: center;
3382
- justify-content: center;
3383
- z-index: 999;
3384
- background-color: rgba(0,0,0,.7);
3385
- }
3386
-
3387
- .tip {
3388
- width: 80%;
3389
- max-width: 250px;
3390
- padding: 10px;
3391
- border-radius: 5px;
3392
- background-color: #fff;
3393
- }
3394
-
3395
- .tip-btn {
3396
- display: block;
3397
- margin: 25px auto;
3398
- width: 120px;
3399
- height: 30px;
3400
- color: #fff;
3401
- border-radius: 4px;
3402
- text-align: center;
3403
- font-size: 14px;
3404
- line-height: 30px;
3405
- background: #ed5566;
3406
- cursor: pointer;
3407
- }
3408
-
3409
- .tip-content {
3410
- font-size: 14px;
3411
- padding-top: 30px;
3412
- text-align: center;
3413
- }
3414
- .ele-lottie .ele-lotwrap {
3415
- overflow: hidden;
3416
- }
3743
+ z-index: 1000;
3744
+ }.ele-form {
3745
+ position: absolute;
3746
+ user-select: none;
3747
+ }
3748
+
3749
+ .f-multiple {
3750
+ cursor: pointer;
3751
+ }
3752
+
3753
+ .ani-wrap {
3754
+ position: relative;
3755
+ }
3756
+
3757
+ .f-multiple .ani-wrap .fs-tit {
3758
+ display: flex;
3759
+ padding: 0 5px;
3760
+ height: 40px;
3761
+ align-items: center;
3762
+ white-space: nowrap;
3763
+ overflow: hidden;
3764
+ text-overflow: ellipsis;
3765
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
3766
+ }
3767
+
3768
+ .require {
3769
+ padding: 0 5px 0 0;
3770
+ color: red;
3771
+ vertical-align: middle;
3772
+ }
3773
+
3774
+ .f-multiple ul {
3775
+ padding: 15px;
3776
+ margin: 0;
3777
+ list-style: none;
3778
+ }
3779
+
3780
+ .f-multiple ul li {
3781
+ margin-top: 12px;
3782
+ font-size: 0;
3783
+ display: flex;
3784
+ align-items: center;
3785
+ cursor: pointer;
3786
+ }
3787
+
3788
+ .f-multiple ul li:first-child {
3789
+ margin-top: 0;
3790
+ }
3791
+
3792
+ .fs-circle {
3793
+ display: inline-block;
3794
+ width: 16px;
3795
+ height: 16px;
3796
+ border-radius: 50%;
3797
+ position: relative;
3798
+ transition: all 0.2s;
3799
+ }
3800
+
3801
+ .fs-circle.selected {
3802
+ background-color: #2687f1;
3803
+ border-color: #2687f1 !important;
3804
+ }
3805
+
3806
+ .fs-circle.selected::after {
3807
+ content: "";
3808
+ position: absolute;
3809
+ top: 3px;
3810
+ left: 3px;
3811
+ width: 8px;
3812
+ height: 8px;
3813
+ border-radius: 50%;
3814
+ background-color: white;
3815
+ }
3816
+
3817
+ .fs-txt {
3818
+ display: inline-block;
3819
+ width: calc(100% - 16px);
3820
+ padding-left: 8px;
3821
+ vertical-align: top;
3822
+ word-break: break-all;
3823
+ font-size: 14px;
3824
+ line-height: 1.2;
3825
+ }
3826
+
3827
+ .has-error .fs-tit {
3828
+ border-bottom-color: #ff4d4f;
3829
+ }
3417
3830
  .icon-guanbi:before {
3418
3831
  content: "\E676";
3419
3832
  }
@@ -3777,260 +4190,38 @@
3777
4190
  .mint-toast {
3778
4191
  position: fixed;
3779
4192
  top: 50%;
3780
- left: 50%;
3781
- transform: translate(-50%, -50%);
3782
- display: flex;
3783
- flex-direction: column;
3784
- align-items: center;
3785
- justify-content: center;
3786
- min-width: 90px; /* 2.4rem ≈ 90px */
3787
- max-width: 180px; /* 4.8rem ≈ 180px */
3788
- height: 90px;
3789
- padding: 8px !important; /* 0.21333rem ≈ 8px */
3790
- background-color: rgba(0, 0, 0, 0.7);
3791
- border-radius: 8px;
3792
- z-index: 2000;
3793
- color: #fff;
3794
- }
3795
-
3796
- .mint-toast-text {
3797
- font-size: 12px; /* 0.32rem ≈ 12px */
3798
- padding-top: 0 !important;
3799
- }
3800
-
3801
- /* 新增图标样式 */
3802
- .icon-duihao:before {
3803
- content: "\E637";
3804
- }
3805
-
3806
- .icon-cuowu2:before {
3807
- content: "\E65E";
3808
- color: #F44336; /* 失败的红色 */
3809
- }
3810
- .call {
3811
- position: absolute;
3812
- cursor: pointer;
3813
- user-select: none;
3814
- }
3815
-
3816
- .call .ani-wrap {
3817
- display: flex;
3818
- justify-content: center;
3819
- align-items: center;
3820
- width: 100%;
3821
- height: 100%;
3822
- overflow: hidden;
3823
- transition: opacity 0.2s;
3824
- }
3825
-
3826
- .call .ani-wrap:hover {
3827
- opacity: 0.9;
3828
- }
3829
-
3830
- .call-content {
3831
- display: flex;
3832
- align-items: center;
3833
- justify-content: center;
3834
- }
3835
-
3836
- .btn-text {
3837
- margin-left: 10px;
3838
- }
3839
-
3840
- /* 这里可以添加实际的电话图标样式 */
3841
- /* .iconfont.hb-tel {
3842
- display: inline-block;
3843
- width: 16px;
3844
- height: 16px;
3845
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>');
3846
- background-repeat: no-repeat;
3847
- background-position: center;
3848
- background-size: contain;
3849
- } */
3850
-
3851
- .hb-tel:before {
3852
- content: "\E642";
3853
- }.ele-form {
3854
- position: absolute;
3855
- user-select: none;
3856
- }
3857
-
3858
- .f-multiple {
3859
- cursor: pointer;
3860
- }
3861
-
3862
- .ani-wrap {
3863
- position: relative;
3864
- }
3865
-
3866
- .f-multiple .ani-wrap .fs-tit {
3867
- display: flex;
3868
- padding: 0 5px;
3869
- height: 40px;
3870
- align-items: center;
3871
- white-space: nowrap;
3872
- overflow: hidden;
3873
- text-overflow: ellipsis;
3874
- border-bottom: 1px solid rgba(153, 153, 153, 1);
3875
- }
3876
-
3877
- .require {
3878
- padding: 0 5px 0 0;
3879
- color: red;
3880
- vertical-align: middle;
3881
- }
3882
-
3883
- .f-multiple ul {
3884
- padding: 15px;
3885
- margin: 0;
3886
- list-style: none;
3887
- }
3888
-
3889
- .f-multiple ul li {
3890
- margin-top: 12px;
3891
- font-size: 0;
3892
- display: flex;
3893
- align-items: center;
3894
- cursor: pointer;
3895
- }
3896
-
3897
- .f-multiple ul li:first-child {
3898
- margin-top: 0;
3899
- }
3900
-
3901
- .fs-circle {
3902
- display: inline-block;
3903
- width: 16px;
3904
- height: 16px;
3905
- border-radius: 50%;
3906
- position: relative;
3907
- transition: all 0.2s;
4193
+ left: 50%;
4194
+ transform: translate(-50%, -50%);
4195
+ display: flex;
4196
+ flex-direction: column;
4197
+ align-items: center;
4198
+ justify-content: center;
4199
+ min-width: 90px; /* 2.4rem ≈ 90px */
4200
+ max-width: 180px; /* 4.8rem ≈ 180px */
4201
+ height: 90px;
4202
+ padding: 8px !important; /* 0.21333rem ≈ 8px */
4203
+ background-color: rgba(0, 0, 0, 0.7);
4204
+ border-radius: 8px;
4205
+ z-index: 2000;
4206
+ color: #fff;
3908
4207
  }
3909
4208
 
3910
- .fs-circle.selected {
3911
- background-color: #2687f1;
3912
- border-color: #2687f1 !important;
4209
+ .mint-toast-text {
4210
+ font-size: 12px; /* 0.32rem ≈ 12px */
4211
+ padding-top: 0 !important;
3913
4212
  }
3914
4213
 
3915
- .fs-circle.selected::after {
3916
- content: "";
3917
- position: absolute;
3918
- top: 3px;
3919
- left: 3px;
3920
- width: 8px;
3921
- height: 8px;
3922
- border-radius: 50%;
3923
- background-color: white;
4214
+ /* 新增图标样式 */
4215
+ .icon-duihao:before {
4216
+ content: "\E637";
3924
4217
  }
3925
4218
 
3926
- .fs-txt {
3927
- display: inline-block;
3928
- width: calc(100% - 16px);
3929
- padding-left: 8px;
3930
- vertical-align: top;
3931
- word-break: break-all;
3932
- font-size: 14px;
3933
- line-height: 1.2;
4219
+ .icon-cuowu2:before {
4220
+ content: "\E65E";
4221
+ color: #F44336; /* 失败的红色 */
3934
4222
  }
3935
4223
 
3936
- .has-error .fs-tit {
3937
- border-bottom-color: #ff4d4f;
3938
- }.ele-form {
3939
- position: absolute;
3940
- user-select: none;
3941
- }
3942
-
3943
- .f-single {
3944
- cursor: pointer;
3945
- }
3946
-
3947
- .ani-wrap {
3948
- position: relative;
3949
- }
3950
-
3951
- .f-single .ani-wrap .fs-tit {
3952
- display: flex;
3953
- padding: 0 5px;
3954
- height: 40px;
3955
- align-items: center;
3956
- white-space: nowrap;
3957
- overflow: hidden;
3958
- text-overflow: ellipsis;
3959
- border-bottom: 1px solid rgba(153, 153, 153, 1);
3960
- }
3961
-
3962
- .require {
3963
- padding: 0 5px 0 0;
3964
- color: red;
3965
- vertical-align: middle;
3966
- }
3967
-
3968
- .f-single ul {
3969
- padding: 15px;
3970
- margin: 0;
3971
- list-style: none;
3972
- }
3973
-
3974
- .f-single ul li {
3975
- display: flex;
3976
- align-items: center;
3977
- margin-top: 12px;
3978
- font-size: 0;
3979
- }
3980
-
3981
- .f-single ul li:first-child {
3982
- margin-top: 0;
3983
- }
3984
-
3985
- .fs-circle {
3986
- display: inline-block;
3987
- width: 16px;
3988
- height: 16px;
3989
- border-radius: 50%;
3990
- position: relative;
3991
- transition: all 0.2s;
3992
- }
3993
-
3994
- .fs-circle.selected {
3995
- background-color: #2687f1;
3996
- border-color: #2687f1 !important;
3997
- }
3998
-
3999
- .fs-circle.selected::after {
4000
- content: "";
4001
- position: absolute;
4002
- top: 3px;
4003
- left: 3px;
4004
- width: 8px;
4005
- height: 8px;
4006
- border-radius: 50%;
4007
- background-color: white;
4008
- }
4009
-
4010
- .fs-txt {
4011
- display: inline-block;
4012
- width: calc(100% - 16px);
4013
- padding-left: 8px;
4014
- vertical-align: top;
4015
- word-break: break-all;
4016
- font-size: 14px;
4017
- line-height: 1.2;
4018
- }
4019
-
4020
- .has-error .fs-tit {
4021
- border-bottom-color: #ff4d4f;
4022
- }
4023
-
4024
- /* 错误提示样式 */
4025
- .error-tip {
4026
- position: fixed;
4027
- left: 0;
4028
- top: 0;
4029
- width: 100%;
4030
- height: 100%;
4031
- z-index: 1000;
4032
- }
4033
- .global.receipt {
4224
+ .global.video {
4034
4225
  width: 35px;
4035
4226
  height: 55px;
4036
4227
  border-radius: 50%;
@@ -4039,10 +4230,12 @@
4039
4230
  border: 2px solid #fff;
4040
4231
  cursor: pointer;
4041
4232
  }
4042
- .icon-liuyan:before { content: "\E636"; }
4233
+ .icon-shipin2:before { content: "\E611"; }
4043
4234
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4044
- .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }
4045
- .global.video {
4235
+ .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
4236
+ }
4237
+
4238
+ .global.map {
4046
4239
  width: 35px;
4047
4240
  height: 55px;
4048
4241
  border-radius: 50%;
@@ -4051,11 +4244,9 @@
4051
4244
  border: 2px solid #fff;
4052
4245
  cursor: pointer;
4053
4246
  }
4054
- .icon-shipin2:before { content: "\E611"; }
4247
+ .icon-daohang1:before { content: "\E612"; }
4055
4248
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4056
- .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
4057
- }
4058
-
4249
+ .global.map > span { font-size: 10px; line-height: 20px; display: block;}
4059
4250
  .global.tel {
4060
4251
  width: 35px;
4061
4252
  height: 55px;
@@ -4067,106 +4258,8 @@
4067
4258
  }
4068
4259
  .icon-dianhua:before { content: "\E60E"; }
4069
4260
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4070
- .global.tel > span { font-size: 10px; line-height: 20px; display: block;}.ele-form {
4071
- position: absolute;
4072
- user-select: none;
4073
- }
4074
-
4075
- .f-select {
4076
- cursor: pointer;
4077
- }
4078
-
4079
- .ani-wrap {
4080
- position: relative;
4081
- }
4082
-
4083
- .f-select .ani-wrap .fs-tit {
4084
- position: relative;
4085
- display: flex;
4086
- padding: 0 5px;
4087
- height: 35px;
4088
- line-height: 35px;
4089
- align-items: center;
4090
- }
4091
-
4092
- .require {
4093
- padding: 0 5px 0 0;
4094
- color: red;
4095
- vertical-align: middle;
4096
- }
4097
-
4098
- .fs-cont {
4099
- padding-right: 15px;
4100
- white-space: nowrap;
4101
- overflow: hidden;
4102
- text-overflow: ellipsis;
4103
- flex-grow: 1;
4104
- }
4105
-
4106
- .icon-bofang1 {
4107
- font-size: 12px;
4108
- transition: transform 0.2s ease;
4109
- }
4110
-
4111
- .rotate-180 {
4112
- transform: rotate(180deg) !important;
4113
- }
4114
-
4115
- .f-real {
4116
- position: absolute;
4117
- left: 0;
4118
- top: 0;
4119
- width: 100%;
4120
- height: 100%;
4121
- z-index: 1;
4122
- opacity: 0;
4123
- cursor: pointer;
4124
- }
4125
-
4126
- .dropdown-menu {
4127
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
4128
- }
4129
-
4130
- .dropdown-item {
4131
- padding: 8px 10px;
4132
- cursor: pointer;
4133
- transition: background-color 0.2s;
4134
- }
4135
-
4136
- .dropdown-item:hover {
4137
- background-color: #f5f5f5;
4138
- }
4139
-
4140
- .dropdown-item.selected {
4141
- background-color: #e6f7ff;
4142
- color: #1890ff;
4143
- }
4144
-
4145
- .f-select .fs-tit .icon-bofang1 {
4146
- position: absolute;
4147
- right: 10px;
4148
- font-size: 12px;
4149
- display: inline-block;
4150
- transform: rotate(90deg);
4151
- }
4152
-
4153
- .icon-bofang1:before {
4154
- content: "\E6CF";
4155
- }
4156
-
4157
- .has-error {
4158
- border-color: #ff4d4f !important;
4159
- }
4160
-
4161
- .error-tip {
4162
- position: fixed;
4163
- left: 0;
4164
- top: 0;
4165
- width: 100%;
4166
- height: 100%;
4167
- z-index: 1000;
4168
- }
4169
- .global.map {
4261
+ .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
4262
+ .global.receipt {
4170
4263
  width: 35px;
4171
4264
  height: 55px;
4172
4265
  border-radius: 50%;
@@ -4175,6 +4268,6 @@
4175
4268
  border: 2px solid #fff;
4176
4269
  cursor: pointer;
4177
4270
  }
4178
- .icon-daohang1:before { content: "\E612"; }
4271
+ .icon-liuyan:before { content: "\E636"; }
4179
4272
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4180
- .global.map > span { font-size: 10px; line-height: 20px; display: block;}
4273
+ .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }