unika-components 1.1.19 → 1.1.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,95 @@
1
1
 
2
+ /* 父容器样式调整 */
3
+ #index {
4
+ position: relative;
5
+ width: 100%;
6
+ height: 100vh;
7
+ overflow: hidden;
8
+ -webkit-overflow-scrolling: touch;
9
+ overscroll-behavior: contain;
10
+ touch-action: pan-y;
11
+ transform: translate3d(0, 0, 0);
12
+ -webkit-transform: translate3d(0, 0, 0);
13
+ }
14
+
15
+ /* 页面容器样式调整 */
16
+ .scroll-normal {
17
+ position: relative;
18
+ width: 100%;
19
+ height: 100%;
20
+ overflow: hidden;
21
+ overscroll-behavior: contain;
22
+ transform: translate3d(0, 0, 0);
23
+ -webkit-transform: translate3d(0, 0, 0);
24
+ }
25
+
26
+ /* 输入框容器特殊处理 */
27
+ .ele-wrap {
28
+ position: relative;
29
+ width: 100%;
30
+ height: 100%;
31
+ transform: translate3d(0, 0, 0);
32
+ -webkit-transform: translate3d(0, 0, 0);
33
+ contain: layout;
34
+ }
35
+
36
+ /* 移动设备键盘弹出时的特殊处理 */
37
+ @media screen and (max-aspect-ratio: 13/9) {
38
+ #index {
39
+ height: auto;
40
+ min-height: 100vh;
41
+ padding-bottom: env(keyboard-inset-height, 0px);
42
+ }
43
+
44
+ .scroll-normal {
45
+ height: auto;
46
+ min-height: 100%;
47
+ }
48
+ }
49
+
50
+ /* 安卓特定修复 */
51
+ @supports (-webkit-touch-callout: none) {
52
+ .ele-wrap {
53
+ position: relative;
54
+ z-index: 1;
55
+ }
56
+ }
57
+
58
+ /* 确保输入框可见 */
59
+ :deep(.form-input) {
60
+ position: absolute;
61
+ z-index: 2;
62
+ transform: translate3d(0, 0, 0);
63
+ -webkit-transform: translate3d(0, 0, 0);
64
+ }
65
+
66
+ /* 防止输入框被其他元素覆盖 */
67
+ :deep(.input-wrapper) {
68
+ position: relative;
69
+ z-index: 3;
70
+ }
71
+
72
+ .scroll-wrap.scroll-long {
73
+ position: relative;
74
+ width: 100%;
75
+ height: 100vh;
76
+ overflow: hidden;
77
+ -webkit-overflow-scrolling: touch;
78
+ overscroll-behavior: contain;
79
+ touch-action: pan-y;
80
+ transform: translate3d(0, 0, 0);
81
+ -webkit-transform: translate3d(0, 0, 0);
82
+ }
83
+
84
+ /* 移动设备键盘弹出时的特殊处理 */
85
+ @media screen and (max-aspect-ratio: 13/9) {
86
+ .scroll-wrap.scroll-long {
87
+ height: auto;
88
+ min-height: 100vh;
89
+ padding-bottom: env(keyboard-inset-height, 0px);
90
+ }
91
+ }
92
+
2
93
  .form-container {
3
94
  position: relative;
4
95
  width: 100%;
@@ -14,7 +105,83 @@
14
105
  max-height: 100%;
15
106
  width: 100%;
16
107
  }
108
+ .ele-shape {
109
+ position: absolute;
110
+ overflow: hidden;
111
+ }
112
+
113
+ .ani-wrap {
114
+ width: 100%;
115
+ height: 100%;
116
+ box-sizing: border-box;
117
+ }
118
+
119
+ .e-shape {
120
+ width: 100%;
121
+ height: 100%;
122
+ }
17
123
 
124
+ .svg-container :deep(svg) {
125
+ width: 100%;
126
+ height: 100%;
127
+ display: block;
128
+ }
129
+
130
+ .svg-loading,
131
+ .svg-error {
132
+ display: flex;
133
+ align-items: center;
134
+ justify-content: center;
135
+ width: 100%;
136
+ height: 100%;
137
+ background: rgba(0,0,0,0.05);
138
+ }
139
+ .element-video {
140
+ position: absolute;
141
+ overflow: hidden;
142
+ background-color: transparent;
143
+ }
144
+
145
+ .element-video .ani-wrap, .element-video img {
146
+ display: block;
147
+ width: 100%;
148
+ height: 100%;
149
+ }
150
+
151
+ .video-container {
152
+ width: 100%;
153
+ height: 100%;
154
+ }
155
+
156
+ .video-container iframe {
157
+ width: 100%;
158
+ height: 100%;
159
+ border: none;
160
+ }
161
+
162
+ .video-cover {
163
+ position: relative;
164
+ width: 100%;
165
+ height: 100%;
166
+ background-size: cover;
167
+ background-position: center;
168
+ cursor: pointer;
169
+ }
170
+
171
+ .video-cover .play-btn {
172
+ position: absolute;
173
+ left: 50%;
174
+ top: 50%;
175
+ transform: translate(-50%, -50%);
176
+ width: 50px;
177
+ height: 50px;
178
+ opacity: 0.8;
179
+ transition: opacity 0.2s;
180
+ }
181
+
182
+ .video-cover:hover .play-btn {
183
+ opacity: 1;
184
+ }
18
185
  .ele-text {
19
186
  position: relative;
20
187
  }
@@ -81,355 +248,351 @@
81
248
  transform: scale(1);
82
249
  opacity: 1;
83
250
  }
84
- }.element-ditu .ani-wrap {
85
- width: 100%;
86
- height: 100%;
87
- overflow: hidden
251
+ }
252
+ .ele-lottie .ele-lotwrap {
253
+ overflow: hidden;
254
+ }
255
+ @keyframes jumpheart {
256
+ to {
257
+ -webkit-transform: scale(1.2);
258
+ transform: scale(1.2)
259
+ }
260
+ }
261
+ .ele-calendar {
262
+ position: relative;
263
+ width: 325px !important;
264
+ min-height: 325px !important;
265
+ height: auto !important;
88
266
  }
89
267
 
90
- .element-ditu .map {
91
- width: 100%;
92
- height: 100%
268
+ .ele-calendar .drag-point {
269
+ cursor: default !important;
93
270
  }
94
271
 
95
- .element-ditu .map .el-button {
272
+ .ele-calendar .ani-wrap {
273
+ position: relative;
96
274
  width: 100%;
97
- height: 100%;
98
- display: -webkit-box;
99
- display: -ms-flexbox;
275
+ min-height: 325px !important;
276
+ height: auto !important;
277
+ padding: 22px 0;
278
+ }
279
+
280
+ .ele-calendar .ani-wrap .can-wrap .can-top {
100
281
  display: flex;
101
- -webkit-box-align: center;
102
- -ms-flex-align: center;
103
- align-items: center;
104
- padding: 0;
105
- -webkit-box-pack: center;
106
- -ms-flex-pack: center;
107
- justify-content: center;
108
- background: inherit;
109
- color: inherit;
110
- border: none
282
+ justify-content: space-between;
283
+ align-items: flex-end;
284
+ line-height: 1;
285
+ padding: 0 47px 20px;
111
286
  }
112
287
 
113
- .element-ditu .center-map {
114
- width: 100%;
115
- height: 100%;
116
- background: #fff
288
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
289
+ font-size: 25px;
290
+ padding-bottom: 4px;
117
291
  }
118
292
 
119
- .element-ditu .mask-map {
120
- position: absolute;
121
- width: 100%;
122
- height: 100%;
123
- top: 0
293
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
294
+ font-size: 25px;
124
295
  }
125
- .map-iframe {
126
- width: 100%;
127
- height: 100%;
128
- }.ele-shape {
129
- position: absolute;
130
- overflow: hidden;
296
+
297
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
298
+ position: relative;
299
+ top: 2px;
300
+ font-size: 57px;
131
301
  }
132
302
 
133
- .ani-wrap {
134
- width: 100%;
135
- height: 100%;
136
- box-sizing: border-box;
303
+ .ele-calendar .ani-wrap .can-wrap .can-main {
304
+ padding: 0 23px;
137
305
  }
138
306
 
139
- .e-shape {
140
- width: 100%;
141
- height: 100%;
307
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
308
+ display: flex;
309
+ justify-content: flex-start;
310
+ height: 25px;
311
+ line-height: 25px;
312
+ padding: 0 10px;
313
+ border-radius: 13px;
142
314
  }
143
315
 
144
- .svg-container :deep(svg) {
145
- width: 100%;
146
- height: 100%;
147
- display: block;
316
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-week span {
317
+ width: 14.2%;
318
+ text-align: center;
319
+ color: #fff;
320
+ font-size: 12px;
148
321
  }
149
322
 
150
- .svg-loading,
151
- .svg-error {
152
- display: flex;
153
- align-items: center;
154
- justify-content: center;
155
- width: 100%;
156
- height: 100%;
157
- background: rgba(0,0,0,0.05);
158
- }.count-down .drag-point {
159
- cursor: default!important
323
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul {
324
+ font-size: 0;
325
+ padding: 5px 10px 0;
326
+ text-align: left;
160
327
  }
161
328
 
162
- .count-down .ani-wrap {
163
- width: 100%;
164
- height: 100%
329
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li {
330
+ position: relative;
331
+ display: inline-block;
332
+ height: 25px;
333
+ text-align: center;
334
+ margin-top: 8px;
165
335
  }
166
336
 
167
- .count-down .count-text,.count-down .finish-cont {
168
- display: -webkit-box;
169
- display: -ms-flexbox;
170
- display: flex;
171
- height: 100%;
172
- -webkit-box-align: center;
173
- -ms-flex-align: center;
174
- align-items: center;
175
- -webkit-box-pack: center;
176
- -ms-flex-pack: center;
177
- justify-content: center
337
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active .iconfont {
338
+ display: block;
178
339
  }
179
340
 
180
- .count-down .finish-cont {
181
- width: 100%
341
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active span {
342
+ color: #fff !important;
182
343
  }
183
344
 
184
- .count-down .count-flip {
185
- display: -webkit-box;
186
- display: -ms-flexbox;
187
- display: flex;
188
- height: 100%;
189
- -webkit-box-align: center;
190
- -ms-flex-align: center;
191
- align-items: center;
192
- -webkit-box-pack: center;
193
- -ms-flex-pack: center;
194
- justify-content: center
345
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
346
+ animation: jumpheart 0.8s ease infinite alternate;
195
347
  }
196
348
 
197
- .count-down .count-flip .numscroll {
198
- -webkit-animation: numscroll .4s ease-in-out;
199
- animation: numscroll .4s ease-in-out;
200
- -webkit-animation-fill-mode: both;
201
- animation-fill-mode: both
349
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
350
+ display: none;
351
+ font-size: 26px;
202
352
  }
203
353
 
204
- .count-down .count-flip .numscroll .curr-num {
205
- -webkit-transition: all .3s ease-in-out;
206
- transition: all .3s ease-in-out;
207
- opacity: .6;
208
- -webkit-transform: scale(.5)!important;
209
- transform: scale(.5)!important
354
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li span {
355
+ position: absolute;
356
+ left: 50%;
357
+ top: 50%;
358
+ z-index: 1;
359
+ color: #666;
360
+ font-size: 13px;
361
+ transform: translate(-50%, -52%);
210
362
  }
211
363
 
212
- @-webkit-keyframes numscroll {
213
- 0% {
214
- -webkit-transform: translateZ(0);
215
- transform: translateZ(0)
216
- }
217
-
218
- to {
219
- -webkit-transform: translate3d(0,100%,0);
220
- transform: translate3d(0,100%,0)
221
- }
364
+ .ele-calendar .bottom-center,
365
+ .ele-calendar .left-center,
366
+ .ele-calendar .right-center,
367
+ .ele-calendar .top-center {
368
+ display: none !important;
222
369
  }
223
370
 
224
- @keyframes numscroll {
225
- 0% {
226
- -webkit-transform: translateZ(0);
227
- transform: translateZ(0)
228
- }
371
+ .ele-calendar .ani-wrap .can-wrap2 {
372
+ padding: 21px 23px 0
373
+ }
229
374
 
230
- to {
231
- -webkit-transform: translate3d(0,100%,0);
232
- transform: translate3d(0,100%,0)
233
- }
375
+ .ele-calendar .ani-wrap .can-wrap2 .can-top {
376
+ display: -webkit-box;
377
+ display: -ms-flexbox;
378
+ display: flex;
379
+ -webkit-box-pack: justify;
380
+ -ms-flex-pack: justify;
381
+ justify-content: space-between;
382
+ -webkit-box-align: end;
383
+ -ms-flex-align: end;
384
+ align-items: flex-end;
385
+ line-height: 1;
386
+ padding: 0 16px 22px;
387
+ font-size: 36px
234
388
  }
235
389
 
236
- .count-down .count-flip .c-com {
237
- min-width: 50px;
238
- height: auto;
239
- margin: 6px;
240
- padding: 5px 0 6px;
241
- background-color: #111
390
+ .ele-calendar .ani-wrap .can-wrap2 .can-top span {
391
+ font-size: 16px
242
392
  }
243
393
 
244
- .count-down .count-flip .c-com .flex-wrap {
394
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week {
245
395
  display: -webkit-box;
246
396
  display: -ms-flexbox;
247
397
  display: flex;
248
- position: relative;
249
- width: 100%;
250
- height: 100%;
251
- -webkit-box-align: center;
252
- -ms-flex-align: center;
253
- align-items: center
398
+ -webkit-box-pack: start;
399
+ -ms-flex-pack: start;
400
+ justify-content: flex-start;
401
+ height: 25px;
402
+ line-height: 25px;
403
+ padding: 0 10px;
404
+ border-radius: 13px
254
405
  }
255
406
 
256
- .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
257
- line-height: 27px
407
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week span {
408
+ width: 14.2%;
409
+ text-align: center;
410
+ color: #fff;
411
+ font-size: 12px;
412
+ font-weight: 600
258
413
  }
259
414
 
260
- .count-down .count-flip .c-com .flex-wrap .next-num {
415
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date {
416
+ position: relative
417
+ }
418
+
419
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date .can-year {
261
420
  position: absolute;
262
- top: -100%
421
+ white-space: nowrap;
422
+ left: 50%;
423
+ top: 15%;
424
+ -webkit-transform: translateX(-50%);
425
+ transform: translateX(-50%);
426
+ font-size: 76px;
427
+ opacity: .1;
428
+ font-weight: 600
263
429
  }
264
430
 
265
- .count-down .count-flip .c-com .flex-wrap .curr-num {
266
- -webkit-transform: scale(1);
267
- transform: scale(1)
431
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul {
432
+ font-size: 0;
433
+ padding: 5px 10px 0;
434
+ text-align: left
268
435
  }
269
436
 
270
- .count-down .bottom-center,.count-down .left-bottom,.count-down .left-center,.count-down .left-top,.count-down .right-bottom,.count-down .right-center,.count-down .right-top,.count-down .top-center {
271
- display: none!important
437
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li {
438
+ position: relative;
439
+ display: inline-block;
440
+ width: 14.2%;
441
+ height: 25px;
442
+ text-align: center;
443
+ margin-top: 8px
272
444
  }
273
445
 
274
- .c-wrap {
275
- width: 100%;
276
- height: 100%;
277
- overflow: hidden;
278
- font-size: 0
446
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active .iconfont {
447
+ display: block;
448
+ position: absolute;
449
+ left: 17%;
450
+ top: 0;
451
+ font-size: 25px
279
452
  }
280
453
 
281
- .c-wrap.c-day-wrap {
282
- text-align: center
454
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active span {
455
+ color: #fff!important
283
456
  }
284
457
 
285
- .c-wrap.c-day-wrap .c-num {
286
- width: auto
458
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.heart-ani .iconfont {
459
+ -webkit-animation: jumpheart .8s ease infinite alternate;
460
+ animation: jumpheart .8s ease infinite alternate
287
461
  }
288
462
 
289
- .c-wrap .c-num {
290
- display: inline-block;
291
- width: 50%;
292
- overflow: hidden;
293
- font-size: 20px;
294
- color: #999
463
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li .iconfont {
464
+ display: none;
465
+ font-size: 26px
295
466
  }
296
467
 
297
- .c-wrap .c-left .flex-wrap {
298
- display: -webkit-box;
299
- display: -ms-flexbox;
300
- display: flex;
301
- -webkit-box-pack: end;
302
- -ms-flex-pack: end;
303
- justify-content: flex-end
468
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li span {
469
+ position: absolute;
470
+ left: 50%;
471
+ top: 50%;
472
+ z-index: 1;
473
+ color: #666;
474
+ font-size: 13px;
475
+ -webkit-transform: translate(-50%,-52%);
476
+ transform: translate(-50%,-52%)
304
477
  }
305
478
 
306
- .c-wrap .c-text {
479
+ .ele-calendar .ani-wrap .can-wrap3 .can-top {
307
480
  display: -webkit-box;
308
481
  display: -ms-flexbox;
309
482
  display: flex;
310
- width: 100%;
311
- font-size: 12px;
312
- -webkit-box-pack: center;
313
- -ms-flex-pack: center;
314
- justify-content: center;
315
- -webkit-box-align: center;
316
- -ms-flex-align: center;
317
- align-items: center;
318
- white-space: nowrap
319
- }
320
- #audio {
321
- position: absolute;
322
- right: 10px;
323
- top: 10px;
324
- z-index: 103;
325
- width: 30px;
326
- height: 30px;
327
- display: flex;
328
- align-items: center;
483
+ -webkit-box-pack: justify;
484
+ -ms-flex-pack: justify;
485
+ justify-content: space-between;
486
+ -webkit-box-align: end;
487
+ -ms-flex-align: end;
488
+ align-items: flex-end;
489
+ line-height: 1;
490
+ padding: 18px 33px 10px;
491
+ font-size: 36px;
329
492
  }
330
493
 
331
- #audio .mrotate {
332
- animation: mrotate 5s linear infinite;
494
+ .ele-calendar .ani-wrap .can-wrap3 .can-top span {
495
+ font-size: 16px
333
496
  }
334
497
 
335
- @keyframes mrotate {
336
- to {
337
- transform: rotate(1turn);
338
- }
498
+ .ele-calendar .ani-wrap .can-wrap3 .can-top .can-year {
499
+ font-size: 20px
339
500
  }
340
501
 
341
- #audio .audio {
342
- width: 100%;
343
- height: 100%;
502
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week {
503
+ display: -webkit-box;
504
+ display: -ms-flexbox;
344
505
  display: flex;
345
- align-items: center;
346
- justify-content: center;
347
- color: #fff;
348
- background: #666;
349
- border-radius: 50%;
350
- overflow: hidden;
351
- cursor: pointer;
352
- transition: all 0.3s ease;
506
+ -webkit-box-pack: start;
507
+ -ms-flex-pack: start;
508
+ justify-content: flex-start;
509
+ height: 40px;
510
+ line-height: 40px;
511
+ padding: 0 34px;
512
+ border-bottom: 1px solid
353
513
  }
354
514
 
355
- #audio .audio.a-border {
356
- border: 1px solid #fff;
515
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week span {
516
+ width: 14.2%;
517
+ text-align: center;
518
+ color: #fff;
519
+ font-size: 12px;
520
+ font-weight: 600
357
521
  }
358
522
 
359
- #audio .audio .music-icon {
360
- display: block;
361
- width: 60%;
362
- height: 60%;
363
- object-fit: contain;
523
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date {
524
+ position: relative
364
525
  }
365
526
 
366
- #audio .audio .iconfont {
367
- font-size: 2opx;
368
- line-height: 1;
527
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul {
528
+ font-size: 0;
529
+ padding: 5px 33px 0;
530
+ text-align: left
369
531
  }
370
- #audio .icon-cancel {
371
- position: absolute;
372
- width: 100%;
373
- height: 100%;
374
- border-radius: 50%;
375
- overflow: hidden;
376
- padding: 15px 0;
532
+
533
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li {
534
+ position: relative;
535
+ display: inline-block;
536
+ width: 14.2%;
537
+ height: 25px;
538
+ text-align: center;
539
+ margin-top: 8px;
377
540
  }
378
- #audio .icon-cancel .icon-h {
379
- transform: rotate(45deg);
380
- width: 100%;
381
- height: 2px;
382
- background: #fff;
383
- }
384
- #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
385
- content: '';
386
- position: absolute;
387
- width: 100%;
388
- height: 2px;
389
- background: #fff;
390
- }.call {
541
+
542
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active {
543
+ color: #eee
544
+ }
545
+
546
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active .iconfont {
547
+ display: block;
391
548
  position: absolute;
392
- cursor: pointer;
393
- user-select: none;
549
+ left: 12%;
550
+ top: 2px;
394
551
  }
395
552
 
396
- .call .ani-wrap {
397
- display: flex;
398
- justify-content: center;
399
- align-items: center;
400
- width: 100%;
401
- height: 100%;
402
- overflow: hidden;
403
- transition: opacity 0.2s;
553
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active span {
554
+ font-size: 12px
404
555
  }
405
556
 
406
- .call .ani-wrap:hover {
407
- opacity: 0.9;
557
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.heart-ani .iconfont {
558
+ -webkit-animation: jumpheart .8s ease infinite alternate;
559
+ animation: jumpheart .8s ease infinite alternate
408
560
  }
409
561
 
410
- .call-content {
411
- display: flex;
412
- align-items: center;
413
- justify-content: center;
562
+ @keyframes jumpheart {
563
+ to {
564
+ -webkit-transform: scale(1.2);
565
+ transform: scale(1.2)
566
+ }
414
567
  }
415
568
 
416
- .btn-text {
417
- margin-left: 10px;
569
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li .iconfont {
570
+ display: none;
571
+ font-size: 26px
418
572
  }
419
573
 
420
- /* 这里可以添加实际的电话图标样式 */
421
- /* .iconfont.hb-tel {
422
- display: inline-block;
423
- width: 16px;
424
- height: 16px;
425
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>');
426
- background-repeat: no-repeat;
427
- background-position: center;
428
- background-size: contain;
429
- } */
574
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li span {
575
+ position: absolute;
576
+ left: 50%;
577
+ top: 50%;
578
+ z-index: 1;
579
+ color: #666;
580
+ font-size: 13px;
581
+ -webkit-transform: translate(-50%,-52%);
582
+ transform: translate(-50%,-52%)
583
+ }
430
584
 
431
- .hb-tel:before {
432
- content: "\E642";
585
+ .ele-calendar .bottom-center,.ele-calendar .left-center,.ele-calendar .right-center,.ele-calendar .top-center {
586
+ display: none!important
587
+ }
588
+ .icon-tuoyuanxing:before {
589
+ content: "\E6A7";
590
+ }
591
+ .icon-zan1:before {
592
+ content: "\E66D";
593
+ }
594
+ .icon-xingzhuangjiehe:before {
595
+ content: "\E6A6";
433
596
  }.ele-img {
434
597
  position: absolute;
435
598
  overflow: hidden;
@@ -479,404 +642,381 @@
479
642
  opacity: 1;
480
643
  transform: scale(1);
481
644
  }
482
- }
483
- @keyframes jumpheart {
484
- to {
485
- -webkit-transform: scale(1.2);
486
- transform: scale(1.2)
487
- }
488
- }
489
- .ele-calendar {
490
- position: relative;
491
- width: 325px !important;
492
- min-height: 325px !important;
493
- height: auto !important;
494
- }
495
-
496
- .ele-calendar .drag-point {
497
- cursor: default !important;
498
- }
499
-
500
- .ele-calendar .ani-wrap {
501
- position: relative;
645
+ }.element-ditu .ani-wrap {
502
646
  width: 100%;
503
- min-height: 325px !important;
504
- height: auto !important;
505
- padding: 22px 0;
506
- }
507
-
508
- .ele-calendar .ani-wrap .can-wrap .can-top {
509
- display: flex;
510
- justify-content: space-between;
511
- align-items: flex-end;
512
- line-height: 1;
513
- padding: 0 47px 20px;
514
- }
515
-
516
- .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
517
- font-size: 25px;
518
- padding-bottom: 4px;
519
- }
520
-
521
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
522
- font-size: 25px;
523
- }
524
-
525
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
526
- position: relative;
527
- top: 2px;
528
- font-size: 57px;
647
+ height: 100%;
648
+ overflow: hidden
529
649
  }
530
650
 
531
- .ele-calendar .ani-wrap .can-wrap .can-main {
532
- padding: 0 23px;
651
+ .element-ditu .map {
652
+ width: 100%;
653
+ height: 100%
533
654
  }
534
655
 
535
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
656
+ .element-ditu .map .el-button {
657
+ width: 100%;
658
+ height: 100%;
659
+ display: -webkit-box;
660
+ display: -ms-flexbox;
536
661
  display: flex;
537
- justify-content: flex-start;
538
- height: 25px;
539
- line-height: 25px;
540
- padding: 0 10px;
541
- border-radius: 13px;
542
- }
543
-
544
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week span {
545
- width: 14.2%;
546
- text-align: center;
547
- color: #fff;
548
- font-size: 12px;
549
- }
550
-
551
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul {
552
- font-size: 0;
553
- padding: 5px 10px 0;
554
- text-align: left;
555
- }
556
-
557
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li {
558
- position: relative;
559
- display: inline-block;
560
- height: 25px;
561
- text-align: center;
562
- margin-top: 8px;
563
- }
564
-
565
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active .iconfont {
566
- display: block;
567
- }
568
-
569
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active span {
570
- color: #fff !important;
571
- }
572
-
573
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
574
- animation: jumpheart 0.8s ease infinite alternate;
662
+ -webkit-box-align: center;
663
+ -ms-flex-align: center;
664
+ align-items: center;
665
+ padding: 0;
666
+ -webkit-box-pack: center;
667
+ -ms-flex-pack: center;
668
+ justify-content: center;
669
+ background: inherit;
670
+ color: inherit;
671
+ border: none
575
672
  }
576
673
 
577
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
578
- display: none;
579
- font-size: 26px;
674
+ .element-ditu .center-map {
675
+ width: 100%;
676
+ height: 100%;
677
+ background: #fff
580
678
  }
581
679
 
582
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li span {
680
+ .element-ditu .mask-map {
583
681
  position: absolute;
584
- left: 50%;
585
- top: 50%;
586
- z-index: 1;
587
- color: #666;
588
- font-size: 13px;
589
- transform: translate(-50%, -52%);
590
- }
591
-
592
- .ele-calendar .bottom-center,
593
- .ele-calendar .left-center,
594
- .ele-calendar .right-center,
595
- .ele-calendar .top-center {
596
- display: none !important;
597
- }
598
-
599
- .ele-calendar .ani-wrap .can-wrap2 {
600
- padding: 21px 23px 0
682
+ width: 100%;
683
+ height: 100%;
684
+ top: 0
601
685
  }
602
-
603
- .ele-calendar .ani-wrap .can-wrap2 .can-top {
604
- display: -webkit-box;
605
- display: -ms-flexbox;
606
- display: flex;
607
- -webkit-box-pack: justify;
608
- -ms-flex-pack: justify;
609
- justify-content: space-between;
610
- -webkit-box-align: end;
611
- -ms-flex-align: end;
612
- align-items: flex-end;
613
- line-height: 1;
614
- padding: 0 16px 22px;
615
- font-size: 36px
686
+ .map-iframe {
687
+ width: 100%;
688
+ height: 100%;
689
+ }.ele-form {
690
+ position: absolute;
691
+ user-select: none;
692
+ }
693
+
694
+ .f-select {
695
+ cursor: pointer;
696
+ }
697
+
698
+ .ani-wrap {
699
+ position: relative;
700
+ }
701
+
702
+ .f-select .ani-wrap .fs-tit {
703
+ position: relative;
704
+ display: flex;
705
+ padding: 0 5px;
706
+ height: 35px;
707
+ line-height: 35px;
708
+ align-items: center;
709
+ }
710
+
711
+ .require {
712
+ padding: 0 5px 0 0;
713
+ color: red;
714
+ vertical-align: middle;
715
+ }
716
+
717
+ .fs-cont {
718
+ padding-right: 15px;
719
+ white-space: nowrap;
720
+ overflow: hidden;
721
+ text-overflow: ellipsis;
722
+ flex-grow: 1;
723
+ }
724
+
725
+ .icon-bofang1 {
726
+ font-size: 12px;
727
+ transition: transform 0.2s ease;
728
+ }
729
+
730
+ .rotate-180 {
731
+ transform: rotate(180deg) !important;
732
+ }
733
+
734
+ .f-real {
735
+ position: absolute;
736
+ left: 0;
737
+ top: 0;
738
+ width: 100%;
739
+ height: 100%;
740
+ z-index: 1;
741
+ opacity: 0;
742
+ cursor: pointer;
743
+ }
744
+
745
+ .dropdown-menu {
746
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
747
+ }
748
+
749
+ .dropdown-item {
750
+ padding: 8px 10px;
751
+ cursor: pointer;
752
+ transition: background-color 0.2s;
753
+ }
754
+
755
+ .dropdown-item:hover {
756
+ background-color: #f5f5f5;
757
+ }
758
+
759
+ .dropdown-item.selected {
760
+ background-color: #e6f7ff;
761
+ color: #1890ff;
762
+ }
763
+
764
+ .f-select .fs-tit .icon-bofang1 {
765
+ position: absolute;
766
+ right: 10px;
767
+ font-size: 12px;
768
+ display: inline-block;
769
+ transform: rotate(90deg);
770
+ }
771
+
772
+ .icon-bofang1:before {
773
+ content: "\E6CF";
774
+ }
775
+
776
+ .has-error {
777
+ border-color: #ff4d4f !important;
778
+ }
779
+
780
+ .error-tip {
781
+ position: fixed;
782
+ left: 0;
783
+ top: 0;
784
+ width: 100%;
785
+ height: 100%;
786
+ z-index: 1000;
787
+ }.count-down .drag-point {
788
+ cursor: default!important
616
789
  }
617
790
 
618
- .ele-calendar .ani-wrap .can-wrap2 .can-top span {
619
- font-size: 16px
791
+ .count-down .ani-wrap {
792
+ width: 100%;
793
+ height: 100%
620
794
  }
621
795
 
622
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week {
796
+ .count-down .count-text,.count-down .finish-cont {
623
797
  display: -webkit-box;
624
798
  display: -ms-flexbox;
625
799
  display: flex;
626
- -webkit-box-pack: start;
627
- -ms-flex-pack: start;
628
- justify-content: flex-start;
629
- height: 25px;
630
- line-height: 25px;
631
- padding: 0 10px;
632
- border-radius: 13px
633
- }
634
-
635
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week span {
636
- width: 14.2%;
637
- text-align: center;
638
- color: #fff;
639
- font-size: 12px;
640
- font-weight: 600
800
+ height: 100%;
801
+ -webkit-box-align: center;
802
+ -ms-flex-align: center;
803
+ align-items: center;
804
+ -webkit-box-pack: center;
805
+ -ms-flex-pack: center;
806
+ justify-content: center
641
807
  }
642
808
 
643
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date {
644
- position: relative
809
+ .count-down .finish-cont {
810
+ width: 100%
645
811
  }
646
812
 
647
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date .can-year {
648
- position: absolute;
649
- white-space: nowrap;
650
- left: 50%;
651
- top: 15%;
652
- -webkit-transform: translateX(-50%);
653
- transform: translateX(-50%);
654
- font-size: 76px;
655
- opacity: .1;
656
- font-weight: 600
813
+ .count-down .count-flip {
814
+ display: -webkit-box;
815
+ display: -ms-flexbox;
816
+ display: flex;
817
+ height: 100%;
818
+ -webkit-box-align: center;
819
+ -ms-flex-align: center;
820
+ align-items: center;
821
+ -webkit-box-pack: center;
822
+ -ms-flex-pack: center;
823
+ justify-content: center
657
824
  }
658
825
 
659
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul {
660
- font-size: 0;
661
- padding: 5px 10px 0;
662
- text-align: left
826
+ .count-down .count-flip .numscroll {
827
+ -webkit-animation: numscroll .4s ease-in-out;
828
+ animation: numscroll .4s ease-in-out;
829
+ -webkit-animation-fill-mode: both;
830
+ animation-fill-mode: both
663
831
  }
664
832
 
665
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li {
666
- position: relative;
667
- display: inline-block;
668
- width: 14.2%;
669
- height: 25px;
670
- text-align: center;
671
- margin-top: 8px
833
+ .count-down .count-flip .numscroll .curr-num {
834
+ -webkit-transition: all .3s ease-in-out;
835
+ transition: all .3s ease-in-out;
836
+ opacity: .6;
837
+ -webkit-transform: scale(.5)!important;
838
+ transform: scale(.5)!important
672
839
  }
673
840
 
674
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active .iconfont {
675
- display: block;
676
- position: absolute;
677
- left: 17%;
678
- top: 0;
679
- font-size: 25px
680
- }
841
+ @-webkit-keyframes numscroll {
842
+ 0% {
843
+ -webkit-transform: translateZ(0);
844
+ transform: translateZ(0)
845
+ }
681
846
 
682
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active span {
683
- color: #fff!important
847
+ to {
848
+ -webkit-transform: translate3d(0,100%,0);
849
+ transform: translate3d(0,100%,0)
850
+ }
684
851
  }
685
852
 
686
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.heart-ani .iconfont {
687
- -webkit-animation: jumpheart .8s ease infinite alternate;
688
- animation: jumpheart .8s ease infinite alternate
689
- }
853
+ @keyframes numscroll {
854
+ 0% {
855
+ -webkit-transform: translateZ(0);
856
+ transform: translateZ(0)
857
+ }
690
858
 
691
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li .iconfont {
692
- display: none;
693
- font-size: 26px
859
+ to {
860
+ -webkit-transform: translate3d(0,100%,0);
861
+ transform: translate3d(0,100%,0)
862
+ }
694
863
  }
695
864
 
696
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li span {
697
- position: absolute;
698
- left: 50%;
699
- top: 50%;
700
- z-index: 1;
701
- color: #666;
702
- font-size: 13px;
703
- -webkit-transform: translate(-50%,-52%);
704
- transform: translate(-50%,-52%)
865
+ .count-down .count-flip .c-com {
866
+ min-width: 50px;
867
+ height: auto;
868
+ margin: 6px;
869
+ padding: 5px 0 6px;
870
+ background-color: #111
705
871
  }
706
872
 
707
- .ele-calendar .ani-wrap .can-wrap3 .can-top {
873
+ .count-down .count-flip .c-com .flex-wrap {
708
874
  display: -webkit-box;
709
875
  display: -ms-flexbox;
710
876
  display: flex;
711
- -webkit-box-pack: justify;
712
- -ms-flex-pack: justify;
713
- justify-content: space-between;
714
- -webkit-box-align: end;
715
- -ms-flex-align: end;
716
- align-items: flex-end;
717
- line-height: 1;
718
- padding: 18px 33px 10px;
719
- font-size: 36px;
877
+ position: relative;
878
+ width: 100%;
879
+ height: 100%;
880
+ -webkit-box-align: center;
881
+ -ms-flex-align: center;
882
+ align-items: center
720
883
  }
721
884
 
722
- .ele-calendar .ani-wrap .can-wrap3 .can-top span {
723
- font-size: 16px
885
+ .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
886
+ line-height: 27px
724
887
  }
725
888
 
726
- .ele-calendar .ani-wrap .can-wrap3 .can-top .can-year {
727
- font-size: 20px
889
+ .count-down .count-flip .c-com .flex-wrap .next-num {
890
+ position: absolute;
891
+ top: -100%
728
892
  }
729
893
 
730
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week {
731
- display: -webkit-box;
732
- display: -ms-flexbox;
733
- display: flex;
734
- -webkit-box-pack: start;
735
- -ms-flex-pack: start;
736
- justify-content: flex-start;
737
- height: 40px;
738
- line-height: 40px;
739
- padding: 0 34px;
740
- border-bottom: 1px solid
894
+ .count-down .count-flip .c-com .flex-wrap .curr-num {
895
+ -webkit-transform: scale(1);
896
+ transform: scale(1)
741
897
  }
742
898
 
743
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week span {
744
- width: 14.2%;
745
- text-align: center;
746
- color: #fff;
747
- font-size: 12px;
748
- font-weight: 600
899
+ .count-down .bottom-center,.count-down .left-bottom,.count-down .left-center,.count-down .left-top,.count-down .right-bottom,.count-down .right-center,.count-down .right-top,.count-down .top-center {
900
+ display: none!important
749
901
  }
750
902
 
751
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date {
752
- position: relative
903
+ .c-wrap {
904
+ width: 100%;
905
+ height: 100%;
906
+ overflow: hidden;
907
+ font-size: 0
753
908
  }
754
909
 
755
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul {
756
- font-size: 0;
757
- padding: 5px 33px 0;
758
- text-align: left
910
+ .c-wrap.c-day-wrap {
911
+ text-align: center
759
912
  }
760
913
 
761
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li {
762
- position: relative;
763
- display: inline-block;
764
- width: 14.2%;
765
- height: 25px;
766
- text-align: center;
767
- margin-top: 8px;
914
+ .c-wrap.c-day-wrap .c-num {
915
+ width: auto
768
916
  }
769
917
 
770
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active {
771
- color: #eee
918
+ .c-wrap .c-num {
919
+ display: inline-block;
920
+ width: 50%;
921
+ overflow: hidden;
922
+ font-size: 20px;
923
+ color: #999
772
924
  }
773
925
 
774
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active .iconfont {
775
- display: block;
776
- position: absolute;
777
- left: 12%;
778
- top: 2px;
926
+ .c-wrap .c-left .flex-wrap {
927
+ display: -webkit-box;
928
+ display: -ms-flexbox;
929
+ display: flex;
930
+ -webkit-box-pack: end;
931
+ -ms-flex-pack: end;
932
+ justify-content: flex-end
779
933
  }
780
934
 
781
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active span {
782
- font-size: 12px
935
+ .c-wrap .c-text {
936
+ display: -webkit-box;
937
+ display: -ms-flexbox;
938
+ display: flex;
939
+ width: 100%;
940
+ font-size: 12px;
941
+ -webkit-box-pack: center;
942
+ -ms-flex-pack: center;
943
+ justify-content: center;
944
+ -webkit-box-align: center;
945
+ -ms-flex-align: center;
946
+ align-items: center;
947
+ white-space: nowrap
948
+ }
949
+ #audio {
950
+ position: absolute;
951
+ right: 10px;
952
+ top: 10px;
953
+ z-index: 103;
954
+ width: 30px;
955
+ height: 30px;
956
+ display: flex;
957
+ align-items: center;
783
958
  }
784
959
 
785
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.heart-ani .iconfont {
786
- -webkit-animation: jumpheart .8s ease infinite alternate;
787
- animation: jumpheart .8s ease infinite alternate
960
+ #audio .mrotate {
961
+ animation: mrotate 5s linear infinite;
788
962
  }
789
963
 
790
- @keyframes jumpheart {
964
+ @keyframes mrotate {
791
965
  to {
792
- -webkit-transform: scale(1.2);
793
- transform: scale(1.2)
966
+ transform: rotate(1turn);
794
967
  }
795
968
  }
796
969
 
797
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li .iconfont {
798
- display: none;
799
- font-size: 26px
800
- }
801
-
802
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li span {
803
- position: absolute;
804
- left: 50%;
805
- top: 50%;
806
- z-index: 1;
807
- color: #666;
808
- font-size: 13px;
809
- -webkit-transform: translate(-50%,-52%);
810
- transform: translate(-50%,-52%)
811
- }
812
-
813
- .ele-calendar .bottom-center,.ele-calendar .left-center,.ele-calendar .right-center,.ele-calendar .top-center {
814
- display: none!important
815
- }
816
- .icon-tuoyuanxing:before {
817
- content: "\E6A7";
818
- }
819
- .icon-zan1:before {
820
- content: "\E66D";
821
- }
822
- .icon-xingzhuangjiehe:before {
823
- content: "\E6A6";
824
- }.ele-effect {
825
- will-change: transform;
826
- }
827
-
828
- .ele-effect .effect-wrap {
829
- position: relative;
970
+ #audio .audio {
830
971
  width: 100%;
831
972
  height: 100%;
973
+ display: flex;
974
+ align-items: center;
975
+ justify-content: center;
976
+ color: #fff;
977
+ background: #666;
978
+ border-radius: 50%;
979
+ overflow: hidden;
980
+ cursor: pointer;
981
+ transition: all 0.3s ease;
832
982
  }
833
983
 
834
- .particle {
835
- position: absolute;
836
- background-repeat: no-repeat;
837
- background-size: contain;
838
- animation-name: falling;
839
- animation-timing-function: linear;
840
- animation-iteration-count: infinite;
841
- will-change: transform;
984
+ #audio .audio.a-border {
985
+ border: 1px solid #fff;
842
986
  }
843
987
 
844
- @keyframes falling {
845
- 0% {
846
- transform: translateY(0) rotate(0deg);
847
- opacity: 1;
848
- }
849
- 80% {
850
- opacity: 0.8;
851
- }
852
- 100% {
853
- transform: translateY(100vh) rotate(360deg);
854
- opacity: 0;
855
- }
856
- }
857
- .ele-lottie .ele-lotwrap {
858
- overflow: hidden
988
+ #audio .audio .music-icon {
989
+ display: block;
990
+ width: 60%;
991
+ height: 60%;
992
+ object-fit: contain;
859
993
  }
860
994
 
861
- .ele-effect .effect-wrap {
862
- position: relative;
863
- overflow: hidden;
995
+ #audio .audio .iconfont {
996
+ font-size: 2opx;
997
+ line-height: 1;
998
+ }
999
+ #audio .icon-cancel {
1000
+ position: absolute;
864
1001
  width: 100%;
865
- height: 100%
1002
+ height: 100%;
1003
+ border-radius: 50%;
1004
+ overflow: hidden;
1005
+ padding: 15px 0;
866
1006
  }
867
-
868
- .ele-effect .e-small {
1007
+ #audio .icon-cancel .icon-h {
1008
+ transform: rotate(45deg);
1009
+ width: 100%;
1010
+ height: 2px;
1011
+ background: #fff;
1012
+ }
1013
+ #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
1014
+ content: '';
869
1015
  position: absolute;
870
- width: 24px;
871
- height: 24px;
872
- background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
873
- background-size: cover;
874
- background-repeat: no-repeat;
875
- -webkit-transform-origin: center;
876
- transform-origin: center;
877
- -webkit-animation: snow 5s linear infinite;
878
- animation: snow 5s linear infinite
879
- }/* Iconfont definition */
1016
+ width: 100%;
1017
+ height: 2px;
1018
+ background: #fff;
1019
+ }/* Iconfont definition */
880
1020
  .icon-danmuliebiao1:before {
881
1021
  content: "\E68A";
882
1022
  }
@@ -1807,56 +1947,105 @@
1807
1947
 
1808
1948
  .btn-text {
1809
1949
  margin-left: 10px;
1950
+ }.ele-effect {
1951
+ will-change: transform;
1810
1952
  }
1811
- .element-video {
1812
- position: absolute;
1813
- overflow: hidden;
1814
- background-color: transparent;
1815
- }
1816
-
1817
- .element-video .ani-wrap, .element-video img {
1818
- display: block;
1819
- width: 100%;
1820
- height: 100%;
1821
- }
1822
-
1823
- .video-container {
1824
- width: 100%;
1825
- height: 100%;
1826
- }
1827
-
1828
- .video-container iframe {
1829
- width: 100%;
1830
- height: 100%;
1831
- border: none;
1832
- }
1833
-
1834
- .video-cover {
1835
- position: relative;
1836
- width: 100%;
1837
- height: 100%;
1838
- background-size: cover;
1839
- background-position: center;
1840
- cursor: pointer;
1953
+
1954
+ .ele-effect .effect-wrap {
1955
+ position: relative;
1956
+ width: 100%;
1957
+ height: 100%;
1958
+ }
1959
+
1960
+ .particle {
1961
+ position: absolute;
1962
+ background-repeat: no-repeat;
1963
+ background-size: contain;
1964
+ animation-name: falling;
1965
+ animation-timing-function: linear;
1966
+ animation-iteration-count: infinite;
1967
+ will-change: transform;
1968
+ }
1969
+
1970
+ @keyframes falling {
1971
+ 0% {
1972
+ transform: translateY(0) rotate(0deg);
1973
+ opacity: 1;
1841
1974
  }
1842
-
1843
- .video-cover .play-btn {
1844
- position: absolute;
1845
- left: 50%;
1846
- top: 50%;
1847
- transform: translate(-50%, -50%);
1848
- width: 50px;
1849
- height: 50px;
1975
+ 80% {
1850
1976
  opacity: 0.8;
1851
- transition: opacity 0.2s;
1852
1977
  }
1853
-
1854
- .video-cover:hover .play-btn {
1855
- opacity: 1;
1978
+ 100% {
1979
+ transform: translateY(100vh) rotate(360deg);
1980
+ opacity: 0;
1856
1981
  }
1982
+ }
1857
1983
  .ele-lottie .ele-lotwrap {
1984
+ overflow: hidden
1985
+ }
1986
+
1987
+ .ele-effect .effect-wrap {
1988
+ position: relative;
1858
1989
  overflow: hidden;
1859
- }body, html {
1990
+ width: 100%;
1991
+ height: 100%
1992
+ }
1993
+
1994
+ .ele-effect .e-small {
1995
+ position: absolute;
1996
+ width: 24px;
1997
+ height: 24px;
1998
+ background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
1999
+ background-size: cover;
2000
+ background-repeat: no-repeat;
2001
+ -webkit-transform-origin: center;
2002
+ transform-origin: center;
2003
+ -webkit-animation: snow 5s linear infinite;
2004
+ animation: snow 5s linear infinite
2005
+ }.call {
2006
+ position: absolute;
2007
+ cursor: pointer;
2008
+ user-select: none;
2009
+ }
2010
+
2011
+ .call .ani-wrap {
2012
+ display: flex;
2013
+ justify-content: center;
2014
+ align-items: center;
2015
+ width: 100%;
2016
+ height: 100%;
2017
+ overflow: hidden;
2018
+ transition: opacity 0.2s;
2019
+ }
2020
+
2021
+ .call .ani-wrap:hover {
2022
+ opacity: 0.9;
2023
+ }
2024
+
2025
+ .call-content {
2026
+ display: flex;
2027
+ align-items: center;
2028
+ justify-content: center;
2029
+ }
2030
+
2031
+ .btn-text {
2032
+ margin-left: 10px;
2033
+ }
2034
+
2035
+ /* 这里可以添加实际的电话图标样式 */
2036
+ /* .iconfont.hb-tel {
2037
+ display: inline-block;
2038
+ width: 16px;
2039
+ height: 16px;
2040
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>');
2041
+ background-repeat: no-repeat;
2042
+ background-position: center;
2043
+ background-size: contain;
2044
+ } */
2045
+
2046
+ .hb-tel:before {
2047
+ content: "\E642";
2048
+ }body, html {
1860
2049
  width: 100%;
1861
2050
  height: 100%;
1862
2051
  }
@@ -3343,101 +3532,59 @@
3343
3532
  -webkit-transform: none;
3344
3533
  transform: none
3345
3534
  }
3346
- }.ele-form {
3535
+ }.form-input {
3347
3536
  position: absolute;
3348
- user-select: none;
3349
- }
3350
-
3351
- .f-single {
3352
- cursor: pointer;
3353
- }
3354
-
3355
- .ani-wrap {
3356
- position: relative;
3357
3537
  }
3358
3538
 
3359
- .f-single .ani-wrap .fs-tit {
3539
+ .input-wrapper {
3360
3540
  display: flex;
3361
- padding: 0 5px;
3362
- height: 40px;
3363
3541
  align-items: center;
3364
- white-space: nowrap;
3365
- overflow: hidden;
3366
- text-overflow: ellipsis;
3367
- border-bottom: 1px solid rgba(153, 153, 153, 1);
3542
+ width: 100%;
3543
+ height: 100%;
3544
+ padding: 0 10px;
3545
+ box-sizing: border-box;
3546
+ position: relative;
3547
+ transition: border-color 0.3s;
3368
3548
  }
3369
3549
 
3370
- .require {
3550
+ .required-marker {
3551
+ font-size: 12px;
3371
3552
  padding: 0 5px 0 0;
3372
3553
  color: red;
3373
3554
  vertical-align: middle;
3374
3555
  }
3375
3556
 
3376
- .f-single ul {
3377
- padding: 15px;
3557
+ input {
3558
+ flex: 1;
3559
+ border: none;
3560
+ outline: none;
3561
+ background: transparent;
3562
+ height: 100%;
3563
+ padding: 0;
3378
3564
  margin: 0;
3379
- list-style: none;
3380
- }
3381
-
3382
- .f-single ul li {
3383
- display: flex;
3384
- align-items: center;
3385
- margin-top: 12px;
3386
- font-size: 0;
3387
- }
3388
-
3389
- .f-single ul li:first-child {
3390
- margin-top: 0;
3391
- }
3392
-
3393
- .fs-circle {
3394
- display: inline-block;
3395
- width: 16px;
3396
- height: 16px;
3397
- border-radius: 50%;
3398
- position: relative;
3399
- transition: all 0.2s;
3400
- }
3401
-
3402
- .fs-circle.selected {
3403
- background-color: #2687f1;
3404
- border-color: #2687f1 !important;
3405
- }
3406
-
3407
- .fs-circle.selected::after {
3408
- content: "";
3409
- position: absolute;
3410
- top: 3px;
3411
- left: 3px;
3412
- width: 8px;
3413
- height: 8px;
3414
- border-radius: 50%;
3415
- background-color: white;
3416
3565
  }
3566
+ /*
3567
+ input::placeholder {
3568
+ color: #ccc;
3569
+ opacity: 1;
3570
+ } */
3417
3571
 
3418
- .fs-txt {
3419
- display: inline-block;
3420
- width: calc(100% - 16px);
3421
- padding-left: 8px;
3422
- vertical-align: top;
3423
- word-break: break-all;
3424
- font-size: 14px;
3425
- line-height: 1.2;
3572
+ .dynamic-placeholder-input::placeholder {
3573
+ color: var(--placeholder-color, #999);
3574
+ opacity: 1;
3426
3575
  }
3427
-
3428
- .has-error .fs-tit {
3429
- border-bottom-color: #ff4d4f;
3576
+ .dynamic-placeholder-input::-webkit-input-placeholder {
3577
+ color: var(--placeholder-color, #999);
3430
3578
  }
3431
-
3432
- /* 错误提示样式 */
3433
- .error-tip {
3434
- position: fixed;
3435
- left: 0;
3436
- top: 0;
3437
- width: 100%;
3438
- height: 100%;
3439
- z-index: 1000;
3440
- }.form-submit {
3579
+ .dynamic-placeholder-input::-moz-placeholder {
3580
+ color: var(--placeholder-color, #999);
3581
+ opacity: 1;
3582
+ }
3583
+ .dynamic-placeholder-input:-ms-input-placeholder {
3584
+ color: var(--placeholder-color, #999);
3585
+ }
3586
+
3587
+ .form-submit {
3441
3588
  cursor: pointer;
3442
3589
  transition: all 0.2s;
3443
3590
  outline: none;
@@ -3505,7 +3652,7 @@
3505
3652
  user-select: none;
3506
3653
  }
3507
3654
 
3508
- .f-select {
3655
+ .f-single {
3509
3656
  cursor: pointer;
3510
3657
  }
3511
3658
 
@@ -3513,13 +3660,15 @@
3513
3660
  position: relative;
3514
3661
  }
3515
3662
 
3516
- .f-select .ani-wrap .fs-tit {
3517
- position: relative;
3663
+ .f-single .ani-wrap .fs-tit {
3518
3664
  display: flex;
3519
3665
  padding: 0 5px;
3520
- height: 35px;
3521
- line-height: 35px;
3666
+ height: 40px;
3522
3667
  align-items: center;
3668
+ white-space: nowrap;
3669
+ overflow: hidden;
3670
+ text-overflow: ellipsis;
3671
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
3523
3672
  }
3524
3673
 
3525
3674
  .require {
@@ -3528,69 +3677,63 @@
3528
3677
  vertical-align: middle;
3529
3678
  }
3530
3679
 
3531
- .fs-cont {
3532
- padding-right: 15px;
3533
- white-space: nowrap;
3534
- overflow: hidden;
3535
- text-overflow: ellipsis;
3536
- flex-grow: 1;
3537
- }
3538
-
3539
- .icon-bofang1 {
3540
- font-size: 12px;
3541
- transition: transform 0.2s ease;
3542
- }
3543
-
3544
- .rotate-180 {
3545
- transform: rotate(180deg) !important;
3546
- }
3547
-
3548
- .f-real {
3549
- position: absolute;
3550
- left: 0;
3551
- top: 0;
3552
- width: 100%;
3553
- height: 100%;
3554
- z-index: 1;
3555
- opacity: 0;
3556
- cursor: pointer;
3680
+ .f-single ul {
3681
+ padding: 15px;
3682
+ margin: 0;
3683
+ list-style: none;
3557
3684
  }
3558
3685
 
3559
- .dropdown-menu {
3560
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
3686
+ .f-single ul li {
3687
+ display: flex;
3688
+ align-items: center;
3689
+ margin-top: 12px;
3690
+ font-size: 0;
3561
3691
  }
3562
3692
 
3563
- .dropdown-item {
3564
- padding: 8px 10px;
3565
- cursor: pointer;
3566
- transition: background-color 0.2s;
3693
+ .f-single ul li:first-child {
3694
+ margin-top: 0;
3567
3695
  }
3568
3696
 
3569
- .dropdown-item:hover {
3570
- background-color: #f5f5f5;
3697
+ .fs-circle {
3698
+ display: inline-block;
3699
+ width: 16px;
3700
+ height: 16px;
3701
+ border-radius: 50%;
3702
+ position: relative;
3703
+ transition: all 0.2s;
3571
3704
  }
3572
3705
 
3573
- .dropdown-item.selected {
3574
- background-color: #e6f7ff;
3575
- color: #1890ff;
3706
+ .fs-circle.selected {
3707
+ background-color: #2687f1;
3708
+ border-color: #2687f1 !important;
3576
3709
  }
3577
3710
 
3578
- .f-select .fs-tit .icon-bofang1 {
3579
- position: absolute;
3580
- right: 10px;
3581
- font-size: 12px;
3582
- display: inline-block;
3583
- transform: rotate(90deg);
3711
+ .fs-circle.selected::after {
3712
+ content: "";
3713
+ position: absolute;
3714
+ top: 3px;
3715
+ left: 3px;
3716
+ width: 8px;
3717
+ height: 8px;
3718
+ border-radius: 50%;
3719
+ background-color: white;
3584
3720
  }
3585
3721
 
3586
- .icon-bofang1:before {
3587
- content: "\E6CF";
3722
+ .fs-txt {
3723
+ display: inline-block;
3724
+ width: calc(100% - 16px);
3725
+ padding-left: 8px;
3726
+ vertical-align: top;
3727
+ word-break: break-all;
3728
+ font-size: 14px;
3729
+ line-height: 1.2;
3588
3730
  }
3589
3731
 
3590
- .has-error {
3591
- border-color: #ff4d4f !important;
3732
+ .has-error .fs-tit {
3733
+ border-bottom-color: #ff4d4f;
3592
3734
  }
3593
3735
 
3736
+ /* 错误提示样式 */
3594
3737
  .error-tip {
3595
3738
  position: fixed;
3596
3739
  left: 0;
@@ -3598,71 +3741,7 @@
3598
3741
  width: 100%;
3599
3742
  height: 100%;
3600
3743
  z-index: 1000;
3601
- }.form-input {
3602
- position: absolute;
3603
- }
3604
-
3605
- .input-wrapper {
3606
- display: flex;
3607
- align-items: center;
3608
- width: 100%;
3609
- height: 100%;
3610
- padding: 0 10px;
3611
- box-sizing: border-box;
3612
- position: relative;
3613
- transition: border-color 0.3s;
3614
- }
3615
-
3616
- .required-marker {
3617
- font-size: 12px;
3618
- padding: 0 5px 0 0;
3619
- color: red;
3620
- vertical-align: middle;
3621
- }
3622
-
3623
- input {
3624
- flex: 1;
3625
- border: none;
3626
- outline: none;
3627
- background: transparent;
3628
- height: 100%;
3629
- padding: 0;
3630
- margin: 0;
3631
- }
3632
- /*
3633
- input::placeholder {
3634
- color: #ccc;
3635
- opacity: 1;
3636
- } */
3637
-
3638
- .dynamic-placeholder-input::placeholder {
3639
- color: var(--placeholder-color, #999);
3640
- opacity: 1;
3641
- }
3642
- .dynamic-placeholder-input::-webkit-input-placeholder {
3643
- color: var(--placeholder-color, #999);
3644
- }
3645
- .dynamic-placeholder-input::-moz-placeholder {
3646
- color: var(--placeholder-color, #999);
3647
- opacity: 1;
3648
- }
3649
- .dynamic-placeholder-input:-ms-input-placeholder {
3650
- color: var(--placeholder-color, #999);
3651
- }
3652
- .global.video {
3653
- width: 35px;
3654
- height: 55px;
3655
- border-radius: 50%;
3656
- text-align: center;
3657
- margin-bottom: 5px;
3658
- border: 2px solid #fff;
3659
- cursor: pointer;
3660
- }
3661
- .icon-shipin2:before { content: "\E611"; }
3662
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3663
- .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
3664
- }
3665
- .ele-form {
3744
+ }.ele-form {
3666
3745
  position: absolute;
3667
3746
  user-select: none;
3668
3747
  }
@@ -3748,42 +3827,6 @@
3748
3827
  .has-error .fs-tit {
3749
3828
  border-bottom-color: #ff4d4f;
3750
3829
  }
3751
- .global.map {
3752
- width: 35px;
3753
- height: 55px;
3754
- border-radius: 50%;
3755
- text-align: center;
3756
- margin-bottom: 5px;
3757
- border: 2px solid #fff;
3758
- cursor: pointer;
3759
- }
3760
- .icon-daohang1:before { content: "\E612"; }
3761
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3762
- .global.map > span { font-size: 10px; line-height: 20px; display: block;}
3763
- .global.receipt {
3764
- width: 35px;
3765
- height: 55px;
3766
- border-radius: 50%;
3767
- text-align: center;
3768
- margin-bottom: 5px;
3769
- border: 2px solid #fff;
3770
- cursor: pointer;
3771
- }
3772
- .icon-liuyan:before { content: "\E636"; }
3773
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3774
- .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }
3775
- .global.tel {
3776
- width: 35px;
3777
- height: 55px;
3778
- border-radius: 50%;
3779
- text-align: center;
3780
- margin-bottom: 15px;
3781
- border: 2px solid #fff;
3782
- cursor: pointer;
3783
- }
3784
- .icon-dianhua:before { content: "\E60E"; }
3785
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3786
- .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
3787
3830
  .icon-guanbi:before {
3788
3831
  content: "\E676";
3789
3832
  }
@@ -4177,3 +4220,54 @@
4177
4220
  content: "\E65E";
4178
4221
  color: #F44336; /* 失败的红色 */
4179
4222
  }
4223
+
4224
+ .global.video {
4225
+ width: 35px;
4226
+ height: 55px;
4227
+ border-radius: 50%;
4228
+ text-align: center;
4229
+ margin-bottom: 5px;
4230
+ border: 2px solid #fff;
4231
+ cursor: pointer;
4232
+ }
4233
+ .icon-shipin2:before { content: "\E611"; }
4234
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4235
+ .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
4236
+ }
4237
+
4238
+ .global.map {
4239
+ width: 35px;
4240
+ height: 55px;
4241
+ border-radius: 50%;
4242
+ text-align: center;
4243
+ margin-bottom: 5px;
4244
+ border: 2px solid #fff;
4245
+ cursor: pointer;
4246
+ }
4247
+ .icon-daohang1:before { content: "\E612"; }
4248
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4249
+ .global.map > span { font-size: 10px; line-height: 20px; display: block;}
4250
+ .global.tel {
4251
+ width: 35px;
4252
+ height: 55px;
4253
+ border-radius: 50%;
4254
+ text-align: center;
4255
+ margin-bottom: 15px;
4256
+ border: 2px solid #fff;
4257
+ cursor: pointer;
4258
+ }
4259
+ .icon-dianhua:before { content: "\E60E"; }
4260
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4261
+ .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
4262
+ .global.receipt {
4263
+ width: 35px;
4264
+ height: 55px;
4265
+ border-radius: 50%;
4266
+ text-align: center;
4267
+ margin-bottom: 5px;
4268
+ border: 2px solid #fff;
4269
+ cursor: pointer;
4270
+ }
4271
+ .icon-liuyan:before { content: "\E636"; }
4272
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4273
+ .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }