unika-components 1.1.45 → 1.1.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,440 +1,527 @@
1
1
 
2
- #index {
3
- position: relative;
4
- width: 100%;
5
- height: 100%;
6
- overflow: hidden;
2
+ body {
3
+ margin: 0 auto;
4
+ white-space: normal;
5
+ word-break: break-all;
6
+ font-family: PingFang SC, Microsoft Yahei, Lato, Helvetica Neue, Arial, SimSun, Helvetica, STHeiTi, Roboto Regular, Roboto, Droid Sans, sans-serif;
7
7
  }
8
8
 
9
- #page-list {
9
+ .form-container {
10
10
  position: relative;
11
11
  width: 100%;
12
12
  height: 100%;
13
- max-width: 800px;
14
- margin: 0 auto;
15
- z-index: 1
13
+ }
14
+
15
+ .global-v ::v-deep .global-v-show iframe {
16
+ position: absolute;
17
+ left: 0;
18
+ top: 50%;
19
+ transform: translateY(-60%);
20
+ min-height: 45%;
21
+ max-height: 100%;
22
+ width: 100%;
23
+ }
24
+ .ele-img {
25
+ position: absolute;
26
+ overflow: hidden;
27
+ }
28
+
29
+ .ele-img .ani-wrap {
30
+ width: 100%;
31
+ height: 100%;
32
+ }
33
+
34
+ .ele-img .ele-image {
35
+ position: relative;
36
+ display: block;
37
+ }
38
+
39
+ .ele-img .rotate-wrap {
40
+ position: absolute;
41
+ left: 0;
42
+ right: 0;
43
+ top: 0;
44
+ bottom: 0;
45
+ }
46
+
47
+ .ele-img .ele-img-bg,
48
+ .ele-img .rotate-wrap .img-wrap {
49
+ width: 100%;
50
+ height: 100%;
51
+ overflow: hidden;
52
+ }
53
+
54
+ .ele-img .ele-bg-wrap {
55
+ width: 100%;
56
+ height: 100%;
57
+ background-size: cover;
58
+ background-position: 50% 50%;
59
+ background-repeat: no-repeat;
60
+ background-clip: border-box;
61
+ }
62
+
63
+ /* 动画关键帧 */
64
+ @keyframes zoomIn {
65
+ from {
66
+ opacity: 0;
67
+ transform: scale(0.5);
68
+ }
69
+ to {
70
+ opacity: 1;
71
+ transform: scale(1);
72
+ }
73
+ }
74
+ @keyframes jumpheart {
75
+ to {
76
+ -webkit-transform: scale(1.2);
77
+ transform: scale(1.2)
78
+ }
79
+ }
80
+ .ele-calendar {
81
+ position: relative;
82
+ width: 325px !important;
83
+ min-height: 325px !important;
84
+ height: auto !important;
16
85
  }
17
86
 
18
- #page-list.hardware .eles {
19
- will-change: transform
87
+ .ele-calendar .drag-point {
88
+ cursor: default !important;
20
89
  }
21
90
 
22
- #page-list .bg-wrap {
23
- position: absolute;
24
- left: 0;
25
- top: 0;
26
- right: 0;
27
- bottom: 0;
28
- z-index: -1
91
+ .ele-calendar .ani-wrap {
92
+ position: relative;
93
+ width: 100%;
94
+ min-height: 325px !important;
95
+ height: auto !important;
96
+ padding: 22px 0;
29
97
  }
30
98
 
31
- #page-list .ani-pause .ani-wrap {
32
- animation-play-state: paused!important;
33
- -webkit-animation-play-state: paused!important
99
+ .ele-calendar .ani-wrap .can-wrap .can-top {
100
+ display: flex;
101
+ justify-content: space-between;
102
+ align-items: flex-end;
103
+ line-height: 1;
104
+ padding: 0 47px 20px;
34
105
  }
35
106
 
36
- #page-list .audio-wrap {
37
- z-index: 10
107
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
108
+ font-size: 25px;
109
+ padding-bottom: 4px;
38
110
  }
39
111
 
40
- #page-list .audio-wrap,#page-list .page-item {
41
- position: absolute;
42
- left: 0;
43
- top: 0;
44
- right: 0;
45
- bottom: 0
112
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
113
+ font-size: 25px;
46
114
  }
47
115
 
48
- #page-list .page-item {
49
- z-index: 0;
50
- overflow: hidden;
51
- display: none;
52
- visibility: hidden;
53
- transform-style: preserve-3d;
54
- -webkit-backface-visibility: hidden;
55
- backface-visibility: hidden;
56
- transition-timing-function: cubic-bezier(.1,.57,.1,1)
116
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
117
+ position: relative;
118
+ top: 2px;
119
+ font-size: 57px;
57
120
  }
58
121
 
59
- #page-list .page-item .count-down {
60
- display: none
122
+ .ele-calendar .ani-wrap .can-wrap .can-main {
123
+ padding: 0 23px;
61
124
  }
62
125
 
63
- #page-list .page-item .has-ani {
64
- display: none!important
126
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
127
+ display: flex;
128
+ justify-content: flex-start;
129
+ height: 25px;
130
+ line-height: 25px;
131
+ padding: 0 10px;
132
+ border-radius: 13px;
65
133
  }
66
134
 
67
- #page-list .page-item .ele-effect,#page-list .page-item .page-bg {
68
- display: none
135
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-week span {
136
+ width: 14.2%;
137
+ text-align: center;
138
+ color: #fff;
139
+ font-size: 12px;
69
140
  }
70
141
 
71
- #page-list .page-item .limit-ani .ani-wrap,#page-list .page-item .limit-ani .eles {
72
- animation: none!important
142
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul {
143
+ font-size: 0;
144
+ padding: 5px 10px 0;
145
+ text-align: left;
73
146
  }
74
147
 
75
- #page-list .page-item .ani-pause .ani-wrap {
76
- animation-play-state: paused!important;
77
- -webkit-animation-play-state: paused!important
148
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li {
149
+ position: relative;
150
+ display: inline-block;
151
+ height: 25px;
152
+ text-align: center;
153
+ margin-top: 8px;
78
154
  }
79
155
 
80
- #page-list .page-item .showAniEle .has-ani {
81
- display: block!important
156
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active .iconfont {
157
+ display: block;
82
158
  }
83
159
 
84
- #page-list .page-item .showAniEle .page-bg {
85
- display: block
160
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active span {
161
+ color: #fff !important;
86
162
  }
87
163
 
88
- #page-list .page-item .scroll-wrap {
89
- position: relative;
90
- width: 100%;
91
- overflow: hidden
164
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
165
+ animation: jumpheart 0.8s ease infinite alternate;
92
166
  }
93
167
 
94
- #page-list .page-item .amap-maps {
95
- display: none
168
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
169
+ display: none;
170
+ font-size: 26px;
96
171
  }
97
172
 
98
- #page-list .page-item.current {
173
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li span {
174
+ position: absolute;
175
+ left: 50%;
176
+ top: 50%;
99
177
  z-index: 1;
100
- display: block;
101
- visibility: visible
178
+ color: #666;
179
+ font-size: 13px;
180
+ transform: translate(-50%, -52%);
102
181
  }
103
182
 
104
- #page-list .page-item.current .amap-maps,#page-list .page-item.current .count-down,#page-list .page-item.current .page-wrap .ele-effect {
105
- display: block
183
+ .ele-calendar .bottom-center,
184
+ .ele-calendar .left-center,
185
+ .ele-calendar .right-center,
186
+ .ele-calendar .top-center {
187
+ display: none !important;
106
188
  }
107
189
 
108
- #page-list .page-item.current .page-wrap .eles {
109
- text-align: left
190
+ .ele-calendar .ani-wrap .can-wrap2 {
191
+ padding: 21px 23px 0
110
192
  }
111
193
 
112
- #page-list .page-item.current .page-wrap .page-bg {
113
- display: block
194
+ .ele-calendar .ani-wrap .can-wrap2 .can-top {
195
+ display: -webkit-box;
196
+ display: -ms-flexbox;
197
+ display: flex;
198
+ -webkit-box-pack: justify;
199
+ -ms-flex-pack: justify;
200
+ justify-content: space-between;
201
+ -webkit-box-align: end;
202
+ -ms-flex-align: end;
203
+ align-items: flex-end;
204
+ line-height: 1;
205
+ padding: 0 16px 22px;
206
+ font-size: 36px
114
207
  }
115
208
 
116
- #page-list .page-item.current .page-wrap .has-ani {
117
- display: block!important
209
+ .ele-calendar .ani-wrap .can-wrap2 .can-top span {
210
+ font-size: 16px
118
211
  }
119
212
 
120
- #page-list .page-item.visibility {
121
- display: block;
122
- visibility: hidden
213
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week {
214
+ display: -webkit-box;
215
+ display: -ms-flexbox;
216
+ display: flex;
217
+ -webkit-box-pack: start;
218
+ -ms-flex-pack: start;
219
+ justify-content: flex-start;
220
+ height: 25px;
221
+ line-height: 25px;
222
+ padding: 0 10px;
223
+ border-radius: 13px
123
224
  }
124
225
 
125
- #page-list .page-item.active {
126
- z-index: 2;
127
- visibility: visible
226
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week span {
227
+ width: 14.2%;
228
+ text-align: center;
229
+ color: #fff;
230
+ font-size: 12px;
231
+ font-weight: 600
128
232
  }
129
233
 
130
- #page-list .page-item.active .amap-maps,#page-list .page-item.active .count-down {
131
- display: block
132
- }
133
-
134
- #page-list .page-item .page-wrap {
135
- position: relative;
136
- width: 100%;
137
- height: 100%;
138
- overflow: hidden;
139
- z-index: 1
234
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date {
235
+ position: relative
140
236
  }
141
237
 
142
- #page-list .page-item .page-wrap .ele-wrap,#page-list .page-item .page-wrap .page-bg {
238
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date .can-year {
143
239
  position: absolute;
144
- right: 0;
145
- left: 0;
146
- top: 0;
147
- bottom: 0;
148
- width: 100%;
149
- height: 100%;
150
- overflow: hidden
151
- }
152
-
153
- #page-list .page-item .page-wrap .page-bg {
154
- background-size: cover;
155
- background-repeat: no-repeat;
156
- background-position: 50% 50%;
157
- z-index: 0
240
+ white-space: nowrap;
241
+ left: 50%;
242
+ top: 15%;
243
+ -webkit-transform: translateX(-50%);
244
+ transform: translateX(-50%);
245
+ font-size: 76px;
246
+ opacity: .1;
247
+ font-weight: 600
158
248
  }
159
249
 
160
- #page-list .page-item .page-wrap .ele-wrap {
161
- z-index: 1
250
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul {
251
+ font-size: 0;
252
+ padding: 5px 10px 0;
253
+ text-align: left
162
254
  }
163
255
 
164
- #page-list .page-item .page-wrap .eles {
165
- position: absolute
256
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li {
257
+ position: relative;
258
+ display: inline-block;
259
+ width: 14.2%;
260
+ height: 25px;
261
+ text-align: center;
262
+ margin-top: 8px
166
263
  }
167
264
 
168
- #page-list .tip-cover {
169
- position: fixed;
170
- left: 0;
265
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active .iconfont {
266
+ display: block;
267
+ position: absolute;
268
+ left: 17%;
171
269
  top: 0;
172
- width: 100%;
173
- height: 100%;
174
- display: -ms-flexbox;
175
- display: flex;
176
- -ms-flex-align: center;
177
- align-items: center;
178
- -ms-flex-pack: center;
179
- justify-content: center;
180
- z-index: 999;
181
- background-color: rgba(0,0,0,.7)
270
+ font-size: 25px
182
271
  }
183
272
 
184
- #page-list .tip-cover .tip {
185
- width: 80%;
186
- max-width: 6.66667rem;
187
- padding: .26667rem;
188
- border-radius: .13333rem;
189
- background-color: #fff
273
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active span {
274
+ color: #fff!important
190
275
  }
191
276
 
192
- #page-list .tip-cover .tip-btn {
193
- display: block;
194
- margin: .66667rem auto;
195
- width: 3.2rem;
196
- height: .8rem;
197
- color: #fff;
198
- border-radius: .10667rem;
199
- text-align: center;
200
- font-size: .37333rem;
201
- line-height: .8rem;
202
- background: #ed5566
277
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.heart-ani .iconfont {
278
+ -webkit-animation: jumpheart .8s ease infinite alternate;
279
+ animation: jumpheart .8s ease infinite alternate
203
280
  }
204
281
 
205
- #page-list .tip-cover .tip-content {
206
- font-size: .37333rem;
207
- padding-top: .8rem
282
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li .iconfont {
283
+ display: none;
284
+ font-size: 26px
208
285
  }
209
286
 
210
- ::-webkit-scrollbar {
211
- -webkit-appearance: none;
212
- width: .05333rem;
213
- /* height:.05333rem; */
214
- /* display:none; */
287
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li span {
288
+ position: absolute;
289
+ left: 50%;
290
+ top: 50%;
291
+ z-index: 1;
292
+ color: #666;
293
+ font-size: 13px;
294
+ -webkit-transform: translate(-50%,-52%);
295
+ transform: translate(-50%,-52%)
215
296
  }
216
297
 
217
- ::-webkit-scrollbar-button {
218
- display: none
298
+ .ele-calendar .ani-wrap .can-wrap3 .can-top {
299
+ display: -webkit-box;
300
+ display: -ms-flexbox;
301
+ display: flex;
302
+ -webkit-box-pack: justify;
303
+ -ms-flex-pack: justify;
304
+ justify-content: space-between;
305
+ -webkit-box-align: end;
306
+ -ms-flex-align: end;
307
+ align-items: flex-end;
308
+ line-height: 1;
309
+ padding: 18px 33px 10px;
310
+ font-size: 36px;
219
311
  }
220
312
 
221
- ::-webkit-scrollbar-corner,::-webkit-scrollbar-track {
222
- background-color: transparent
313
+ .ele-calendar .ani-wrap .can-wrap3 .can-top span {
314
+ font-size: 16px
223
315
  }
224
316
 
225
- ::-webkit-scrollbar-thumb {
226
- border-radius: .05333rem;
227
- background-color: rgba(0,0,0,.5)
317
+ .ele-calendar .ani-wrap .can-wrap3 .can-top .can-year {
318
+ font-size: 20px
228
319
  }
229
320
 
230
-
231
- .global-v ::v-deep .global-v-show iframe {
232
- position: absolute;
233
- left: 0;
234
- top: 50%;
235
- transform: translateY(-60%);
236
- min-height: 45%;
237
- max-height: 100%;
238
- width: 100%;
239
- }
240
-
241
- .form-container {
242
- position: relative;
243
- width: 100%;
244
- height: 100%;
321
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week {
322
+ display: -webkit-box;
323
+ display: -ms-flexbox;
324
+ display: flex;
325
+ -webkit-box-pack: start;
326
+ -ms-flex-pack: start;
327
+ justify-content: flex-start;
328
+ height: 40px;
329
+ line-height: 40px;
330
+ padding: 0 34px;
331
+ border-bottom: 1px solid
245
332
  }
246
- .count-down .drag-point {
247
- cursor: default!important
333
+
334
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week span {
335
+ width: 14.2%;
336
+ text-align: center;
337
+ color: #fff;
338
+ font-size: 12px;
339
+ font-weight: 600
248
340
  }
249
341
 
250
- .count-down .ani-wrap {
251
- width: 100%;
252
- height: 100%
342
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date {
343
+ position: relative
253
344
  }
254
345
 
255
- .count-down .count-text,.count-down .finish-cont {
256
- display: -webkit-box;
257
- display: -ms-flexbox;
258
- display: flex;
259
- height: 100%;
260
- -webkit-box-align: center;
261
- -ms-flex-align: center;
262
- align-items: center;
263
- -webkit-box-pack: center;
264
- -ms-flex-pack: center;
265
- justify-content: center
346
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul {
347
+ font-size: 0;
348
+ padding: 5px 33px 0;
349
+ text-align: left
266
350
  }
267
351
 
268
- .count-down .finish-cont {
269
- width: 100%
352
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li {
353
+ position: relative;
354
+ display: inline-block;
355
+ width: 14.2%;
356
+ height: 25px;
357
+ text-align: center;
358
+ margin-top: 8px;
270
359
  }
271
360
 
272
- .count-down .count-flip {
273
- display: -webkit-box;
274
- display: -ms-flexbox;
275
- display: flex;
276
- height: 100%;
277
- -webkit-box-align: center;
278
- -ms-flex-align: center;
279
- align-items: center;
280
- -webkit-box-pack: center;
281
- -ms-flex-pack: center;
282
- justify-content: center
361
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active {
362
+ color: #eee
283
363
  }
284
364
 
285
- .count-down .count-flip .numscroll {
286
- -webkit-animation: numscroll .4s ease-in-out;
287
- animation: numscroll .4s ease-in-out;
288
- -webkit-animation-fill-mode: both;
289
- animation-fill-mode: both
365
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active .iconfont {
366
+ display: block;
367
+ position: absolute;
368
+ left: 12%;
369
+ top: 2px;
290
370
  }
291
371
 
292
- .count-down .count-flip .numscroll .curr-num {
293
- -webkit-transition: all .3s ease-in-out;
294
- transition: all .3s ease-in-out;
295
- opacity: .6;
296
- -webkit-transform: scale(.5)!important;
297
- transform: scale(.5)!important
372
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active span {
373
+ font-size: 12px
298
374
  }
299
375
 
300
- @-webkit-keyframes numscroll {
301
- 0% {
302
- -webkit-transform: translateZ(0);
303
- transform: translateZ(0)
304
- }
376
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.heart-ani .iconfont {
377
+ -webkit-animation: jumpheart .8s ease infinite alternate;
378
+ animation: jumpheart .8s ease infinite alternate
379
+ }
305
380
 
381
+ @keyframes jumpheart {
306
382
  to {
307
- -webkit-transform: translate3d(0,100%,0);
308
- transform: translate3d(0,100%,0)
383
+ -webkit-transform: scale(1.2);
384
+ transform: scale(1.2)
309
385
  }
310
386
  }
311
387
 
312
- @keyframes numscroll {
313
- 0% {
314
- -webkit-transform: translateZ(0);
315
- transform: translateZ(0)
316
- }
317
-
318
- to {
319
- -webkit-transform: translate3d(0,100%,0);
320
- transform: translate3d(0,100%,0)
321
- }
388
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li .iconfont {
389
+ display: none;
390
+ font-size: 26px
322
391
  }
323
392
 
324
- .count-down .count-flip .c-com {
325
- min-width: 50px;
326
- height: auto;
327
- margin: 6px;
328
- padding: 5px 0 6px;
329
- background-color: #111
393
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li span {
394
+ position: absolute;
395
+ left: 50%;
396
+ top: 50%;
397
+ z-index: 1;
398
+ color: #666;
399
+ font-size: 13px;
400
+ -webkit-transform: translate(-50%,-52%);
401
+ transform: translate(-50%,-52%)
330
402
  }
331
403
 
332
- .count-down .count-flip .c-com .flex-wrap {
333
- display: -webkit-box;
334
- display: -ms-flexbox;
335
- display: flex;
336
- position: relative;
337
- width: 100%;
338
- height: 100%;
339
- -webkit-box-align: center;
340
- -ms-flex-align: center;
341
- align-items: center
404
+ .ele-calendar .bottom-center,.ele-calendar .left-center,.ele-calendar .right-center,.ele-calendar .top-center {
405
+ display: none!important
342
406
  }
343
-
344
- .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
345
- line-height: 27px
407
+ .icon-tuoyuanxing:before {
408
+ content: "\E6A7";
346
409
  }
347
-
348
- .count-down .count-flip .c-com .flex-wrap .next-num {
349
- position: absolute;
350
- top: -100%
410
+ .icon-zan1:before {
411
+ content: "\E66D";
351
412
  }
352
-
353
- .count-down .count-flip .c-com .flex-wrap .curr-num {
354
- -webkit-transform: scale(1);
355
- transform: scale(1)
413
+ .icon-xingzhuangjiehe:before {
414
+ content: "\E6A6";
356
415
  }
357
-
358
- .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 {
359
- display: none!important
416
+ .ele-text {
417
+ position: relative;
360
418
  }
361
419
 
362
- .c-wrap {
420
+ .ele-text .ani-wrap {
363
421
  width: 100%;
364
422
  height: 100%;
365
- overflow: hidden;
366
- font-size: 0
367
423
  }
368
424
 
369
- .c-wrap.c-day-wrap {
370
- text-align: center
425
+ .text-common {
426
+ padding: 5px;
427
+ text-orientation: upright;
428
+ white-space: pre-wrap;
371
429
  }
372
430
 
373
- .c-wrap.c-day-wrap .c-num {
374
- width: auto
431
+ /* 文本动画类 */
432
+ .text-fadeIn {
433
+ animation: fadeIn 1s ease-in-out;
375
434
  }
376
435
 
377
- .c-wrap .c-num {
378
- display: inline-block;
379
- width: 50%;
380
- overflow: hidden;
381
- font-size: 20px;
382
- color: #999
436
+ .text-slideIn {
437
+ animation: slideIn 1s ease-in-out;
383
438
  }
384
439
 
385
- .c-wrap .c-left .flex-wrap {
386
- display: -webkit-box;
387
- display: -ms-flexbox;
388
- display: flex;
389
- -webkit-box-pack: end;
390
- -ms-flex-pack: end;
391
- justify-content: flex-end
440
+ .text-bounceIn {
441
+ animation: bounceIn 1s ease-in-out;
392
442
  }
393
443
 
394
- .c-wrap .c-text {
395
- display: -webkit-box;
396
- display: -ms-flexbox;
397
- display: flex;
398
- width: 100%;
399
- font-size: 12px;
400
- -webkit-box-pack: center;
401
- -ms-flex-pack: center;
402
- justify-content: center;
403
- -webkit-box-align: center;
404
- -ms-flex-align: center;
405
- align-items: center;
406
- white-space: nowrap
444
+ /* 基础动画关键帧 */
445
+ @keyframes fadeIn {
446
+ from {
447
+ opacity: 0;
448
+ }
449
+ to {
450
+ opacity: 1;
451
+ }
407
452
  }
408
- .ele-shape {
409
- position: absolute;
410
- overflow: hidden;
453
+
454
+ @keyframes slideIn {
455
+ from {
456
+ transform: translateY(20px);
457
+ opacity: 0;
458
+ }
459
+ to {
460
+ transform: translateY(0);
461
+ opacity: 1;
462
+ }
411
463
  }
412
464
 
413
- .ani-wrap {
414
- width: 100%;
415
- height: 100%;
416
- box-sizing: border-box;
465
+ @keyframes bounceIn {
466
+ 0% {
467
+ transform: scale(0.3);
468
+ opacity: 0;
469
+ }
470
+ 50% {
471
+ transform: scale(1.05);
472
+ opacity: 0.8;
473
+ }
474
+ 70% {
475
+ transform: scale(0.9);
476
+ opacity: 0.9;
477
+ }
478
+ 100% {
479
+ transform: scale(1);
480
+ opacity: 1;
481
+ }
482
+ }.call {
483
+ position: absolute;
484
+ cursor: pointer;
485
+ user-select: none;
417
486
  }
418
487
 
419
- .e-shape {
488
+ .call .ani-wrap {
489
+ display: flex;
490
+ justify-content: center;
491
+ align-items: center;
420
492
  width: 100%;
421
493
  height: 100%;
494
+ overflow: hidden;
495
+ transition: opacity 0.2s;
422
496
  }
423
497
 
424
- .svg-container :deep(svg) {
425
- width: 100%;
426
- height: 100%;
427
- display: block;
498
+ .call .ani-wrap:hover {
499
+ opacity: 0.9;
428
500
  }
429
501
 
430
- .svg-loading,
431
- .svg-error {
502
+ .call-content {
432
503
  display: flex;
433
504
  align-items: center;
434
505
  justify-content: center;
435
- width: 100%;
436
- height: 100%;
437
- background: rgba(0,0,0,0.05);
506
+ }
507
+
508
+ .btn-text {
509
+ margin-left: 10px;
510
+ }
511
+
512
+ /* 这里可以添加实际的电话图标样式 */
513
+ /* .iconfont.hb-tel {
514
+ display: inline-block;
515
+ width: 16px;
516
+ height: 16px;
517
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>');
518
+ background-repeat: no-repeat;
519
+ background-position: center;
520
+ background-size: contain;
521
+ } */
522
+
523
+ .hb-tel:before {
524
+ content: "\E642";
438
525
  }
439
526
  .element-video {
440
527
  position: absolute;
@@ -481,680 +568,779 @@
481
568
 
482
569
  .video-cover:hover .play-btn {
483
570
  opacity: 1;
484
- }
485
- @keyframes jumpheart {
486
- to {
487
- -webkit-transform: scale(1.2);
488
- transform: scale(1.2)
489
- }
571
+ }.button {
572
+ position: absolute;
573
+ cursor: pointer;
574
+ user-select: none;
490
575
  }
491
- .ele-calendar {
492
- position: relative;
493
- width: 325px !important;
494
- min-height: 325px !important;
495
- height: auto !important;
576
+
577
+ .button .ani-wrap {
578
+ display: flex;
579
+ justify-content: center;
580
+ align-items: center;
581
+ width: 100%;
582
+ height: 100%;
583
+ overflow: hidden;
584
+ transition: opacity 0.2s;
496
585
  }
497
-
498
- .ele-calendar .drag-point {
499
- cursor: default !important;
586
+
587
+ .button .ani-wrap:hover {
588
+ opacity: 0.9;
500
589
  }
501
590
 
502
- .ele-calendar .ani-wrap {
503
- position: relative;
504
- width: 100%;
505
- min-height: 325px !important;
506
- height: auto !important;
507
- padding: 22px 0;
591
+ .button-content {
592
+ display: flex;
593
+ align-items: center;
594
+ justify-content: center;
508
595
  }
509
596
 
510
- .ele-calendar .ani-wrap .can-wrap .can-top {
597
+ .btn-text {
598
+ margin-left: 10px;
599
+ }#audio {
600
+ position: absolute;
601
+ right: 10px;
602
+ top: 10px;
603
+ z-index: 103;
604
+ width: 30px;
605
+ height: 30px;
511
606
  display: flex;
512
- justify-content: space-between;
513
- align-items: flex-end;
514
- line-height: 1;
515
- padding: 0 47px 20px;
607
+ align-items: center;
516
608
  }
517
609
 
518
- .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
519
- font-size: 25px;
520
- padding-bottom: 4px;
610
+ #audio .mrotate {
611
+ animation: mrotate 5s linear infinite;
521
612
  }
522
613
 
523
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
524
- font-size: 25px;
614
+ @keyframes mrotate {
615
+ to {
616
+ transform: rotate(1turn);
617
+ }
525
618
  }
526
619
 
527
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
528
- position: relative;
529
- top: 2px;
530
- font-size: 57px;
620
+ #audio .audio {
621
+ width: 100%;
622
+ height: 100%;
623
+ display: flex;
624
+ align-items: center;
625
+ justify-content: center;
626
+ color: #fff;
627
+ background: #666;
628
+ border-radius: 50%;
629
+ overflow: hidden;
630
+ cursor: pointer;
631
+ transition: all 0.3s ease;
531
632
  }
532
633
 
533
- .ele-calendar .ani-wrap .can-wrap .can-main {
534
- padding: 0 23px;
634
+ #audio .audio.a-border {
635
+ border: 1px solid #fff;
535
636
  }
536
637
 
537
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
538
- display: flex;
539
- justify-content: flex-start;
540
- height: 25px;
541
- line-height: 25px;
542
- padding: 0 10px;
543
- border-radius: 13px;
638
+ #audio .audio .music-icon {
639
+ display: block;
640
+ width: 60%;
641
+ height: 60%;
642
+ object-fit: contain;
544
643
  }
545
644
 
546
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week span {
547
- width: 14.2%;
548
- text-align: center;
549
- color: #fff;
550
- font-size: 12px;
645
+ #audio .audio .iconfont {
646
+ font-size: 2opx;
647
+ line-height: 1;
551
648
  }
552
-
553
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul {
554
- font-size: 0;
555
- padding: 5px 10px 0;
556
- text-align: left;
649
+ #audio .icon-cancel {
650
+ position: absolute;
651
+ width: 100%;
652
+ height: 100%;
653
+ border-radius: 50%;
654
+ overflow: hidden;
655
+ padding: 15px 0;
656
+ }
657
+ #audio .icon-cancel .icon-h {
658
+ transform: rotate(45deg);
659
+ width: 100%;
660
+ height: 2px;
661
+ background: #fff;
662
+ }
663
+ #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
664
+ content: '';
665
+ position: absolute;
666
+ width: 100%;
667
+ height: 2px;
668
+ background: #fff;
669
+ }
670
+ .ele-lottie .ele-lotwrap {
671
+ overflow: hidden;
672
+ }.ele-shape {
673
+ position: absolute;
674
+ overflow: hidden;
557
675
  }
558
676
 
559
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li {
560
- position: relative;
561
- display: inline-block;
562
- height: 25px;
563
- text-align: center;
564
- margin-top: 8px;
677
+ .ani-wrap {
678
+ width: 100%;
679
+ height: 100%;
680
+ box-sizing: border-box;
565
681
  }
566
682
 
567
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active .iconfont {
568
- display: block;
683
+ .e-shape {
684
+ width: 100%;
685
+ height: 100%;
569
686
  }
570
687
 
571
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active span {
572
- color: #fff !important;
688
+ .svg-container :deep(svg) {
689
+ width: 100%;
690
+ height: 100%;
691
+ display: block;
573
692
  }
574
693
 
575
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
576
- animation: jumpheart 0.8s ease infinite alternate;
694
+ .svg-loading,
695
+ .svg-error {
696
+ display: flex;
697
+ align-items: center;
698
+ justify-content: center;
699
+ width: 100%;
700
+ height: 100%;
701
+ background: rgba(0,0,0,0.05);
702
+ }.ele-effect {
703
+ will-change: transform;
577
704
  }
578
705
 
579
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
580
- display: none;
581
- font-size: 26px;
706
+ .ele-effect .effect-wrap {
707
+ position: relative;
708
+ width: 100%;
709
+ height: 100%;
582
710
  }
583
711
 
584
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li span {
712
+ .particle {
585
713
  position: absolute;
586
- left: 50%;
587
- top: 50%;
588
- z-index: 1;
589
- color: #666;
590
- font-size: 13px;
591
- transform: translate(-50%, -52%);
714
+ background-repeat: no-repeat;
715
+ background-size: contain;
716
+ animation-name: falling;
717
+ animation-timing-function: linear;
718
+ animation-iteration-count: infinite;
719
+ will-change: transform;
592
720
  }
593
721
 
594
- .ele-calendar .bottom-center,
595
- .ele-calendar .left-center,
596
- .ele-calendar .right-center,
597
- .ele-calendar .top-center {
598
- display: none !important;
722
+ @keyframes falling {
723
+ 0% {
724
+ transform: translateY(0) rotate(0deg);
725
+ opacity: 1;
726
+ }
727
+ 80% {
728
+ opacity: 0.8;
729
+ }
730
+ 100% {
731
+ transform: translateY(100vh) rotate(360deg);
732
+ opacity: 0;
733
+ }
734
+ }
735
+ .ele-lottie .ele-lotwrap {
736
+ overflow: hidden
599
737
  }
600
738
 
601
- .ele-calendar .ani-wrap .can-wrap2 {
602
- padding: 21px 23px 0
739
+ .ele-effect .effect-wrap {
740
+ position: relative;
741
+ overflow: hidden;
742
+ width: 100%;
743
+ height: 100%
603
744
  }
604
745
 
605
- .ele-calendar .ani-wrap .can-wrap2 .can-top {
606
- display: -webkit-box;
607
- display: -ms-flexbox;
608
- display: flex;
609
- -webkit-box-pack: justify;
610
- -ms-flex-pack: justify;
611
- justify-content: space-between;
612
- -webkit-box-align: end;
613
- -ms-flex-align: end;
614
- align-items: flex-end;
615
- line-height: 1;
616
- padding: 0 16px 22px;
617
- font-size: 36px
746
+ .ele-effect .e-small {
747
+ position: absolute;
748
+ width: 24px;
749
+ height: 24px;
750
+ background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
751
+ background-size: cover;
752
+ background-repeat: no-repeat;
753
+ -webkit-transform-origin: center;
754
+ transform-origin: center;
755
+ -webkit-animation: snow 5s linear infinite;
756
+ animation: snow 5s linear infinite
757
+ }.element-ditu .ani-wrap {
758
+ width: 100%;
759
+ height: 100%;
760
+ overflow: hidden
618
761
  }
619
762
 
620
- .ele-calendar .ani-wrap .can-wrap2 .can-top span {
621
- font-size: 16px
763
+ .element-ditu .map {
764
+ width: 100%;
765
+ height: 100%
622
766
  }
623
767
 
624
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week {
768
+ .element-ditu .map .el-button {
769
+ width: 100%;
770
+ height: 100%;
625
771
  display: -webkit-box;
626
772
  display: -ms-flexbox;
627
773
  display: flex;
628
- -webkit-box-pack: start;
629
- -ms-flex-pack: start;
630
- justify-content: flex-start;
631
- height: 25px;
632
- line-height: 25px;
633
- padding: 0 10px;
634
- border-radius: 13px
635
- }
636
-
637
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week span {
638
- width: 14.2%;
639
- text-align: center;
640
- color: #fff;
641
- font-size: 12px;
642
- font-weight: 600
774
+ -webkit-box-align: center;
775
+ -ms-flex-align: center;
776
+ align-items: center;
777
+ padding: 0;
778
+ -webkit-box-pack: center;
779
+ -ms-flex-pack: center;
780
+ justify-content: center;
781
+ background: inherit;
782
+ color: inherit;
783
+ border: none
643
784
  }
644
785
 
645
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date {
646
- position: relative
786
+ .element-ditu .center-map {
787
+ width: 100%;
788
+ height: 100%;
789
+ background: #fff
647
790
  }
648
791
 
649
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date .can-year {
792
+ .element-ditu .mask-map {
650
793
  position: absolute;
651
- white-space: nowrap;
652
- left: 50%;
653
- top: 15%;
654
- -webkit-transform: translateX(-50%);
655
- transform: translateX(-50%);
656
- font-size: 76px;
657
- opacity: .1;
658
- font-weight: 600
794
+ width: 100%;
795
+ height: 100%;
796
+ top: 0
659
797
  }
660
-
661
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul {
662
- font-size: 0;
663
- padding: 5px 10px 0;
664
- text-align: left
798
+ .map-iframe {
799
+ width: 100%;
800
+ height: 100%;
801
+ }.count-down .drag-point {
802
+ cursor: default!important
665
803
  }
666
804
 
667
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li {
668
- position: relative;
669
- display: inline-block;
670
- width: 14.2%;
671
- height: 25px;
672
- text-align: center;
673
- margin-top: 8px
805
+ .count-down .ani-wrap {
806
+ width: 100%;
807
+ height: 100%
674
808
  }
675
809
 
676
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active .iconfont {
677
- display: block;
678
- position: absolute;
679
- left: 17%;
680
- top: 0;
681
- font-size: 25px
810
+ .count-down .count-text,.count-down .finish-cont {
811
+ display: -webkit-box;
812
+ display: -ms-flexbox;
813
+ display: flex;
814
+ height: 100%;
815
+ -webkit-box-align: center;
816
+ -ms-flex-align: center;
817
+ align-items: center;
818
+ -webkit-box-pack: center;
819
+ -ms-flex-pack: center;
820
+ justify-content: center
682
821
  }
683
822
 
684
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active span {
685
- color: #fff!important
823
+ .count-down .finish-cont {
824
+ width: 100%
686
825
  }
687
826
 
688
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.heart-ani .iconfont {
689
- -webkit-animation: jumpheart .8s ease infinite alternate;
690
- animation: jumpheart .8s ease infinite alternate
827
+ .count-down .count-flip {
828
+ display: -webkit-box;
829
+ display: -ms-flexbox;
830
+ display: flex;
831
+ height: 100%;
832
+ -webkit-box-align: center;
833
+ -ms-flex-align: center;
834
+ align-items: center;
835
+ -webkit-box-pack: center;
836
+ -ms-flex-pack: center;
837
+ justify-content: center
691
838
  }
692
839
 
693
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li .iconfont {
694
- display: none;
695
- font-size: 26px
696
- }
840
+ .count-down .count-flip .numscroll {
841
+ -webkit-animation: numscroll .4s ease-in-out;
842
+ animation: numscroll .4s ease-in-out;
843
+ -webkit-animation-fill-mode: both;
844
+ animation-fill-mode: both
845
+ }
697
846
 
698
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li span {
699
- position: absolute;
700
- left: 50%;
701
- top: 50%;
702
- z-index: 1;
703
- color: #666;
704
- font-size: 13px;
705
- -webkit-transform: translate(-50%,-52%);
706
- transform: translate(-50%,-52%)
847
+ .count-down .count-flip .numscroll .curr-num {
848
+ -webkit-transition: all .3s ease-in-out;
849
+ transition: all .3s ease-in-out;
850
+ opacity: .6;
851
+ -webkit-transform: scale(.5)!important;
852
+ transform: scale(.5)!important
707
853
  }
708
854
 
709
- .ele-calendar .ani-wrap .can-wrap3 .can-top {
710
- display: -webkit-box;
711
- display: -ms-flexbox;
712
- display: flex;
713
- -webkit-box-pack: justify;
714
- -ms-flex-pack: justify;
715
- justify-content: space-between;
716
- -webkit-box-align: end;
717
- -ms-flex-align: end;
718
- align-items: flex-end;
719
- line-height: 1;
720
- padding: 18px 33px 10px;
721
- font-size: 36px;
855
+ @-webkit-keyframes numscroll {
856
+ 0% {
857
+ -webkit-transform: translateZ(0);
858
+ transform: translateZ(0)
859
+ }
860
+
861
+ to {
862
+ -webkit-transform: translate3d(0,100%,0);
863
+ transform: translate3d(0,100%,0)
864
+ }
722
865
  }
723
866
 
724
- .ele-calendar .ani-wrap .can-wrap3 .can-top span {
725
- font-size: 16px
867
+ @keyframes numscroll {
868
+ 0% {
869
+ -webkit-transform: translateZ(0);
870
+ transform: translateZ(0)
871
+ }
872
+
873
+ to {
874
+ -webkit-transform: translate3d(0,100%,0);
875
+ transform: translate3d(0,100%,0)
876
+ }
726
877
  }
727
878
 
728
- .ele-calendar .ani-wrap .can-wrap3 .can-top .can-year {
729
- font-size: 20px
879
+ .count-down .count-flip .c-com {
880
+ min-width: 50px;
881
+ height: auto;
882
+ margin: 6px;
883
+ padding: 5px 0 6px;
884
+ background-color: #111
730
885
  }
731
886
 
732
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week {
887
+ .count-down .count-flip .c-com .flex-wrap {
733
888
  display: -webkit-box;
734
889
  display: -ms-flexbox;
735
890
  display: flex;
736
- -webkit-box-pack: start;
737
- -ms-flex-pack: start;
738
- justify-content: flex-start;
739
- height: 40px;
740
- line-height: 40px;
741
- padding: 0 34px;
742
- border-bottom: 1px solid
891
+ position: relative;
892
+ width: 100%;
893
+ height: 100%;
894
+ -webkit-box-align: center;
895
+ -ms-flex-align: center;
896
+ align-items: center
743
897
  }
744
898
 
745
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week span {
746
- width: 14.2%;
747
- text-align: center;
748
- color: #fff;
749
- font-size: 12px;
750
- font-weight: 600
899
+ .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
900
+ line-height: 27px
751
901
  }
752
902
 
753
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date {
754
- position: relative
903
+ .count-down .count-flip .c-com .flex-wrap .next-num {
904
+ position: absolute;
905
+ top: -100%
755
906
  }
756
907
 
757
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul {
758
- font-size: 0;
759
- padding: 5px 33px 0;
760
- text-align: left
908
+ .count-down .count-flip .c-com .flex-wrap .curr-num {
909
+ -webkit-transform: scale(1);
910
+ transform: scale(1)
761
911
  }
762
912
 
763
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li {
764
- position: relative;
765
- display: inline-block;
766
- width: 14.2%;
767
- height: 25px;
768
- text-align: center;
769
- margin-top: 8px;
913
+ .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 {
914
+ display: none!important
770
915
  }
771
916
 
772
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active {
773
- color: #eee
917
+ .c-wrap {
918
+ width: 100%;
919
+ height: 100%;
920
+ overflow: hidden;
921
+ font-size: 0
774
922
  }
775
923
 
776
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active .iconfont {
777
- display: block;
778
- position: absolute;
779
- left: 12%;
780
- top: 2px;
924
+ .c-wrap.c-day-wrap {
925
+ text-align: center
781
926
  }
782
927
 
783
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active span {
784
- font-size: 12px
928
+ .c-wrap.c-day-wrap .c-num {
929
+ width: auto
785
930
  }
786
931
 
787
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.heart-ani .iconfont {
788
- -webkit-animation: jumpheart .8s ease infinite alternate;
789
- animation: jumpheart .8s ease infinite alternate
932
+ .c-wrap .c-num {
933
+ display: inline-block;
934
+ width: 50%;
935
+ overflow: hidden;
936
+ font-size: 20px;
937
+ color: #999
790
938
  }
791
939
 
792
- @keyframes jumpheart {
793
- to {
794
- -webkit-transform: scale(1.2);
795
- transform: scale(1.2)
796
- }
940
+ .c-wrap .c-left .flex-wrap {
941
+ display: -webkit-box;
942
+ display: -ms-flexbox;
943
+ display: flex;
944
+ -webkit-box-pack: end;
945
+ -ms-flex-pack: end;
946
+ justify-content: flex-end
797
947
  }
798
948
 
799
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li .iconfont {
800
- display: none;
801
- font-size: 26px
949
+ .c-wrap .c-text {
950
+ display: -webkit-box;
951
+ display: -ms-flexbox;
952
+ display: flex;
953
+ width: 100%;
954
+ font-size: 12px;
955
+ -webkit-box-pack: center;
956
+ -ms-flex-pack: center;
957
+ justify-content: center;
958
+ -webkit-box-align: center;
959
+ -ms-flex-align: center;
960
+ align-items: center;
961
+ white-space: nowrap
802
962
  }
803
-
804
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li span {
963
+ .ele-form {
805
964
  position: absolute;
806
- left: 50%;
807
- top: 50%;
808
- z-index: 1;
809
- color: #666;
810
- font-size: 13px;
811
- -webkit-transform: translate(-50%,-52%);
812
- transform: translate(-50%,-52%)
965
+ user-select: none;
813
966
  }
814
967
 
815
- .ele-calendar .bottom-center,.ele-calendar .left-center,.ele-calendar .right-center,.ele-calendar .top-center {
816
- display: none!important
817
- }
818
- .icon-tuoyuanxing:before {
819
- content: "\E6A7";
820
- }
821
- .icon-zan1:before {
822
- content: "\E66D";
823
- }
824
- .icon-xingzhuangjiehe:before {
825
- content: "\E6A6";
968
+ .f-multiple {
969
+ cursor: pointer;
826
970
  }
827
- .ele-text {
971
+
972
+ .ani-wrap {
828
973
  position: relative;
829
974
  }
830
975
 
831
- .ele-text .ani-wrap {
832
- width: 100%;
833
- height: 100%;
976
+ .f-multiple .ani-wrap .fs-tit {
977
+ display: flex;
978
+ padding: 0 5px;
979
+ height: 40px;
980
+ align-items: center;
981
+ white-space: nowrap;
982
+ overflow: hidden;
983
+ text-overflow: ellipsis;
984
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
834
985
  }
835
986
 
836
- .text-common {
837
- padding: 5px;
838
- text-orientation: upright;
839
- white-space: pre-wrap;
987
+ .require {
988
+ padding: 0 5px 0 0;
989
+ color: red;
990
+ vertical-align: middle;
840
991
  }
841
992
 
842
- /* 文本动画类 */
843
- .text-fadeIn {
844
- animation: fadeIn 1s ease-in-out;
993
+ .f-multiple ul {
994
+ padding: 15px;
995
+ margin: 0;
996
+ list-style: none;
845
997
  }
846
998
 
847
- .text-slideIn {
848
- animation: slideIn 1s ease-in-out;
999
+ .f-multiple ul li {
1000
+ margin-top: 12px;
1001
+ font-size: 0;
1002
+ display: flex;
1003
+ align-items: center;
1004
+ cursor: pointer;
849
1005
  }
850
1006
 
851
- .text-bounceIn {
852
- animation: bounceIn 1s ease-in-out;
1007
+ .f-multiple ul li:first-child {
1008
+ margin-top: 0;
853
1009
  }
854
1010
 
855
- /* 基础动画关键帧 */
856
- @keyframes fadeIn {
857
- from {
858
- opacity: 0;
859
- }
860
- to {
861
- opacity: 1;
862
- }
1011
+ .fs-circle {
1012
+ display: inline-block;
1013
+ width: 16px;
1014
+ height: 16px;
1015
+ border-radius: 50%;
1016
+ position: relative;
1017
+ transition: all 0.2s;
863
1018
  }
864
1019
 
865
- @keyframes slideIn {
866
- from {
867
- transform: translateY(20px);
868
- opacity: 0;
869
- }
870
- to {
871
- transform: translateY(0);
872
- opacity: 1;
873
- }
1020
+ .fs-circle.selected {
1021
+ background-color: #2687f1;
1022
+ border-color: #2687f1 !important;
874
1023
  }
875
1024
 
876
- @keyframes bounceIn {
877
- 0% {
878
- transform: scale(0.3);
879
- opacity: 0;
880
- }
881
- 50% {
882
- transform: scale(1.05);
883
- opacity: 0.8;
884
- }
885
- 70% {
886
- transform: scale(0.9);
887
- opacity: 0.9;
888
- }
889
- 100% {
890
- transform: scale(1);
891
- opacity: 1;
892
- }
893
- }.ele-effect {
894
- will-change: transform;
1025
+ .fs-circle.selected::after {
1026
+ content: "";
1027
+ position: absolute;
1028
+ top: 3px;
1029
+ left: 3px;
1030
+ width: 8px;
1031
+ height: 8px;
1032
+ border-radius: 50%;
1033
+ background-color: white;
895
1034
  }
896
1035
 
897
- .ele-effect .effect-wrap {
898
- position: relative;
899
- width: 100%;
900
- height: 100%;
1036
+ .fs-txt {
1037
+ display: inline-block;
1038
+ width: calc(100% - 16px);
1039
+ padding-left: 8px;
1040
+ vertical-align: top;
1041
+ word-break: break-all;
1042
+ font-size: 14px;
1043
+ line-height: 1.2;
901
1044
  }
902
1045
 
903
- .particle {
904
- position: absolute;
905
- background-repeat: no-repeat;
906
- background-size: contain;
907
- animation-name: falling;
908
- animation-timing-function: linear;
909
- animation-iteration-count: infinite;
910
- will-change: transform;
1046
+ .has-error .fs-tit {
1047
+ border-bottom-color: #ff4d4f;
911
1048
  }
912
-
913
- @keyframes falling {
914
- 0% {
915
- transform: translateY(0) rotate(0deg);
916
- opacity: 1;
917
- }
918
- 80% {
919
- opacity: 0.8;
920
- }
921
- 100% {
922
- transform: translateY(100vh) rotate(360deg);
923
- opacity: 0;
924
- }
1049
+ body, html {
1050
+ width: 100%;
1051
+ height: 100%;
925
1052
  }
926
- .ele-lottie .ele-lotwrap {
927
- overflow: hidden
1053
+ * {
1054
+ padding: 0;
1055
+ margin: 0;
1056
+ box-sizing: border-box;
1057
+ white-space: normal;
1058
+ word-break: break-all;
1059
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
928
1060
  }
929
1061
 
930
- .ele-effect .effect-wrap {
931
- position: relative;
932
- overflow: hidden;
933
- width: 100%;
934
- height: 100%
1062
+ @font-face {
1063
+ font-family: iconfont;
1064
+ src: url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.f1262e4.woff2) format("woff2"),
1065
+ url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.788d827.woff) format("woff"),
1066
+ url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.9541e59.ttf) format("truetype")
935
1067
  }
936
1068
 
937
- .ele-effect .e-small {
938
- position: absolute;
939
- width: 24px;
940
- height: 24px;
941
- background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
942
- background-size: cover;
943
- background-repeat: no-repeat;
944
- -webkit-transform-origin: center;
945
- transform-origin: center;
946
- -webkit-animation: snow 5s linear infinite;
947
- animation: snow 5s linear infinite
948
- }
949
- .ele-lottie .ele-lotwrap {
950
- overflow: hidden;
951
- }.call {
952
- position: absolute;
953
- cursor: pointer;
954
- user-select: none;
1069
+ .iconfont {
1070
+ font-family: "iconfont" !important;
1071
+ font-size: 16px;
1072
+ font-style: normal;
1073
+ -webkit-font-smoothing: antialiased;
1074
+ -moz-osx-font-smoothing: grayscale;
955
1075
  }
956
1076
 
957
- .call .ani-wrap {
958
- display: flex;
959
- justify-content: center;
960
- align-items: center;
961
- width: 100%;
962
- height: 100%;
963
- overflow: hidden;
964
- transition: opacity 0.2s;
1077
+
1078
+ ::-webkit-scrollbar {
1079
+ -webkit-appearance: none;
1080
+ width: 2px;
1081
+ height:2px;
1082
+ display:none;
965
1083
  }
966
1084
 
967
- .call .ani-wrap:hover {
968
- opacity: 0.9;
1085
+ ::-webkit-scrollbar-button {
1086
+ display: none
969
1087
  }
970
1088
 
971
- .call-content {
972
- display: flex;
973
- align-items: center;
974
- justify-content: center;
1089
+ ::-webkit-scrollbar-corner,::-webkit-scrollbar-track {
1090
+ background-color: transparent
975
1091
  }
976
1092
 
977
- .btn-text {
978
- margin-left: 10px;
1093
+ ::-webkit-scrollbar-thumb {
1094
+ border-radius: 2px;
1095
+ background-color: rgba(0,0,0,.5)
979
1096
  }
980
1097
 
981
- /* 这里可以添加实际的电话图标样式 */
982
- /* .iconfont.hb-tel {
983
- display: inline-block;
984
- width: 16px;
985
- height: 16px;
986
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>');
987
- background-repeat: no-repeat;
988
- background-position: center;
989
- background-size: contain;
990
- } */
991
1098
 
992
- .hb-tel:before {
993
- content: "\E642";
994
- }.ele-img {
995
- position: absolute;
996
- overflow: hidden;
997
- }
998
-
999
- .ele-img .ani-wrap {
1000
- width: 100%;
1001
- height: 100%;
1002
- }
1003
-
1004
- .ele-img .ele-image {
1005
- position: relative;
1006
- display: block;
1007
- }
1008
-
1009
- .ele-img .rotate-wrap {
1010
- position: absolute;
1011
- left: 0;
1012
- right: 0;
1013
- top: 0;
1014
- bottom: 0;
1015
- }
1016
-
1017
- .ele-img .ele-img-bg,
1018
- .ele-img .rotate-wrap .img-wrap {
1019
- width: 100%;
1020
- height: 100%;
1021
- overflow: hidden;
1022
- }
1023
-
1024
- .ele-img .ele-bg-wrap {
1025
- width: 100%;
1026
- height: 100%;
1027
- background-size: cover;
1028
- background-position: 50% 50%;
1029
- background-repeat: no-repeat;
1030
- background-clip: border-box;
1031
- }
1032
-
1033
- /* 动画关键帧 */
1034
- @keyframes zoomIn {
1035
- from {
1036
- opacity: 0;
1037
- transform: scale(0.5);
1038
- }
1039
- to {
1040
- opacity: 1;
1041
- transform: scale(1);
1042
- }
1043
- }.element-ditu .ani-wrap {
1099
+ #index {
1100
+ position: relative;
1044
1101
  width: 100%;
1045
1102
  height: 100%;
1046
- overflow: hidden
1047
- }
1048
-
1049
- .element-ditu .map {
1050
- width: 100%;
1051
- height: 100%
1103
+ overflow: hidden;
1052
1104
  }
1053
1105
 
1054
- .element-ditu .map .el-button {
1106
+ #page-list {
1107
+ position: relative;
1055
1108
  width: 100%;
1056
1109
  height: 100%;
1057
- display: -webkit-box;
1058
- display: -ms-flexbox;
1059
- display: flex;
1060
- -webkit-box-align: center;
1061
- -ms-flex-align: center;
1062
- align-items: center;
1063
- padding: 0;
1064
- -webkit-box-pack: center;
1065
- -ms-flex-pack: center;
1066
- justify-content: center;
1067
- background: inherit;
1068
- color: inherit;
1069
- border: none
1110
+ max-width: 800px;
1111
+ margin: 0 auto;
1112
+ z-index: 1
1070
1113
  }
1071
1114
 
1072
- .element-ditu .center-map {
1073
- width: 100%;
1074
- height: 100%;
1075
- background: #fff
1115
+ #page-list.hardware .eles {
1116
+ will-change: transform
1076
1117
  }
1077
1118
 
1078
- .element-ditu .mask-map {
1119
+ #page-list .bg-wrap {
1079
1120
  position: absolute;
1080
- width: 100%;
1081
- height: 100%;
1082
- top: 0
1121
+ left: 0;
1122
+ top: 0;
1123
+ right: 0;
1124
+ bottom: 0;
1125
+ z-index: -1
1083
1126
  }
1084
- .map-iframe {
1085
- width: 100%;
1086
- height: 100%;
1087
- }#audio {
1088
- position: absolute;
1089
- right: 10px;
1090
- top: 10px;
1091
- z-index: 103;
1092
- width: 30px;
1093
- height: 30px;
1094
- display: flex;
1095
- align-items: center;
1127
+
1128
+ #page-list .ani-pause .ani-wrap {
1129
+ animation-play-state: paused!important;
1130
+ -webkit-animation-play-state: paused!important
1096
1131
  }
1097
1132
 
1098
- #audio .mrotate {
1099
- animation: mrotate 5s linear infinite;
1133
+ #page-list .audio-wrap {
1134
+ z-index: 10
1100
1135
  }
1101
1136
 
1102
- @keyframes mrotate {
1103
- to {
1104
- transform: rotate(1turn);
1105
- }
1137
+ #page-list .audio-wrap,#page-list .page-item {
1138
+ position: absolute;
1139
+ left: 0;
1140
+ top: 0;
1141
+ right: 0;
1142
+ bottom: 0
1106
1143
  }
1107
1144
 
1108
- #audio .audio {
1145
+ #page-list .page-item {
1146
+ z-index: 0;
1147
+ overflow: hidden;
1148
+ display: none;
1149
+ visibility: hidden;
1150
+ transform-style: preserve-3d;
1151
+ -webkit-backface-visibility: hidden;
1152
+ backface-visibility: hidden;
1153
+ transition-timing-function: cubic-bezier(.1,.57,.1,1)
1154
+ }
1155
+
1156
+ #page-list .page-item .count-down {
1157
+ display: none
1158
+ }
1159
+
1160
+ #page-list .page-item .has-ani {
1161
+ display: none!important
1162
+ }
1163
+
1164
+ #page-list .page-item .ele-effect,#page-list .page-item .page-bg {
1165
+ display: none
1166
+ }
1167
+
1168
+ #page-list .page-item .limit-ani .ani-wrap,#page-list .page-item .limit-ani .eles {
1169
+ animation: none!important
1170
+ }
1171
+
1172
+ #page-list .page-item .ani-pause .ani-wrap {
1173
+ animation-play-state: paused!important;
1174
+ -webkit-animation-play-state: paused!important
1175
+ }
1176
+
1177
+ #page-list .page-item .showAniEle .has-ani {
1178
+ display: block!important
1179
+ }
1180
+
1181
+ #page-list .page-item .showAniEle .page-bg {
1182
+ display: block
1183
+ }
1184
+
1185
+ #page-list .page-item .scroll-wrap {
1186
+ position: relative;
1187
+ width: 100%;
1188
+ overflow: hidden
1189
+ }
1190
+
1191
+ #page-list .page-item .amap-maps {
1192
+ display: none
1193
+ }
1194
+
1195
+ #page-list .page-item.current {
1196
+ z-index: 1;
1197
+ display: block;
1198
+ visibility: visible
1199
+ }
1200
+
1201
+ #page-list .page-item.current .amap-maps,#page-list .page-item.current .count-down,#page-list .page-item.current .page-wrap .ele-effect {
1202
+ display: block
1203
+ }
1204
+
1205
+ #page-list .page-item.current .page-wrap .eles {
1206
+ text-align: left
1207
+ }
1208
+
1209
+ #page-list .page-item.current .page-wrap .page-bg {
1210
+ display: block
1211
+ }
1212
+
1213
+ #page-list .page-item.current .page-wrap .has-ani {
1214
+ display: block!important
1215
+ }
1216
+
1217
+ #page-list .page-item.visibility {
1218
+ display: block;
1219
+ visibility: hidden
1220
+ }
1221
+
1222
+ #page-list .page-item.active {
1223
+ z-index: 2;
1224
+ visibility: visible
1225
+ }
1226
+
1227
+ #page-list .page-item.active .amap-maps,#page-list .page-item.active .count-down {
1228
+ display: block
1229
+ }
1230
+
1231
+ #page-list .page-item .page-wrap {
1232
+ position: relative;
1233
+ width: 100%;
1234
+ height: 100%;
1235
+ overflow: hidden;
1236
+ z-index: 1
1237
+ }
1238
+
1239
+ #page-list .page-item .page-wrap .ele-wrap,#page-list .page-item .page-wrap .page-bg {
1240
+ position: absolute;
1241
+ right: 0;
1242
+ left: 0;
1243
+ top: 0;
1244
+ bottom: 0;
1245
+ width: 100%;
1246
+ height: 100%;
1247
+ overflow: hidden
1248
+ }
1249
+
1250
+ #page-list .page-item .page-wrap .page-bg {
1251
+ background-size: cover;
1252
+ background-repeat: no-repeat;
1253
+ background-position: 50% 50%;
1254
+ z-index: 0
1255
+ }
1256
+
1257
+ #page-list .page-item .page-wrap .ele-wrap {
1258
+ z-index: 1
1259
+ }
1260
+
1261
+ #page-list .page-item .page-wrap .eles {
1262
+ position: absolute
1263
+ }
1264
+
1265
+ #page-list .tip-cover {
1266
+ position: fixed;
1267
+ left: 0;
1268
+ top: 0;
1109
1269
  width: 100%;
1110
1270
  height: 100%;
1271
+ display: -ms-flexbox;
1111
1272
  display: flex;
1273
+ -ms-flex-align: center;
1112
1274
  align-items: center;
1275
+ -ms-flex-pack: center;
1113
1276
  justify-content: center;
1114
- color: #fff;
1115
- background: #666;
1116
- border-radius: 50%;
1117
- overflow: hidden;
1118
- cursor: pointer;
1119
- transition: all 0.3s ease;
1277
+ z-index: 999;
1278
+ background-color: rgba(0,0,0,.7)
1120
1279
  }
1121
1280
 
1122
- #audio .audio.a-border {
1123
- border: 1px solid #fff;
1281
+ #page-list .tip-cover .tip {
1282
+ width: 80%;
1283
+ max-width: 250px;
1284
+ padding: 10px;
1285
+ border-radius: 5px;
1286
+ background-color: #fff
1124
1287
  }
1125
1288
 
1126
- #audio .audio .music-icon {
1289
+ #page-list .tip-cover .tip-btn {
1127
1290
  display: block;
1128
- width: 60%;
1129
- height: 60%;
1130
- object-fit: contain;
1291
+ margin: 25px auto;
1292
+ width: 120px;
1293
+ height: 30px;
1294
+ color: #fff;
1295
+ border-radius: 4px;
1296
+ text-align: center;
1297
+ font-size: 14px;
1298
+ line-height: 30px;
1299
+ background: #ed5566
1131
1300
  }
1132
1301
 
1133
- #audio .audio .iconfont {
1134
- font-size: 2opx;
1135
- line-height: 1;
1302
+ #page-list .tip-cover .tip-content {
1303
+ font-size: 14px;
1304
+ padding-top: 30px;
1136
1305
  }
1137
- #audio .icon-cancel {
1138
- position: absolute;
1139
- width: 100%;
1140
- height: 100%;
1141
- border-radius: 50%;
1142
- overflow: hidden;
1143
- padding: 15px 0;
1306
+
1307
+ .tip-cover {
1308
+ position: fixed;
1309
+ left: 0;
1310
+ top: 0;
1311
+ width: 100%;
1312
+ height: 100%;
1313
+ display: -ms-flexbox;
1314
+ display: flex;
1315
+ -ms-flex-align: center;
1316
+ align-items: center;
1317
+ -ms-flex-pack: center;
1318
+ justify-content: center;
1319
+ z-index: 999;
1320
+ background-color: rgba(0,0,0,.7)
1144
1321
  }
1145
- #audio .icon-cancel .icon-h {
1146
- transform: rotate(45deg);
1147
- width: 100%;
1148
- height: 2px;
1149
- background: #fff;
1150
- }
1151
- #audio .icon-cancel .icon-h:before, #audio .icon-cancel .icon-h:after {
1152
- content: '';
1153
- position: absolute;
1154
- width: 100%;
1155
- height: 2px;
1156
- background: #fff;
1157
- }.form-input {
1322
+
1323
+ .tip-cover .tip {
1324
+ width: 80%;
1325
+ max-width: 250px;
1326
+ padding: 5px;
1327
+ border-radius: 3px;
1328
+ background-color: #fff
1329
+ }
1330
+
1331
+ .tip-cover .tip-btn {
1332
+ display: block;
1333
+ margin: 13px auto;
1334
+ width: 64px;
1335
+ height: 20px;
1336
+ color: #fff;
1337
+ border-radius: 4px;
1338
+ text-align: center;
1339
+ font-size: 14px;
1340
+ line-height: 20px;
1341
+ background: #ed5566;
1342
+ }
1343
+ .form-input {
1158
1344
  position: absolute;
1159
1345
  }
1160
1346
 
@@ -1204,181 +1390,9 @@
1204
1390
  }
1205
1391
  .dynamic-placeholder-input:-ms-input-placeholder {
1206
1392
  color: var(--placeholder-color, #999);
1207
- }
1208
- body, html {
1209
- width: 100%;
1210
- height: 100%;
1211
- }
1212
- * {
1213
- padding: 0;
1214
- margin: 0;
1215
- box-sizing: border-box;
1216
- white-space: normal;
1217
- word-break: break-all;
1218
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1219
- }
1220
-
1221
- @font-face {
1222
- font-family: iconfont;
1223
- src: url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.f1262e4.woff2) format("woff2"),
1224
- url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.788d827.woff) format("woff"),
1225
- url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.9541e59.ttf) format("truetype")
1226
- }
1227
-
1228
- .iconfont {
1229
- font-family: "iconfont" !important;
1230
- font-size: 16px;
1231
- font-style: normal;
1232
- -webkit-font-smoothing: antialiased;
1233
- -moz-osx-font-smoothing: grayscale;
1234
- }
1235
-
1236
-
1237
- ::-webkit-scrollbar {
1238
- -webkit-appearance: none;
1239
- width: .05333rem;
1240
- /* height:.05333rem; */
1241
- /* display:none; */
1242
- }
1243
-
1244
- ::-webkit-scrollbar-button {
1245
- display: none
1246
- }
1247
-
1248
- ::-webkit-scrollbar-corner,::-webkit-scrollbar-track {
1249
- background-color: transparent
1250
- }
1251
-
1252
- ::-webkit-scrollbar-thumb {
1253
- border-radius: .05333rem;
1254
- background-color: rgba(0,0,0,.5)
1255
- }
1256
-
1257
- .button {
1258
- position: absolute;
1259
- cursor: pointer;
1260
- user-select: none;
1261
- }
1262
-
1263
- .button .ani-wrap {
1264
- display: flex;
1265
- justify-content: center;
1266
- align-items: center;
1267
- width: 100%;
1268
- height: 100%;
1269
- overflow: hidden;
1270
- transition: opacity 0.2s;
1271
- }
1272
-
1273
- .button .ani-wrap:hover {
1274
- opacity: 0.9;
1275
- }
1276
-
1277
- .button-content {
1278
- display: flex;
1279
- align-items: center;
1280
- justify-content: center;
1281
- }
1282
-
1283
- .btn-text {
1284
- margin-left: 10px;
1285
- }.ele-form {
1286
- position: absolute;
1287
- user-select: none;
1288
- }
1289
-
1290
- .f-single {
1291
- cursor: pointer;
1292
- }
1293
-
1294
- .ani-wrap {
1295
- position: relative;
1296
- }
1297
-
1298
- .f-single .ani-wrap .fs-tit {
1299
- display: flex;
1300
- padding: 0 5px;
1301
- height: 40px;
1302
- align-items: center;
1303
- white-space: nowrap;
1304
- overflow: hidden;
1305
- text-overflow: ellipsis;
1306
- border-bottom: 1px solid rgba(153, 153, 153, 1);
1307
- }
1308
-
1309
- .require {
1310
- padding: 0 5px 0 0;
1311
- color: red;
1312
- vertical-align: middle;
1313
- }
1314
-
1315
- .f-single ul {
1316
- padding: 15px;
1317
- margin: 0;
1318
- list-style: none;
1319
- }
1320
-
1321
- .f-single ul li {
1322
- display: flex;
1323
- align-items: center;
1324
- margin-top: 12px;
1325
- font-size: 0;
1326
- }
1327
-
1328
- .f-single ul li:first-child {
1329
- margin-top: 0;
1330
- }
1331
-
1332
- .fs-circle {
1333
- display: inline-block;
1334
- width: 16px;
1335
- height: 16px;
1336
- border-radius: 50%;
1337
- position: relative;
1338
- transition: all 0.2s;
1339
- }
1340
-
1341
- .fs-circle.selected {
1342
- background-color: #2687f1;
1343
- border-color: #2687f1 !important;
1344
- }
1345
-
1346
- .fs-circle.selected::after {
1347
- content: "";
1348
- position: absolute;
1349
- top: 3px;
1350
- left: 3px;
1351
- width: 8px;
1352
- height: 8px;
1353
- border-radius: 50%;
1354
- background-color: white;
1355
- }
1356
-
1357
- .fs-txt {
1358
- display: inline-block;
1359
- width: calc(100% - 16px);
1360
- padding-left: 8px;
1361
- vertical-align: top;
1362
- word-break: break-all;
1363
- font-size: 14px;
1364
- line-height: 1.2;
1365
- }
1366
-
1367
- .has-error .fs-tit {
1368
- border-bottom-color: #ff4d4f;
1369
- }
1370
-
1371
- /* 错误提示样式 */
1372
- .error-tip {
1373
- position: fixed;
1374
- left: 0;
1375
- top: 0;
1376
- width: 100%;
1377
- height: 100%;
1378
- z-index: 1000;
1379
- }/* Iconfont definition */
1380
- .icon-danmuliebiao1:before {
1381
- content: "\E68A";
1393
+ }/* Iconfont definition */
1394
+ .icon-danmuliebiao1:before {
1395
+ content: "\E68A";
1382
1396
  }
1383
1397
 
1384
1398
  .icon-cuowu2:before {
@@ -2246,137 +2260,1516 @@ font-style: normal;
2246
2260
  height: 100%;
2247
2261
  object-fit: contain;
2248
2262
  opacity: 0;
2249
- transition: opacity 0.5s ease-in-out;
2250
- }
2251
-
2252
- .gift-image-container img.loaded {
2263
+ transition: opacity 0.5s ease-in-out;
2264
+ }
2265
+
2266
+ .gift-image-container img.loaded {
2267
+ opacity: 1;
2268
+ }
2269
+
2270
+ .image-loading {
2271
+ position: absolute;
2272
+ top: 0;
2273
+ left: 0;
2274
+ width: 100%;
2275
+ height: 100%;
2276
+ display: flex;
2277
+ justify-content: center;
2278
+ align-items: center;
2279
+ background: rgba(255, 255, 255, 0.8);
2280
+ }
2281
+
2282
+ .loading-spinner {
2283
+ width: 40px;
2284
+ height: 40px;
2285
+ border: 4px solid #f3f3f3;
2286
+ border-top: 4px solid #ed5566;
2287
+ border-radius: 50%;
2288
+ animation: spin 1s linear infinite;
2289
+ }
2290
+
2291
+ @keyframes spin {
2292
+ 0% { transform: rotate(0deg); }
2293
+ 100% { transform: rotate(360deg); }
2294
+ }
2295
+
2296
+ /* body.interaction-locked {
2297
+ overflow: hidden !important;
2298
+ position: relative !important;
2299
+ height: 100% !important;
2300
+ }
2301
+ body, html {
2302
+ width: 100%;
2303
+ height: 100%;
2304
+ }
2305
+ * {
2306
+ padding: 0;
2307
+ margin: 0;
2308
+ box-sizing: border-box;
2309
+ white-space: normal;
2310
+ word-break: break-all;
2311
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
2312
+ }
2313
+
2314
+ @font-face {
2315
+ font-family: iconfont;
2316
+ src: url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.f1262e4.woff2) format("woff2"),
2317
+ url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.788d827.woff) format("woff"),
2318
+ url(https://h5cdn.unika.cc/static/font/iconfont/iconfont.9541e59.ttf) format("truetype")
2319
+ }
2320
+
2321
+ .iconfont {
2322
+ font-family: "iconfont" !important;
2323
+ font-size: 16px;
2324
+ font-style: normal;
2325
+ -webkit-font-smoothing: antialiased;
2326
+ -moz-osx-font-smoothing: grayscale;
2327
+ }
2328
+
2329
+ #index {
2330
+ position: relative;
2331
+ width: 100%;
2332
+ height: 100%;
2333
+ overflow: hidden;
2334
+ }
2335
+
2336
+ #page-list {
2337
+ position: relative;
2338
+ width: 100%;
2339
+ height: 100%;
2340
+ max-width: 800px;
2341
+ margin: 0 auto;
2342
+ z-index: 1
2343
+ }
2344
+
2345
+ #page-list.hardware .eles {
2346
+ will-change: transform
2347
+ }
2348
+
2349
+ #page-list .bg-wrap {
2350
+ position: absolute;
2351
+ left: 0;
2352
+ top: 0;
2353
+ right: 0;
2354
+ bottom: 0;
2355
+ z-index: -1
2356
+ }
2357
+
2358
+ #page-list .ani-pause .ani-wrap {
2359
+ animation-play-state: paused!important;
2360
+ -webkit-animation-play-state: paused!important
2361
+ }
2362
+
2363
+ #page-list .audio-wrap {
2364
+ z-index: 10
2365
+ }
2366
+
2367
+ #page-list .audio-wrap,#page-list .page-item {
2368
+ position: absolute;
2369
+ left: 0;
2370
+ top: 0;
2371
+ right: 0;
2372
+ bottom: 0
2373
+ }
2374
+
2375
+ #page-list .page-item {
2376
+ z-index: 0;
2377
+ overflow: hidden;
2378
+ display: none;
2379
+ visibility: hidden;
2380
+ transform-style: preserve-3d;
2381
+ -webkit-backface-visibility: hidden;
2382
+ backface-visibility: hidden;
2383
+ transition-timing-function: cubic-bezier(.1,.57,.1,1)
2384
+ }
2385
+
2386
+ #page-list .page-item .count-down {
2387
+ display: none
2388
+ }
2389
+
2390
+ #page-list .page-item .has-ani {
2391
+ display: none!important
2392
+ }
2393
+
2394
+ #page-list .page-item .ele-effect,#page-list .page-item .page-bg {
2395
+ display: none
2396
+ }
2397
+
2398
+ #page-list .page-item .limit-ani .ani-wrap {
2399
+ animation: none!important
2400
+ }
2401
+
2402
+ #page-list .page-item .ani-pause .ani-wrap {
2403
+ animation-play-state: paused!important;
2404
+ -webkit-animation-play-state: paused!important
2405
+ }
2406
+
2407
+ #page-list .page-item .showAniEle .has-ani {
2408
+ display: block!important
2409
+ }
2410
+
2411
+ #page-list .page-item .showAniEle .page-bg {
2412
+ display: block
2413
+ }
2414
+
2415
+ #page-list .page-item .scroll-wrap {
2416
+ position: relative;
2417
+ width: 100%;
2418
+ overflow: hidden;
2419
+ }
2420
+
2421
+ #page-list .page-item .scroll-wrap.scroll-long .bg-wrap {
2422
+ position: absolute;
2423
+ top: 0;
2424
+ left: 0;
2425
+ right: 0;
2426
+ bottom: 0;
2427
+ z-index: -1;
2428
+ }
2429
+
2430
+ #page-list .page-item .amap-maps {
2431
+ display: none
2432
+ }
2433
+
2434
+ #page-list .page-item.current {
2435
+ z-index: 1;
2436
+ display: block;
2437
+ visibility: visible
2438
+ }
2439
+
2440
+ #page-list .page-item.current .amap-maps,#page-list .page-item.current .count-down,#page-list .page-item.current .page-wrap .ele-effect {
2441
+ display: block
2442
+ }
2443
+
2444
+ #page-list .page-item.current .page-wrap .eles {
2445
+ text-align: left
2446
+ }
2447
+
2448
+ #page-list .page-item.current .page-wrap .page-bg {
2449
+ display: block
2450
+ }
2451
+
2452
+ #page-list .page-item.current .page-wrap .has-ani {
2453
+ display: block!important
2454
+ }
2455
+
2456
+ #page-list .page-item.visibility {
2457
+ display: block;
2458
+ visibility: hidden
2459
+ }
2460
+
2461
+ #page-list .page-item.active {
2462
+ z-index: 2;
2463
+ visibility: visible
2464
+ }
2465
+
2466
+ #page-list .page-item.active .amap-maps,#page-list .page-item.active .count-down {
2467
+ display: block
2468
+ }
2469
+
2470
+ #page-list .page-item .page-wrap {
2471
+ position: relative;
2472
+ width: 100%;
2473
+ height: 100%;
2474
+ overflow: hidden;
2475
+ z-index: 1
2476
+ }
2477
+
2478
+ #page-list .page-item .page-wrap .ele-wrap,#page-list .page-item .page-wrap .page-bg {
2479
+ position: absolute;
2480
+ right: 0;
2481
+ left: 0;
2482
+ top: 0;
2483
+ bottom: 0;
2484
+ width: 100%;
2485
+ height: 100%;
2486
+ overflow: hidden
2487
+ }
2488
+
2489
+ #page-list .page-item .page-wrap .page-bg {
2490
+ background-size: cover;
2491
+ background-repeat: no-repeat;
2492
+ background-position: 50% 50%;
2493
+ z-index: 0
2494
+ }
2495
+
2496
+ #page-list .page-item .page-wrap .ele-wrap {
2497
+ z-index: 1
2498
+ }
2499
+
2500
+ #page-list .page-item .page-wrap .eles {
2501
+ position: absolute
2502
+ }
2503
+
2504
+
2505
+ :deep(.vue-transition-group) {
2506
+ display: block;
2507
+ position: relative;
2508
+ width: 100%;
2509
+ height: 100%;
2510
+ }
2511
+
2512
+ .pages-wrapper {
2513
+ position: relative;
2514
+ width: 100%;
2515
+ height: 100%;
2516
+ overflow: hidden;
2517
+ }
2518
+
2519
+ .page-container {
2520
+ position: absolute;
2521
+ width: 100%;
2522
+ height: 100%;
2523
+ background-size: cover;
2524
+ background-position: center;
2525
+ will-change: transform;
2526
+ }
2527
+
2528
+ .no-ani .ani-wrap,.no-ani .ele-text-long {
2529
+ animation: none!important
2530
+ }
2531
+
2532
+ .scroll-mode .page-container {
2533
+ position: relative;
2534
+ min-height: 100vh;
2535
+ }
2536
+
2537
+ .slide-enter-active, .slide-leave-active {
2538
+ -webkit-animation: slideToTop .6s ease-in both;
2539
+ animation: slideToTop .6s ease-in both
2540
+ }
2541
+ @-webkit-keyframes slideToTop {
2542
+ to {
2543
+ -webkit-transform: translateY(-100%);
2544
+ transform: translateY(-100%)
2545
+ }
2546
+ }
2547
+
2548
+ @keyframes slideToTop {
2549
+ to {
2550
+ -webkit-transform: translateY(-100%);
2551
+ transform: translateY(-100%)
2552
+ }
2553
+ }
2554
+ .slide-enter-from {
2555
+ transform: translateX(100%);
2556
+ }
2557
+ .slide-leave-to {
2558
+ transform: translateX(-100%);
2559
+ }
2560
+
2561
+ .rotateCube-enter-active, .rotateCube-leave-active {
2562
+ -webkit-transform-origin: 50% 100%;
2563
+ transform-origin: 50% 100%;
2564
+ -webkit-animation: rotateCubeTopOut .6s ease-in both;
2565
+ animation: rotateCubeTopOut .6s ease-in both
2566
+ }
2567
+ .rotateCube-enter-from {
2568
+ transform: translateX(100%);
2569
+ }
2570
+ .rotateCube-leave-to {
2571
+ transform: translateX(-100%);
2572
+ }
2573
+
2574
+ .wind-enter-active, .wind-leave-active {
2575
+ -webkit-animation: windOut .5s ease-in both;
2576
+ animation: windOut .5s ease-in both
2577
+ }
2578
+ .wind-enter-from {
2579
+ transform: translateX(100%);
2580
+ }
2581
+ .wind-leave-to {
2582
+ transform: translateX(-100%);
2583
+ }
2584
+
2585
+ .popup-enter-active, .popup-leave-active {
2586
+ -webkit-transform-origin: 50% 100%;
2587
+ transform-origin: 50% 100%;
2588
+ -webkit-animation: rotateCarouselTopOut .7s ease both;
2589
+ animation: rotateCarouselTopOut .7s ease both
2590
+ }
2591
+ .popup-enter-from {
2592
+ transform: translateX(100%);
2593
+ }
2594
+ .popup-leave-to {
2595
+ transform: translateX(-100%);
2596
+ }
2597
+
2598
+ .scaleUpDown-enter-active, .scaleUpDown-leave-active {
2599
+ -webkit-animation: scaleUp .7s ease both;
2600
+ animation: scaleUp .7s ease both
2601
+ }
2602
+ .scaleUpDown-enter-from {
2603
+ transform: translateX(100%);
2604
+ }
2605
+ .scaleUpDown-leave-to {
2606
+ transform: translateX(-100%);
2607
+ }
2608
+
2609
+ .flipUpDown-enter-active, .flipUpDown-leave-active {
2610
+ -webkit-animation: rotatePushTop .7s ease both;
2611
+ animation: rotatePushTop .7s ease both
2612
+ }
2613
+ .flipUpDown-enter-from {
2614
+ transform: translateX(100%);
2615
+ }
2616
+ .flipUpDown-leave-to {
2617
+ transform: translateX(-100%);
2618
+ }
2619
+
2620
+ .cover-enter-active, .cover-leave-active {
2621
+ -webkit-animation: coverInDown .5s ease both;
2622
+ animation: coverInDown .5s ease both
2623
+ }
2624
+ .cover-enter-from {
2625
+ transform: translateX(100%);
2626
+ }
2627
+ .cover-leave-to {
2628
+ transform: translateX(-100%);
2629
+ }
2630
+
2631
+ .inertia-enter-active, .inertia-leave-active {
2632
+ -webkit-animation: inertiaOut .6s ease both;
2633
+ animation: inertiaOut .6s ease both
2634
+ }
2635
+ @-webkit-keyframes inertiaOut {
2636
+ to {
2637
+ -webkit-transform: scale(.2);
2638
+ transform: scale(.2)
2639
+ }
2640
+ }
2641
+
2642
+ @keyframes inertiaOut {
2643
+ to {
2644
+ -webkit-transform: scale(.2);
2645
+ transform: scale(.2)
2646
+ }
2647
+ }
2648
+ .inertia-enter-from {
2649
+ transform: translateX(100%);
2650
+ }
2651
+ .inertia-leave-to {
2652
+ transform: translateX(-100%);
2653
+ }
2654
+
2655
+ .push-enter-active, .push-leave-active {
2656
+ -webkit-transform-origin: center top;
2657
+ transform-origin: center top;
2658
+ -webkit-animation: pushInTop .6s linear .2s both;
2659
+ animation: pushInTop .6s linear .2s both
2660
+ }
2661
+ @-webkit-keyframes pushInTop {
2662
+ 0% {
2663
+ -webkit-transform: perspective(700px) rotateX(-90deg);
2664
+ transform: perspective(700px) rotateX(-90deg)
2665
+ }
2666
+ }
2667
+
2668
+ @keyframes pushInTop {
2669
+ 0% {
2670
+ -webkit-transform: perspective(700px) rotateX(-90deg);
2671
+ transform: perspective(700px) rotateX(-90deg)
2672
+ }
2673
+ }
2674
+ .push-enter-from {
2675
+ transform: translateX(100%);
2676
+ }
2677
+ .push-leave-to {
2678
+ transform: translateX(-100%);
2679
+ }
2680
+
2681
+ .drop-enter-active, .drop-leave-active {
2682
+ -webkit-transform-origin: 0 0;
2683
+ transform-origin: 0 0;
2684
+ -webkit-animation: dropOut .6s linear both;
2685
+ animation: dropOut .6s linear both
2686
+ }
2687
+ @-webkit-keyframes dropOut {
2688
+ 20% {
2689
+ -webkit-transform: rotate(5deg);
2690
+ transform: rotate(5deg)
2691
+ }
2692
+
2693
+ to {
2694
+ opacity: .6;
2695
+ -webkit-transform: translate3d(0,100%,0);
2696
+ transform: translate3d(0,100%,0)
2697
+ }
2698
+ }
2699
+
2700
+ @keyframes dropOut {
2701
+ 20% {
2702
+ -webkit-transform: rotate(5deg);
2703
+ transform: rotate(5deg)
2704
+ }
2705
+
2706
+ to {
2707
+ opacity: .6;
2708
+ -webkit-transform: translate3d(0,100%,0);
2709
+ transform: translate3d(0,100%,0)
2710
+ }
2711
+ }
2712
+
2713
+ .drop-enter-from {
2714
+ transform: translateX(100%);
2715
+ }
2716
+ .drop-leave-to {
2717
+ transform: translateX(-100%);
2718
+ }
2719
+
2720
+ .fadeIn-enter-active, .fadeIn-leave-active {
2721
+ -webkit-animation: pfadeIn .6s linear both;
2722
+ animation: pfadeIn .6s linear both
2723
+ }
2724
+ @-webkit-keyframes pfadeIn {
2725
+ 0% {
2726
+ opacity: 0
2727
+ }
2728
+
2729
+ to {
2730
+ opacity: 1
2731
+ }
2732
+ }
2733
+
2734
+ @keyframes pfadeIn {
2735
+ 0% {
2736
+ opacity: 0
2737
+ }
2738
+
2739
+ to {
2740
+ opacity: 1
2741
+ }
2742
+ }
2743
+ .fadeIn-enter-from {
2744
+ transform: translateX(100%);
2745
+ }
2746
+ .fadeIn-leave-to {
2747
+ transform: translateX(-100%);
2748
+ }
2749
+
2750
+ .zoomIn-enter-active, .zoomIn-leave-active {
2751
+ -webkit-animation: pzoomIn .6s linear both;
2752
+ animation: pzoomIn .6s linear both
2753
+ }
2754
+ @-webkit-keyframes pzoomIn {
2755
+ 0% {
2756
+ -webkit-transform: scale3d(0,0,0);
2757
+ transform: scale3d(0,0,0)
2758
+ }
2759
+ }
2760
+
2761
+ @keyframes pzoomIn {
2762
+ 0% {
2763
+ -webkit-transform: scale3d(0,0,0);
2764
+ transform: scale3d(0,0,0)
2765
+ }
2766
+ }
2767
+ .slide-enter-from {
2768
+ transform: translateX(100%);
2769
+ }
2770
+ .slide-leave-to {
2771
+ transform: translateX(-100%);
2772
+ }
2773
+
2774
+ .btFadeIn-enter-active, .btFadeIn-leave-active {
2775
+ -webkit-animation: btFadeInTop .6s ease both;
2776
+ animation: btFadeInTop .6s ease both
2777
+ }
2778
+ @keyframes btFadeInTop {
2779
+ 0% {
2780
+ opacity: 0;
2781
+ -webkit-transform: translate3d(0,100%,0);
2782
+ transform: translate3d(0,100%,0)
2783
+ }
2784
+ }
2785
+
2786
+ .btFadeIn-enter-from {
2787
+ transform: translateX(100%);
2788
+ }
2789
+ .btFadeIn-leave-to {
2790
+ transform: translateX(-100%);
2791
+ }
2792
+
2793
+ .hideSoon-enter-active, .hideSoon-leave-active {
2794
+ visibility: hidden
2795
+ }
2796
+ .hideSoon-enter-from {
2797
+ transform: translateX(100%);
2798
+ }
2799
+ .hideSoon-leave-to {
2800
+ transform: translateX(-100%);
2801
+ }
2802
+
2803
+ .upSlide-enter-active, .upSlide-leave-active {
2804
+ transition: transform 0.3s, opacity 0.3s;
2805
+ }
2806
+ .upSlide-enter-from, .upSlide-leave-to {
2807
+ transform: translateY(-100%);
2808
+ opacity: 0;
2809
+ }
2810
+ .upSlide-enter-to, .upSlide-leave-from {
2811
+ transform: translateY(0);
2812
+ opacity: 1;
2813
+ }
2814
+
2815
+ .downSlide-enter-active, .downSlide-leave-active {
2816
+ transition: transform 0.3s, opacity 0.3s;
2817
+ }
2818
+ .downSlide-enter-from, .downSlide-leave-to {
2819
+ transform: translateY(100%);
2820
+ opacity: 0;
2821
+ }
2822
+ .downSlide-enter-to, .downSlide-leave-from {
2823
+ transform: translateY(0);
2824
+ opacity: 1;
2825
+ }
2826
+
2827
+ .leftSlide-enter-active, .leftSlide-leave-active {
2828
+ -webkit-animation: leftSlide .7s ease both;
2829
+ animation: leftSlide .7s ease both
2830
+ }
2831
+ @-webkit-keyframes leftSlide {
2832
+ 0% {
2833
+ -webkit-transform: translateX(-100%);
2834
+ transform: translateX(-100%)
2835
+ }
2836
+
2837
+ to {
2838
+ -webkit-transform: translateX(0);
2839
+ transform: translateX(0)
2840
+ }
2841
+ }
2842
+
2843
+ @keyframes leftSlide {
2844
+ 0% {
2845
+ -webkit-transform: translateX(-100%);
2846
+ transform: translateX(-100%)
2847
+ }
2848
+
2849
+ to {
2850
+ -webkit-transform: translateX(0);
2851
+ transform: translateX(0)
2852
+ }
2853
+ }
2854
+ .leftSlide-enter-from {
2855
+ transform: translateX(100%);
2856
+ }
2857
+ .leftSlide-leave-to {
2858
+ transform: translateX(-100%);
2859
+ }
2860
+
2861
+ .rightSlide-enter-active, .rightSlide-leave-active {
2862
+ -webkit-animation: rightSlide .7s ease both;
2863
+ animation: rightSlide .7s ease both
2864
+ }
2865
+ @-webkit-keyframes rightSlide {
2866
+ 0% {
2867
+ -webkit-transform: translateX(100%);
2868
+ transform: translateX(100%)
2869
+ }
2870
+
2871
+ to {
2872
+ -webkit-transform: translateX(0);
2873
+ transform: translateX(0)
2874
+ }
2875
+ }
2876
+
2877
+ @keyframes rightSlide {
2878
+ 0% {
2879
+ -webkit-transform: translateX(100%);
2880
+ transform: translateX(100%)
2881
+ }
2882
+
2883
+ to {
2884
+ -webkit-transform: translateX(0);
2885
+ transform: translateX(0)
2886
+ }
2887
+ }
2888
+
2889
+ .rightSlide-enter-from {
2890
+ transform: translateX(100%);
2891
+ }
2892
+ .rightSlide-leave-to {
2893
+ transform: translateX(-100%);
2894
+ }
2895
+ * {
2896
+ -webkit-box-sizing: border-box;
2897
+ box-sizing: border-box;
2898
+ white-space: normal;
2899
+ word-break: break-all
2900
+ }
2901
+
2902
+
2903
+
2904
+ @-webkit-keyframes slideToBottom {
2905
+ to {
2906
+ -webkit-transform: translateY(100%);
2907
+ transform: translateY(100%)
2908
+ }
2909
+ }
2910
+
2911
+ @keyframes slideToBottom {
2912
+ to {
2913
+ -webkit-transform: translateY(100%);
2914
+ transform: translateY(100%)
2915
+ }
2916
+ }
2917
+
2918
+ @-webkit-keyframes slideFromTop {
2919
+ 0% {
2920
+ -webkit-transform: translateY(-100%);
2921
+ transform: translateY(-100%)
2922
+ }
2923
+ }
2924
+
2925
+ @keyframes slideFromTop {
2926
+ 0% {
2927
+ -webkit-transform: translateY(-100%);
2928
+ transform: translateY(-100%)
2929
+ }
2930
+ }
2931
+
2932
+ @-webkit-keyframes slideFromBottom {
2933
+ 0% {
2934
+ -webkit-transform: translateY(100%);
2935
+ transform: translateY(100%)
2936
+ }
2937
+ }
2938
+
2939
+ @keyframes slideFromBottom {
2940
+ 0% {
2941
+ -webkit-transform: translateY(100%);
2942
+ transform: translateY(100%)
2943
+ }
2944
+ }
2945
+
2946
+ @-webkit-keyframes rotateCubeTopOut {
2947
+ 50% {
2948
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2949
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2950
+ -webkit-animation-timing-function: ease-out;
2951
+ animation-timing-function: ease-out
2952
+ }
2953
+
2954
+ to {
2955
+ opacity: .3;
2956
+ -webkit-transform: translateY(-100%) rotateX(90deg);
2957
+ transform: translateY(-100%) rotateX(90deg)
2958
+ }
2959
+ }
2960
+
2961
+ @keyframes rotateCubeTopOut {
2962
+ 50% {
2963
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2964
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2965
+ -webkit-animation-timing-function: ease-out;
2966
+ animation-timing-function: ease-out
2967
+ }
2968
+
2969
+ to {
2970
+ opacity: .3;
2971
+ -webkit-transform: translateY(-100%) rotateX(90deg);
2972
+ transform: translateY(-100%) rotateX(90deg)
2973
+ }
2974
+ }
2975
+
2976
+ @-webkit-keyframes rotateCubeTopIn {
2977
+ 0% {
2978
+ opacity: .3;
2979
+ -webkit-transform: translateY(100%) rotateX(-90deg);
2980
+ transform: translateY(100%) rotateX(-90deg)
2981
+ }
2982
+
2983
+ 50% {
2984
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2985
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2986
+ -webkit-animation-timing-function: ease-out;
2987
+ animation-timing-function: ease-out
2988
+ }
2989
+ }
2990
+
2991
+ @keyframes rotateCubeTopIn {
2992
+ 0% {
2993
+ opacity: .3;
2994
+ -webkit-transform: translateY(100%) rotateX(-90deg);
2995
+ transform: translateY(100%) rotateX(-90deg)
2996
+ }
2997
+
2998
+ 50% {
2999
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
3000
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
3001
+ -webkit-animation-timing-function: ease-out;
3002
+ animation-timing-function: ease-out
3003
+ }
3004
+ }
3005
+
3006
+ @-webkit-keyframes rotateCubeBottomOut {
3007
+ 50% {
3008
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
3009
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
3010
+ -webkit-animation-timing-function: ease-out;
3011
+ animation-timing-function: ease-out
3012
+ }
3013
+
3014
+ to {
3015
+ opacity: .3;
3016
+ -webkit-transform: translateY(100%) rotateX(-90deg);
3017
+ transform: translateY(100%) rotateX(-90deg)
3018
+ }
3019
+ }
3020
+
3021
+ @keyframes rotateCubeBottomOut {
3022
+ 50% {
3023
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
3024
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
3025
+ -webkit-animation-timing-function: ease-out;
3026
+ animation-timing-function: ease-out
3027
+ }
3028
+
3029
+ to {
3030
+ opacity: .3;
3031
+ -webkit-transform: translateY(100%) rotateX(-90deg);
3032
+ transform: translateY(100%) rotateX(-90deg)
3033
+ }
3034
+ }
3035
+
3036
+ @-webkit-keyframes rotateCubeBottomIn {
3037
+ 0% {
3038
+ opacity: .3;
3039
+ -webkit-transform: translateY(-100%) rotateX(90deg);
3040
+ transform: translateY(-100%) rotateX(90deg)
3041
+ }
3042
+
3043
+ 50% {
3044
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
3045
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
3046
+ -webkit-animation-timing-function: ease-out;
3047
+ animation-timing-function: ease-out
3048
+ }
3049
+ }
3050
+
3051
+ @keyframes rotateCubeBottomIn {
3052
+ 0% {
3053
+ opacity: .3;
3054
+ -webkit-transform: translateY(-100%) rotateX(90deg);
3055
+ transform: translateY(-100%) rotateX(90deg)
3056
+ }
3057
+
3058
+ 50% {
3059
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
3060
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
3061
+ -webkit-animation-timing-function: ease-out;
3062
+ animation-timing-function: ease-out
3063
+ }
3064
+ }
3065
+
3066
+ @-webkit-keyframes windOut {
3067
+ to {
3068
+ opacity: 0;
3069
+ -webkit-transform: translateZ(-3000px) rotate(1turn);
3070
+ transform: translateZ(-3000px) rotate(1turn)
3071
+ }
3072
+ }
3073
+
3074
+ @keyframes windOut {
3075
+ to {
3076
+ opacity: 0;
3077
+ -webkit-transform: translateZ(-3000px) rotate(1turn);
3078
+ transform: translateZ(-3000px) rotate(1turn)
3079
+ }
3080
+ }
3081
+
3082
+ @-webkit-keyframes windIn {
3083
+ 0% {
3084
+ opacity: 0;
3085
+ -webkit-transform: translateZ(-3000px) rotate(-1turn);
3086
+ transform: translateZ(-3000px) rotate(-1turn)
3087
+ }
3088
+ }
3089
+
3090
+ @keyframes windIn {
3091
+ 0% {
3092
+ opacity: 0;
3093
+ -webkit-transform: translateZ(-3000px) rotate(-1turn);
3094
+ transform: translateZ(-3000px) rotate(-1turn)
3095
+ }
3096
+ }
3097
+
3098
+ @-webkit-keyframes rotateCarouselTopOut {
3099
+ to {
3100
+ opacity: .3;
3101
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
3102
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
3103
+ }
3104
+ }
3105
+
3106
+ @keyframes rotateCarouselTopOut {
3107
+ to {
3108
+ opacity: .3;
3109
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
3110
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
3111
+ }
3112
+ }
3113
+
3114
+ @-webkit-keyframes rotateCarouselTopIn {
3115
+ 0% {
3116
+ opacity: .3;
3117
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
3118
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
3119
+ }
3120
+ }
3121
+
3122
+ @keyframes rotateCarouselTopIn {
3123
+ 0% {
3124
+ opacity: .3;
3125
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
3126
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
3127
+ }
3128
+ }
3129
+
3130
+ @-webkit-keyframes rotateCarouselBottomOut {
3131
+ to {
3132
+ opacity: .3;
3133
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
3134
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
3135
+ }
3136
+ }
3137
+
3138
+ @keyframes rotateCarouselBottomOut {
3139
+ to {
3140
+ opacity: .3;
3141
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
3142
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
3143
+ }
3144
+ }
3145
+
3146
+ @-webkit-keyframes rotateCarouselBottomIn {
3147
+ 0% {
3148
+ opacity: .3;
3149
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
3150
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
3151
+ }
3152
+ }
3153
+
3154
+ @keyframes rotateCarouselBottomIn {
3155
+ 0% {
3156
+ opacity: .3;
3157
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
3158
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
3159
+ }
3160
+ }
3161
+
3162
+ @-webkit-keyframes scaleDown {
3163
+ to {
3164
+ opacity: 0;
3165
+ -webkit-transform: scale(.8);
3166
+ transform: scale(.8)
3167
+ }
3168
+ }
3169
+
3170
+ @keyframes scaleDown {
3171
+ to {
3172
+ opacity: 0;
3173
+ -webkit-transform: scale(.8);
3174
+ transform: scale(.8)
3175
+ }
3176
+ }
3177
+
3178
+ @-webkit-keyframes scaleUp {
3179
+ 0% {
3180
+ opacity: 0;
3181
+ -webkit-transform: scale(.8);
3182
+ transform: scale(.8)
3183
+ }
3184
+ }
3185
+
3186
+ @keyframes scaleUp {
3187
+ 0% {
3188
+ opacity: 0;
3189
+ -webkit-transform: scale(.8);
3190
+ transform: scale(.8)
3191
+ }
3192
+ }
3193
+
3194
+ @-webkit-keyframes scaleUpDown {
3195
+ 0% {
3196
+ opacity: 0;
3197
+ -webkit-transform: scale(1.2);
3198
+ transform: scale(1.2)
3199
+ }
3200
+ }
3201
+
3202
+ @keyframes scaleUpDown {
3203
+ 0% {
3204
+ opacity: 0;
3205
+ -webkit-transform: scale(1.2);
3206
+ transform: scale(1.2)
3207
+ }
3208
+ }
3209
+
3210
+ @-webkit-keyframes scaleDownUp {
3211
+ to {
3212
+ opacity: 0;
3213
+ -webkit-transform: scale(1.2);
3214
+ transform: scale(1.2)
3215
+ }
3216
+ }
3217
+
3218
+ @keyframes scaleDownUp {
3219
+ to {
3220
+ opacity: 0;
3221
+ -webkit-transform: scale(1.2);
3222
+ transform: scale(1.2)
3223
+ }
3224
+ }
3225
+
3226
+ @-webkit-keyframes scaleDownCenter {
3227
+ to {
3228
+ opacity: 0;
3229
+ -webkit-transform: scale(.7);
3230
+ transform: scale(.7)
3231
+ }
3232
+ }
3233
+
3234
+ @keyframes scaleDownCenter {
3235
+ to {
3236
+ opacity: 0;
3237
+ -webkit-transform: scale(.7);
3238
+ transform: scale(.7)
3239
+ }
3240
+ }
3241
+
3242
+ @-webkit-keyframes scaleUpCenter {
3243
+ 0% {
3244
+ opacity: 0;
3245
+ -webkit-transform: scale(.7);
3246
+ transform: scale(.7)
3247
+ }
3248
+ }
3249
+
3250
+ @keyframes scaleUpCenter {
3251
+ 0% {
3252
+ opacity: 0;
3253
+ -webkit-transform: scale(.7);
3254
+ transform: scale(.7)
3255
+ }
3256
+ }
3257
+
3258
+ @-webkit-keyframes rotatePushTop {
3259
+ to {
3260
+ opacity: 0;
3261
+ -webkit-transform: rotateX(-90deg);
3262
+ transform: rotateX(-90deg)
3263
+ }
3264
+ }
3265
+
3266
+ @keyframes rotatePushTop {
3267
+ to {
3268
+ opacity: 0;
3269
+ -webkit-transform: rotateX(-90deg);
3270
+ transform: rotateX(-90deg)
3271
+ }
3272
+ }
3273
+
3274
+ @-webkit-keyframes rotatePushBottom {
3275
+ to {
3276
+ opacity: 0;
3277
+ -webkit-transform: rotateX(90deg);
3278
+ transform: rotateX(90deg)
3279
+ }
3280
+ }
3281
+
3282
+ @keyframes rotatePushBottom {
3283
+ to {
3284
+ opacity: 0;
3285
+ -webkit-transform: rotateX(90deg);
3286
+ transform: rotateX(90deg)
3287
+ }
3288
+ }
3289
+
3290
+ @-webkit-keyframes rotatePullTop {
3291
+ 0% {
3292
+ opacity: 0;
3293
+ -webkit-transform: rotateX(-90deg);
3294
+ transform: rotateX(-90deg)
3295
+ }
3296
+ }
3297
+
3298
+ @keyframes rotatePullTop {
3299
+ 0% {
3300
+ opacity: 0;
3301
+ -webkit-transform: rotateX(-90deg);
3302
+ transform: rotateX(-90deg)
3303
+ }
3304
+ }
3305
+
3306
+ @-webkit-keyframes rotatePullBottom {
3307
+ 0% {
3308
+ opacity: 0;
3309
+ -webkit-transform: rotateX(90deg);
3310
+ transform: rotateX(90deg)
3311
+ }
3312
+ }
3313
+
3314
+ @keyframes rotatePullBottom {
3315
+ 0% {
3316
+ opacity: 0;
3317
+ -webkit-transform: rotateX(90deg);
3318
+ transform: rotateX(90deg)
3319
+ }
3320
+ }
3321
+
3322
+ @-webkit-keyframes coverInUp {
3323
+ 0% {
3324
+ -webkit-transform: translate3d(0,-100%,0);
3325
+ transform: translate3d(0,-100%,0)
3326
+ }
3327
+ }
3328
+
3329
+ @keyframes coverInUp {
3330
+ 0% {
3331
+ -webkit-transform: translate3d(0,-100%,0);
3332
+ transform: translate3d(0,-100%,0)
3333
+ }
3334
+ }
3335
+
3336
+ @-webkit-keyframes coverInDown {
3337
+ 0% {
3338
+ -webkit-transform: translate3d(0,100%,0);
3339
+ transform: translate3d(0,100%,0)
3340
+ }
3341
+ }
3342
+
3343
+ @keyframes coverInDown {
3344
+ 0% {
3345
+ -webkit-transform: translate3d(0,100%,0);
3346
+ transform: translate3d(0,100%,0)
3347
+ }
3348
+ }
3349
+
3350
+ .rotateInReverse {
3351
+ -webkit-animation-name: rotateInReverse;
3352
+ animation-name: rotateInReverse
3353
+ }
3354
+
3355
+ @-webkit-keyframes rotateInReverse {
3356
+ 0% {
3357
+ opacity: 0;
3358
+ -webkit-transform: rotate(200deg);
3359
+ transform: rotate(200deg);
3360
+ -webkit-transform-origin: center;
3361
+ transform-origin: center
3362
+ }
3363
+
3364
+ to {
3365
+ opacity: 1;
3366
+ -webkit-transform: none;
3367
+ transform: none;
3368
+ -webkit-transform-origin: center;
3369
+ transform-origin: center
3370
+ }
3371
+ }
3372
+
3373
+ @keyframes rotateInReverse {
3374
+ 0% {
3375
+ opacity: 0;
3376
+ -webkit-transform: rotate(200deg);
3377
+ transform: rotate(200deg);
3378
+ -webkit-transform-origin: center;
3379
+ transform-origin: center
3380
+ }
3381
+
3382
+ to {
3383
+ opacity: 1;
3384
+ -webkit-transform: none;
3385
+ transform: none;
3386
+ -webkit-transform-origin: center;
3387
+ transform-origin: center
3388
+ }
3389
+ }
3390
+
3391
+ .zoomInBig {
3392
+ -webkit-animation-name: zoomInBig;
3393
+ animation-name: zoomInBig;
3394
+ -webkit-animation-timing-function: cubic-bezier(0,.44,.75,.99);
3395
+ animation-timing-function: cubic-bezier(0,.44,.75,.99)
3396
+ }
3397
+
3398
+ @-webkit-keyframes zoomInBig {
3399
+ 0% {
3400
+ opacity: 0;
3401
+ -webkit-transform: scale3d(2,2,2);
3402
+ transform: scale3d(2,2,2)
3403
+ }
3404
+
3405
+ 50% {
3406
+ opacity: 1
3407
+ }
3408
+
3409
+ 80% {
3410
+ -webkit-transform: scaleX(1);
3411
+ transform: scaleX(1)
3412
+ }
3413
+ }
3414
+
3415
+ @keyframes zoomInBig {
3416
+ 0% {
3417
+ opacity: 0;
3418
+ -webkit-transform: scale3d(2,2,2);
3419
+ transform: scale3d(2,2,2)
3420
+ }
3421
+
3422
+ 50% {
3423
+ opacity: 1
3424
+ }
3425
+
3426
+ 80% {
3427
+ -webkit-transform: scaleX(1);
3428
+ transform: scaleX(1)
3429
+ }
3430
+ }
3431
+
3432
+ .flyIn {
3433
+ -webkit-animation-name: flyIn;
3434
+ animation-name: flyIn
3435
+ }
3436
+
3437
+ @-webkit-keyframes flyIn {
3438
+ 0%,20%,40%,60%,80%,to {
3439
+ -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
3440
+ transition-timing-function: cubic-bezier(.215,.61,.355,1)
3441
+ }
3442
+
3443
+ 0% {
3444
+ opacity: 0;
3445
+ -webkit-transform: scale3d(2,2,2);
3446
+ transform: scale3d(2,2,2)
3447
+ }
3448
+
3449
+ 40% {
3450
+ -webkit-transform: scale3d(.9,.9,.9);
3451
+ transform: scale3d(.9,.9,.9)
3452
+ }
3453
+
3454
+ 60% {
3455
+ -webkit-transform: scale3d(1.03,1.03,1.03);
3456
+ transform: scale3d(1.03,1.03,1.03)
3457
+ }
3458
+
3459
+ 80% {
3460
+ opacity: 1;
3461
+ -webkit-transform: scale3d(.97,.97,.97);
3462
+ transform: scale3d(.97,.97,.97)
3463
+ }
3464
+
3465
+ to {
3466
+ -webkit-transform: scaleX(1);
3467
+ transform: scaleX(1)
3468
+ }
3469
+ }
3470
+
3471
+ @keyframes flyIn {
3472
+ 0%,20%,40%,60%,80%,to {
3473
+ -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
3474
+ transition-timing-function: cubic-bezier(.215,.61,.355,1)
3475
+ }
3476
+
3477
+ 0% {
3478
+ opacity: 0;
3479
+ -webkit-transform: scale3d(2,2,2);
3480
+ transform: scale3d(2,2,2)
3481
+ }
3482
+
3483
+ 40% {
3484
+ -webkit-transform: scale3d(.9,.9,.9);
3485
+ transform: scale3d(.9,.9,.9)
3486
+ }
3487
+
3488
+ 60% {
3489
+ -webkit-transform: scale3d(1.03,1.03,1.03);
3490
+ transform: scale3d(1.03,1.03,1.03)
3491
+ }
3492
+
3493
+ 80% {
3494
+ opacity: 1;
3495
+ -webkit-transform: scale3d(.97,.97,.97);
3496
+ transform: scale3d(.97,.97,.97)
3497
+ }
3498
+
3499
+ to {
3500
+ -webkit-transform: scaleX(1);
3501
+ transform: scaleX(1)
3502
+ }
3503
+ }
3504
+
3505
+ .bounceSmall {
3506
+ -webkit-animation-name: bounceSmall;
3507
+ animation-name: bounceSmall;
3508
+ -webkit-animation-timing-function: ease-out;
3509
+ animation-timing-function: ease-out
3510
+ }
3511
+
3512
+ @-webkit-keyframes bounceSmall {
3513
+ 0% {
3514
+ opacity: 0;
3515
+ -webkit-transform: scale(1.7)
3516
+ }
3517
+
3518
+ 50% {
3519
+ opacity: 1;
3520
+ -webkit-transform: scale(.95)
3521
+ }
3522
+
3523
+ 80% {
3524
+ -webkit-transform: scale(1.05)
3525
+ }
3526
+
3527
+ 90% {
3528
+ -webkit-transform: scale(.98)
3529
+ }
3530
+
3531
+ to {
3532
+ -webkit-transform: scale(1)
3533
+ }
3534
+ }
3535
+
3536
+ @keyframes bounceSmall {
3537
+ 0% {
3538
+ opacity: 0;
3539
+ -webkit-transform: scale(1.7)
3540
+ }
3541
+
3542
+ 50% {
3543
+ opacity: 1;
3544
+ -webkit-transform: scale(.95)
3545
+ }
3546
+
3547
+ 80% {
3548
+ -webkit-transform: scale(1.05)
3549
+ }
3550
+
3551
+ 90% {
3552
+ -webkit-transform: scale(.98)
3553
+ }
3554
+
3555
+ to {
3556
+ -webkit-transform: scale(1)
3557
+ }
3558
+ }
3559
+
3560
+ .pullUp {
3561
+ -webkit-transform-origin: 50% 100%;
3562
+ transform-origin: 50% 100%;
3563
+ -webkit-animation-name: pullUp;
3564
+ animation-name: pullUp;
3565
+ -webkit-animation-timing-function: ease-out;
3566
+ animation-timing-function: ease-out
3567
+ }
3568
+
3569
+ @-webkit-keyframes pullUp {
3570
+ 0%,40%,60%,80%,99% {
3571
+ -webkit-animation-timing-function: ease-out;
3572
+ animation-timing-function: ease-out
3573
+ }
3574
+
3575
+ 0% {
3576
+ opacity: 0;
3577
+ -webkit-transform: scaleY(.1);
3578
+ transform: scaleY(.1);
3579
+ -webkit-transform-origin: 50% 100%;
3580
+ transform-origin: 50% 100%
3581
+ }
3582
+
3583
+ 40% {
2253
3584
  opacity: 1;
2254
- }
2255
-
2256
- .image-loading {
2257
- position: absolute;
2258
- top: 0;
2259
- left: 0;
2260
- width: 100%;
2261
- height: 100%;
2262
- display: flex;
2263
- justify-content: center;
2264
- align-items: center;
2265
- background: rgba(255, 255, 255, 0.8);
2266
- }
2267
-
2268
- .loading-spinner {
2269
- width: 40px;
2270
- height: 40px;
2271
- border: 4px solid #f3f3f3;
2272
- border-top: 4px solid #ed5566;
2273
- border-radius: 50%;
2274
- animation: spin 1s linear infinite;
2275
- }
2276
-
2277
- @keyframes spin {
2278
- 0% { transform: rotate(0deg); }
2279
- 100% { transform: rotate(360deg); }
2280
- }
2281
-
2282
- .ele-form {
2283
- position: absolute;
2284
- user-select: none;
3585
+ -webkit-transform: scaleY(1.02);
3586
+ transform: scaleY(1.02);
3587
+ -webkit-transform-origin: 50% 100%;
3588
+ transform-origin: 50% 100%
2285
3589
  }
2286
3590
 
2287
- .f-multiple {
2288
- cursor: pointer;
3591
+ 60% {
3592
+ -webkit-transform: scaleY(.98);
3593
+ transform: scaleY(.98);
3594
+ -webkit-transform-origin: 50% 100%;
3595
+ transform-origin: 50% 100%
2289
3596
  }
2290
3597
 
2291
- .ani-wrap {
2292
- position: relative;
3598
+ 80% {
3599
+ -webkit-transform: scaleY(1.01);
3600
+ transform: scaleY(1.01);
3601
+ -webkit-transform-origin: 50% 100%;
3602
+ transform-origin: 50% 100%
2293
3603
  }
2294
3604
 
2295
- .f-multiple .ani-wrap .fs-tit {
2296
- display: flex;
2297
- padding: 0 5px;
2298
- height: 40px;
2299
- align-items: center;
2300
- white-space: nowrap;
2301
- overflow: hidden;
2302
- text-overflow: ellipsis;
2303
- border-bottom: 1px solid rgba(153, 153, 153, 1);
3605
+ 99% {
3606
+ -webkit-transform: scaleY(1);
3607
+ transform: scaleY(1);
3608
+ -webkit-transform-origin: 50% 100%;
3609
+ transform-origin: 50% 100%
2304
3610
  }
2305
3611
 
2306
- .require {
2307
- padding: 0 5px 0 0;
2308
- color: red;
2309
- vertical-align: middle;
3612
+ to {
3613
+ -webkit-transform: none;
3614
+ transform: none
3615
+ }
2310
3616
  }
2311
3617
 
2312
- .f-multiple ul {
2313
- padding: 15px;
2314
- margin: 0;
2315
- list-style: none;
3618
+ @keyframes pullUp {
3619
+ 0%,40%,60%,80%,99% {
3620
+ -webkit-animation-timing-function: ease-out;
3621
+ animation-timing-function: ease-out
2316
3622
  }
2317
3623
 
2318
- .f-multiple ul li {
2319
- margin-top: 12px;
2320
- font-size: 0;
2321
- display: flex;
2322
- align-items: center;
2323
- cursor: pointer;
3624
+ 0% {
3625
+ opacity: 0;
3626
+ -webkit-transform: scaleY(.1);
3627
+ transform: scaleY(.1);
3628
+ -webkit-transform-origin: 50% 100%;
3629
+ transform-origin: 50% 100%
2324
3630
  }
2325
3631
 
2326
- .f-multiple ul li:first-child {
2327
- margin-top: 0;
3632
+ 40% {
3633
+ opacity: 1;
3634
+ -webkit-transform: scaleY(1.02);
3635
+ transform: scaleY(1.02);
3636
+ -webkit-transform-origin: 50% 100%;
3637
+ transform-origin: 50% 100%
2328
3638
  }
2329
3639
 
2330
- .fs-circle {
2331
- display: inline-block;
2332
- width: 16px;
2333
- height: 16px;
2334
- border-radius: 50%;
2335
- position: relative;
2336
- transition: all 0.2s;
3640
+ 60% {
3641
+ -webkit-transform: scaleY(.98);
3642
+ transform: scaleY(.98);
3643
+ -webkit-transform-origin: 50% 100%;
3644
+ transform-origin: 50% 100%
2337
3645
  }
2338
3646
 
2339
- .fs-circle.selected {
2340
- background-color: #2687f1;
2341
- border-color: #2687f1 !important;
3647
+ 80% {
3648
+ -webkit-transform: scaleY(1.01);
3649
+ transform: scaleY(1.01);
3650
+ -webkit-transform-origin: 50% 100%;
3651
+ transform-origin: 50% 100%
2342
3652
  }
2343
3653
 
2344
- .fs-circle.selected::after {
2345
- content: "";
2346
- position: absolute;
2347
- top: 3px;
2348
- left: 3px;
2349
- width: 8px;
2350
- height: 8px;
2351
- border-radius: 50%;
2352
- background-color: white;
3654
+ 99% {
3655
+ -webkit-transform: scaleY(1);
3656
+ transform: scaleY(1);
3657
+ -webkit-transform-origin: 50% 100%;
3658
+ transform-origin: 50% 100%
2353
3659
  }
2354
3660
 
2355
- .fs-txt {
2356
- display: inline-block;
2357
- width: calc(100% - 16px);
2358
- padding-left: 8px;
2359
- vertical-align: top;
2360
- word-break: break-all;
2361
- font-size: 14px;
2362
- line-height: 1.2;
3661
+ to {
3662
+ -webkit-transform: none;
3663
+ transform: none
3664
+ }
2363
3665
  }
2364
3666
 
2365
- .has-error .fs-tit {
2366
- border-bottom-color: #ff4d4f;
3667
+ .pullDown {
3668
+ -webkit-transform-origin: 50% 0;
3669
+ transform-origin: 50% 0;
3670
+ -webkit-animation-name: pullDown;
3671
+ animation-name: pullDown;
3672
+ -webkit-animation-timing-function: ease-out;
3673
+ animation-timing-function: ease-out
2367
3674
  }
2368
- .global.map {
2369
- width: 35px;
2370
- height: 55px;
2371
- border-radius: 50%;
2372
- text-align: center;
2373
- margin-bottom: 5px;
2374
- border: 2px solid #fff;
2375
- cursor: pointer;
3675
+
3676
+ @-webkit-keyframes pullDown {
3677
+ 0%,40%,60%,80%,99% {
3678
+ -webkit-animation-timing-function: ease-out;
3679
+ animation-timing-function: ease-out
2376
3680
  }
2377
- .icon-daohang1:before { content: "\E612"; }
2378
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
2379
- .global.map > span { font-size: 10px; line-height: 20px; display: block;}.ele-form {
3681
+
3682
+ 0% {
3683
+ opacity: 0;
3684
+ -webkit-transform: scaleY(.1);
3685
+ transform: scaleY(.1);
3686
+ -webkit-transform-origin: 50% 0;
3687
+ transform-origin: 50% 0
3688
+ }
3689
+
3690
+ 40% {
3691
+ opacity: 1;
3692
+ -webkit-transform: scaleY(1.02);
3693
+ transform: scaleY(1.02);
3694
+ -webkit-transform-origin: 50% 0;
3695
+ transform-origin: 50% 0
3696
+ }
3697
+
3698
+ 60% {
3699
+ -webkit-transform: scaleY(.98);
3700
+ transform: scaleY(.98);
3701
+ -webkit-transform-origin: 50% 0;
3702
+ transform-origin: 50% 0
3703
+ }
3704
+
3705
+ 80% {
3706
+ -webkit-transform: scaleY(1.01);
3707
+ transform: scaleY(1.01);
3708
+ -webkit-transform-origin: 50% 0;
3709
+ transform-origin: 50% 0
3710
+ }
3711
+
3712
+ 99% {
3713
+ -webkit-transform: scaleY(1);
3714
+ transform: scaleY(1);
3715
+ -webkit-transform-origin: 50% 0;
3716
+ transform-origin: 50% 0
3717
+ }
3718
+
3719
+ to {
3720
+ -webkit-transform: none;
3721
+ transform: none
3722
+ }
3723
+ }
3724
+
3725
+ @keyframes pullDown {
3726
+ 0%,40%,60%,80%,99% {
3727
+ -webkit-animation-timing-function: ease-out;
3728
+ animation-timing-function: ease-out
3729
+ }
3730
+
3731
+ 0% {
3732
+ opacity: 0;
3733
+ -webkit-transform: scaleY(.1);
3734
+ transform: scaleY(.1);
3735
+ -webkit-transform-origin: 50% 0;
3736
+ transform-origin: 50% 0
3737
+ }
3738
+
3739
+ 40% {
3740
+ opacity: 1;
3741
+ -webkit-transform: scaleY(1.02);
3742
+ transform: scaleY(1.02);
3743
+ -webkit-transform-origin: 50% 0;
3744
+ transform-origin: 50% 0
3745
+ }
3746
+
3747
+ 60% {
3748
+ -webkit-transform: scaleY(.98);
3749
+ transform: scaleY(.98);
3750
+ -webkit-transform-origin: 50% 0;
3751
+ transform-origin: 50% 0
3752
+ }
3753
+
3754
+ 80% {
3755
+ -webkit-transform: scaleY(1.01);
3756
+ transform: scaleY(1.01);
3757
+ -webkit-transform-origin: 50% 0;
3758
+ transform-origin: 50% 0
3759
+ }
3760
+
3761
+ 99% {
3762
+ -webkit-transform: scaleY(1);
3763
+ transform: scaleY(1);
3764
+ -webkit-transform-origin: 50% 0;
3765
+ transform-origin: 50% 0
3766
+ }
3767
+
3768
+ to {
3769
+ -webkit-transform: none;
3770
+ transform: none
3771
+ }
3772
+ } */.ele-form {
2380
3773
  position: absolute;
2381
3774
  user-select: none;
2382
3775
  }
@@ -2467,6 +3860,100 @@ font-style: normal;
2467
3860
  border-color: #ff4d4f !important;
2468
3861
  }
2469
3862
 
3863
+ .error-tip {
3864
+ position: fixed;
3865
+ left: 0;
3866
+ top: 0;
3867
+ width: 100%;
3868
+ height: 100%;
3869
+ z-index: 1000;
3870
+ }.ele-form {
3871
+ position: absolute;
3872
+ user-select: none;
3873
+ }
3874
+
3875
+ .f-single {
3876
+ cursor: pointer;
3877
+ }
3878
+
3879
+ .ani-wrap {
3880
+ position: relative;
3881
+ }
3882
+
3883
+ .f-single .ani-wrap .fs-tit {
3884
+ display: flex;
3885
+ padding: 0 5px;
3886
+ height: 40px;
3887
+ align-items: center;
3888
+ white-space: nowrap;
3889
+ overflow: hidden;
3890
+ text-overflow: ellipsis;
3891
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
3892
+ }
3893
+
3894
+ .require {
3895
+ padding: 0 5px 0 0;
3896
+ color: red;
3897
+ vertical-align: middle;
3898
+ }
3899
+
3900
+ .f-single ul {
3901
+ padding: 15px;
3902
+ margin: 0;
3903
+ list-style: none;
3904
+ }
3905
+
3906
+ .f-single ul li {
3907
+ display: flex;
3908
+ align-items: center;
3909
+ margin-top: 12px;
3910
+ font-size: 0;
3911
+ }
3912
+
3913
+ .f-single ul li:first-child {
3914
+ margin-top: 0;
3915
+ }
3916
+
3917
+ .fs-circle {
3918
+ display: inline-block;
3919
+ width: 16px;
3920
+ height: 16px;
3921
+ border-radius: 50%;
3922
+ position: relative;
3923
+ transition: all 0.2s;
3924
+ }
3925
+
3926
+ .fs-circle.selected {
3927
+ background-color: #2687f1;
3928
+ border-color: #2687f1 !important;
3929
+ }
3930
+
3931
+ .fs-circle.selected::after {
3932
+ content: "";
3933
+ position: absolute;
3934
+ top: 3px;
3935
+ left: 3px;
3936
+ width: 8px;
3937
+ height: 8px;
3938
+ border-radius: 50%;
3939
+ background-color: white;
3940
+ }
3941
+
3942
+ .fs-txt {
3943
+ display: inline-block;
3944
+ width: calc(100% - 16px);
3945
+ padding-left: 8px;
3946
+ vertical-align: top;
3947
+ word-break: break-all;
3948
+ font-size: 14px;
3949
+ line-height: 1.2;
3950
+ }
3951
+
3952
+ .has-error .fs-tit {
3953
+ border-bottom-color: #ff4d4f;
3954
+ }
3955
+
3956
+ /* 错误提示样式 */
2470
3957
  .error-tip {
2471
3958
  position: fixed;
2472
3959
  left: 0;
@@ -2883,7 +4370,19 @@ font-style: normal;
2883
4370
  color: #F44336; /* 失败的红色 */
2884
4371
  }
2885
4372
 
2886
- .global.receipt {
4373
+ .global.tel {
4374
+ width: 35px;
4375
+ height: 55px;
4376
+ border-radius: 50%;
4377
+ text-align: center;
4378
+ margin-bottom: 15px;
4379
+ border: 2px solid #fff;
4380
+ cursor: pointer;
4381
+ }
4382
+ .icon-dianhua:before { content: "\E60E"; }
4383
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
4384
+ .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
4385
+ .global.map {
2887
4386
  width: 35px;
2888
4387
  height: 55px;
2889
4388
  border-radius: 50%;
@@ -2892,18 +4391,18 @@ font-style: normal;
2892
4391
  border: 2px solid #fff;
2893
4392
  cursor: pointer;
2894
4393
  }
2895
- .icon-liuyan:before { content: "\E636"; }
4394
+ .icon-daohang1:before { content: "\E612"; }
2896
4395
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
2897
- .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }
2898
- .global.tel {
4396
+ .global.map > span { font-size: 10px; line-height: 20px; display: block;}
4397
+ .global.receipt {
2899
4398
  width: 35px;
2900
4399
  height: 55px;
2901
4400
  border-radius: 50%;
2902
4401
  text-align: center;
2903
- margin-bottom: 15px;
4402
+ margin-bottom: 5px;
2904
4403
  border: 2px solid #fff;
2905
4404
  cursor: pointer;
2906
4405
  }
2907
- .icon-dianhua:before { content: "\E60E"; }
4406
+ .icon-liuyan:before { content: "\E636"; }
2908
4407
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
2909
- .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
4408
+ .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }