unika-components 1.1.129 → 1.1.131

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