unika-components 1.1.124 → 1.1.125

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.
@@ -9,6 +9,122 @@
9
9
  width: 100%;
10
10
  }
11
11
 
12
+ .element-video {
13
+ position: absolute;
14
+ overflow: hidden;
15
+ background-color: transparent;
16
+ }
17
+
18
+ .element-video .ani-wrap, .element-video img {
19
+ display: block;
20
+ width: 100%;
21
+ height: 100%;
22
+ }
23
+
24
+ .video-container {
25
+ width: 100%;
26
+ height: 100%;
27
+ }
28
+
29
+ .video-container iframe {
30
+ width: 100%;
31
+ height: 100%;
32
+ border: none;
33
+ }
34
+
35
+ .video-cover {
36
+ position: relative;
37
+ width: 100%;
38
+ height: 100%;
39
+ background-size: cover;
40
+ background-position: center;
41
+ cursor: pointer;
42
+ }
43
+
44
+ .video-cover .play-btn {
45
+ position: absolute;
46
+ left: 50%;
47
+ top: 50%;
48
+ transform: translate(-50%, -50%);
49
+ width: 50px;
50
+ height: 50px;
51
+ opacity: 0.8;
52
+ transition: opacity 0.2s;
53
+ }
54
+
55
+ .video-cover:hover .play-btn {
56
+ opacity: 1;
57
+ }#audio {
58
+ position: absolute;
59
+ right: 10px;
60
+ top: 10px;
61
+ z-index: 103;
62
+ width: 30px;
63
+ height: 30px;
64
+ display: flex;
65
+ align-items: center;
66
+ }
67
+
68
+ #audio .mrotate {
69
+ animation: mrotate 5s linear infinite;
70
+ }
71
+
72
+ @keyframes mrotate {
73
+ to {
74
+ transform: rotate(1turn);
75
+ }
76
+ }
77
+
78
+ #audio .audio {
79
+ width: 100%;
80
+ height: 100%;
81
+ display: flex;
82
+ align-items: center;
83
+ justify-content: center;
84
+ color: #fff;
85
+ background: #666;
86
+ border-radius: 50%;
87
+ overflow: hidden;
88
+ cursor: pointer;
89
+ transition: all 0.3s ease;
90
+ }
91
+
92
+ #audio .audio.a-border {
93
+ border: 1px solid #fff;
94
+ }
95
+
96
+ #audio .audio .music-icon {
97
+ display: block;
98
+ width: 60%;
99
+ height: 60%;
100
+ object-fit: contain;
101
+ }
102
+
103
+ #audio .audio .iconfont {
104
+ font-size: 2opx;
105
+ line-height: 1;
106
+ }
107
+ #audio .icon-cancel {
108
+ position: absolute;
109
+ width: 100%;
110
+ height: 100%;
111
+ border-radius: 50%;
112
+ overflow: hidden;
113
+ padding: 15px 0;
114
+ }
115
+ #audio .icon-cancel .icon-h {
116
+ transform: rotate(45deg);
117
+ width: 100%;
118
+ height: 2px;
119
+ background: #fff;
120
+ }
121
+ #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
122
+ content: '';
123
+ position: absolute;
124
+ width: 100%;
125
+ height: 2px;
126
+ background: #fff;
127
+ }
12
128
  .ele-text {
13
129
  position: relative;
14
130
  }
@@ -75,281 +191,441 @@
75
191
  transform: scale(1);
76
192
  opacity: 1;
77
193
  }
78
- }.ele-img {
79
- position: absolute;
80
- overflow: hidden;
81
- }
82
-
83
- .ele-img .ani-wrap {
84
- width: 100%;
85
- height: 100%;
86
- }
87
-
88
- .ele-img .ele-image {
89
- position: relative;
90
- display: block;
91
- }
92
-
93
- .ele-img .rotate-wrap {
94
- position: absolute;
95
- left: 0;
96
- right: 0;
97
- top: 0;
98
- bottom: 0;
99
- }
100
-
101
- .ele-img .ele-img-bg,
102
- .ele-img .rotate-wrap .img-wrap {
103
- width: 100%;
104
- height: 100%;
105
- overflow: hidden;
106
- }
107
-
108
- .ele-img .ele-bg-wrap {
109
- width: 100%;
110
- height: 100%;
111
- background-size: cover;
112
- background-position: 50% 50%;
113
- background-repeat: no-repeat;
114
- background-clip: border-box;
115
- }
116
-
117
- /* 动画关键帧 */
118
- @keyframes zoomIn {
119
- from {
120
- opacity: 0;
121
- transform: scale(0.5);
122
- }
123
- to {
124
- opacity: 1;
125
- transform: scale(1);
126
- }
127
- }
128
- @keyframes jumpheart {
129
- to {
130
- -webkit-transform: scale(1.2);
131
- transform: scale(1.2)
132
- }
133
- }
134
- .ele-calendar {
135
- position: relative;
136
- width: 325px !important;
137
- min-height: 325px !important;
138
- height: auto !important;
139
- }
140
-
141
- .ele-calendar .drag-point {
142
- cursor: default !important;
194
+ }.count-down .drag-point {
195
+ cursor: default!important
143
196
  }
144
197
 
145
- .ele-calendar .ani-wrap {
146
- position: relative;
198
+ .count-down .ani-wrap {
147
199
  width: 100%;
148
- min-height: 325px !important;
149
- height: auto !important;
150
- padding: 22px 0;
200
+ height: 100%
151
201
  }
152
202
 
153
- .ele-calendar .ani-wrap .can-wrap .can-top {
203
+ .count-down .count-text,.count-down .finish-cont {
204
+ display: -webkit-box;
205
+ display: -ms-flexbox;
154
206
  display: flex;
155
- justify-content: space-between;
156
- align-items: flex-end;
157
- line-height: 1;
158
- padding: 0 47px 20px;
207
+ height: 100%;
208
+ -webkit-box-align: center;
209
+ -ms-flex-align: center;
210
+ align-items: center;
211
+ -webkit-box-pack: center;
212
+ -ms-flex-pack: center;
213
+ justify-content: center
159
214
  }
160
215
 
161
- .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
162
- font-size: 25px;
163
- padding-bottom: 4px;
216
+ .count-down .finish-cont {
217
+ width: 100%
164
218
  }
165
219
 
166
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
167
- font-size: 25px;
220
+ .count-down .count-flip {
221
+ display: -webkit-box;
222
+ display: -ms-flexbox;
223
+ display: flex;
224
+ height: 100%;
225
+ -webkit-box-align: center;
226
+ -ms-flex-align: center;
227
+ align-items: center;
228
+ -webkit-box-pack: center;
229
+ -ms-flex-pack: center;
230
+ justify-content: center
168
231
  }
169
232
 
170
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
171
- position: relative;
172
- top: 2px;
173
- font-size: 57px;
233
+ .count-down .count-flip .numscroll {
234
+ -webkit-animation: numscroll .4s ease-in-out;
235
+ animation: numscroll .4s ease-in-out;
236
+ -webkit-animation-fill-mode: both;
237
+ animation-fill-mode: both
174
238
  }
175
239
 
176
- .ele-calendar .ani-wrap .can-wrap .can-main {
177
- padding: 0 23px;
240
+ .count-down .count-flip .numscroll .curr-num {
241
+ -webkit-transition: all .3s ease-in-out;
242
+ transition: all .3s ease-in-out;
243
+ opacity: .6;
244
+ -webkit-transform: scale(.5)!important;
245
+ transform: scale(.5)!important
178
246
  }
179
247
 
180
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
181
- display: flex;
182
- justify-content: flex-start;
183
- height: 25px;
184
- line-height: 25px;
185
- padding: 0 10px;
186
- border-radius: 13px;
248
+ @-webkit-keyframes numscroll {
249
+ 0% {
250
+ -webkit-transform: translateZ(0);
251
+ transform: translateZ(0)
252
+ }
253
+
254
+ to {
255
+ -webkit-transform: translate3d(0,100%,0);
256
+ transform: translate3d(0,100%,0)
257
+ }
187
258
  }
188
259
 
189
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week span {
190
- width: 14.2%;
191
- text-align: center;
192
- color: #fff;
193
- font-size: 12px;
260
+ @keyframes numscroll {
261
+ 0% {
262
+ -webkit-transform: translateZ(0);
263
+ transform: translateZ(0)
264
+ }
265
+
266
+ to {
267
+ -webkit-transform: translate3d(0,100%,0);
268
+ transform: translate3d(0,100%,0)
269
+ }
194
270
  }
195
271
 
196
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul {
197
- font-size: 0;
198
- padding: 5px 10px 0;
199
- text-align: left;
272
+ .count-down .count-flip .c-com {
273
+ min-width: 50px;
274
+ height: auto;
275
+ margin: 6px;
276
+ padding: 5px 0 6px;
277
+ background-color: #111
200
278
  }
201
279
 
202
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li {
280
+ .count-down .count-flip .c-com .flex-wrap {
281
+ display: -webkit-box;
282
+ display: -ms-flexbox;
283
+ display: flex;
203
284
  position: relative;
204
- display: inline-block;
205
- height: 25px;
206
- text-align: center;
207
- margin-top: 8px;
285
+ width: 100%;
286
+ height: 100%;
287
+ -webkit-box-align: center;
288
+ -ms-flex-align: center;
289
+ align-items: center
208
290
  }
209
291
 
210
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active .iconfont {
211
- display: block;
292
+ .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
293
+ line-height: 27px
212
294
  }
213
295
 
214
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active span {
215
- color: #fff !important;
296
+ .count-down .count-flip .c-com .flex-wrap .next-num {
297
+ position: absolute;
298
+ top: -100%
216
299
  }
217
300
 
218
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
219
- animation: jumpheart 0.8s ease infinite alternate;
301
+ .count-down .count-flip .c-com .flex-wrap .curr-num {
302
+ -webkit-transform: scale(1);
303
+ transform: scale(1)
220
304
  }
221
305
 
222
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
223
- display: none;
224
- font-size: 26px;
306
+ .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 {
307
+ display: none!important
225
308
  }
226
309
 
227
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li span {
228
- position: absolute;
229
- left: 50%;
230
- top: 50%;
231
- z-index: 1;
232
- color: #666;
233
- font-size: 13px;
234
- transform: translate(-50%, -52%);
310
+ .c-wrap {
311
+ width: 100%;
312
+ height: 100%;
313
+ overflow: hidden;
314
+ font-size: 0
235
315
  }
236
316
 
237
- .ele-calendar .bottom-center,
238
- .ele-calendar .left-center,
239
- .ele-calendar .right-center,
240
- .ele-calendar .top-center {
241
- display: none !important;
317
+ .c-wrap.c-day-wrap {
318
+ text-align: center
242
319
  }
243
320
 
244
- .ele-calendar .ani-wrap .can-wrap2 {
245
- padding: 21px 23px 0
321
+ .c-wrap.c-day-wrap .c-num {
322
+ width: auto
246
323
  }
247
324
 
248
- .ele-calendar .ani-wrap .can-wrap2 .can-top {
325
+ .c-wrap .c-num {
326
+ display: inline-block;
327
+ width: 50%;
328
+ overflow: hidden;
329
+ font-size: 20px;
330
+ color: #999
331
+ }
332
+
333
+ .c-wrap .c-left .flex-wrap {
249
334
  display: -webkit-box;
250
335
  display: -ms-flexbox;
251
336
  display: flex;
252
- -webkit-box-pack: justify;
253
- -ms-flex-pack: justify;
254
- justify-content: space-between;
255
- -webkit-box-align: end;
256
- -ms-flex-align: end;
257
- align-items: flex-end;
258
- line-height: 1;
259
- padding: 0 16px 22px;
260
- font-size: 36px
261
- }
262
-
263
- .ele-calendar .ani-wrap .can-wrap2 .can-top span {
264
- font-size: 16px
337
+ -webkit-box-pack: end;
338
+ -ms-flex-pack: end;
339
+ justify-content: flex-end
265
340
  }
266
341
 
267
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week {
342
+ .c-wrap .c-text {
268
343
  display: -webkit-box;
269
344
  display: -ms-flexbox;
270
345
  display: flex;
271
- -webkit-box-pack: start;
272
- -ms-flex-pack: start;
273
- justify-content: flex-start;
274
- height: 25px;
275
- line-height: 25px;
276
- padding: 0 10px;
277
- border-radius: 13px
278
- }
279
-
280
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week span {
281
- width: 14.2%;
282
- text-align: center;
283
- color: #fff;
346
+ width: 100%;
284
347
  font-size: 12px;
285
- font-weight: 600
286
- }
287
-
288
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date {
289
- position: relative
290
- }
291
-
292
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date .can-year {
293
- position: absolute;
294
- white-space: nowrap;
295
- left: 50%;
296
- top: 15%;
297
- -webkit-transform: translateX(-50%);
298
- transform: translateX(-50%);
299
- font-size: 76px;
300
- opacity: .1;
301
- font-weight: 600
348
+ -webkit-box-pack: center;
349
+ -ms-flex-pack: center;
350
+ justify-content: center;
351
+ -webkit-box-align: center;
352
+ -ms-flex-align: center;
353
+ align-items: center;
354
+ white-space: nowrap
302
355
  }
303
-
304
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul {
305
- font-size: 0;
306
- padding: 5px 10px 0;
307
- text-align: left
356
+ .ele-img {
357
+ position: absolute;
358
+ overflow: hidden;
359
+ }
360
+
361
+ .ele-img .ani-wrap {
362
+ width: 100%;
363
+ height: 100%;
364
+ }
365
+
366
+ .ele-img .ele-image {
367
+ position: relative;
368
+ display: block;
369
+ }
370
+
371
+ .ele-img .rotate-wrap {
372
+ position: absolute;
373
+ left: 0;
374
+ right: 0;
375
+ top: 0;
376
+ bottom: 0;
377
+ }
378
+
379
+ .ele-img .ele-img-bg,
380
+ .ele-img .rotate-wrap .img-wrap {
381
+ width: 100%;
382
+ height: 100%;
383
+ overflow: hidden;
384
+ }
385
+
386
+ .ele-img .ele-bg-wrap {
387
+ width: 100%;
388
+ height: 100%;
389
+ background-size: cover;
390
+ background-position: 50% 50%;
391
+ background-repeat: no-repeat;
392
+ background-clip: border-box;
393
+ }
394
+
395
+ /* 动画关键帧 */
396
+ @keyframes zoomIn {
397
+ from {
398
+ opacity: 0;
399
+ transform: scale(0.5);
400
+ }
401
+ to {
402
+ opacity: 1;
403
+ transform: scale(1);
404
+ }
405
+ }.ele-effect {
406
+ will-change: transform;
308
407
  }
309
408
 
310
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li {
409
+ .ele-effect .effect-wrap {
311
410
  position: relative;
312
- display: inline-block;
313
- width: 14.2%;
314
- height: 25px;
315
- text-align: center;
316
- margin-top: 8px
411
+ width: 100%;
412
+ height: 100%;
317
413
  }
318
414
 
319
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active .iconfont {
320
- display: block;
415
+ .particle {
321
416
  position: absolute;
322
- left: 17%;
323
- top: 0;
324
- font-size: 25px
417
+ background-repeat: no-repeat;
418
+ background-size: contain;
419
+ animation-name: falling;
420
+ animation-timing-function: linear;
421
+ animation-iteration-count: infinite;
422
+ will-change: transform;
325
423
  }
326
424
 
327
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active span {
328
- color: #fff!important
425
+ @keyframes falling {
426
+ 0% {
427
+ transform: translateY(0) rotate(0deg);
428
+ opacity: 1;
429
+ }
430
+ 80% {
431
+ opacity: 0.8;
432
+ }
433
+ 100% {
434
+ transform: translateY(100vh) rotate(360deg);
435
+ opacity: 0;
436
+ }
329
437
  }
330
-
331
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.heart-ani .iconfont {
332
- -webkit-animation: jumpheart .8s ease infinite alternate;
333
- animation: jumpheart .8s ease infinite alternate
438
+ .ele-lottie .ele-lotwrap {
439
+ overflow: hidden
334
440
  }
335
441
 
336
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li .iconfont {
337
- display: none;
338
- font-size: 26px
442
+ .ele-effect .effect-wrap {
443
+ position: relative;
444
+ overflow: hidden;
445
+ width: 100%;
446
+ height: 100%
339
447
  }
340
448
 
341
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li span {
342
- position: absolute;
343
- left: 50%;
344
- top: 50%;
345
- z-index: 1;
346
- color: #666;
449
+ .ele-effect .e-small {
450
+ position: absolute;
451
+ width: 24px;
452
+ height: 24px;
453
+ background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
454
+ background-size: cover;
455
+ background-repeat: no-repeat;
456
+ -webkit-transform-origin: center;
457
+ transform-origin: center;
458
+ -webkit-animation: snow 5s linear infinite;
459
+ animation: snow 5s linear infinite
460
+ }
461
+ .ele-lottie .ele-lotwrap {
462
+ overflow: hidden;
463
+ }.element-ditu .ani-wrap {
464
+ width: 100%;
465
+ height: 100%;
466
+ overflow: hidden
467
+ }
468
+
469
+ .element-ditu .map {
470
+ width: 100%;
471
+ height: 100%
472
+ }
473
+
474
+ .element-ditu .map .el-button {
475
+ width: 100%;
476
+ height: 100%;
477
+ display: -webkit-box;
478
+ display: -ms-flexbox;
479
+ display: flex;
480
+ -webkit-box-align: center;
481
+ -ms-flex-align: center;
482
+ align-items: center;
483
+ padding: 0;
484
+ -webkit-box-pack: center;
485
+ -ms-flex-pack: center;
486
+ justify-content: center;
487
+ background: inherit;
488
+ color: inherit;
489
+ border: none
490
+ }
491
+
492
+ .element-ditu .center-map {
493
+ width: 100%;
494
+ height: 100%;
495
+ background: #fff
496
+ }
497
+
498
+ .element-ditu .mask-map {
499
+ position: absolute;
500
+ width: 100%;
501
+ height: 100%;
502
+ top: 0
503
+ }
504
+ .map-iframe {
505
+ width: 100%;
506
+ height: 100%;
507
+ }
508
+ @keyframes jumpheart {
509
+ to {
510
+ -webkit-transform: scale(1.2);
511
+ transform: scale(1.2)
512
+ }
513
+ }
514
+ .ele-calendar {
515
+ position: relative;
516
+ width: 325px !important;
517
+ min-height: 325px !important;
518
+ height: auto !important;
519
+ }
520
+
521
+ .ele-calendar .drag-point {
522
+ cursor: default !important;
523
+ }
524
+
525
+ .ele-calendar .ani-wrap {
526
+ position: relative;
527
+ width: 100%;
528
+ min-height: 325px !important;
529
+ height: auto !important;
530
+ padding: 22px 0;
531
+ }
532
+
533
+ .ele-calendar .ani-wrap .can-wrap .can-top {
534
+ display: flex;
535
+ justify-content: space-between;
536
+ align-items: flex-end;
537
+ line-height: 1;
538
+ padding: 0 47px 20px;
539
+ }
540
+
541
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
542
+ font-size: 25px;
543
+ padding-bottom: 4px;
544
+ }
545
+
546
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
547
+ font-size: 25px;
548
+ }
549
+
550
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
551
+ position: relative;
552
+ top: 2px;
553
+ font-size: 57px;
554
+ }
555
+
556
+ .ele-calendar .ani-wrap .can-wrap .can-main {
557
+ padding: 0 23px;
558
+ }
559
+
560
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
561
+ display: flex;
562
+ justify-content: flex-start;
563
+ height: 25px;
564
+ line-height: 25px;
565
+ padding: 0 10px;
566
+ border-radius: 13px;
567
+ }
568
+
569
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-week span {
570
+ width: 14.2%;
571
+ text-align: center;
572
+ color: #fff;
573
+ font-size: 12px;
574
+ }
575
+
576
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul {
577
+ font-size: 0;
578
+ padding: 5px 10px 0;
579
+ text-align: left;
580
+ }
581
+
582
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li {
583
+ position: relative;
584
+ display: inline-block;
585
+ height: 25px;
586
+ text-align: center;
587
+ margin-top: 8px;
588
+ }
589
+
590
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active .iconfont {
591
+ display: block;
592
+ }
593
+
594
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active span {
595
+ color: #fff !important;
596
+ }
597
+
598
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
599
+ animation: jumpheart 0.8s ease infinite alternate;
600
+ }
601
+
602
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
603
+ display: none;
604
+ font-size: 26px;
605
+ }
606
+
607
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li span {
608
+ position: absolute;
609
+ left: 50%;
610
+ top: 50%;
611
+ z-index: 1;
612
+ color: #666;
347
613
  font-size: 13px;
348
- -webkit-transform: translate(-50%,-52%);
349
- transform: translate(-50%,-52%)
614
+ transform: translate(-50%, -52%);
350
615
  }
351
616
 
352
- .ele-calendar .ani-wrap .can-wrap3 .can-top {
617
+ .ele-calendar .bottom-center,
618
+ .ele-calendar .left-center,
619
+ .ele-calendar .right-center,
620
+ .ele-calendar .top-center {
621
+ display: none !important;
622
+ }
623
+
624
+ .ele-calendar .ani-wrap .can-wrap2 {
625
+ padding: 21px 23px 0
626
+ }
627
+
628
+ .ele-calendar .ani-wrap .can-wrap2 .can-top {
353
629
  display: -webkit-box;
354
630
  display: -ms-flexbox;
355
631
  display: flex;
@@ -360,32 +636,28 @@
360
636
  -ms-flex-align: end;
361
637
  align-items: flex-end;
362
638
  line-height: 1;
363
- padding: 18px 33px 10px;
364
- font-size: 36px;
639
+ padding: 0 16px 22px;
640
+ font-size: 36px
365
641
  }
366
642
 
367
- .ele-calendar .ani-wrap .can-wrap3 .can-top span {
643
+ .ele-calendar .ani-wrap .can-wrap2 .can-top span {
368
644
  font-size: 16px
369
645
  }
370
646
 
371
- .ele-calendar .ani-wrap .can-wrap3 .can-top .can-year {
372
- font-size: 20px
373
- }
374
-
375
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week {
647
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week {
376
648
  display: -webkit-box;
377
649
  display: -ms-flexbox;
378
650
  display: flex;
379
651
  -webkit-box-pack: start;
380
652
  -ms-flex-pack: start;
381
653
  justify-content: flex-start;
382
- height: 40px;
383
- line-height: 40px;
384
- padding: 0 34px;
385
- border-bottom: 1px solid
654
+ height: 25px;
655
+ line-height: 25px;
656
+ padding: 0 10px;
657
+ border-radius: 13px
386
658
  }
387
659
 
388
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week span {
660
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week span {
389
661
  width: 14.2%;
390
662
  text-align: center;
391
663
  color: #fff;
@@ -393,58 +665,60 @@
393
665
  font-weight: 600
394
666
  }
395
667
 
396
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date {
668
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date {
397
669
  position: relative
398
670
  }
399
671
 
400
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul {
672
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date .can-year {
673
+ position: absolute;
674
+ white-space: nowrap;
675
+ left: 50%;
676
+ top: 15%;
677
+ -webkit-transform: translateX(-50%);
678
+ transform: translateX(-50%);
679
+ font-size: 76px;
680
+ opacity: .1;
681
+ font-weight: 600
682
+ }
683
+
684
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul {
401
685
  font-size: 0;
402
- padding: 5px 33px 0;
686
+ padding: 5px 10px 0;
403
687
  text-align: left
404
688
  }
405
689
 
406
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li {
690
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li {
407
691
  position: relative;
408
692
  display: inline-block;
409
693
  width: 14.2%;
410
694
  height: 25px;
411
695
  text-align: center;
412
- margin-top: 8px;
413
- }
414
-
415
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active {
416
- color: #eee
696
+ margin-top: 8px
417
697
  }
418
698
 
419
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active .iconfont {
699
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active .iconfont {
420
700
  display: block;
421
701
  position: absolute;
422
- left: 12%;
423
- top: 2px;
702
+ left: 17%;
703
+ top: 0;
704
+ font-size: 25px
424
705
  }
425
706
 
426
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active span {
427
- font-size: 12px
707
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active span {
708
+ color: #fff!important
428
709
  }
429
710
 
430
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.heart-ani .iconfont {
711
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.heart-ani .iconfont {
431
712
  -webkit-animation: jumpheart .8s ease infinite alternate;
432
713
  animation: jumpheart .8s ease infinite alternate
433
714
  }
434
715
 
435
- @keyframes jumpheart {
436
- to {
437
- -webkit-transform: scale(1.2);
438
- transform: scale(1.2)
439
- }
440
- }
441
-
442
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li .iconfont {
716
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li .iconfont {
443
717
  display: none;
444
718
  font-size: 26px
445
719
  }
446
720
 
447
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li span {
721
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li span {
448
722
  position: absolute;
449
723
  left: 50%;
450
724
  top: 50%;
@@ -455,226 +729,215 @@
455
729
  transform: translate(-50%,-52%)
456
730
  }
457
731
 
458
- .ele-calendar .bottom-center,.ele-calendar .left-center,.ele-calendar .right-center,.ele-calendar .top-center {
459
- display: none!important
460
- }
461
- .icon-tuoyuanxing:before {
462
- content: "\E6A7";
463
- }
464
- .icon-zan1:before {
465
- content: "\E66D";
466
- }
467
- .icon-xingzhuangjiehe:before {
468
- content: "\E6A6";
469
- }
470
- .element-video {
471
- position: absolute;
472
- overflow: hidden;
473
- background-color: transparent;
474
- }
475
-
476
- .element-video .ani-wrap, .element-video img {
477
- display: block;
478
- width: 100%;
479
- height: 100%;
480
- }
481
-
482
- .video-container {
483
- width: 100%;
484
- height: 100%;
485
- }
486
-
487
- .video-container iframe {
488
- width: 100%;
489
- height: 100%;
490
- border: none;
491
- }
492
-
493
- .video-cover {
494
- position: relative;
495
- width: 100%;
496
- height: 100%;
497
- background-size: cover;
498
- background-position: center;
499
- cursor: pointer;
500
- }
501
-
502
- .video-cover .play-btn {
503
- position: absolute;
504
- left: 50%;
505
- top: 50%;
506
- transform: translate(-50%, -50%);
507
- width: 50px;
508
- height: 50px;
509
- opacity: 0.8;
510
- transition: opacity 0.2s;
511
- }
512
-
513
- .video-cover:hover .play-btn {
514
- opacity: 1;
515
- }.count-down .drag-point {
516
- cursor: default!important
517
- }
518
-
519
- .count-down .ani-wrap {
520
- width: 100%;
521
- height: 100%
522
- }
523
-
524
- .count-down .count-text,.count-down .finish-cont {
732
+ .ele-calendar .ani-wrap .can-wrap3 .can-top {
525
733
  display: -webkit-box;
526
734
  display: -ms-flexbox;
527
735
  display: flex;
528
- height: 100%;
529
- -webkit-box-align: center;
530
- -ms-flex-align: center;
531
- align-items: center;
532
- -webkit-box-pack: center;
533
- -ms-flex-pack: center;
534
- justify-content: center
736
+ -webkit-box-pack: justify;
737
+ -ms-flex-pack: justify;
738
+ justify-content: space-between;
739
+ -webkit-box-align: end;
740
+ -ms-flex-align: end;
741
+ align-items: flex-end;
742
+ line-height: 1;
743
+ padding: 18px 33px 10px;
744
+ font-size: 36px;
535
745
  }
536
746
 
537
- .count-down .finish-cont {
538
- width: 100%
747
+ .ele-calendar .ani-wrap .can-wrap3 .can-top span {
748
+ font-size: 16px
539
749
  }
540
750
 
541
- .count-down .count-flip {
751
+ .ele-calendar .ani-wrap .can-wrap3 .can-top .can-year {
752
+ font-size: 20px
753
+ }
754
+
755
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week {
542
756
  display: -webkit-box;
543
757
  display: -ms-flexbox;
544
758
  display: flex;
545
- height: 100%;
546
- -webkit-box-align: center;
547
- -ms-flex-align: center;
548
- align-items: center;
549
- -webkit-box-pack: center;
550
- -ms-flex-pack: center;
551
- justify-content: center
759
+ -webkit-box-pack: start;
760
+ -ms-flex-pack: start;
761
+ justify-content: flex-start;
762
+ height: 40px;
763
+ line-height: 40px;
764
+ padding: 0 34px;
765
+ border-bottom: 1px solid
552
766
  }
553
767
 
554
- .count-down .count-flip .numscroll {
555
- -webkit-animation: numscroll .4s ease-in-out;
556
- animation: numscroll .4s ease-in-out;
557
- -webkit-animation-fill-mode: both;
558
- animation-fill-mode: both
768
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week span {
769
+ width: 14.2%;
770
+ text-align: center;
771
+ color: #fff;
772
+ font-size: 12px;
773
+ font-weight: 600
559
774
  }
560
775
 
561
- .count-down .count-flip .numscroll .curr-num {
562
- -webkit-transition: all .3s ease-in-out;
563
- transition: all .3s ease-in-out;
564
- opacity: .6;
565
- -webkit-transform: scale(.5)!important;
566
- transform: scale(.5)!important
776
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date {
777
+ position: relative
567
778
  }
568
779
 
569
- @-webkit-keyframes numscroll {
570
- 0% {
571
- -webkit-transform: translateZ(0);
572
- transform: translateZ(0)
573
- }
780
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul {
781
+ font-size: 0;
782
+ padding: 5px 33px 0;
783
+ text-align: left
784
+ }
574
785
 
575
- to {
576
- -webkit-transform: translate3d(0,100%,0);
577
- transform: translate3d(0,100%,0)
578
- }
786
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li {
787
+ position: relative;
788
+ display: inline-block;
789
+ width: 14.2%;
790
+ height: 25px;
791
+ text-align: center;
792
+ margin-top: 8px;
579
793
  }
580
794
 
581
- @keyframes numscroll {
582
- 0% {
583
- -webkit-transform: translateZ(0);
584
- transform: translateZ(0)
585
- }
795
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active {
796
+ color: #eee
797
+ }
586
798
 
587
- to {
588
- -webkit-transform: translate3d(0,100%,0);
589
- transform: translate3d(0,100%,0)
590
- }
799
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active .iconfont {
800
+ display: block;
801
+ position: absolute;
802
+ left: 12%;
803
+ top: 2px;
591
804
  }
592
805
 
593
- .count-down .count-flip .c-com {
594
- min-width: 50px;
595
- height: auto;
596
- margin: 6px;
597
- padding: 5px 0 6px;
598
- background-color: #111
806
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active span {
807
+ font-size: 12px
599
808
  }
600
809
 
601
- .count-down .count-flip .c-com .flex-wrap {
602
- display: -webkit-box;
603
- display: -ms-flexbox;
604
- display: flex;
605
- position: relative;
606
- width: 100%;
607
- height: 100%;
608
- -webkit-box-align: center;
609
- -ms-flex-align: center;
610
- align-items: center
810
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.heart-ani .iconfont {
811
+ -webkit-animation: jumpheart .8s ease infinite alternate;
812
+ animation: jumpheart .8s ease infinite alternate
611
813
  }
612
814
 
613
- .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
614
- line-height: 27px
815
+ @keyframes jumpheart {
816
+ to {
817
+ -webkit-transform: scale(1.2);
818
+ transform: scale(1.2)
819
+ }
615
820
  }
616
821
 
617
- .count-down .count-flip .c-com .flex-wrap .next-num {
618
- position: absolute;
619
- top: -100%
822
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li .iconfont {
823
+ display: none;
824
+ font-size: 26px
620
825
  }
621
826
 
622
- .count-down .count-flip .c-com .flex-wrap .curr-num {
623
- -webkit-transform: scale(1);
624
- transform: scale(1)
827
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li span {
828
+ position: absolute;
829
+ left: 50%;
830
+ top: 50%;
831
+ z-index: 1;
832
+ color: #666;
833
+ font-size: 13px;
834
+ -webkit-transform: translate(-50%,-52%);
835
+ transform: translate(-50%,-52%)
625
836
  }
626
837
 
627
- .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 {
838
+ .ele-calendar .bottom-center,.ele-calendar .left-center,.ele-calendar .right-center,.ele-calendar .top-center {
628
839
  display: none!important
629
840
  }
841
+ .icon-tuoyuanxing:before {
842
+ content: "\E6A7";
843
+ }
844
+ .icon-zan1:before {
845
+ content: "\E66D";
846
+ }
847
+ .icon-xingzhuangjiehe:before {
848
+ content: "\E6A6";
849
+ }.ele-shape {
850
+ position: absolute;
851
+ overflow: hidden;
852
+ }
630
853
 
631
- .c-wrap {
854
+ .ani-wrap {
632
855
  width: 100%;
633
856
  height: 100%;
634
- overflow: hidden;
635
- font-size: 0
857
+ box-sizing: border-box;
636
858
  }
637
859
 
638
- .c-wrap.c-day-wrap {
639
- text-align: center
860
+ .e-shape {
861
+ width: 100%;
862
+ height: 100%;
640
863
  }
641
864
 
642
- .c-wrap.c-day-wrap .c-num {
643
- width: auto
865
+ .svg-container :deep(svg) {
866
+ width: 100%;
867
+ height: 100%;
868
+ display: block;
644
869
  }
645
870
 
646
- .c-wrap .c-num {
647
- display: inline-block;
648
- width: 50%;
649
- overflow: hidden;
650
- font-size: 20px;
651
- color: #999
871
+ .svg-loading,
872
+ .svg-error {
873
+ display: flex;
874
+ align-items: center;
875
+ justify-content: center;
876
+ width: 100%;
877
+ height: 100%;
878
+ background: rgba(0,0,0,0.05);
879
+ }.call {
880
+ position: absolute;
881
+ cursor: pointer;
882
+ user-select: none;
652
883
  }
653
884
 
654
- .c-wrap .c-left .flex-wrap {
655
- display: -webkit-box;
656
- display: -ms-flexbox;
885
+ .call .ani-wrap {
657
886
  display: flex;
658
- -webkit-box-pack: end;
659
- -ms-flex-pack: end;
660
- justify-content: flex-end
887
+ justify-content: center;
888
+ align-items: center;
889
+ width: 100%;
890
+ height: 100%;
891
+ overflow: hidden;
892
+ transition: opacity 0.2s;
661
893
  }
662
894
 
663
- .c-wrap .c-text {
664
- display: -webkit-box;
665
- display: -ms-flexbox;
895
+ .call .ani-wrap:hover {
896
+ opacity: 0.9;
897
+ }
898
+
899
+ .call-content {
900
+ display: flex;
901
+ align-items: center;
902
+ justify-content: center;
903
+ }
904
+
905
+ .btn-text {
906
+ margin-left: 10px;
907
+ }
908
+
909
+
910
+ .hb-tel:before {
911
+ content: "\E642";
912
+ }.button {
913
+ position: absolute;
914
+ cursor: pointer;
915
+ user-select: none;
916
+ }
917
+
918
+ .button .ani-wrap {
666
919
  display: flex;
667
- width: 100%;
668
- font-size: 12px;
669
- -webkit-box-pack: center;
670
- -ms-flex-pack: center;
671
920
  justify-content: center;
672
- -webkit-box-align: center;
673
- -ms-flex-align: center;
674
921
  align-items: center;
675
- white-space: nowrap
922
+ width: 100%;
923
+ height: 100%;
924
+ overflow: hidden;
925
+ transition: opacity 0.2s;
926
+ }
927
+
928
+ .button .ani-wrap:hover {
929
+ opacity: 0.9;
676
930
  }
677
- /* Iconfont definition */
931
+
932
+ .button-content {
933
+ display: flex;
934
+ align-items: center;
935
+ justify-content: center;
936
+ }
937
+
938
+ .btn-text {
939
+ margin-left: 10px;
940
+ }/* Iconfont definition */
678
941
  .icon-danmuliebiao1:before {
679
942
  content: "\E68A";
680
943
  }
@@ -1460,437 +1723,124 @@
1460
1723
  .give-gift .back {
1461
1724
  position: absolute;
1462
1725
  top: 10px;
1463
- left: 10px;
1464
- cursor: pointer;
1465
- }
1466
-
1467
- .give-gift img {
1468
- max-width: 300px;
1469
- max-height: 300px;
1470
- margin-top: 20px;
1471
- }
1472
-
1473
- /* 留言成功弹窗样式 */
1474
- .mess-success-popup {
1475
- position: fixed;
1476
- top: 0;
1477
- left: 0;
1478
- right: 0;
1479
- bottom: 0;
1480
- background-color: rgba(0, 0, 0, 0.5);
1481
- z-index: 2003;
1482
- display: flex;
1483
- justify-content: center;
1484
- align-items: center;
1485
- }
1486
-
1487
- .mess-success-popup .gift-popup {
1488
- width: 300px;
1489
- height: 200px;
1490
- background: url('https://h5cdn.unika.cc/static/img/uniComponents/bg-color.png') no-repeat;
1491
- border-radius: 10px;
1492
- padding: 20px;
1493
- text-align: center;
1494
- position: relative;
1495
- }
1496
-
1497
- .mess-success-popup .gift-popup .icon-cuowu2 {
1498
- position: absolute;
1499
- top: 10px;
1500
- right: 10px;
1501
- cursor: pointer;
1502
- }
1503
-
1504
- .mess-success-popup .gift-popup .toast {
1505
- display: flex;
1506
- align-items: center;
1507
- justify-content: center;
1508
- margin: 10px 0;
1509
- }
1510
-
1511
- .mess-success-popup .gift-popup .toast img {
1512
- width: 20px;
1513
- height: 15px;
1514
- margin: 0 5px;
1515
- }
1516
-
1517
- .mess-success-popup .gift-popup .title {
1518
- margin: 15px 0;
1519
- font-size: 16px;
1520
- color: #333;
1521
- }
1522
-
1523
- .mess-success-popup .gift-popup .btn {
1524
- background: linear-gradient(270deg, #ff4874, #ff9061);
1525
- color: white;
1526
- border: none;
1527
- padding: 10px 20px;
1528
- border-radius: 20px;
1529
- margin-top: 15px;
1530
- cursor: pointer;
1531
- }
1532
-
1533
- /* 新增图片加载动画样式 */
1534
- .gift-image-container {
1535
- position: relative;
1536
- width: 300px;
1537
- height: 300px;
1538
- margin: 20px 0;
1539
- overflow: hidden;
1540
- }
1541
-
1542
- .gift-image-container img {
1543
- width: 100%;
1544
- height: 100%;
1545
- object-fit: contain;
1546
- opacity: 0;
1547
- transition: opacity 0.5s ease-in-out;
1548
- }
1549
-
1550
- .gift-image-container img.loaded {
1551
- opacity: 1;
1552
- }
1553
-
1554
- .image-loading {
1555
- position: absolute;
1556
- top: 0;
1557
- left: 0;
1558
- width: 100%;
1559
- height: 100%;
1560
- display: flex;
1561
- justify-content: center;
1562
- align-items: center;
1563
- background: rgba(255, 255, 255, 0.8);
1564
- }
1565
-
1566
- .loading-spinner {
1567
- width: 40px;
1568
- height: 40px;
1569
- border: 4px solid #f3f3f3;
1570
- border-top: 4px solid #ed5566;
1571
- border-radius: 50%;
1572
- animation: spin 1s linear infinite;
1573
- }
1574
-
1575
- @keyframes spin {
1576
- 0% { transform: rotate(0deg); }
1577
- 100% { transform: rotate(360deg); }
1578
- }
1579
-
1580
- .ele-shape {
1581
- position: absolute;
1582
- overflow: hidden;
1583
- }
1584
-
1585
- .ani-wrap {
1586
- width: 100%;
1587
- height: 100%;
1588
- box-sizing: border-box;
1589
- }
1590
-
1591
- .e-shape {
1592
- width: 100%;
1593
- height: 100%;
1594
- }
1595
-
1596
- .svg-container :deep(svg) {
1597
- width: 100%;
1598
- height: 100%;
1599
- display: block;
1600
- }
1601
-
1602
- .svg-loading,
1603
- .svg-error {
1604
- display: flex;
1605
- align-items: center;
1606
- justify-content: center;
1607
- width: 100%;
1608
- height: 100%;
1609
- background: rgba(0,0,0,0.05);
1610
- }.element-ditu .ani-wrap {
1611
- width: 100%;
1612
- height: 100%;
1613
- overflow: hidden
1614
- }
1615
-
1616
- .element-ditu .map {
1617
- width: 100%;
1618
- height: 100%
1619
- }
1620
-
1621
- .element-ditu .map .el-button {
1622
- width: 100%;
1623
- height: 100%;
1624
- display: -webkit-box;
1625
- display: -ms-flexbox;
1626
- display: flex;
1627
- -webkit-box-align: center;
1628
- -ms-flex-align: center;
1629
- align-items: center;
1630
- padding: 0;
1631
- -webkit-box-pack: center;
1632
- -ms-flex-pack: center;
1633
- justify-content: center;
1634
- background: inherit;
1635
- color: inherit;
1636
- border: none
1637
- }
1638
-
1639
- .element-ditu .center-map {
1640
- width: 100%;
1641
- height: 100%;
1642
- background: #fff
1643
- }
1644
-
1645
- .element-ditu .mask-map {
1646
- position: absolute;
1647
- width: 100%;
1648
- height: 100%;
1649
- top: 0
1650
- }
1651
- .map-iframe {
1652
- width: 100%;
1653
- height: 100%;
1654
- }#audio {
1655
- position: absolute;
1656
- right: 10px;
1657
- top: 10px;
1658
- z-index: 103;
1659
- width: 30px;
1660
- height: 30px;
1661
- display: flex;
1662
- align-items: center;
1663
- }
1664
-
1665
- #audio .mrotate {
1666
- animation: mrotate 5s linear infinite;
1667
- }
1668
-
1669
- @keyframes mrotate {
1670
- to {
1671
- transform: rotate(1turn);
1672
- }
1673
- }
1674
-
1675
- #audio .audio {
1676
- width: 100%;
1677
- height: 100%;
1678
- display: flex;
1679
- align-items: center;
1680
- justify-content: center;
1681
- color: #fff;
1682
- background: #666;
1683
- border-radius: 50%;
1684
- overflow: hidden;
1685
- cursor: pointer;
1686
- transition: all 0.3s ease;
1687
- }
1688
-
1689
- #audio .audio.a-border {
1690
- border: 1px solid #fff;
1691
- }
1692
-
1693
- #audio .audio .music-icon {
1694
- display: block;
1695
- width: 60%;
1696
- height: 60%;
1697
- object-fit: contain;
1698
- }
1699
-
1700
- #audio .audio .iconfont {
1701
- font-size: 2opx;
1702
- line-height: 1;
1703
- }
1704
- #audio .icon-cancel {
1705
- position: absolute;
1706
- width: 100%;
1707
- height: 100%;
1708
- border-radius: 50%;
1709
- overflow: hidden;
1710
- padding: 15px 0;
1711
- }
1712
- #audio .icon-cancel .icon-h {
1713
- transform: rotate(45deg);
1714
- width: 100%;
1715
- height: 2px;
1716
- background: #fff;
1717
- }
1718
- #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
1719
- content: '';
1720
- position: absolute;
1721
- width: 100%;
1722
- height: 2px;
1723
- background: #fff;
1724
- }.ele-effect {
1725
- will-change: transform;
1726
- }
1727
-
1728
- .ele-effect .effect-wrap {
1729
- position: relative;
1730
- width: 100%;
1731
- height: 100%;
1732
- }
1733
-
1734
- .particle {
1735
- position: absolute;
1736
- background-repeat: no-repeat;
1737
- background-size: contain;
1738
- animation-name: falling;
1739
- animation-timing-function: linear;
1740
- animation-iteration-count: infinite;
1741
- will-change: transform;
1742
- }
1743
-
1744
- @keyframes falling {
1745
- 0% {
1746
- transform: translateY(0) rotate(0deg);
1747
- opacity: 1;
1726
+ left: 10px;
1727
+ cursor: pointer;
1748
1728
  }
1749
- 80% {
1750
- opacity: 0.8;
1729
+
1730
+ .give-gift img {
1731
+ max-width: 300px;
1732
+ max-height: 300px;
1733
+ margin-top: 20px;
1751
1734
  }
1752
- 100% {
1753
- transform: translateY(100vh) rotate(360deg);
1754
- opacity: 0;
1735
+
1736
+ /* 留言成功弹窗样式 */
1737
+ .mess-success-popup {
1738
+ position: fixed;
1739
+ top: 0;
1740
+ left: 0;
1741
+ right: 0;
1742
+ bottom: 0;
1743
+ background-color: rgba(0, 0, 0, 0.5);
1744
+ z-index: 2003;
1745
+ display: flex;
1746
+ justify-content: center;
1747
+ align-items: center;
1755
1748
  }
1756
- }
1757
- .ele-lottie .ele-lotwrap {
1758
- overflow: hidden
1759
- }
1760
-
1761
- .ele-effect .effect-wrap {
1749
+
1750
+ .mess-success-popup .gift-popup {
1751
+ width: 300px;
1752
+ height: 200px;
1753
+ background: url('https://h5cdn.unika.cc/static/img/uniComponents/bg-color.png') no-repeat;
1754
+ border-radius: 10px;
1755
+ padding: 20px;
1756
+ text-align: center;
1762
1757
  position: relative;
1763
- overflow: hidden;
1764
- width: 100%;
1765
- height: 100%
1766
- }
1767
-
1768
- .ele-effect .e-small {
1769
- position: absolute;
1770
- width: 24px;
1771
- height: 24px;
1772
- background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
1773
- background-size: cover;
1774
- background-repeat: no-repeat;
1775
- -webkit-transform-origin: center;
1776
- transform-origin: center;
1777
- -webkit-animation: snow 5s linear infinite;
1778
- animation: snow 5s linear infinite
1779
- }
1780
- .ele-lottie .ele-lotwrap {
1781
- overflow: hidden;
1782
- }.call {
1783
- position: absolute;
1784
- cursor: pointer;
1785
- user-select: none;
1786
- }
1787
-
1788
- .call .ani-wrap {
1789
- display: flex;
1790
- justify-content: center;
1791
- align-items: center;
1792
- width: 100%;
1793
- height: 100%;
1794
- overflow: hidden;
1795
- transition: opacity 0.2s;
1796
- }
1797
-
1798
- .call .ani-wrap:hover {
1799
- opacity: 0.9;
1800
- }
1801
-
1802
- .call-content {
1803
- display: flex;
1804
- align-items: center;
1805
- justify-content: center;
1806
- }
1807
-
1808
- .btn-text {
1809
- margin-left: 10px;
1810
- }
1811
-
1812
-
1813
- .hb-tel:before {
1814
- content: "\E642";
1815
- }.form-input {
1758
+ }
1759
+
1760
+ .mess-success-popup .gift-popup .icon-cuowu2 {
1816
1761
  position: absolute;
1762
+ top: 10px;
1763
+ right: 10px;
1764
+ cursor: pointer;
1817
1765
  }
1818
1766
 
1819
- .input-wrapper {
1767
+ .mess-success-popup .gift-popup .toast {
1820
1768
  display: flex;
1821
1769
  align-items: center;
1822
- width: 100%;
1823
- height: 100%;
1824
- padding: 0 10px;
1825
- box-sizing: border-box;
1826
- position: relative;
1827
- transition: border-color 0.3s;
1770
+ justify-content: center;
1771
+ margin: 10px 0;
1828
1772
  }
1829
1773
 
1830
- .required-marker {
1831
- font-size: 12px;
1832
- padding: 0 5px 0 0;
1833
- color: red;
1834
- vertical-align: middle;
1774
+ .mess-success-popup .gift-popup .toast img {
1775
+ width: 20px;
1776
+ height: 15px;
1777
+ margin: 0 5px;
1835
1778
  }
1836
1779
 
1837
- input {
1838
- flex: 1;
1780
+ .mess-success-popup .gift-popup .title {
1781
+ margin: 15px 0;
1782
+ font-size: 16px;
1783
+ color: #333;
1784
+ }
1785
+
1786
+ .mess-success-popup .gift-popup .btn {
1787
+ background: linear-gradient(270deg, #ff4874, #ff9061);
1788
+ color: white;
1839
1789
  border: none;
1840
- outline: none;
1841
- background: transparent;
1790
+ padding: 10px 20px;
1791
+ border-radius: 20px;
1792
+ margin-top: 15px;
1793
+ cursor: pointer;
1794
+ }
1795
+
1796
+ /* 新增图片加载动画样式 */
1797
+ .gift-image-container {
1798
+ position: relative;
1799
+ width: 300px;
1800
+ height: 300px;
1801
+ margin: 20px 0;
1802
+ overflow: hidden;
1803
+ }
1804
+
1805
+ .gift-image-container img {
1806
+ width: 100%;
1842
1807
  height: 100%;
1843
- padding: 0;
1844
- margin: 0;
1808
+ object-fit: contain;
1809
+ opacity: 0;
1810
+ transition: opacity 0.5s ease-in-out;
1845
1811
  }
1846
- /*
1847
- input::placeholder {
1848
- color: #ccc;
1849
- opacity: 1;
1850
- } */
1851
1812
 
1852
- .dynamic-placeholder-input::placeholder {
1853
- color: var(--placeholder-color, #999);
1813
+ .gift-image-container img.loaded {
1854
1814
  opacity: 1;
1855
1815
  }
1856
- .dynamic-placeholder-input::-webkit-input-placeholder {
1857
- color: var(--placeholder-color, #999);
1816
+
1817
+ .image-loading {
1818
+ position: absolute;
1819
+ top: 0;
1820
+ left: 0;
1821
+ width: 100%;
1822
+ height: 100%;
1823
+ display: flex;
1824
+ justify-content: center;
1825
+ align-items: center;
1826
+ background: rgba(255, 255, 255, 0.8);
1858
1827
  }
1859
- .dynamic-placeholder-input::-moz-placeholder {
1860
- color: var(--placeholder-color, #999);
1861
- opacity: 1;
1828
+
1829
+ .loading-spinner {
1830
+ width: 40px;
1831
+ height: 40px;
1832
+ border: 4px solid #f3f3f3;
1833
+ border-top: 4px solid #ed5566;
1834
+ border-radius: 50%;
1835
+ animation: spin 1s linear infinite;
1862
1836
  }
1863
- .dynamic-placeholder-input:-ms-input-placeholder {
1864
- color: var(--placeholder-color, #999);
1865
- }.button {
1866
- position: absolute;
1867
- cursor: pointer;
1868
- user-select: none;
1869
- }
1870
1837
 
1871
- .button .ani-wrap {
1872
- display: flex;
1873
- justify-content: center;
1874
- align-items: center;
1875
- width: 100%;
1876
- height: 100%;
1877
- overflow: hidden;
1878
- transition: opacity 0.2s;
1879
- }
1838
+ @keyframes spin {
1839
+ 0% { transform: rotate(0deg); }
1840
+ 100% { transform: rotate(360deg); }
1841
+ }
1880
1842
 
1881
- .button .ani-wrap:hover {
1882
- opacity: 0.9;
1883
- }
1884
-
1885
- .button-content {
1886
- display: flex;
1887
- align-items: center;
1888
- justify-content: center;
1889
- }
1890
-
1891
- .btn-text {
1892
- margin-left: 10px;
1893
- }body, html {
1843
+ body, html {
1894
1844
  width: 100%;
1895
1845
  height: 100%;
1896
1846
  }
@@ -3350,23 +3300,119 @@ to {
3350
3300
  transform-origin: 50% 0
3351
3301
  }
3352
3302
 
3353
- 99% {
3354
- -webkit-transform: scaleY(1);
3355
- transform: scaleY(1);
3356
- -webkit-transform-origin: 50% 0;
3357
- transform-origin: 50% 0
3303
+ 99% {
3304
+ -webkit-transform: scaleY(1);
3305
+ transform: scaleY(1);
3306
+ -webkit-transform-origin: 50% 0;
3307
+ transform-origin: 50% 0
3308
+ }
3309
+
3310
+ to {
3311
+ -webkit-transform: none;
3312
+ transform: none
3313
+ }
3314
+ }.form-submit {
3315
+ cursor: pointer;
3316
+ transition: all 0.2s;
3317
+ outline: none;
3318
+ border: none;
3319
+ }
3320
+
3321
+ .form-submit:hover {
3322
+ opacity: 0.9;
3323
+ transform: translateY(-1px);
3324
+ }
3325
+
3326
+ .form-submit:active {
3327
+ opacity: 0.8;
3328
+ transform: translateY(0);
3329
+ }
3330
+
3331
+ .form-submit:disabled {
3332
+ opacity: 0.6;
3333
+ cursor: not-allowed;
3334
+ transform: none !important;
3335
+ }
3336
+
3337
+ .f-submit {
3338
+ position: relative;
3339
+ display: block
3340
+ }
3341
+
3342
+ .f-submit .ani-wrap {
3343
+ width: 100%;
3344
+ height: 100%;
3345
+ padding: 10px;
3346
+ overflow: hidden;
3347
+ position: relative
3348
+ }
3349
+
3350
+ .f-submit .f-ovh {
3351
+ position: absolute;
3352
+ left: 50%;
3353
+ top: 50%;
3354
+ transform: translate(-50%,-50%)
3358
3355
  }
3359
3356
 
3360
- to {
3361
- -webkit-transform: none;
3362
- transform: none
3363
- }
3364
- }/* .ele-form {
3357
+ .form-submit:disabled {
3358
+ opacity: 0.7;
3359
+ cursor: not-allowed;
3360
+ }.form-input {
3365
3361
  position: absolute;
3366
- user-select: none;
3362
+ }
3363
+
3364
+ .input-wrapper {
3365
+ display: flex;
3366
+ align-items: center;
3367
+ width: 100%;
3368
+ height: 100%;
3369
+ padding: 0 10px;
3370
+ box-sizing: border-box;
3371
+ position: relative;
3372
+ transition: border-color 0.3s;
3373
+ }
3374
+
3375
+ .required-marker {
3376
+ font-size: 12px;
3377
+ padding: 0 5px 0 0;
3378
+ color: red;
3379
+ vertical-align: middle;
3380
+ }
3381
+
3382
+ input {
3383
+ flex: 1;
3384
+ border: none;
3385
+ outline: none;
3386
+ background: transparent;
3387
+ height: 100%;
3388
+ padding: 0;
3389
+ margin: 0;
3390
+ }
3391
+ /*
3392
+ input::placeholder {
3393
+ color: #ccc;
3394
+ opacity: 1;
3367
3395
  } */
3368
3396
 
3369
- .f-select {
3397
+ .dynamic-placeholder-input::placeholder {
3398
+ color: var(--placeholder-color, #999);
3399
+ opacity: 1;
3400
+ }
3401
+ .dynamic-placeholder-input::-webkit-input-placeholder {
3402
+ color: var(--placeholder-color, #999);
3403
+ }
3404
+ .dynamic-placeholder-input::-moz-placeholder {
3405
+ color: var(--placeholder-color, #999);
3406
+ opacity: 1;
3407
+ }
3408
+ .dynamic-placeholder-input:-ms-input-placeholder {
3409
+ color: var(--placeholder-color, #999);
3410
+ }/* .ele-form {
3411
+ position: absolute;
3412
+ user-select: none;
3413
+ }
3414
+ */
3415
+ .f-single {
3370
3416
  cursor: pointer;
3371
3417
  }
3372
3418
 
@@ -3374,13 +3420,15 @@ to {
3374
3420
  position: relative;
3375
3421
  }
3376
3422
 
3377
- .f-select .ani-wrap .fs-tit {
3378
- position: relative;
3423
+ .f-single .ani-wrap .fs-tit {
3379
3424
  display: flex;
3380
3425
  padding: 0 5px;
3381
- height: 35px;
3382
- line-height: 35px;
3426
+ height: 40px;
3383
3427
  align-items: center;
3428
+ white-space: nowrap;
3429
+ overflow: hidden;
3430
+ text-overflow: ellipsis;
3431
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
3384
3432
  }
3385
3433
 
3386
3434
  .require {
@@ -3389,69 +3437,63 @@ to {
3389
3437
  vertical-align: middle;
3390
3438
  }
3391
3439
 
3392
- .fs-cont {
3393
- padding-right: 15px;
3394
- white-space: nowrap;
3395
- overflow: hidden;
3396
- text-overflow: ellipsis;
3397
- flex-grow: 1;
3398
- }
3399
-
3400
- .icon-bofang1 {
3401
- font-size: 12px;
3402
- transition: transform 0.2s ease;
3403
- }
3404
-
3405
- .rotate-180 {
3406
- transform: rotate(180deg) !important;
3407
- }
3408
-
3409
- .f-real {
3410
- position: absolute;
3411
- left: 0;
3412
- top: 0;
3413
- width: 100%;
3414
- height: 100%;
3415
- z-index: 1;
3416
- opacity: 0;
3417
- cursor: pointer;
3440
+ .f-single ul {
3441
+ padding: 15px;
3442
+ margin: 0;
3443
+ list-style: none;
3418
3444
  }
3419
3445
 
3420
- .dropdown-menu {
3421
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
3446
+ .f-single ul li {
3447
+ display: flex;
3448
+ align-items: center;
3449
+ margin-top: 12px;
3450
+ font-size: 0;
3422
3451
  }
3423
3452
 
3424
- .dropdown-item {
3425
- padding: 8px 10px;
3426
- cursor: pointer;
3427
- transition: background-color 0.2s;
3453
+ .f-single ul li:first-child {
3454
+ margin-top: 0;
3428
3455
  }
3429
3456
 
3430
- .dropdown-item:hover {
3431
- background-color: #f5f5f5;
3457
+ .fs-circle {
3458
+ display: inline-block;
3459
+ width: 16px;
3460
+ height: 16px;
3461
+ border-radius: 50%;
3462
+ position: relative;
3463
+ transition: all 0.2s;
3432
3464
  }
3433
3465
 
3434
- .dropdown-item.selected {
3435
- background-color: #e6f7ff;
3436
- color: #1890ff;
3466
+ .fs-circle.selected {
3467
+ background-color: #2687f1;
3468
+ border-color: #2687f1 !important;
3437
3469
  }
3438
3470
 
3439
- .f-select .fs-tit .icon-bofang1 {
3440
- position: absolute;
3441
- right: 10px;
3442
- font-size: 12px;
3443
- display: inline-block;
3444
- transform: rotate(90deg);
3471
+ .fs-circle.selected::after {
3472
+ content: "";
3473
+ position: absolute;
3474
+ top: 3px;
3475
+ left: 3px;
3476
+ width: 8px;
3477
+ height: 8px;
3478
+ border-radius: 50%;
3479
+ background-color: white;
3445
3480
  }
3446
3481
 
3447
- .icon-bofang1:before {
3448
- content: "\E6CF";
3482
+ .fs-txt {
3483
+ display: inline-block;
3484
+ width: calc(100% - 16px);
3485
+ padding-left: 8px;
3486
+ vertical-align: top;
3487
+ word-break: break-all;
3488
+ font-size: 14px;
3489
+ line-height: 1.2;
3449
3490
  }
3450
3491
 
3451
- .has-error {
3452
- border-color: #ff4d4f !important;
3492
+ .has-error .fs-tit {
3493
+ border-bottom-color: #ff4d4f;
3453
3494
  }
3454
3495
 
3496
+ /* 错误提示样式 */
3455
3497
  .error-tip {
3456
3498
  position: fixed;
3457
3499
  left: 0;
@@ -3536,58 +3578,12 @@ to {
3536
3578
  font-size: 14px;
3537
3579
  line-height: 20px;
3538
3580
  background: #ed5566;
3539
- } .form-submit {
3540
- cursor: pointer;
3541
- transition: all 0.2s;
3542
- outline: none;
3543
- border: none;
3544
- }
3545
-
3546
- .form-submit:hover {
3547
- opacity: 0.9;
3548
- transform: translateY(-1px);
3549
- }
3550
-
3551
- .form-submit:active {
3552
- opacity: 0.8;
3553
- transform: translateY(0);
3554
- }
3555
-
3556
- .form-submit:disabled {
3557
- opacity: 0.6;
3558
- cursor: not-allowed;
3559
- transform: none !important;
3560
- }
3561
-
3562
- .f-submit {
3563
- position: relative;
3564
- display: block
3565
- }
3566
-
3567
- .f-submit .ani-wrap {
3568
- width: 100%;
3569
- height: 100%;
3570
- padding: 10px;
3571
- overflow: hidden;
3572
- position: relative
3573
- }
3574
-
3575
- .f-submit .f-ovh {
3576
- position: absolute;
3577
- left: 50%;
3578
- top: 50%;
3579
- transform: translate(-50%,-50%)
3580
- }
3581
-
3582
- .form-submit:disabled {
3583
- opacity: 0.7;
3584
- cursor: not-allowed;
3585
- }/* .ele-form {
3581
+ } /* .ele-form {
3586
3582
  position: absolute;
3587
3583
  user-select: none;
3588
- }
3589
- */
3590
- .f-single {
3584
+ } */
3585
+
3586
+ .f-select {
3591
3587
  cursor: pointer;
3592
3588
  }
3593
3589
 
@@ -3595,15 +3591,13 @@ cursor: not-allowed;
3595
3591
  position: relative;
3596
3592
  }
3597
3593
 
3598
- .f-single .ani-wrap .fs-tit {
3594
+ .f-select .ani-wrap .fs-tit {
3595
+ position: relative;
3599
3596
  display: flex;
3600
3597
  padding: 0 5px;
3601
- height: 40px;
3598
+ height: 35px;
3599
+ line-height: 35px;
3602
3600
  align-items: center;
3603
- white-space: nowrap;
3604
- overflow: hidden;
3605
- text-overflow: ellipsis;
3606
- border-bottom: 1px solid rgba(153, 153, 153, 1);
3607
3601
  }
3608
3602
 
3609
3603
  .require {
@@ -3612,63 +3606,69 @@ cursor: not-allowed;
3612
3606
  vertical-align: middle;
3613
3607
  }
3614
3608
 
3615
- .f-single ul {
3616
- padding: 15px;
3617
- margin: 0;
3618
- list-style: none;
3609
+ .fs-cont {
3610
+ padding-right: 15px;
3611
+ white-space: nowrap;
3612
+ overflow: hidden;
3613
+ text-overflow: ellipsis;
3614
+ flex-grow: 1;
3615
+ }
3616
+
3617
+ .icon-bofang1 {
3618
+ font-size: 12px;
3619
+ transition: transform 0.2s ease;
3620
+ }
3621
+
3622
+ .rotate-180 {
3623
+ transform: rotate(180deg) !important;
3624
+ }
3625
+
3626
+ .f-real {
3627
+ position: absolute;
3628
+ left: 0;
3629
+ top: 0;
3630
+ width: 100%;
3631
+ height: 100%;
3632
+ z-index: 1;
3633
+ opacity: 0;
3634
+ cursor: pointer;
3619
3635
  }
3620
3636
 
3621
- .f-single ul li {
3622
- display: flex;
3623
- align-items: center;
3624
- margin-top: 12px;
3625
- font-size: 0;
3637
+ .dropdown-menu {
3638
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
3626
3639
  }
3627
3640
 
3628
- .f-single ul li:first-child {
3629
- margin-top: 0;
3641
+ .dropdown-item {
3642
+ padding: 8px 10px;
3643
+ cursor: pointer;
3644
+ transition: background-color 0.2s;
3630
3645
  }
3631
3646
 
3632
- .fs-circle {
3633
- display: inline-block;
3634
- width: 16px;
3635
- height: 16px;
3636
- border-radius: 50%;
3637
- position: relative;
3638
- transition: all 0.2s;
3647
+ .dropdown-item:hover {
3648
+ background-color: #f5f5f5;
3639
3649
  }
3640
3650
 
3641
- .fs-circle.selected {
3642
- background-color: #2687f1;
3643
- border-color: #2687f1 !important;
3651
+ .dropdown-item.selected {
3652
+ background-color: #e6f7ff;
3653
+ color: #1890ff;
3644
3654
  }
3645
3655
 
3646
- .fs-circle.selected::after {
3647
- content: "";
3648
- position: absolute;
3649
- top: 3px;
3650
- left: 3px;
3651
- width: 8px;
3652
- height: 8px;
3653
- border-radius: 50%;
3654
- background-color: white;
3656
+ .f-select .fs-tit .icon-bofang1 {
3657
+ position: absolute;
3658
+ right: 10px;
3659
+ font-size: 12px;
3660
+ display: inline-block;
3661
+ transform: rotate(90deg);
3655
3662
  }
3656
3663
 
3657
- .fs-txt {
3658
- display: inline-block;
3659
- width: calc(100% - 16px);
3660
- padding-left: 8px;
3661
- vertical-align: top;
3662
- word-break: break-all;
3663
- font-size: 14px;
3664
- line-height: 1.2;
3664
+ .icon-bofang1:before {
3665
+ content: "\E6CF";
3665
3666
  }
3666
3667
 
3667
- .has-error .fs-tit {
3668
- border-bottom-color: #ff4d4f;
3668
+ .has-error {
3669
+ border-color: #ff4d4f !important;
3669
3670
  }
3670
3671
 
3671
- /* 错误提示样式 */
3672
3672
  .error-tip {
3673
3673
  position: fixed;
3674
3674
  left: 0;
@@ -3676,92 +3676,7 @@ cursor: not-allowed;
3676
3676
  width: 100%;
3677
3677
  height: 100%;
3678
3678
  z-index: 1000;
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
- }
3679
+ }
3765
3680
  .icon-guanbi:before {
3766
3681
  content: "\E676";
3767
3682
  }
@@ -4155,7 +4070,92 @@ cursor: not-allowed;
4155
4070
  content: "\E65E";
4156
4071
  color: #F44336; /* 失败的红色 */
4157
4072
  }
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
+ }
4158
4155
 
4156
+ .has-error .fs-tit {
4157
+ border-bottom-color: #ff4d4f;
4158
+ }
4159
4159
  .global.video {
4160
4160
  width: 35px;
4161
4161
  height: 55px;
@@ -4170,31 +4170,31 @@ cursor: not-allowed;
4170
4170
  .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
4171
4171
  }
4172
4172
 
4173
- .global.receipt {
4173
+ .global.tel {
4174
4174
  width: 35px;
4175
4175
  height: 55px;
4176
4176
  border-radius: 50%;
4177
4177
  text-align: center;
4178
- margin-bottom: 5px;
4178
+ margin-bottom: 15px;
4179
4179
  border: 2px solid #fff;
4180
4180
  cursor: pointer;
4181
4181
  }
4182
- .icon-liuyan:before { content: "\E636"; }
4182
+ .icon-dianhua:before { content: "\E60E"; }
4183
4183
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4184
- .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }
4185
- .global.tel {
4184
+ .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
4185
+ .global.map {
4186
4186
  width: 35px;
4187
4187
  height: 55px;
4188
4188
  border-radius: 50%;
4189
4189
  text-align: center;
4190
- margin-bottom: 15px;
4190
+ margin-bottom: 5px;
4191
4191
  border: 2px solid #fff;
4192
4192
  cursor: pointer;
4193
4193
  }
4194
- .icon-dianhua:before { content: "\E60E"; }
4194
+ .icon-daohang1:before { content: "\E612"; }
4195
4195
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4196
- .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
4197
- .global.map {
4196
+ .global.map > span { font-size: 10px; line-height: 20px; display: block;}
4197
+ .global.receipt {
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-daohang1:before { content: "\E612"; }
4206
+ .icon-liuyan:before { content: "\E636"; }
4207
4207
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4208
- .global.map > span { font-size: 10px; line-height: 20px; display: block;}
4208
+ .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }