unika-components 1.1.97 → 1.1.99

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,198 +8,387 @@
8
8
  max-height: 100%;
9
9
  width: 100%;
10
10
  }
11
- .ele-img {
12
- position: absolute;
13
- overflow: hidden;
14
- }
15
-
16
- .ele-img .ani-wrap {
17
- width: 100%;
18
- height: 100%;
19
- }
20
-
21
- .ele-img .ele-image {
22
- position: relative;
23
- display: block;
24
- }
25
-
26
- .ele-img .rotate-wrap {
27
- position: absolute;
28
- left: 0;
29
- right: 0;
30
- top: 0;
31
- bottom: 0;
32
- }
33
-
34
- .ele-img .ele-img-bg,
35
- .ele-img .rotate-wrap .img-wrap {
36
- width: 100%;
37
- height: 100%;
38
- overflow: hidden;
39
- }
40
-
41
- .ele-img .ele-bg-wrap {
42
- width: 100%;
43
- height: 100%;
44
- background-size: cover;
45
- background-position: 50% 50%;
46
- background-repeat: no-repeat;
47
- background-clip: border-box;
48
- }
49
-
50
- /* 动画关键帧 */
51
- @keyframes zoomIn {
52
- from {
53
- opacity: 0;
54
- transform: scale(0.5);
55
- }
56
- to {
57
- opacity: 1;
58
- transform: scale(1);
59
- }
60
- }#audio {
11
+ .call {
61
12
  position: absolute;
62
- right: 10px;
63
- top: 10px;
64
- z-index: 103;
65
- width: 30px;
66
- height: 30px;
13
+ cursor: pointer;
14
+ user-select: none;
15
+ }
16
+
17
+ .call .ani-wrap {
18
+ display: flex;
19
+ justify-content: center;
20
+ align-items: center;
21
+ width: 100%;
22
+ height: 100%;
23
+ overflow: hidden;
24
+ transition: opacity 0.2s;
25
+ }
26
+
27
+ .call .ani-wrap:hover {
28
+ opacity: 0.9;
29
+ }
30
+
31
+ .call-content {
67
32
  display: flex;
68
33
  align-items: center;
34
+ justify-content: center;
69
35
  }
70
36
 
71
- #audio .mrotate {
72
- animation: mrotate 5s linear infinite;
37
+ .btn-text {
38
+ margin-left: 10px;
73
39
  }
74
40
 
75
- @keyframes mrotate {
41
+
42
+ .hb-tel:before {
43
+ content: "\E642";
44
+ }
45
+ @keyframes jumpheart {
76
46
  to {
77
- transform: rotate(1turn);
47
+ -webkit-transform: scale(1.2);
48
+ transform: scale(1.2)
78
49
  }
79
50
  }
51
+ .ele-calendar {
52
+ position: relative;
53
+ width: 325px !important;
54
+ min-height: 325px !important;
55
+ height: auto !important;
56
+ }
80
57
 
81
- #audio .audio {
58
+ .ele-calendar .drag-point {
59
+ cursor: default !important;
60
+ }
61
+
62
+ .ele-calendar .ani-wrap {
63
+ position: relative;
82
64
  width: 100%;
83
- height: 100%;
65
+ min-height: 325px !important;
66
+ height: auto !important;
67
+ padding: 22px 0;
68
+ }
69
+
70
+ .ele-calendar .ani-wrap .can-wrap .can-top {
84
71
  display: flex;
85
- align-items: center;
86
- justify-content: center;
87
- color: #fff;
88
- background: #666;
89
- border-radius: 50%;
90
- overflow: hidden;
91
- cursor: pointer;
92
- transition: all 0.3s ease;
72
+ justify-content: space-between;
73
+ align-items: flex-end;
74
+ line-height: 1;
75
+ padding: 0 47px 20px;
93
76
  }
94
77
 
95
- #audio .audio.a-border {
96
- border: 1px solid #fff;
78
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
79
+ font-size: 25px;
80
+ padding-bottom: 4px;
97
81
  }
98
82
 
99
- #audio .audio .music-icon {
100
- display: block;
101
- width: 60%;
102
- height: 60%;
103
- object-fit: contain;
83
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
84
+ font-size: 25px;
104
85
  }
105
86
 
106
- #audio .audio .iconfont {
107
- font-size: 2opx;
108
- line-height: 1;
87
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
88
+ position: relative;
89
+ top: 2px;
90
+ font-size: 57px;
109
91
  }
110
- #audio .icon-cancel {
111
- position: absolute;
112
- width: 100%;
113
- height: 100%;
114
- border-radius: 50%;
115
- overflow: hidden;
116
- padding: 15px 0;
92
+
93
+ .ele-calendar .ani-wrap .can-wrap .can-main {
94
+ padding: 0 23px;
117
95
  }
118
- #audio .icon-cancel .icon-h {
119
- transform: rotate(45deg);
120
- width: 100%;
121
- height: 2px;
122
- background: #fff;
123
- }
124
- #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
125
- content: '';
126
- position: absolute;
127
- width: 100%;
128
- height: 2px;
129
- background: #fff;
130
- }
131
- .ele-text {
132
- position: relative;
96
+
97
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
98
+ display: flex;
99
+ justify-content: flex-start;
100
+ height: 25px;
101
+ line-height: 25px;
102
+ padding: 0 10px;
103
+ border-radius: 13px;
133
104
  }
134
105
 
135
- .ele-text .ani-wrap {
136
- width: 100%;
137
- height: 100%;
106
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-week span {
107
+ width: 14.2%;
108
+ text-align: center;
109
+ color: #fff;
110
+ font-size: 12px;
138
111
  }
139
112
 
140
- .text-common {
141
- padding: 5px;
142
- text-orientation: upright;
143
- white-space: pre-wrap;
113
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul {
114
+ font-size: 0;
115
+ padding: 5px 10px 0;
116
+ text-align: left;
144
117
  }
145
118
 
146
- /* 文本动画类 */
147
- .text-fadeIn {
148
- animation: fadeIn 1s ease-in-out;
119
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li {
120
+ position: relative;
121
+ display: inline-block;
122
+ height: 25px;
123
+ text-align: center;
124
+ margin-top: 8px;
149
125
  }
150
126
 
151
- .text-slideIn {
152
- animation: slideIn 1s ease-in-out;
127
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active .iconfont {
128
+ display: block;
153
129
  }
154
130
 
155
- .text-bounceIn {
156
- animation: bounceIn 1s ease-in-out;
131
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active span {
132
+ color: #fff !important;
157
133
  }
158
134
 
159
- /* 基础动画关键帧 */
160
- @keyframes fadeIn {
161
- from {
162
- opacity: 0;
163
- }
164
- to {
165
- opacity: 1;
166
- }
135
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
136
+ animation: jumpheart 0.8s ease infinite alternate;
167
137
  }
168
138
 
169
- @keyframes slideIn {
170
- from {
171
- transform: translateY(20px);
172
- opacity: 0;
173
- }
174
- to {
175
- transform: translateY(0);
176
- opacity: 1;
177
- }
139
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
140
+ display: none;
141
+ font-size: 26px;
178
142
  }
179
143
 
180
- @keyframes bounceIn {
181
- 0% {
182
- transform: scale(0.3);
183
- opacity: 0;
184
- }
185
- 50% {
186
- transform: scale(1.05);
187
- opacity: 0.8;
188
- }
189
- 70% {
190
- transform: scale(0.9);
191
- opacity: 0.9;
192
- }
193
- 100% {
194
- transform: scale(1);
195
- opacity: 1;
196
- }
144
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li span {
145
+ position: absolute;
146
+ left: 50%;
147
+ top: 50%;
148
+ z-index: 1;
149
+ color: #666;
150
+ font-size: 13px;
151
+ transform: translate(-50%, -52%);
197
152
  }
198
- .element-video {
199
- position: absolute;
200
- overflow: hidden;
201
- background-color: transparent;
202
- }
153
+
154
+ .ele-calendar .bottom-center,
155
+ .ele-calendar .left-center,
156
+ .ele-calendar .right-center,
157
+ .ele-calendar .top-center {
158
+ display: none !important;
159
+ }
160
+
161
+ .ele-calendar .ani-wrap .can-wrap2 {
162
+ padding: 21px 23px 0
163
+ }
164
+
165
+ .ele-calendar .ani-wrap .can-wrap2 .can-top {
166
+ display: -webkit-box;
167
+ display: -ms-flexbox;
168
+ display: flex;
169
+ -webkit-box-pack: justify;
170
+ -ms-flex-pack: justify;
171
+ justify-content: space-between;
172
+ -webkit-box-align: end;
173
+ -ms-flex-align: end;
174
+ align-items: flex-end;
175
+ line-height: 1;
176
+ padding: 0 16px 22px;
177
+ font-size: 36px
178
+ }
179
+
180
+ .ele-calendar .ani-wrap .can-wrap2 .can-top span {
181
+ font-size: 16px
182
+ }
183
+
184
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week {
185
+ display: -webkit-box;
186
+ display: -ms-flexbox;
187
+ display: flex;
188
+ -webkit-box-pack: start;
189
+ -ms-flex-pack: start;
190
+ justify-content: flex-start;
191
+ height: 25px;
192
+ line-height: 25px;
193
+ padding: 0 10px;
194
+ border-radius: 13px
195
+ }
196
+
197
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week span {
198
+ width: 14.2%;
199
+ text-align: center;
200
+ color: #fff;
201
+ font-size: 12px;
202
+ font-weight: 600
203
+ }
204
+
205
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date {
206
+ position: relative
207
+ }
208
+
209
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date .can-year {
210
+ position: absolute;
211
+ white-space: nowrap;
212
+ left: 50%;
213
+ top: 15%;
214
+ -webkit-transform: translateX(-50%);
215
+ transform: translateX(-50%);
216
+ font-size: 76px;
217
+ opacity: .1;
218
+ font-weight: 600
219
+ }
220
+
221
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul {
222
+ font-size: 0;
223
+ padding: 5px 10px 0;
224
+ text-align: left
225
+ }
226
+
227
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li {
228
+ position: relative;
229
+ display: inline-block;
230
+ width: 14.2%;
231
+ height: 25px;
232
+ text-align: center;
233
+ margin-top: 8px
234
+ }
235
+
236
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active .iconfont {
237
+ display: block;
238
+ position: absolute;
239
+ left: 17%;
240
+ top: 0;
241
+ font-size: 25px
242
+ }
243
+
244
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active span {
245
+ color: #fff!important
246
+ }
247
+
248
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.heart-ani .iconfont {
249
+ -webkit-animation: jumpheart .8s ease infinite alternate;
250
+ animation: jumpheart .8s ease infinite alternate
251
+ }
252
+
253
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li .iconfont {
254
+ display: none;
255
+ font-size: 26px
256
+ }
257
+
258
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li span {
259
+ position: absolute;
260
+ left: 50%;
261
+ top: 50%;
262
+ z-index: 1;
263
+ color: #666;
264
+ font-size: 13px;
265
+ -webkit-transform: translate(-50%,-52%);
266
+ transform: translate(-50%,-52%)
267
+ }
268
+
269
+ .ele-calendar .ani-wrap .can-wrap3 .can-top {
270
+ display: -webkit-box;
271
+ display: -ms-flexbox;
272
+ display: flex;
273
+ -webkit-box-pack: justify;
274
+ -ms-flex-pack: justify;
275
+ justify-content: space-between;
276
+ -webkit-box-align: end;
277
+ -ms-flex-align: end;
278
+ align-items: flex-end;
279
+ line-height: 1;
280
+ padding: 18px 33px 10px;
281
+ font-size: 36px;
282
+ }
283
+
284
+ .ele-calendar .ani-wrap .can-wrap3 .can-top span {
285
+ font-size: 16px
286
+ }
287
+
288
+ .ele-calendar .ani-wrap .can-wrap3 .can-top .can-year {
289
+ font-size: 20px
290
+ }
291
+
292
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week {
293
+ display: -webkit-box;
294
+ display: -ms-flexbox;
295
+ display: flex;
296
+ -webkit-box-pack: start;
297
+ -ms-flex-pack: start;
298
+ justify-content: flex-start;
299
+ height: 40px;
300
+ line-height: 40px;
301
+ padding: 0 34px;
302
+ border-bottom: 1px solid
303
+ }
304
+
305
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week span {
306
+ width: 14.2%;
307
+ text-align: center;
308
+ color: #fff;
309
+ font-size: 12px;
310
+ font-weight: 600
311
+ }
312
+
313
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date {
314
+ position: relative
315
+ }
316
+
317
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul {
318
+ font-size: 0;
319
+ padding: 5px 33px 0;
320
+ text-align: left
321
+ }
322
+
323
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li {
324
+ position: relative;
325
+ display: inline-block;
326
+ width: 14.2%;
327
+ height: 25px;
328
+ text-align: center;
329
+ margin-top: 8px;
330
+ }
331
+
332
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active {
333
+ color: #eee
334
+ }
335
+
336
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active .iconfont {
337
+ display: block;
338
+ position: absolute;
339
+ left: 12%;
340
+ top: 2px;
341
+ }
342
+
343
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active span {
344
+ font-size: 12px
345
+ }
346
+
347
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.heart-ani .iconfont {
348
+ -webkit-animation: jumpheart .8s ease infinite alternate;
349
+ animation: jumpheart .8s ease infinite alternate
350
+ }
351
+
352
+ @keyframes jumpheart {
353
+ to {
354
+ -webkit-transform: scale(1.2);
355
+ transform: scale(1.2)
356
+ }
357
+ }
358
+
359
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li .iconfont {
360
+ display: none;
361
+ font-size: 26px
362
+ }
363
+
364
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li span {
365
+ position: absolute;
366
+ left: 50%;
367
+ top: 50%;
368
+ z-index: 1;
369
+ color: #666;
370
+ font-size: 13px;
371
+ -webkit-transform: translate(-50%,-52%);
372
+ transform: translate(-50%,-52%)
373
+ }
374
+
375
+ .ele-calendar .bottom-center,.ele-calendar .left-center,.ele-calendar .right-center,.ele-calendar .top-center {
376
+ display: none!important
377
+ }
378
+ .icon-tuoyuanxing:before {
379
+ content: "\E6A7";
380
+ }
381
+ .icon-zan1:before {
382
+ content: "\E66D";
383
+ }
384
+ .icon-xingzhuangjiehe:before {
385
+ content: "\E6A6";
386
+ }
387
+ .element-video {
388
+ position: absolute;
389
+ overflow: hidden;
390
+ background-color: transparent;
391
+ }
203
392
 
204
393
  .element-video .ani-wrap, .element-video img {
205
394
  display: block;
@@ -240,13 +429,13 @@
240
429
 
241
430
  .video-cover:hover .play-btn {
242
431
  opacity: 1;
243
- }.call {
432
+ }.button {
244
433
  position: absolute;
245
434
  cursor: pointer;
246
435
  user-select: none;
247
436
  }
248
-
249
- .call .ani-wrap {
437
+
438
+ .button .ani-wrap {
250
439
  display: flex;
251
440
  justify-content: center;
252
441
  align-items: center;
@@ -255,12 +444,12 @@
255
444
  overflow: hidden;
256
445
  transition: opacity 0.2s;
257
446
  }
258
-
259
- .call .ani-wrap:hover {
447
+
448
+ .button .ani-wrap:hover {
260
449
  opacity: 0.9;
261
450
  }
262
451
 
263
- .call-content {
452
+ .button-content {
264
453
  display: flex;
265
454
  align-items: center;
266
455
  justify-content: center;
@@ -269,10 +458,72 @@
269
458
  .btn-text {
270
459
  margin-left: 10px;
271
460
  }
461
+ .ele-text {
462
+ position: relative;
463
+ }
272
464
 
465
+ .ele-text .ani-wrap {
466
+ width: 100%;
467
+ height: 100%;
468
+ }
273
469
 
274
- .hb-tel:before {
275
- content: "\E642";
470
+ .text-common {
471
+ padding: 5px;
472
+ text-orientation: upright;
473
+ white-space: pre-wrap;
474
+ }
475
+
476
+ /* 文本动画类 */
477
+ .text-fadeIn {
478
+ animation: fadeIn 1s ease-in-out;
479
+ }
480
+
481
+ .text-slideIn {
482
+ animation: slideIn 1s ease-in-out;
483
+ }
484
+
485
+ .text-bounceIn {
486
+ animation: bounceIn 1s ease-in-out;
487
+ }
488
+
489
+ /* 基础动画关键帧 */
490
+ @keyframes fadeIn {
491
+ from {
492
+ opacity: 0;
493
+ }
494
+ to {
495
+ opacity: 1;
496
+ }
497
+ }
498
+
499
+ @keyframes slideIn {
500
+ from {
501
+ transform: translateY(20px);
502
+ opacity: 0;
503
+ }
504
+ to {
505
+ transform: translateY(0);
506
+ opacity: 1;
507
+ }
508
+ }
509
+
510
+ @keyframes bounceIn {
511
+ 0% {
512
+ transform: scale(0.3);
513
+ opacity: 0;
514
+ }
515
+ 50% {
516
+ transform: scale(1.05);
517
+ opacity: 0.8;
518
+ }
519
+ 70% {
520
+ transform: scale(0.9);
521
+ opacity: 0.9;
522
+ }
523
+ 100% {
524
+ transform: scale(1);
525
+ opacity: 1;
526
+ }
276
527
  }.ele-shape {
277
528
  position: absolute;
278
529
  overflow: hidden;
@@ -303,475 +554,212 @@
303
554
  width: 100%;
304
555
  height: 100%;
305
556
  background: rgba(0,0,0,0.05);
306
- }.element-ditu .ani-wrap {
307
- width: 100%;
308
- height: 100%;
309
- overflow: hidden
557
+ }.count-down .drag-point {
558
+ cursor: default!important
310
559
  }
311
560
 
312
- .element-ditu .map {
561
+ .count-down .ani-wrap {
313
562
  width: 100%;
314
563
  height: 100%
315
564
  }
316
565
 
317
- .element-ditu .map .el-button {
318
- width: 100%;
319
- height: 100%;
566
+ .count-down .count-text,.count-down .finish-cont {
320
567
  display: -webkit-box;
321
568
  display: -ms-flexbox;
322
569
  display: flex;
570
+ height: 100%;
323
571
  -webkit-box-align: center;
324
572
  -ms-flex-align: center;
325
573
  align-items: center;
326
- padding: 0;
327
574
  -webkit-box-pack: center;
328
575
  -ms-flex-pack: center;
329
- justify-content: center;
330
- background: inherit;
331
- color: inherit;
332
- border: none
576
+ justify-content: center
333
577
  }
334
578
 
335
- .element-ditu .center-map {
336
- width: 100%;
337
- height: 100%;
338
- background: #fff
579
+ .count-down .finish-cont {
580
+ width: 100%
339
581
  }
340
582
 
341
- .element-ditu .mask-map {
342
- position: absolute;
343
- width: 100%;
344
- height: 100%;
345
- top: 0
346
- }
347
- .map-iframe {
348
- width: 100%;
583
+ .count-down .count-flip {
584
+ display: -webkit-box;
585
+ display: -ms-flexbox;
586
+ display: flex;
349
587
  height: 100%;
350
- }.ele-effect {
351
- will-change: transform;
588
+ -webkit-box-align: center;
589
+ -ms-flex-align: center;
590
+ align-items: center;
591
+ -webkit-box-pack: center;
592
+ -ms-flex-pack: center;
593
+ justify-content: center
352
594
  }
353
595
 
354
- .ele-effect .effect-wrap {
355
- position: relative;
356
- width: 100%;
357
- height: 100%;
596
+ .count-down .count-flip .numscroll {
597
+ -webkit-animation: numscroll .4s ease-in-out;
598
+ animation: numscroll .4s ease-in-out;
599
+ -webkit-animation-fill-mode: both;
600
+ animation-fill-mode: both
358
601
  }
359
602
 
360
- .particle {
361
- position: absolute;
362
- background-repeat: no-repeat;
363
- background-size: contain;
364
- animation-name: falling;
365
- animation-timing-function: linear;
366
- animation-iteration-count: infinite;
367
- will-change: transform;
603
+ .count-down .count-flip .numscroll .curr-num {
604
+ -webkit-transition: all .3s ease-in-out;
605
+ transition: all .3s ease-in-out;
606
+ opacity: .6;
607
+ -webkit-transform: scale(.5)!important;
608
+ transform: scale(.5)!important
368
609
  }
369
610
 
370
- @keyframes falling {
611
+ @-webkit-keyframes numscroll {
371
612
  0% {
372
- transform: translateY(0) rotate(0deg);
373
- opacity: 1;
374
- }
375
- 80% {
376
- opacity: 0.8;
613
+ -webkit-transform: translateZ(0);
614
+ transform: translateZ(0)
377
615
  }
378
- 100% {
379
- transform: translateY(100vh) rotate(360deg);
380
- opacity: 0;
616
+
617
+ to {
618
+ -webkit-transform: translate3d(0,100%,0);
619
+ transform: translate3d(0,100%,0)
381
620
  }
382
621
  }
383
- .ele-lottie .ele-lotwrap {
384
- overflow: hidden
385
- }
386
622
 
387
- .ele-effect .effect-wrap {
388
- position: relative;
389
- overflow: hidden;
390
- width: 100%;
391
- height: 100%
392
- }
623
+ @keyframes numscroll {
624
+ 0% {
625
+ -webkit-transform: translateZ(0);
626
+ transform: translateZ(0)
627
+ }
393
628
 
394
- .ele-effect .e-small {
395
- position: absolute;
396
- width: 24px;
397
- height: 24px;
398
- background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
399
- background-size: cover;
400
- background-repeat: no-repeat;
401
- -webkit-transform-origin: center;
402
- transform-origin: center;
403
- -webkit-animation: snow 5s linear infinite;
404
- animation: snow 5s linear infinite
405
- }
406
- @keyframes jumpheart {
407
629
  to {
408
- -webkit-transform: scale(1.2);
409
- transform: scale(1.2)
630
+ -webkit-transform: translate3d(0,100%,0);
631
+ transform: translate3d(0,100%,0)
410
632
  }
411
633
  }
412
- .ele-calendar {
413
- position: relative;
414
- width: 325px !important;
415
- min-height: 325px !important;
416
- height: auto !important;
417
- }
418
634
 
419
- .ele-calendar .drag-point {
420
- cursor: default !important;
635
+ .count-down .count-flip .c-com {
636
+ min-width: 50px;
637
+ height: auto;
638
+ margin: 6px;
639
+ padding: 5px 0 6px;
640
+ background-color: #111
421
641
  }
422
642
 
423
- .ele-calendar .ani-wrap {
643
+ .count-down .count-flip .c-com .flex-wrap {
644
+ display: -webkit-box;
645
+ display: -ms-flexbox;
646
+ display: flex;
424
647
  position: relative;
425
648
  width: 100%;
426
- min-height: 325px !important;
427
- height: auto !important;
428
- padding: 22px 0;
649
+ height: 100%;
650
+ -webkit-box-align: center;
651
+ -ms-flex-align: center;
652
+ align-items: center
429
653
  }
430
654
 
431
- .ele-calendar .ani-wrap .can-wrap .can-top {
432
- display: flex;
433
- justify-content: space-between;
434
- align-items: flex-end;
435
- line-height: 1;
436
- padding: 0 47px 20px;
655
+ .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
656
+ line-height: 27px
437
657
  }
438
658
 
439
- .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
440
- font-size: 25px;
441
- padding-bottom: 4px;
659
+ .count-down .count-flip .c-com .flex-wrap .next-num {
660
+ position: absolute;
661
+ top: -100%
442
662
  }
443
663
 
444
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
445
- font-size: 25px;
664
+ .count-down .count-flip .c-com .flex-wrap .curr-num {
665
+ -webkit-transform: scale(1);
666
+ transform: scale(1)
446
667
  }
447
668
 
448
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
449
- position: relative;
450
- top: 2px;
451
- font-size: 57px;
669
+ .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 {
670
+ display: none!important
452
671
  }
453
672
 
454
- .ele-calendar .ani-wrap .can-wrap .can-main {
455
- padding: 0 23px;
673
+ .c-wrap {
674
+ width: 100%;
675
+ height: 100%;
676
+ overflow: hidden;
677
+ font-size: 0
456
678
  }
457
679
 
458
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
459
- display: flex;
460
- justify-content: flex-start;
461
- height: 25px;
462
- line-height: 25px;
463
- padding: 0 10px;
464
- border-radius: 13px;
680
+ .c-wrap.c-day-wrap {
681
+ text-align: center
465
682
  }
466
683
 
467
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week span {
468
- width: 14.2%;
469
- text-align: center;
470
- color: #fff;
471
- font-size: 12px;
684
+ .c-wrap.c-day-wrap .c-num {
685
+ width: auto
472
686
  }
473
687
 
474
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul {
475
- font-size: 0;
476
- padding: 5px 10px 0;
477
- text-align: left;
688
+ .c-wrap .c-num {
689
+ display: inline-block;
690
+ width: 50%;
691
+ overflow: hidden;
692
+ font-size: 20px;
693
+ color: #999
478
694
  }
479
695
 
480
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li {
481
- position: relative;
482
- display: inline-block;
483
- height: 25px;
484
- text-align: center;
485
- margin-top: 8px;
486
- }
487
-
488
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active .iconfont {
489
- display: block;
490
- }
491
-
492
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active span {
493
- color: #fff !important;
494
- }
495
-
496
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
497
- animation: jumpheart 0.8s ease infinite alternate;
498
- }
499
-
500
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
501
- display: none;
502
- font-size: 26px;
503
- }
504
-
505
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li span {
506
- position: absolute;
507
- left: 50%;
508
- top: 50%;
509
- z-index: 1;
510
- color: #666;
511
- font-size: 13px;
512
- transform: translate(-50%, -52%);
513
- }
514
-
515
- .ele-calendar .bottom-center,
516
- .ele-calendar .left-center,
517
- .ele-calendar .right-center,
518
- .ele-calendar .top-center {
519
- display: none !important;
520
- }
521
-
522
- .ele-calendar .ani-wrap .can-wrap2 {
523
- padding: 21px 23px 0
524
- }
525
-
526
- .ele-calendar .ani-wrap .can-wrap2 .can-top {
696
+ .c-wrap .c-left .flex-wrap {
527
697
  display: -webkit-box;
528
698
  display: -ms-flexbox;
529
699
  display: flex;
530
- -webkit-box-pack: justify;
531
- -ms-flex-pack: justify;
532
- justify-content: space-between;
533
- -webkit-box-align: end;
534
- -ms-flex-align: end;
535
- align-items: flex-end;
536
- line-height: 1;
537
- padding: 0 16px 22px;
538
- font-size: 36px
539
- }
540
-
541
- .ele-calendar .ani-wrap .can-wrap2 .can-top span {
542
- font-size: 16px
700
+ -webkit-box-pack: end;
701
+ -ms-flex-pack: end;
702
+ justify-content: flex-end
543
703
  }
544
704
 
545
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week {
705
+ .c-wrap .c-text {
546
706
  display: -webkit-box;
547
707
  display: -ms-flexbox;
548
708
  display: flex;
549
- -webkit-box-pack: start;
550
- -ms-flex-pack: start;
551
- justify-content: flex-start;
552
- height: 25px;
553
- line-height: 25px;
554
- padding: 0 10px;
555
- border-radius: 13px
556
- }
557
-
558
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week span {
559
- width: 14.2%;
560
- text-align: center;
561
- color: #fff;
709
+ width: 100%;
562
710
  font-size: 12px;
563
- font-weight: 600
564
- }
565
-
566
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date {
567
- position: relative
568
- }
569
-
570
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date .can-year {
571
- position: absolute;
572
- white-space: nowrap;
573
- left: 50%;
574
- top: 15%;
575
- -webkit-transform: translateX(-50%);
576
- transform: translateX(-50%);
577
- font-size: 76px;
578
- opacity: .1;
579
- font-weight: 600
580
- }
581
-
582
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul {
583
- font-size: 0;
584
- padding: 5px 10px 0;
585
- text-align: left
586
- }
587
-
588
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li {
589
- position: relative;
590
- display: inline-block;
591
- width: 14.2%;
592
- height: 25px;
593
- text-align: center;
594
- margin-top: 8px
595
- }
596
-
597
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active .iconfont {
598
- display: block;
599
- position: absolute;
600
- left: 17%;
601
- top: 0;
602
- font-size: 25px
603
- }
604
-
605
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active span {
606
- color: #fff!important
607
- }
608
-
609
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.heart-ani .iconfont {
610
- -webkit-animation: jumpheart .8s ease infinite alternate;
611
- animation: jumpheart .8s ease infinite alternate
612
- }
613
-
614
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li .iconfont {
615
- display: none;
616
- font-size: 26px
617
- }
618
-
619
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li span {
620
- position: absolute;
621
- left: 50%;
622
- top: 50%;
623
- z-index: 1;
624
- color: #666;
625
- font-size: 13px;
626
- -webkit-transform: translate(-50%,-52%);
627
- transform: translate(-50%,-52%)
628
- }
629
-
630
- .ele-calendar .ani-wrap .can-wrap3 .can-top {
631
- display: -webkit-box;
632
- display: -ms-flexbox;
633
- display: flex;
634
- -webkit-box-pack: justify;
635
- -ms-flex-pack: justify;
636
- justify-content: space-between;
637
- -webkit-box-align: end;
638
- -ms-flex-align: end;
639
- align-items: flex-end;
640
- line-height: 1;
641
- padding: 18px 33px 10px;
642
- font-size: 36px;
711
+ -webkit-box-pack: center;
712
+ -ms-flex-pack: center;
713
+ justify-content: center;
714
+ -webkit-box-align: center;
715
+ -ms-flex-align: center;
716
+ align-items: center;
717
+ white-space: nowrap
643
718
  }
644
-
645
- .ele-calendar .ani-wrap .can-wrap3 .can-top span {
646
- font-size: 16px
719
+ .element-ditu .ani-wrap {
720
+ width: 100%;
721
+ height: 100%;
722
+ overflow: hidden
647
723
  }
648
724
 
649
- .ele-calendar .ani-wrap .can-wrap3 .can-top .can-year {
650
- font-size: 20px
725
+ .element-ditu .map {
726
+ width: 100%;
727
+ height: 100%
651
728
  }
652
729
 
653
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week {
730
+ .element-ditu .map .el-button {
731
+ width: 100%;
732
+ height: 100%;
654
733
  display: -webkit-box;
655
734
  display: -ms-flexbox;
656
735
  display: flex;
657
- -webkit-box-pack: start;
658
- -ms-flex-pack: start;
659
- justify-content: flex-start;
660
- height: 40px;
661
- line-height: 40px;
662
- padding: 0 34px;
663
- border-bottom: 1px solid
664
- }
665
-
666
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week span {
667
- width: 14.2%;
668
- text-align: center;
669
- color: #fff;
670
- font-size: 12px;
671
- font-weight: 600
672
- }
673
-
674
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date {
675
- position: relative
676
- }
677
-
678
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul {
679
- font-size: 0;
680
- padding: 5px 33px 0;
681
- text-align: left
682
- }
683
-
684
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li {
685
- position: relative;
686
- display: inline-block;
687
- width: 14.2%;
688
- height: 25px;
689
- text-align: center;
690
- margin-top: 8px;
691
- }
692
-
693
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active {
694
- color: #eee
695
- }
696
-
697
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active .iconfont {
698
- display: block;
699
- position: absolute;
700
- left: 12%;
701
- top: 2px;
702
- }
703
-
704
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active span {
705
- font-size: 12px
706
- }
707
-
708
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.heart-ani .iconfont {
709
- -webkit-animation: jumpheart .8s ease infinite alternate;
710
- animation: jumpheart .8s ease infinite alternate
711
- }
712
-
713
- @keyframes jumpheart {
714
- to {
715
- -webkit-transform: scale(1.2);
716
- transform: scale(1.2)
717
- }
718
- }
719
-
720
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li .iconfont {
721
- display: none;
722
- font-size: 26px
736
+ -webkit-box-align: center;
737
+ -ms-flex-align: center;
738
+ align-items: center;
739
+ padding: 0;
740
+ -webkit-box-pack: center;
741
+ -ms-flex-pack: center;
742
+ justify-content: center;
743
+ background: inherit;
744
+ color: inherit;
745
+ border: none
723
746
  }
724
747
 
725
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li span {
726
- position: absolute;
727
- left: 50%;
728
- top: 50%;
729
- z-index: 1;
730
- color: #666;
731
- font-size: 13px;
732
- -webkit-transform: translate(-50%,-52%);
733
- transform: translate(-50%,-52%)
748
+ .element-ditu .center-map {
749
+ width: 100%;
750
+ height: 100%;
751
+ background: #fff
734
752
  }
735
753
 
736
- .ele-calendar .bottom-center,.ele-calendar .left-center,.ele-calendar .right-center,.ele-calendar .top-center {
737
- display: none!important
738
- }
739
- .icon-tuoyuanxing:before {
740
- content: "\E6A7";
741
- }
742
- .icon-zan1:before {
743
- content: "\E66D";
744
- }
745
- .icon-xingzhuangjiehe:before {
746
- content: "\E6A6";
747
- }.button {
754
+ .element-ditu .mask-map {
748
755
  position: absolute;
749
- cursor: pointer;
750
- user-select: none;
751
- }
752
-
753
- .button .ani-wrap {
754
- display: flex;
755
- justify-content: center;
756
- align-items: center;
757
756
  width: 100%;
758
757
  height: 100%;
759
- overflow: hidden;
760
- transition: opacity 0.2s;
761
- }
762
-
763
- .button .ani-wrap:hover {
764
- opacity: 0.9;
765
- }
766
-
767
- .button-content {
768
- display: flex;
769
- align-items: center;
770
- justify-content: center;
758
+ top: 0
771
759
  }
772
-
773
- .btn-text {
774
- margin-left: 10px;
760
+ .map-iframe {
761
+ width: 100%;
762
+ height: 100%;
775
763
  }/* Iconfont definition */
776
764
  .icon-danmuliebiao1:before {
777
765
  content: "\E68A";
@@ -3123,244 +3111,250 @@ to {
3123
3111
 
3124
3112
  60% {
3125
3113
  -webkit-transform: scaleY(.98);
3126
- transform: scaleY(.98);
3127
- -webkit-transform-origin: 50% 0;
3128
- transform-origin: 50% 0
3129
- }
3130
-
3131
- 80% {
3132
- -webkit-transform: scaleY(1.01);
3133
- transform: scaleY(1.01);
3134
- -webkit-transform-origin: 50% 0;
3135
- transform-origin: 50% 0
3136
- }
3137
-
3138
- 99% {
3139
- -webkit-transform: scaleY(1);
3140
- transform: scaleY(1);
3141
- -webkit-transform-origin: 50% 0;
3142
- transform-origin: 50% 0
3143
- }
3144
-
3145
- to {
3146
- -webkit-transform: none;
3147
- transform: none
3148
- }
3149
- }
3150
- .ele-lottie .ele-lotwrap {
3151
- overflow: hidden;
3152
- }.count-down .drag-point {
3153
- cursor: default!important
3154
- }
3155
-
3156
- .count-down .ani-wrap {
3157
- width: 100%;
3158
- height: 100%
3159
- }
3160
-
3161
- .count-down .count-text,.count-down .finish-cont {
3162
- display: -webkit-box;
3163
- display: -ms-flexbox;
3164
- display: flex;
3165
- height: 100%;
3166
- -webkit-box-align: center;
3167
- -ms-flex-align: center;
3168
- align-items: center;
3169
- -webkit-box-pack: center;
3170
- -ms-flex-pack: center;
3171
- justify-content: center
3172
- }
3173
-
3174
- .count-down .finish-cont {
3175
- width: 100%
3176
- }
3177
-
3178
- .count-down .count-flip {
3179
- display: -webkit-box;
3180
- display: -ms-flexbox;
3181
- display: flex;
3182
- height: 100%;
3183
- -webkit-box-align: center;
3184
- -ms-flex-align: center;
3185
- align-items: center;
3186
- -webkit-box-pack: center;
3187
- -ms-flex-pack: center;
3188
- justify-content: center
3189
- }
3190
-
3191
- .count-down .count-flip .numscroll {
3192
- -webkit-animation: numscroll .4s ease-in-out;
3193
- animation: numscroll .4s ease-in-out;
3194
- -webkit-animation-fill-mode: both;
3195
- animation-fill-mode: both
3196
- }
3197
-
3198
- .count-down .count-flip .numscroll .curr-num {
3199
- -webkit-transition: all .3s ease-in-out;
3200
- transition: all .3s ease-in-out;
3201
- opacity: .6;
3202
- -webkit-transform: scale(.5)!important;
3203
- transform: scale(.5)!important
3204
- }
3205
-
3206
- @-webkit-keyframes numscroll {
3207
- 0% {
3208
- -webkit-transform: translateZ(0);
3209
- transform: translateZ(0)
3210
- }
3211
-
3212
- to {
3213
- -webkit-transform: translate3d(0,100%,0);
3214
- transform: translate3d(0,100%,0)
3215
- }
3216
- }
3217
-
3218
- @keyframes numscroll {
3219
- 0% {
3220
- -webkit-transform: translateZ(0);
3221
- transform: translateZ(0)
3222
- }
3223
-
3224
- to {
3225
- -webkit-transform: translate3d(0,100%,0);
3226
- transform: translate3d(0,100%,0)
3227
- }
3114
+ transform: scaleY(.98);
3115
+ -webkit-transform-origin: 50% 0;
3116
+ transform-origin: 50% 0
3228
3117
  }
3229
3118
 
3230
- .count-down .count-flip .c-com {
3231
- min-width: 50px;
3232
- height: auto;
3233
- margin: 6px;
3234
- padding: 5px 0 6px;
3235
- background-color: #111
3119
+ 80% {
3120
+ -webkit-transform: scaleY(1.01);
3121
+ transform: scaleY(1.01);
3122
+ -webkit-transform-origin: 50% 0;
3123
+ transform-origin: 50% 0
3236
3124
  }
3237
3125
 
3238
- .count-down .count-flip .c-com .flex-wrap {
3239
- display: -webkit-box;
3240
- display: -ms-flexbox;
3241
- display: flex;
3242
- position: relative;
3243
- width: 100%;
3244
- height: 100%;
3245
- -webkit-box-align: center;
3246
- -ms-flex-align: center;
3247
- align-items: center
3126
+ 99% {
3127
+ -webkit-transform: scaleY(1);
3128
+ transform: scaleY(1);
3129
+ -webkit-transform-origin: 50% 0;
3130
+ transform-origin: 50% 0
3248
3131
  }
3249
3132
 
3250
- .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
3251
- line-height: 27px
3133
+ to {
3134
+ -webkit-transform: none;
3135
+ transform: none
3252
3136
  }
3253
-
3254
- .count-down .count-flip .c-com .flex-wrap .next-num {
3137
+ }/* .ele-form {
3138
+ position: absolute;
3139
+ user-select: none;
3140
+ } */
3141
+
3142
+ .f-select {
3143
+ cursor: pointer;
3144
+ }
3145
+
3146
+ .ani-wrap {
3147
+ position: relative;
3148
+ }
3149
+
3150
+ .f-select .ani-wrap .fs-tit {
3151
+ position: relative;
3152
+ display: flex;
3153
+ padding: 0 5px;
3154
+ height: 35px;
3155
+ line-height: 35px;
3156
+ align-items: center;
3157
+ }
3158
+
3159
+ .require {
3160
+ padding: 0 5px 0 0;
3161
+ color: red;
3162
+ vertical-align: middle;
3163
+ }
3164
+
3165
+ .fs-cont {
3166
+ padding-right: 15px;
3167
+ white-space: nowrap;
3168
+ overflow: hidden;
3169
+ text-overflow: ellipsis;
3170
+ flex-grow: 1;
3171
+ }
3172
+
3173
+ .icon-bofang1 {
3174
+ font-size: 12px;
3175
+ transition: transform 0.2s ease;
3176
+ }
3177
+
3178
+ .rotate-180 {
3179
+ transform: rotate(180deg) !important;
3180
+ }
3181
+
3182
+ .f-real {
3183
+ position: absolute;
3184
+ left: 0;
3185
+ top: 0;
3186
+ width: 100%;
3187
+ height: 100%;
3188
+ z-index: 1;
3189
+ opacity: 0;
3190
+ cursor: pointer;
3191
+ }
3192
+
3193
+ .dropdown-menu {
3194
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
3195
+ }
3196
+
3197
+ .dropdown-item {
3198
+ padding: 8px 10px;
3199
+ cursor: pointer;
3200
+ transition: background-color 0.2s;
3201
+ }
3202
+
3203
+ .dropdown-item:hover {
3204
+ background-color: #f5f5f5;
3205
+ }
3206
+
3207
+ .dropdown-item.selected {
3208
+ background-color: #e6f7ff;
3209
+ color: #1890ff;
3210
+ }
3211
+
3212
+ .f-select .fs-tit .icon-bofang1 {
3213
+ position: absolute;
3214
+ right: 10px;
3215
+ font-size: 12px;
3216
+ display: inline-block;
3217
+ transform: rotate(90deg);
3218
+ }
3219
+
3220
+ .icon-bofang1:before {
3221
+ content: "\E6CF";
3222
+ }
3223
+
3224
+ .has-error {
3225
+ border-color: #ff4d4f !important;
3226
+ }
3227
+
3228
+ .error-tip {
3229
+ position: fixed;
3230
+ left: 0;
3231
+ top: 0;
3232
+ width: 100%;
3233
+ height: 100%;
3234
+ z-index: 1000;
3235
+ }.form-input {
3236
+ position: absolute;
3237
+ }
3238
+
3239
+ .input-wrapper {
3240
+ display: flex;
3241
+ align-items: center;
3242
+ width: 100%;
3243
+ height: 100%;
3244
+ padding: 0 10px;
3245
+ box-sizing: border-box;
3246
+ position: relative;
3247
+ transition: border-color 0.3s;
3248
+ }
3249
+
3250
+ .required-marker {
3251
+ font-size: 12px;
3252
+ padding: 0 5px 0 0;
3253
+ color: red;
3254
+ vertical-align: middle;
3255
+ }
3256
+
3257
+ input {
3258
+ flex: 1;
3259
+ border: none;
3260
+ outline: none;
3261
+ background: transparent;
3262
+ height: 100%;
3263
+ padding: 0;
3264
+ margin: 0;
3265
+ }
3266
+ /*
3267
+ input::placeholder {
3268
+ color: #ccc;
3269
+ opacity: 1;
3270
+ } */
3271
+
3272
+ .dynamic-placeholder-input::placeholder {
3273
+ color: var(--placeholder-color, #999);
3274
+ opacity: 1;
3275
+ }
3276
+ .dynamic-placeholder-input::-webkit-input-placeholder {
3277
+ color: var(--placeholder-color, #999);
3278
+ }
3279
+ .dynamic-placeholder-input::-moz-placeholder {
3280
+ color: var(--placeholder-color, #999);
3281
+ opacity: 1;
3282
+ }
3283
+ .dynamic-placeholder-input:-ms-input-placeholder {
3284
+ color: var(--placeholder-color, #999);
3285
+ }#audio {
3255
3286
  position: absolute;
3256
- top: -100%
3287
+ right: 10px;
3288
+ top: 10px;
3289
+ z-index: 103;
3290
+ width: 30px;
3291
+ height: 30px;
3292
+ display: flex;
3293
+ align-items: center;
3257
3294
  }
3258
3295
 
3259
- .count-down .count-flip .c-com .flex-wrap .curr-num {
3260
- -webkit-transform: scale(1);
3261
- transform: scale(1)
3296
+ #audio .mrotate {
3297
+ animation: mrotate 5s linear infinite;
3262
3298
  }
3263
3299
 
3264
- .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 {
3265
- display: none!important
3300
+ @keyframes mrotate {
3301
+ to {
3302
+ transform: rotate(1turn);
3303
+ }
3266
3304
  }
3267
3305
 
3268
- .c-wrap {
3306
+ #audio .audio {
3269
3307
  width: 100%;
3270
3308
  height: 100%;
3309
+ display: flex;
3310
+ align-items: center;
3311
+ justify-content: center;
3312
+ color: #fff;
3313
+ background: #666;
3314
+ border-radius: 50%;
3271
3315
  overflow: hidden;
3272
- font-size: 0
3273
- }
3274
-
3275
- .c-wrap.c-day-wrap {
3276
- text-align: center
3277
- }
3278
-
3279
- .c-wrap.c-day-wrap .c-num {
3280
- width: auto
3316
+ cursor: pointer;
3317
+ transition: all 0.3s ease;
3281
3318
  }
3282
3319
 
3283
- .c-wrap .c-num {
3284
- display: inline-block;
3285
- width: 50%;
3286
- overflow: hidden;
3287
- font-size: 20px;
3288
- color: #999
3320
+ #audio .audio.a-border {
3321
+ border: 1px solid #fff;
3289
3322
  }
3290
3323
 
3291
- .c-wrap .c-left .flex-wrap {
3292
- display: -webkit-box;
3293
- display: -ms-flexbox;
3294
- display: flex;
3295
- -webkit-box-pack: end;
3296
- -ms-flex-pack: end;
3297
- justify-content: flex-end
3324
+ #audio .audio .music-icon {
3325
+ display: block;
3326
+ width: 60%;
3327
+ height: 60%;
3328
+ object-fit: contain;
3298
3329
  }
3299
3330
 
3300
- .c-wrap .c-text {
3301
- display: -webkit-box;
3302
- display: -ms-flexbox;
3303
- display: flex;
3304
- width: 100%;
3305
- font-size: 12px;
3306
- -webkit-box-pack: center;
3307
- -ms-flex-pack: center;
3308
- justify-content: center;
3309
- -webkit-box-align: center;
3310
- -ms-flex-align: center;
3311
- align-items: center;
3312
- white-space: nowrap
3331
+ #audio .audio .iconfont {
3332
+ font-size: 2opx;
3333
+ line-height: 1;
3313
3334
  }
3314
- .form-input {
3335
+ #audio .icon-cancel {
3315
3336
  position: absolute;
3316
- }
3317
-
3318
- .input-wrapper {
3319
- display: flex;
3320
- align-items: center;
3321
3337
  width: 100%;
3322
3338
  height: 100%;
3323
- padding: 0 10px;
3324
- box-sizing: border-box;
3325
- position: relative;
3326
- transition: border-color 0.3s;
3327
- }
3328
-
3329
- .required-marker {
3330
- font-size: 12px;
3331
- padding: 0 5px 0 0;
3332
- color: red;
3333
- vertical-align: middle;
3334
- }
3335
-
3336
- input {
3337
- flex: 1;
3338
- border: none;
3339
- outline: none;
3340
- background: transparent;
3341
- height: 100%;
3342
- padding: 0;
3343
- margin: 0;
3344
- }
3345
- /*
3346
- input::placeholder {
3347
- color: #ccc;
3348
- opacity: 1;
3349
- } */
3350
-
3351
- .dynamic-placeholder-input::placeholder {
3352
- color: var(--placeholder-color, #999);
3353
- opacity: 1;
3354
- }
3355
- .dynamic-placeholder-input::-webkit-input-placeholder {
3356
- color: var(--placeholder-color, #999);
3339
+ border-radius: 50%;
3340
+ overflow: hidden;
3341
+ padding: 15px 0;
3342
+ }
3343
+ #audio .icon-cancel .icon-h {
3344
+ transform: rotate(45deg);
3345
+ width: 100%;
3346
+ height: 2px;
3347
+ background: #fff;
3357
3348
  }
3358
- .dynamic-placeholder-input::-moz-placeholder {
3359
- color: var(--placeholder-color, #999);
3360
- opacity: 1;
3349
+ #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
3350
+ content: '';
3351
+ position: absolute;
3352
+ width: 100%;
3353
+ height: 2px;
3354
+ background: #fff;
3361
3355
  }
3362
- .dynamic-placeholder-input:-ms-input-placeholder {
3363
- color: var(--placeholder-color, #999);
3356
+ .ele-lottie .ele-lotwrap {
3357
+ overflow: hidden;
3364
3358
  }#page-list .tip-cover {
3365
3359
  position: fixed;
3366
3360
  left: 0;
@@ -3438,151 +3432,111 @@ to {
3438
3432
  font-size: 14px;
3439
3433
  line-height: 20px;
3440
3434
  background: #ed5566;
3441
- } .form-submit {
3442
- cursor: pointer;
3443
- transition: all 0.2s;
3444
- outline: none;
3445
- border: none;
3446
- }
3447
-
3448
- .form-submit:hover {
3449
- opacity: 0.9;
3450
- transform: translateY(-1px);
3451
- }
3452
-
3453
- .form-submit:active {
3454
- opacity: 0.8;
3455
- transform: translateY(0);
3456
- }
3457
-
3458
- .form-submit:disabled {
3459
- opacity: 0.6;
3460
- cursor: not-allowed;
3461
- transform: none !important;
3462
- }
3463
-
3464
- .f-submit {
3465
- position: relative;
3466
- display: block
3467
- }
3468
-
3469
- .f-submit .ani-wrap {
3470
- width: 100%;
3471
- height: 100%;
3472
- padding: 10px;
3473
- overflow: hidden;
3474
- position: relative
3475
- }
3476
-
3477
- .f-submit .f-ovh {
3478
- position: absolute;
3479
- left: 50%;
3480
- top: 50%;
3481
- transform: translate(-50%,-50%)
3482
- }
3483
-
3484
- .form-submit:disabled {
3485
- opacity: 0.7;
3486
- cursor: not-allowed;
3487
- }/* .ele-form {
3435
+ } .ele-img {
3488
3436
  position: absolute;
3489
- user-select: none;
3490
- } */
3491
-
3492
- .f-select {
3493
- cursor: pointer;
3494
- }
3495
-
3496
- .ani-wrap {
3497
- position: relative;
3498
- }
3499
-
3500
- .f-select .ani-wrap .fs-tit {
3501
- position: relative;
3502
- display: flex;
3503
- padding: 0 5px;
3504
- height: 35px;
3505
- line-height: 35px;
3506
- align-items: center;
3507
- }
3508
-
3509
- .require {
3510
- padding: 0 5px 0 0;
3511
- color: red;
3512
- vertical-align: middle;
3513
- }
3514
-
3515
- .fs-cont {
3516
- padding-right: 15px;
3517
- white-space: nowrap;
3518
3437
  overflow: hidden;
3519
- text-overflow: ellipsis;
3520
- flex-grow: 1;
3521
3438
  }
3522
3439
 
3523
- .icon-bofang1 {
3524
- font-size: 12px;
3525
- transition: transform 0.2s ease;
3440
+ .ele-img .ani-wrap {
3441
+ width: 100%;
3442
+ height: 100%;
3526
3443
  }
3527
3444
 
3528
- .rotate-180 {
3529
- transform: rotate(180deg) !important;
3445
+ .ele-img .ele-image {
3446
+ position: relative;
3447
+ display: block;
3530
3448
  }
3531
3449
 
3532
- .f-real {
3450
+ .ele-img .rotate-wrap {
3533
3451
  position: absolute;
3534
3452
  left: 0;
3453
+ right: 0;
3535
3454
  top: 0;
3536
- width: 100%;
3537
- height: 100%;
3538
- z-index: 1;
3539
- opacity: 0;
3540
- cursor: pointer;
3541
- }
3542
-
3543
- .dropdown-menu {
3544
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
3545
- }
3546
-
3547
- .dropdown-item {
3548
- padding: 8px 10px;
3549
- cursor: pointer;
3550
- transition: background-color 0.2s;
3455
+ bottom: 0;
3551
3456
  }
3552
3457
 
3553
- .dropdown-item:hover {
3554
- background-color: #f5f5f5;
3458
+ .ele-img .ele-img-bg,
3459
+ .ele-img .rotate-wrap .img-wrap {
3460
+ width: 100%;
3461
+ height: 100%;
3462
+ overflow: hidden;
3555
3463
  }
3556
3464
 
3557
- .dropdown-item.selected {
3558
- background-color: #e6f7ff;
3559
- color: #1890ff;
3465
+ .ele-img .ele-bg-wrap {
3466
+ width: 100%;
3467
+ height: 100%;
3468
+ background-size: cover;
3469
+ background-position: 50% 50%;
3470
+ background-repeat: no-repeat;
3471
+ background-clip: border-box;
3560
3472
  }
3561
3473
 
3562
- .f-select .fs-tit .icon-bofang1 {
3563
- position: absolute;
3564
- right: 10px;
3565
- font-size: 12px;
3566
- display: inline-block;
3567
- transform: rotate(90deg);
3474
+ /* 动画关键帧 */
3475
+ @keyframes zoomIn {
3476
+ from {
3477
+ opacity: 0;
3478
+ transform: scale(0.5);
3479
+ }
3480
+ to {
3481
+ opacity: 1;
3482
+ transform: scale(1);
3483
+ }
3484
+ }.ele-effect {
3485
+ will-change: transform;
3486
+ }
3487
+
3488
+ .ele-effect .effect-wrap {
3489
+ position: relative;
3490
+ width: 100%;
3491
+ height: 100%;
3492
+ }
3493
+
3494
+ .particle {
3495
+ position: absolute;
3496
+ background-repeat: no-repeat;
3497
+ background-size: contain;
3498
+ animation-name: falling;
3499
+ animation-timing-function: linear;
3500
+ animation-iteration-count: infinite;
3501
+ will-change: transform;
3502
+ }
3503
+
3504
+ @keyframes falling {
3505
+ 0% {
3506
+ transform: translateY(0) rotate(0deg);
3507
+ opacity: 1;
3568
3508
  }
3569
-
3570
- .icon-bofang1:before {
3571
- content: "\E6CF";
3509
+ 80% {
3510
+ opacity: 0.8;
3572
3511
  }
3573
-
3574
- .has-error {
3575
- border-color: #ff4d4f !important;
3512
+ 100% {
3513
+ transform: translateY(100vh) rotate(360deg);
3514
+ opacity: 0;
3576
3515
  }
3577
-
3578
- .error-tip {
3579
- position: fixed;
3580
- left: 0;
3581
- top: 0;
3516
+ }
3517
+ .ele-lottie .ele-lotwrap {
3518
+ overflow: hidden
3519
+ }
3520
+
3521
+ .ele-effect .effect-wrap {
3522
+ position: relative;
3523
+ overflow: hidden;
3582
3524
  width: 100%;
3583
- height: 100%;
3584
- z-index: 1000;
3585
- }/* .ele-form {
3525
+ height: 100%
3526
+ }
3527
+
3528
+ .ele-effect .e-small {
3529
+ position: absolute;
3530
+ width: 24px;
3531
+ height: 24px;
3532
+ background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
3533
+ background-size: cover;
3534
+ background-repeat: no-repeat;
3535
+ -webkit-transform-origin: center;
3536
+ transform-origin: center;
3537
+ -webkit-animation: snow 5s linear infinite;
3538
+ animation: snow 5s linear infinite
3539
+ }/* .ele-form {
3586
3540
  position: absolute;
3587
3541
  user-select: none;
3588
3542
  }
@@ -3676,7 +3630,138 @@ cursor: not-allowed;
3676
3630
  width: 100%;
3677
3631
  height: 100%;
3678
3632
  z-index: 1000;
3679
- }
3633
+ }.form-submit {
3634
+ cursor: pointer;
3635
+ transition: all 0.2s;
3636
+ outline: none;
3637
+ border: none;
3638
+ }
3639
+
3640
+ .form-submit:hover {
3641
+ opacity: 0.9;
3642
+ transform: translateY(-1px);
3643
+ }
3644
+
3645
+ .form-submit:active {
3646
+ opacity: 0.8;
3647
+ transform: translateY(0);
3648
+ }
3649
+
3650
+ .form-submit:disabled {
3651
+ opacity: 0.6;
3652
+ cursor: not-allowed;
3653
+ transform: none !important;
3654
+ }
3655
+
3656
+ .f-submit {
3657
+ position: relative;
3658
+ display: block
3659
+ }
3660
+
3661
+ .f-submit .ani-wrap {
3662
+ width: 100%;
3663
+ height: 100%;
3664
+ padding: 10px;
3665
+ overflow: hidden;
3666
+ position: relative
3667
+ }
3668
+
3669
+ .f-submit .f-ovh {
3670
+ position: absolute;
3671
+ left: 50%;
3672
+ top: 50%;
3673
+ transform: translate(-50%,-50%)
3674
+ }
3675
+
3676
+ .form-submit:disabled {
3677
+ opacity: 0.7;
3678
+ cursor: not-allowed;
3679
+ }/* .ele-form {
3680
+ position: absolute;
3681
+ user-select: none;
3682
+ } */
3683
+
3684
+ .f-multiple {
3685
+ cursor: pointer;
3686
+ }
3687
+
3688
+ .ani-wrap {
3689
+ position: relative;
3690
+ }
3691
+
3692
+ .f-multiple .ani-wrap .fs-tit {
3693
+ display: flex;
3694
+ padding: 0 5px;
3695
+ height: 40px;
3696
+ align-items: center;
3697
+ white-space: nowrap;
3698
+ overflow: hidden;
3699
+ text-overflow: ellipsis;
3700
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
3701
+ }
3702
+
3703
+ .require {
3704
+ padding: 0 5px 0 0;
3705
+ color: red;
3706
+ vertical-align: middle;
3707
+ }
3708
+
3709
+ .f-multiple ul {
3710
+ padding: 15px;
3711
+ margin: 0;
3712
+ list-style: none;
3713
+ }
3714
+
3715
+ .f-multiple ul li {
3716
+ margin-top: 12px;
3717
+ font-size: 0;
3718
+ display: flex;
3719
+ align-items: center;
3720
+ cursor: pointer;
3721
+ }
3722
+
3723
+ .f-multiple ul li:first-child {
3724
+ margin-top: 0;
3725
+ }
3726
+
3727
+ .fs-circle {
3728
+ display: inline-block;
3729
+ width: 16px;
3730
+ height: 16px;
3731
+ border-radius: 50%;
3732
+ position: relative;
3733
+ transition: all 0.2s;
3734
+ }
3735
+
3736
+ .fs-circle.selected {
3737
+ background-color: #2687f1;
3738
+ border-color: #2687f1 !important;
3739
+ }
3740
+
3741
+ .fs-circle.selected::after {
3742
+ content: "";
3743
+ position: absolute;
3744
+ top: 3px;
3745
+ left: 3px;
3746
+ width: 8px;
3747
+ height: 8px;
3748
+ border-radius: 50%;
3749
+ background-color: white;
3750
+ }
3751
+
3752
+ .fs-txt {
3753
+ display: inline-block;
3754
+ width: calc(100% - 16px);
3755
+ padding-left: 8px;
3756
+ vertical-align: top;
3757
+ word-break: break-all;
3758
+ font-size: 14px;
3759
+ line-height: 1.2;
3760
+ }
3761
+
3762
+ .has-error .fs-tit {
3763
+ border-bottom-color: #ff4d4f;
3764
+ }
3680
3765
  .icon-guanbi:before {
3681
3766
  content: "\E676";
3682
3767
  }
@@ -4070,119 +4155,32 @@ cursor: not-allowed;
4070
4155
  content: "\E65E";
4071
4156
  color: #F44336; /* 失败的红色 */
4072
4157
  }
4073
- /* .ele-form {
4074
- position: absolute;
4075
- user-select: none;
4076
- } */
4077
-
4078
- .f-multiple {
4079
- cursor: pointer;
4080
- }
4081
-
4082
- .ani-wrap {
4083
- position: relative;
4084
- }
4085
-
4086
- .f-multiple .ani-wrap .fs-tit {
4087
- display: flex;
4088
- padding: 0 5px;
4089
- height: 40px;
4090
- align-items: center;
4091
- white-space: nowrap;
4092
- overflow: hidden;
4093
- text-overflow: ellipsis;
4094
- border-bottom: 1px solid rgba(153, 153, 153, 1);
4095
- }
4096
-
4097
- .require {
4098
- padding: 0 5px 0 0;
4099
- color: red;
4100
- vertical-align: middle;
4101
- }
4102
-
4103
- .f-multiple ul {
4104
- padding: 15px;
4105
- margin: 0;
4106
- list-style: none;
4107
- }
4108
-
4109
- .f-multiple ul li {
4110
- margin-top: 12px;
4111
- font-size: 0;
4112
- display: flex;
4113
- align-items: center;
4114
- cursor: pointer;
4115
- }
4116
-
4117
- .f-multiple ul li:first-child {
4118
- margin-top: 0;
4119
- }
4120
-
4121
- .fs-circle {
4122
- display: inline-block;
4123
- width: 16px;
4124
- height: 16px;
4125
- border-radius: 50%;
4126
- position: relative;
4127
- transition: all 0.2s;
4128
- }
4129
-
4130
- .fs-circle.selected {
4131
- background-color: #2687f1;
4132
- border-color: #2687f1 !important;
4133
- }
4134
-
4135
- .fs-circle.selected::after {
4136
- content: "";
4137
- position: absolute;
4138
- top: 3px;
4139
- left: 3px;
4140
- width: 8px;
4141
- height: 8px;
4142
- border-radius: 50%;
4143
- background-color: white;
4144
- }
4145
-
4146
- .fs-txt {
4147
- display: inline-block;
4148
- width: calc(100% - 16px);
4149
- padding-left: 8px;
4150
- vertical-align: top;
4151
- word-break: break-all;
4152
- font-size: 14px;
4153
- line-height: 1.2;
4154
- }
4155
4158
 
4156
- .has-error .fs-tit {
4157
- border-bottom-color: #ff4d4f;
4158
- }
4159
- .global.video {
4159
+ .global.tel {
4160
4160
  width: 35px;
4161
4161
  height: 55px;
4162
4162
  border-radius: 50%;
4163
4163
  text-align: center;
4164
- margin-bottom: 5px;
4164
+ margin-bottom: 15px;
4165
4165
  border: 2px solid #fff;
4166
4166
  cursor: pointer;
4167
4167
  }
4168
- .icon-shipin2:before { content: "\E611"; }
4168
+ .icon-dianhua:before { content: "\E60E"; }
4169
4169
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4170
- .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
4171
- }
4172
-
4173
- .global.tel {
4170
+ .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
4171
+ .global.receipt {
4174
4172
  width: 35px;
4175
4173
  height: 55px;
4176
4174
  border-radius: 50%;
4177
4175
  text-align: center;
4178
- margin-bottom: 15px;
4176
+ margin-bottom: 5px;
4179
4177
  border: 2px solid #fff;
4180
4178
  cursor: pointer;
4181
4179
  }
4182
- .icon-dianhua:before { content: "\E60E"; }
4180
+ .icon-liuyan:before { content: "\E636"; }
4183
4181
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4184
- .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
4185
- .global.map {
4182
+ .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }
4183
+ .global.video {
4186
4184
  width: 35px;
4187
4185
  height: 55px;
4188
4186
  border-radius: 50%;
@@ -4191,10 +4189,12 @@ cursor: not-allowed;
4191
4189
  border: 2px solid #fff;
4192
4190
  cursor: pointer;
4193
4191
  }
4194
- .icon-daohang1:before { content: "\E612"; }
4192
+ .icon-shipin2:before { content: "\E611"; }
4195
4193
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4196
- .global.map > span { font-size: 10px; line-height: 20px; display: block;}
4197
- .global.receipt {
4194
+ .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
4195
+ }
4196
+
4197
+ .global.map {
4198
4198
  width: 35px;
4199
4199
  height: 55px;
4200
4200
  border-radius: 50%;
@@ -4203,6 +4203,6 @@ cursor: not-allowed;
4203
4203
  border: 2px solid #fff;
4204
4204
  cursor: pointer;
4205
4205
  }
4206
- .icon-liuyan:before { content: "\E636"; }
4206
+ .icon-daohang1:before { content: "\E612"; }
4207
4207
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4208
- .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }
4208
+ .global.map > span { font-size: 10px; line-height: 20px; display: block;}