unika-components 1.1.19 → 1.1.20

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.
@@ -81,50 +81,6 @@
81
81
  transform: scale(1);
82
82
  opacity: 1;
83
83
  }
84
- }.element-ditu .ani-wrap {
85
- width: 100%;
86
- height: 100%;
87
- overflow: hidden
88
- }
89
-
90
- .element-ditu .map {
91
- width: 100%;
92
- height: 100%
93
- }
94
-
95
- .element-ditu .map .el-button {
96
- width: 100%;
97
- height: 100%;
98
- display: -webkit-box;
99
- display: -ms-flexbox;
100
- display: flex;
101
- -webkit-box-align: center;
102
- -ms-flex-align: center;
103
- align-items: center;
104
- padding: 0;
105
- -webkit-box-pack: center;
106
- -ms-flex-pack: center;
107
- justify-content: center;
108
- background: inherit;
109
- color: inherit;
110
- border: none
111
- }
112
-
113
- .element-ditu .center-map {
114
- width: 100%;
115
- height: 100%;
116
- background: #fff
117
- }
118
-
119
- .element-ditu .mask-map {
120
- position: absolute;
121
- width: 100%;
122
- height: 100%;
123
- top: 0
124
- }
125
- .map-iframe {
126
- width: 100%;
127
- height: 100%;
128
84
  }.ele-shape {
129
85
  position: absolute;
130
86
  overflow: hidden;
@@ -155,867 +111,239 @@
155
111
  width: 100%;
156
112
  height: 100%;
157
113
  background: rgba(0,0,0,0.05);
158
- }.count-down .drag-point {
159
- cursor: default!important
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
160
167
  }
161
168
 
162
- .count-down .ani-wrap {
169
+ .element-ditu .map {
163
170
  width: 100%;
164
171
  height: 100%
165
172
  }
166
173
 
167
- .count-down .count-text,.count-down .finish-cont {
168
- display: -webkit-box;
169
- display: -ms-flexbox;
170
- display: flex;
174
+ .element-ditu .map .el-button {
175
+ width: 100%;
171
176
  height: 100%;
172
- -webkit-box-align: center;
173
- -ms-flex-align: center;
174
- align-items: center;
175
- -webkit-box-pack: center;
176
- -ms-flex-pack: center;
177
- justify-content: center
178
- }
179
-
180
- .count-down .finish-cont {
181
- width: 100%
182
- }
183
-
184
- .count-down .count-flip {
185
177
  display: -webkit-box;
186
178
  display: -ms-flexbox;
187
179
  display: flex;
188
- height: 100%;
189
180
  -webkit-box-align: center;
190
181
  -ms-flex-align: center;
191
182
  align-items: center;
183
+ padding: 0;
192
184
  -webkit-box-pack: center;
193
185
  -ms-flex-pack: center;
194
- justify-content: center
195
- }
196
-
197
- .count-down .count-flip .numscroll {
198
- -webkit-animation: numscroll .4s ease-in-out;
199
- animation: numscroll .4s ease-in-out;
200
- -webkit-animation-fill-mode: both;
201
- animation-fill-mode: both
202
- }
203
-
204
- .count-down .count-flip .numscroll .curr-num {
205
- -webkit-transition: all .3s ease-in-out;
206
- transition: all .3s ease-in-out;
207
- opacity: .6;
208
- -webkit-transform: scale(.5)!important;
209
- transform: scale(.5)!important
210
- }
211
-
212
- @-webkit-keyframes numscroll {
213
- 0% {
214
- -webkit-transform: translateZ(0);
215
- transform: translateZ(0)
216
- }
217
-
218
- to {
219
- -webkit-transform: translate3d(0,100%,0);
220
- transform: translate3d(0,100%,0)
221
- }
222
- }
223
-
224
- @keyframes numscroll {
225
- 0% {
226
- -webkit-transform: translateZ(0);
227
- transform: translateZ(0)
228
- }
229
-
230
- to {
231
- -webkit-transform: translate3d(0,100%,0);
232
- transform: translate3d(0,100%,0)
233
- }
234
- }
235
-
236
- .count-down .count-flip .c-com {
237
- min-width: 50px;
238
- height: auto;
239
- margin: 6px;
240
- padding: 5px 0 6px;
241
- background-color: #111
186
+ justify-content: center;
187
+ background: inherit;
188
+ color: inherit;
189
+ border: none
242
190
  }
243
191
 
244
- .count-down .count-flip .c-com .flex-wrap {
245
- display: -webkit-box;
246
- display: -ms-flexbox;
247
- display: flex;
248
- position: relative;
192
+ .element-ditu .center-map {
249
193
  width: 100%;
250
194
  height: 100%;
251
- -webkit-box-align: center;
252
- -ms-flex-align: center;
253
- align-items: center
254
- }
255
-
256
- .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
257
- line-height: 27px
195
+ background: #fff
258
196
  }
259
197
 
260
- .count-down .count-flip .c-com .flex-wrap .next-num {
198
+ .element-ditu .mask-map {
261
199
  position: absolute;
262
- top: -100%
263
- }
264
-
265
- .count-down .count-flip .c-com .flex-wrap .curr-num {
266
- -webkit-transform: scale(1);
267
- transform: scale(1)
268
- }
269
-
270
- .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 {
271
- display: none!important
272
- }
273
-
274
- .c-wrap {
275
200
  width: 100%;
276
201
  height: 100%;
277
- overflow: hidden;
278
- font-size: 0
279
- }
280
-
281
- .c-wrap.c-day-wrap {
282
- text-align: center
283
- }
284
-
285
- .c-wrap.c-day-wrap .c-num {
286
- width: auto
287
- }
288
-
289
- .c-wrap .c-num {
290
- display: inline-block;
291
- width: 50%;
292
- overflow: hidden;
293
- font-size: 20px;
294
- color: #999
295
- }
296
-
297
- .c-wrap .c-left .flex-wrap {
298
- display: -webkit-box;
299
- display: -ms-flexbox;
300
- display: flex;
301
- -webkit-box-pack: end;
302
- -ms-flex-pack: end;
303
- justify-content: flex-end
202
+ top: 0
304
203
  }
305
-
306
- .c-wrap .c-text {
307
- display: -webkit-box;
308
- display: -ms-flexbox;
309
- display: flex;
310
- width: 100%;
311
- font-size: 12px;
312
- -webkit-box-pack: center;
313
- -ms-flex-pack: center;
314
- justify-content: center;
315
- -webkit-box-align: center;
316
- -ms-flex-align: center;
317
- align-items: center;
318
- white-space: nowrap
319
- }
320
- #audio {
321
- position: absolute;
322
- right: 10px;
323
- top: 10px;
324
- z-index: 103;
325
- width: 30px;
326
- height: 30px;
327
- display: flex;
328
- align-items: center;
329
- }
330
-
331
- #audio .mrotate {
332
- animation: mrotate 5s linear infinite;
333
- }
334
-
335
- @keyframes mrotate {
336
- to {
337
- transform: rotate(1turn);
338
- }
339
- }
340
-
341
- #audio .audio {
204
+ .map-iframe {
342
205
  width: 100%;
343
206
  height: 100%;
344
- display: flex;
345
- align-items: center;
346
- justify-content: center;
347
- color: #fff;
348
- background: #666;
349
- border-radius: 50%;
350
- overflow: hidden;
351
- cursor: pointer;
352
- transition: all 0.3s ease;
353
- }
354
-
355
- #audio .audio.a-border {
356
- border: 1px solid #fff;
357
- }
358
-
359
- #audio .audio .music-icon {
360
- display: block;
361
- width: 60%;
362
- height: 60%;
363
- object-fit: contain;
364
- }
365
-
366
- #audio .audio .iconfont {
367
- font-size: 2opx;
368
- line-height: 1;
369
- }
370
- #audio .icon-cancel {
371
- position: absolute;
372
- width: 100%;
373
- height: 100%;
374
- border-radius: 50%;
375
- overflow: hidden;
376
- padding: 15px 0;
377
- }
378
- #audio .icon-cancel .icon-h {
379
- transform: rotate(45deg);
380
- width: 100%;
381
- height: 2px;
382
- background: #fff;
207
+ }/* Iconfont definition */
208
+ .icon-danmuliebiao1:before {
209
+ content: "\E68A";
383
210
  }
384
- #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
385
- content: '';
386
- position: absolute;
387
- width: 100%;
388
- height: 2px;
389
- background: #fff;
390
- }.call {
391
- position: absolute;
392
- cursor: pointer;
393
- user-select: none;
394
- }
395
-
396
- .call .ani-wrap {
397
- display: flex;
398
- justify-content: center;
399
- align-items: center;
400
- width: 100%;
401
- height: 100%;
402
- overflow: hidden;
403
- transition: opacity 0.2s;
404
- }
405
-
406
- .call .ani-wrap:hover {
407
- opacity: 0.9;
408
- }
409
-
410
- .call-content {
411
- display: flex;
412
- align-items: center;
413
- justify-content: center;
414
- }
415
-
416
- .btn-text {
417
- margin-left: 10px;
418
- }
419
-
420
- /* 这里可以添加实际的电话图标样式 */
421
- /* .iconfont.hb-tel {
422
- display: inline-block;
423
- width: 16px;
424
- height: 16px;
425
- 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>');
426
- background-repeat: no-repeat;
427
- background-position: center;
428
- background-size: contain;
429
- } */
430
-
431
- .hb-tel:before {
432
- content: "\E642";
433
- }.ele-img {
434
- position: absolute;
435
- overflow: hidden;
211
+
212
+ .icon-cuowu2:before {
213
+ content: "\E65E";
436
214
  }
437
215
 
438
- .ele-img .ani-wrap {
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;
439
234
  width: 100%;
440
- height: 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;
441
238
  }
442
239
 
443
- .ele-img .ele-image {
240
+ .toolbar {
241
+ display: flex;
242
+ align-items: center;
243
+ padding: 0 10px;
244
+ }
245
+
246
+ .bar-left {
444
247
  position: relative;
445
- display: block;
248
+ flex: 1;
446
249
  }
447
250
 
448
- .ele-img .rotate-wrap {
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 {
449
269
  position: absolute;
450
- left: 0;
451
- right: 0;
452
- top: 0;
453
- bottom: 0;
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;
454
278
  }
455
279
 
456
- .ele-img .ele-img-bg,
457
- .ele-img .rotate-wrap .img-wrap {
458
- width: 100%;
459
- height: 100%;
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;
460
304
  overflow: hidden;
305
+ z-index: 99;
306
+ pointer-events: none;
461
307
  }
462
308
 
463
- .ele-img .ele-bg-wrap {
464
- width: 100%;
465
- height: 100%;
466
- background-size: cover;
467
- background-position: 50% 50%;
468
- background-repeat: no-repeat;
469
- background-clip: border-box;
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%;
470
322
  }
471
323
 
472
- /* 动画关键帧 */
473
- @keyframes zoomIn {
474
- from {
475
- opacity: 0;
476
- transform: scale(0.5);
477
- }
478
- to {
324
+ @keyframes bulletMove {
325
+ 0% {
326
+ transform: translateY(0);
479
327
  opacity: 1;
480
- transform: scale(1);
328
+ }
329
+ 100% {
330
+ transform: translateY(calc(-1 * 150px));
331
+ opacity: 0;
481
332
  }
482
333
  }
483
- @keyframes jumpheart {
484
- to {
485
- -webkit-transform: scale(1.2);
486
- transform: scale(1.2)
487
- }
488
- }
489
- .ele-calendar {
490
- position: relative;
491
- width: 325px !important;
492
- min-height: 325px !important;
493
- height: auto !important;
494
- }
495
-
496
- .ele-calendar .drag-point {
497
- cursor: default !important;
498
- }
499
-
500
- .ele-calendar .ani-wrap {
501
- position: relative;
502
- width: 100%;
503
- min-height: 325px !important;
504
- height: auto !important;
505
- padding: 22px 0;
506
- }
507
-
508
- .ele-calendar .ani-wrap .can-wrap .can-top {
509
- display: flex;
510
- justify-content: space-between;
511
- align-items: flex-end;
512
- line-height: 1;
513
- padding: 0 47px 20px;
514
- }
515
-
516
- .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
517
- font-size: 25px;
518
- padding-bottom: 4px;
519
- }
520
-
521
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
522
- font-size: 25px;
523
- }
524
-
525
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
526
- position: relative;
527
- top: 2px;
528
- font-size: 57px;
529
- }
530
-
531
- .ele-calendar .ani-wrap .can-wrap .can-main {
532
- padding: 0 23px;
533
- }
534
-
535
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
536
- display: flex;
537
- justify-content: flex-start;
538
- height: 25px;
539
- line-height: 25px;
540
- padding: 0 10px;
541
- border-radius: 13px;
542
- }
543
-
544
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week span {
545
- width: 14.2%;
546
- text-align: center;
547
- color: #fff;
548
- font-size: 12px;
549
- }
550
-
551
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul {
552
- font-size: 0;
553
- padding: 5px 10px 0;
554
- text-align: left;
555
- }
556
-
557
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li {
558
- position: relative;
559
- display: inline-block;
560
- height: 25px;
561
- text-align: center;
562
- margin-top: 8px;
563
- }
564
-
565
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active .iconfont {
566
- display: block;
567
- }
568
-
569
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active span {
570
- color: #fff !important;
571
- }
572
-
573
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
574
- animation: jumpheart 0.8s ease infinite alternate;
575
- }
576
-
577
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
578
- display: none;
579
- font-size: 26px;
580
- }
581
-
582
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li span {
583
- position: absolute;
584
- left: 50%;
585
- top: 50%;
586
- z-index: 1;
587
- color: #666;
588
- font-size: 13px;
589
- transform: translate(-50%, -52%);
590
- }
591
-
592
- .ele-calendar .bottom-center,
593
- .ele-calendar .left-center,
594
- .ele-calendar .right-center,
595
- .ele-calendar .top-center {
596
- display: none !important;
597
- }
598
-
599
- .ele-calendar .ani-wrap .can-wrap2 {
600
- padding: 21px 23px 0
601
- }
602
-
603
- .ele-calendar .ani-wrap .can-wrap2 .can-top {
604
- display: -webkit-box;
605
- display: -ms-flexbox;
606
- display: flex;
607
- -webkit-box-pack: justify;
608
- -ms-flex-pack: justify;
609
- justify-content: space-between;
610
- -webkit-box-align: end;
611
- -ms-flex-align: end;
612
- align-items: flex-end;
613
- line-height: 1;
614
- padding: 0 16px 22px;
615
- font-size: 36px
616
- }
617
-
618
- .ele-calendar .ani-wrap .can-wrap2 .can-top span {
619
- font-size: 16px
620
- }
621
-
622
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week {
623
- display: -webkit-box;
624
- display: -ms-flexbox;
625
- display: flex;
626
- -webkit-box-pack: start;
627
- -ms-flex-pack: start;
628
- justify-content: flex-start;
629
- height: 25px;
630
- line-height: 25px;
631
- padding: 0 10px;
632
- border-radius: 13px
633
- }
634
-
635
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week span {
636
- width: 14.2%;
637
- text-align: center;
638
- color: #fff;
639
- font-size: 12px;
640
- font-weight: 600
641
- }
642
-
643
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date {
644
- position: relative
645
- }
646
-
647
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date .can-year {
648
- position: absolute;
649
- white-space: nowrap;
650
- left: 50%;
651
- top: 15%;
652
- -webkit-transform: translateX(-50%);
653
- transform: translateX(-50%);
654
- font-size: 76px;
655
- opacity: .1;
656
- font-weight: 600
657
- }
658
-
659
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul {
660
- font-size: 0;
661
- padding: 5px 10px 0;
662
- text-align: left
663
- }
664
-
665
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li {
666
- position: relative;
667
- display: inline-block;
668
- width: 14.2%;
669
- height: 25px;
670
- text-align: center;
671
- margin-top: 8px
672
- }
673
-
674
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active .iconfont {
675
- display: block;
676
- position: absolute;
677
- left: 17%;
678
- top: 0;
679
- font-size: 25px
680
- }
681
-
682
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active span {
683
- color: #fff!important
684
- }
685
-
686
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.heart-ani .iconfont {
687
- -webkit-animation: jumpheart .8s ease infinite alternate;
688
- animation: jumpheart .8s ease infinite alternate
689
- }
690
-
691
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li .iconfont {
692
- display: none;
693
- font-size: 26px
694
- }
695
-
696
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li span {
697
- position: absolute;
698
- left: 50%;
699
- top: 50%;
700
- z-index: 1;
701
- color: #666;
702
- font-size: 13px;
703
- -webkit-transform: translate(-50%,-52%);
704
- transform: translate(-50%,-52%)
705
- }
706
-
707
- .ele-calendar .ani-wrap .can-wrap3 .can-top {
708
- display: -webkit-box;
709
- display: -ms-flexbox;
710
- display: flex;
711
- -webkit-box-pack: justify;
712
- -ms-flex-pack: justify;
713
- justify-content: space-between;
714
- -webkit-box-align: end;
715
- -ms-flex-align: end;
716
- align-items: flex-end;
717
- line-height: 1;
718
- padding: 18px 33px 10px;
719
- font-size: 36px;
720
- }
721
-
722
- .ele-calendar .ani-wrap .can-wrap3 .can-top span {
723
- font-size: 16px
724
- }
725
-
726
- .ele-calendar .ani-wrap .can-wrap3 .can-top .can-year {
727
- font-size: 20px
728
- }
729
-
730
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week {
731
- display: -webkit-box;
732
- display: -ms-flexbox;
733
- display: flex;
734
- -webkit-box-pack: start;
735
- -ms-flex-pack: start;
736
- justify-content: flex-start;
737
- height: 40px;
738
- line-height: 40px;
739
- padding: 0 34px;
740
- border-bottom: 1px solid
741
- }
742
-
743
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week span {
744
- width: 14.2%;
745
- text-align: center;
746
- color: #fff;
747
- font-size: 12px;
748
- font-weight: 600
749
- }
750
-
751
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date {
752
- position: relative
753
- }
754
-
755
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul {
756
- font-size: 0;
757
- padding: 5px 33px 0;
758
- text-align: left
759
- }
760
-
761
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li {
762
- position: relative;
763
- display: inline-block;
764
- width: 14.2%;
765
- height: 25px;
766
- text-align: center;
767
- margin-top: 8px;
768
- }
769
-
770
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active {
771
- color: #eee
772
- }
773
-
774
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active .iconfont {
775
- display: block;
776
- position: absolute;
777
- left: 12%;
778
- top: 2px;
779
- }
780
-
781
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active span {
782
- font-size: 12px
783
- }
784
-
785
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.heart-ani .iconfont {
786
- -webkit-animation: jumpheart .8s ease infinite alternate;
787
- animation: jumpheart .8s ease infinite alternate
788
- }
789
-
790
- @keyframes jumpheart {
791
- to {
792
- -webkit-transform: scale(1.2);
793
- transform: scale(1.2)
794
- }
795
- }
796
-
797
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li .iconfont {
798
- display: none;
799
- font-size: 26px
800
- }
801
-
802
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li span {
803
- position: absolute;
804
- left: 50%;
805
- top: 50%;
806
- z-index: 1;
807
- color: #666;
808
- font-size: 13px;
809
- -webkit-transform: translate(-50%,-52%);
810
- transform: translate(-50%,-52%)
811
- }
812
-
813
- .ele-calendar .bottom-center,.ele-calendar .left-center,.ele-calendar .right-center,.ele-calendar .top-center {
814
- display: none!important
815
- }
816
- .icon-tuoyuanxing:before {
817
- content: "\E6A7";
818
- }
819
- .icon-zan1:before {
820
- content: "\E66D";
821
- }
822
- .icon-xingzhuangjiehe:before {
823
- content: "\E6A6";
824
- }.ele-effect {
825
- will-change: transform;
826
- }
827
-
828
- .ele-effect .effect-wrap {
829
- position: relative;
830
- width: 100%;
831
- height: 100%;
832
- }
833
-
834
- .particle {
835
- position: absolute;
836
- background-repeat: no-repeat;
837
- background-size: contain;
838
- animation-name: falling;
839
- animation-timing-function: linear;
840
- animation-iteration-count: infinite;
841
- will-change: transform;
842
- }
843
-
844
- @keyframes falling {
845
- 0% {
846
- transform: translateY(0) rotate(0deg);
847
- opacity: 1;
848
- }
849
- 80% {
850
- opacity: 0.8;
851
- }
852
- 100% {
853
- transform: translateY(100vh) rotate(360deg);
854
- opacity: 0;
855
- }
856
- }
857
- .ele-lottie .ele-lotwrap {
858
- overflow: hidden
859
- }
860
-
861
- .ele-effect .effect-wrap {
862
- position: relative;
863
- overflow: hidden;
864
- width: 100%;
865
- height: 100%
866
- }
867
-
868
- .ele-effect .e-small {
869
- position: absolute;
870
- width: 24px;
871
- height: 24px;
872
- background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
873
- background-size: cover;
874
- background-repeat: no-repeat;
875
- -webkit-transform-origin: center;
876
- transform-origin: center;
877
- -webkit-animation: snow 5s linear infinite;
878
- animation: snow 5s linear infinite
879
- }/* Iconfont definition */
880
- .icon-danmuliebiao1:before {
881
- content: "\E68A";
882
- }
883
-
884
- .icon-cuowu2:before {
885
- content: "\E65E";
886
- }
887
-
888
- i {
889
- font-style: normal;
890
- }
891
-
892
- .v-modal {
893
- position: fixed;
894
- left: 0;
895
- top: 0;
896
- width: 100%;
897
- height: 100%;
898
- opacity: .5;
899
- background: #000;
900
- }
901
- /* 底部工具栏样式 */
902
- #toolbarNew {
903
- position: fixed;
904
- left: 0;
905
- bottom: 0;
906
- width: 100%;
907
- padding: 12px 0;
908
- background: url('https://h5cdn.unika.cc/static/img/uniComponents/inputBg.png') 0 0 repeat-x;
909
- z-index: 100;
910
- }
911
-
912
- .toolbar {
913
- display: flex;
914
- align-items: center;
915
- padding: 0 10px;
916
- }
917
-
918
- .bar-left {
919
- position: relative;
920
- flex: 1;
921
- }
922
-
923
- .bar-mess {
924
- width: 100%;
925
- height: 36px;
926
- line-height: 36px;
927
- font-size: 14px;
928
- color: #ccc;
929
- padding: 0 8px;
930
- border-radius: 18px;
931
- border: none;
932
- -webkit-appearance: none;
933
- background-color: rgba(0, 0, 0, 0.28);
934
- }
935
-
936
- .bar-mess::placeholder {
937
- color: rgba(255, 255, 255, 0.7);
938
- }
939
-
940
- .bar-left .iconfont {
941
- position: absolute;
942
- right: 10px;
943
- top: 50%;
944
- transform: translateY(-50%);
945
- color: #f2f2f2;
946
- font-size: 16px;
947
- cursor: pointer;
948
- z-index: 2;
949
- padding: 5px;
950
- }
951
-
952
- /* 关闭弹幕按钮样式 */
953
- .toolbar-close {
954
- position: absolute;
955
- left: 10px;
956
- transform: translateY(-50%);
957
- display: flex;
958
- align-items: center;
959
- cursor: pointer;
960
- z-index: 2;
961
- }
962
-
963
- .toolbar-close img {
964
- display: block;
965
- width: 36px;
966
- height: 36px;
967
- cursor: pointer;
968
- }
969
-
970
- /* 弹幕容器样式 */
971
- .bullet-container {
972
- position: fixed;
973
- left: 10px;
974
- right: 10px;
975
- height: 120px;
976
- overflow: hidden;
977
- z-index: 99;
978
- pointer-events: none;
979
- }
980
-
981
- .bullet-item {
982
- position: absolute;
983
- left: 0;
984
- bottom: 0;
985
- padding: 5px 10px;
986
- border-radius: 15px;
987
- font-size: 14px;
988
- white-space: nowrap;
989
- animation: bulletMove linear;
990
- animation-fill-mode: forwards;
991
- will-change: transform;
992
- display: inline-block;
993
- max-width: 90%;
994
- }
995
-
996
- @keyframes bulletMove {
997
- 0% {
998
- transform: translateY(0);
999
- opacity: 1;
1000
- }
1001
- 100% {
1002
- transform: translateY(calc(-1 * 150px));
1003
- opacity: 0;
1004
- }
1005
- }
1006
-
1007
- /* 弹幕输入弹窗样式 */
1008
- .popup-overlay {
1009
- position: fixed;
1010
- top: 0;
1011
- left: 0;
1012
- right: 0;
1013
- bottom: 0;
1014
- background: rgba(0, 0, 0, 0.5);
1015
- display: flex;
1016
- justify-content: center;
1017
- align-items: flex-end;
1018
- z-index: 200;
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;
1019
347
  }
1020
348
 
1021
349
  #index .mint-popup {
@@ -1748,66 +1076,612 @@
1748
1076
  opacity: 0;
1749
1077
  transition: opacity 0.5s ease-in-out;
1750
1078
  }
1751
-
1752
- .gift-image-container img.loaded {
1753
- opacity: 1;
1079
+
1080
+ .gift-image-container img.loaded {
1081
+ opacity: 1;
1082
+ }
1083
+
1084
+ .image-loading {
1085
+ position: absolute;
1086
+ top: 0;
1087
+ 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);
1094
+ }
1095
+
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;
1103
+ }
1104
+
1105
+ @keyframes spin {
1106
+ 0% { transform: rotate(0deg); }
1107
+ 100% { transform: rotate(360deg); }
1108
+ }
1109
+
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;
1123
+ }
1124
+
1125
+ @keyframes mrotate {
1126
+ to {
1127
+ transform: rotate(1turn);
1128
+ }
1129
+ }
1130
+
1131
+ #audio .audio {
1132
+ width: 100%;
1133
+ height: 100%;
1134
+ display: flex;
1135
+ align-items: center;
1136
+ 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;
1147
+ }
1148
+
1149
+ #audio .audio .music-icon {
1150
+ display: block;
1151
+ width: 60%;
1152
+ height: 60%;
1153
+ object-fit: contain;
1154
+ }
1155
+
1156
+ #audio .audio .iconfont {
1157
+ font-size: 2opx;
1158
+ line-height: 1;
1159
+ }
1160
+ #audio .icon-cancel {
1161
+ position: absolute;
1162
+ width: 100%;
1163
+ height: 100%;
1164
+ border-radius: 50%;
1165
+ 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;
1173
+ }
1174
+ #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
1175
+ content: '';
1176
+ position: absolute;
1177
+ width: 100%;
1178
+ height: 2px;
1179
+ background: #fff;
1180
+ }
1181
+ @keyframes jumpheart {
1182
+ to {
1183
+ -webkit-transform: scale(1.2);
1184
+ transform: scale(1.2)
1185
+ }
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;
1196
+ }
1197
+
1198
+ .ele-calendar .ani-wrap {
1199
+ position: relative;
1200
+ width: 100%;
1201
+ min-height: 325px !important;
1202
+ height: auto !important;
1203
+ padding: 22px 0;
1204
+ }
1205
+
1206
+ .ele-calendar .ani-wrap .can-wrap .can-top {
1207
+ 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;
1227
+ }
1228
+
1229
+ .ele-calendar .ani-wrap .can-wrap .can-main {
1230
+ padding: 0 23px;
1231
+ }
1232
+
1233
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
1234
+ 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;
1269
+ }
1270
+
1271
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
1272
+ animation: jumpheart 0.8s ease infinite alternate;
1273
+ }
1274
+
1275
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
1276
+ display: none;
1277
+ font-size: 26px;
1278
+ }
1279
+
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
+ }
1289
+
1290
+ .ele-calendar .bottom-center,
1291
+ .ele-calendar .left-center,
1292
+ .ele-calendar .right-center,
1293
+ .ele-calendar .top-center {
1294
+ display: none !important;
1295
+ }
1296
+
1297
+ .ele-calendar .ani-wrap .can-wrap2 {
1298
+ padding: 21px 23px 0
1299
+ }
1300
+
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
1314
+ }
1315
+
1316
+ .ele-calendar .ani-wrap .can-wrap2 .can-top span {
1317
+ font-size: 16px
1318
+ }
1319
+
1320
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week {
1321
+ display: -webkit-box;
1322
+ display: -ms-flexbox;
1323
+ 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
1339
+ }
1340
+
1341
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date {
1342
+ position: relative
1343
+ }
1344
+
1345
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date .can-year {
1346
+ 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
1361
+ }
1362
+
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
1370
+ }
1371
+
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
1378
+ }
1379
+
1380
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active span {
1381
+ color: #fff!important
1382
+ }
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
1387
+ }
1388
+
1389
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li .iconfont {
1390
+ display: none;
1391
+ font-size: 26px
1392
+ }
1393
+
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%)
1403
+ }
1404
+
1405
+ .ele-calendar .ani-wrap .can-wrap3 .can-top {
1406
+ display: -webkit-box;
1407
+ display: -ms-flexbox;
1408
+ 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
1426
+ }
1427
+
1428
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week {
1429
+ display: -webkit-box;
1430
+ display: -ms-flexbox;
1431
+ 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;
1445
+ font-size: 12px;
1446
+ font-weight: 600
1447
+ }
1448
+
1449
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date {
1450
+ position: relative
1451
+ }
1452
+
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
1457
+ }
1458
+
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;
1466
+ }
1467
+
1468
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active {
1469
+ color: #eee
1470
+ }
1471
+
1472
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active .iconfont {
1473
+ display: block;
1474
+ position: absolute;
1475
+ left: 12%;
1476
+ top: 2px;
1477
+ }
1478
+
1479
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active span {
1480
+ font-size: 12px
1481
+ }
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
1486
+ }
1487
+
1488
+ @keyframes jumpheart {
1489
+ to {
1490
+ -webkit-transform: scale(1.2);
1491
+ transform: scale(1.2)
1492
+ }
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)
1754
1580
  }
1755
-
1756
- .image-loading {
1757
- position: absolute;
1758
- top: 0;
1759
- left: 0;
1760
- width: 100%;
1761
- height: 100%;
1762
- display: flex;
1763
- justify-content: center;
1764
- align-items: center;
1765
- background: rgba(255, 255, 255, 0.8);
1581
+
1582
+ to {
1583
+ -webkit-transform: translate3d(0,100%,0);
1584
+ transform: translate3d(0,100%,0)
1766
1585
  }
1767
-
1768
- .loading-spinner {
1769
- width: 40px;
1770
- height: 40px;
1771
- border: 4px solid #f3f3f3;
1772
- border-top: 4px solid #ed5566;
1773
- border-radius: 50%;
1774
- animation: spin 1s linear infinite;
1586
+ }
1587
+
1588
+ @keyframes numscroll {
1589
+ 0% {
1590
+ -webkit-transform: translateZ(0);
1591
+ transform: translateZ(0)
1775
1592
  }
1776
-
1777
- @keyframes spin {
1778
- 0% { transform: rotate(0deg); }
1779
- 100% { transform: rotate(360deg); }
1593
+
1594
+ to {
1595
+ -webkit-transform: translate3d(0,100%,0);
1596
+ transform: translate3d(0,100%,0)
1780
1597
  }
1781
-
1782
- .button {
1783
- position: absolute;
1784
- cursor: pointer;
1785
- user-select: none;
1786
1598
  }
1787
-
1788
- .button .ani-wrap {
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;
1789
1611
  display: flex;
1790
- justify-content: center;
1791
- align-items: center;
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 {
1792
1639
  width: 100%;
1793
1640
  height: 100%;
1794
1641
  overflow: hidden;
1795
- transition: opacity 0.2s;
1642
+ font-size: 0
1796
1643
  }
1797
-
1798
- .button .ani-wrap:hover {
1799
- opacity: 0.9;
1644
+
1645
+ .c-wrap.c-day-wrap {
1646
+ text-align: center
1800
1647
  }
1801
1648
 
1802
- .button-content {
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;
1803
1664
  display: flex;
1804
- align-items: center;
1805
- justify-content: center;
1665
+ -webkit-box-pack: end;
1666
+ -ms-flex-pack: end;
1667
+ justify-content: flex-end
1806
1668
  }
1807
1669
 
1808
- .btn-text {
1809
- margin-left: 10px;
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
1810
1683
  }
1684
+
1811
1685
  .element-video {
1812
1686
  position: absolute;
1813
1687
  overflow: hidden;
@@ -1853,10 +1727,140 @@
1853
1727
 
1854
1728
  .video-cover:hover .play-btn {
1855
1729
  opacity: 1;
1730
+ }.button {
1731
+ position: absolute;
1732
+ cursor: pointer;
1733
+ user-select: none;
1734
+ }
1735
+
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
+ }
1745
+
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 {
1759
+ position: absolute;
1760
+ }
1761
+
1762
+ .input-wrapper {
1763
+ display: flex;
1764
+ 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;
1771
+ }
1772
+
1773
+ .required-marker {
1774
+ font-size: 12px;
1775
+ padding: 0 5px 0 0;
1776
+ color: red;
1777
+ vertical-align: middle;
1778
+ }
1779
+
1780
+ input {
1781
+ flex: 1;
1782
+ border: none;
1783
+ outline: none;
1784
+ background: transparent;
1785
+ height: 100%;
1786
+ padding: 0;
1787
+ margin: 0;
1788
+ }
1789
+ /*
1790
+ input::placeholder {
1791
+ color: #ccc;
1792
+ opacity: 1;
1793
+ } */
1794
+
1795
+ .dynamic-placeholder-input::placeholder {
1796
+ color: var(--placeholder-color, #999);
1797
+ opacity: 1;
1798
+ }
1799
+ .dynamic-placeholder-input::-webkit-input-placeholder {
1800
+ color: var(--placeholder-color, #999);
1801
+ }
1802
+ .dynamic-placeholder-input::-moz-placeholder {
1803
+ color: var(--placeholder-color, #999);
1804
+ opacity: 1;
1805
+ }
1806
+ .dynamic-placeholder-input:-ms-input-placeholder {
1807
+ color: var(--placeholder-color, #999);
1808
+ }.ele-effect {
1809
+ will-change: transform;
1810
+ }
1811
+
1812
+ .ele-effect .effect-wrap {
1813
+ position: relative;
1814
+ width: 100%;
1815
+ height: 100%;
1816
+ }
1817
+
1818
+ .particle {
1819
+ position: absolute;
1820
+ background-repeat: no-repeat;
1821
+ background-size: contain;
1822
+ animation-name: falling;
1823
+ animation-timing-function: linear;
1824
+ animation-iteration-count: infinite;
1825
+ will-change: transform;
1826
+ }
1827
+
1828
+ @keyframes falling {
1829
+ 0% {
1830
+ transform: translateY(0) rotate(0deg);
1831
+ opacity: 1;
1832
+ }
1833
+ 80% {
1834
+ opacity: 0.8;
1835
+ }
1836
+ 100% {
1837
+ transform: translateY(100vh) rotate(360deg);
1838
+ opacity: 0;
1856
1839
  }
1840
+ }
1857
1841
  .ele-lottie .ele-lotwrap {
1842
+ overflow: hidden
1843
+ }
1844
+
1845
+ .ele-effect .effect-wrap {
1846
+ position: relative;
1858
1847
  overflow: hidden;
1859
- }body, html {
1848
+ width: 100%;
1849
+ height: 100%
1850
+ }
1851
+
1852
+ .ele-effect .e-small {
1853
+ position: absolute;
1854
+ width: 24px;
1855
+ height: 24px;
1856
+ background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
1857
+ background-size: cover;
1858
+ background-repeat: no-repeat;
1859
+ -webkit-transform-origin: center;
1860
+ transform-origin: center;
1861
+ -webkit-animation: snow 5s linear infinite;
1862
+ animation: snow 5s linear infinite
1863
+ }body, html {
1860
1864
  width: 100%;
1861
1865
  height: 100%;
1862
1866
  }
@@ -2191,1599 +2195,1225 @@
2191
2195
  transform: translateX(-100%);
2192
2196
  }
2193
2197
 
2194
- .cover-enter-active, .cover-leave-active {
2195
- -webkit-animation: coverInDown .5s ease both;
2196
- animation: coverInDown .5s ease both
2197
- }
2198
- .cover-enter-from {
2199
- transform: translateX(100%);
2200
- }
2201
- .cover-leave-to {
2202
- transform: translateX(-100%);
2203
- }
2204
-
2205
- .inertia-enter-active, .inertia-leave-active {
2206
- -webkit-animation: inertiaOut .6s ease both;
2207
- animation: inertiaOut .6s ease both
2208
- }
2209
- @-webkit-keyframes inertiaOut {
2210
- to {
2211
- -webkit-transform: scale(.2);
2212
- transform: scale(.2)
2213
- }
2214
- }
2215
-
2216
- @keyframes inertiaOut {
2217
- to {
2218
- -webkit-transform: scale(.2);
2219
- transform: scale(.2)
2220
- }
2221
- }
2222
- .inertia-enter-from {
2223
- transform: translateX(100%);
2224
- }
2225
- .inertia-leave-to {
2226
- transform: translateX(-100%);
2227
- }
2228
-
2229
- .push-enter-active, .push-leave-active {
2230
- -webkit-transform-origin: center top;
2231
- transform-origin: center top;
2232
- -webkit-animation: pushInTop .6s linear .2s both;
2233
- animation: pushInTop .6s linear .2s both
2234
- }
2235
- @-webkit-keyframes pushInTop {
2236
- 0% {
2237
- -webkit-transform: perspective(700px) rotateX(-90deg);
2238
- transform: perspective(700px) rotateX(-90deg)
2239
- }
2240
- }
2241
-
2242
- @keyframes pushInTop {
2243
- 0% {
2244
- -webkit-transform: perspective(700px) rotateX(-90deg);
2245
- transform: perspective(700px) rotateX(-90deg)
2246
- }
2247
- }
2248
- .push-enter-from {
2249
- transform: translateX(100%);
2250
- }
2251
- .push-leave-to {
2252
- transform: translateX(-100%);
2253
- }
2254
-
2255
- .drop-enter-active, .drop-leave-active {
2256
- -webkit-transform-origin: 0 0;
2257
- transform-origin: 0 0;
2258
- -webkit-animation: dropOut .6s linear both;
2259
- animation: dropOut .6s linear both
2260
- }
2261
- @-webkit-keyframes dropOut {
2262
- 20% {
2263
- -webkit-transform: rotate(5deg);
2264
- transform: rotate(5deg)
2265
- }
2266
-
2267
- to {
2268
- opacity: .6;
2269
- -webkit-transform: translate3d(0,100%,0);
2270
- transform: translate3d(0,100%,0)
2271
- }
2272
- }
2273
-
2274
- @keyframes dropOut {
2275
- 20% {
2276
- -webkit-transform: rotate(5deg);
2277
- transform: rotate(5deg)
2278
- }
2279
-
2280
- to {
2281
- opacity: .6;
2282
- -webkit-transform: translate3d(0,100%,0);
2283
- transform: translate3d(0,100%,0)
2284
- }
2285
- }
2286
-
2287
- .drop-enter-from {
2288
- transform: translateX(100%);
2289
- }
2290
- .drop-leave-to {
2291
- transform: translateX(-100%);
2292
- }
2293
-
2294
- .fadeIn-enter-active, .fadeIn-leave-active {
2295
- -webkit-animation: pfadeIn .6s linear both;
2296
- animation: pfadeIn .6s linear both
2297
- }
2298
- @-webkit-keyframes pfadeIn {
2299
- 0% {
2300
- opacity: 0
2301
- }
2302
-
2303
- to {
2304
- opacity: 1
2305
- }
2306
- }
2307
-
2308
- @keyframes pfadeIn {
2309
- 0% {
2310
- opacity: 0
2311
- }
2312
-
2313
- to {
2314
- opacity: 1
2315
- }
2316
- }
2317
- .fadeIn-enter-from {
2318
- transform: translateX(100%);
2319
- }
2320
- .fadeIn-leave-to {
2321
- transform: translateX(-100%);
2322
- }
2323
-
2324
- .zoomIn-enter-active, .zoomIn-leave-active {
2325
- -webkit-animation: pzoomIn .6s linear both;
2326
- animation: pzoomIn .6s linear both
2327
- }
2328
- @-webkit-keyframes pzoomIn {
2329
- 0% {
2330
- -webkit-transform: scale3d(0,0,0);
2331
- transform: scale3d(0,0,0)
2332
- }
2333
- }
2334
-
2335
- @keyframes pzoomIn {
2336
- 0% {
2337
- -webkit-transform: scale3d(0,0,0);
2338
- transform: scale3d(0,0,0)
2339
- }
2340
- }
2341
- .slide-enter-from {
2342
- transform: translateX(100%);
2343
- }
2344
- .slide-leave-to {
2345
- transform: translateX(-100%);
2346
- }
2347
-
2348
- .btFadeIn-enter-active, .btFadeIn-leave-active {
2349
- -webkit-animation: btFadeInTop .6s ease both;
2350
- animation: btFadeInTop .6s ease both
2351
- }
2352
- @keyframes btFadeInTop {
2353
- 0% {
2354
- opacity: 0;
2355
- -webkit-transform: translate3d(0,100%,0);
2356
- transform: translate3d(0,100%,0)
2357
- }
2358
- }
2359
-
2360
- .btFadeIn-enter-from {
2361
- transform: translateX(100%);
2362
- }
2363
- .btFadeIn-leave-to {
2364
- transform: translateX(-100%);
2365
- }
2366
-
2367
- .hideSoon-enter-active, .hideSoon-leave-active {
2368
- visibility: hidden
2369
- }
2370
- .hideSoon-enter-from {
2371
- transform: translateX(100%);
2372
- }
2373
- .hideSoon-leave-to {
2374
- transform: translateX(-100%);
2375
- }
2376
-
2377
- .upSlide-enter-active, .upSlide-leave-active {
2378
- transition: transform 0.3s, opacity 0.3s;
2379
- }
2380
- .upSlide-enter-from, .upSlide-leave-to {
2381
- transform: translateY(-100%);
2382
- opacity: 0;
2383
- }
2384
- .upSlide-enter-to, .upSlide-leave-from {
2385
- transform: translateY(0);
2386
- opacity: 1;
2387
- }
2388
-
2389
- .downSlide-enter-active, .downSlide-leave-active {
2390
- transition: transform 0.3s, opacity 0.3s;
2391
- }
2392
- .downSlide-enter-from, .downSlide-leave-to {
2393
- transform: translateY(100%);
2394
- opacity: 0;
2395
- }
2396
- .downSlide-enter-to, .downSlide-leave-from {
2397
- transform: translateY(0);
2398
- opacity: 1;
2399
- }
2400
-
2401
- .leftSlide-enter-active, .leftSlide-leave-active {
2402
- -webkit-animation: leftSlide .7s ease both;
2403
- animation: leftSlide .7s ease both
2404
- }
2405
- @-webkit-keyframes leftSlide {
2406
- 0% {
2407
- -webkit-transform: translateX(-100%);
2408
- transform: translateX(-100%)
2409
- }
2410
-
2411
- to {
2412
- -webkit-transform: translateX(0);
2413
- transform: translateX(0)
2414
- }
2415
- }
2416
-
2417
- @keyframes leftSlide {
2418
- 0% {
2419
- -webkit-transform: translateX(-100%);
2420
- transform: translateX(-100%)
2421
- }
2422
-
2423
- to {
2424
- -webkit-transform: translateX(0);
2425
- transform: translateX(0)
2426
- }
2198
+ .cover-enter-active, .cover-leave-active {
2199
+ -webkit-animation: coverInDown .5s ease both;
2200
+ animation: coverInDown .5s ease both
2427
2201
  }
2428
- .leftSlide-enter-from {
2202
+ .cover-enter-from {
2429
2203
  transform: translateX(100%);
2430
2204
  }
2431
- .leftSlide-leave-to {
2205
+ .cover-leave-to {
2432
2206
  transform: translateX(-100%);
2433
2207
  }
2434
2208
 
2435
- .rightSlide-enter-active, .rightSlide-leave-active {
2436
- -webkit-animation: rightSlide .7s ease both;
2437
- animation: rightSlide .7s ease both
2209
+ .inertia-enter-active, .inertia-leave-active {
2210
+ -webkit-animation: inertiaOut .6s ease both;
2211
+ animation: inertiaOut .6s ease both
2438
2212
  }
2439
- @-webkit-keyframes rightSlide {
2440
- 0% {
2441
- -webkit-transform: translateX(100%);
2442
- transform: translateX(100%)
2443
- }
2444
-
2213
+ @-webkit-keyframes inertiaOut {
2445
2214
  to {
2446
- -webkit-transform: translateX(0);
2447
- transform: translateX(0)
2215
+ -webkit-transform: scale(.2);
2216
+ transform: scale(.2)
2448
2217
  }
2449
2218
  }
2450
2219
 
2451
- @keyframes rightSlide {
2452
- 0% {
2453
- -webkit-transform: translateX(100%);
2454
- transform: translateX(100%)
2455
- }
2456
-
2220
+ @keyframes inertiaOut {
2457
2221
  to {
2458
- -webkit-transform: translateX(0);
2459
- transform: translateX(0)
2222
+ -webkit-transform: scale(.2);
2223
+ transform: scale(.2)
2460
2224
  }
2461
2225
  }
2462
-
2463
- .rightSlide-enter-from {
2226
+ .inertia-enter-from {
2464
2227
  transform: translateX(100%);
2465
2228
  }
2466
- .rightSlide-leave-to {
2229
+ .inertia-leave-to {
2467
2230
  transform: translateX(-100%);
2468
2231
  }
2469
- * {
2470
- -webkit-box-sizing: border-box;
2471
- box-sizing: border-box;
2472
- white-space: normal;
2473
- word-break: break-all
2474
- }
2475
-
2476
-
2477
-
2478
- @-webkit-keyframes slideToBottom {
2479
- to {
2480
- -webkit-transform: translateY(100%);
2481
- transform: translateY(100%)
2482
- }
2483
- }
2484
2232
 
2485
- @keyframes slideToBottom {
2486
- to {
2487
- -webkit-transform: translateY(100%);
2488
- transform: translateY(100%)
2489
- }
2233
+ .push-enter-active, .push-leave-active {
2234
+ -webkit-transform-origin: center top;
2235
+ transform-origin: center top;
2236
+ -webkit-animation: pushInTop .6s linear .2s both;
2237
+ animation: pushInTop .6s linear .2s both
2490
2238
  }
2491
-
2492
- @-webkit-keyframes slideFromTop {
2239
+ @-webkit-keyframes pushInTop {
2493
2240
  0% {
2494
- -webkit-transform: translateY(-100%);
2495
- transform: translateY(-100%)
2241
+ -webkit-transform: perspective(700px) rotateX(-90deg);
2242
+ transform: perspective(700px) rotateX(-90deg)
2496
2243
  }
2497
2244
  }
2498
2245
 
2499
- @keyframes slideFromTop {
2246
+ @keyframes pushInTop {
2500
2247
  0% {
2501
- -webkit-transform: translateY(-100%);
2502
- transform: translateY(-100%)
2248
+ -webkit-transform: perspective(700px) rotateX(-90deg);
2249
+ transform: perspective(700px) rotateX(-90deg)
2503
2250
  }
2504
2251
  }
2505
-
2506
- @-webkit-keyframes slideFromBottom {
2507
- 0% {
2508
- -webkit-transform: translateY(100%);
2509
- transform: translateY(100%)
2510
- }
2252
+ .push-enter-from {
2253
+ transform: translateX(100%);
2511
2254
  }
2512
-
2513
- @keyframes slideFromBottom {
2514
- 0% {
2515
- -webkit-transform: translateY(100%);
2516
- transform: translateY(100%)
2517
- }
2255
+ .push-leave-to {
2256
+ transform: translateX(-100%);
2518
2257
  }
2519
2258
 
2520
- @-webkit-keyframes rotateCubeTopOut {
2521
- 50% {
2522
- -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2523
- transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2524
- -webkit-animation-timing-function: ease-out;
2525
- animation-timing-function: ease-out
2526
- }
2527
-
2528
- to {
2529
- opacity: .3;
2530
- -webkit-transform: translateY(-100%) rotateX(90deg);
2531
- transform: translateY(-100%) rotateX(90deg)
2532
- }
2259
+ .drop-enter-active, .drop-leave-active {
2260
+ -webkit-transform-origin: 0 0;
2261
+ transform-origin: 0 0;
2262
+ -webkit-animation: dropOut .6s linear both;
2263
+ animation: dropOut .6s linear both
2533
2264
  }
2534
-
2535
- @keyframes rotateCubeTopOut {
2536
- 50% {
2537
- -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2538
- transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2539
- -webkit-animation-timing-function: ease-out;
2540
- animation-timing-function: ease-out
2265
+ @-webkit-keyframes dropOut {
2266
+ 20% {
2267
+ -webkit-transform: rotate(5deg);
2268
+ transform: rotate(5deg)
2541
2269
  }
2542
2270
 
2543
2271
  to {
2544
- opacity: .3;
2545
- -webkit-transform: translateY(-100%) rotateX(90deg);
2546
- transform: translateY(-100%) rotateX(90deg)
2272
+ opacity: .6;
2273
+ -webkit-transform: translate3d(0,100%,0);
2274
+ transform: translate3d(0,100%,0)
2547
2275
  }
2548
2276
  }
2549
2277
 
2550
- @-webkit-keyframes rotateCubeTopIn {
2551
- 0% {
2552
- opacity: .3;
2553
- -webkit-transform: translateY(100%) rotateX(-90deg);
2554
- transform: translateY(100%) rotateX(-90deg)
2278
+ @keyframes dropOut {
2279
+ 20% {
2280
+ -webkit-transform: rotate(5deg);
2281
+ transform: rotate(5deg)
2555
2282
  }
2556
2283
 
2557
- 50% {
2558
- -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2559
- transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2560
- -webkit-animation-timing-function: ease-out;
2561
- animation-timing-function: ease-out
2284
+ to {
2285
+ opacity: .6;
2286
+ -webkit-transform: translate3d(0,100%,0);
2287
+ transform: translate3d(0,100%,0)
2562
2288
  }
2563
2289
  }
2564
2290
 
2565
- @keyframes rotateCubeTopIn {
2566
- 0% {
2567
- opacity: .3;
2568
- -webkit-transform: translateY(100%) rotateX(-90deg);
2569
- transform: translateY(100%) rotateX(-90deg)
2570
- }
2571
-
2572
- 50% {
2573
- -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2574
- transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2575
- -webkit-animation-timing-function: ease-out;
2576
- animation-timing-function: ease-out
2577
- }
2291
+ .drop-enter-from {
2292
+ transform: translateX(100%);
2578
2293
  }
2579
-
2580
- @-webkit-keyframes rotateCubeBottomOut {
2581
- 50% {
2582
- -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2583
- transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2584
- -webkit-animation-timing-function: ease-out;
2585
- animation-timing-function: ease-out
2586
- }
2587
-
2588
- to {
2589
- opacity: .3;
2590
- -webkit-transform: translateY(100%) rotateX(-90deg);
2591
- transform: translateY(100%) rotateX(-90deg)
2592
- }
2294
+ .drop-leave-to {
2295
+ transform: translateX(-100%);
2593
2296
  }
2594
2297
 
2595
- @keyframes rotateCubeBottomOut {
2596
- 50% {
2597
- -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2598
- transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2599
- -webkit-animation-timing-function: ease-out;
2600
- animation-timing-function: ease-out
2601
- }
2602
-
2603
- to {
2604
- opacity: .3;
2605
- -webkit-transform: translateY(100%) rotateX(-90deg);
2606
- transform: translateY(100%) rotateX(-90deg)
2607
- }
2298
+ .fadeIn-enter-active, .fadeIn-leave-active {
2299
+ -webkit-animation: pfadeIn .6s linear both;
2300
+ animation: pfadeIn .6s linear both
2608
2301
  }
2609
-
2610
- @-webkit-keyframes rotateCubeBottomIn {
2302
+ @-webkit-keyframes pfadeIn {
2611
2303
  0% {
2612
- opacity: .3;
2613
- -webkit-transform: translateY(-100%) rotateX(90deg);
2614
- transform: translateY(-100%) rotateX(90deg)
2304
+ opacity: 0
2615
2305
  }
2616
2306
 
2617
- 50% {
2618
- -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2619
- transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2620
- -webkit-animation-timing-function: ease-out;
2621
- animation-timing-function: ease-out
2307
+ to {
2308
+ opacity: 1
2622
2309
  }
2623
2310
  }
2624
2311
 
2625
- @keyframes rotateCubeBottomIn {
2312
+ @keyframes pfadeIn {
2626
2313
  0% {
2627
- opacity: .3;
2628
- -webkit-transform: translateY(-100%) rotateX(90deg);
2629
- transform: translateY(-100%) rotateX(90deg)
2630
- }
2631
-
2632
- 50% {
2633
- -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2634
- transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2635
- -webkit-animation-timing-function: ease-out;
2636
- animation-timing-function: ease-out
2314
+ opacity: 0
2637
2315
  }
2638
- }
2639
2316
 
2640
- @-webkit-keyframes windOut {
2641
2317
  to {
2642
- opacity: 0;
2643
- -webkit-transform: translateZ(-3000px) rotate(1turn);
2644
- transform: translateZ(-3000px) rotate(1turn)
2318
+ opacity: 1
2645
2319
  }
2646
2320
  }
2647
-
2648
- @keyframes windOut {
2649
- to {
2650
- opacity: 0;
2651
- -webkit-transform: translateZ(-3000px) rotate(1turn);
2652
- transform: translateZ(-3000px) rotate(1turn)
2653
- }
2321
+ .fadeIn-enter-from {
2322
+ transform: translateX(100%);
2654
2323
  }
2655
-
2656
- @-webkit-keyframes windIn {
2657
- 0% {
2658
- opacity: 0;
2659
- -webkit-transform: translateZ(-3000px) rotate(-1turn);
2660
- transform: translateZ(-3000px) rotate(-1turn)
2661
- }
2324
+ .fadeIn-leave-to {
2325
+ transform: translateX(-100%);
2662
2326
  }
2663
2327
 
2664
- @keyframes windIn {
2328
+ .zoomIn-enter-active, .zoomIn-leave-active {
2329
+ -webkit-animation: pzoomIn .6s linear both;
2330
+ animation: pzoomIn .6s linear both
2331
+ }
2332
+ @-webkit-keyframes pzoomIn {
2665
2333
  0% {
2666
- opacity: 0;
2667
- -webkit-transform: translateZ(-3000px) rotate(-1turn);
2668
- transform: translateZ(-3000px) rotate(-1turn)
2334
+ -webkit-transform: scale3d(0,0,0);
2335
+ transform: scale3d(0,0,0)
2669
2336
  }
2670
2337
  }
2671
2338
 
2672
- @-webkit-keyframes rotateCarouselTopOut {
2673
- to {
2674
- opacity: .3;
2675
- -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2676
- transform: translateY(-150%) scale(.4) rotateX(65deg)
2339
+ @keyframes pzoomIn {
2340
+ 0% {
2341
+ -webkit-transform: scale3d(0,0,0);
2342
+ transform: scale3d(0,0,0)
2677
2343
  }
2678
2344
  }
2679
-
2680
- @keyframes rotateCarouselTopOut {
2681
- to {
2682
- opacity: .3;
2683
- -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2684
- transform: translateY(-150%) scale(.4) rotateX(65deg)
2685
- }
2345
+ .slide-enter-from {
2346
+ transform: translateX(100%);
2347
+ }
2348
+ .slide-leave-to {
2349
+ transform: translateX(-100%);
2686
2350
  }
2687
2351
 
2688
- @-webkit-keyframes rotateCarouselTopIn {
2352
+ .btFadeIn-enter-active, .btFadeIn-leave-active {
2353
+ -webkit-animation: btFadeInTop .6s ease both;
2354
+ animation: btFadeInTop .6s ease both
2355
+ }
2356
+ @keyframes btFadeInTop {
2689
2357
  0% {
2690
- opacity: .3;
2691
- -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2692
- transform: translateY(150%) scale(.4) rotateX(-65deg)
2358
+ opacity: 0;
2359
+ -webkit-transform: translate3d(0,100%,0);
2360
+ transform: translate3d(0,100%,0)
2693
2361
  }
2694
2362
  }
2695
2363
 
2696
- @keyframes rotateCarouselTopIn {
2697
- 0% {
2698
- opacity: .3;
2699
- -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2700
- transform: translateY(150%) scale(.4) rotateX(-65deg)
2701
- }
2364
+ .btFadeIn-enter-from {
2365
+ transform: translateX(100%);
2366
+ }
2367
+ .btFadeIn-leave-to {
2368
+ transform: translateX(-100%);
2702
2369
  }
2703
2370
 
2704
- @-webkit-keyframes rotateCarouselBottomOut {
2705
- to {
2706
- opacity: .3;
2707
- -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2708
- transform: translateY(150%) scale(.4) rotateX(-65deg)
2709
- }
2371
+ .hideSoon-enter-active, .hideSoon-leave-active {
2372
+ visibility: hidden
2373
+ }
2374
+ .hideSoon-enter-from {
2375
+ transform: translateX(100%);
2376
+ }
2377
+ .hideSoon-leave-to {
2378
+ transform: translateX(-100%);
2710
2379
  }
2711
2380
 
2712
- @keyframes rotateCarouselBottomOut {
2713
- to {
2714
- opacity: .3;
2715
- -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2716
- transform: translateY(150%) scale(.4) rotateX(-65deg)
2717
- }
2381
+ .upSlide-enter-active, .upSlide-leave-active {
2382
+ transition: transform 0.3s, opacity 0.3s;
2383
+ }
2384
+ .upSlide-enter-from, .upSlide-leave-to {
2385
+ transform: translateY(-100%);
2386
+ opacity: 0;
2387
+ }
2388
+ .upSlide-enter-to, .upSlide-leave-from {
2389
+ transform: translateY(0);
2390
+ opacity: 1;
2718
2391
  }
2719
2392
 
2720
- @-webkit-keyframes rotateCarouselBottomIn {
2721
- 0% {
2722
- opacity: .3;
2723
- -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2724
- transform: translateY(-150%) scale(.4) rotateX(65deg)
2725
- }
2393
+ .downSlide-enter-active, .downSlide-leave-active {
2394
+ transition: transform 0.3s, opacity 0.3s;
2395
+ }
2396
+ .downSlide-enter-from, .downSlide-leave-to {
2397
+ transform: translateY(100%);
2398
+ opacity: 0;
2399
+ }
2400
+ .downSlide-enter-to, .downSlide-leave-from {
2401
+ transform: translateY(0);
2402
+ opacity: 1;
2726
2403
  }
2727
2404
 
2728
- @keyframes rotateCarouselBottomIn {
2405
+ .leftSlide-enter-active, .leftSlide-leave-active {
2406
+ -webkit-animation: leftSlide .7s ease both;
2407
+ animation: leftSlide .7s ease both
2408
+ }
2409
+ @-webkit-keyframes leftSlide {
2729
2410
  0% {
2730
- opacity: .3;
2731
- -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2732
- transform: translateY(-150%) scale(.4) rotateX(65deg)
2411
+ -webkit-transform: translateX(-100%);
2412
+ transform: translateX(-100%)
2733
2413
  }
2734
- }
2735
2414
 
2736
- @-webkit-keyframes scaleDown {
2737
2415
  to {
2738
- opacity: 0;
2739
- -webkit-transform: scale(.8);
2740
- transform: scale(.8)
2416
+ -webkit-transform: translateX(0);
2417
+ transform: translateX(0)
2741
2418
  }
2742
2419
  }
2743
2420
 
2744
- @keyframes scaleDown {
2745
- to {
2746
- opacity: 0;
2747
- -webkit-transform: scale(.8);
2748
- transform: scale(.8)
2421
+ @keyframes leftSlide {
2422
+ 0% {
2423
+ -webkit-transform: translateX(-100%);
2424
+ transform: translateX(-100%)
2749
2425
  }
2750
- }
2751
2426
 
2752
- @-webkit-keyframes scaleUp {
2753
- 0% {
2754
- opacity: 0;
2755
- -webkit-transform: scale(.8);
2756
- transform: scale(.8)
2427
+ to {
2428
+ -webkit-transform: translateX(0);
2429
+ transform: translateX(0)
2757
2430
  }
2758
2431
  }
2432
+ .leftSlide-enter-from {
2433
+ transform: translateX(100%);
2434
+ }
2435
+ .leftSlide-leave-to {
2436
+ transform: translateX(-100%);
2437
+ }
2759
2438
 
2760
- @keyframes scaleUp {
2439
+ .rightSlide-enter-active, .rightSlide-leave-active {
2440
+ -webkit-animation: rightSlide .7s ease both;
2441
+ animation: rightSlide .7s ease both
2442
+ }
2443
+ @-webkit-keyframes rightSlide {
2761
2444
  0% {
2762
- opacity: 0;
2763
- -webkit-transform: scale(.8);
2764
- transform: scale(.8)
2445
+ -webkit-transform: translateX(100%);
2446
+ transform: translateX(100%)
2765
2447
  }
2766
- }
2767
2448
 
2768
- @-webkit-keyframes scaleUpDown {
2769
- 0% {
2770
- opacity: 0;
2771
- -webkit-transform: scale(1.2);
2772
- transform: scale(1.2)
2449
+ to {
2450
+ -webkit-transform: translateX(0);
2451
+ transform: translateX(0)
2773
2452
  }
2774
2453
  }
2775
2454
 
2776
- @keyframes scaleUpDown {
2455
+ @keyframes rightSlide {
2777
2456
  0% {
2778
- opacity: 0;
2779
- -webkit-transform: scale(1.2);
2780
- transform: scale(1.2)
2457
+ -webkit-transform: translateX(100%);
2458
+ transform: translateX(100%)
2781
2459
  }
2782
- }
2783
2460
 
2784
- @-webkit-keyframes scaleDownUp {
2785
2461
  to {
2786
- opacity: 0;
2787
- -webkit-transform: scale(1.2);
2788
- transform: scale(1.2)
2462
+ -webkit-transform: translateX(0);
2463
+ transform: translateX(0)
2789
2464
  }
2790
2465
  }
2791
2466
 
2792
- @keyframes scaleDownUp {
2793
- to {
2794
- opacity: 0;
2795
- -webkit-transform: scale(1.2);
2796
- transform: scale(1.2)
2797
- }
2467
+ .rightSlide-enter-from {
2468
+ transform: translateX(100%);
2469
+ }
2470
+ .rightSlide-leave-to {
2471
+ transform: translateX(-100%);
2472
+ }
2473
+ * {
2474
+ -webkit-box-sizing: border-box;
2475
+ box-sizing: border-box;
2476
+ white-space: normal;
2477
+ word-break: break-all
2798
2478
  }
2799
2479
 
2800
- @-webkit-keyframes scaleDownCenter {
2480
+
2481
+
2482
+ @-webkit-keyframes slideToBottom {
2801
2483
  to {
2802
- opacity: 0;
2803
- -webkit-transform: scale(.7);
2804
- transform: scale(.7)
2484
+ -webkit-transform: translateY(100%);
2485
+ transform: translateY(100%)
2805
2486
  }
2806
2487
  }
2807
2488
 
2808
- @keyframes scaleDownCenter {
2489
+ @keyframes slideToBottom {
2809
2490
  to {
2810
- opacity: 0;
2811
- -webkit-transform: scale(.7);
2812
- transform: scale(.7)
2491
+ -webkit-transform: translateY(100%);
2492
+ transform: translateY(100%)
2813
2493
  }
2814
2494
  }
2815
2495
 
2816
- @-webkit-keyframes scaleUpCenter {
2496
+ @-webkit-keyframes slideFromTop {
2817
2497
  0% {
2818
- opacity: 0;
2819
- -webkit-transform: scale(.7);
2820
- transform: scale(.7)
2498
+ -webkit-transform: translateY(-100%);
2499
+ transform: translateY(-100%)
2821
2500
  }
2822
2501
  }
2823
2502
 
2824
- @keyframes scaleUpCenter {
2503
+ @keyframes slideFromTop {
2825
2504
  0% {
2826
- opacity: 0;
2827
- -webkit-transform: scale(.7);
2828
- transform: scale(.7)
2829
- }
2830
- }
2831
-
2832
- @-webkit-keyframes rotatePushTop {
2833
- to {
2834
- opacity: 0;
2835
- -webkit-transform: rotateX(-90deg);
2836
- transform: rotateX(-90deg)
2505
+ -webkit-transform: translateY(-100%);
2506
+ transform: translateY(-100%)
2837
2507
  }
2838
2508
  }
2839
2509
 
2840
- @keyframes rotatePushTop {
2841
- to {
2842
- opacity: 0;
2843
- -webkit-transform: rotateX(-90deg);
2844
- transform: rotateX(-90deg)
2510
+ @-webkit-keyframes slideFromBottom {
2511
+ 0% {
2512
+ -webkit-transform: translateY(100%);
2513
+ transform: translateY(100%)
2845
2514
  }
2846
2515
  }
2847
2516
 
2848
- @-webkit-keyframes rotatePushBottom {
2849
- to {
2850
- opacity: 0;
2851
- -webkit-transform: rotateX(90deg);
2852
- transform: rotateX(90deg)
2517
+ @keyframes slideFromBottom {
2518
+ 0% {
2519
+ -webkit-transform: translateY(100%);
2520
+ transform: translateY(100%)
2853
2521
  }
2854
2522
  }
2855
2523
 
2856
- @keyframes rotatePushBottom {
2857
- to {
2858
- opacity: 0;
2859
- -webkit-transform: rotateX(90deg);
2860
- transform: rotateX(90deg)
2524
+ @-webkit-keyframes rotateCubeTopOut {
2525
+ 50% {
2526
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2527
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2528
+ -webkit-animation-timing-function: ease-out;
2529
+ animation-timing-function: ease-out
2861
2530
  }
2862
- }
2863
2531
 
2864
- @-webkit-keyframes rotatePullTop {
2865
- 0% {
2866
- opacity: 0;
2867
- -webkit-transform: rotateX(-90deg);
2868
- transform: rotateX(-90deg)
2532
+ to {
2533
+ opacity: .3;
2534
+ -webkit-transform: translateY(-100%) rotateX(90deg);
2535
+ transform: translateY(-100%) rotateX(90deg)
2869
2536
  }
2870
2537
  }
2871
2538
 
2872
- @keyframes rotatePullTop {
2873
- 0% {
2874
- opacity: 0;
2875
- -webkit-transform: rotateX(-90deg);
2876
- transform: rotateX(-90deg)
2539
+ @keyframes rotateCubeTopOut {
2540
+ 50% {
2541
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2542
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2543
+ -webkit-animation-timing-function: ease-out;
2544
+ animation-timing-function: ease-out
2877
2545
  }
2878
- }
2879
2546
 
2880
- @-webkit-keyframes rotatePullBottom {
2881
- 0% {
2882
- opacity: 0;
2883
- -webkit-transform: rotateX(90deg);
2884
- transform: rotateX(90deg)
2547
+ to {
2548
+ opacity: .3;
2549
+ -webkit-transform: translateY(-100%) rotateX(90deg);
2550
+ transform: translateY(-100%) rotateX(90deg)
2885
2551
  }
2886
2552
  }
2887
2553
 
2888
- @keyframes rotatePullBottom {
2554
+ @-webkit-keyframes rotateCubeTopIn {
2889
2555
  0% {
2890
- opacity: 0;
2891
- -webkit-transform: rotateX(90deg);
2892
- transform: rotateX(90deg)
2556
+ opacity: .3;
2557
+ -webkit-transform: translateY(100%) rotateX(-90deg);
2558
+ transform: translateY(100%) rotateX(-90deg)
2893
2559
  }
2894
- }
2895
2560
 
2896
- @-webkit-keyframes coverInUp {
2897
- 0% {
2898
- -webkit-transform: translate3d(0,-100%,0);
2899
- transform: translate3d(0,-100%,0)
2561
+ 50% {
2562
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2563
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2564
+ -webkit-animation-timing-function: ease-out;
2565
+ animation-timing-function: ease-out
2900
2566
  }
2901
2567
  }
2902
2568
 
2903
- @keyframes coverInUp {
2569
+ @keyframes rotateCubeTopIn {
2904
2570
  0% {
2905
- -webkit-transform: translate3d(0,-100%,0);
2906
- transform: translate3d(0,-100%,0)
2571
+ opacity: .3;
2572
+ -webkit-transform: translateY(100%) rotateX(-90deg);
2573
+ transform: translateY(100%) rotateX(-90deg)
2907
2574
  }
2908
- }
2909
2575
 
2910
- @-webkit-keyframes coverInDown {
2911
- 0% {
2912
- -webkit-transform: translate3d(0,100%,0);
2913
- transform: translate3d(0,100%,0)
2576
+ 50% {
2577
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2578
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2579
+ -webkit-animation-timing-function: ease-out;
2580
+ animation-timing-function: ease-out
2914
2581
  }
2915
2582
  }
2916
2583
 
2917
- @keyframes coverInDown {
2918
- 0% {
2919
- -webkit-transform: translate3d(0,100%,0);
2920
- transform: translate3d(0,100%,0)
2584
+ @-webkit-keyframes rotateCubeBottomOut {
2585
+ 50% {
2586
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2587
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2588
+ -webkit-animation-timing-function: ease-out;
2589
+ animation-timing-function: ease-out
2921
2590
  }
2922
- }
2923
2591
 
2924
- .rotateInReverse {
2925
- -webkit-animation-name: rotateInReverse;
2926
- animation-name: rotateInReverse
2592
+ to {
2593
+ opacity: .3;
2594
+ -webkit-transform: translateY(100%) rotateX(-90deg);
2595
+ transform: translateY(100%) rotateX(-90deg)
2596
+ }
2927
2597
  }
2928
2598
 
2929
- @-webkit-keyframes rotateInReverse {
2930
- 0% {
2931
- opacity: 0;
2932
- -webkit-transform: rotate(200deg);
2933
- transform: rotate(200deg);
2934
- -webkit-transform-origin: center;
2935
- transform-origin: center
2599
+ @keyframes rotateCubeBottomOut {
2600
+ 50% {
2601
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2602
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2603
+ -webkit-animation-timing-function: ease-out;
2604
+ animation-timing-function: ease-out
2936
2605
  }
2937
2606
 
2938
2607
  to {
2939
- opacity: 1;
2940
- -webkit-transform: none;
2941
- transform: none;
2942
- -webkit-transform-origin: center;
2943
- transform-origin: center
2608
+ opacity: .3;
2609
+ -webkit-transform: translateY(100%) rotateX(-90deg);
2610
+ transform: translateY(100%) rotateX(-90deg)
2944
2611
  }
2945
2612
  }
2946
2613
 
2947
- @keyframes rotateInReverse {
2614
+ @-webkit-keyframes rotateCubeBottomIn {
2948
2615
  0% {
2949
- opacity: 0;
2950
- -webkit-transform: rotate(200deg);
2951
- transform: rotate(200deg);
2952
- -webkit-transform-origin: center;
2953
- transform-origin: center
2616
+ opacity: .3;
2617
+ -webkit-transform: translateY(-100%) rotateX(90deg);
2618
+ transform: translateY(-100%) rotateX(90deg)
2954
2619
  }
2955
2620
 
2956
- to {
2957
- opacity: 1;
2958
- -webkit-transform: none;
2959
- transform: none;
2960
- -webkit-transform-origin: center;
2961
- transform-origin: center
2621
+ 50% {
2622
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2623
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2624
+ -webkit-animation-timing-function: ease-out;
2625
+ animation-timing-function: ease-out
2962
2626
  }
2963
2627
  }
2964
2628
 
2965
- .zoomInBig {
2966
- -webkit-animation-name: zoomInBig;
2967
- animation-name: zoomInBig;
2968
- -webkit-animation-timing-function: cubic-bezier(0,.44,.75,.99);
2969
- animation-timing-function: cubic-bezier(0,.44,.75,.99)
2970
- }
2971
-
2972
- @-webkit-keyframes zoomInBig {
2629
+ @keyframes rotateCubeBottomIn {
2973
2630
  0% {
2974
- opacity: 0;
2975
- -webkit-transform: scale3d(2,2,2);
2976
- transform: scale3d(2,2,2)
2631
+ opacity: .3;
2632
+ -webkit-transform: translateY(-100%) rotateX(90deg);
2633
+ transform: translateY(-100%) rotateX(90deg)
2977
2634
  }
2978
2635
 
2979
2636
  50% {
2980
- opacity: 1
2637
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2638
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2639
+ -webkit-animation-timing-function: ease-out;
2640
+ animation-timing-function: ease-out
2981
2641
  }
2642
+ }
2982
2643
 
2983
- 80% {
2984
- -webkit-transform: scaleX(1);
2985
- transform: scaleX(1)
2644
+ @-webkit-keyframes windOut {
2645
+ to {
2646
+ opacity: 0;
2647
+ -webkit-transform: translateZ(-3000px) rotate(1turn);
2648
+ transform: translateZ(-3000px) rotate(1turn)
2986
2649
  }
2987
2650
  }
2988
2651
 
2989
- @keyframes zoomInBig {
2990
- 0% {
2652
+ @keyframes windOut {
2653
+ to {
2991
2654
  opacity: 0;
2992
- -webkit-transform: scale3d(2,2,2);
2993
- transform: scale3d(2,2,2)
2655
+ -webkit-transform: translateZ(-3000px) rotate(1turn);
2656
+ transform: translateZ(-3000px) rotate(1turn)
2994
2657
  }
2658
+ }
2995
2659
 
2996
- 50% {
2997
- opacity: 1
2660
+ @-webkit-keyframes windIn {
2661
+ 0% {
2662
+ opacity: 0;
2663
+ -webkit-transform: translateZ(-3000px) rotate(-1turn);
2664
+ transform: translateZ(-3000px) rotate(-1turn)
2998
2665
  }
2666
+ }
2999
2667
 
3000
- 80% {
3001
- -webkit-transform: scaleX(1);
3002
- transform: scaleX(1)
2668
+ @keyframes windIn {
2669
+ 0% {
2670
+ opacity: 0;
2671
+ -webkit-transform: translateZ(-3000px) rotate(-1turn);
2672
+ transform: translateZ(-3000px) rotate(-1turn)
3003
2673
  }
3004
2674
  }
3005
2675
 
3006
- .flyIn {
3007
- -webkit-animation-name: flyIn;
3008
- animation-name: flyIn
2676
+ @-webkit-keyframes rotateCarouselTopOut {
2677
+ to {
2678
+ opacity: .3;
2679
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2680
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
2681
+ }
3009
2682
  }
3010
2683
 
3011
- @-webkit-keyframes flyIn {
3012
- 0%,20%,40%,60%,80%,to {
3013
- -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
3014
- transition-timing-function: cubic-bezier(.215,.61,.355,1)
2684
+ @keyframes rotateCarouselTopOut {
2685
+ to {
2686
+ opacity: .3;
2687
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2688
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
3015
2689
  }
2690
+ }
3016
2691
 
2692
+ @-webkit-keyframes rotateCarouselTopIn {
3017
2693
  0% {
3018
- opacity: 0;
3019
- -webkit-transform: scale3d(2,2,2);
3020
- transform: scale3d(2,2,2)
3021
- }
3022
-
3023
- 40% {
3024
- -webkit-transform: scale3d(.9,.9,.9);
3025
- transform: scale3d(.9,.9,.9)
2694
+ opacity: .3;
2695
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2696
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
3026
2697
  }
2698
+ }
3027
2699
 
3028
- 60% {
3029
- -webkit-transform: scale3d(1.03,1.03,1.03);
3030
- transform: scale3d(1.03,1.03,1.03)
2700
+ @keyframes rotateCarouselTopIn {
2701
+ 0% {
2702
+ opacity: .3;
2703
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2704
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
3031
2705
  }
2706
+ }
3032
2707
 
3033
- 80% {
3034
- opacity: 1;
3035
- -webkit-transform: scale3d(.97,.97,.97);
3036
- transform: scale3d(.97,.97,.97)
2708
+ @-webkit-keyframes rotateCarouselBottomOut {
2709
+ to {
2710
+ opacity: .3;
2711
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2712
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
3037
2713
  }
2714
+ }
3038
2715
 
2716
+ @keyframes rotateCarouselBottomOut {
3039
2717
  to {
3040
- -webkit-transform: scaleX(1);
3041
- transform: scaleX(1)
2718
+ opacity: .3;
2719
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2720
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
3042
2721
  }
3043
2722
  }
3044
2723
 
3045
- @keyframes flyIn {
3046
- 0%,20%,40%,60%,80%,to {
3047
- -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
3048
- transition-timing-function: cubic-bezier(.215,.61,.355,1)
2724
+ @-webkit-keyframes rotateCarouselBottomIn {
2725
+ 0% {
2726
+ opacity: .3;
2727
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2728
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
3049
2729
  }
2730
+ }
3050
2731
 
2732
+ @keyframes rotateCarouselBottomIn {
3051
2733
  0% {
3052
- opacity: 0;
3053
- -webkit-transform: scale3d(2,2,2);
3054
- transform: scale3d(2,2,2)
2734
+ opacity: .3;
2735
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2736
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
3055
2737
  }
2738
+ }
3056
2739
 
3057
- 40% {
3058
- -webkit-transform: scale3d(.9,.9,.9);
3059
- transform: scale3d(.9,.9,.9)
2740
+ @-webkit-keyframes scaleDown {
2741
+ to {
2742
+ opacity: 0;
2743
+ -webkit-transform: scale(.8);
2744
+ transform: scale(.8)
3060
2745
  }
2746
+ }
3061
2747
 
3062
- 60% {
3063
- -webkit-transform: scale3d(1.03,1.03,1.03);
3064
- transform: scale3d(1.03,1.03,1.03)
2748
+ @keyframes scaleDown {
2749
+ to {
2750
+ opacity: 0;
2751
+ -webkit-transform: scale(.8);
2752
+ transform: scale(.8)
3065
2753
  }
2754
+ }
3066
2755
 
3067
- 80% {
3068
- opacity: 1;
3069
- -webkit-transform: scale3d(.97,.97,.97);
3070
- transform: scale3d(.97,.97,.97)
2756
+ @-webkit-keyframes scaleUp {
2757
+ 0% {
2758
+ opacity: 0;
2759
+ -webkit-transform: scale(.8);
2760
+ transform: scale(.8)
3071
2761
  }
2762
+ }
3072
2763
 
3073
- to {
3074
- -webkit-transform: scaleX(1);
3075
- transform: scaleX(1)
2764
+ @keyframes scaleUp {
2765
+ 0% {
2766
+ opacity: 0;
2767
+ -webkit-transform: scale(.8);
2768
+ transform: scale(.8)
3076
2769
  }
3077
2770
  }
3078
2771
 
3079
- .bounceSmall {
3080
- -webkit-animation-name: bounceSmall;
3081
- animation-name: bounceSmall;
3082
- -webkit-animation-timing-function: ease-out;
3083
- animation-timing-function: ease-out
2772
+ @-webkit-keyframes scaleUpDown {
2773
+ 0% {
2774
+ opacity: 0;
2775
+ -webkit-transform: scale(1.2);
2776
+ transform: scale(1.2)
2777
+ }
3084
2778
  }
3085
2779
 
3086
- @-webkit-keyframes bounceSmall {
2780
+ @keyframes scaleUpDown {
3087
2781
  0% {
3088
2782
  opacity: 0;
3089
- -webkit-transform: scale(1.7)
2783
+ -webkit-transform: scale(1.2);
2784
+ transform: scale(1.2)
3090
2785
  }
2786
+ }
3091
2787
 
3092
- 50% {
3093
- opacity: 1;
3094
- -webkit-transform: scale(.95)
2788
+ @-webkit-keyframes scaleDownUp {
2789
+ to {
2790
+ opacity: 0;
2791
+ -webkit-transform: scale(1.2);
2792
+ transform: scale(1.2)
3095
2793
  }
2794
+ }
3096
2795
 
3097
- 80% {
3098
- -webkit-transform: scale(1.05)
2796
+ @keyframes scaleDownUp {
2797
+ to {
2798
+ opacity: 0;
2799
+ -webkit-transform: scale(1.2);
2800
+ transform: scale(1.2)
3099
2801
  }
2802
+ }
3100
2803
 
3101
- 90% {
3102
- -webkit-transform: scale(.98)
2804
+ @-webkit-keyframes scaleDownCenter {
2805
+ to {
2806
+ opacity: 0;
2807
+ -webkit-transform: scale(.7);
2808
+ transform: scale(.7)
3103
2809
  }
2810
+ }
3104
2811
 
2812
+ @keyframes scaleDownCenter {
3105
2813
  to {
3106
- -webkit-transform: scale(1)
2814
+ opacity: 0;
2815
+ -webkit-transform: scale(.7);
2816
+ transform: scale(.7)
3107
2817
  }
3108
2818
  }
3109
2819
 
3110
- @keyframes bounceSmall {
2820
+ @-webkit-keyframes scaleUpCenter {
3111
2821
  0% {
3112
2822
  opacity: 0;
3113
- -webkit-transform: scale(1.7)
2823
+ -webkit-transform: scale(.7);
2824
+ transform: scale(.7)
3114
2825
  }
2826
+ }
3115
2827
 
3116
- 50% {
3117
- opacity: 1;
3118
- -webkit-transform: scale(.95)
2828
+ @keyframes scaleUpCenter {
2829
+ 0% {
2830
+ opacity: 0;
2831
+ -webkit-transform: scale(.7);
2832
+ transform: scale(.7)
3119
2833
  }
2834
+ }
3120
2835
 
3121
- 80% {
3122
- -webkit-transform: scale(1.05)
2836
+ @-webkit-keyframes rotatePushTop {
2837
+ to {
2838
+ opacity: 0;
2839
+ -webkit-transform: rotateX(-90deg);
2840
+ transform: rotateX(-90deg)
3123
2841
  }
2842
+ }
3124
2843
 
3125
- 90% {
3126
- -webkit-transform: scale(.98)
2844
+ @keyframes rotatePushTop {
2845
+ to {
2846
+ opacity: 0;
2847
+ -webkit-transform: rotateX(-90deg);
2848
+ transform: rotateX(-90deg)
3127
2849
  }
2850
+ }
3128
2851
 
2852
+ @-webkit-keyframes rotatePushBottom {
3129
2853
  to {
3130
- -webkit-transform: scale(1)
2854
+ opacity: 0;
2855
+ -webkit-transform: rotateX(90deg);
2856
+ transform: rotateX(90deg)
3131
2857
  }
3132
2858
  }
3133
2859
 
3134
- .pullUp {
3135
- -webkit-transform-origin: 50% 100%;
3136
- transform-origin: 50% 100%;
3137
- -webkit-animation-name: pullUp;
3138
- animation-name: pullUp;
3139
- -webkit-animation-timing-function: ease-out;
3140
- animation-timing-function: ease-out
2860
+ @keyframes rotatePushBottom {
2861
+ to {
2862
+ opacity: 0;
2863
+ -webkit-transform: rotateX(90deg);
2864
+ transform: rotateX(90deg)
2865
+ }
3141
2866
  }
3142
2867
 
3143
- @-webkit-keyframes pullUp {
3144
- 0%,40%,60%,80%,99% {
3145
- -webkit-animation-timing-function: ease-out;
3146
- animation-timing-function: ease-out
2868
+ @-webkit-keyframes rotatePullTop {
2869
+ 0% {
2870
+ opacity: 0;
2871
+ -webkit-transform: rotateX(-90deg);
2872
+ transform: rotateX(-90deg)
3147
2873
  }
2874
+ }
3148
2875
 
2876
+ @keyframes rotatePullTop {
3149
2877
  0% {
3150
2878
  opacity: 0;
3151
- -webkit-transform: scaleY(.1);
3152
- transform: scaleY(.1);
3153
- -webkit-transform-origin: 50% 100%;
3154
- transform-origin: 50% 100%
2879
+ -webkit-transform: rotateX(-90deg);
2880
+ transform: rotateX(-90deg)
3155
2881
  }
2882
+ }
3156
2883
 
3157
- 40% {
3158
- opacity: 1;
3159
- -webkit-transform: scaleY(1.02);
3160
- transform: scaleY(1.02);
3161
- -webkit-transform-origin: 50% 100%;
3162
- transform-origin: 50% 100%
2884
+ @-webkit-keyframes rotatePullBottom {
2885
+ 0% {
2886
+ opacity: 0;
2887
+ -webkit-transform: rotateX(90deg);
2888
+ transform: rotateX(90deg)
3163
2889
  }
2890
+ }
3164
2891
 
3165
- 60% {
3166
- -webkit-transform: scaleY(.98);
3167
- transform: scaleY(.98);
3168
- -webkit-transform-origin: 50% 100%;
3169
- transform-origin: 50% 100%
2892
+ @keyframes rotatePullBottom {
2893
+ 0% {
2894
+ opacity: 0;
2895
+ -webkit-transform: rotateX(90deg);
2896
+ transform: rotateX(90deg)
3170
2897
  }
2898
+ }
3171
2899
 
3172
- 80% {
3173
- -webkit-transform: scaleY(1.01);
3174
- transform: scaleY(1.01);
3175
- -webkit-transform-origin: 50% 100%;
3176
- transform-origin: 50% 100%
2900
+ @-webkit-keyframes coverInUp {
2901
+ 0% {
2902
+ -webkit-transform: translate3d(0,-100%,0);
2903
+ transform: translate3d(0,-100%,0)
3177
2904
  }
2905
+ }
3178
2906
 
3179
- 99% {
3180
- -webkit-transform: scaleY(1);
3181
- transform: scaleY(1);
3182
- -webkit-transform-origin: 50% 100%;
3183
- transform-origin: 50% 100%
2907
+ @keyframes coverInUp {
2908
+ 0% {
2909
+ -webkit-transform: translate3d(0,-100%,0);
2910
+ transform: translate3d(0,-100%,0)
3184
2911
  }
2912
+ }
3185
2913
 
3186
- to {
3187
- -webkit-transform: none;
3188
- transform: none
2914
+ @-webkit-keyframes coverInDown {
2915
+ 0% {
2916
+ -webkit-transform: translate3d(0,100%,0);
2917
+ transform: translate3d(0,100%,0)
3189
2918
  }
3190
2919
  }
3191
2920
 
3192
- @keyframes pullUp {
3193
- 0%,40%,60%,80%,99% {
3194
- -webkit-animation-timing-function: ease-out;
3195
- animation-timing-function: ease-out
2921
+ @keyframes coverInDown {
2922
+ 0% {
2923
+ -webkit-transform: translate3d(0,100%,0);
2924
+ transform: translate3d(0,100%,0)
3196
2925
  }
2926
+ }
2927
+
2928
+ .rotateInReverse {
2929
+ -webkit-animation-name: rotateInReverse;
2930
+ animation-name: rotateInReverse
2931
+ }
3197
2932
 
2933
+ @-webkit-keyframes rotateInReverse {
3198
2934
  0% {
3199
2935
  opacity: 0;
3200
- -webkit-transform: scaleY(.1);
3201
- transform: scaleY(.1);
3202
- -webkit-transform-origin: 50% 100%;
3203
- transform-origin: 50% 100%
2936
+ -webkit-transform: rotate(200deg);
2937
+ transform: rotate(200deg);
2938
+ -webkit-transform-origin: center;
2939
+ transform-origin: center
3204
2940
  }
3205
2941
 
3206
- 40% {
2942
+ to {
3207
2943
  opacity: 1;
3208
- -webkit-transform: scaleY(1.02);
3209
- transform: scaleY(1.02);
3210
- -webkit-transform-origin: 50% 100%;
3211
- transform-origin: 50% 100%
3212
- }
3213
-
3214
- 60% {
3215
- -webkit-transform: scaleY(.98);
3216
- transform: scaleY(.98);
3217
- -webkit-transform-origin: 50% 100%;
3218
- transform-origin: 50% 100%
3219
- }
3220
-
3221
- 80% {
3222
- -webkit-transform: scaleY(1.01);
3223
- transform: scaleY(1.01);
3224
- -webkit-transform-origin: 50% 100%;
3225
- transform-origin: 50% 100%
2944
+ -webkit-transform: none;
2945
+ transform: none;
2946
+ -webkit-transform-origin: center;
2947
+ transform-origin: center
3226
2948
  }
2949
+ }
3227
2950
 
3228
- 99% {
3229
- -webkit-transform: scaleY(1);
3230
- transform: scaleY(1);
3231
- -webkit-transform-origin: 50% 100%;
3232
- transform-origin: 50% 100%
2951
+ @keyframes rotateInReverse {
2952
+ 0% {
2953
+ opacity: 0;
2954
+ -webkit-transform: rotate(200deg);
2955
+ transform: rotate(200deg);
2956
+ -webkit-transform-origin: center;
2957
+ transform-origin: center
3233
2958
  }
3234
2959
 
3235
2960
  to {
2961
+ opacity: 1;
3236
2962
  -webkit-transform: none;
3237
- transform: none
2963
+ transform: none;
2964
+ -webkit-transform-origin: center;
2965
+ transform-origin: center
3238
2966
  }
3239
2967
  }
3240
2968
 
3241
- .pullDown {
3242
- -webkit-transform-origin: 50% 0;
3243
- transform-origin: 50% 0;
3244
- -webkit-animation-name: pullDown;
3245
- animation-name: pullDown;
3246
- -webkit-animation-timing-function: ease-out;
3247
- animation-timing-function: ease-out
2969
+ .zoomInBig {
2970
+ -webkit-animation-name: zoomInBig;
2971
+ animation-name: zoomInBig;
2972
+ -webkit-animation-timing-function: cubic-bezier(0,.44,.75,.99);
2973
+ animation-timing-function: cubic-bezier(0,.44,.75,.99)
3248
2974
  }
3249
2975
 
3250
- @-webkit-keyframes pullDown {
3251
- 0%,40%,60%,80%,99% {
3252
- -webkit-animation-timing-function: ease-out;
3253
- animation-timing-function: ease-out
3254
- }
3255
-
2976
+ @-webkit-keyframes zoomInBig {
3256
2977
  0% {
3257
2978
  opacity: 0;
3258
- -webkit-transform: scaleY(.1);
3259
- transform: scaleY(.1);
3260
- -webkit-transform-origin: 50% 0;
3261
- transform-origin: 50% 0
2979
+ -webkit-transform: scale3d(2,2,2);
2980
+ transform: scale3d(2,2,2)
3262
2981
  }
3263
2982
 
3264
- 40% {
3265
- opacity: 1;
3266
- -webkit-transform: scaleY(1.02);
3267
- transform: scaleY(1.02);
3268
- -webkit-transform-origin: 50% 0;
3269
- transform-origin: 50% 0
2983
+ 50% {
2984
+ opacity: 1
3270
2985
  }
3271
2986
 
3272
- 60% {
3273
- -webkit-transform: scaleY(.98);
3274
- transform: scaleY(.98);
3275
- -webkit-transform-origin: 50% 0;
3276
- transform-origin: 50% 0
2987
+ 80% {
2988
+ -webkit-transform: scaleX(1);
2989
+ transform: scaleX(1)
3277
2990
  }
2991
+ }
3278
2992
 
3279
- 80% {
3280
- -webkit-transform: scaleY(1.01);
3281
- transform: scaleY(1.01);
3282
- -webkit-transform-origin: 50% 0;
3283
- transform-origin: 50% 0
2993
+ @keyframes zoomInBig {
2994
+ 0% {
2995
+ opacity: 0;
2996
+ -webkit-transform: scale3d(2,2,2);
2997
+ transform: scale3d(2,2,2)
3284
2998
  }
3285
2999
 
3286
- 99% {
3287
- -webkit-transform: scaleY(1);
3288
- transform: scaleY(1);
3289
- -webkit-transform-origin: 50% 0;
3290
- transform-origin: 50% 0
3000
+ 50% {
3001
+ opacity: 1
3291
3002
  }
3292
3003
 
3293
- to {
3294
- -webkit-transform: none;
3295
- transform: none
3004
+ 80% {
3005
+ -webkit-transform: scaleX(1);
3006
+ transform: scaleX(1)
3296
3007
  }
3297
3008
  }
3298
3009
 
3299
- @keyframes pullDown {
3300
- 0%,40%,60%,80%,99% {
3301
- -webkit-animation-timing-function: ease-out;
3302
- animation-timing-function: ease-out
3010
+ .flyIn {
3011
+ -webkit-animation-name: flyIn;
3012
+ animation-name: flyIn
3013
+ }
3014
+
3015
+ @-webkit-keyframes flyIn {
3016
+ 0%,20%,40%,60%,80%,to {
3017
+ -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
3018
+ transition-timing-function: cubic-bezier(.215,.61,.355,1)
3303
3019
  }
3304
3020
 
3305
3021
  0% {
3306
3022
  opacity: 0;
3307
- -webkit-transform: scaleY(.1);
3308
- transform: scaleY(.1);
3309
- -webkit-transform-origin: 50% 0;
3310
- transform-origin: 50% 0
3023
+ -webkit-transform: scale3d(2,2,2);
3024
+ transform: scale3d(2,2,2)
3311
3025
  }
3312
3026
 
3313
3027
  40% {
3314
- opacity: 1;
3315
- -webkit-transform: scaleY(1.02);
3316
- transform: scaleY(1.02);
3317
- -webkit-transform-origin: 50% 0;
3318
- transform-origin: 50% 0
3028
+ -webkit-transform: scale3d(.9,.9,.9);
3029
+ transform: scale3d(.9,.9,.9)
3319
3030
  }
3320
3031
 
3321
3032
  60% {
3322
- -webkit-transform: scaleY(.98);
3323
- transform: scaleY(.98);
3324
- -webkit-transform-origin: 50% 0;
3325
- transform-origin: 50% 0
3033
+ -webkit-transform: scale3d(1.03,1.03,1.03);
3034
+ transform: scale3d(1.03,1.03,1.03)
3326
3035
  }
3327
3036
 
3328
3037
  80% {
3329
- -webkit-transform: scaleY(1.01);
3330
- transform: scaleY(1.01);
3331
- -webkit-transform-origin: 50% 0;
3332
- transform-origin: 50% 0
3333
- }
3334
-
3335
- 99% {
3336
- -webkit-transform: scaleY(1);
3337
- transform: scaleY(1);
3338
- -webkit-transform-origin: 50% 0;
3339
- transform-origin: 50% 0
3038
+ opacity: 1;
3039
+ -webkit-transform: scale3d(.97,.97,.97);
3040
+ transform: scale3d(.97,.97,.97)
3340
3041
  }
3341
3042
 
3342
3043
  to {
3343
- -webkit-transform: none;
3344
- transform: none
3345
- }
3346
- }.ele-form {
3347
- position: absolute;
3348
- user-select: none;
3349
- }
3350
-
3351
- .f-single {
3352
- cursor: pointer;
3353
- }
3354
-
3355
- .ani-wrap {
3356
- position: relative;
3357
- }
3358
-
3359
- .f-single .ani-wrap .fs-tit {
3360
- display: flex;
3361
- padding: 0 5px;
3362
- height: 40px;
3363
- align-items: center;
3364
- white-space: nowrap;
3365
- overflow: hidden;
3366
- text-overflow: ellipsis;
3367
- border-bottom: 1px solid rgba(153, 153, 153, 1);
3368
- }
3369
-
3370
- .require {
3371
- padding: 0 5px 0 0;
3372
- color: red;
3373
- vertical-align: middle;
3374
- }
3375
-
3376
- .f-single ul {
3377
- padding: 15px;
3378
- margin: 0;
3379
- list-style: none;
3380
- }
3381
-
3382
- .f-single ul li {
3383
- display: flex;
3384
- align-items: center;
3385
- margin-top: 12px;
3386
- font-size: 0;
3387
- }
3388
-
3389
- .f-single ul li:first-child {
3390
- margin-top: 0;
3391
- }
3392
-
3393
- .fs-circle {
3394
- display: inline-block;
3395
- width: 16px;
3396
- height: 16px;
3397
- border-radius: 50%;
3398
- position: relative;
3399
- transition: all 0.2s;
3400
- }
3401
-
3402
- .fs-circle.selected {
3403
- background-color: #2687f1;
3404
- border-color: #2687f1 !important;
3405
- }
3406
-
3407
- .fs-circle.selected::after {
3408
- content: "";
3409
- position: absolute;
3410
- top: 3px;
3411
- left: 3px;
3412
- width: 8px;
3413
- height: 8px;
3414
- border-radius: 50%;
3415
- background-color: white;
3416
- }
3417
-
3418
- .fs-txt {
3419
- display: inline-block;
3420
- width: calc(100% - 16px);
3421
- padding-left: 8px;
3422
- vertical-align: top;
3423
- word-break: break-all;
3424
- font-size: 14px;
3425
- line-height: 1.2;
3426
- }
3427
-
3428
- .has-error .fs-tit {
3429
- border-bottom-color: #ff4d4f;
3430
- }
3431
-
3432
- /* 错误提示样式 */
3433
- .error-tip {
3434
- position: fixed;
3435
- left: 0;
3436
- top: 0;
3437
- width: 100%;
3438
- height: 100%;
3439
- z-index: 1000;
3440
- }.form-submit {
3441
- cursor: pointer;
3442
- transition: all 0.2s;
3443
- outline: none;
3444
- border: none;
3445
- }
3446
-
3447
- .form-submit:hover {
3448
- opacity: 0.9;
3449
- transform: translateY(-1px);
3044
+ -webkit-transform: scaleX(1);
3045
+ transform: scaleX(1)
3450
3046
  }
3451
-
3452
- .form-submit:active {
3453
- opacity: 0.8;
3454
- transform: translateY(0);
3047
+ }
3048
+
3049
+ @keyframes flyIn {
3050
+ 0%,20%,40%,60%,80%,to {
3051
+ -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
3052
+ transition-timing-function: cubic-bezier(.215,.61,.355,1)
3455
3053
  }
3456
-
3457
- .form-submit:disabled {
3458
- opacity: 0.6;
3459
- cursor: not-allowed;
3460
- transform: none !important;
3054
+
3055
+ 0% {
3056
+ opacity: 0;
3057
+ -webkit-transform: scale3d(2,2,2);
3058
+ transform: scale3d(2,2,2)
3461
3059
  }
3462
-
3463
- /* 统一错误提示样式 */
3464
- .tip-cover {
3465
- position: fixed;
3466
- left: 0;
3467
- top: 0;
3468
- width: 100%;
3469
- height: 100%;
3470
- display: flex;
3471
- align-items: center;
3472
- justify-content: center;
3473
- z-index: 999;
3474
- background-color: rgba(0,0,0,.7);
3060
+
3061
+ 40% {
3062
+ -webkit-transform: scale3d(.9,.9,.9);
3063
+ transform: scale3d(.9,.9,.9)
3475
3064
  }
3476
-
3477
- .tip {
3478
- width: 80%;
3479
- max-width: 250px;
3480
- padding: 10px;
3481
- border-radius: 5px;
3482
- background-color: #fff;
3065
+
3066
+ 60% {
3067
+ -webkit-transform: scale3d(1.03,1.03,1.03);
3068
+ transform: scale3d(1.03,1.03,1.03)
3483
3069
  }
3484
-
3485
- .tip-btn {
3486
- display: block;
3487
- margin: 25px auto;
3488
- width: 120px;
3489
- height: 30px;
3490
- color: #fff;
3491
- border-radius: 4px;
3492
- text-align: center;
3493
- font-size: 14px;
3494
- line-height: 30px;
3495
- background: #ed5566;
3496
- cursor: pointer;
3070
+
3071
+ 80% {
3072
+ opacity: 1;
3073
+ -webkit-transform: scale3d(.97,.97,.97);
3074
+ transform: scale3d(.97,.97,.97)
3497
3075
  }
3498
-
3499
- .tip-content {
3500
- font-size: 14px;
3501
- padding-top: 30px;
3502
- text-align: center;
3503
- }.ele-form {
3504
- position: absolute;
3505
- user-select: none;
3076
+
3077
+ to {
3078
+ -webkit-transform: scaleX(1);
3079
+ transform: scaleX(1)
3506
3080
  }
3507
-
3508
- .f-select {
3509
- cursor: pointer;
3081
+ }
3082
+
3083
+ .bounceSmall {
3084
+ -webkit-animation-name: bounceSmall;
3085
+ animation-name: bounceSmall;
3086
+ -webkit-animation-timing-function: ease-out;
3087
+ animation-timing-function: ease-out
3088
+ }
3089
+
3090
+ @-webkit-keyframes bounceSmall {
3091
+ 0% {
3092
+ opacity: 0;
3093
+ -webkit-transform: scale(1.7)
3510
3094
  }
3511
-
3512
- .ani-wrap {
3513
- position: relative;
3095
+
3096
+ 50% {
3097
+ opacity: 1;
3098
+ -webkit-transform: scale(.95)
3514
3099
  }
3515
-
3516
- .f-select .ani-wrap .fs-tit {
3517
- position: relative;
3518
- display: flex;
3519
- padding: 0 5px;
3520
- height: 35px;
3521
- line-height: 35px;
3522
- align-items: center;
3100
+
3101
+ 80% {
3102
+ -webkit-transform: scale(1.05)
3523
3103
  }
3524
-
3525
- .require {
3526
- padding: 0 5px 0 0;
3527
- color: red;
3528
- vertical-align: middle;
3104
+
3105
+ 90% {
3106
+ -webkit-transform: scale(.98)
3529
3107
  }
3530
-
3531
- .fs-cont {
3532
- padding-right: 15px;
3533
- white-space: nowrap;
3534
- overflow: hidden;
3535
- text-overflow: ellipsis;
3536
- flex-grow: 1;
3108
+
3109
+ to {
3110
+ -webkit-transform: scale(1)
3537
3111
  }
3538
-
3539
- .icon-bofang1 {
3540
- font-size: 12px;
3541
- transition: transform 0.2s ease;
3112
+ }
3113
+
3114
+ @keyframes bounceSmall {
3115
+ 0% {
3116
+ opacity: 0;
3117
+ -webkit-transform: scale(1.7)
3542
3118
  }
3543
-
3544
- .rotate-180 {
3545
- transform: rotate(180deg) !important;
3119
+
3120
+ 50% {
3121
+ opacity: 1;
3122
+ -webkit-transform: scale(.95)
3546
3123
  }
3547
-
3548
- .f-real {
3549
- position: absolute;
3550
- left: 0;
3551
- top: 0;
3552
- width: 100%;
3553
- height: 100%;
3554
- z-index: 1;
3555
- opacity: 0;
3556
- cursor: pointer;
3124
+
3125
+ 80% {
3126
+ -webkit-transform: scale(1.05)
3557
3127
  }
3558
-
3559
- .dropdown-menu {
3560
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
3128
+
3129
+ 90% {
3130
+ -webkit-transform: scale(.98)
3561
3131
  }
3562
-
3563
- .dropdown-item {
3564
- padding: 8px 10px;
3565
- cursor: pointer;
3566
- transition: background-color 0.2s;
3132
+
3133
+ to {
3134
+ -webkit-transform: scale(1)
3567
3135
  }
3568
-
3569
- .dropdown-item:hover {
3570
- background-color: #f5f5f5;
3136
+ }
3137
+
3138
+ .pullUp {
3139
+ -webkit-transform-origin: 50% 100%;
3140
+ transform-origin: 50% 100%;
3141
+ -webkit-animation-name: pullUp;
3142
+ animation-name: pullUp;
3143
+ -webkit-animation-timing-function: ease-out;
3144
+ animation-timing-function: ease-out
3145
+ }
3146
+
3147
+ @-webkit-keyframes pullUp {
3148
+ 0%,40%,60%,80%,99% {
3149
+ -webkit-animation-timing-function: ease-out;
3150
+ animation-timing-function: ease-out
3571
3151
  }
3572
-
3573
- .dropdown-item.selected {
3574
- background-color: #e6f7ff;
3575
- color: #1890ff;
3152
+
3153
+ 0% {
3154
+ opacity: 0;
3155
+ -webkit-transform: scaleY(.1);
3156
+ transform: scaleY(.1);
3157
+ -webkit-transform-origin: 50% 100%;
3158
+ transform-origin: 50% 100%
3576
3159
  }
3577
-
3578
- .f-select .fs-tit .icon-bofang1 {
3579
- position: absolute;
3580
- right: 10px;
3581
- font-size: 12px;
3582
- display: inline-block;
3583
- transform: rotate(90deg);
3160
+
3161
+ 40% {
3162
+ opacity: 1;
3163
+ -webkit-transform: scaleY(1.02);
3164
+ transform: scaleY(1.02);
3165
+ -webkit-transform-origin: 50% 100%;
3166
+ transform-origin: 50% 100%
3584
3167
  }
3585
-
3586
- .icon-bofang1:before {
3587
- content: "\E6CF";
3168
+
3169
+ 60% {
3170
+ -webkit-transform: scaleY(.98);
3171
+ transform: scaleY(.98);
3172
+ -webkit-transform-origin: 50% 100%;
3173
+ transform-origin: 50% 100%
3588
3174
  }
3589
-
3590
- .has-error {
3591
- border-color: #ff4d4f !important;
3175
+
3176
+ 80% {
3177
+ -webkit-transform: scaleY(1.01);
3178
+ transform: scaleY(1.01);
3179
+ -webkit-transform-origin: 50% 100%;
3180
+ transform-origin: 50% 100%
3592
3181
  }
3593
-
3594
- .error-tip {
3595
- position: fixed;
3596
- left: 0;
3597
- top: 0;
3598
- width: 100%;
3599
- height: 100%;
3600
- z-index: 1000;
3601
- }.form-input {
3602
- position: absolute;
3182
+
3183
+ 99% {
3184
+ -webkit-transform: scaleY(1);
3185
+ transform: scaleY(1);
3186
+ -webkit-transform-origin: 50% 100%;
3187
+ transform-origin: 50% 100%
3603
3188
  }
3604
-
3605
- .input-wrapper {
3606
- display: flex;
3607
- align-items: center;
3608
- width: 100%;
3609
- height: 100%;
3610
- padding: 0 10px;
3611
- box-sizing: border-box;
3612
- position: relative;
3613
- transition: border-color 0.3s;
3189
+
3190
+ to {
3191
+ -webkit-transform: none;
3192
+ transform: none
3614
3193
  }
3615
-
3616
- .required-marker {
3617
- font-size: 12px;
3618
- padding: 0 5px 0 0;
3619
- color: red;
3620
- vertical-align: middle;
3194
+ }
3195
+
3196
+ @keyframes pullUp {
3197
+ 0%,40%,60%,80%,99% {
3198
+ -webkit-animation-timing-function: ease-out;
3199
+ animation-timing-function: ease-out
3621
3200
  }
3622
-
3623
- input {
3624
- flex: 1;
3625
- border: none;
3626
- outline: none;
3627
- background: transparent;
3628
- height: 100%;
3629
- padding: 0;
3630
- margin: 0;
3201
+
3202
+ 0% {
3203
+ opacity: 0;
3204
+ -webkit-transform: scaleY(.1);
3205
+ transform: scaleY(.1);
3206
+ -webkit-transform-origin: 50% 100%;
3207
+ transform-origin: 50% 100%
3631
3208
  }
3632
- /*
3633
- input::placeholder {
3634
- color: #ccc;
3635
- opacity: 1;
3636
- } */
3637
-
3638
- .dynamic-placeholder-input::placeholder {
3639
- color: var(--placeholder-color, #999);
3640
- opacity: 1;
3209
+
3210
+ 40% {
3211
+ opacity: 1;
3212
+ -webkit-transform: scaleY(1.02);
3213
+ transform: scaleY(1.02);
3214
+ -webkit-transform-origin: 50% 100%;
3215
+ transform-origin: 50% 100%
3641
3216
  }
3642
- .dynamic-placeholder-input::-webkit-input-placeholder {
3643
- color: var(--placeholder-color, #999);
3217
+
3218
+ 60% {
3219
+ -webkit-transform: scaleY(.98);
3220
+ transform: scaleY(.98);
3221
+ -webkit-transform-origin: 50% 100%;
3222
+ transform-origin: 50% 100%
3644
3223
  }
3645
- .dynamic-placeholder-input::-moz-placeholder {
3646
- color: var(--placeholder-color, #999);
3647
- opacity: 1;
3224
+
3225
+ 80% {
3226
+ -webkit-transform: scaleY(1.01);
3227
+ transform: scaleY(1.01);
3228
+ -webkit-transform-origin: 50% 100%;
3229
+ transform-origin: 50% 100%
3648
3230
  }
3649
- .dynamic-placeholder-input:-ms-input-placeholder {
3650
- color: var(--placeholder-color, #999);
3231
+
3232
+ 99% {
3233
+ -webkit-transform: scaleY(1);
3234
+ transform: scaleY(1);
3235
+ -webkit-transform-origin: 50% 100%;
3236
+ transform-origin: 50% 100%
3651
3237
  }
3652
- .global.video {
3653
- width: 35px;
3654
- height: 55px;
3655
- border-radius: 50%;
3656
- text-align: center;
3657
- margin-bottom: 5px;
3658
- border: 2px solid #fff;
3659
- cursor: pointer;
3660
- }
3661
- .icon-shipin2:before { content: "\E611"; }
3662
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3663
- .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
3664
- }
3665
- .ele-form {
3666
- position: absolute;
3667
- user-select: none;
3668
- }
3669
3238
 
3670
- .f-multiple {
3671
- cursor: pointer;
3239
+ to {
3240
+ -webkit-transform: none;
3241
+ transform: none
3242
+ }
3672
3243
  }
3673
3244
 
3674
- .ani-wrap {
3675
- position: relative;
3245
+ .pullDown {
3246
+ -webkit-transform-origin: 50% 0;
3247
+ transform-origin: 50% 0;
3248
+ -webkit-animation-name: pullDown;
3249
+ animation-name: pullDown;
3250
+ -webkit-animation-timing-function: ease-out;
3251
+ animation-timing-function: ease-out
3676
3252
  }
3677
3253
 
3678
- .f-multiple .ani-wrap .fs-tit {
3679
- display: flex;
3680
- padding: 0 5px;
3681
- height: 40px;
3682
- align-items: center;
3683
- white-space: nowrap;
3684
- overflow: hidden;
3685
- text-overflow: ellipsis;
3686
- border-bottom: 1px solid rgba(153, 153, 153, 1);
3687
- }
3254
+ @-webkit-keyframes pullDown {
3255
+ 0%,40%,60%,80%,99% {
3256
+ -webkit-animation-timing-function: ease-out;
3257
+ animation-timing-function: ease-out
3258
+ }
3688
3259
 
3689
- .require {
3690
- padding: 0 5px 0 0;
3691
- color: red;
3692
- vertical-align: middle;
3693
- }
3260
+ 0% {
3261
+ opacity: 0;
3262
+ -webkit-transform: scaleY(.1);
3263
+ transform: scaleY(.1);
3264
+ -webkit-transform-origin: 50% 0;
3265
+ transform-origin: 50% 0
3266
+ }
3694
3267
 
3695
- .f-multiple ul {
3696
- padding: 15px;
3697
- margin: 0;
3698
- list-style: none;
3699
- }
3268
+ 40% {
3269
+ opacity: 1;
3270
+ -webkit-transform: scaleY(1.02);
3271
+ transform: scaleY(1.02);
3272
+ -webkit-transform-origin: 50% 0;
3273
+ transform-origin: 50% 0
3274
+ }
3700
3275
 
3701
- .f-multiple ul li {
3702
- margin-top: 12px;
3703
- font-size: 0;
3704
- display: flex;
3705
- align-items: center;
3706
- cursor: pointer;
3707
- }
3276
+ 60% {
3277
+ -webkit-transform: scaleY(.98);
3278
+ transform: scaleY(.98);
3279
+ -webkit-transform-origin: 50% 0;
3280
+ transform-origin: 50% 0
3281
+ }
3708
3282
 
3709
- .f-multiple ul li:first-child {
3710
- margin-top: 0;
3711
- }
3283
+ 80% {
3284
+ -webkit-transform: scaleY(1.01);
3285
+ transform: scaleY(1.01);
3286
+ -webkit-transform-origin: 50% 0;
3287
+ transform-origin: 50% 0
3288
+ }
3712
3289
 
3713
- .fs-circle {
3714
- display: inline-block;
3715
- width: 16px;
3716
- height: 16px;
3717
- border-radius: 50%;
3718
- position: relative;
3719
- transition: all 0.2s;
3720
- }
3290
+ 99% {
3291
+ -webkit-transform: scaleY(1);
3292
+ transform: scaleY(1);
3293
+ -webkit-transform-origin: 50% 0;
3294
+ transform-origin: 50% 0
3295
+ }
3721
3296
 
3722
- .fs-circle.selected {
3723
- background-color: #2687f1;
3724
- border-color: #2687f1 !important;
3297
+ to {
3298
+ -webkit-transform: none;
3299
+ transform: none
3300
+ }
3725
3301
  }
3726
3302
 
3727
- .fs-circle.selected::after {
3728
- content: "";
3729
- position: absolute;
3730
- top: 3px;
3731
- left: 3px;
3732
- width: 8px;
3733
- height: 8px;
3734
- border-radius: 50%;
3735
- background-color: white;
3736
- }
3303
+ @keyframes pullDown {
3304
+ 0%,40%,60%,80%,99% {
3305
+ -webkit-animation-timing-function: ease-out;
3306
+ animation-timing-function: ease-out
3307
+ }
3737
3308
 
3738
- .fs-txt {
3739
- display: inline-block;
3740
- width: calc(100% - 16px);
3741
- padding-left: 8px;
3742
- vertical-align: top;
3743
- word-break: break-all;
3744
- font-size: 14px;
3745
- line-height: 1.2;
3746
- }
3309
+ 0% {
3310
+ opacity: 0;
3311
+ -webkit-transform: scaleY(.1);
3312
+ transform: scaleY(.1);
3313
+ -webkit-transform-origin: 50% 0;
3314
+ transform-origin: 50% 0
3315
+ }
3747
3316
 
3748
- .has-error .fs-tit {
3749
- border-bottom-color: #ff4d4f;
3750
- }
3751
- .global.map {
3752
- width: 35px;
3753
- height: 55px;
3754
- border-radius: 50%;
3755
- text-align: center;
3756
- margin-bottom: 5px;
3757
- border: 2px solid #fff;
3758
- cursor: pointer;
3759
- }
3760
- .icon-daohang1:before { content: "\E612"; }
3761
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3762
- .global.map > span { font-size: 10px; line-height: 20px; display: block;}
3763
- .global.receipt {
3764
- width: 35px;
3765
- height: 55px;
3766
- border-radius: 50%;
3767
- text-align: center;
3768
- margin-bottom: 5px;
3769
- border: 2px solid #fff;
3770
- cursor: pointer;
3771
- }
3772
- .icon-liuyan:before { content: "\E636"; }
3773
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3774
- .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }
3775
- .global.tel {
3776
- width: 35px;
3777
- height: 55px;
3778
- border-radius: 50%;
3779
- text-align: center;
3780
- margin-bottom: 15px;
3781
- border: 2px solid #fff;
3782
- cursor: pointer;
3783
- }
3784
- .icon-dianhua:before { content: "\E60E"; }
3785
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3786
- .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
3317
+ 40% {
3318
+ opacity: 1;
3319
+ -webkit-transform: scaleY(1.02);
3320
+ transform: scaleY(1.02);
3321
+ -webkit-transform-origin: 50% 0;
3322
+ transform-origin: 50% 0
3323
+ }
3324
+
3325
+ 60% {
3326
+ -webkit-transform: scaleY(.98);
3327
+ transform: scaleY(.98);
3328
+ -webkit-transform-origin: 50% 0;
3329
+ transform-origin: 50% 0
3330
+ }
3331
+
3332
+ 80% {
3333
+ -webkit-transform: scaleY(1.01);
3334
+ transform: scaleY(1.01);
3335
+ -webkit-transform-origin: 50% 0;
3336
+ transform-origin: 50% 0
3337
+ }
3338
+
3339
+ 99% {
3340
+ -webkit-transform: scaleY(1);
3341
+ transform: scaleY(1);
3342
+ -webkit-transform-origin: 50% 0;
3343
+ transform-origin: 50% 0
3344
+ }
3345
+
3346
+ to {
3347
+ -webkit-transform: none;
3348
+ transform: none
3349
+ }
3350
+ }.form-submit {
3351
+ cursor: pointer;
3352
+ transition: all 0.2s;
3353
+ outline: none;
3354
+ border: none;
3355
+ }
3356
+
3357
+ .form-submit:hover {
3358
+ opacity: 0.9;
3359
+ transform: translateY(-1px);
3360
+ }
3361
+
3362
+ .form-submit:active {
3363
+ opacity: 0.8;
3364
+ transform: translateY(0);
3365
+ }
3366
+
3367
+ .form-submit:disabled {
3368
+ opacity: 0.6;
3369
+ cursor: not-allowed;
3370
+ transform: none !important;
3371
+ }
3372
+
3373
+ /* 统一错误提示样式 */
3374
+ .tip-cover {
3375
+ position: fixed;
3376
+ left: 0;
3377
+ top: 0;
3378
+ width: 100%;
3379
+ 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
+ }
3787
3417
  .icon-guanbi:before {
3788
3418
  content: "\E676";
3789
3419
  }
@@ -3970,210 +3600,581 @@
3970
3600
  opacity: 1;
3971
3601
  }
3972
3602
 
3973
- #receipt-wrap .r-list li .r-input:disabled::-webkit-input-placeholder {
3974
- color: #bfbfbf;
3603
+ #receipt-wrap .r-list li .r-input:disabled::-webkit-input-placeholder {
3604
+ color: #bfbfbf;
3605
+ }
3606
+
3607
+ #receipt-wrap .r-list li .r-input::-webkit-input-placeholder {
3608
+ color: #bfbfbf;
3609
+ opacity: 1;
3610
+ }
3611
+
3612
+ #receipt-wrap .r-list li .r-btn {
3613
+ width: 100%;
3614
+ height: 30px; /* 0.8rem ≈ 30px */
3615
+ line-height: 30px;
3616
+ color: #fff;
3617
+ background-color: #ff4562;
3618
+ border-radius: 20px; /* 0.53333rem ≈ 20px */
3619
+ outline: 0;
3620
+ font-size: 14px;
3621
+ border: none;
3622
+ cursor: pointer;
3623
+ }
3624
+
3625
+ /* 提示信息样式 */
3626
+ #receipt-wrap .tip-cover {
3627
+ position: fixed;
3628
+ left: 0;
3629
+ top: 0;
3630
+ width: 100%;
3631
+ height: 100%;
3632
+ display: flex;
3633
+ align-items: center;
3634
+ justify-content: center;
3635
+ z-index: 999;
3636
+ background-color: rgba(0,0,0,.7);
3637
+ }
3638
+
3639
+ #receipt-wrap .tip-cover .tip {
3640
+ width: 80%;
3641
+ max-width: 250px; /* 6.66667rem ≈ 250px */
3642
+ padding: 10px;
3643
+ border-radius: 5px; /* 0.13333rem ≈ 5px */
3644
+ background-color: #fff;
3645
+ }
3646
+
3647
+ #receipt-wrap .tip-cover .tip-btn {
3648
+ display: block;
3649
+ margin: 25px auto; /* 0.66667rem ≈ 25px */
3650
+ width: 120px; /* 3.2rem ≈ 120px */
3651
+ height: 30px;
3652
+ color: #fff;
3653
+ border-radius: 4px; /* 0.10667rem ≈ 4px */
3654
+ text-align: center;
3655
+ font-size: 14px;
3656
+ line-height: 30px;
3657
+ background: #ed5566;
3658
+ border: none;
3659
+ cursor: pointer;
3660
+ }
3661
+
3662
+ #receipt-wrap .tip-cover .tip-content {
3663
+ font-size: 14px;
3664
+ padding-top: 30px; /* 0.8rem ≈ 30px */
3665
+ text-align: center;
3666
+ }
3667
+
3668
+ /* 选择器样式 */
3669
+ .which-select {
3670
+ top: 0;
3671
+ z-index: 110;
3672
+ height: 100%;
3673
+ background-color: rgba(0,0,0,.5);
3674
+ }
3675
+
3676
+ .which-select,
3677
+ .which-select ul {
3678
+ position: absolute;
3679
+ left: 0;
3680
+ width: 100%;
3681
+ }
3682
+
3683
+ .which-select ul {
3684
+ bottom: 0;
3685
+ transition: transform 0.3s ease-out;
3686
+ margin: 0;
3687
+ padding: 0;
3688
+ list-style: none;
3689
+ }
3690
+
3691
+ .which-select ul.hide {
3692
+ transform: translateY(100%);
3693
+ }
3694
+
3695
+ .which-select ul li {
3696
+ width: 100%;
3697
+ height: 45px; /* 1.2rem ≈ 45px */
3698
+ line-height: 45px;
3699
+ background-color: #f0f0f0;
3700
+ border-bottom: 1px solid #e0e0e0;
3701
+ text-align: center;
3702
+ cursor: pointer;
3703
+ }
3704
+
3705
+ .which-select ul li:last-child {
3706
+ line-height: 40px;
3707
+ height: auto;
3708
+ padding-bottom: 15px;
3709
+ }
3710
+
3711
+ /* 视频播放器样式 */
3712
+ .global-v {
3713
+ position: fixed;
3714
+ top: 0;
3715
+ left: 0;
3716
+ width: 100%;
3717
+ height: 100%;
3718
+ background: rgba(0,0,0,.7);
3719
+ z-index: 101;
3720
+ transition: all 0.3s;
3721
+ }
3722
+
3723
+ .global-v.gv-show {
3724
+ transform: translateX(-100%);
3725
+ }
3726
+
3727
+ .global-v #close-gvideo {
3728
+ position: absolute;
3729
+ left: 13px; /* 0.34667rem ≈ 13px */
3730
+ top: 13px;
3731
+ z-index: 10;
3732
+ color: #fff;
3733
+ cursor: pointer;
3734
+ }
3735
+
3736
+ .global-v #close-gvideo .icon-buoumaotubiao20 {
3737
+ font-size: 22px; /* 0.58667rem ≈ 22px */
3738
+ font-weight: 700;
3739
+ }
3740
+
3741
+ .global-v .global-v-show {
3742
+ position: relative;
3743
+ z-index: 1;
3744
+ width: 100%;
3745
+ height: 100%;
3746
+ }
3747
+
3748
+ .global-v ::v-deep .global-v-show iframe {
3749
+ position: absolute;
3750
+ left: 0;
3751
+ top: 50%;
3752
+ transform: translateY(-60%);
3753
+ min-height: 45%;
3754
+ max-height: 100%;
3755
+ width: 100%;
3756
+ }
3757
+
3758
+ /* 缩放动画 */
3759
+ .scale-enter-active,
3760
+ .scale-leave-active {
3761
+ transition: 0.2s;
3762
+ transform-origin: center center;
3763
+ }
3764
+
3765
+ .scale-enter,
3766
+ .scale-leave-to {
3767
+ opacity: 0;
3768
+ transform: scale(1.1);
3769
+ }
3770
+
3771
+ .scale-enter-to,
3772
+ .scale-leave {
3773
+ opacity: 1;
3774
+ transform: scale(1);
3775
+ }
3776
+ /* 新增 toast 样式 */
3777
+ .mint-toast {
3778
+ position: fixed;
3779
+ 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;
3975
3799
  }
3976
3800
 
3977
- #receipt-wrap .r-list li .r-input::-webkit-input-placeholder {
3978
- color: #bfbfbf;
3979
- opacity: 1;
3801
+ /* 新增图标样式 */
3802
+ .icon-duihao:before {
3803
+ content: "\E637";
3980
3804
  }
3981
3805
 
3982
- #receipt-wrap .r-list li .r-btn {
3983
- width: 100%;
3984
- height: 30px; /* 0.8rem ≈ 30px */
3985
- line-height: 30px;
3986
- color: #fff;
3987
- background-color: #ff4562;
3988
- border-radius: 20px; /* 0.53333rem ≈ 20px */
3989
- outline: 0;
3990
- font-size: 14px;
3991
- border: none;
3806
+ .icon-cuowu2:before {
3807
+ content: "\E65E";
3808
+ color: #F44336; /* 失败的红色 */
3809
+ }
3810
+ .call {
3811
+ position: absolute;
3992
3812
  cursor: pointer;
3813
+ user-select: none;
3993
3814
  }
3994
3815
 
3995
- /* 提示信息样式 */
3996
- #receipt-wrap .tip-cover {
3997
- position: fixed;
3998
- left: 0;
3999
- top: 0;
3816
+ .call .ani-wrap {
3817
+ display: flex;
3818
+ justify-content: center;
3819
+ align-items: center;
4000
3820
  width: 100%;
4001
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 {
4002
3831
  display: flex;
4003
3832
  align-items: center;
4004
3833
  justify-content: center;
4005
- z-index: 999;
4006
- background-color: rgba(0,0,0,.7);
4007
3834
  }
4008
3835
 
4009
- #receipt-wrap .tip-cover .tip {
4010
- width: 80%;
4011
- max-width: 250px; /* 6.66667rem ≈ 250px */
4012
- padding: 10px;
4013
- border-radius: 5px; /* 0.13333rem ≈ 5px */
4014
- background-color: #fff;
3836
+ .btn-text {
3837
+ margin-left: 10px;
4015
3838
  }
4016
3839
 
4017
- #receipt-wrap .tip-cover .tip-btn {
4018
- display: block;
4019
- margin: 25px auto; /* 0.66667rem ≈ 25px */
4020
- width: 120px; /* 3.2rem ≈ 120px */
4021
- height: 30px;
4022
- color: #fff;
4023
- border-radius: 4px; /* 0.10667rem ≈ 4px */
4024
- text-align: center;
4025
- font-size: 14px;
4026
- line-height: 30px;
4027
- background: #ed5566;
4028
- border: none;
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 {
4029
3859
  cursor: pointer;
4030
3860
  }
4031
3861
 
4032
- #receipt-wrap .tip-cover .tip-content {
4033
- font-size: 14px;
4034
- padding-top: 30px; /* 0.8rem ≈ 30px */
4035
- text-align: center;
3862
+ .ani-wrap {
3863
+ position: relative;
4036
3864
  }
4037
3865
 
4038
- /* 选择器样式 */
4039
- .which-select {
4040
- top: 0;
4041
- z-index: 110;
4042
- height: 100%;
4043
- background-color: rgba(0,0,0,.5);
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);
4044
3875
  }
4045
3876
 
4046
- .which-select,
4047
- .which-select ul {
4048
- position: absolute;
4049
- left: 0;
4050
- width: 100%;
3877
+ .require {
3878
+ padding: 0 5px 0 0;
3879
+ color: red;
3880
+ vertical-align: middle;
4051
3881
  }
4052
3882
 
4053
- .which-select ul {
4054
- bottom: 0;
4055
- transition: transform 0.3s ease-out;
3883
+ .f-multiple ul {
3884
+ padding: 15px;
4056
3885
  margin: 0;
4057
- padding: 0;
4058
3886
  list-style: none;
4059
3887
  }
4060
3888
 
4061
- .which-select ul.hide {
4062
- transform: translateY(100%);
3889
+ .f-multiple ul li {
3890
+ margin-top: 12px;
3891
+ font-size: 0;
3892
+ display: flex;
3893
+ align-items: center;
3894
+ cursor: pointer;
4063
3895
  }
4064
3896
 
4065
- .which-select ul li {
4066
- width: 100%;
4067
- height: 45px; /* 1.2rem ≈ 45px */
4068
- line-height: 45px;
4069
- background-color: #f0f0f0;
4070
- border-bottom: 1px solid #e0e0e0;
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;
3908
+ }
3909
+
3910
+ .fs-circle.selected {
3911
+ background-color: #2687f1;
3912
+ border-color: #2687f1 !important;
3913
+ }
3914
+
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;
3924
+ }
3925
+
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;
3934
+ }
3935
+
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 {
4034
+ width: 35px;
4035
+ height: 55px;
4036
+ border-radius: 50%;
4071
4037
  text-align: center;
4038
+ margin-bottom: 5px;
4039
+ border: 2px solid #fff;
4072
4040
  cursor: pointer;
4073
4041
  }
4074
-
4075
- .which-select ul li:last-child {
4076
- line-height: 40px;
4077
- height: auto;
4078
- padding-bottom: 15px;
4079
- }
4080
-
4081
- /* 视频播放器样式 */
4082
- .global-v {
4083
- position: fixed;
4084
- top: 0;
4085
- left: 0;
4086
- width: 100%;
4087
- height: 100%;
4088
- background: rgba(0,0,0,.7);
4089
- z-index: 101;
4090
- transition: all 0.3s;
4091
- }
4092
-
4093
- .global-v.gv-show {
4094
- transform: translateX(-100%);
4095
- }
4096
-
4097
- .global-v #close-gvideo {
4098
- position: absolute;
4099
- left: 13px; /* 0.34667rem ≈ 13px */
4100
- top: 13px;
4101
- z-index: 10;
4102
- color: #fff;
4042
+ .icon-liuyan:before { content: "\E636"; }
4043
+ .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 {
4046
+ width: 35px;
4047
+ height: 55px;
4048
+ border-radius: 50%;
4049
+ text-align: center;
4050
+ margin-bottom: 5px;
4051
+ border: 2px solid #fff;
4103
4052
  cursor: pointer;
4104
4053
  }
4105
-
4106
- .global-v #close-gvideo .icon-buoumaotubiao20 {
4107
- font-size: 22px; /* 0.58667rem 22px */
4108
- font-weight: 700;
4109
- }
4110
-
4111
- .global-v .global-v-show {
4112
- position: relative;
4113
- z-index: 1;
4114
- width: 100%;
4115
- height: 100%;
4116
- }
4117
-
4118
- .global-v ::v-deep .global-v-show iframe {
4119
- position: absolute;
4120
- left: 0;
4121
- top: 50%;
4122
- transform: translateY(-60%);
4123
- min-height: 45%;
4124
- max-height: 100%;
4125
- width: 100%;
4126
- }
4127
-
4128
- /* 缩放动画 */
4129
- .scale-enter-active,
4130
- .scale-leave-active {
4131
- transition: 0.2s;
4132
- transform-origin: center center;
4133
- }
4134
-
4135
- .scale-enter,
4136
- .scale-leave-to {
4137
- opacity: 0;
4138
- transform: scale(1.1);
4139
- }
4140
-
4141
- .scale-enter-to,
4142
- .scale-leave {
4143
- opacity: 1;
4144
- transform: scale(1);
4145
- }
4146
- /* 新增 toast 样式 */
4147
- .mint-toast {
4148
- position: fixed;
4149
- top: 50%;
4150
- left: 50%;
4151
- transform: translate(-50%, -50%);
4152
- display: flex;
4153
- flex-direction: column;
4154
- align-items: center;
4155
- justify-content: center;
4156
- min-width: 90px; /* 2.4rem ≈ 90px */
4157
- max-width: 180px; /* 4.8rem ≈ 180px */
4158
- height: 90px;
4159
- padding: 8px !important; /* 0.21333rem ≈ 8px */
4160
- background-color: rgba(0, 0, 0, 0.7);
4161
- border-radius: 8px;
4162
- z-index: 2000;
4163
- color: #fff;
4164
- }
4165
-
4166
- .mint-toast-text {
4167
- font-size: 12px; /* 0.32rem ≈ 12px */
4168
- padding-top: 0 !important;
4054
+ .icon-shipin2:before { content: "\E611"; }
4055
+ .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;
4169
4057
  }
4170
4058
 
4171
- /* 新增图标样式 */
4172
- .icon-duihao:before {
4173
- content: "\E637";
4059
+ .global.tel {
4060
+ width: 35px;
4061
+ height: 55px;
4062
+ border-radius: 50%;
4063
+ text-align: center;
4064
+ margin-bottom: 15px;
4065
+ border: 2px solid #fff;
4066
+ cursor: pointer;
4174
4067
  }
4175
-
4176
- .icon-cuowu2:before {
4177
- content: "\E65E";
4178
- color: #F44336; /* 失败的红色 */
4068
+ .icon-dianhua:before { content: "\E60E"; }
4069
+ .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 {
4170
+ width: 35px;
4171
+ height: 55px;
4172
+ border-radius: 50%;
4173
+ text-align: center;
4174
+ margin-bottom: 5px;
4175
+ border: 2px solid #fff;
4176
+ cursor: pointer;
4179
4177
  }
4178
+ .icon-daohang1:before { content: "\E612"; }
4179
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4180
+ .global.map > span { font-size: 10px; line-height: 20px; display: block;}