unika-components 1.2.2 → 1.2.3

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.
@@ -84,76 +84,6 @@
84
84
  opacity: 1;
85
85
  transform: scale(1);
86
86
  }
87
- }#audio {
88
- position: absolute;
89
- right: 10px;
90
- top: 10px;
91
- z-index: 103;
92
- width: 30px;
93
- height: 30px;
94
- display: flex;
95
- align-items: center;
96
- }
97
-
98
- #audio .mrotate {
99
- animation: mrotate 5s linear infinite;
100
- }
101
-
102
- @keyframes mrotate {
103
- to {
104
- transform: rotate(1turn);
105
- }
106
- }
107
-
108
- #audio .audio {
109
- width: 100%;
110
- height: 100%;
111
- display: flex;
112
- align-items: center;
113
- justify-content: center;
114
- color: #fff;
115
- background: #666;
116
- border-radius: 50%;
117
- overflow: hidden;
118
- cursor: pointer;
119
- transition: all 0.3s ease;
120
- }
121
-
122
- #audio .audio.a-border {
123
- border: 1px solid #fff;
124
- }
125
-
126
- #audio .audio .music-icon {
127
- display: block;
128
- width: 60%;
129
- height: 60%;
130
- object-fit: contain;
131
- }
132
-
133
- #audio .audio .iconfont {
134
- font-size: 2opx;
135
- line-height: 1;
136
- }
137
- #audio .icon-cancel {
138
- position: absolute;
139
- width: 100%;
140
- height: 100%;
141
- border-radius: 50%;
142
- overflow: hidden;
143
- padding: 15px 0;
144
- }
145
- #audio .icon-cancel .icon-h {
146
- transform: rotate(45deg);
147
- width: 100%;
148
- height: 2px;
149
- background: #fff;
150
- }
151
- #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
152
- content: '';
153
- position: absolute;
154
- width: 100%;
155
- height: 2px;
156
- background: #fff;
157
87
  }
158
88
  .ele-text {
159
89
  position: relative;
@@ -221,379 +151,128 @@
221
151
  transform: scale(1);
222
152
  opacity: 1;
223
153
  }
224
- }.count-down .drag-point {
225
- cursor: default!important
226
154
  }
227
-
228
- .count-down .ani-wrap {
229
- width: 100%;
230
- height: 100%
155
+ @keyframes jumpheart {
156
+ to {
157
+ -webkit-transform: scale(1.2);
158
+ transform: scale(1.2)
159
+ }
160
+ }
161
+ .ele-calendar {
162
+ position: relative;
163
+ width: 325px !important;
164
+ min-height: 325px !important;
165
+ height: auto !important;
231
166
  }
232
167
 
233
- .count-down .count-text,.count-down .finish-cont {
234
- display: -webkit-box;
235
- display: -ms-flexbox;
236
- display: flex;
237
- height: 100%;
238
- -webkit-box-align: center;
239
- -ms-flex-align: center;
240
- align-items: center;
241
- -webkit-box-pack: center;
242
- -ms-flex-pack: center;
243
- justify-content: center
168
+ .ele-calendar .drag-point {
169
+ cursor: default !important;
244
170
  }
245
171
 
246
- .count-down .finish-cont {
247
- width: 100%
172
+ .ele-calendar .ani-wrap {
173
+ position: relative;
174
+ width: 100%;
175
+ min-height: 325px !important;
176
+ height: auto !important;
177
+ padding: 22px 0;
248
178
  }
249
179
 
250
- .count-down .count-flip {
251
- display: -webkit-box;
252
- display: -ms-flexbox;
180
+ .ele-calendar .ani-wrap .can-wrap .can-top {
253
181
  display: flex;
254
- height: 100%;
255
- -webkit-box-align: center;
256
- -ms-flex-align: center;
257
- align-items: center;
258
- -webkit-box-pack: center;
259
- -ms-flex-pack: center;
260
- justify-content: center
182
+ justify-content: space-between;
183
+ align-items: flex-end;
184
+ line-height: 1;
185
+ padding: 0 47px 20px;
261
186
  }
262
187
 
263
- .count-down .count-flip .numscroll {
264
- -webkit-animation: numscroll .4s ease-in-out;
265
- animation: numscroll .4s ease-in-out;
266
- -webkit-animation-fill-mode: both;
267
- animation-fill-mode: both
188
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
189
+ font-size: 25px;
190
+ padding-bottom: 4px;
268
191
  }
269
192
 
270
- .count-down .count-flip .numscroll .curr-num {
271
- -webkit-transition: all .3s ease-in-out;
272
- transition: all .3s ease-in-out;
273
- opacity: .6;
274
- -webkit-transform: scale(.5)!important;
275
- transform: scale(.5)!important
193
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
194
+ font-size: 25px;
276
195
  }
277
196
 
278
- @-webkit-keyframes numscroll {
279
- 0% {
280
- -webkit-transform: translateZ(0);
281
- transform: translateZ(0)
282
- }
283
-
284
- to {
285
- -webkit-transform: translate3d(0,100%,0);
286
- transform: translate3d(0,100%,0)
287
- }
197
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
198
+ position: relative;
199
+ top: 2px;
200
+ font-size: 57px;
288
201
  }
289
202
 
290
- @keyframes numscroll {
291
- 0% {
292
- -webkit-transform: translateZ(0);
293
- transform: translateZ(0)
294
- }
203
+ .ele-calendar .ani-wrap .can-wrap .can-main {
204
+ padding: 0 23px;
205
+ }
295
206
 
296
- to {
297
- -webkit-transform: translate3d(0,100%,0);
298
- transform: translate3d(0,100%,0)
299
- }
207
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
208
+ display: flex;
209
+ justify-content: flex-start;
210
+ height: 25px;
211
+ line-height: 25px;
212
+ padding: 0 10px;
213
+ border-radius: 13px;
300
214
  }
301
215
 
302
- .count-down .count-flip .c-com {
303
- min-width: 50px;
304
- height: auto;
305
- margin: 6px;
306
- padding: 5px 0 6px;
307
- background-color: #111
216
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-week span {
217
+ width: 14.2%;
218
+ text-align: center;
219
+ color: #fff;
220
+ font-size: 12px;
308
221
  }
309
222
 
310
- .count-down .count-flip .c-com .flex-wrap {
311
- display: -webkit-box;
312
- display: -ms-flexbox;
313
- display: flex;
314
- position: relative;
315
- width: 100%;
316
- height: 100%;
317
- -webkit-box-align: center;
318
- -ms-flex-align: center;
319
- align-items: center
223
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul {
224
+ font-size: 0;
225
+ padding: 5px 10px 0;
226
+ text-align: left;
320
227
  }
321
228
 
322
- .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
323
- line-height: 27px
229
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li {
230
+ position: relative;
231
+ display: inline-block;
232
+ height: 25px;
233
+ text-align: center;
234
+ margin-top: 8px;
324
235
  }
325
236
 
326
- .count-down .count-flip .c-com .flex-wrap .next-num {
327
- position: absolute;
328
- top: -100%
237
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active .iconfont {
238
+ display: block;
329
239
  }
330
240
 
331
- .count-down .count-flip .c-com .flex-wrap .curr-num {
332
- -webkit-transform: scale(1);
333
- transform: scale(1)
241
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active span {
242
+ color: #fff !important;
334
243
  }
335
244
 
336
- .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 {
337
- display: none!important
245
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
246
+ animation: jumpheart 0.8s ease infinite alternate;
338
247
  }
339
248
 
340
- .c-wrap {
341
- width: 100%;
342
- height: 100%;
343
- overflow: hidden;
344
- font-size: 0
249
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
250
+ display: none;
251
+ font-size: 26px;
345
252
  }
346
253
 
347
- .c-wrap.c-day-wrap {
348
- text-align: center
254
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li span {
255
+ position: absolute;
256
+ left: 50%;
257
+ top: 50%;
258
+ z-index: 1;
259
+ color: #666;
260
+ font-size: 13px;
261
+ transform: translate(-50%, -52%);
349
262
  }
350
263
 
351
- .c-wrap.c-day-wrap .c-num {
352
- width: auto
264
+ .ele-calendar .bottom-center,
265
+ .ele-calendar .left-center,
266
+ .ele-calendar .right-center,
267
+ .ele-calendar .top-center {
268
+ display: none !important;
353
269
  }
354
270
 
355
- .c-wrap .c-num {
356
- display: inline-block;
357
- width: 50%;
358
- overflow: hidden;
359
- font-size: 20px;
360
- color: #999
271
+ .ele-calendar .ani-wrap .can-wrap2 {
272
+ padding: 21px 23px 0
361
273
  }
362
274
 
363
- .c-wrap .c-left .flex-wrap {
364
- display: -webkit-box;
365
- display: -ms-flexbox;
366
- display: flex;
367
- -webkit-box-pack: end;
368
- -ms-flex-pack: end;
369
- justify-content: flex-end
370
- }
371
-
372
- .c-wrap .c-text {
373
- display: -webkit-box;
374
- display: -ms-flexbox;
375
- display: flex;
376
- width: 100%;
377
- font-size: 12px;
378
- -webkit-box-pack: center;
379
- -ms-flex-pack: center;
380
- justify-content: center;
381
- -webkit-box-align: center;
382
- -ms-flex-align: center;
383
- align-items: center;
384
- white-space: nowrap
385
- }
386
-
387
- .element-video {
388
- position: absolute;
389
- overflow: hidden;
390
- background-color: transparent;
391
- }
392
-
393
- .element-video .ani-wrap, .element-video img {
394
- display: block;
395
- width: 100%;
396
- height: 100%;
397
- }
398
-
399
- .video-container {
400
- width: 100%;
401
- height: 100%;
402
- }
403
-
404
- .video-container iframe {
405
- width: 100%;
406
- height: 100%;
407
- border: none;
408
- }
409
-
410
- .video-cover {
411
- position: relative;
412
- width: 100%;
413
- height: 100%;
414
- background-size: cover;
415
- background-position: center;
416
- cursor: pointer;
417
- }
418
-
419
- .video-cover .play-btn {
420
- position: absolute;
421
- left: 50%;
422
- top: 50%;
423
- transform: translate(-50%, -50%);
424
- width: 50px;
425
- height: 50px;
426
- opacity: 0.8;
427
- transition: opacity 0.2s;
428
- }
429
-
430
- .video-cover:hover .play-btn {
431
- opacity: 1;
432
- }.ele-shape {
433
- position: absolute;
434
- overflow: hidden;
435
- }
436
-
437
- .ani-wrap {
438
- width: 100%;
439
- height: 100%;
440
- box-sizing: border-box;
441
- }
442
-
443
- .e-shape {
444
- width: 100%;
445
- height: 100%;
446
- }
447
-
448
- .svg-container :deep(svg) {
449
- width: 100%;
450
- height: 100%;
451
- display: block;
452
- }
453
-
454
- .svg-container {
455
- width: 100%;
456
- height: 100%;
457
- display: block;
458
- }
459
-
460
-
461
- .svg-loading,
462
- .svg-error {
463
- display: flex;
464
- align-items: center;
465
- justify-content: center;
466
- width: 100%;
467
- height: 100%;
468
- background: rgba(0,0,0,0.05);
469
- }
470
-
471
- .ele-shape .svg-container svg {
472
- width: 100%;
473
- height: 100%;
474
- overflow: visible;
475
- }
476
- @keyframes jumpheart {
477
- to {
478
- -webkit-transform: scale(1.2);
479
- transform: scale(1.2)
480
- }
481
- }
482
- .ele-calendar {
483
- position: relative;
484
- width: 325px !important;
485
- min-height: 325px !important;
486
- height: auto !important;
487
- }
488
-
489
- .ele-calendar .drag-point {
490
- cursor: default !important;
491
- }
492
-
493
- .ele-calendar .ani-wrap {
494
- position: relative;
495
- width: 100%;
496
- min-height: 325px !important;
497
- height: auto !important;
498
- padding: 22px 0;
499
- }
500
-
501
- .ele-calendar .ani-wrap .can-wrap .can-top {
502
- display: flex;
503
- justify-content: space-between;
504
- align-items: flex-end;
505
- line-height: 1;
506
- padding: 0 47px 20px;
507
- }
508
-
509
- .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
510
- font-size: 25px;
511
- padding-bottom: 4px;
512
- }
513
-
514
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
515
- font-size: 25px;
516
- }
517
-
518
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
519
- position: relative;
520
- top: 2px;
521
- font-size: 57px;
522
- }
523
-
524
- .ele-calendar .ani-wrap .can-wrap .can-main {
525
- padding: 0 23px;
526
- }
527
-
528
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
529
- display: flex;
530
- justify-content: flex-start;
531
- height: 25px;
532
- line-height: 25px;
533
- padding: 0 10px;
534
- border-radius: 13px;
535
- }
536
-
537
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week span {
538
- width: 14.2%;
539
- text-align: center;
540
- color: #fff;
541
- font-size: 12px;
542
- }
543
-
544
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul {
545
- font-size: 0;
546
- padding: 5px 10px 0;
547
- text-align: left;
548
- }
549
-
550
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li {
551
- position: relative;
552
- display: inline-block;
553
- height: 25px;
554
- text-align: center;
555
- margin-top: 8px;
556
- }
557
-
558
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active .iconfont {
559
- display: block;
560
- }
561
-
562
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active span {
563
- color: #fff !important;
564
- }
565
-
566
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
567
- animation: jumpheart 0.8s ease infinite alternate;
568
- }
569
-
570
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
571
- display: none;
572
- font-size: 26px;
573
- }
574
-
575
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li span {
576
- position: absolute;
577
- left: 50%;
578
- top: 50%;
579
- z-index: 1;
580
- color: #666;
581
- font-size: 13px;
582
- transform: translate(-50%, -52%);
583
- }
584
-
585
- .ele-calendar .bottom-center,
586
- .ele-calendar .left-center,
587
- .ele-calendar .right-center,
588
- .ele-calendar .top-center {
589
- display: none !important;
590
- }
591
-
592
- .ele-calendar .ani-wrap .can-wrap2 {
593
- padding: 21px 23px 0
594
- }
595
-
596
- .ele-calendar .ani-wrap .can-wrap2 .can-top {
275
+ .ele-calendar .ani-wrap .can-wrap2 .can-top {
597
276
  display: -webkit-box;
598
277
  display: -ms-flexbox;
599
278
  display: flex;
@@ -787,33 +466,517 @@
787
466
  }
788
467
  }
789
468
 
790
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li .iconfont {
791
- display: none;
792
- font-size: 26px
793
- }
469
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li .iconfont {
470
+ display: none;
471
+ font-size: 26px
472
+ }
473
+
474
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li span {
475
+ position: absolute;
476
+ left: 50%;
477
+ top: 50%;
478
+ z-index: 1;
479
+ color: #666;
480
+ font-size: 13px;
481
+ -webkit-transform: translate(-50%,-52%);
482
+ transform: translate(-50%,-52%)
483
+ }
484
+
485
+ .ele-calendar .bottom-center,.ele-calendar .left-center,.ele-calendar .right-center,.ele-calendar .top-center {
486
+ display: none!important
487
+ }
488
+ .icon-tuoyuanxing:before {
489
+ content: "\E6A7";
490
+ }
491
+ .icon-zan1:before {
492
+ content: "\E66D";
493
+ }
494
+ .icon-xingzhuangjiehe:before {
495
+ content: "\E6A6";
496
+ }.ele-shape {
497
+ position: absolute;
498
+ overflow: hidden;
499
+ }
500
+
501
+ .ani-wrap {
502
+ width: 100%;
503
+ height: 100%;
504
+ box-sizing: border-box;
505
+ }
506
+
507
+ .e-shape {
508
+ width: 100%;
509
+ height: 100%;
510
+ }
511
+
512
+ .svg-container :deep(svg) {
513
+ width: 100%;
514
+ height: 100%;
515
+ display: block;
516
+ }
517
+
518
+ .svg-container {
519
+ width: 100%;
520
+ height: 100%;
521
+ display: block;
522
+ }
523
+
524
+
525
+ .svg-loading,
526
+ .svg-error {
527
+ display: flex;
528
+ align-items: center;
529
+ justify-content: center;
530
+ width: 100%;
531
+ height: 100%;
532
+ background: rgba(0,0,0,0.05);
533
+ }
534
+
535
+ .ele-shape .svg-container svg {
536
+ width: 100%;
537
+ height: 100%;
538
+ overflow: visible;
539
+ }
540
+ .element-video {
541
+ position: absolute;
542
+ overflow: hidden;
543
+ background-color: transparent;
544
+ }
545
+
546
+ .element-video .ani-wrap, .element-video img {
547
+ display: block;
548
+ width: 100%;
549
+ height: 100%;
550
+ }
551
+
552
+ .video-container {
553
+ width: 100%;
554
+ height: 100%;
555
+ }
556
+
557
+ .video-container iframe {
558
+ width: 100%;
559
+ height: 100%;
560
+ border: none;
561
+ }
562
+
563
+ .video-cover {
564
+ position: relative;
565
+ width: 100%;
566
+ height: 100%;
567
+ background-size: cover;
568
+ background-position: center;
569
+ cursor: pointer;
570
+ }
571
+
572
+ .video-cover .play-btn {
573
+ position: absolute;
574
+ left: 50%;
575
+ top: 50%;
576
+ transform: translate(-50%, -50%);
577
+ width: 50px;
578
+ height: 50px;
579
+ opacity: 0.8;
580
+ transition: opacity 0.2s;
581
+ }
582
+
583
+ .video-cover:hover .play-btn {
584
+ opacity: 1;
585
+ }.ele-effect {
586
+ will-change: transform;
587
+ }
588
+
589
+ .ele-effect .effect-wrap {
590
+ position: relative;
591
+ width: 100%;
592
+ height: 100%;
593
+ }
594
+
595
+ .particle {
596
+ position: absolute;
597
+ background-repeat: no-repeat;
598
+ background-size: contain;
599
+ animation-name: falling;
600
+ animation-timing-function: linear;
601
+ animation-iteration-count: infinite;
602
+ will-change: transform;
603
+ }
604
+
605
+ @keyframes falling {
606
+ 0% {
607
+ transform: translateY(0) rotate(0deg);
608
+ opacity: 1;
609
+ }
610
+ 80% {
611
+ opacity: 0.8;
612
+ }
613
+ 100% {
614
+ transform: translateY(100vh) rotate(360deg);
615
+ opacity: 0;
616
+ }
617
+ }
618
+ .ele-lottie .ele-lotwrap {
619
+ overflow: hidden
620
+ }
621
+
622
+ .ele-effect .effect-wrap {
623
+ position: relative;
624
+ overflow: hidden;
625
+ width: 100%;
626
+ height: 100%
627
+ }
628
+
629
+ .ele-effect .e-small {
630
+ position: absolute;
631
+ width: 24px;
632
+ height: 24px;
633
+ background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
634
+ background-size: cover;
635
+ background-repeat: no-repeat;
636
+ -webkit-transform-origin: center;
637
+ transform-origin: center;
638
+ -webkit-animation: snow 5s linear infinite;
639
+ animation: snow 5s linear infinite
640
+ }.element-ditu .ani-wrap {
641
+ width: 100%;
642
+ height: 100%;
643
+ overflow: hidden
644
+ }
645
+
646
+ .element-ditu .map {
647
+ width: 100%;
648
+ height: 100%
649
+ }
650
+
651
+ .element-ditu .map .el-button {
652
+ width: 100%;
653
+ height: 100%;
654
+ display: -webkit-box;
655
+ display: -ms-flexbox;
656
+ display: flex;
657
+ -webkit-box-align: center;
658
+ -ms-flex-align: center;
659
+ align-items: center;
660
+ padding: 0;
661
+ -webkit-box-pack: center;
662
+ -ms-flex-pack: center;
663
+ justify-content: center;
664
+ background: inherit;
665
+ color: inherit;
666
+ border: none
667
+ }
668
+
669
+ .element-ditu .center-map {
670
+ width: 100%;
671
+ height: 100%;
672
+ background: #fff
673
+ }
674
+
675
+ .element-ditu .mask-map {
676
+ position: absolute;
677
+ width: 100%;
678
+ height: 100%;
679
+ top: 0
680
+ }
681
+ .map-iframe {
682
+ width: 100%;
683
+ height: 100%;
684
+ }.count-down .drag-point {
685
+ cursor: default!important
686
+ }
687
+
688
+ .count-down .ani-wrap {
689
+ width: 100%;
690
+ height: 100%
691
+ }
692
+
693
+ .count-down .count-text,.count-down .finish-cont {
694
+ display: -webkit-box;
695
+ display: -ms-flexbox;
696
+ display: flex;
697
+ height: 100%;
698
+ -webkit-box-align: center;
699
+ -ms-flex-align: center;
700
+ align-items: center;
701
+ -webkit-box-pack: center;
702
+ -ms-flex-pack: center;
703
+ justify-content: center
704
+ }
705
+
706
+ .count-down .finish-cont {
707
+ width: 100%
708
+ }
709
+
710
+ .count-down .count-flip {
711
+ display: -webkit-box;
712
+ display: -ms-flexbox;
713
+ display: flex;
714
+ height: 100%;
715
+ -webkit-box-align: center;
716
+ -ms-flex-align: center;
717
+ align-items: center;
718
+ -webkit-box-pack: center;
719
+ -ms-flex-pack: center;
720
+ justify-content: center
721
+ }
722
+
723
+ .count-down .count-flip .numscroll {
724
+ -webkit-animation: numscroll .4s ease-in-out;
725
+ animation: numscroll .4s ease-in-out;
726
+ -webkit-animation-fill-mode: both;
727
+ animation-fill-mode: both
728
+ }
729
+
730
+ .count-down .count-flip .numscroll .curr-num {
731
+ -webkit-transition: all .3s ease-in-out;
732
+ transition: all .3s ease-in-out;
733
+ opacity: .6;
734
+ -webkit-transform: scale(.5)!important;
735
+ transform: scale(.5)!important
736
+ }
737
+
738
+ @-webkit-keyframes numscroll {
739
+ 0% {
740
+ -webkit-transform: translateZ(0);
741
+ transform: translateZ(0)
742
+ }
743
+
744
+ to {
745
+ -webkit-transform: translate3d(0,100%,0);
746
+ transform: translate3d(0,100%,0)
747
+ }
748
+ }
749
+
750
+ @keyframes numscroll {
751
+ 0% {
752
+ -webkit-transform: translateZ(0);
753
+ transform: translateZ(0)
754
+ }
755
+
756
+ to {
757
+ -webkit-transform: translate3d(0,100%,0);
758
+ transform: translate3d(0,100%,0)
759
+ }
760
+ }
761
+
762
+ .count-down .count-flip .c-com {
763
+ min-width: 50px;
764
+ height: auto;
765
+ margin: 6px;
766
+ padding: 5px 0 6px;
767
+ background-color: #111
768
+ }
769
+
770
+ .count-down .count-flip .c-com .flex-wrap {
771
+ display: -webkit-box;
772
+ display: -ms-flexbox;
773
+ display: flex;
774
+ position: relative;
775
+ width: 100%;
776
+ height: 100%;
777
+ -webkit-box-align: center;
778
+ -ms-flex-align: center;
779
+ align-items: center
780
+ }
781
+
782
+ .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
783
+ line-height: 27px
784
+ }
785
+
786
+ .count-down .count-flip .c-com .flex-wrap .next-num {
787
+ position: absolute;
788
+ top: -100%
789
+ }
790
+
791
+ .count-down .count-flip .c-com .flex-wrap .curr-num {
792
+ -webkit-transform: scale(1);
793
+ transform: scale(1)
794
+ }
795
+
796
+ .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 {
797
+ display: none!important
798
+ }
799
+
800
+ .c-wrap {
801
+ width: 100%;
802
+ height: 100%;
803
+ overflow: hidden;
804
+ font-size: 0
805
+ }
806
+
807
+ .c-wrap.c-day-wrap {
808
+ text-align: center
809
+ }
810
+
811
+ .c-wrap.c-day-wrap .c-num {
812
+ width: auto
813
+ }
814
+
815
+ .c-wrap .c-num {
816
+ display: inline-block;
817
+ width: 50%;
818
+ overflow: hidden;
819
+ font-size: 20px;
820
+ color: #999
821
+ }
822
+
823
+ .c-wrap .c-left .flex-wrap {
824
+ display: -webkit-box;
825
+ display: -ms-flexbox;
826
+ display: flex;
827
+ -webkit-box-pack: end;
828
+ -ms-flex-pack: end;
829
+ justify-content: flex-end
830
+ }
831
+
832
+ .c-wrap .c-text {
833
+ display: -webkit-box;
834
+ display: -ms-flexbox;
835
+ display: flex;
836
+ width: 100%;
837
+ font-size: 12px;
838
+ -webkit-box-pack: center;
839
+ -ms-flex-pack: center;
840
+ justify-content: center;
841
+ -webkit-box-align: center;
842
+ -ms-flex-align: center;
843
+ align-items: center;
844
+ white-space: nowrap
845
+ }
846
+ #audio {
847
+ position: absolute;
848
+ right: 10px;
849
+ top: 10px;
850
+ z-index: 103;
851
+ width: 30px;
852
+ height: 30px;
853
+ display: flex;
854
+ align-items: center;
855
+ }
856
+
857
+ #audio .mrotate {
858
+ animation: mrotate 5s linear infinite;
859
+ }
860
+
861
+ @keyframes mrotate {
862
+ to {
863
+ transform: rotate(1turn);
864
+ }
865
+ }
866
+
867
+ #audio .audio {
868
+ width: 100%;
869
+ height: 100%;
870
+ display: flex;
871
+ align-items: center;
872
+ justify-content: center;
873
+ color: #fff;
874
+ background: #666;
875
+ border-radius: 50%;
876
+ overflow: hidden;
877
+ cursor: pointer;
878
+ transition: all 0.3s ease;
879
+ }
880
+
881
+ #audio .audio.a-border {
882
+ border: 1px solid #fff;
883
+ }
884
+
885
+ #audio .audio .music-icon {
886
+ display: block;
887
+ width: 60%;
888
+ height: 60%;
889
+ object-fit: contain;
890
+ }
891
+
892
+ #audio .audio .iconfont {
893
+ font-size: 2opx;
894
+ line-height: 1;
895
+ }
896
+ #audio .icon-cancel {
897
+ position: absolute;
898
+ width: 100%;
899
+ height: 100%;
900
+ border-radius: 50%;
901
+ overflow: hidden;
902
+ padding: 15px 0;
903
+ }
904
+ #audio .icon-cancel .icon-h {
905
+ transform: rotate(45deg);
906
+ width: 100%;
907
+ height: 2px;
908
+ background: #fff;
909
+ }
910
+ #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
911
+ content: '';
912
+ position: absolute;
913
+ width: 100%;
914
+ height: 2px;
915
+ background: #fff;
916
+ }.call {
917
+ position: absolute;
918
+ cursor: pointer;
919
+ user-select: none;
920
+ }
921
+
922
+ .call .ani-wrap {
923
+ display: flex;
924
+ justify-content: center;
925
+ align-items: center;
926
+ width: 100%;
927
+ height: 100%;
928
+ overflow: hidden;
929
+ transition: opacity 0.2s;
930
+ }
931
+
932
+ .call .ani-wrap:hover {
933
+ opacity: 0.9;
934
+ }
935
+
936
+ .call-content {
937
+ display: flex;
938
+ align-items: center;
939
+ justify-content: center;
940
+ }
941
+
942
+ .btn-text {
943
+ margin-left: 10px;
944
+ }
945
+
794
946
 
795
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li span {
947
+ .hb-tel:before {
948
+ content: "\E642";
949
+ }
950
+ .ele-lottie .ele-lotwrap {
951
+ overflow: hidden;
952
+ }.button {
796
953
  position: absolute;
797
- left: 50%;
798
- top: 50%;
799
- z-index: 1;
800
- color: #666;
801
- font-size: 13px;
802
- -webkit-transform: translate(-50%,-52%);
803
- transform: translate(-50%,-52%)
954
+ cursor: pointer;
955
+ user-select: none;
804
956
  }
805
-
806
- .ele-calendar .bottom-center,.ele-calendar .left-center,.ele-calendar .right-center,.ele-calendar .top-center {
807
- display: none!important
957
+
958
+ .button .ani-wrap {
959
+ display: flex;
960
+ justify-content: center;
961
+ align-items: center;
962
+ width: 100%;
963
+ height: 100%;
964
+ overflow: hidden;
965
+ transition: opacity 0.2s;
808
966
  }
809
- .icon-tuoyuanxing:before {
810
- content: "\E6A7";
967
+
968
+ .button .ani-wrap:hover {
969
+ opacity: 0.9;
811
970
  }
812
- .icon-zan1:before {
813
- content: "\E66D";
971
+
972
+ .button-content {
973
+ display: flex;
974
+ align-items: center;
975
+ justify-content: center;
814
976
  }
815
- .icon-xingzhuangjiehe:before {
816
- content: "\E6A6";
977
+
978
+ .btn-text {
979
+ margin-left: 10px;
817
980
  }/* Iconfont definition */
818
981
  .icon-danmuliebiao1:before {
819
982
  content: "\E68A";
@@ -1717,109 +1880,7 @@
1717
1880
  100% { transform: rotate(360deg); }
1718
1881
  }
1719
1882
 
1720
- .element-ditu .ani-wrap {
1721
- width: 100%;
1722
- height: 100%;
1723
- overflow: hidden
1724
- }
1725
-
1726
- .element-ditu .map {
1727
- width: 100%;
1728
- height: 100%
1729
- }
1730
-
1731
- .element-ditu .map .el-button {
1732
- width: 100%;
1733
- height: 100%;
1734
- display: -webkit-box;
1735
- display: -ms-flexbox;
1736
- display: flex;
1737
- -webkit-box-align: center;
1738
- -ms-flex-align: center;
1739
- align-items: center;
1740
- padding: 0;
1741
- -webkit-box-pack: center;
1742
- -ms-flex-pack: center;
1743
- justify-content: center;
1744
- background: inherit;
1745
- color: inherit;
1746
- border: none
1747
- }
1748
-
1749
- .element-ditu .center-map {
1750
- width: 100%;
1751
- height: 100%;
1752
- background: #fff
1753
- }
1754
-
1755
- .element-ditu .mask-map {
1756
- position: absolute;
1757
- width: 100%;
1758
- height: 100%;
1759
- top: 0
1760
- }
1761
- .map-iframe {
1762
- width: 100%;
1763
- height: 100%;
1764
- }
1765
- .ele-lottie .ele-lotwrap {
1766
- overflow: hidden;
1767
- }.ele-effect {
1768
- will-change: transform;
1769
- }
1770
-
1771
- .ele-effect .effect-wrap {
1772
- position: relative;
1773
- width: 100%;
1774
- height: 100%;
1775
- }
1776
-
1777
- .particle {
1778
- position: absolute;
1779
- background-repeat: no-repeat;
1780
- background-size: contain;
1781
- animation-name: falling;
1782
- animation-timing-function: linear;
1783
- animation-iteration-count: infinite;
1784
- will-change: transform;
1785
- }
1786
-
1787
- @keyframes falling {
1788
- 0% {
1789
- transform: translateY(0) rotate(0deg);
1790
- opacity: 1;
1791
- }
1792
- 80% {
1793
- opacity: 0.8;
1794
- }
1795
- 100% {
1796
- transform: translateY(100vh) rotate(360deg);
1797
- opacity: 0;
1798
- }
1799
- }
1800
- .ele-lottie .ele-lotwrap {
1801
- overflow: hidden
1802
- }
1803
-
1804
- .ele-effect .effect-wrap {
1805
- position: relative;
1806
- overflow: hidden;
1807
- width: 100%;
1808
- height: 100%
1809
- }
1810
-
1811
- .ele-effect .e-small {
1812
- position: absolute;
1813
- width: 24px;
1814
- height: 24px;
1815
- background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
1816
- background-size: cover;
1817
- background-repeat: no-repeat;
1818
- -webkit-transform-origin: center;
1819
- transform-origin: center;
1820
- -webkit-animation: snow 5s linear infinite;
1821
- animation: snow 5s linear infinite
1822
- }body, html {
1883
+ body, html {
1823
1884
  width: 100%;
1824
1885
  height: 100%;
1825
1886
  }
@@ -8280,62 +8341,157 @@ to {
8280
8341
  }
8281
8342
  }
8282
8343
 
8283
- .p-rightSlide {
8284
- -webkit-animation: rightSlide .7s ease both;
8285
- animation: rightSlide .7s ease both
8344
+ .p-rightSlide {
8345
+ -webkit-animation: rightSlide .7s ease both;
8346
+ animation: rightSlide .7s ease both
8347
+ }
8348
+
8349
+ @-webkit-keyframes rightSlide {
8350
+ 0% {
8351
+ -webkit-transform: translateX(100%);
8352
+ transform: translateX(100%)
8353
+ }
8354
+
8355
+ to {
8356
+ -webkit-transform: translateX(0);
8357
+ transform: translateX(0)
8358
+ }
8359
+ }
8360
+
8361
+ @keyframes rightSlide {
8362
+ 0% {
8363
+ -webkit-transform: translateX(100%);
8364
+ transform: translateX(100%)
8365
+ }
8366
+
8367
+ to {
8368
+ -webkit-transform: translateX(0);
8369
+ transform: translateX(0)
8370
+ }
8371
+ }
8372
+ #page-list .tip-cover {
8373
+ position: fixed;
8374
+ left: 0;
8375
+ top: 0;
8376
+ width: 100%;
8377
+ height: 100%;
8378
+ display: -ms-flexbox;
8379
+ display: flex;
8380
+ -ms-flex-align: center;
8381
+ align-items: center;
8382
+ -ms-flex-pack: center;
8383
+ justify-content: center;
8384
+ z-index: 999;
8385
+ background-color: rgba(0,0,0,.7)
8386
+ }
8387
+
8388
+ #page-list .tip-cover .tip {
8389
+ width: 80%;
8390
+ max-width: 250px;
8391
+ padding: 10px;
8392
+ border-radius: 5px;
8393
+ background-color: #fff
8394
+ }
8395
+
8396
+ #page-list .tip-cover .tip-btn {
8397
+ display: block;
8398
+ margin: 25px auto;
8399
+ width: 120px;
8400
+ height: 30px;
8401
+ color: #fff;
8402
+ border-radius: 4px;
8403
+ text-align: center;
8404
+ font-size: 14px;
8405
+ line-height: 30px;
8406
+ background: #ed5566
8407
+ }
8408
+
8409
+ #page-list .tip-cover .tip-content {
8410
+ font-size: 14px;
8411
+ padding-top: 30px;
8412
+ }
8413
+
8414
+ .tip-cover {
8415
+ position: fixed;
8416
+ left: 0;
8417
+ top: 0;
8418
+ width: 100%;
8419
+ height: 100%;
8420
+ display: -ms-flexbox;
8421
+ display: flex;
8422
+ -ms-flex-align: center;
8423
+ align-items: center;
8424
+ -ms-flex-pack: center;
8425
+ justify-content: center;
8426
+ z-index: 999;
8427
+ background-color: rgba(0,0,0,.7)
8428
+ }
8429
+
8430
+ .tip-cover .tip {
8431
+ width: 80%;
8432
+ max-width: 250px;
8433
+ padding: 5px;
8434
+ border-radius: 3px;
8435
+ background-color: #fff
8436
+ }
8437
+
8438
+ .tip-cover .tip-btn {
8439
+ display: block;
8440
+ margin: 13px auto;
8441
+ width: 64px;
8442
+ height: 20px;
8443
+ color: #fff;
8444
+ border-radius: 4px;
8445
+ text-align: center;
8446
+ font-size: 14px;
8447
+ line-height: 20px;
8448
+ background: #ed5566;
8449
+ } .form-submit {
8450
+ cursor: pointer;
8451
+ transition: all 0.2s;
8452
+ outline: none;
8453
+ border: none;
8454
+ }
8455
+
8456
+ .form-submit:hover {
8457
+ opacity: 0.9;
8458
+ transform: translateY(-1px);
8286
8459
  }
8287
8460
 
8288
- @-webkit-keyframes rightSlide {
8289
- 0% {
8290
- -webkit-transform: translateX(100%);
8291
- transform: translateX(100%)
8292
- }
8293
-
8294
- to {
8295
- -webkit-transform: translateX(0);
8296
- transform: translateX(0)
8297
- }
8461
+ .form-submit:active {
8462
+ opacity: 0.8;
8463
+ transform: translateY(0);
8298
8464
  }
8299
8465
 
8300
- @keyframes rightSlide {
8301
- 0% {
8302
- -webkit-transform: translateX(100%);
8303
- transform: translateX(100%)
8304
- }
8305
-
8306
- to {
8307
- -webkit-transform: translateX(0);
8308
- transform: translateX(0)
8309
- }
8466
+ .form-submit:disabled {
8467
+ opacity: 0.6;
8468
+ cursor: not-allowed;
8469
+ transform: none !important;
8310
8470
  }
8311
- .button {
8312
- position: absolute;
8313
- cursor: pointer;
8314
- user-select: none;
8471
+
8472
+ .f-submit {
8473
+ position: relative;
8474
+ display: block
8315
8475
  }
8316
-
8317
- .button .ani-wrap {
8318
- display: flex;
8319
- justify-content: center;
8320
- align-items: center;
8476
+
8477
+ .f-submit .ani-wrap {
8321
8478
  width: 100%;
8322
8479
  height: 100%;
8480
+ padding: 10px;
8323
8481
  overflow: hidden;
8324
- transition: opacity 0.2s;
8325
- }
8326
-
8327
- .button .ani-wrap:hover {
8328
- opacity: 0.9;
8482
+ position: relative
8329
8483
  }
8330
8484
 
8331
- .button-content {
8332
- display: flex;
8333
- align-items: center;
8334
- justify-content: center;
8485
+ .f-submit .f-ovh {
8486
+ position: absolute;
8487
+ left: 50%;
8488
+ top: 50%;
8489
+ transform: translate(-50%,-50%)
8335
8490
  }
8336
8491
 
8337
- .btn-text {
8338
- margin-left: 10px;
8492
+ .form-submit:disabled {
8493
+ opacity: 0.7;
8494
+ cursor: not-allowed;
8339
8495
  }.form-input {
8340
8496
  position: absolute;
8341
8497
  }
@@ -8386,86 +8542,7 @@ to {
8386
8542
  }
8387
8543
  .dynamic-placeholder-input:-ms-input-placeholder {
8388
8544
  color: var(--placeholder-color, #999);
8389
- }.call {
8390
- position: absolute;
8391
- cursor: pointer;
8392
- user-select: none;
8393
- }
8394
-
8395
- .call .ani-wrap {
8396
- display: flex;
8397
- justify-content: center;
8398
- align-items: center;
8399
- width: 100%;
8400
- height: 100%;
8401
- overflow: hidden;
8402
- transition: opacity 0.2s;
8403
- }
8404
-
8405
- .call .ani-wrap:hover {
8406
- opacity: 0.9;
8407
- }
8408
-
8409
- .call-content {
8410
- display: flex;
8411
- align-items: center;
8412
- justify-content: center;
8413
- }
8414
-
8415
- .btn-text {
8416
- margin-left: 10px;
8417
- }
8418
-
8419
-
8420
- .hb-tel:before {
8421
- content: "\E642";
8422
- }.form-submit {
8423
- cursor: pointer;
8424
- transition: all 0.2s;
8425
- outline: none;
8426
- border: none;
8427
- }
8428
-
8429
- .form-submit:hover {
8430
- opacity: 0.9;
8431
- transform: translateY(-1px);
8432
- }
8433
-
8434
- .form-submit:active {
8435
- opacity: 0.8;
8436
- transform: translateY(0);
8437
- }
8438
-
8439
- .form-submit:disabled {
8440
- opacity: 0.6;
8441
- cursor: not-allowed;
8442
- transform: none !important;
8443
- }
8444
-
8445
- .f-submit {
8446
- position: relative;
8447
- display: block
8448
- }
8449
-
8450
- .f-submit .ani-wrap {
8451
- width: 100%;
8452
- height: 100%;
8453
- padding: 10px;
8454
- overflow: hidden;
8455
- position: relative
8456
- }
8457
-
8458
- .f-submit .f-ovh {
8459
- position: absolute;
8460
- left: 50%;
8461
- top: 50%;
8462
- transform: translate(-50%,-50%)
8463
- }
8464
-
8465
- .form-submit:disabled {
8466
- opacity: 0.7;
8467
- cursor: not-allowed;
8468
- }/* .ele-form {
8545
+ }/* .ele-form {
8469
8546
  position: absolute;
8470
8547
  user-select: none;
8471
8548
  } */
@@ -8563,84 +8640,7 @@ cursor: not-allowed;
8563
8640
  width: 100%;
8564
8641
  height: 100%;
8565
8642
  z-index: 1000;
8566
- }#page-list .tip-cover {
8567
- position: fixed;
8568
- left: 0;
8569
- top: 0;
8570
- width: 100%;
8571
- height: 100%;
8572
- display: -ms-flexbox;
8573
- display: flex;
8574
- -ms-flex-align: center;
8575
- align-items: center;
8576
- -ms-flex-pack: center;
8577
- justify-content: center;
8578
- z-index: 999;
8579
- background-color: rgba(0,0,0,.7)
8580
- }
8581
-
8582
- #page-list .tip-cover .tip {
8583
- width: 80%;
8584
- max-width: 250px;
8585
- padding: 10px;
8586
- border-radius: 5px;
8587
- background-color: #fff
8588
- }
8589
-
8590
- #page-list .tip-cover .tip-btn {
8591
- display: block;
8592
- margin: 25px auto;
8593
- width: 120px;
8594
- height: 30px;
8595
- color: #fff;
8596
- border-radius: 4px;
8597
- text-align: center;
8598
- font-size: 14px;
8599
- line-height: 30px;
8600
- background: #ed5566
8601
- }
8602
-
8603
- #page-list .tip-cover .tip-content {
8604
- font-size: 14px;
8605
- padding-top: 30px;
8606
- }
8607
-
8608
- .tip-cover {
8609
- position: fixed;
8610
- left: 0;
8611
- top: 0;
8612
- width: 100%;
8613
- height: 100%;
8614
- display: -ms-flexbox;
8615
- display: flex;
8616
- -ms-flex-align: center;
8617
- align-items: center;
8618
- -ms-flex-pack: center;
8619
- justify-content: center;
8620
- z-index: 999;
8621
- background-color: rgba(0,0,0,.7)
8622
- }
8623
-
8624
- .tip-cover .tip {
8625
- width: 80%;
8626
- max-width: 250px;
8627
- padding: 5px;
8628
- border-radius: 3px;
8629
- background-color: #fff
8630
- }
8631
-
8632
- .tip-cover .tip-btn {
8633
- display: block;
8634
- margin: 13px auto;
8635
- width: 64px;
8636
- height: 20px;
8637
- color: #fff;
8638
- border-radius: 4px;
8639
- text-align: center;
8640
- font-size: 14px;
8641
- line-height: 20px;
8642
- background: #ed5566;
8643
- } /* .ele-form {
8643
+ }/* .ele-form {
8644
8644
  position: absolute;
8645
8645
  user-select: none;
8646
8646
  }
@@ -9214,31 +9214,33 @@ cursor: not-allowed;
9214
9214
  color: #F44336; /* 失败的红色 */
9215
9215
  }
9216
9216
 
9217
- .global.tel {
9217
+ .global.video {
9218
9218
  width: 35px;
9219
9219
  height: 55px;
9220
9220
  border-radius: 50%;
9221
9221
  text-align: center;
9222
- margin-bottom: 15px;
9222
+ margin-bottom: 5px;
9223
9223
  border: 2px solid #fff;
9224
9224
  cursor: pointer;
9225
9225
  }
9226
- .icon-dianhua:before { content: "\E60E"; }
9226
+ .icon-shipin2:before { content: "\E611"; }
9227
9227
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
9228
- .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
9229
- .global.receipt {
9228
+ .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
9229
+ }
9230
+
9231
+ .global.tel {
9230
9232
  width: 35px;
9231
9233
  height: 55px;
9232
9234
  border-radius: 50%;
9233
9235
  text-align: center;
9234
- margin-bottom: 5px;
9236
+ margin-bottom: 15px;
9235
9237
  border: 2px solid #fff;
9236
9238
  cursor: pointer;
9237
9239
  }
9238
- .icon-liuyan:before { content: "\E636"; }
9240
+ .icon-dianhua:before { content: "\E60E"; }
9239
9241
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
9240
- .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }
9241
- .global.video {
9242
+ .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
9243
+ .global.map {
9242
9244
  width: 35px;
9243
9245
  height: 55px;
9244
9246
  border-radius: 50%;
@@ -9247,12 +9249,10 @@ cursor: not-allowed;
9247
9249
  border: 2px solid #fff;
9248
9250
  cursor: pointer;
9249
9251
  }
9250
- .icon-shipin2:before { content: "\E611"; }
9252
+ .icon-daohang1:before { content: "\E612"; }
9251
9253
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
9252
- .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
9253
- }
9254
-
9255
- .global.map {
9254
+ .global.map > span { font-size: 10px; line-height: 20px; display: block;}
9255
+ .global.receipt {
9256
9256
  width: 35px;
9257
9257
  height: 55px;
9258
9258
  border-radius: 50%;
@@ -9261,6 +9261,6 @@ cursor: not-allowed;
9261
9261
  border: 2px solid #fff;
9262
9262
  cursor: pointer;
9263
9263
  }
9264
- .icon-daohang1:before { content: "\E612"; }
9264
+ .icon-liuyan:before { content: "\E636"; }
9265
9265
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
9266
- .global.map > span { font-size: 10px; line-height: 20px; display: block;}
9266
+ .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }