unika-components 1.2.3 → 1.2.5

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.
Files changed (72) hide show
  1. package/dist/index.html +53 -0
  2. package/dist/js/app.js +3325 -0
  3. package/dist/js/chunk-vendors.js +1638 -0
  4. package/dist/src/components/UniButton/UniButton.vue.d.ts +1 -0
  5. package/dist/src/components/UniCalendar/UniCalendar.vue.d.ts +1 -0
  6. package/dist/src/components/UniCall/UniCall.vue.d.ts +12 -1
  7. package/dist/src/components/UniFormInput/UniFormInput.vue.d.ts +1 -0
  8. package/dist/src/components/UniFormMultiple/UniFormMultiple.vue.d.ts +1 -0
  9. package/dist/src/components/UniFormSelect/UniFormSelect.vue.d.ts +1 -0
  10. package/dist/src/components/UniFormSingle/UniFormSingle.vue.d.ts +1 -0
  11. package/dist/src/components/UniFormSubmit/UniFormSubmit.vue.d.ts +1 -0
  12. package/dist/src/components/UniInvite/UniInvite.vue.d.ts +57 -0
  13. package/dist/src/components/UniInvite/index.d.ts +2 -0
  14. package/dist/src/components/UniLottie/UniLottie.vue.d.ts +1 -0
  15. package/dist/src/components/UniMap/UniMap.vue.d.ts +12 -1
  16. package/dist/src/components/UniShape/UniShape.vue.d.ts +1 -0
  17. package/dist/src/components/UniVideo/UniVideo.vue.d.ts +1 -0
  18. package/dist/src/components/WorkRender/WorkRender.vue.d.ts +1 -0
  19. package/dist/src/composables/inviteManager.d.ts +13 -0
  20. package/dist/src/constants/invitePhrases.d.ts +3 -0
  21. package/dist/src/constants/inviteProps.d.ts +4 -0
  22. package/dist/src/constants/inviteTemplates.d.ts +5 -0
  23. package/dist/src/defaultProps.d.ts +49 -0
  24. package/dist/src/index.d.ts +10 -1
  25. package/dist/src/utils/inviteAnimation.d.ts +3 -0
  26. package/dist/src/utils/inviteTemplate.d.ts +4 -0
  27. package/dist/src/utils/resolveInviteRender.d.ts +11 -0
  28. package/dist/unika-components.css +1951 -1240
  29. package/dist/unika-components.esm.js +955 -529
  30. package/dist/unika-components.umd.js +993 -555
  31. package/package.json +1 -1
  32. package/dist/.DS_Store +0 -0
  33. package/dist/src/components/LongPage/LongPage.vue.d.ts +0 -20
  34. package/dist/src/components/LongPage/index.d.ts +0 -2
  35. package/dist/src/components/SwiperPage/SwiperAnimate.d.ts +0 -3
  36. package/dist/src/components/SwiperPage/SwiperPage.vue.d.ts +0 -36
  37. package/dist/src/components/SwiperPage/index.d.ts +0 -2
  38. package/dist/src/components/UniBackground/UniBackground.vue.d.ts +0 -11
  39. package/dist/src/components/UniBackground/index.d.ts +0 -2
  40. package/dist/src/components/UniBulidUp/UniBulidUp.vue.d.ts +0 -12
  41. package/dist/src/components/UniBulidUp/index.d.ts +0 -2
  42. package/dist/src/components/UniCalendar/Calendar.vue.d.ts +0 -165
  43. package/dist/src/components/UniEffect/sonw.d.ts +0 -2
  44. package/dist/src/components/UniFormMultiple/validators.d.ts +0 -20
  45. package/dist/src/components/UniFormSelect/validators.d.ts +0 -1
  46. package/dist/src/components/UniFormSingle/validators.d.ts +0 -20
  47. package/dist/src/components/UniLike/UniLike.vue.d.ts +0 -14
  48. package/dist/src/components/UniLike/index.d.ts +0 -2
  49. package/dist/src/components/UniLotties/UniLotties.vue.d.ts +0 -340
  50. package/dist/src/components/UniLotties/index.d.ts +0 -2
  51. package/dist/src/components/UniRegisterForm/UniRegisterForm.vue.d.ts +0 -28
  52. package/dist/src/components/UniRegisterForm/index.d.ts +0 -2
  53. package/dist/src/components/UniSvg/UniSvg.vue.d.ts +0 -12
  54. package/dist/src/components/UniSvg/index.d.ts +0 -2
  55. package/dist/src/components/UniSwiper/UniSwiper.vue.d.ts +0 -12
  56. package/dist/src/components/UniSwiper/index.d.ts +0 -2
  57. package/dist/src/components/UniTanmu/Barrage.vue.d.ts +0 -76
  58. package/dist/src/components/UniTanmu/UniTanmu.vue.d.ts +0 -59
  59. package/dist/src/components/UniTanmu/index.d.ts +0 -2
  60. package/dist/src/components/UniTest/index.d.ts +0 -2
  61. package/dist/src/components/UniTextBk/index.d.ts +0 -2
  62. package/dist/src/components/WorkRender/DynamicElement.vue.d.ts +0 -59
  63. package/dist/src/components/WorkRender/PageIndicator.vue.d.ts +0 -110
  64. package/dist/src/components/WorkRender/SwiperAnimate.d.ts +0 -3
  65. package/dist/src/components/WorkRender/WorkRenderer.vue.d.ts +0 -59
  66. package/dist/src/components/WorkRenderLong/test.vue.d.ts +0 -72
  67. package/dist/src/composables/useElementProps.d.ts +0 -8
  68. package/dist/src/composables/useElementStyle.d.ts +0 -18
  69. package/dist/src/constants/countdown.d.ts +0 -65
  70. package/dist/src/constants/toolbar.d.ts +0 -13
  71. package/dist/src/hooks/useComponentClick.d.ts +0 -2
  72. package/dist/src/hooks/useStylePick.d.ts +0 -3
@@ -1,22 +1,12 @@
1
-
2
- /* 添加百位数样式 */
3
- .c-hundred {
4
- display: flex;
5
- align-items: center;
6
- justify-content: center;
7
- width: 30px; /* 根据需要调整 */
8
- margin-right: 5px;
9
- }
10
-
11
- .global-v ::v-deep .global-v-show iframe {
12
- position: absolute;
13
- left: 0;
14
- top: 50%;
15
- transform: translateY(-60%);
16
- min-height: 45%;
17
- max-height: 100%;
18
- width: 100%;
19
- }
1
+
2
+ /* 添加百位数样式 */
3
+ .c-hundred {
4
+ display: flex;
5
+ align-items: center;
6
+ justify-content: center;
7
+ width: 30px; /* 根据需要调整 */
8
+ margin-right: 5px;
9
+ }
20
10
 
21
11
  .unika-watermark {
22
12
  position: fixed;
@@ -35,7 +25,63 @@
35
25
  background-size: 220px 140px;
36
26
  opacity: 0.5;
37
27
  }
38
- .ele-img {
28
+
29
+ .global-v ::v-deep .global-v-show iframe {
30
+ position: absolute;
31
+ left: 0;
32
+ top: 50%;
33
+ transform: translateY(-60%);
34
+ min-height: 45%;
35
+ max-height: 100%;
36
+ width: 100%;
37
+ }
38
+
39
+ .element-video {
40
+ position: absolute;
41
+ overflow: hidden;
42
+ background-color: transparent;
43
+ }
44
+
45
+ .element-video .ani-wrap, .element-video img {
46
+ display: block;
47
+ width: 100%;
48
+ height: 100%;
49
+ }
50
+
51
+ .video-container {
52
+ width: 100%;
53
+ height: 100%;
54
+ }
55
+
56
+ .video-container iframe {
57
+ width: 100%;
58
+ height: 100%;
59
+ border: none;
60
+ }
61
+
62
+ .video-cover {
63
+ position: relative;
64
+ width: 100%;
65
+ height: 100%;
66
+ background-size: cover;
67
+ background-position: center;
68
+ cursor: pointer;
69
+ }
70
+
71
+ .video-cover .play-btn {
72
+ position: absolute;
73
+ left: 50%;
74
+ top: 50%;
75
+ transform: translate(-50%, -50%);
76
+ width: 50px;
77
+ height: 50px;
78
+ opacity: 0.8;
79
+ transition: opacity 0.2s;
80
+ }
81
+
82
+ .video-cover:hover .play-btn {
83
+ opacity: 1;
84
+ }.ele-img {
39
85
  position: absolute;
40
86
  overflow: hidden;
41
87
  }
@@ -151,720 +197,680 @@
151
197
  transform: scale(1);
152
198
  opacity: 1;
153
199
  }
154
- }
155
- @keyframes jumpheart {
156
- to {
157
- -webkit-transform: scale(1.2);
158
- transform: scale(1.2)
159
- }
160
- }
161
- .ele-calendar {
162
- position: relative;
163
- width: 325px !important;
164
- min-height: 325px !important;
165
- height: auto !important;
166
- }
167
-
168
- .ele-calendar .drag-point {
169
- cursor: default !important;
200
+ }.count-down .drag-point {
201
+ cursor: default!important
170
202
  }
171
203
 
172
- .ele-calendar .ani-wrap {
173
- position: relative;
204
+ .count-down .ani-wrap {
174
205
  width: 100%;
175
- min-height: 325px !important;
176
- height: auto !important;
177
- padding: 22px 0;
206
+ height: 100%
178
207
  }
179
208
 
180
- .ele-calendar .ani-wrap .can-wrap .can-top {
209
+ .count-down .count-text,.count-down .finish-cont {
210
+ display: -webkit-box;
211
+ display: -ms-flexbox;
181
212
  display: flex;
182
- justify-content: space-between;
183
- align-items: flex-end;
184
- line-height: 1;
185
- padding: 0 47px 20px;
213
+ height: 100%;
214
+ -webkit-box-align: center;
215
+ -ms-flex-align: center;
216
+ align-items: center;
217
+ -webkit-box-pack: center;
218
+ -ms-flex-pack: center;
219
+ justify-content: center
186
220
  }
187
221
 
188
- .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
189
- font-size: 25px;
190
- padding-bottom: 4px;
222
+ .count-down .finish-cont {
223
+ width: 100%
191
224
  }
192
225
 
193
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
194
- font-size: 25px;
226
+ .count-down .count-flip {
227
+ display: -webkit-box;
228
+ display: -ms-flexbox;
229
+ display: flex;
230
+ height: 100%;
231
+ -webkit-box-align: center;
232
+ -ms-flex-align: center;
233
+ align-items: center;
234
+ -webkit-box-pack: center;
235
+ -ms-flex-pack: center;
236
+ justify-content: center
195
237
  }
196
238
 
197
- .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
198
- position: relative;
199
- top: 2px;
200
- font-size: 57px;
239
+ .count-down .count-flip .numscroll {
240
+ -webkit-animation: numscroll .4s ease-in-out;
241
+ animation: numscroll .4s ease-in-out;
242
+ -webkit-animation-fill-mode: both;
243
+ animation-fill-mode: both
201
244
  }
202
245
 
203
- .ele-calendar .ani-wrap .can-wrap .can-main {
204
- padding: 0 23px;
246
+ .count-down .count-flip .numscroll .curr-num {
247
+ -webkit-transition: all .3s ease-in-out;
248
+ transition: all .3s ease-in-out;
249
+ opacity: .6;
250
+ -webkit-transform: scale(.5)!important;
251
+ transform: scale(.5)!important
205
252
  }
206
253
 
207
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
208
- display: flex;
209
- justify-content: flex-start;
210
- height: 25px;
211
- line-height: 25px;
212
- padding: 0 10px;
213
- border-radius: 13px;
254
+ @-webkit-keyframes numscroll {
255
+ 0% {
256
+ -webkit-transform: translateZ(0);
257
+ transform: translateZ(0)
258
+ }
259
+
260
+ to {
261
+ -webkit-transform: translate3d(0,100%,0);
262
+ transform: translate3d(0,100%,0)
263
+ }
214
264
  }
215
265
 
216
- .ele-calendar .ani-wrap .can-wrap .can-main .can-week span {
217
- width: 14.2%;
218
- text-align: center;
219
- color: #fff;
220
- font-size: 12px;
266
+ @keyframes numscroll {
267
+ 0% {
268
+ -webkit-transform: translateZ(0);
269
+ transform: translateZ(0)
270
+ }
271
+
272
+ to {
273
+ -webkit-transform: translate3d(0,100%,0);
274
+ transform: translate3d(0,100%,0)
275
+ }
221
276
  }
222
277
 
223
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul {
224
- font-size: 0;
225
- padding: 5px 10px 0;
226
- text-align: left;
278
+ .count-down .count-flip .c-com {
279
+ min-width: 50px;
280
+ height: auto;
281
+ margin: 6px;
282
+ padding: 5px 0 6px;
283
+ background-color: #111
227
284
  }
228
285
 
229
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li {
286
+ .count-down .count-flip .c-com .flex-wrap {
287
+ display: -webkit-box;
288
+ display: -ms-flexbox;
289
+ display: flex;
230
290
  position: relative;
231
- display: inline-block;
232
- height: 25px;
233
- text-align: center;
234
- margin-top: 8px;
291
+ width: 100%;
292
+ height: 100%;
293
+ -webkit-box-align: center;
294
+ -ms-flex-align: center;
295
+ align-items: center
235
296
  }
236
297
 
237
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active .iconfont {
238
- display: block;
298
+ .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
299
+ line-height: 27px
239
300
  }
240
301
 
241
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active span {
242
- color: #fff !important;
302
+ .count-down .count-flip .c-com .flex-wrap .next-num {
303
+ position: absolute;
304
+ top: -100%
243
305
  }
244
306
 
245
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
246
- animation: jumpheart 0.8s ease infinite alternate;
307
+ .count-down .count-flip .c-com .flex-wrap .curr-num {
308
+ -webkit-transform: scale(1);
309
+ transform: scale(1)
247
310
  }
248
311
 
249
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
250
- display: none;
251
- font-size: 26px;
312
+ .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 {
313
+ display: none!important
252
314
  }
253
315
 
254
- .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li span {
255
- position: absolute;
256
- left: 50%;
257
- top: 50%;
258
- z-index: 1;
259
- color: #666;
260
- font-size: 13px;
261
- transform: translate(-50%, -52%);
316
+ .c-wrap {
317
+ width: 100%;
318
+ height: 100%;
319
+ overflow: hidden;
320
+ font-size: 0
262
321
  }
263
322
 
264
- .ele-calendar .bottom-center,
265
- .ele-calendar .left-center,
266
- .ele-calendar .right-center,
267
- .ele-calendar .top-center {
268
- display: none !important;
323
+ .c-wrap.c-day-wrap {
324
+ text-align: center
269
325
  }
270
326
 
271
- .ele-calendar .ani-wrap .can-wrap2 {
272
- padding: 21px 23px 0
327
+ .c-wrap.c-day-wrap .c-num {
328
+ width: auto
273
329
  }
274
330
 
275
- .ele-calendar .ani-wrap .can-wrap2 .can-top {
276
- display: -webkit-box;
277
- display: -ms-flexbox;
278
- display: flex;
279
- -webkit-box-pack: justify;
280
- -ms-flex-pack: justify;
281
- justify-content: space-between;
282
- -webkit-box-align: end;
283
- -ms-flex-align: end;
284
- align-items: flex-end;
285
- line-height: 1;
286
- padding: 0 16px 22px;
287
- font-size: 36px
288
- }
289
-
290
- .ele-calendar .ani-wrap .can-wrap2 .can-top span {
291
- font-size: 16px
331
+ .c-wrap .c-num {
332
+ display: inline-block;
333
+ width: 50%;
334
+ overflow: hidden;
335
+ font-size: 20px;
336
+ color: #999
292
337
  }
293
338
 
294
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week {
339
+ .c-wrap .c-left .flex-wrap {
295
340
  display: -webkit-box;
296
341
  display: -ms-flexbox;
297
342
  display: flex;
298
- -webkit-box-pack: start;
299
- -ms-flex-pack: start;
300
- justify-content: flex-start;
301
- height: 25px;
302
- line-height: 25px;
303
- padding: 0 10px;
304
- border-radius: 13px
343
+ -webkit-box-pack: end;
344
+ -ms-flex-pack: end;
345
+ justify-content: flex-end
305
346
  }
306
347
 
307
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week span {
308
- width: 14.2%;
309
- text-align: center;
310
- color: #fff;
348
+ .c-wrap .c-text {
349
+ display: -webkit-box;
350
+ display: -ms-flexbox;
351
+ display: flex;
352
+ width: 100%;
311
353
  font-size: 12px;
312
- font-weight: 600
354
+ -webkit-box-pack: center;
355
+ -ms-flex-pack: center;
356
+ justify-content: center;
357
+ -webkit-box-align: center;
358
+ -ms-flex-align: center;
359
+ align-items: center;
360
+ white-space: nowrap
313
361
  }
314
-
315
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date {
316
- position: relative
362
+ .element-ditu .ani-wrap {
363
+ width: 100%;
364
+ height: 100%;
365
+ overflow: hidden
317
366
  }
318
367
 
319
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date .can-year {
320
- position: absolute;
321
- white-space: nowrap;
322
- left: 50%;
323
- top: 15%;
324
- -webkit-transform: translateX(-50%);
325
- transform: translateX(-50%);
326
- font-size: 76px;
327
- opacity: .1;
328
- font-weight: 600
368
+ .element-ditu .map {
369
+ width: 100%;
370
+ height: 100%
329
371
  }
330
372
 
331
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul {
332
- font-size: 0;
333
- padding: 5px 10px 0;
334
- text-align: left
373
+ .element-ditu .map .el-button {
374
+ width: 100%;
375
+ height: 100%;
376
+ display: -webkit-box;
377
+ display: -ms-flexbox;
378
+ display: flex;
379
+ -webkit-box-align: center;
380
+ -ms-flex-align: center;
381
+ align-items: center;
382
+ padding: 0;
383
+ -webkit-box-pack: center;
384
+ -ms-flex-pack: center;
385
+ justify-content: center;
386
+ background: inherit;
387
+ color: inherit;
388
+ border: none
335
389
  }
336
390
 
337
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li {
338
- position: relative;
339
- display: inline-block;
340
- width: 14.2%;
341
- height: 25px;
342
- text-align: center;
343
- margin-top: 8px
391
+ .element-ditu .center-map {
392
+ width: 100%;
393
+ height: 100%;
394
+ background: #fff
344
395
  }
345
396
 
346
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active .iconfont {
347
- display: block;
397
+ .element-ditu .mask-map {
348
398
  position: absolute;
349
- left: 17%;
350
- top: 0;
351
- font-size: 25px
399
+ width: 100%;
400
+ height: 100%;
401
+ top: 0
352
402
  }
353
-
354
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active span {
355
- color: #fff!important
403
+ .map-iframe {
404
+ width: 100%;
405
+ height: 100%;
406
+ }.button {
407
+ position: absolute;
408
+ cursor: pointer;
409
+ user-select: none;
356
410
  }
357
-
358
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.heart-ani .iconfont {
359
- -webkit-animation: jumpheart .8s ease infinite alternate;
360
- animation: jumpheart .8s ease infinite alternate
411
+
412
+ .button .ani-wrap {
413
+ display: flex;
414
+ justify-content: center;
415
+ align-items: center;
416
+ width: 100%;
417
+ height: 100%;
418
+ overflow: hidden;
419
+ transition: opacity 0.2s;
420
+ }
421
+
422
+ .button .ani-wrap:hover {
423
+ opacity: 0.9;
361
424
  }
362
425
 
363
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li .iconfont {
364
- display: none;
365
- font-size: 26px
426
+ .button-content {
427
+ display: flex;
428
+ align-items: center;
429
+ justify-content: center;
366
430
  }
367
431
 
368
- .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li span {
432
+ .btn-text {
433
+ margin-left: 10px;
434
+ }.call {
369
435
  position: absolute;
370
- left: 50%;
371
- top: 50%;
372
- z-index: 1;
373
- color: #666;
374
- font-size: 13px;
375
- -webkit-transform: translate(-50%,-52%);
376
- transform: translate(-50%,-52%)
436
+ cursor: pointer;
437
+ user-select: none;
377
438
  }
378
439
 
379
- .ele-calendar .ani-wrap .can-wrap3 .can-top {
380
- display: -webkit-box;
381
- display: -ms-flexbox;
440
+ .call .ani-wrap {
382
441
  display: flex;
383
- -webkit-box-pack: justify;
384
- -ms-flex-pack: justify;
385
- justify-content: space-between;
386
- -webkit-box-align: end;
387
- -ms-flex-align: end;
388
- align-items: flex-end;
389
- line-height: 1;
390
- padding: 18px 33px 10px;
391
- font-size: 36px;
392
- }
393
-
394
- .ele-calendar .ani-wrap .can-wrap3 .can-top span {
395
- font-size: 16px
442
+ justify-content: center;
443
+ align-items: center;
444
+ width: 100%;
445
+ height: 100%;
446
+ overflow: hidden;
447
+ transition: opacity 0.2s;
396
448
  }
397
449
 
398
- .ele-calendar .ani-wrap .can-wrap3 .can-top .can-year {
399
- font-size: 20px
450
+ .call .ani-wrap:hover {
451
+ opacity: 0.9;
400
452
  }
401
453
 
402
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week {
403
- display: -webkit-box;
404
- display: -ms-flexbox;
454
+ .call-content {
405
455
  display: flex;
406
- -webkit-box-pack: start;
407
- -ms-flex-pack: start;
408
- justify-content: flex-start;
409
- height: 40px;
410
- line-height: 40px;
411
- padding: 0 34px;
412
- border-bottom: 1px solid
456
+ align-items: center;
457
+ justify-content: center;
413
458
  }
414
459
 
415
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week span {
416
- width: 14.2%;
417
- text-align: center;
418
- color: #fff;
419
- font-size: 12px;
420
- font-weight: 600
460
+ .btn-text {
461
+ margin-left: 10px;
421
462
  }
422
463
 
423
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date {
424
- position: relative
425
- }
426
464
 
427
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul {
428
- font-size: 0;
429
- padding: 5px 33px 0;
430
- text-align: left
465
+ .hb-tel:before {
466
+ content: "\E642";
467
+ }.ele-shape {
468
+ position: absolute;
469
+ overflow: hidden;
431
470
  }
432
471
 
433
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li {
434
- position: relative;
435
- display: inline-block;
436
- width: 14.2%;
437
- height: 25px;
438
- text-align: center;
439
- margin-top: 8px;
472
+ .ani-wrap {
473
+ width: 100%;
474
+ height: 100%;
475
+ box-sizing: border-box;
440
476
  }
441
477
 
442
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active {
443
- color: #eee
478
+ .e-shape {
479
+ width: 100%;
480
+ height: 100%;
444
481
  }
445
482
 
446
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active .iconfont {
483
+ .svg-container :deep(svg) {
484
+ width: 100%;
485
+ height: 100%;
447
486
  display: block;
448
- position: absolute;
449
- left: 12%;
450
- top: 2px;
451
487
  }
452
488
 
453
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active span {
454
- font-size: 12px
489
+ .svg-container {
490
+ width: 100%;
491
+ height: 100%;
492
+ display: block;
455
493
  }
456
494
 
457
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.heart-ani .iconfont {
458
- -webkit-animation: jumpheart .8s ease infinite alternate;
459
- animation: jumpheart .8s ease infinite alternate
495
+
496
+ .svg-loading,
497
+ .svg-error {
498
+ display: flex;
499
+ align-items: center;
500
+ justify-content: center;
501
+ width: 100%;
502
+ height: 100%;
503
+ background: rgba(0,0,0,0.05);
460
504
  }
461
505
 
506
+ .ele-shape .svg-container svg {
507
+ width: 100%;
508
+ height: 100%;
509
+ overflow: visible;
510
+ }
462
511
  @keyframes jumpheart {
463
512
  to {
464
513
  -webkit-transform: scale(1.2);
465
514
  transform: scale(1.2)
466
515
  }
467
516
  }
468
-
469
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li .iconfont {
470
- display: none;
471
- font-size: 26px
517
+ .ele-calendar {
518
+ position: relative;
519
+ width: 325px !important;
520
+ min-height: 325px !important;
521
+ height: auto !important;
472
522
  }
473
523
 
474
- .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li span {
475
- position: absolute;
476
- left: 50%;
477
- top: 50%;
478
- z-index: 1;
479
- color: #666;
480
- font-size: 13px;
481
- -webkit-transform: translate(-50%,-52%);
482
- transform: translate(-50%,-52%)
524
+ .ele-calendar .drag-point {
525
+ cursor: default !important;
483
526
  }
484
527
 
485
- .ele-calendar .bottom-center,.ele-calendar .left-center,.ele-calendar .right-center,.ele-calendar .top-center {
486
- display: none!important
487
- }
488
- .icon-tuoyuanxing:before {
489
- content: "\E6A7";
490
- }
491
- .icon-zan1:before {
492
- content: "\E66D";
493
- }
494
- .icon-xingzhuangjiehe:before {
495
- content: "\E6A6";
496
- }.ele-shape {
497
- position: absolute;
498
- overflow: hidden;
528
+ .ele-calendar .ani-wrap {
529
+ position: relative;
530
+ width: 100%;
531
+ min-height: 325px !important;
532
+ height: auto !important;
533
+ padding: 22px 0;
499
534
  }
500
535
 
501
- .ani-wrap {
502
- width: 100%;
503
- height: 100%;
504
- box-sizing: border-box;
536
+ .ele-calendar .ani-wrap .can-wrap .can-top {
537
+ display: flex;
538
+ justify-content: space-between;
539
+ align-items: flex-end;
540
+ line-height: 1;
541
+ padding: 0 47px 20px;
505
542
  }
506
543
 
507
- .e-shape {
508
- width: 100%;
509
- height: 100%;
544
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-left {
545
+ font-size: 25px;
546
+ padding-bottom: 4px;
510
547
  }
511
548
 
512
- .svg-container :deep(svg) {
513
- width: 100%;
514
- height: 100%;
515
- display: block;
549
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-right {
550
+ font-size: 25px;
516
551
  }
517
552
 
518
- .svg-container {
519
- width: 100%;
520
- height: 100%;
521
- display: block;
553
+ .ele-calendar .ani-wrap .can-wrap .can-top .can-right span {
554
+ position: relative;
555
+ top: 2px;
556
+ font-size: 57px;
522
557
  }
523
558
 
559
+ .ele-calendar .ani-wrap .can-wrap .can-main {
560
+ padding: 0 23px;
561
+ }
524
562
 
525
- .svg-loading,
526
- .svg-error {
563
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-week {
527
564
  display: flex;
528
- align-items: center;
529
- justify-content: center;
530
- width: 100%;
531
- height: 100%;
532
- background: rgba(0,0,0,0.05);
565
+ justify-content: flex-start;
566
+ height: 25px;
567
+ line-height: 25px;
568
+ padding: 0 10px;
569
+ border-radius: 13px;
533
570
  }
534
571
 
535
- .ele-shape .svg-container svg {
536
- width: 100%;
537
- height: 100%;
538
- overflow: visible;
572
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-week span {
573
+ width: 14.2%;
574
+ text-align: center;
575
+ color: #fff;
576
+ font-size: 12px;
539
577
  }
540
- .element-video {
541
- position: absolute;
542
- overflow: hidden;
543
- background-color: transparent;
544
- }
545
-
546
- .element-video .ani-wrap, .element-video img {
547
- display: block;
548
- width: 100%;
549
- height: 100%;
550
- }
551
-
552
- .video-container {
553
- width: 100%;
554
- height: 100%;
555
- }
556
-
557
- .video-container iframe {
558
- width: 100%;
559
- height: 100%;
560
- border: none;
561
- }
562
-
563
- .video-cover {
564
- position: relative;
565
- width: 100%;
566
- height: 100%;
567
- background-size: cover;
568
- background-position: center;
569
- cursor: pointer;
570
- }
571
-
572
- .video-cover .play-btn {
573
- position: absolute;
574
- left: 50%;
575
- top: 50%;
576
- transform: translate(-50%, -50%);
577
- width: 50px;
578
- height: 50px;
579
- opacity: 0.8;
580
- transition: opacity 0.2s;
581
- }
582
-
583
- .video-cover:hover .play-btn {
584
- opacity: 1;
585
- }.ele-effect {
586
- will-change: transform;
578
+
579
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul {
580
+ font-size: 0;
581
+ padding: 5px 10px 0;
582
+ text-align: left;
587
583
  }
588
584
 
589
- .ele-effect .effect-wrap {
585
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li {
590
586
  position: relative;
591
- width: 100%;
592
- height: 100%;
587
+ display: inline-block;
588
+ height: 25px;
589
+ text-align: center;
590
+ margin-top: 8px;
593
591
  }
594
592
 
595
- .particle {
596
- position: absolute;
597
- background-repeat: no-repeat;
598
- background-size: contain;
599
- animation-name: falling;
600
- animation-timing-function: linear;
601
- animation-iteration-count: infinite;
602
- will-change: transform;
593
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active .iconfont {
594
+ display: block;
603
595
  }
604
596
 
605
- @keyframes falling {
606
- 0% {
607
- transform: translateY(0) rotate(0deg);
608
- opacity: 1;
609
- }
610
- 80% {
611
- opacity: 0.8;
612
- }
613
- 100% {
614
- transform: translateY(100vh) rotate(360deg);
615
- opacity: 0;
616
- }
597
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.active span {
598
+ color: #fff !important;
617
599
  }
618
- .ele-lottie .ele-lotwrap {
619
- overflow: hidden
600
+
601
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li.heart-ani .iconfont {
602
+ animation: jumpheart 0.8s ease infinite alternate;
620
603
  }
621
604
 
622
- .ele-effect .effect-wrap {
623
- position: relative;
624
- overflow: hidden;
625
- width: 100%;
626
- height: 100%
605
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li .iconfont {
606
+ display: none;
607
+ font-size: 26px;
627
608
  }
628
609
 
629
- .ele-effect .e-small {
630
- position: absolute;
631
- width: 24px;
632
- height: 24px;
633
- background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
634
- background-size: cover;
635
- background-repeat: no-repeat;
636
- -webkit-transform-origin: center;
637
- transform-origin: center;
638
- -webkit-animation: snow 5s linear infinite;
639
- animation: snow 5s linear infinite
640
- }.element-ditu .ani-wrap {
641
- width: 100%;
642
- height: 100%;
643
- overflow: hidden
610
+ .ele-calendar .ani-wrap .can-wrap .can-main .can-date ul li span {
611
+ position: absolute;
612
+ left: 50%;
613
+ top: 50%;
614
+ z-index: 1;
615
+ color: #666;
616
+ font-size: 13px;
617
+ transform: translate(-50%, -52%);
644
618
  }
645
619
 
646
- .element-ditu .map {
647
- width: 100%;
648
- height: 100%
620
+ .ele-calendar .bottom-center,
621
+ .ele-calendar .left-center,
622
+ .ele-calendar .right-center,
623
+ .ele-calendar .top-center {
624
+ display: none !important;
649
625
  }
650
626
 
651
- .element-ditu .map .el-button {
652
- width: 100%;
653
- height: 100%;
627
+ .ele-calendar .ani-wrap .can-wrap2 {
628
+ padding: 21px 23px 0
629
+ }
630
+
631
+ .ele-calendar .ani-wrap .can-wrap2 .can-top {
654
632
  display: -webkit-box;
655
633
  display: -ms-flexbox;
656
634
  display: flex;
657
- -webkit-box-align: center;
658
- -ms-flex-align: center;
659
- align-items: center;
660
- padding: 0;
661
- -webkit-box-pack: center;
662
- -ms-flex-pack: center;
663
- justify-content: center;
664
- background: inherit;
665
- color: inherit;
666
- border: none
635
+ -webkit-box-pack: justify;
636
+ -ms-flex-pack: justify;
637
+ justify-content: space-between;
638
+ -webkit-box-align: end;
639
+ -ms-flex-align: end;
640
+ align-items: flex-end;
641
+ line-height: 1;
642
+ padding: 0 16px 22px;
643
+ font-size: 36px
667
644
  }
668
645
 
669
- .element-ditu .center-map {
670
- width: 100%;
671
- height: 100%;
672
- background: #fff
646
+ .ele-calendar .ani-wrap .can-wrap2 .can-top span {
647
+ font-size: 16px
673
648
  }
674
649
 
675
- .element-ditu .mask-map {
676
- position: absolute;
677
- width: 100%;
678
- height: 100%;
679
- top: 0
680
- }
681
- .map-iframe {
682
- width: 100%;
683
- height: 100%;
684
- }.count-down .drag-point {
685
- cursor: default!important
686
- }
687
-
688
- .count-down .ani-wrap {
689
- width: 100%;
690
- height: 100%
691
- }
692
-
693
- .count-down .count-text,.count-down .finish-cont {
650
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week {
694
651
  display: -webkit-box;
695
652
  display: -ms-flexbox;
696
653
  display: flex;
697
- height: 100%;
698
- -webkit-box-align: center;
699
- -ms-flex-align: center;
700
- align-items: center;
701
- -webkit-box-pack: center;
702
- -ms-flex-pack: center;
703
- justify-content: center
654
+ -webkit-box-pack: start;
655
+ -ms-flex-pack: start;
656
+ justify-content: flex-start;
657
+ height: 25px;
658
+ line-height: 25px;
659
+ padding: 0 10px;
660
+ border-radius: 13px
704
661
  }
705
662
 
706
- .count-down .finish-cont {
707
- width: 100%
663
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-week span {
664
+ width: 14.2%;
665
+ text-align: center;
666
+ color: #fff;
667
+ font-size: 12px;
668
+ font-weight: 600
708
669
  }
709
670
 
710
- .count-down .count-flip {
711
- display: -webkit-box;
712
- display: -ms-flexbox;
713
- display: flex;
714
- height: 100%;
715
- -webkit-box-align: center;
716
- -ms-flex-align: center;
717
- align-items: center;
718
- -webkit-box-pack: center;
719
- -ms-flex-pack: center;
720
- justify-content: center
671
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date {
672
+ position: relative
721
673
  }
722
674
 
723
- .count-down .count-flip .numscroll {
724
- -webkit-animation: numscroll .4s ease-in-out;
725
- animation: numscroll .4s ease-in-out;
726
- -webkit-animation-fill-mode: both;
727
- animation-fill-mode: both
675
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date .can-year {
676
+ position: absolute;
677
+ white-space: nowrap;
678
+ left: 50%;
679
+ top: 15%;
680
+ -webkit-transform: translateX(-50%);
681
+ transform: translateX(-50%);
682
+ font-size: 76px;
683
+ opacity: .1;
684
+ font-weight: 600
728
685
  }
729
686
 
730
- .count-down .count-flip .numscroll .curr-num {
731
- -webkit-transition: all .3s ease-in-out;
732
- transition: all .3s ease-in-out;
733
- opacity: .6;
734
- -webkit-transform: scale(.5)!important;
735
- transform: scale(.5)!important
687
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul {
688
+ font-size: 0;
689
+ padding: 5px 10px 0;
690
+ text-align: left
736
691
  }
737
692
 
738
- @-webkit-keyframes numscroll {
739
- 0% {
740
- -webkit-transform: translateZ(0);
741
- transform: translateZ(0)
742
- }
693
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li {
694
+ position: relative;
695
+ display: inline-block;
696
+ width: 14.2%;
697
+ height: 25px;
698
+ text-align: center;
699
+ margin-top: 8px
700
+ }
743
701
 
744
- to {
745
- -webkit-transform: translate3d(0,100%,0);
746
- transform: translate3d(0,100%,0)
747
- }
702
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active .iconfont {
703
+ display: block;
704
+ position: absolute;
705
+ left: 17%;
706
+ top: 0;
707
+ font-size: 25px
748
708
  }
749
709
 
750
- @keyframes numscroll {
751
- 0% {
752
- -webkit-transform: translateZ(0);
753
- transform: translateZ(0)
754
- }
710
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.active span {
711
+ color: #fff!important
712
+ }
755
713
 
756
- to {
757
- -webkit-transform: translate3d(0,100%,0);
758
- transform: translate3d(0,100%,0)
759
- }
714
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li.heart-ani .iconfont {
715
+ -webkit-animation: jumpheart .8s ease infinite alternate;
716
+ animation: jumpheart .8s ease infinite alternate
760
717
  }
761
718
 
762
- .count-down .count-flip .c-com {
763
- min-width: 50px;
764
- height: auto;
765
- margin: 6px;
766
- padding: 5px 0 6px;
767
- background-color: #111
719
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li .iconfont {
720
+ display: none;
721
+ font-size: 26px
768
722
  }
769
723
 
770
- .count-down .count-flip .c-com .flex-wrap {
724
+ .ele-calendar .ani-wrap .can-wrap2 .can-main .can-date ul li span {
725
+ position: absolute;
726
+ left: 50%;
727
+ top: 50%;
728
+ z-index: 1;
729
+ color: #666;
730
+ font-size: 13px;
731
+ -webkit-transform: translate(-50%,-52%);
732
+ transform: translate(-50%,-52%)
733
+ }
734
+
735
+ .ele-calendar .ani-wrap .can-wrap3 .can-top {
771
736
  display: -webkit-box;
772
737
  display: -ms-flexbox;
773
738
  display: flex;
774
- position: relative;
775
- width: 100%;
776
- height: 100%;
777
- -webkit-box-align: center;
778
- -ms-flex-align: center;
779
- align-items: center
780
- }
781
-
782
- .count-down .count-flip .c-com .flex-wrap .curr-num,.count-down .count-flip .c-com .flex-wrap .next-num {
783
- line-height: 27px
739
+ -webkit-box-pack: justify;
740
+ -ms-flex-pack: justify;
741
+ justify-content: space-between;
742
+ -webkit-box-align: end;
743
+ -ms-flex-align: end;
744
+ align-items: flex-end;
745
+ line-height: 1;
746
+ padding: 18px 33px 10px;
747
+ font-size: 36px;
784
748
  }
785
749
 
786
- .count-down .count-flip .c-com .flex-wrap .next-num {
787
- position: absolute;
788
- top: -100%
750
+ .ele-calendar .ani-wrap .can-wrap3 .can-top span {
751
+ font-size: 16px
789
752
  }
790
753
 
791
- .count-down .count-flip .c-com .flex-wrap .curr-num {
792
- -webkit-transform: scale(1);
793
- transform: scale(1)
754
+ .ele-calendar .ani-wrap .can-wrap3 .can-top .can-year {
755
+ font-size: 20px
794
756
  }
795
757
 
796
- .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 {
797
- display: none!important
758
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week {
759
+ display: -webkit-box;
760
+ display: -ms-flexbox;
761
+ display: flex;
762
+ -webkit-box-pack: start;
763
+ -ms-flex-pack: start;
764
+ justify-content: flex-start;
765
+ height: 40px;
766
+ line-height: 40px;
767
+ padding: 0 34px;
768
+ border-bottom: 1px solid
798
769
  }
799
770
 
800
- .c-wrap {
801
- width: 100%;
802
- height: 100%;
803
- overflow: hidden;
804
- font-size: 0
771
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-week span {
772
+ width: 14.2%;
773
+ text-align: center;
774
+ color: #fff;
775
+ font-size: 12px;
776
+ font-weight: 600
805
777
  }
806
778
 
807
- .c-wrap.c-day-wrap {
808
- text-align: center
779
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date {
780
+ position: relative
809
781
  }
810
782
 
811
- .c-wrap.c-day-wrap .c-num {
812
- width: auto
783
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul {
784
+ font-size: 0;
785
+ padding: 5px 33px 0;
786
+ text-align: left
813
787
  }
814
788
 
815
- .c-wrap .c-num {
789
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li {
790
+ position: relative;
816
791
  display: inline-block;
817
- width: 50%;
818
- overflow: hidden;
819
- font-size: 20px;
820
- color: #999
792
+ width: 14.2%;
793
+ height: 25px;
794
+ text-align: center;
795
+ margin-top: 8px;
821
796
  }
822
797
 
823
- .c-wrap .c-left .flex-wrap {
824
- display: -webkit-box;
825
- display: -ms-flexbox;
826
- display: flex;
827
- -webkit-box-pack: end;
828
- -ms-flex-pack: end;
829
- justify-content: flex-end
798
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active {
799
+ color: #eee
830
800
  }
831
801
 
832
- .c-wrap .c-text {
833
- display: -webkit-box;
834
- display: -ms-flexbox;
835
- display: flex;
836
- width: 100%;
837
- font-size: 12px;
838
- -webkit-box-pack: center;
839
- -ms-flex-pack: center;
840
- justify-content: center;
841
- -webkit-box-align: center;
842
- -ms-flex-align: center;
843
- align-items: center;
844
- white-space: nowrap
845
- }
846
- #audio {
802
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active .iconfont {
803
+ display: block;
847
804
  position: absolute;
848
- right: 10px;
849
- top: 10px;
850
- z-index: 103;
851
- width: 30px;
852
- height: 30px;
853
- display: flex;
854
- align-items: center;
805
+ left: 12%;
806
+ top: 2px;
855
807
  }
856
808
 
857
- #audio .mrotate {
858
- animation: mrotate 5s linear infinite;
809
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.active span {
810
+ font-size: 12px
859
811
  }
860
812
 
861
- @keyframes mrotate {
862
- to {
863
- transform: rotate(1turn);
864
- }
813
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li.heart-ani .iconfont {
814
+ -webkit-animation: jumpheart .8s ease infinite alternate;
815
+ animation: jumpheart .8s ease infinite alternate
865
816
  }
866
817
 
867
- #audio .audio {
818
+ @keyframes jumpheart {
819
+ to {
820
+ -webkit-transform: scale(1.2);
821
+ transform: scale(1.2)
822
+ }
823
+ }
824
+
825
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li .iconfont {
826
+ display: none;
827
+ font-size: 26px
828
+ }
829
+
830
+ .ele-calendar .ani-wrap .can-wrap3 .can-main .can-date ul li span {
831
+ position: absolute;
832
+ left: 50%;
833
+ top: 50%;
834
+ z-index: 1;
835
+ color: #666;
836
+ font-size: 13px;
837
+ -webkit-transform: translate(-50%,-52%);
838
+ transform: translate(-50%,-52%)
839
+ }
840
+
841
+ .ele-calendar .bottom-center,.ele-calendar .left-center,.ele-calendar .right-center,.ele-calendar .top-center {
842
+ display: none!important
843
+ }
844
+ .icon-tuoyuanxing:before {
845
+ content: "\E6A7";
846
+ }
847
+ .icon-zan1:before {
848
+ content: "\E66D";
849
+ }
850
+ .icon-xingzhuangjiehe:before {
851
+ content: "\E6A6";
852
+ }#audio {
853
+ position: absolute;
854
+ right: 10px;
855
+ top: 10px;
856
+ z-index: 103;
857
+ width: 30px;
858
+ height: 30px;
859
+ display: flex;
860
+ align-items: center;
861
+ }
862
+
863
+ #audio .mrotate {
864
+ animation: mrotate 5s linear infinite;
865
+ }
866
+
867
+ @keyframes mrotate {
868
+ to {
869
+ transform: rotate(1turn);
870
+ }
871
+ }
872
+
873
+ #audio .audio {
868
874
  width: 100%;
869
875
  height: 100%;
870
876
  display: flex;
@@ -913,70 +919,110 @@
913
919
  width: 100%;
914
920
  height: 2px;
915
921
  background: #fff;
916
- }.call {
917
- position: absolute;
918
- cursor: pointer;
919
- user-select: none;
922
+ }.ele-effect {
923
+ will-change: transform;
920
924
  }
921
925
 
922
- .call .ani-wrap {
923
- display: flex;
924
- justify-content: center;
925
- align-items: center;
926
+ .ele-effect .effect-wrap {
927
+ position: relative;
926
928
  width: 100%;
927
929
  height: 100%;
928
- overflow: hidden;
929
- transition: opacity 0.2s;
930
930
  }
931
931
 
932
- .call .ani-wrap:hover {
933
- opacity: 0.9;
932
+ .particle {
933
+ position: absolute;
934
+ background-repeat: no-repeat;
935
+ background-size: contain;
936
+ animation-name: falling;
937
+ animation-timing-function: linear;
938
+ animation-iteration-count: infinite;
939
+ will-change: transform;
934
940
  }
935
941
 
936
- .call-content {
937
- display: flex;
938
- align-items: center;
939
- justify-content: center;
942
+ @keyframes falling {
943
+ 0% {
944
+ transform: translateY(0) rotate(0deg);
945
+ opacity: 1;
946
+ }
947
+ 80% {
948
+ opacity: 0.8;
949
+ }
950
+ 100% {
951
+ transform: translateY(100vh) rotate(360deg);
952
+ opacity: 0;
953
+ }
940
954
  }
941
-
942
- .btn-text {
943
- margin-left: 10px;
955
+ .ele-lottie .ele-lotwrap {
956
+ overflow: hidden
944
957
  }
945
958
 
959
+ .ele-effect .effect-wrap {
960
+ position: relative;
961
+ overflow: hidden;
962
+ width: 100%;
963
+ height: 100%
964
+ }
946
965
 
947
- .hb-tel:before {
948
- content: "\E642";
966
+ .ele-effect .e-small {
967
+ position: absolute;
968
+ width: 24px;
969
+ height: 24px;
970
+ background-image: url(https://h5cdn.unika.cc/static/img/uniComponents/snow.png);
971
+ background-size: cover;
972
+ background-repeat: no-repeat;
973
+ -webkit-transform-origin: center;
974
+ transform-origin: center;
975
+ -webkit-animation: snow 5s linear infinite;
976
+ animation: snow 5s linear infinite
949
977
  }
950
978
  .ele-lottie .ele-lotwrap {
951
979
  overflow: hidden;
952
- }.button {
953
- position: absolute;
980
+ }.form-submit {
954
981
  cursor: pointer;
955
- user-select: none;
982
+ transition: all 0.2s;
983
+ outline: none;
984
+ border: none;
956
985
  }
957
-
958
- .button .ani-wrap {
959
- display: flex;
960
- justify-content: center;
961
- align-items: center;
986
+
987
+ .form-submit:hover {
988
+ opacity: 0.9;
989
+ transform: translateY(-1px);
990
+ }
991
+
992
+ .form-submit:active {
993
+ opacity: 0.8;
994
+ transform: translateY(0);
995
+ }
996
+
997
+ .form-submit:disabled {
998
+ opacity: 0.6;
999
+ cursor: not-allowed;
1000
+ transform: none !important;
1001
+ }
1002
+
1003
+ .f-submit {
1004
+ position: relative;
1005
+ display: block
1006
+ }
1007
+
1008
+ .f-submit .ani-wrap {
962
1009
  width: 100%;
963
1010
  height: 100%;
1011
+ padding: 10px;
964
1012
  overflow: hidden;
965
- transition: opacity 0.2s;
966
- }
967
-
968
- .button .ani-wrap:hover {
969
- opacity: 0.9;
1013
+ position: relative
970
1014
  }
971
1015
 
972
- .button-content {
973
- display: flex;
974
- align-items: center;
975
- justify-content: center;
1016
+ .f-submit .f-ovh {
1017
+ position: absolute;
1018
+ left: 50%;
1019
+ top: 50%;
1020
+ transform: translate(-50%,-50%)
976
1021
  }
977
1022
 
978
- .btn-text {
979
- margin-left: 10px;
1023
+ .form-submit:disabled {
1024
+ opacity: 0.7;
1025
+ cursor: not-allowed;
980
1026
  }/* Iconfont definition */
981
1027
  .icon-danmuliebiao1:before {
982
1028
  content: "\E68A";
@@ -3483,27 +3529,154 @@ to {
3483
3529
  }
3484
3530
  }
3485
3531
 
3486
- @charset"UTF-8";.animated {
3487
- animation-duration: 1s;
3488
- animation-fill-mode: both
3489
- }
3490
-
3491
- .animated.infinite {
3492
- animation-iteration-count: infinite
3493
- }
3494
-
3495
- .animated.hinge {
3496
- animation-duration: 2s
3532
+ .form-input {
3533
+ position: absolute;
3534
+ }
3535
+
3536
+ .input-wrapper {
3537
+ display: flex;
3538
+ align-items: center;
3539
+ width: 100%;
3540
+ height: 100%;
3541
+ padding: 0 10px;
3542
+ box-sizing: border-box;
3543
+ position: relative;
3544
+ transition: border-color 0.3s;
3545
+ }
3546
+
3547
+ .required-marker {
3548
+ font-size: 12px;
3549
+ padding: 0 5px 0 0;
3550
+ color: red;
3551
+ vertical-align: middle;
3552
+ }
3553
+
3554
+ input {
3555
+ flex: 1;
3556
+ border: none;
3557
+ outline: none;
3558
+ background: transparent;
3559
+ height: 100%;
3560
+ padding: 0;
3561
+ margin: 0;
3562
+ }
3563
+ /*
3564
+ input::placeholder {
3565
+ color: #ccc;
3566
+ opacity: 1;
3567
+ } */
3568
+
3569
+ .dynamic-placeholder-input::placeholder {
3570
+ color: var(--placeholder-color, #999);
3571
+ opacity: 1;
3572
+ }
3573
+ .dynamic-placeholder-input::-webkit-input-placeholder {
3574
+ color: var(--placeholder-color, #999);
3575
+ }
3576
+ .dynamic-placeholder-input::-moz-placeholder {
3577
+ color: var(--placeholder-color, #999);
3578
+ opacity: 1;
3579
+ }
3580
+ .dynamic-placeholder-input:-ms-input-placeholder {
3581
+ color: var(--placeholder-color, #999);
3582
+ }#page-list .tip-cover {
3583
+ position: fixed;
3584
+ left: 0;
3585
+ top: 0;
3586
+ width: 100%;
3587
+ height: 100%;
3588
+ display: -ms-flexbox;
3589
+ display: flex;
3590
+ -ms-flex-align: center;
3591
+ align-items: center;
3592
+ -ms-flex-pack: center;
3593
+ justify-content: center;
3594
+ z-index: 999;
3595
+ background-color: rgba(0,0,0,.7)
3497
3596
  }
3498
3597
 
3499
- .animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY {
3500
- animation-duration: .75s
3598
+ #page-list .tip-cover .tip {
3599
+ width: 80%;
3600
+ max-width: 250px;
3601
+ padding: 10px;
3602
+ border-radius: 5px;
3603
+ background-color: #fff
3501
3604
  }
3502
3605
 
3503
- @keyframes bounce {
3504
- 0%, 20%, 53%, 80%, to {
3505
- transform: translateZ(0);
3506
- animation-timing-function: cubic-bezier(.215, .61, .355, 1);
3606
+ #page-list .tip-cover .tip-btn {
3607
+ display: block;
3608
+ margin: 25px auto;
3609
+ width: 120px;
3610
+ height: 30px;
3611
+ color: #fff;
3612
+ border-radius: 4px;
3613
+ text-align: center;
3614
+ font-size: 14px;
3615
+ line-height: 30px;
3616
+ background: #ed5566
3617
+ }
3618
+
3619
+ #page-list .tip-cover .tip-content {
3620
+ font-size: 14px;
3621
+ padding-top: 30px;
3622
+ }
3623
+
3624
+ .tip-cover {
3625
+ position: fixed;
3626
+ left: 0;
3627
+ top: 0;
3628
+ width: 100%;
3629
+ height: 100%;
3630
+ display: -ms-flexbox;
3631
+ display: flex;
3632
+ -ms-flex-align: center;
3633
+ align-items: center;
3634
+ -ms-flex-pack: center;
3635
+ justify-content: center;
3636
+ z-index: 999;
3637
+ background-color: rgba(0,0,0,.7)
3638
+ }
3639
+
3640
+ .tip-cover .tip {
3641
+ width: 80%;
3642
+ max-width: 250px;
3643
+ padding: 5px;
3644
+ border-radius: 3px;
3645
+ background-color: #fff
3646
+ }
3647
+
3648
+ .tip-cover .tip-btn {
3649
+ display: block;
3650
+ margin: 13px auto;
3651
+ width: 64px;
3652
+ height: 20px;
3653
+ color: #fff;
3654
+ border-radius: 4px;
3655
+ text-align: center;
3656
+ font-size: 14px;
3657
+ line-height: 20px;
3658
+ background: #ed5566;
3659
+ } @charset"UTF-8";.animated {
3660
+ animation-duration: 1s;
3661
+ animation-fill-mode: both
3662
+ }
3663
+
3664
+ .animated.infinite {
3665
+ animation-iteration-count: infinite
3666
+ }
3667
+
3668
+ .animated.hinge {
3669
+ animation-duration: 2s
3670
+ }
3671
+
3672
+ .animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY {
3673
+ animation-duration: .75s
3674
+ }
3675
+
3676
+ @keyframes bounce {
3677
+ 0%, 20%, 53%, 80%, to {
3678
+ transform: translateZ(0);
3679
+ animation-timing-function: cubic-bezier(.215, .61, .355, 1);
3507
3680
  }
3508
3681
 
3509
3682
  40%, 43% {
@@ -8369,183 +8542,201 @@ to {
8369
8542
  transform: translateX(0)
8370
8543
  }
8371
8544
  }
8372
- #page-list .tip-cover {
8373
- position: fixed;
8374
- left: 0;
8375
- top: 0;
8376
- width: 100%;
8377
- height: 100%;
8378
- display: -ms-flexbox;
8379
- display: flex;
8380
- -ms-flex-align: center;
8381
- align-items: center;
8382
- -ms-flex-pack: center;
8383
- justify-content: center;
8384
- z-index: 999;
8385
- background-color: rgba(0,0,0,.7)
8386
- }
8387
-
8388
- #page-list .tip-cover .tip {
8389
- width: 80%;
8390
- max-width: 250px;
8391
- padding: 10px;
8392
- border-radius: 5px;
8393
- background-color: #fff
8394
- }
8395
-
8396
- #page-list .tip-cover .tip-btn {
8397
- display: block;
8398
- margin: 25px auto;
8399
- width: 120px;
8400
- height: 30px;
8401
- color: #fff;
8402
- border-radius: 4px;
8403
- text-align: center;
8404
- font-size: 14px;
8405
- line-height: 30px;
8406
- background: #ed5566
8407
- }
8408
-
8409
- #page-list .tip-cover .tip-content {
8410
- font-size: 14px;
8411
- padding-top: 30px;
8412
- }
8413
-
8414
- .tip-cover {
8415
- position: fixed;
8416
- left: 0;
8417
- top: 0;
8418
- width: 100%;
8419
- height: 100%;
8420
- display: -ms-flexbox;
8421
- display: flex;
8422
- -ms-flex-align: center;
8423
- align-items: center;
8424
- -ms-flex-pack: center;
8425
- justify-content: center;
8426
- z-index: 999;
8427
- background-color: rgba(0,0,0,.7)
8428
- }
8429
-
8430
- .tip-cover .tip {
8431
- width: 80%;
8432
- max-width: 250px;
8433
- padding: 5px;
8434
- border-radius: 3px;
8435
- background-color: #fff
8436
- }
8437
-
8438
- .tip-cover .tip-btn {
8439
- display: block;
8440
- margin: 13px auto;
8441
- width: 64px;
8442
- height: 20px;
8443
- color: #fff;
8444
- border-radius: 4px;
8445
- text-align: center;
8446
- font-size: 14px;
8447
- line-height: 20px;
8448
- background: #ed5566;
8449
- } .form-submit {
8450
- cursor: pointer;
8451
- transition: all 0.2s;
8452
- outline: none;
8453
- border: none;
8454
- }
8455
-
8456
- .form-submit:hover {
8457
- opacity: 0.9;
8458
- transform: translateY(-1px);
8459
- }
8460
-
8461
- .form-submit:active {
8462
- opacity: 0.8;
8463
- transform: translateY(0);
8464
- }
8465
-
8466
- .form-submit:disabled {
8467
- opacity: 0.6;
8468
- cursor: not-allowed;
8469
- transform: none !important;
8470
- }
8471
-
8472
- .f-submit {
8473
- position: relative;
8474
- display: block
8475
- }
8476
-
8477
- .f-submit .ani-wrap {
8478
- width: 100%;
8479
- height: 100%;
8480
- padding: 10px;
8481
- overflow: hidden;
8482
- position: relative
8483
- }
8484
-
8485
- .f-submit .f-ovh {
8486
- position: absolute;
8487
- left: 50%;
8488
- top: 50%;
8489
- transform: translate(-50%,-50%)
8490
- }
8491
-
8492
- .form-submit:disabled {
8493
- opacity: 0.7;
8494
- cursor: not-allowed;
8495
- }.form-input {
8545
+ /* .ele-form {
8496
8546
  position: absolute;
8547
+ user-select: none;
8548
+ }
8549
+ */
8550
+ .f-single {
8551
+ cursor: pointer;
8497
8552
  }
8498
8553
 
8499
- .input-wrapper {
8554
+ .ani-wrap {
8555
+ position: relative;
8556
+ }
8557
+
8558
+ .f-single .ani-wrap .fs-tit {
8500
8559
  display: flex;
8560
+ padding: 0 5px;
8561
+ height: 40px;
8501
8562
  align-items: center;
8502
- width: 100%;
8503
- height: 100%;
8504
- padding: 0 10px;
8505
- box-sizing: border-box;
8506
- position: relative;
8507
- transition: border-color 0.3s;
8563
+ white-space: nowrap;
8564
+ overflow: hidden;
8565
+ text-overflow: ellipsis;
8566
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
8508
8567
  }
8509
8568
 
8510
- .required-marker {
8511
- font-size: 12px;
8569
+ .require {
8512
8570
  padding: 0 5px 0 0;
8513
8571
  color: red;
8514
8572
  vertical-align: middle;
8515
8573
  }
8516
8574
 
8517
- input {
8518
- flex: 1;
8519
- border: none;
8520
- outline: none;
8521
- background: transparent;
8522
- height: 100%;
8523
- padding: 0;
8575
+ .f-single ul {
8576
+ padding: 15px;
8524
8577
  margin: 0;
8578
+ list-style: none;
8525
8579
  }
8526
- /*
8527
- input::placeholder {
8528
- color: #ccc;
8529
- opacity: 1;
8530
- } */
8531
8580
 
8532
- .dynamic-placeholder-input::placeholder {
8533
- color: var(--placeholder-color, #999);
8534
- opacity: 1;
8535
- }
8536
- .dynamic-placeholder-input::-webkit-input-placeholder {
8537
- color: var(--placeholder-color, #999);
8538
- }
8539
- .dynamic-placeholder-input::-moz-placeholder {
8540
- color: var(--placeholder-color, #999);
8541
- opacity: 1;
8581
+ .f-single ul li {
8582
+ display: flex;
8583
+ align-items: center;
8584
+ margin-top: 12px;
8585
+ font-size: 0;
8542
8586
  }
8543
- .dynamic-placeholder-input:-ms-input-placeholder {
8544
- color: var(--placeholder-color, #999);
8545
- }/* .ele-form {
8546
- position: absolute;
8547
- user-select: none;
8548
- } */
8587
+
8588
+ .f-single ul li:first-child {
8589
+ margin-top: 0;
8590
+ }
8591
+
8592
+ .fs-circle {
8593
+ display: inline-block;
8594
+ width: 16px;
8595
+ height: 16px;
8596
+ border-radius: 50%;
8597
+ position: relative;
8598
+ transition: all 0.2s;
8599
+ }
8600
+
8601
+ .fs-circle.selected {
8602
+ background-color: #2687f1;
8603
+ border-color: #2687f1 !important;
8604
+ }
8605
+
8606
+ .fs-circle.selected::after {
8607
+ content: "";
8608
+ position: absolute;
8609
+ top: 3px;
8610
+ left: 3px;
8611
+ width: 8px;
8612
+ height: 8px;
8613
+ border-radius: 50%;
8614
+ background-color: white;
8615
+ }
8616
+
8617
+ .fs-txt {
8618
+ display: inline-block;
8619
+ width: calc(100% - 16px);
8620
+ padding-left: 8px;
8621
+ vertical-align: top;
8622
+ word-break: break-all;
8623
+ font-size: 14px;
8624
+ line-height: 1.2;
8625
+ }
8626
+
8627
+ .has-error .fs-tit {
8628
+ border-bottom-color: #ff4d4f;
8629
+ }
8630
+
8631
+ /* 错误提示样式 */
8632
+ .error-tip {
8633
+ position: fixed;
8634
+ left: 0;
8635
+ top: 0;
8636
+ width: 100%;
8637
+ height: 100%;
8638
+ z-index: 1000;
8639
+ }/* .ele-form {
8640
+ position: absolute;
8641
+ user-select: none;
8642
+ } */
8643
+
8644
+ .f-multiple {
8645
+ cursor: pointer;
8646
+ }
8647
+
8648
+ .ani-wrap {
8649
+ position: relative;
8650
+ }
8651
+
8652
+ .f-multiple .ani-wrap .fs-tit {
8653
+ display: flex;
8654
+ padding: 0 5px;
8655
+ height: 40px;
8656
+ align-items: center;
8657
+ white-space: nowrap;
8658
+ overflow: hidden;
8659
+ text-overflow: ellipsis;
8660
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
8661
+ }
8662
+
8663
+ .require {
8664
+ padding: 0 5px 0 0;
8665
+ color: red;
8666
+ vertical-align: middle;
8667
+ }
8668
+
8669
+ .f-multiple ul {
8670
+ padding: 15px;
8671
+ margin: 0;
8672
+ list-style: none;
8673
+ }
8674
+
8675
+ .f-multiple ul li {
8676
+ margin-top: 12px;
8677
+ font-size: 0;
8678
+ display: flex;
8679
+ align-items: center;
8680
+ cursor: pointer;
8681
+ }
8682
+
8683
+ .f-multiple ul li:first-child {
8684
+ margin-top: 0;
8685
+ }
8686
+
8687
+ .fs-circle {
8688
+ display: inline-block;
8689
+ width: 16px;
8690
+ height: 16px;
8691
+ border-radius: 50%;
8692
+ position: relative;
8693
+ transition: all 0.2s;
8694
+ }
8695
+
8696
+ .fs-circle.selected {
8697
+ background-color: #2687f1;
8698
+ border-color: #2687f1 !important;
8699
+ }
8700
+
8701
+ .fs-circle.selected::after {
8702
+ content: "";
8703
+ position: absolute;
8704
+ top: 3px;
8705
+ left: 3px;
8706
+ width: 8px;
8707
+ height: 8px;
8708
+ border-radius: 50%;
8709
+ background-color: white;
8710
+ }
8711
+
8712
+ .fs-txt {
8713
+ display: inline-block;
8714
+ width: calc(100% - 16px);
8715
+ padding-left: 8px;
8716
+ vertical-align: top;
8717
+ word-break: break-all;
8718
+ font-size: 14px;
8719
+ line-height: 1.2;
8720
+ }
8721
+
8722
+ .has-error .fs-tit {
8723
+ border-bottom-color: #ff4d4f;
8724
+ }
8725
+ .global.tel {
8726
+ width: 35px;
8727
+ height: 55px;
8728
+ border-radius: 50%;
8729
+ text-align: center;
8730
+ margin-bottom: 15px;
8731
+ border: 2px solid #fff;
8732
+ cursor: pointer;
8733
+ }
8734
+ .icon-dianhua:before { content: "\E60E"; }
8735
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
8736
+ .global.tel > span { font-size: 10px; line-height: 20px; display: block;}/* .ele-form {
8737
+ position: absolute;
8738
+ user-select: none;
8739
+ } */
8549
8740
 
8550
8741
  .f-select {
8551
8742
  cursor: pointer;
@@ -8640,627 +8831,1147 @@ cursor: not-allowed;
8640
8831
  width: 100%;
8641
8832
  height: 100%;
8642
8833
  z-index: 1000;
8643
- }/* .ele-form {
8644
- position: absolute;
8645
- user-select: none;
8646
- }
8647
- */
8648
- .f-single {
8649
- cursor: pointer;
8650
- }
8651
-
8652
- .ani-wrap {
8653
- position: relative;
8654
- }
8655
-
8656
- .f-single .ani-wrap .fs-tit {
8657
- display: flex;
8658
- padding: 0 5px;
8659
- height: 40px;
8660
- align-items: center;
8661
- white-space: nowrap;
8662
- overflow: hidden;
8663
- text-overflow: ellipsis;
8664
- border-bottom: 1px solid rgba(153, 153, 153, 1);
8665
- }
8666
-
8667
- .require {
8668
- padding: 0 5px 0 0;
8669
- color: red;
8670
- vertical-align: middle;
8671
- }
8672
-
8673
- .f-single ul {
8674
- padding: 15px;
8675
- margin: 0;
8676
- list-style: none;
8677
- }
8678
-
8679
- .f-single ul li {
8680
- display: flex;
8681
- align-items: center;
8682
- margin-top: 12px;
8683
- font-size: 0;
8684
- }
8685
-
8686
- .f-single ul li:first-child {
8687
- margin-top: 0;
8688
- }
8689
-
8690
- .fs-circle {
8691
- display: inline-block;
8692
- width: 16px;
8693
- height: 16px;
8694
- border-radius: 50%;
8695
- position: relative;
8696
- transition: all 0.2s;
8697
- }
8698
-
8699
- .fs-circle.selected {
8700
- background-color: #2687f1;
8701
- border-color: #2687f1 !important;
8702
- }
8703
-
8704
- .fs-circle.selected::after {
8705
- content: "";
8706
- position: absolute;
8707
- top: 3px;
8708
- left: 3px;
8709
- width: 8px;
8710
- height: 8px;
8711
- border-radius: 50%;
8712
- background-color: white;
8713
- }
8714
-
8715
- .fs-txt {
8716
- display: inline-block;
8717
- width: calc(100% - 16px);
8718
- padding-left: 8px;
8719
- vertical-align: top;
8720
- word-break: break-all;
8721
- font-size: 14px;
8722
- line-height: 1.2;
8723
8834
  }
8724
-
8725
- .has-error .fs-tit {
8726
- border-bottom-color: #ff4d4f;
8727
- }
8728
-
8729
- /* 错误提示样式 */
8730
- .error-tip {
8731
- position: fixed;
8732
- left: 0;
8733
- top: 0;
8734
- width: 100%;
8735
- height: 100%;
8736
- z-index: 1000;
8737
- }/* .ele-form {
8738
- position: absolute;
8739
- user-select: none;
8740
- } */
8741
-
8742
- .f-multiple {
8743
- cursor: pointer;
8835
+ .global.video {
8836
+ width: 35px;
8837
+ height: 55px;
8838
+ border-radius: 50%;
8839
+ text-align: center;
8840
+ margin-bottom: 5px;
8841
+ border: 2px solid #fff;
8842
+ cursor: pointer;
8843
+ }
8844
+ .icon-shipin2:before { content: "\E611"; }
8845
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
8846
+ .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
8847
+ }
8848
+
8849
+ .global.receipt {
8850
+ width: 35px;
8851
+ height: 55px;
8852
+ border-radius: 50%;
8853
+ text-align: center;
8854
+ margin-bottom: 5px;
8855
+ border: 2px solid #fff;
8856
+ cursor: pointer;
8857
+ }
8858
+ .icon-liuyan:before { content: "\E636"; }
8859
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
8860
+ .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }
8861
+ .global.map {
8862
+ width: 35px;
8863
+ height: 55px;
8864
+ border-radius: 50%;
8865
+ text-align: center;
8866
+ margin-bottom: 5px;
8867
+ border: 2px solid #fff;
8868
+ cursor: pointer;
8869
+ }
8870
+ .icon-daohang1:before { content: "\E612"; }
8871
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
8872
+ .global.map > span { font-size: 10px; line-height: 20px; display: block;}
8873
+ .icon-guanbi:before {
8874
+ content: "\E676";
8875
+ }
8876
+ .icon-liuyan:before {
8877
+ content: "\E636";
8878
+ }
8879
+ .icon-dianhua:before {
8880
+ content: "\E60E";
8881
+ }
8882
+ .icon-daohang1:before {
8883
+ content: "\E612";
8884
+ }
8885
+ .icon-shipin2:before {
8886
+ content: "\E611";
8887
+ }
8888
+ .icon-buoumaotubiao20:before {
8889
+ content: "\E614";
8890
+ }
8891
+
8892
+ /* 主按钮组样式 */
8893
+ #page-global {
8894
+ position: absolute;
8895
+ right: 10px; /* 0.26667rem ≈ 10px */
8896
+ bottom: 15%;
8897
+ z-index: 100;
8898
+ width: 35px; /* 0.93333rem ≈ 35px */
8899
+ }
8900
+
8901
+ #page-global .global {
8902
+ width: 35px;
8903
+ height: 55px; /* 1.46667rem ≈ 55px */
8904
+ border-radius: 50%;
8905
+ text-align: center;
8906
+ margin-bottom: 5px; /* 0.13333rem ≈ 5px */
8907
+ border-width: 0;
8908
+ }
8909
+
8910
+ #page-global .global.tel {
8911
+ /* margin-bottom: 15px; */
8912
+ }
8913
+
8914
+ #page-global .global.video span {
8915
+ position: relative;
8916
+ top: -4px; /* -0.10667rem ≈ -4px */
8917
+ }
8918
+
8919
+ #page-global .global .iconfont {
8920
+ font-size: 30px; /* 0.8rem ≈ 30px */
8921
+ color: #fff;
8922
+ text-shadow: 0 1px 3px rgba(0,0,0,.1); /* 0.02667rem ≈ 1px, 0.08rem ≈ 3px */
8923
+ }
8924
+
8925
+ #page-global .global .icon-bofang1 {
8926
+ margin-left: 3px; /* 0.08rem ≈ 3px */
8927
+ }
8928
+
8929
+ #page-global .global .icon-liuyan {
8930
+ position: relative;
8931
+ left: 1px; /* 0.02667rem ≈ 1px */
8932
+ font-size: 27px; /* 0.72rem ≈ 27px */
8933
+ }
8934
+
8935
+ #page-global .global>span {
8936
+ font-size: 10px; /* 0.32rem ≈ 12px */
8937
+ line-height: 20px; /* 0.53333rem ≈ 20px */
8938
+ text-shadow: 0 1px 1px rgba(0,0,0,.14); /* 0.02667rem ≈ 1px */
8939
+ display: block;
8940
+ }
8941
+
8942
+ /* 过渡动画 */
8943
+ .v-slide-enter-active,
8944
+ .v-slide-leave-active {
8945
+ transition: all 0.3s;
8946
+ }
8947
+
8948
+ .v-slide-enter,
8949
+ .v-slide-leave-to {
8950
+ transform: translate3d(100%,0,0);
8951
+ }
8952
+
8953
+ /* 回执表单样式 */
8954
+ #receipt-wrap {
8955
+ position: absolute;
8956
+ left: 0;
8957
+ top: 0;
8958
+ z-index: 103;
8959
+ width: 100%;
8960
+ height: 100%;
8961
+ background-color: rgba(0,0,0,.8);
8962
+ }
8963
+
8964
+ #receipt-wrap .icon-guanbi {
8965
+ position: absolute;
8966
+ right: 15px; /* 0.4rem ≈ 15px */
8967
+ top: 15px;
8968
+ padding: 10px; /* 0.26667rem ≈ 10px */
8969
+ font-size: 16px; /* 0.42667rem ≈ 16px */
8970
+ color: #bfbfbf;
8971
+ cursor: pointer;
8972
+ }
8973
+
8974
+ #receipt-wrap .r-tit {
8975
+ font-size: 26px; /* 0.69333rem ≈ 26px */
8976
+ color: #fff;
8977
+ text-align: center;
8978
+ padding-top: 92px; /* 2.45333rem ≈ 92px */
8979
+ }
8980
+
8981
+ #receipt-wrap .r-cont {
8982
+ width: 174px; /* 4.64rem ≈ 174px */
8983
+ margin: 0 auto;
8984
+ }
8985
+
8986
+ #receipt-wrap .r-cont,
8987
+ #receipt-wrap .r-list {
8988
+ -webkit-user-select: none;
8989
+ -moz-user-select: none;
8990
+ -ms-user-select: none;
8991
+ user-select: none;
8992
+ -webkit-tap-highlight-color: transparent;
8993
+ }
8994
+
8995
+ #receipt-wrap .r-list {
8996
+ margin-top: 50px; /* 1.33333rem ≈ 50px */
8997
+ }
8998
+
8999
+ #receipt-wrap .r-list li {
9000
+ width: 100%;
9001
+ height: 40px; /* 1.06667rem ≈ 40px */
9002
+ line-height: 40px;
9003
+ }
9004
+
9005
+ #receipt-wrap .r-list li.r-submit {
9006
+ height: auto;
9007
+ line-height: 1;
9008
+ margin-top: 30px; /* 0.8rem ≈ 30px */
9009
+ border-bottom: 0;
9010
+ }
9011
+
9012
+ #receipt-wrap .r-list li.r-which {
9013
+ position: relative;
9014
+ }
9015
+
9016
+ #receipt-wrap .r-list li.r-which:after {
9017
+ display: block;
9018
+ content: "";
9019
+ position: absolute;
9020
+ top: 50%;
9021
+ left: 50%;
9022
+ margin-top: 0px; /* -0.08rem ≈ -3px */
9023
+ margin-left: 25px; /* 0.53333rem ≈ 20px */
9024
+ width: 0;
9025
+ height: 0;
9026
+ border-top: 6px solid #bfbfbf; /* 0.16rem ≈ 6px */
9027
+ border-left: 4px solid transparent; /* 0.10667rem ≈ 4px */
9028
+ border-right: 4px solid transparent;
9029
+ }
9030
+ #receipt-wrap .r-list li {
9031
+ width: 100%;
9032
+ height: 40px;
9033
+ line-height: 40px;
9034
+ border-bottom: 1px solid #ffffff; /* 0.02667rem ≈ 1px */
9035
+ }
9036
+
9037
+ #receipt-wrap .r-list li .r-input {
9038
+ display: block;
9039
+ width: 100%;
9040
+ height: 40px;
9041
+ border-bottom: 1px solid #c8c8c8; /* 0.02667rem ≈ 1px */
9042
+ font-size: 14px; /* 0.37333rem ≈ 14px */
9043
+ color: #bfbfbf;
9044
+ text-align: center;
9045
+ border-radius: 0;
9046
+ -webkit-appearance: none;
9047
+ -webkit-tap-highlight-color: transparent;
9048
+ background: transparent;
9049
+ outline: none;
9050
+ border: none;
9051
+ }
9052
+
9053
+ #receipt-wrap .r-list li .r-input:disabled {
9054
+ color: #bfbfbf;
9055
+ -webkit-appearance: none;
9056
+ opacity: 1;
9057
+ }
9058
+
9059
+ #receipt-wrap .r-list li .r-input:disabled::-webkit-input-placeholder {
9060
+ color: #bfbfbf;
9061
+ }
9062
+
9063
+ #receipt-wrap .r-list li .r-input::-webkit-input-placeholder {
9064
+ color: #bfbfbf;
9065
+ opacity: 1;
9066
+ }
9067
+
9068
+ #receipt-wrap .r-list li .r-btn {
9069
+ width: 100%;
9070
+ height: 30px; /* 0.8rem ≈ 30px */
9071
+ line-height: 30px;
9072
+ color: #fff;
9073
+ background-color: #ff4562;
9074
+ border-radius: 20px; /* 0.53333rem ≈ 20px */
9075
+ outline: 0;
9076
+ font-size: 14px;
9077
+ border: none;
9078
+ cursor: pointer;
9079
+ }
9080
+
9081
+ /* 提示信息样式 */
9082
+ #receipt-wrap .tip-cover {
9083
+ position: fixed;
9084
+ left: 0;
9085
+ top: 0;
9086
+ width: 100%;
9087
+ height: 100%;
9088
+ display: flex;
9089
+ align-items: center;
9090
+ justify-content: center;
9091
+ z-index: 999;
9092
+ background-color: rgba(0,0,0,.7);
9093
+ }
9094
+
9095
+ #receipt-wrap .tip-cover .tip {
9096
+ width: 80%;
9097
+ max-width: 250px; /* 6.66667rem ≈ 250px */
9098
+ padding: 10px;
9099
+ border-radius: 5px; /* 0.13333rem ≈ 5px */
9100
+ background-color: #fff;
9101
+ }
9102
+
9103
+ #receipt-wrap .tip-cover .tip-btn {
9104
+ display: block;
9105
+ margin: 25px auto; /* 0.66667rem ≈ 25px */
9106
+ width: 120px; /* 3.2rem ≈ 120px */
9107
+ height: 30px;
9108
+ color: #fff;
9109
+ border-radius: 4px; /* 0.10667rem ≈ 4px */
9110
+ text-align: center;
9111
+ font-size: 14px;
9112
+ line-height: 30px;
9113
+ background: #ed5566;
9114
+ border: none;
9115
+ cursor: pointer;
9116
+ }
9117
+
9118
+ #receipt-wrap .tip-cover .tip-content {
9119
+ font-size: 14px;
9120
+ padding-top: 30px; /* 0.8rem ≈ 30px */
9121
+ text-align: center;
9122
+ }
9123
+
9124
+ /* 选择器样式 */
9125
+ .which-select {
9126
+ top: 0;
9127
+ z-index: 110;
9128
+ height: 100%;
9129
+ background-color: rgba(0,0,0,.5);
9130
+ }
9131
+
9132
+ .which-select,
9133
+ .which-select ul {
9134
+ position: absolute;
9135
+ left: 0;
9136
+ width: 100%;
9137
+ }
9138
+
9139
+ .which-select ul {
9140
+ bottom: 0;
9141
+ transition: transform 0.3s ease-out;
9142
+ margin: 0;
9143
+ padding: 0;
9144
+ list-style: none;
9145
+ }
9146
+
9147
+ .which-select ul.hide {
9148
+ transform: translateY(100%);
9149
+ }
9150
+
9151
+ .which-select ul li {
9152
+ width: 100%;
9153
+ height: 45px; /* 1.2rem ≈ 45px */
9154
+ line-height: 45px;
9155
+ background-color: #f0f0f0;
9156
+ border-bottom: 1px solid #e0e0e0;
9157
+ text-align: center;
9158
+ cursor: pointer;
9159
+ }
9160
+
9161
+ .which-select ul li:last-child {
9162
+ line-height: 40px;
9163
+ height: auto;
9164
+ padding-bottom: 15px;
9165
+ }
9166
+
9167
+ /* 视频播放器样式 */
9168
+ .global-v {
9169
+ position: fixed;
9170
+ top: 0;
9171
+ left: 0;
9172
+ width: 100%;
9173
+ height: 100%;
9174
+ background: rgba(0,0,0,.7);
9175
+ z-index: 101;
9176
+ transition: all 0.3s;
9177
+ }
9178
+
9179
+ .global-v.gv-show {
9180
+ transform: translateX(-100%);
9181
+ }
9182
+
9183
+ .global-v #close-gvideo {
9184
+ position: absolute;
9185
+ left: 13px; /* 0.34667rem ≈ 13px */
9186
+ top: 13px;
9187
+ z-index: 10;
9188
+ color: #fff;
9189
+ cursor: pointer;
9190
+ }
9191
+
9192
+ .global-v #close-gvideo .icon-buoumaotubiao20 {
9193
+ font-size: 22px; /* 0.58667rem ≈ 22px */
9194
+ font-weight: 700;
9195
+ }
9196
+
9197
+ .global-v .global-v-show {
9198
+ position: relative;
9199
+ z-index: 1;
9200
+ width: 100%;
9201
+ height: 100%;
9202
+ }
9203
+
9204
+ .global-v ::v-deep .global-v-show iframe {
9205
+ position: absolute;
9206
+ left: 0;
9207
+ top: 50%;
9208
+ transform: translateY(-60%);
9209
+ min-height: 45%;
9210
+ max-height: 100%;
9211
+ width: 100%;
9212
+ }
9213
+
9214
+ /* 缩放动画 */
9215
+ .scale-enter-active,
9216
+ .scale-leave-active {
9217
+ transition: 0.2s;
9218
+ transform-origin: center center;
9219
+ }
9220
+
9221
+ .scale-enter,
9222
+ .scale-leave-to {
9223
+ opacity: 0;
9224
+ transform: scale(1.1);
9225
+ }
9226
+
9227
+ .scale-enter-to,
9228
+ .scale-leave {
9229
+ opacity: 1;
9230
+ transform: scale(1);
9231
+ }
9232
+ /* 新增 toast 样式 */
9233
+ .mint-toast {
9234
+ position: fixed;
9235
+ top: 50%;
9236
+ left: 50%;
9237
+ transform: translate(-50%, -50%);
9238
+ display: flex;
9239
+ flex-direction: column;
9240
+ align-items: center;
9241
+ justify-content: center;
9242
+ min-width: 90px; /* 2.4rem ≈ 90px */
9243
+ max-width: 180px; /* 4.8rem ≈ 180px */
9244
+ height: 90px;
9245
+ padding: 8px !important; /* 0.21333rem ≈ 8px */
9246
+ background-color: rgba(0, 0, 0, 0.7);
9247
+ border-radius: 8px;
9248
+ z-index: 2000;
9249
+ color: #fff;
9250
+ }
9251
+
9252
+ .mint-toast-text {
9253
+ font-size: 12px; /* 0.32rem ≈ 12px */
9254
+ padding-top: 0 !important;
9255
+ }
9256
+
9257
+ /* 新增图标样式 */
9258
+ .icon-duihao:before {
9259
+ content: "\E637";
9260
+ }
9261
+
9262
+ .icon-cuowu2:before {
9263
+ content: "\E65E";
9264
+ color: #F44336; /* 失败的红色 */
9265
+ }
9266
+ /* ===== 送呈(启呈)运行时样式 ===== */
9267
+ #invite {
9268
+ position: absolute;
9269
+ left: 0;
9270
+ top: 0;
9271
+ bottom: 0;
9272
+ right: 0;
9273
+ z-index: 104;
9274
+ overflow: hidden;
9275
+ background-color: transparent;
9276
+ cursor: pointer;
9277
+ }
9278
+
9279
+ /* 编辑器 iframe 预览 */
9280
+ #invite.uni-invite--preview {
9281
+ position: absolute;
9282
+ left: 0;
9283
+ top: 0;
9284
+ bottom: 0;
9285
+ right: 0;
9286
+ transform: none;
9287
+ max-width: none;
9288
+ cursor: default;
9289
+ }
9290
+
9291
+ /* ---------- type1 ---------- */
9292
+ #invite .type1 {
9293
+ width: 100%;
9294
+ height: 100%;
9295
+ position: relative;
9296
+ }
9297
+
9298
+ #invite .type1 .img1 {
9299
+ width: 100%;
9300
+ height: 100%;
9301
+ position: absolute;
9302
+ top: 0;
9303
+ left: 0;
9304
+ object-fit: cover;
9305
+ }
9306
+
9307
+ #invite .type1 .content-center {
9308
+ width: 8.53333rem;
9309
+ height: 5.76rem;
9310
+ position: absolute;
9311
+ top: 50%;
9312
+ left: 50%;
9313
+ transform: translate(-50%, -50%);
9314
+ }
9315
+
9316
+ #invite .type1 .content-center .bottom-ani,
9317
+ #invite .type1 .content-center img {
9318
+ width: 100%;
9319
+ height: 100%;
9320
+ position: absolute;
9321
+ top: 0;
9322
+ left: 0;
9323
+ }
9324
+
9325
+ #invite .type1 .content-center .bottom-ani {
9326
+ transform-origin: bottom center;
9327
+ transform-style: preserve-3d;
9328
+ }
9329
+
9330
+ #invite .type1 .content-center .bottom-ani .img3 {
9331
+ width: 100%;
9332
+ height: 100%;
9333
+ top: 0;
9334
+ left: 0;
9335
+ transform-origin: bottom center;
9336
+ object-fit: contain;
9337
+ }
9338
+
9339
+ #invite .type1 .content-center .bottom-ani .content {
9340
+ font-size: 0.32rem;
9341
+ position: absolute;
9342
+ top: 4.8rem;
9343
+ left: 50%;
9344
+ transform: translateX(-50%);
9345
+ backface-visibility: hidden;
9346
+ white-space: nowrap;
9347
+ }
9348
+
9349
+ #invite .type1 .content-center .top-ani {
9350
+ position: absolute;
9351
+ width: 100%;
9352
+ height: 100%;
9353
+ top: 0;
9354
+ left: 0;
9355
+ transform-origin: top center;
9356
+ transform-style: preserve-3d;
9357
+ }
9358
+
9359
+ #invite .type1 .content-center .top-ani .title {
9360
+ font-size: 0.53333rem;
9361
+ font-weight: 900;
9362
+ left: 0.90667rem;
9363
+ }
9364
+
9365
+ #invite .type1 .content-center .top-ani .name,
9366
+ #invite .type1 .content-center .top-ani .title {
9367
+ position: absolute;
9368
+ height: 0.64rem;
9369
+ top: 1.2rem;
9370
+ display: flex;
9371
+ align-items: center;
9372
+ justify-content: center;
9373
+ backface-visibility: hidden;
9374
+ white-space: nowrap;
9375
+ }
9376
+
9377
+ #invite .type1 .content-center .top-ani .name {
9378
+ padding: 0 0.10667rem;
9379
+ border-bottom: 0.02667rem solid #ffe5c7;
9380
+ border-top: 0.02667rem solid #ffe5c7;
9381
+ font-size: 0.32rem;
9382
+ right: 0.90667rem;
9383
+ }
9384
+
9385
+ #invite .type1 .content-center .top-ani .img5 {
9386
+ backface-visibility: hidden;
9387
+ }
9388
+
9389
+ #invite .type1 .content-center .img6 {
9390
+ width: 100%;
9391
+ height: 2.13333rem;
9392
+ top: 1.81333rem;
9393
+ animation: invite-breathing 2s linear infinite;
9394
+ }
9395
+
9396
+ #invite .type1.active {
9397
+ animation: invite-vanish 1s linear 1.8s;
9398
+ animation-fill-mode: both;
9399
+ }
9400
+
9401
+ #invite .type1.active .bottom-ani {
9402
+ animation: invite-bottomOpen 1.2s linear 0.6s;
9403
+ animation-fill-mode: both;
9404
+ }
9405
+
9406
+ #invite .type1.active .top-ani {
9407
+ animation: invite-topOpen 1.2s linear 0.5s;
9408
+ animation-fill-mode: both;
9409
+ }
9410
+
9411
+ #invite .type1.active .img6 {
9412
+ animation: invite-vanish 0.5s linear;
9413
+ animation-fill-mode: both;
9414
+ }
9415
+
9416
+ /* ---------- type2(默认) ---------- */
9417
+ #invite .type2 {
9418
+ width: 100%;
9419
+ height: 100%;
9420
+ position: relative;
9421
+ }
9422
+
9423
+ #invite .type2 .img1,
9424
+ #invite .type2 .top-ani {
9425
+ width: 100%;
9426
+ height: 100%;
9427
+ position: absolute;
9428
+ top: 0;
9429
+ left: 0;
9430
+ }
9431
+
9432
+ #invite .type2 .img1 {
9433
+ object-fit: cover;
9434
+ }
9435
+
9436
+ #invite .type2 .top-ani {
9437
+ transform-origin: top center;
9438
+ transform-style: preserve-3d;
9439
+ }
9440
+
9441
+ #invite .type2 .top-ani .img2 {
9442
+ width: 100%;
9443
+ position: absolute;
9444
+ top: 0;
9445
+ left: 0;
9446
+ }
9447
+
9448
+ #invite .type2 .top-ani .title {
9449
+ font-size: 1.12rem;
9450
+ font-weight: 900;
9451
+ position: absolute;
9452
+ top: 1.49333rem;
9453
+ left: 50%;
9454
+ transform: translateX(-50%);
9455
+ display: flex;
9456
+ flex-flow: column;
9457
+ align-items: center;
9458
+ }
9459
+
9460
+ #invite .type2 .top-ani .title span {
9461
+ display: block;
9462
+ }
9463
+
9464
+ #invite .type2 .top-ani .divider {
9465
+ width: 2.93333rem;
9466
+ position: absolute;
9467
+ top: 5.06667rem;
9468
+ left: 50%;
9469
+ transform: translateX(-50%);
8744
9470
  }
8745
9471
 
8746
- .ani-wrap {
8747
- position: relative;
9472
+ #invite .type2 .top-ani .name {
9473
+ font-size: 0.50667rem;
9474
+ top: 5.81333rem;
8748
9475
  }
8749
9476
 
8750
- .f-multiple .ani-wrap .fs-tit {
8751
- display: flex;
8752
- padding: 0 5px;
8753
- height: 40px;
8754
- align-items: center;
9477
+ #invite .type2 .content,
9478
+ #invite .type2 .top-ani .name {
9479
+ position: absolute;
9480
+ left: 50%;
9481
+ transform: translateX(-50%);
8755
9482
  white-space: nowrap;
8756
- overflow: hidden;
8757
- text-overflow: ellipsis;
8758
- border-bottom: 1px solid rgba(153, 153, 153, 1);
8759
9483
  }
8760
9484
 
8761
- .require {
8762
- padding: 0 5px 0 0;
8763
- color: red;
8764
- vertical-align: middle;
9485
+ #invite .type2 .content {
9486
+ width: 100%;
9487
+ bottom: 1.73333rem;
9488
+ text-align: center;
9489
+ z-index: 2;
8765
9490
  }
8766
9491
 
8767
- .f-multiple ul {
8768
- padding: 15px;
8769
- margin: 0;
8770
- list-style: none;
9492
+ #invite .type2 .img3 {
9493
+ width: 100%;
9494
+ height: 3.73333rem;
9495
+ position: absolute;
9496
+ top: 7.46667rem;
9497
+ left: 0;
9498
+ z-index: 5;
9499
+ object-fit: contain;
9500
+ pointer-events: none;
9501
+ animation: invite-breathing 2s linear infinite;
8771
9502
  }
8772
9503
 
8773
- .f-multiple ul li {
8774
- margin-top: 12px;
8775
- font-size: 0;
8776
- display: flex;
8777
- align-items: center;
8778
- cursor: pointer;
9504
+ #invite .type2.active {
9505
+ animation: invite-vanish 1s linear 1.2s;
9506
+ animation-fill-mode: both;
8779
9507
  }
8780
9508
 
8781
- .f-multiple ul li:first-child {
8782
- margin-top: 0;
9509
+ #invite .type2.active .top-ani {
9510
+ animation: invite-topOpen 1.2s linear 0.5s;
9511
+ animation-fill-mode: both;
8783
9512
  }
8784
9513
 
8785
- .fs-circle {
8786
- display: inline-block;
8787
- width: 16px;
8788
- height: 16px;
8789
- border-radius: 50%;
8790
- position: relative;
8791
- transition: all 0.2s;
9514
+ #invite .type2.active .img3 {
9515
+ animation: invite-vanish 0.5s linear;
9516
+ animation-fill-mode: both;
8792
9517
  }
8793
9518
 
8794
- .fs-circle.selected {
8795
- background-color: #2687f1;
8796
- border-color: #2687f1 !important;
9519
+ /* ---------- type3 ---------- */
9520
+ #invite .type3 {
9521
+ width: 100%;
9522
+ height: 100%;
9523
+ position: relative;
8797
9524
  }
8798
9525
 
8799
- .fs-circle.selected::after {
8800
- content: "";
9526
+ #invite .type3 .img1,
9527
+ #invite .type3 .right-ani {
9528
+ width: 100%;
9529
+ height: 100%;
8801
9530
  position: absolute;
8802
- top: 3px;
8803
- left: 3px;
8804
- width: 8px;
8805
- height: 8px;
8806
- border-radius: 50%;
8807
- background-color: white;
9531
+ left: 0;
9532
+ top: 0;
8808
9533
  }
8809
9534
 
8810
- .fs-txt {
8811
- display: inline-block;
8812
- width: calc(100% - 16px);
8813
- padding-left: 8px;
8814
- vertical-align: top;
8815
- word-break: break-all;
8816
- font-size: 14px;
8817
- line-height: 1.2;
9535
+ #invite .type3 .img1 {
9536
+ object-fit: cover;
8818
9537
  }
8819
9538
 
8820
- .has-error .fs-tit {
8821
- border-bottom-color: #ff4d4f;
8822
- }
8823
- .icon-guanbi:before {
8824
- content: "\E676";
8825
- }
8826
- .icon-liuyan:before {
8827
- content: "\E636";
8828
- }
8829
- .icon-dianhua:before {
8830
- content: "\E60E";
8831
- }
8832
- .icon-daohang1:before {
8833
- content: "\E612";
9539
+ #invite .type3 .right-ani {
9540
+ transform-origin: right center;
9541
+ transform-style: preserve-3d;
8834
9542
  }
8835
- .icon-shipin2:before {
8836
- content: "\E611";
9543
+
9544
+ #invite .type3 .right-ani .img2 {
9545
+ width: 100%;
9546
+ height: 100%;
9547
+ position: absolute;
9548
+ left: 0;
9549
+ object-fit: cover;
8837
9550
  }
8838
- .icon-buoumaotubiao20:before {
8839
- content: "\E614";
9551
+
9552
+ #invite .type3 .right-ani .title {
9553
+ font-size: 1.12rem;
9554
+ font-weight: 900;
9555
+ top: 9%;
9556
+ letter-spacing: 0.26667rem;
8840
9557
  }
8841
9558
 
8842
- /* 主按钮组样式 */
8843
- #page-global {
9559
+ #invite .type3 .right-ani .name,
9560
+ #invite .type3 .right-ani .title {
8844
9561
  position: absolute;
8845
- right: 10px; /* 0.26667rem ≈ 10px */
8846
- bottom: 15%;
8847
- z-index: 100;
8848
- width: 35px; /* 0.93333rem ≈ 35px */
9562
+ writing-mode: vertical-lr;
9563
+ text-orientation: upright;
9564
+ right: 1.22667rem;
9565
+ width: 1.12rem;
8849
9566
  }
8850
9567
 
8851
- #page-global .global {
8852
- width: 35px;
8853
- height: 55px; /* 1.46667rem ≈ 55px */
8854
- border-radius: 50%;
9568
+ #invite .type3 .right-ani .name {
9569
+ font-size: 0.56rem;
9570
+ bottom: 9%;
9571
+ letter-spacing: 0.13333rem;
8855
9572
  text-align: center;
8856
- margin-bottom: 5px; /* 0.13333rem ≈ 5px */
8857
- border-width: 0;
9573
+ line-height: 1.12rem;
9574
+ white-space: nowrap;
9575
+ padding: 0.18667rem 0;
9576
+ border-left: 0.02667rem solid rgba(255, 229, 199, 0.5);
9577
+ border-right: 0.02667rem solid rgba(255, 229, 199, 0.5);
8858
9578
  }
8859
9579
 
8860
- #page-global .global.tel {
8861
- /* margin-bottom: 15px; */
9580
+ #invite .type3 .right-ani .content {
9581
+ font-size: 0.4rem;
9582
+ letter-spacing: 0.13333rem;
9583
+ position: absolute;
9584
+ writing-mode: vertical-lr;
9585
+ text-orientation: upright;
9586
+ right: 3.36rem;
9587
+ top: 50%;
9588
+ white-space: nowrap;
9589
+ transform: translateY(-50%);
8862
9590
  }
8863
9591
 
8864
- #page-global .global.video span {
8865
- position: relative;
8866
- top: -4px; /* -0.10667rem ≈ -4px */
9592
+ #invite .type3 .img3 {
9593
+ width: 100%;
9594
+ height: 3.73333rem;
9595
+ top: 50%;
9596
+ left: 0;
9597
+ margin-top: -1.86667rem;
9598
+ position: absolute;
9599
+ transform-origin: 25% center;
9600
+ animation: invite-breathing 2s linear infinite;
8867
9601
  }
8868
9602
 
8869
- #page-global .global .iconfont {
8870
- font-size: 30px; /* 0.8rem ≈ 30px */
8871
- color: #fff;
8872
- text-shadow: 0 1px 3px rgba(0,0,0,.1); /* 0.02667rem ≈ 1px, 0.08rem ≈ 3px */
9603
+ #invite .type3.active {
9604
+ animation: invite-vanish 1s linear 1.4s;
9605
+ animation-fill-mode: both;
8873
9606
  }
8874
9607
 
8875
- #page-global .global .icon-bofang1 {
8876
- margin-left: 3px; /* 0.08rem ≈ 3px */
9608
+ #invite .type3.active .right-ani {
9609
+ animation: invite-rightOpen 1.2s linear 0.5s;
9610
+ animation-fill-mode: both;
8877
9611
  }
8878
9612
 
8879
- #page-global .global .icon-liuyan {
9613
+ #invite .type3.active .img3 {
9614
+ animation: invite-vanish 0.5s linear;
9615
+ animation-fill-mode: both;
9616
+ }
9617
+
9618
+ /* ---------- type4 ---------- */
9619
+ #invite .type4 {
9620
+ width: 100%;
9621
+ height: 100%;
8880
9622
  position: relative;
8881
- left: 1px; /* 0.02667rem ≈ 1px */
8882
- font-size: 27px; /* 0.72rem ≈ 27px */
8883
9623
  }
8884
9624
 
8885
- #page-global .global>span {
8886
- font-size: 10px; /* 0.32rem ≈ 12px */
8887
- line-height: 20px; /* 0.53333rem ≈ 20px */
8888
- text-shadow: 0 1px 1px rgba(0,0,0,.14); /* 0.02667rem ≈ 1px */
8889
- display: block;
9625
+ #invite .type4 .img1,
9626
+ #invite .type4 .img2 {
9627
+ width: 100%;
9628
+ height: 100%;
9629
+ position: absolute;
9630
+ top: 0;
9631
+ left: 0;
9632
+ object-fit: cover;
8890
9633
  }
8891
9634
 
8892
- /* 过渡动画 */
8893
- .v-slide-enter-active,
8894
- .v-slide-leave-active {
8895
- transition: all 0.3s;
9635
+ #invite .type4 .img2 {
9636
+ transform-origin: left center;
9637
+ transform-style: preserve-3d;
8896
9638
  }
8897
9639
 
8898
- .v-slide-enter,
8899
- .v-slide-leave-to {
8900
- transform: translate3d(100%,0,0);
9640
+ #invite .type4 .right-ani {
9641
+ transform-origin: right center;
9642
+ transform-style: preserve-3d;
8901
9643
  }
8902
9644
 
8903
- /* 回执表单样式 */
8904
- #receipt-wrap {
9645
+ #invite .type4 .right-ani,
9646
+ #invite .type4 .right-ani .img3 {
8905
9647
  position: absolute;
8906
- left: 0;
8907
- top: 0;
8908
- z-index: 103;
8909
9648
  width: 100%;
8910
9649
  height: 100%;
8911
- background-color: rgba(0,0,0,.8);
9650
+ top: 0;
9651
+ left: 0;
8912
9652
  }
8913
9653
 
8914
- #receipt-wrap .icon-guanbi {
8915
- position: absolute;
8916
- right: 15px; /* 0.4rem ≈ 15px */
8917
- top: 15px;
8918
- padding: 10px; /* 0.26667rem ≈ 10px */
8919
- font-size: 16px; /* 0.42667rem ≈ 16px */
8920
- color: #bfbfbf;
8921
- cursor: pointer;
9654
+ #invite .type4 .right-ani .img3 {
9655
+ object-fit: cover;
8922
9656
  }
8923
9657
 
8924
- #receipt-wrap .r-tit {
8925
- font-size: 26px; /* 0.69333rem ≈ 26px */
8926
- color: #fff;
8927
- text-align: center;
8928
- padding-top: 92px; /* 2.45333rem ≈ 92px */
9658
+ #invite .type4 .right-ani .title {
9659
+ font-size: 1.12rem;
9660
+ font-weight: 900;
9661
+ top: 9%;
9662
+ letter-spacing: 0.26667rem;
8929
9663
  }
8930
9664
 
8931
- #receipt-wrap .r-cont {
8932
- width: 174px; /* 4.64rem ≈ 174px */
8933
- margin: 0 auto;
9665
+ #invite .type4 .right-ani .name,
9666
+ #invite .type4 .right-ani .title {
9667
+ position: absolute;
9668
+ writing-mode: vertical-lr;
9669
+ text-orientation: upright;
9670
+ right: 1.22667rem;
9671
+ width: 1.12rem;
8934
9672
  }
8935
9673
 
8936
- #receipt-wrap .r-cont,
8937
- #receipt-wrap .r-list {
8938
- -webkit-user-select: none;
8939
- -moz-user-select: none;
8940
- -ms-user-select: none;
8941
- user-select: none;
8942
- -webkit-tap-highlight-color: transparent;
9674
+ #invite .type4 .right-ani .name {
9675
+ font-size: 0.56rem;
9676
+ bottom: 9%;
9677
+ letter-spacing: 0.13333rem;
9678
+ text-align: center;
9679
+ line-height: 1.12rem;
9680
+ padding: 0.18667rem 0;
9681
+ white-space: nowrap;
9682
+ border-left: 0.02667rem solid rgba(255, 229, 199, 0.5);
9683
+ border-right: 0.02667rem solid rgba(255, 229, 199, 0.5);
8943
9684
  }
8944
9685
 
8945
- #receipt-wrap .r-list {
8946
- margin-top: 50px; /* 1.33333rem ≈ 50px */
9686
+ #invite .type4 .right-ani .content {
9687
+ font-size: 0.4rem;
9688
+ letter-spacing: 0.13333rem;
9689
+ position: absolute;
9690
+ writing-mode: vertical-lr;
9691
+ text-orientation: upright;
9692
+ right: 3.36rem;
9693
+ top: 50%;
9694
+ white-space: nowrap;
9695
+ transform: translateY(-50%);
8947
9696
  }
8948
9697
 
8949
- #receipt-wrap .r-list li {
9698
+ #invite .type4 .img4 {
8950
9699
  width: 100%;
8951
- height: 40px; /* 1.06667rem ≈ 40px */
8952
- line-height: 40px;
9700
+ height: 3.73333rem;
9701
+ top: 50%;
9702
+ left: 0;
9703
+ margin-top: -1.86667rem;
9704
+ position: absolute;
9705
+ transform-origin: 30% center;
9706
+ animation: invite-breathing 2s linear infinite;
8953
9707
  }
8954
9708
 
8955
- #receipt-wrap .r-list li.r-submit {
8956
- height: auto;
8957
- line-height: 1;
8958
- margin-top: 30px; /* 0.8rem ≈ 30px */
8959
- border-bottom: 0;
9709
+ #invite .type4.active {
9710
+ animation: invite-vanish 1s linear 1.4s;
9711
+ animation-fill-mode: both;
8960
9712
  }
8961
9713
 
8962
- #receipt-wrap .r-list li.r-which {
8963
- position: relative;
9714
+ #invite .type4.active .img2 {
9715
+ animation: invite-leftOpen 1.2s linear 0.6s;
9716
+ animation-fill-mode: both;
8964
9717
  }
8965
9718
 
8966
- #receipt-wrap .r-list li.r-which:after {
8967
- display: block;
8968
- content: "";
8969
- position: absolute;
8970
- top: 50%;
8971
- left: 50%;
8972
- margin-top: 0px; /* -0.08rem ≈ -3px */
8973
- margin-left: 25px; /* 0.53333rem ≈ 20px */
8974
- width: 0;
8975
- height: 0;
8976
- border-top: 6px solid #bfbfbf; /* 0.16rem ≈ 6px */
8977
- border-left: 4px solid transparent; /* 0.10667rem ≈ 4px */
8978
- border-right: 4px solid transparent;
8979
- }
8980
- #receipt-wrap .r-list li {
8981
- width: 100%;
8982
- height: 40px;
8983
- line-height: 40px;
8984
- border-bottom: 1px solid #ffffff; /* 0.02667rem ≈ 1px */
9719
+ #invite .type4.active .right-ani {
9720
+ animation: invite-rightOpen 1.2s linear 0.5s;
9721
+ animation-fill-mode: both;
8985
9722
  }
8986
9723
 
8987
- #receipt-wrap .r-list li .r-input {
8988
- display: block;
8989
- width: 100%;
8990
- height: 40px;
8991
- border-bottom: 1px solid #c8c8c8; /* 0.02667rem ≈ 1px */
8992
- font-size: 14px; /* 0.37333rem ≈ 14px */
8993
- color: #bfbfbf;
8994
- text-align: center;
8995
- border-radius: 0;
8996
- -webkit-appearance: none;
8997
- -webkit-tap-highlight-color: transparent;
8998
- background: transparent;
8999
- outline: none;
9000
- border: none;
9724
+ #invite .type4.active .img4 {
9725
+ animation: invite-vanish 0.5s linear;
9726
+ animation-fill-mode: both;
9001
9727
  }
9002
9728
 
9003
- #receipt-wrap .r-list li .r-input:disabled {
9004
- color: #bfbfbf;
9005
- -webkit-appearance: none;
9006
- opacity: 1;
9729
+ /* ---------- type5 ---------- */
9730
+ #invite .type5 {
9731
+ width: 100%;
9732
+ height: 100%;
9733
+ position: relative;
9007
9734
  }
9008
9735
 
9009
- #receipt-wrap .r-list li .r-input:disabled::-webkit-input-placeholder {
9010
- color: #bfbfbf;
9736
+ #invite .type5 .img1 {
9737
+ width: 100%;
9738
+ height: 100%;
9739
+ position: absolute;
9740
+ top: 0;
9741
+ left: 0;
9742
+ object-fit: cover;
9011
9743
  }
9012
9744
 
9013
- #receipt-wrap .r-list li .r-input::-webkit-input-placeholder {
9014
- color: #bfbfbf;
9015
- opacity: 1;
9745
+ #invite .type5 .content-center {
9746
+ position: absolute;
9747
+ left: 50%;
9748
+ top: 4.08rem;
9749
+ transform: translateX(-50%);
9750
+ width: 8.98667rem;
9751
+ height: 6.02667rem;
9016
9752
  }
9017
9753
 
9018
- #receipt-wrap .r-list li .r-btn {
9754
+ #invite .type5 .content-center .img2 {
9755
+ position: absolute;
9019
9756
  width: 100%;
9020
- height: 30px; /* 0.8rem ≈ 30px */
9021
- line-height: 30px;
9022
- color: #fff;
9023
- background-color: #ff4562;
9024
- border-radius: 20px; /* 0.53333rem ≈ 20px */
9025
- outline: 0;
9026
- font-size: 14px;
9027
- border: none;
9028
- cursor: pointer;
9757
+ height: 100%;
9758
+ left: 0;
9759
+ top: 0;
9029
9760
  }
9030
9761
 
9031
- /* 提示信息样式 */
9032
- #receipt-wrap .tip-cover {
9033
- position: fixed;
9762
+ #invite .type5 .content-center .top-ani {
9763
+ width: 8.98667rem;
9764
+ height: 4.61333rem;
9765
+ position: absolute;
9034
9766
  left: 0;
9035
9767
  top: 0;
9768
+ transform-origin: top center;
9769
+ transform-style: preserve-3d;
9770
+ }
9771
+
9772
+ #invite .type5 .content-center .top-ani .img3,
9773
+ #invite .type5 .content-center .top-ani .img4 {
9036
9774
  width: 100%;
9037
9775
  height: 100%;
9038
- display: flex;
9039
- align-items: center;
9040
- justify-content: center;
9041
- z-index: 999;
9042
- background-color: rgba(0,0,0,.7);
9776
+ position: absolute;
9777
+ left: 0;
9778
+ top: 0;
9043
9779
  }
9044
9780
 
9045
- #receipt-wrap .tip-cover .tip {
9046
- width: 80%;
9047
- max-width: 250px; /* 6.66667rem ≈ 250px */
9048
- padding: 10px;
9049
- border-radius: 5px; /* 0.13333rem ≈ 5px */
9050
- background-color: #fff;
9781
+ #invite .type5 .content-center .top-ani .img4 {
9782
+ backface-visibility: hidden;
9051
9783
  }
9052
9784
 
9053
- #receipt-wrap .tip-cover .tip-btn {
9054
- display: block;
9055
- margin: 25px auto; /* 0.66667rem ≈ 25px */
9056
- width: 120px; /* 3.2rem ≈ 120px */
9057
- height: 30px;
9058
- color: #fff;
9059
- border-radius: 4px; /* 0.10667rem ≈ 4px */
9060
- text-align: center;
9061
- font-size: 14px;
9062
- line-height: 30px;
9063
- background: #ed5566;
9064
- border: none;
9065
- cursor: pointer;
9785
+ #invite .type5 .content-center .top-ani .title {
9786
+ position: absolute;
9787
+ left: 0.53333rem;
9788
+ top: 0.4rem;
9789
+ backface-visibility: hidden;
9066
9790
  }
9067
9791
 
9068
- #receipt-wrap .tip-cover .tip-content {
9069
- font-size: 14px;
9070
- padding-top: 30px; /* 0.8rem ≈ 30px */
9071
- text-align: center;
9792
+ #invite .type5 .content-center .top-ani .content {
9793
+ position: absolute;
9794
+ left: 50%;
9795
+ transform: translateX(-50%);
9796
+ top: 1.86667rem;
9797
+ white-space: nowrap;
9798
+ font-size: 0.32rem;
9799
+ backface-visibility: hidden;
9072
9800
  }
9073
9801
 
9074
- /* 选择器样式 */
9075
- .which-select {
9076
- top: 0;
9077
- z-index: 110;
9078
- height: 100%;
9079
- background-color: rgba(0,0,0,.5);
9802
+ #invite .type5 .content-center .img5 {
9803
+ position: absolute;
9804
+ left: 50%;
9805
+ margin-left: -0.98667rem;
9806
+ top: 3.2rem;
9807
+ width: 1.97333rem;
9808
+ height: 1.97333rem;
9809
+ animation: invite-breathing 2s linear infinite;
9080
9810
  }
9081
9811
 
9082
- .which-select,
9083
- .which-select ul {
9084
- position: absolute;
9085
- left: 0;
9086
- width: 100%;
9812
+ #invite .type5.active {
9813
+ animation: invite-vanish 1s linear 1.8s;
9814
+ animation-fill-mode: both;
9087
9815
  }
9088
9816
 
9089
- .which-select ul {
9090
- bottom: 0;
9091
- transition: transform 0.3s ease-out;
9092
- margin: 0;
9093
- padding: 0;
9094
- list-style: none;
9817
+ #invite .type5.active .content-center {
9818
+ animation: invite-bottomMove 0.5s linear;
9819
+ animation-fill-mode: both;
9095
9820
  }
9096
9821
 
9097
- .which-select ul.hide {
9098
- transform: translateY(100%);
9822
+ #invite .type5.active .content-center .top-ani {
9823
+ animation: invite-topOpen 1.2s linear 0.6s;
9824
+ animation-fill-mode: both;
9099
9825
  }
9100
9826
 
9101
- .which-select ul li {
9827
+ #invite .type5.active .img5 {
9828
+ animation: invite-vanish 0.5s linear;
9829
+ animation-fill-mode: both;
9830
+ }
9831
+
9832
+ /* ---------- type6 ---------- */
9833
+ #invite .type6 {
9102
9834
  width: 100%;
9103
- height: 45px; /* 1.2rem ≈ 45px */
9104
- line-height: 45px;
9105
- background-color: #f0f0f0;
9106
- border-bottom: 1px solid #e0e0e0;
9107
- text-align: center;
9108
- cursor: pointer;
9835
+ height: 100%;
9836
+ position: relative;
9109
9837
  }
9110
9838
 
9111
- .which-select ul li:last-child {
9112
- line-height: 40px;
9113
- height: auto;
9114
- padding-bottom: 15px;
9839
+ #invite .type6 .img1 {
9840
+ position: absolute;
9841
+ width: 100%;
9842
+ bottom: 0;
9843
+ left: 0;
9115
9844
  }
9116
9845
 
9117
- /* 视频播放器样式 */
9118
- .global-v {
9119
- position: fixed;
9846
+ #invite .type6 .top-ani {
9847
+ width: 100%;
9848
+ position: absolute;
9120
9849
  top: 0;
9121
9850
  left: 0;
9851
+ }
9852
+
9853
+ #invite .type6 .top-ani .img2 {
9122
9854
  width: 100%;
9123
- height: 100%;
9124
- background: rgba(0,0,0,.7);
9125
- z-index: 101;
9126
- transition: all 0.3s;
9127
9855
  }
9128
9856
 
9129
- .global-v.gv-show {
9130
- transform: translateX(-100%);
9857
+ #invite .type6 .top-ani .title {
9858
+ top: 2.66667rem;
9859
+ font-size: 1.41333rem;
9860
+ writing-mode: vertical-lr;
9861
+ text-orientation: upright;
9862
+ letter-spacing: 0.34667rem;
9131
9863
  }
9132
9864
 
9133
- .global-v #close-gvideo {
9865
+ #invite .type6 .top-ani .content,
9866
+ #invite .type6 .top-ani .title {
9134
9867
  position: absolute;
9135
- left: 13px; /* 0.34667rem ≈ 13px */
9136
- top: 13px;
9137
- z-index: 10;
9138
- color: #fff;
9139
- cursor: pointer;
9868
+ left: 50%;
9869
+ font-weight: 700;
9870
+ transform: translateX(-50%);
9140
9871
  }
9141
9872
 
9142
- .global-v #close-gvideo .icon-buoumaotubiao20 {
9143
- font-size: 22px; /* 0.58667rem ≈ 22px */
9144
- font-weight: 700;
9873
+ #invite .type6 .top-ani .content {
9874
+ top: 7.14667rem;
9875
+ font-size: 0.48rem;
9876
+ white-space: nowrap;
9145
9877
  }
9146
9878
 
9147
- .global-v .global-v-show {
9148
- position: relative;
9149
- z-index: 1;
9150
- width: 100%;
9151
- height: 100%;
9879
+ #invite .type6 .top-ani .name {
9880
+ position: absolute;
9881
+ top: 10.29333rem;
9882
+ left: 50%;
9883
+ font-size: 0.53333rem;
9884
+ transform: translateX(-50%);
9152
9885
  }
9153
9886
 
9154
- .global-v ::v-deep .global-v-show iframe {
9887
+ #invite .type6 .img3 {
9155
9888
  position: absolute;
9156
- left: 0;
9157
- top: 50%;
9158
- transform: translateY(-60%);
9159
- min-height: 45%;
9160
- max-height: 100%;
9161
- width: 100%;
9889
+ width: 4.26667rem;
9890
+ top: 11.2rem;
9891
+ left: 50%;
9892
+ margin-left: -2.13333rem;
9893
+ z-index: 3;
9894
+ animation: invite-breathing 2s linear infinite;
9162
9895
  }
9163
9896
 
9164
- /* 缩放动画 */
9165
- .scale-enter-active,
9166
- .scale-leave-active {
9167
- transition: 0.2s;
9168
- transform-origin: center center;
9897
+ #invite .type6.active {
9898
+ animation: invite-vanish 1s linear 1.5s;
9899
+ animation-fill-mode: both;
9169
9900
  }
9170
9901
 
9171
- .scale-enter,
9172
- .scale-leave-to {
9173
- opacity: 0;
9174
- transform: scale(1.1);
9902
+ #invite .type6.active .img1 {
9903
+ animation: invite-downMove 1s linear 0.3s;
9904
+ animation-fill-mode: both;
9175
9905
  }
9176
9906
 
9177
- .scale-enter-to,
9178
- .scale-leave {
9179
- opacity: 1;
9180
- transform: scale(1);
9907
+ #invite .type6.active .top-ani {
9908
+ animation: invite-upMove 1s linear 0.3s;
9909
+ animation-fill-mode: both;
9181
9910
  }
9182
- /* 新增 toast 样式 */
9183
- .mint-toast {
9184
- position: fixed;
9185
- top: 50%;
9186
- left: 50%;
9187
- transform: translate(-50%, -50%);
9188
- display: flex;
9189
- flex-direction: column;
9190
- align-items: center;
9191
- justify-content: center;
9192
- min-width: 90px; /* 2.4rem ≈ 90px */
9193
- max-width: 180px; /* 4.8rem ≈ 180px */
9194
- height: 90px;
9195
- padding: 8px !important; /* 0.21333rem ≈ 8px */
9196
- background-color: rgba(0, 0, 0, 0.7);
9197
- border-radius: 8px;
9198
- z-index: 2000;
9199
- color: #fff;
9911
+
9912
+ #invite .type6.active .img3 {
9913
+ animation: invite-vanish 0.5s linear;
9914
+ animation-fill-mode: both;
9200
9915
  }
9201
9916
 
9202
- .mint-toast-text {
9203
- font-size: 12px; /* 0.32rem ≈ 12px */
9204
- padding-top: 0 !important;
9917
+ /* ---------- animations ---------- */
9918
+ @keyframes invite-breathing {
9919
+ 50% {
9920
+ transform: scale3d(1.2, 1.2, 1.2);
9921
+ }
9205
9922
  }
9206
9923
 
9207
- /* 新增图标样式 */
9208
- .icon-duihao:before {
9209
- content: "\E637";
9924
+ @keyframes invite-vanish {
9925
+ to {
9926
+ opacity: 0;
9927
+ transform: scale3d(1.2, 1.2, 1.2);
9928
+ }
9210
9929
  }
9211
9930
 
9212
- .icon-cuowu2:before {
9213
- content: "\E65E";
9214
- color: #F44336; /* 失败的红色 */
9931
+ @keyframes invite-topOpen {
9932
+ to {
9933
+ transform: perspective(13.33333rem) rotateX(180deg);
9934
+ animation-timing-function: ease-out;
9935
+ }
9215
9936
  }
9216
9937
 
9217
- .global.video {
9218
- width: 35px;
9219
- height: 55px;
9220
- border-radius: 50%;
9221
- text-align: center;
9222
- margin-bottom: 5px;
9223
- border: 2px solid #fff;
9224
- cursor: pointer;
9938
+ @keyframes invite-bottomOpen {
9939
+ to {
9940
+ transform: perspective(13.33333rem) rotateX(-180deg);
9941
+ animation-timing-function: ease-out;
9942
+ }
9225
9943
  }
9226
- .icon-shipin2:before { content: "\E611"; }
9227
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
9228
- .global.video > span { font-size: 10px; line-height: 20px; display: block; position: relative; top: -4px;
9944
+
9945
+ @keyframes invite-leftOpen {
9946
+ to {
9947
+ transform: perspective(13.33333rem) rotateY(-180deg);
9948
+ animation-timing-function: ease-out;
9949
+ }
9229
9950
  }
9230
9951
 
9231
- .global.tel {
9232
- width: 35px;
9233
- height: 55px;
9234
- border-radius: 50%;
9235
- text-align: center;
9236
- margin-bottom: 15px;
9237
- border: 2px solid #fff;
9238
- cursor: pointer;
9952
+ @keyframes invite-rightOpen {
9953
+ to {
9954
+ transform: perspective(13.33333rem) rotateY(180deg);
9955
+ animation-timing-function: ease-out;
9956
+ }
9239
9957
  }
9240
- .icon-dianhua:before { content: "\E60E"; }
9241
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
9242
- .global.tel > span { font-size: 10px; line-height: 20px; display: block;}
9243
- .global.map {
9244
- width: 35px;
9245
- height: 55px;
9246
- border-radius: 50%;
9247
- text-align: center;
9248
- margin-bottom: 5px;
9249
- border: 2px solid #fff;
9250
- cursor: pointer;
9958
+
9959
+ @keyframes invite-bottomMove {
9960
+ to {
9961
+ top: 4.61333rem;
9962
+ }
9251
9963
  }
9252
- .icon-daohang1:before { content: "\E612"; }
9253
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
9254
- .global.map > span { font-size: 10px; line-height: 20px; display: block;}
9255
- .global.receipt {
9256
- width: 35px;
9257
- height: 55px;
9258
- border-radius: 50%;
9259
- text-align: center;
9260
- margin-bottom: 5px;
9261
- border: 2px solid #fff;
9262
- cursor: pointer;
9964
+
9965
+ @keyframes invite-upMove {
9966
+ to {
9967
+ transform: translateY(-100%);
9968
+ animation-timing-function: ease-out;
9969
+ }
9970
+ }
9971
+
9972
+ @keyframes invite-downMove {
9973
+ to {
9974
+ transform: translateY(100%);
9975
+ animation-timing-function: ease-out;
9976
+ }
9263
9977
  }
9264
- .icon-liuyan:before { content: "\E636"; }
9265
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
9266
- .global.receipt > span { font-size: 10px; line-height: 20px; display: block; }