unika-components 1.0.399 → 1.0.400

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,69 +1,52 @@
1
1
 
2
- .ele-text {
3
- position: relative;
2
+ .ele-img {
3
+ position: absolute;
4
+ overflow: hidden;
4
5
  }
5
6
 
6
- .ele-text .ani-wrap {
7
+ .ele-img .ani-wrap {
7
8
  width: 100%;
8
9
  height: 100%;
9
10
  }
10
11
 
11
- .text-common {
12
- padding: 5px;
13
- text-orientation: upright;
14
- white-space: pre-wrap;
15
- }
16
-
17
- /* 文本动画类 */
18
- .text-fadeIn {
19
- animation: fadeIn 1s ease-in-out;
12
+ .ele-img .ele-image {
13
+ position: relative;
14
+ display: block;
20
15
  }
21
16
 
22
- .text-slideIn {
23
- animation: slideIn 1s ease-in-out;
17
+ .ele-img .rotate-wrap {
18
+ position: absolute;
19
+ left: 0;
20
+ right: 0;
21
+ top: 0;
22
+ bottom: 0;
24
23
  }
25
24
 
26
- .text-bounceIn {
27
- animation: bounceIn 1s ease-in-out;
25
+ .ele-img .ele-img-bg,
26
+ .ele-img .rotate-wrap .img-wrap {
27
+ width: 100%;
28
+ height: 100%;
29
+ overflow: hidden;
28
30
  }
29
31
 
30
- /* 基础动画关键帧 */
31
- @keyframes fadeIn {
32
- from {
33
- opacity: 0;
34
- }
35
- to {
36
- opacity: 1;
37
- }
32
+ .ele-img .ele-bg-wrap {
33
+ width: 100%;
34
+ height: 100%;
35
+ background-size: cover;
36
+ background-position: 50% 50%;
37
+ background-repeat: no-repeat;
38
+ background-clip: border-box;
38
39
  }
39
40
 
40
- @keyframes slideIn {
41
+ /* 动画关键帧 */
42
+ @keyframes zoomIn {
41
43
  from {
42
- transform: translateY(20px);
43
44
  opacity: 0;
45
+ transform: scale(0.5);
44
46
  }
45
47
  to {
46
- transform: translateY(0);
47
48
  opacity: 1;
48
- }
49
- }
50
-
51
- @keyframes bounceIn {
52
- 0% {
53
- transform: scale(0.3);
54
- opacity: 0;
55
- }
56
- 50% {
57
- transform: scale(1.05);
58
- opacity: 0.8;
59
- }
60
- 70% {
61
- transform: scale(0.9);
62
- opacity: 0.9;
63
- }
64
- 100% {
65
49
  transform: scale(1);
66
- opacity: 1;
67
50
  }
68
51
  }
69
52
 
@@ -99,54 +82,71 @@
99
82
  background: rgba(0,0,0,0.05);
100
83
  }
101
84
 
102
- .ele-img {
103
- position: absolute;
104
- overflow: hidden;
85
+ .ele-text {
86
+ position: relative;
105
87
  }
106
88
 
107
- .ele-img .ani-wrap {
89
+ .ele-text .ani-wrap {
108
90
  width: 100%;
109
91
  height: 100%;
110
92
  }
111
93
 
112
- .ele-img .ele-image {
113
- position: relative;
114
- display: block;
94
+ .text-common {
95
+ padding: 5px;
96
+ text-orientation: upright;
97
+ white-space: pre-wrap;
115
98
  }
116
99
 
117
- .ele-img .rotate-wrap {
118
- position: absolute;
119
- left: 0;
120
- right: 0;
121
- top: 0;
122
- bottom: 0;
100
+ /* 文本动画类 */
101
+ .text-fadeIn {
102
+ animation: fadeIn 1s ease-in-out;
123
103
  }
124
104
 
125
- .ele-img .ele-img-bg,
126
- .ele-img .rotate-wrap .img-wrap {
127
- width: 100%;
128
- height: 100%;
129
- overflow: hidden;
105
+ .text-slideIn {
106
+ animation: slideIn 1s ease-in-out;
130
107
  }
131
108
 
132
- .ele-img .ele-bg-wrap {
133
- width: 100%;
134
- height: 100%;
135
- background-size: cover;
136
- background-position: 50% 50%;
137
- background-repeat: no-repeat;
138
- background-clip: border-box;
109
+ .text-bounceIn {
110
+ animation: bounceIn 1s ease-in-out;
139
111
  }
140
112
 
141
- /* 动画关键帧 */
142
- @keyframes zoomIn {
113
+ /* 基础动画关键帧 */
114
+ @keyframes fadeIn {
143
115
  from {
144
116
  opacity: 0;
145
- transform: scale(0.5);
146
117
  }
147
118
  to {
148
119
  opacity: 1;
120
+ }
121
+ }
122
+
123
+ @keyframes slideIn {
124
+ from {
125
+ transform: translateY(20px);
126
+ opacity: 0;
127
+ }
128
+ to {
129
+ transform: translateY(0);
130
+ opacity: 1;
131
+ }
132
+ }
133
+
134
+ @keyframes bounceIn {
135
+ 0% {
136
+ transform: scale(0.3);
137
+ opacity: 0;
138
+ }
139
+ 50% {
140
+ transform: scale(1.05);
141
+ opacity: 0.8;
142
+ }
143
+ 70% {
144
+ transform: scale(0.9);
145
+ opacity: 0.9;
146
+ }
147
+ 100% {
149
148
  transform: scale(1);
149
+ opacity: 1;
150
150
  }
151
151
  }
152
152
 
@@ -269,52 +269,6 @@
269
269
  background: #fff;
270
270
  }
271
271
 
272
- .element-ditu .ani-wrap {
273
- width: 100%;
274
- height: 100%;
275
- overflow: hidden
276
- }
277
-
278
- .element-ditu .map {
279
- width: 100%;
280
- height: 100%
281
- }
282
-
283
- .element-ditu .map .el-button {
284
- width: 100%;
285
- height: 100%;
286
- display: -webkit-box;
287
- display: -ms-flexbox;
288
- display: flex;
289
- -webkit-box-align: center;
290
- -ms-flex-align: center;
291
- align-items: center;
292
- padding: 0;
293
- -webkit-box-pack: center;
294
- -ms-flex-pack: center;
295
- justify-content: center;
296
- background: inherit;
297
- color: inherit;
298
- border: none
299
- }
300
-
301
- .element-ditu .center-map {
302
- width: 100%;
303
- height: 100%;
304
- background: #fff
305
- }
306
-
307
- .element-ditu .mask-map {
308
- position: absolute;
309
- width: 100%;
310
- height: 100%;
311
- top: 0
312
- }
313
- .map-iframe {
314
- width: 100%;
315
- height: 100%;
316
- }
317
-
318
272
  .count-down .drag-point {
319
273
  cursor: default!important
320
274
  }
@@ -479,45 +433,26 @@
479
433
  }
480
434
 
481
435
 
482
- .call {
483
- position: absolute;
484
- cursor: pointer;
485
- user-select: none;
486
- }
487
-
488
- .bohao-container {
436
+ .like-button {
489
437
  display: flex;
490
- justify-content: center;
438
+ flex-direction: column;
491
439
  align-items: center;
492
- width: 100%;
493
- height: 100%;
494
- overflow: hidden;
495
- transition: opacity 0.2s;
496
- }
497
-
498
- .bohao-container:hover {
499
- opacity: 0.9;
440
+ cursor: pointer;
500
441
  }
501
442
 
502
- .bohao-content {
503
- display: flex;
504
- align-items: center;
505
- justify-content: center;
443
+ .icon-heart {
444
+ font-size: 24px;
445
+ color: #e74c3c;
506
446
  }
507
447
 
508
- .btn-text {
509
- margin-left: 10px;
448
+ .liked {
449
+ color: #f00; /* 更改颜色以示已赞 */
510
450
  }
511
451
 
512
- /* 这里可以添加实际的电话图标样式 */
513
- .iconfont.hb-tel {
514
- display: inline-block;
515
- width: 16px;
516
- height: 16px;
517
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>');
518
- background-repeat: no-repeat;
519
- background-position: center;
520
- background-size: contain;
452
+ .like-count {
453
+ margin-top: 4px;
454
+ font-size: 16px;
455
+ color: #333;
521
456
  }
522
457
 
523
458
  .effect-container {
@@ -577,67 +512,95 @@
577
512
  animation: snow 5s linear infinite
578
513
  }
579
514
 
580
- .uni-build-up-component {
581
- }
582
-
583
- .ele-lottie .ele-lotwrap {
584
- overflow: hidden;
515
+ .call {
516
+ position: absolute;
517
+ cursor: pointer;
518
+ user-select: none;
585
519
  }
586
520
 
587
- .ele-effect .effect-wrap {
588
- position: relative;
589
- overflow: hidden;
521
+ .bohao-container {
522
+ display: flex;
523
+ justify-content: center;
524
+ align-items: center;
590
525
  width: 100%;
591
526
  height: 100%;
527
+ overflow: hidden;
528
+ transition: opacity 0.2s;
592
529
  }
593
530
 
594
- .ele-effect .e-small {
595
- position: absolute;
596
- width: 24px;
597
- height: 24px;
598
- background-image: url(http://cdn.h5ds.com/static/images/snow.png);
599
- background-size: cover;
531
+ .bohao-container:hover {
532
+ opacity: 0.9;
533
+ }
534
+
535
+ .bohao-content {
536
+ display: flex;
537
+ align-items: center;
538
+ justify-content: center;
539
+ }
540
+
541
+ .btn-text {
542
+ margin-left: 10px;
543
+ }
544
+
545
+ /* 这里可以添加实际的电话图标样式 */
546
+ .iconfont.hb-tel {
547
+ display: inline-block;
548
+ width: 16px;
549
+ height: 16px;
550
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>');
600
551
  background-repeat: no-repeat;
601
- transform-origin: center;
602
- animation: snow 5s linear infinite;
552
+ background-position: center;
553
+ background-size: contain;
603
554
  }
604
555
 
605
- @keyframes snow {
606
- 0% {
607
- transform: translateY(0) rotate(0deg);
608
- opacity: 1;
609
- }
610
- 100% {
611
- transform: translateY(100vh) rotate(360deg);
612
- opacity: 0;
613
- }
556
+ .element-ditu .ani-wrap {
557
+ width: 100%;
558
+ height: 100%;
559
+ overflow: hidden
614
560
  }
615
561
 
616
- .like-button {
617
- display: flex;
618
- flex-direction: column;
619
- align-items: center;
620
- cursor: pointer;
562
+ .element-ditu .map {
563
+ width: 100%;
564
+ height: 100%
621
565
  }
622
566
 
623
- .icon-heart {
624
- font-size: 24px;
625
- color: #e74c3c;
567
+ .element-ditu .map .el-button {
568
+ width: 100%;
569
+ height: 100%;
570
+ display: -webkit-box;
571
+ display: -ms-flexbox;
572
+ display: flex;
573
+ -webkit-box-align: center;
574
+ -ms-flex-align: center;
575
+ align-items: center;
576
+ padding: 0;
577
+ -webkit-box-pack: center;
578
+ -ms-flex-pack: center;
579
+ justify-content: center;
580
+ background: inherit;
581
+ color: inherit;
582
+ border: none
626
583
  }
627
584
 
628
- .liked {
629
- color: #f00; /* 更改颜色以示已赞 */
585
+ .element-ditu .center-map {
586
+ width: 100%;
587
+ height: 100%;
588
+ background: #fff
630
589
  }
631
590
 
632
- .like-count {
633
- margin-top: 4px;
634
- font-size: 16px;
635
- color: #333;
591
+ .element-ditu .mask-map {
592
+ position: absolute;
593
+ width: 100%;
594
+ height: 100%;
595
+ top: 0
636
596
  }
637
-
638
- .uni-svg-component {
639
- display: inline-block;
640
- }
597
+ .map-iframe {
598
+ width: 100%;
599
+ height: 100%;
600
+ }
601
+
602
+ .uni-build-up-component {
603
+ }
641
604
 
642
605
  .ant-input-number {
643
606
  box-sizing: border-box;
@@ -674,6 +637,39 @@
674
637
  vertical-align: top;
675
638
  }
676
639
 
640
+ .ele-lottie .ele-lotwrap {
641
+ overflow: hidden;
642
+ }
643
+
644
+ .ele-effect .effect-wrap {
645
+ position: relative;
646
+ overflow: hidden;
647
+ width: 100%;
648
+ height: 100%;
649
+ }
650
+
651
+ .ele-effect .e-small {
652
+ position: absolute;
653
+ width: 24px;
654
+ height: 24px;
655
+ background-image: url(http://cdn.h5ds.com/static/images/snow.png);
656
+ background-size: cover;
657
+ background-repeat: no-repeat;
658
+ transform-origin: center;
659
+ animation: snow 5s linear infinite;
660
+ }
661
+
662
+ @keyframes snow {
663
+ 0% {
664
+ transform: translateY(0) rotate(0deg);
665
+ opacity: 1;
666
+ }
667
+ 100% {
668
+ transform: translateY(100vh) rotate(360deg);
669
+ opacity: 0;
670
+ }
671
+ }
672
+
677
673
  /* Iconfont definition */
678
674
  @font-face {
679
675
  font-family: iconfont;
@@ -1591,1337 +1587,1656 @@ i {
1591
1587
  100% { transform: rotate(360deg); }
1592
1588
  }
1593
1589
 
1590
+
1591
+ /* 设计稿尺寸(如375px下20px的按钮) */
1592
+ .btn {
1593
+ width: 20px; /* 直接写设计稿px */
1594
+ height: 10px;
1595
+ font-size: 14px;
1596
+ }
1594
1597
 
1595
- body, html {
1596
- width: 100%;
1597
- height: 100%;
1598
- }
1599
- * {
1600
- padding: 0;
1601
- margin: 0;
1602
- box-sizing: border-box;
1603
- white-space: normal;
1604
- word-break: break-all;
1605
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1598
+ .uni-svg-component {
1599
+ display: inline-block;
1606
1600
  }
1607
1601
 
1608
- #index {
1609
- position: relative;
1610
- width: 100%;
1611
- height: 100%;
1612
- overflow: hidden;
1602
+ .ele-form {
1603
+ position: absolute;
1604
+ user-select: none;
1613
1605
  }
1614
1606
 
1615
- #page-list {
1616
- position: relative;
1617
- width: 100%;
1618
- height: 100%;
1619
- max-width: 800px;
1620
- margin: 0 auto;
1621
- z-index: 1
1607
+ .f-select {
1608
+ cursor: pointer;
1622
1609
  }
1623
1610
 
1624
- #page-list.hardware .eles {
1625
- will-change: transform
1611
+ .ani-wrap {
1612
+ position: relative;
1626
1613
  }
1627
1614
 
1628
- #page-list .bg-wrap {
1629
- position: absolute;
1630
- left: 0;
1631
- top: 0;
1632
- right: 0;
1633
- bottom: 0;
1634
- z-index: -1
1615
+ .fs-tit {
1616
+ position: relative;
1617
+ display: flex;
1618
+ padding: 0 5px;
1619
+ height: 35px;
1620
+ line-height: 35px;
1621
+ align-items: center;
1635
1622
  }
1636
1623
 
1637
- #page-list .ani-pause .ani-wrap {
1638
- animation-play-state: paused!important;
1639
- -webkit-animation-play-state: paused!important
1624
+ .require {
1625
+ padding: 0 5px 0 0;
1626
+ color: red;
1627
+ vertical-align: middle;
1640
1628
  }
1641
1629
 
1642
- #page-list .audio-wrap {
1643
- z-index: 10
1630
+ .fs-cont {
1631
+ padding-right: 15px;
1632
+ white-space: nowrap;
1633
+ overflow: hidden;
1634
+ text-overflow: ellipsis;
1635
+ flex-grow: 1;
1644
1636
  }
1645
1637
 
1646
- #page-list .audio-wrap,#page-list .page-item {
1647
- position: absolute;
1648
- left: 0;
1649
- top: 0;
1650
- right: 0;
1651
- bottom: 0
1638
+ .icon-bofang1 {
1639
+ font-size: 12px;
1640
+ transition: transform 0.2s ease;
1652
1641
  }
1653
1642
 
1654
- #page-list .page-item {
1655
- z-index: 0;
1656
- overflow: hidden;
1657
- display: none;
1658
- visibility: hidden;
1659
- transform-style: preserve-3d;
1660
- -webkit-backface-visibility: hidden;
1661
- backface-visibility: hidden;
1662
- transition-timing-function: cubic-bezier(.1,.57,.1,1)
1643
+ .rotate-180 {
1644
+ transform: rotate(180deg) !important;
1663
1645
  }
1664
1646
 
1665
- #page-list .page-item .count-down {
1666
- display: none
1647
+ .f-real {
1648
+ position: absolute;
1649
+ left: 0;
1650
+ top: 0;
1651
+ width: 100%;
1652
+ height: 100%;
1653
+ z-index: 1;
1654
+ opacity: 0;
1655
+ cursor: pointer;
1667
1656
  }
1668
1657
 
1669
- #page-list .page-item .has-ani {
1670
- display: none!important
1658
+ .dropdown-menu {
1659
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
1671
1660
  }
1672
1661
 
1673
- #page-list .page-item .ele-effect,#page-list .page-item .page-bg {
1674
- display: none
1662
+ .dropdown-item {
1663
+ padding: 8px 10px;
1664
+ cursor: pointer;
1665
+ transition: background-color 0.2s;
1675
1666
  }
1676
1667
 
1677
- #page-list .page-item .limit-ani .ani-wrap {
1678
- animation: none!important
1668
+ .dropdown-item:hover {
1669
+ background-color: #f5f5f5;
1679
1670
  }
1680
1671
 
1681
- #page-list .page-item .ani-pause .ani-wrap {
1682
- animation-play-state: paused!important;
1683
- -webkit-animation-play-state: paused!important
1672
+ .dropdown-item.selected {
1673
+ background-color: #e6f7ff;
1674
+ color: #1890ff;
1684
1675
  }
1685
1676
 
1686
- #page-list .page-item .showAniEle .has-ani {
1687
- display: block!important
1677
+ .f-select .fs-tit .icon-bofang1 {
1678
+ position: absolute;
1679
+ right: 10px;
1680
+ font-size: 12px;
1681
+ display: inline-block;
1682
+ transform: rotate(90deg);
1688
1683
  }
1689
1684
 
1690
- #page-list .page-item .showAniEle .page-bg {
1691
- display: block
1685
+ @font-face {
1686
+ font-family: iconfont;
1687
+ src: url(https://h5static.hunbei.com/preview/static/fonts/iconfont.f1262e4.woff2) format("woff2"),
1688
+ url(https://h5static.hunbei.com/preview/static/fonts/iconfont.788d827.woff) format("woff"),
1689
+ url(https://h5static.hunbei.com/preview/static/fonts/iconfont.9541e59.ttf) format("truetype");
1692
1690
  }
1693
1691
 
1694
- #page-list .page-item .scroll-wrap {
1695
- position: relative;
1696
- width: 100%;
1697
- overflow: hidden
1692
+ .iconfont {
1693
+ font-family: iconfont !important;
1694
+ font-size: 14px;
1695
+ font-style: normal;
1696
+ -webkit-font-smoothing: antialiased;
1697
+ -moz-osx-font-smoothing: grayscale;
1698
1698
  }
1699
1699
 
1700
- #page-list .page-item .amap-maps {
1701
- display: none
1700
+ .icon-bofang1:before {
1701
+ content: "\E6CF";
1702
1702
  }
1703
1703
 
1704
- #page-list .page-item.current {
1705
- z-index: 1;
1706
- display: block;
1707
- visibility: visible
1704
+ .has-error {
1705
+ border-color: #ff4d4f !important;
1708
1706
  }
1709
1707
 
1710
- #page-list .page-item.current .amap-maps,#page-list .page-item.current .count-down,#page-list .page-item.current .page-wrap .ele-effect {
1711
- display: block
1708
+ .error-tip {
1709
+ position: fixed;
1710
+ left: 0;
1711
+ top: 0;
1712
+ width: 100%;
1713
+ height: 100%;
1714
+ z-index: 1000;
1712
1715
  }
1713
1716
 
1714
- #page-list .page-item.current .page-wrap .eles {
1715
- text-align: left
1717
+ .ele-form {
1718
+ position: absolute;
1719
+ user-select: none;
1716
1720
  }
1717
1721
 
1718
- #page-list .page-item.current .page-wrap .page-bg {
1719
- display: block
1722
+ .f-single {
1723
+ cursor: pointer;
1720
1724
  }
1721
1725
 
1722
- #page-list .page-item.current .page-wrap .has-ani {
1723
- display: block!important
1726
+ .ani-wrap {
1727
+ position: relative;
1724
1728
  }
1725
1729
 
1726
- #page-list .page-item.visibility {
1727
- display: block;
1728
- visibility: hidden
1730
+ .fs-tit {
1731
+ display: flex;
1732
+ padding: 0 5px;
1733
+ height: 40px;
1734
+ align-items: center;
1735
+ white-space: nowrap;
1736
+ overflow: hidden;
1737
+ text-overflow: ellipsis;
1738
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
1729
1739
  }
1730
1740
 
1731
- #page-list .page-item.active {
1732
- z-index: 2;
1733
- visibility: visible
1741
+ .require {
1742
+ padding: 0 5px 0 0;
1743
+ color: red;
1744
+ vertical-align: middle;
1734
1745
  }
1735
1746
 
1736
- #page-list .page-item.active .amap-maps,#page-list .page-item.active .count-down {
1737
- display: block
1747
+ .f-single ul {
1748
+ padding: 15px;
1749
+ margin: 0;
1750
+ list-style: none;
1738
1751
  }
1739
1752
 
1740
- #page-list .page-item .page-wrap {
1741
- position: relative;
1742
- width: 100%;
1743
- height: 100%;
1744
- overflow: hidden;
1745
- z-index: 1
1753
+ .f-single ul li {
1754
+ display: flex;
1755
+ align-items: center;
1756
+ margin-top: 12px;
1757
+ font-size: 0;
1746
1758
  }
1747
1759
 
1748
- #page-list .page-item .page-wrap .ele-wrap,#page-list .page-item .page-wrap .page-bg {
1749
- position: absolute;
1750
- right: 0;
1751
- left: 0;
1752
- top: 0;
1753
- bottom: 0;
1754
- width: 100%;
1755
- height: 100%;
1756
- overflow: hidden
1760
+ .f-single ul li:first-child {
1761
+ margin-top: 0;
1757
1762
  }
1758
1763
 
1759
- #page-list .page-item .page-wrap .page-bg {
1760
- background-size: cover;
1761
- background-repeat: no-repeat;
1762
- background-position: 50% 50%;
1763
- z-index: 0
1764
+ .fs-circle {
1765
+ display: inline-block;
1766
+ width: 16px;
1767
+ height: 16px;
1768
+ border-radius: 50%;
1769
+ position: relative;
1770
+ transition: all 0.2s;
1764
1771
  }
1765
1772
 
1766
- #page-list .page-item .page-wrap .ele-wrap {
1767
- z-index: 1
1773
+ .fs-circle.selected {
1774
+ background-color: #2687f1;
1775
+ border-color: #2687f1 !important;
1768
1776
  }
1769
1777
 
1770
- #page-list .page-item .page-wrap .eles {
1771
- position: absolute
1778
+ .fs-circle.selected::after {
1779
+ content: "";
1780
+ position: absolute;
1781
+ top: 3px;
1782
+ left: 3px;
1783
+ width: 8px;
1784
+ height: 8px;
1785
+ border-radius: 50%;
1786
+ background-color: white;
1772
1787
  }
1773
1788
 
1774
- .no-ani .ani-wrap,.no-ani .ele-text-long {
1775
- animation: none!important
1789
+ .fs-txt {
1790
+ display: inline-block;
1791
+ width: calc(100% - 16px);
1792
+ padding-left: 8px;
1793
+ vertical-align: top;
1794
+ word-break: break-all;
1795
+ font-size: 14px;
1796
+ line-height: 1.2;
1776
1797
  }
1777
1798
 
1778
- .scroll-mode .page-container {
1779
- position: relative;
1780
- min-height: 100vh;
1799
+ .has-error .fs-tit {
1800
+ border-bottom-color: #ff4d4f;
1781
1801
  }
1782
1802
 
1783
- /* 页面切换动画 */
1784
- /* 过渡动画示例 */
1785
- .slide-enter-active, .slide-leave-active {
1786
- -webkit-animation: slideToTop .6s ease-in both;
1787
- animation: slideToTop .6s ease-in both
1788
- }
1789
- @-webkit-keyframes slideToTop {
1790
- to {
1791
- -webkit-transform: translateY(-100%);
1792
- transform: translateY(-100%)
1793
- }
1803
+ /* 错误提示样式 */
1804
+ .error-tip {
1805
+ position: fixed;
1806
+ left: 0;
1807
+ top: 0;
1808
+ width: 100%;
1809
+ height: 100%;
1810
+ z-index: 1000;
1794
1811
  }
1795
1812
 
1796
- @keyframes slideToTop {
1797
- to {
1798
- -webkit-transform: translateY(-100%);
1799
- transform: translateY(-100%)
1800
- }
1801
- }
1802
- .slide-enter-from {
1803
- transform: translateX(100%);
1804
- }
1805
- .slide-leave-to {
1806
- transform: translateX(-100%);
1813
+ .form-input {
1814
+ position: absolute;
1807
1815
  }
1808
1816
 
1809
- .rotateCube-enter-active, .rotateCube-leave-active {
1810
- -webkit-transform-origin: 50% 100%;
1811
- transform-origin: 50% 100%;
1812
- -webkit-animation: rotateCubeTopOut .6s ease-in both;
1813
- animation: rotateCubeTopOut .6s ease-in both
1817
+ .input-wrapper {
1818
+ display: flex;
1819
+ align-items: center;
1820
+ width: 100%;
1821
+ height: 100%;
1822
+ padding: 0 10px;
1823
+ box-sizing: border-box;
1824
+ position: relative;
1825
+ transition: border-color 0.3s;
1814
1826
  }
1815
- .rotateCube-enter-from {
1816
- transform: translateX(100%);
1827
+
1828
+ .required-marker {
1829
+ font-size: 12px;
1830
+ padding: 0 5px 0 0;
1831
+ color: red;
1832
+ vertical-align: middle;
1817
1833
  }
1818
- .rotateCube-leave-to {
1819
- transform: translateX(-100%);
1834
+
1835
+ input {
1836
+ flex: 1;
1837
+ border: none;
1838
+ outline: none;
1839
+ background: transparent;
1840
+ height: 100%;
1841
+ padding: 0;
1842
+ margin: 0;
1820
1843
  }
1844
+ /*
1845
+ input::placeholder {
1846
+ color: #ccc;
1847
+ opacity: 1;
1848
+ } */
1821
1849
 
1822
- .wind-enter-active, .wind-leave-active {
1823
- -webkit-animation: windOut .5s ease-in both;
1824
- animation: windOut .5s ease-in both
1850
+ .dynamic-placeholder-input::placeholder {
1851
+ color: var(--placeholder-color, #999);
1852
+ opacity: 1;
1825
1853
  }
1826
- .wind-enter-from {
1827
- transform: translateX(100%);
1854
+ .dynamic-placeholder-input::-webkit-input-placeholder {
1855
+ color: var(--placeholder-color, #999);
1828
1856
  }
1829
- .wind-leave-to {
1830
- transform: translateX(-100%);
1857
+ .dynamic-placeholder-input::-moz-placeholder {
1858
+ color: var(--placeholder-color, #999);
1859
+ opacity: 1;
1860
+ }
1861
+ .dynamic-placeholder-input:-ms-input-placeholder {
1862
+ color: var(--placeholder-color, #999);
1831
1863
  }
1832
1864
 
1833
- .popup-enter-active, .popup-leave-active {
1834
- -webkit-transform-origin: 50% 100%;
1835
- transform-origin: 50% 100%;
1836
- -webkit-animation: rotateCarouselTopOut .7s ease both;
1837
- animation: rotateCarouselTopOut .7s ease both
1865
+ .form-submit {
1866
+ cursor: pointer;
1867
+ transition: all 0.2s;
1868
+ outline: none;
1869
+ border: none;
1838
1870
  }
1839
- .popup-enter-from {
1840
- transform: translateX(100%);
1871
+
1872
+ .form-submit:hover {
1873
+ opacity: 0.9;
1874
+ transform: translateY(-1px);
1841
1875
  }
1842
- .popup-leave-to {
1843
- transform: translateX(-100%);
1876
+
1877
+ .form-submit:active {
1878
+ opacity: 0.8;
1879
+ transform: translateY(0);
1844
1880
  }
1845
1881
 
1846
- .scaleUpDown-enter-active, .scaleUpDown-leave-active {
1847
- -webkit-animation: scaleUp .7s ease both;
1848
- animation: scaleUp .7s ease both
1849
- }
1850
- .scaleUpDown-enter-from {
1851
- transform: translateX(100%);
1852
- }
1853
- .scaleUpDown-leave-to {
1854
- transform: translateX(-100%);
1882
+ .form-submit:disabled {
1883
+ opacity: 0.6;
1884
+ cursor: not-allowed;
1885
+ transform: none !important;
1855
1886
  }
1856
1887
 
1857
- .flipUpDown-enter-active, .flipUpDown-leave-active {
1858
- -webkit-animation: rotatePushTop .7s ease both;
1859
- animation: rotatePushTop .7s ease both
1860
- }
1861
- .flipUpDown-enter-from {
1862
- transform: translateX(100%);
1863
- }
1864
- .flipUpDown-leave-to {
1865
- transform: translateX(-100%);
1888
+ /* 统一错误提示样式 */
1889
+ .tip-cover {
1890
+ position: fixed;
1891
+ left: 0;
1892
+ top: 0;
1893
+ width: 100%;
1894
+ height: 100%;
1895
+ display: flex;
1896
+ align-items: center;
1897
+ justify-content: center;
1898
+ z-index: 999;
1899
+ background-color: rgba(0,0,0,.7);
1866
1900
  }
1867
1901
 
1868
- .cover-enter-active, .cover-leave-active {
1869
- -webkit-animation: coverInDown .5s ease both;
1870
- animation: coverInDown .5s ease both
1871
- }
1872
- .cover-enter-from {
1873
- transform: translateX(100%);
1902
+ .tip {
1903
+ width: 80%;
1904
+ max-width: 250px;
1905
+ padding: 10px;
1906
+ border-radius: 5px;
1907
+ background-color: #fff;
1874
1908
  }
1875
- .cover-leave-to {
1876
- transform: translateX(-100%);
1909
+
1910
+ .tip-btn {
1911
+ display: block;
1912
+ margin: 25px auto;
1913
+ width: 120px;
1914
+ height: 30px;
1915
+ color: #fff;
1916
+ border-radius: 4px;
1917
+ text-align: center;
1918
+ font-size: 14px;
1919
+ line-height: 30px;
1920
+ background: #ed5566;
1921
+ cursor: pointer;
1877
1922
  }
1878
1923
 
1879
- .inertia-enter-active, .inertia-leave-active {
1880
- -webkit-animation: inertiaOut .6s ease both;
1881
- animation: inertiaOut .6s ease both
1924
+ .tip-content {
1925
+ font-size: 14px;
1926
+ padding-top: 30px;
1927
+ text-align: center;
1882
1928
  }
1883
- @-webkit-keyframes inertiaOut {
1884
- to {
1885
- -webkit-transform: scale(.2);
1886
- transform: scale(.2)
1887
- }
1929
+
1930
+ .ele-form {
1931
+ position: absolute;
1932
+ user-select: none;
1888
1933
  }
1889
1934
 
1890
- @keyframes inertiaOut {
1891
- to {
1892
- -webkit-transform: scale(.2);
1893
- transform: scale(.2)
1894
- }
1935
+ .f-multiple {
1936
+ cursor: pointer;
1895
1937
  }
1896
- .inertia-enter-from {
1897
- transform: translateX(100%);
1938
+
1939
+ .ani-wrap {
1940
+ position: relative;
1898
1941
  }
1899
- .inertia-leave-to {
1900
- transform: translateX(-100%);
1942
+
1943
+ .fs-tit {
1944
+ display: flex;
1945
+ padding: 0 5px;
1946
+ height: 40px;
1947
+ align-items: center;
1948
+ white-space: nowrap;
1949
+ overflow: hidden;
1950
+ text-overflow: ellipsis;
1951
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
1901
1952
  }
1902
1953
 
1903
- .push-enter-active, .push-leave-active {
1904
- -webkit-transform-origin: center top;
1905
- transform-origin: center top;
1906
- -webkit-animation: pushInTop .6s linear .2s both;
1907
- animation: pushInTop .6s linear .2s both
1954
+ .require {
1955
+ padding: 0 5px 0 0;
1956
+ color: red;
1957
+ vertical-align: middle;
1908
1958
  }
1909
- @-webkit-keyframes pushInTop {
1910
- 0% {
1911
- -webkit-transform: perspective(700px) rotateX(-90deg);
1912
- transform: perspective(700px) rotateX(-90deg)
1913
- }
1959
+
1960
+ .f-multiple ul {
1961
+ padding: 15px;
1962
+ margin: 0;
1963
+ list-style: none;
1914
1964
  }
1915
1965
 
1916
- @keyframes pushInTop {
1917
- 0% {
1918
- -webkit-transform: perspective(700px) rotateX(-90deg);
1919
- transform: perspective(700px) rotateX(-90deg)
1920
- }
1966
+ .f-multiple ul li {
1967
+ margin-top: 12px;
1968
+ font-size: 0;
1969
+ display: flex;
1970
+ align-items: center;
1971
+ cursor: pointer;
1921
1972
  }
1922
- .push-enter-from {
1923
- transform: translateX(100%);
1973
+
1974
+ .f-multiple ul li:first-child {
1975
+ margin-top: 0;
1924
1976
  }
1925
- .push-leave-to {
1926
- transform: translateX(-100%);
1977
+
1978
+ .fs-circle {
1979
+ display: inline-block;
1980
+ width: 16px;
1981
+ height: 16px;
1982
+ border-radius: 50%;
1983
+ position: relative;
1984
+ transition: all 0.2s;
1927
1985
  }
1928
1986
 
1929
- .drop-enter-active, .drop-leave-active {
1930
- -webkit-transform-origin: 0 0;
1931
- transform-origin: 0 0;
1932
- -webkit-animation: dropOut .6s linear both;
1933
- animation: dropOut .6s linear both
1987
+ .fs-circle.selected {
1988
+ background-color: #2687f1;
1989
+ border-color: #2687f1 !important;
1934
1990
  }
1935
- @-webkit-keyframes dropOut {
1936
- 20% {
1937
- -webkit-transform: rotate(5deg);
1938
- transform: rotate(5deg)
1939
- }
1940
1991
 
1941
- to {
1942
- opacity: .6;
1943
- -webkit-transform: translate3d(0,100%,0);
1944
- transform: translate3d(0,100%,0)
1945
- }
1992
+ .fs-circle.selected::after {
1993
+ content: "";
1994
+ position: absolute;
1995
+ top: 3px;
1996
+ left: 3px;
1997
+ width: 8px;
1998
+ height: 8px;
1999
+ border-radius: 50%;
2000
+ background-color: white;
1946
2001
  }
1947
2002
 
1948
- @keyframes dropOut {
1949
- 20% {
1950
- -webkit-transform: rotate(5deg);
1951
- transform: rotate(5deg)
1952
- }
2003
+ .fs-txt {
2004
+ display: inline-block;
2005
+ width: calc(100% - 16px);
2006
+ padding-left: 8px;
2007
+ vertical-align: top;
2008
+ word-break: break-all;
2009
+ font-size: 14px;
2010
+ line-height: 1.2;
2011
+ }
1953
2012
 
1954
- to {
1955
- opacity: .6;
1956
- -webkit-transform: translate3d(0,100%,0);
1957
- transform: translate3d(0,100%,0)
1958
- }
2013
+ .has-error .fs-tit {
2014
+ border-bottom-color: #ff4d4f;
1959
2015
  }
1960
2016
 
1961
- .drop-enter-from {
1962
- transform: translateX(100%);
2017
+ body, html {
2018
+ width: 100%;
2019
+ height: 100%;
1963
2020
  }
1964
- .drop-leave-to {
1965
- transform: translateX(-100%);
2021
+ * {
2022
+ padding: 0;
2023
+ margin: 0;
2024
+ box-sizing: border-box;
2025
+ white-space: normal;
2026
+ word-break: break-all;
2027
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1966
2028
  }
1967
2029
 
1968
- .fadeIn-enter-active, .fadeIn-leave-active {
1969
- -webkit-animation: pfadeIn .6s linear both;
1970
- animation: pfadeIn .6s linear both
2030
+ #index {
2031
+ position: relative;
2032
+ width: 100%;
2033
+ height: 100%;
2034
+ overflow: hidden;
1971
2035
  }
1972
- @-webkit-keyframes pfadeIn {
1973
- 0% {
1974
- opacity: 0
1975
- }
1976
2036
 
1977
- to {
1978
- opacity: 1
1979
- }
2037
+ #page-list {
2038
+ position: relative;
2039
+ width: 100%;
2040
+ height: 100%;
2041
+ max-width: 800px;
2042
+ margin: 0 auto;
2043
+ z-index: 1
1980
2044
  }
1981
2045
 
1982
- @keyframes pfadeIn {
1983
- 0% {
1984
- opacity: 0
1985
- }
1986
-
1987
- to {
1988
- opacity: 1
1989
- }
2046
+ #page-list.hardware .eles {
2047
+ will-change: transform
1990
2048
  }
1991
- .fadeIn-enter-from {
1992
- transform: translateX(100%);
2049
+
2050
+ #page-list .bg-wrap {
2051
+ position: absolute;
2052
+ left: 0;
2053
+ top: 0;
2054
+ right: 0;
2055
+ bottom: 0;
2056
+ z-index: -1
1993
2057
  }
1994
- .fadeIn-leave-to {
1995
- transform: translateX(-100%);
2058
+
2059
+ #page-list .ani-pause .ani-wrap {
2060
+ animation-play-state: paused!important;
2061
+ -webkit-animation-play-state: paused!important
1996
2062
  }
1997
2063
 
1998
- .zoomIn-enter-active, .zoomIn-leave-active {
1999
- -webkit-animation: pzoomIn .6s linear both;
2000
- animation: pzoomIn .6s linear both
2001
- }
2002
- @-webkit-keyframes pzoomIn {
2003
- 0% {
2004
- -webkit-transform: scale3d(0,0,0);
2005
- transform: scale3d(0,0,0)
2006
- }
2064
+ #page-list .audio-wrap {
2065
+ z-index: 10
2007
2066
  }
2008
2067
 
2009
- @keyframes pzoomIn {
2010
- 0% {
2011
- -webkit-transform: scale3d(0,0,0);
2012
- transform: scale3d(0,0,0)
2013
- }
2014
- }
2015
- .slide-enter-from {
2016
- transform: translateX(100%);
2017
- }
2018
- .slide-leave-to {
2019
- transform: translateX(-100%);
2068
+ #page-list .audio-wrap,#page-list .page-item {
2069
+ position: absolute;
2070
+ left: 0;
2071
+ top: 0;
2072
+ right: 0;
2073
+ bottom: 0
2020
2074
  }
2021
2075
 
2022
- .btFadeIn-enter-active, .btFadeIn-leave-active {
2023
- -webkit-animation: btFadeInTop .6s ease both;
2024
- animation: btFadeInTop .6s ease both
2025
- }
2026
- @keyframes btFadeInTop {
2027
- 0% {
2028
- opacity: 0;
2029
- -webkit-transform: translate3d(0,100%,0);
2030
- transform: translate3d(0,100%,0)
2031
- }
2076
+ #page-list .page-item {
2077
+ z-index: 0;
2078
+ overflow: hidden;
2079
+ display: none;
2080
+ visibility: hidden;
2081
+ transform-style: preserve-3d;
2082
+ -webkit-backface-visibility: hidden;
2083
+ backface-visibility: hidden;
2084
+ transition-timing-function: cubic-bezier(.1,.57,.1,1)
2032
2085
  }
2033
2086
 
2034
- .btFadeIn-enter-from {
2035
- transform: translateX(100%);
2036
- }
2037
- .btFadeIn-leave-to {
2038
- transform: translateX(-100%);
2087
+ #page-list .page-item .count-down {
2088
+ display: none
2039
2089
  }
2040
2090
 
2041
- .hideSoon-enter-active, .hideSoon-leave-active {
2042
- visibility: hidden
2043
- }
2044
- .hideSoon-enter-from {
2045
- transform: translateX(100%);
2046
- }
2047
- .hideSoon-leave-to {
2048
- transform: translateX(-100%);
2091
+ #page-list .page-item .has-ani {
2092
+ display: none!important
2049
2093
  }
2050
2094
 
2051
- .upSlide-enter-active, .upSlide-leave-active {
2052
- transition: transform 0.3s, opacity 0.3s;
2053
- }
2054
- .upSlide-enter-from, .upSlide-leave-to {
2055
- transform: translateY(-100%);
2056
- opacity: 0;
2095
+ #page-list .page-item .ele-effect,#page-list .page-item .page-bg {
2096
+ display: none
2057
2097
  }
2058
- .upSlide-enter-to, .upSlide-leave-from {
2059
- transform: translateY(0);
2060
- opacity: 1;
2098
+
2099
+ #page-list .page-item .limit-ani .ani-wrap {
2100
+ animation: none!important
2061
2101
  }
2062
2102
 
2063
- .downSlide-enter-active, .downSlide-leave-active {
2064
- transition: transform 0.3s, opacity 0.3s;
2103
+ #page-list .page-item .ani-pause .ani-wrap {
2104
+ animation-play-state: paused!important;
2105
+ -webkit-animation-play-state: paused!important
2065
2106
  }
2066
- .downSlide-enter-from, .downSlide-leave-to {
2067
- transform: translateY(100%);
2068
- opacity: 0;
2107
+
2108
+ #page-list .page-item .showAniEle .has-ani {
2109
+ display: block!important
2069
2110
  }
2070
- .downSlide-enter-to, .downSlide-leave-from {
2071
- transform: translateY(0);
2072
- opacity: 1;
2111
+
2112
+ #page-list .page-item .showAniEle .page-bg {
2113
+ display: block
2073
2114
  }
2074
2115
 
2075
- .leftSlide-enter-active, .leftSlide-leave-active {
2076
- -webkit-animation: leftSlide .7s ease both;
2077
- animation: leftSlide .7s ease both
2116
+ #page-list .page-item .scroll-wrap {
2117
+ position: relative;
2118
+ width: 100%;
2119
+ overflow: hidden
2078
2120
  }
2079
- @-webkit-keyframes leftSlide {
2080
- 0% {
2081
- -webkit-transform: translateX(-100%);
2082
- transform: translateX(-100%)
2083
- }
2084
2121
 
2085
- to {
2086
- -webkit-transform: translateX(0);
2087
- transform: translateX(0)
2088
- }
2122
+ #page-list .page-item .amap-maps {
2123
+ display: none
2089
2124
  }
2090
2125
 
2091
- @keyframes leftSlide {
2092
- 0% {
2093
- -webkit-transform: translateX(-100%);
2094
- transform: translateX(-100%)
2095
- }
2126
+ #page-list .page-item.current {
2127
+ z-index: 1;
2128
+ display: block;
2129
+ visibility: visible
2130
+ }
2096
2131
 
2097
- to {
2098
- -webkit-transform: translateX(0);
2099
- transform: translateX(0)
2100
- }
2132
+ #page-list .page-item.current .amap-maps,#page-list .page-item.current .count-down,#page-list .page-item.current .page-wrap .ele-effect {
2133
+ display: block
2101
2134
  }
2102
- .leftSlide-enter-from {
2103
- transform: translateX(100%);
2135
+
2136
+ #page-list .page-item.current .page-wrap .eles {
2137
+ text-align: left
2104
2138
  }
2105
- .leftSlide-leave-to {
2106
- transform: translateX(-100%);
2139
+
2140
+ #page-list .page-item.current .page-wrap .page-bg {
2141
+ display: block
2107
2142
  }
2108
2143
 
2109
- .rightSlide-enter-active, .rightSlide-leave-active {
2110
- -webkit-animation: rightSlide .7s ease both;
2111
- animation: rightSlide .7s ease both
2144
+ #page-list .page-item.current .page-wrap .has-ani {
2145
+ display: block!important
2112
2146
  }
2113
- @-webkit-keyframes rightSlide {
2114
- 0% {
2115
- -webkit-transform: translateX(100%);
2116
- transform: translateX(100%)
2117
- }
2118
2147
 
2119
- to {
2120
- -webkit-transform: translateX(0);
2121
- transform: translateX(0)
2122
- }
2148
+ #page-list .page-item.visibility {
2149
+ display: block;
2150
+ visibility: hidden
2123
2151
  }
2124
2152
 
2125
- @keyframes rightSlide {
2126
- 0% {
2127
- -webkit-transform: translateX(100%);
2128
- transform: translateX(100%)
2129
- }
2153
+ #page-list .page-item.active {
2154
+ z-index: 2;
2155
+ visibility: visible
2156
+ }
2130
2157
 
2131
- to {
2132
- -webkit-transform: translateX(0);
2133
- transform: translateX(0)
2134
- }
2158
+ #page-list .page-item.active .amap-maps,#page-list .page-item.active .count-down {
2159
+ display: block
2135
2160
  }
2136
2161
 
2137
- .rightSlide-enter-from {
2138
- transform: translateX(100%);
2162
+ #page-list .page-item .page-wrap {
2163
+ position: relative;
2164
+ width: 100%;
2165
+ height: 100%;
2166
+ overflow: hidden;
2167
+ z-index: 1
2139
2168
  }
2140
- .rightSlide-leave-to {
2141
- transform: translateX(-100%);
2169
+
2170
+ #page-list .page-item .page-wrap .ele-wrap,#page-list .page-item .page-wrap .page-bg {
2171
+ position: absolute;
2172
+ right: 0;
2173
+ left: 0;
2174
+ top: 0;
2175
+ bottom: 0;
2176
+ width: 100%;
2177
+ height: 100%;
2178
+ overflow: hidden
2142
2179
  }
2143
- * {
2144
- -webkit-box-sizing: border-box;
2145
- box-sizing: border-box;
2146
- white-space: normal;
2147
- word-break: break-all
2180
+
2181
+ #page-list .page-item .page-wrap .page-bg {
2182
+ background-size: cover;
2183
+ background-repeat: no-repeat;
2184
+ background-position: 50% 50%;
2185
+ z-index: 0
2148
2186
  }
2149
2187
 
2188
+ #page-list .page-item .page-wrap .ele-wrap {
2189
+ z-index: 1
2190
+ }
2150
2191
 
2192
+ #page-list .page-item .page-wrap .eles {
2193
+ position: absolute
2194
+ }
2151
2195
 
2152
- @-webkit-keyframes slideToBottom {
2153
- to {
2154
- -webkit-transform: translateY(100%);
2155
- transform: translateY(100%)
2156
- }
2196
+ .no-ani .ani-wrap,.no-ani .ele-text-long {
2197
+ animation: none!important
2157
2198
  }
2158
2199
 
2159
- @keyframes slideToBottom {
2160
- to {
2161
- -webkit-transform: translateY(100%);
2162
- transform: translateY(100%)
2163
- }
2200
+ .scroll-mode .page-container {
2201
+ position: relative;
2202
+ min-height: 100vh;
2164
2203
  }
2165
2204
 
2166
- @-webkit-keyframes slideFromTop {
2167
- 0% {
2205
+ /* 页面切换动画 */
2206
+ /* 过渡动画示例 */
2207
+ .slide-enter-active, .slide-leave-active {
2208
+ -webkit-animation: slideToTop .6s ease-in both;
2209
+ animation: slideToTop .6s ease-in both
2210
+ }
2211
+ @-webkit-keyframes slideToTop {
2212
+ to {
2168
2213
  -webkit-transform: translateY(-100%);
2169
2214
  transform: translateY(-100%)
2170
2215
  }
2171
2216
  }
2172
2217
 
2173
- @keyframes slideFromTop {
2174
- 0% {
2218
+ @keyframes slideToTop {
2219
+ to {
2175
2220
  -webkit-transform: translateY(-100%);
2176
2221
  transform: translateY(-100%)
2177
2222
  }
2178
2223
  }
2179
-
2180
- @-webkit-keyframes slideFromBottom {
2181
- 0% {
2182
- -webkit-transform: translateY(100%);
2183
- transform: translateY(100%)
2184
- }
2224
+ .slide-enter-from {
2225
+ transform: translateX(100%);
2226
+ }
2227
+ .slide-leave-to {
2228
+ transform: translateX(-100%);
2185
2229
  }
2186
2230
 
2187
- @keyframes slideFromBottom {
2188
- 0% {
2189
- -webkit-transform: translateY(100%);
2190
- transform: translateY(100%)
2191
- }
2231
+ .rotateCube-enter-active, .rotateCube-leave-active {
2232
+ -webkit-transform-origin: 50% 100%;
2233
+ transform-origin: 50% 100%;
2234
+ -webkit-animation: rotateCubeTopOut .6s ease-in both;
2235
+ animation: rotateCubeTopOut .6s ease-in both
2236
+ }
2237
+ .rotateCube-enter-from {
2238
+ transform: translateX(100%);
2239
+ }
2240
+ .rotateCube-leave-to {
2241
+ transform: translateX(-100%);
2192
2242
  }
2193
2243
 
2194
- @-webkit-keyframes rotateCubeTopOut {
2195
- 50% {
2196
- -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2197
- transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2198
- -webkit-animation-timing-function: ease-out;
2199
- animation-timing-function: ease-out
2200
- }
2244
+ .wind-enter-active, .wind-leave-active {
2245
+ -webkit-animation: windOut .5s ease-in both;
2246
+ animation: windOut .5s ease-in both
2247
+ }
2248
+ .wind-enter-from {
2249
+ transform: translateX(100%);
2250
+ }
2251
+ .wind-leave-to {
2252
+ transform: translateX(-100%);
2253
+ }
2201
2254
 
2202
- to {
2203
- opacity: .3;
2204
- -webkit-transform: translateY(-100%) rotateX(90deg);
2205
- transform: translateY(-100%) rotateX(90deg)
2206
- }
2255
+ .popup-enter-active, .popup-leave-active {
2256
+ -webkit-transform-origin: 50% 100%;
2257
+ transform-origin: 50% 100%;
2258
+ -webkit-animation: rotateCarouselTopOut .7s ease both;
2259
+ animation: rotateCarouselTopOut .7s ease both
2260
+ }
2261
+ .popup-enter-from {
2262
+ transform: translateX(100%);
2263
+ }
2264
+ .popup-leave-to {
2265
+ transform: translateX(-100%);
2207
2266
  }
2208
2267
 
2209
- @keyframes rotateCubeTopOut {
2210
- 50% {
2211
- -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2212
- transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2213
- -webkit-animation-timing-function: ease-out;
2214
- animation-timing-function: ease-out
2215
- }
2268
+ .scaleUpDown-enter-active, .scaleUpDown-leave-active {
2269
+ -webkit-animation: scaleUp .7s ease both;
2270
+ animation: scaleUp .7s ease both
2271
+ }
2272
+ .scaleUpDown-enter-from {
2273
+ transform: translateX(100%);
2274
+ }
2275
+ .scaleUpDown-leave-to {
2276
+ transform: translateX(-100%);
2277
+ }
2216
2278
 
2217
- to {
2218
- opacity: .3;
2219
- -webkit-transform: translateY(-100%) rotateX(90deg);
2220
- transform: translateY(-100%) rotateX(90deg)
2221
- }
2279
+ .flipUpDown-enter-active, .flipUpDown-leave-active {
2280
+ -webkit-animation: rotatePushTop .7s ease both;
2281
+ animation: rotatePushTop .7s ease both
2282
+ }
2283
+ .flipUpDown-enter-from {
2284
+ transform: translateX(100%);
2285
+ }
2286
+ .flipUpDown-leave-to {
2287
+ transform: translateX(-100%);
2222
2288
  }
2223
2289
 
2224
- @-webkit-keyframes rotateCubeTopIn {
2225
- 0% {
2226
- opacity: .3;
2227
- -webkit-transform: translateY(100%) rotateX(-90deg);
2228
- transform: translateY(100%) rotateX(-90deg)
2290
+ .cover-enter-active, .cover-leave-active {
2291
+ -webkit-animation: coverInDown .5s ease both;
2292
+ animation: coverInDown .5s ease both
2293
+ }
2294
+ .cover-enter-from {
2295
+ transform: translateX(100%);
2296
+ }
2297
+ .cover-leave-to {
2298
+ transform: translateX(-100%);
2299
+ }
2300
+
2301
+ .inertia-enter-active, .inertia-leave-active {
2302
+ -webkit-animation: inertiaOut .6s ease both;
2303
+ animation: inertiaOut .6s ease both
2304
+ }
2305
+ @-webkit-keyframes inertiaOut {
2306
+ to {
2307
+ -webkit-transform: scale(.2);
2308
+ transform: scale(.2)
2229
2309
  }
2310
+ }
2230
2311
 
2231
- 50% {
2232
- -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2233
- transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2234
- -webkit-animation-timing-function: ease-out;
2235
- animation-timing-function: ease-out
2312
+ @keyframes inertiaOut {
2313
+ to {
2314
+ -webkit-transform: scale(.2);
2315
+ transform: scale(.2)
2236
2316
  }
2237
2317
  }
2318
+ .inertia-enter-from {
2319
+ transform: translateX(100%);
2320
+ }
2321
+ .inertia-leave-to {
2322
+ transform: translateX(-100%);
2323
+ }
2238
2324
 
2239
- @keyframes rotateCubeTopIn {
2325
+ .push-enter-active, .push-leave-active {
2326
+ -webkit-transform-origin: center top;
2327
+ transform-origin: center top;
2328
+ -webkit-animation: pushInTop .6s linear .2s both;
2329
+ animation: pushInTop .6s linear .2s both
2330
+ }
2331
+ @-webkit-keyframes pushInTop {
2240
2332
  0% {
2241
- opacity: .3;
2242
- -webkit-transform: translateY(100%) rotateX(-90deg);
2243
- transform: translateY(100%) rotateX(-90deg)
2333
+ -webkit-transform: perspective(700px) rotateX(-90deg);
2334
+ transform: perspective(700px) rotateX(-90deg)
2244
2335
  }
2336
+ }
2245
2337
 
2246
- 50% {
2247
- -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2248
- transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2249
- -webkit-animation-timing-function: ease-out;
2250
- animation-timing-function: ease-out
2338
+ @keyframes pushInTop {
2339
+ 0% {
2340
+ -webkit-transform: perspective(700px) rotateX(-90deg);
2341
+ transform: perspective(700px) rotateX(-90deg)
2251
2342
  }
2252
2343
  }
2344
+ .push-enter-from {
2345
+ transform: translateX(100%);
2346
+ }
2347
+ .push-leave-to {
2348
+ transform: translateX(-100%);
2349
+ }
2253
2350
 
2254
- @-webkit-keyframes rotateCubeBottomOut {
2255
- 50% {
2256
- -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2257
- transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2258
- -webkit-animation-timing-function: ease-out;
2259
- animation-timing-function: ease-out
2351
+ .drop-enter-active, .drop-leave-active {
2352
+ -webkit-transform-origin: 0 0;
2353
+ transform-origin: 0 0;
2354
+ -webkit-animation: dropOut .6s linear both;
2355
+ animation: dropOut .6s linear both
2356
+ }
2357
+ @-webkit-keyframes dropOut {
2358
+ 20% {
2359
+ -webkit-transform: rotate(5deg);
2360
+ transform: rotate(5deg)
2260
2361
  }
2261
2362
 
2262
2363
  to {
2263
- opacity: .3;
2264
- -webkit-transform: translateY(100%) rotateX(-90deg);
2265
- transform: translateY(100%) rotateX(-90deg)
2364
+ opacity: .6;
2365
+ -webkit-transform: translate3d(0,100%,0);
2366
+ transform: translate3d(0,100%,0)
2266
2367
  }
2267
2368
  }
2268
2369
 
2269
- @keyframes rotateCubeBottomOut {
2270
- 50% {
2271
- -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2272
- transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2273
- -webkit-animation-timing-function: ease-out;
2274
- animation-timing-function: ease-out
2370
+ @keyframes dropOut {
2371
+ 20% {
2372
+ -webkit-transform: rotate(5deg);
2373
+ transform: rotate(5deg)
2275
2374
  }
2276
2375
 
2277
2376
  to {
2278
- opacity: .3;
2279
- -webkit-transform: translateY(100%) rotateX(-90deg);
2280
- transform: translateY(100%) rotateX(-90deg)
2377
+ opacity: .6;
2378
+ -webkit-transform: translate3d(0,100%,0);
2379
+ transform: translate3d(0,100%,0)
2281
2380
  }
2282
2381
  }
2283
2382
 
2284
- @-webkit-keyframes rotateCubeBottomIn {
2383
+ .drop-enter-from {
2384
+ transform: translateX(100%);
2385
+ }
2386
+ .drop-leave-to {
2387
+ transform: translateX(-100%);
2388
+ }
2389
+
2390
+ .fadeIn-enter-active, .fadeIn-leave-active {
2391
+ -webkit-animation: pfadeIn .6s linear both;
2392
+ animation: pfadeIn .6s linear both
2393
+ }
2394
+ @-webkit-keyframes pfadeIn {
2285
2395
  0% {
2286
- opacity: .3;
2287
- -webkit-transform: translateY(-100%) rotateX(90deg);
2288
- transform: translateY(-100%) rotateX(90deg)
2396
+ opacity: 0
2289
2397
  }
2290
2398
 
2291
- 50% {
2292
- -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2293
- transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2294
- -webkit-animation-timing-function: ease-out;
2295
- animation-timing-function: ease-out
2399
+ to {
2400
+ opacity: 1
2296
2401
  }
2297
2402
  }
2298
2403
 
2299
- @keyframes rotateCubeBottomIn {
2404
+ @keyframes pfadeIn {
2300
2405
  0% {
2301
- opacity: .3;
2302
- -webkit-transform: translateY(-100%) rotateX(90deg);
2303
- transform: translateY(-100%) rotateX(90deg)
2304
- }
2305
-
2306
- 50% {
2307
- -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2308
- transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2309
- -webkit-animation-timing-function: ease-out;
2310
- animation-timing-function: ease-out
2406
+ opacity: 0
2311
2407
  }
2312
- }
2313
2408
 
2314
- @-webkit-keyframes windOut {
2315
2409
  to {
2316
- opacity: 0;
2317
- -webkit-transform: translateZ(-3000px) rotate(1turn);
2318
- transform: translateZ(-3000px) rotate(1turn)
2410
+ opacity: 1
2319
2411
  }
2320
2412
  }
2413
+ .fadeIn-enter-from {
2414
+ transform: translateX(100%);
2415
+ }
2416
+ .fadeIn-leave-to {
2417
+ transform: translateX(-100%);
2418
+ }
2321
2419
 
2322
- @keyframes windOut {
2323
- to {
2324
- opacity: 0;
2325
- -webkit-transform: translateZ(-3000px) rotate(1turn);
2326
- transform: translateZ(-3000px) rotate(1turn)
2420
+ .zoomIn-enter-active, .zoomIn-leave-active {
2421
+ -webkit-animation: pzoomIn .6s linear both;
2422
+ animation: pzoomIn .6s linear both
2423
+ }
2424
+ @-webkit-keyframes pzoomIn {
2425
+ 0% {
2426
+ -webkit-transform: scale3d(0,0,0);
2427
+ transform: scale3d(0,0,0)
2327
2428
  }
2328
2429
  }
2329
2430
 
2330
- @-webkit-keyframes windIn {
2431
+ @keyframes pzoomIn {
2331
2432
  0% {
2332
- opacity: 0;
2333
- -webkit-transform: translateZ(-3000px) rotate(-1turn);
2334
- transform: translateZ(-3000px) rotate(-1turn)
2433
+ -webkit-transform: scale3d(0,0,0);
2434
+ transform: scale3d(0,0,0)
2335
2435
  }
2336
2436
  }
2437
+ .slide-enter-from {
2438
+ transform: translateX(100%);
2439
+ }
2440
+ .slide-leave-to {
2441
+ transform: translateX(-100%);
2442
+ }
2337
2443
 
2338
- @keyframes windIn {
2444
+ .btFadeIn-enter-active, .btFadeIn-leave-active {
2445
+ -webkit-animation: btFadeInTop .6s ease both;
2446
+ animation: btFadeInTop .6s ease both
2447
+ }
2448
+ @keyframes btFadeInTop {
2339
2449
  0% {
2340
2450
  opacity: 0;
2341
- -webkit-transform: translateZ(-3000px) rotate(-1turn);
2342
- transform: translateZ(-3000px) rotate(-1turn)
2451
+ -webkit-transform: translate3d(0,100%,0);
2452
+ transform: translate3d(0,100%,0)
2343
2453
  }
2344
2454
  }
2345
2455
 
2346
- @-webkit-keyframes rotateCarouselTopOut {
2347
- to {
2348
- opacity: .3;
2349
- -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2350
- transform: translateY(-150%) scale(.4) rotateX(65deg)
2351
- }
2456
+ .btFadeIn-enter-from {
2457
+ transform: translateX(100%);
2458
+ }
2459
+ .btFadeIn-leave-to {
2460
+ transform: translateX(-100%);
2352
2461
  }
2353
2462
 
2354
- @keyframes rotateCarouselTopOut {
2355
- to {
2356
- opacity: .3;
2357
- -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2358
- transform: translateY(-150%) scale(.4) rotateX(65deg)
2359
- }
2463
+ .hideSoon-enter-active, .hideSoon-leave-active {
2464
+ visibility: hidden
2465
+ }
2466
+ .hideSoon-enter-from {
2467
+ transform: translateX(100%);
2468
+ }
2469
+ .hideSoon-leave-to {
2470
+ transform: translateX(-100%);
2360
2471
  }
2361
2472
 
2362
- @-webkit-keyframes rotateCarouselTopIn {
2363
- 0% {
2364
- opacity: .3;
2365
- -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2366
- transform: translateY(150%) scale(.4) rotateX(-65deg)
2367
- }
2473
+ .upSlide-enter-active, .upSlide-leave-active {
2474
+ transition: transform 0.3s, opacity 0.3s;
2475
+ }
2476
+ .upSlide-enter-from, .upSlide-leave-to {
2477
+ transform: translateY(-100%);
2478
+ opacity: 0;
2479
+ }
2480
+ .upSlide-enter-to, .upSlide-leave-from {
2481
+ transform: translateY(0);
2482
+ opacity: 1;
2368
2483
  }
2369
2484
 
2370
- @keyframes rotateCarouselTopIn {
2371
- 0% {
2372
- opacity: .3;
2373
- -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2374
- transform: translateY(150%) scale(.4) rotateX(-65deg)
2375
- }
2485
+ .downSlide-enter-active, .downSlide-leave-active {
2486
+ transition: transform 0.3s, opacity 0.3s;
2487
+ }
2488
+ .downSlide-enter-from, .downSlide-leave-to {
2489
+ transform: translateY(100%);
2490
+ opacity: 0;
2491
+ }
2492
+ .downSlide-enter-to, .downSlide-leave-from {
2493
+ transform: translateY(0);
2494
+ opacity: 1;
2376
2495
  }
2377
2496
 
2378
- @-webkit-keyframes rotateCarouselBottomOut {
2379
- to {
2380
- opacity: .3;
2381
- -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2382
- transform: translateY(150%) scale(.4) rotateX(-65deg)
2383
- }
2497
+ .leftSlide-enter-active, .leftSlide-leave-active {
2498
+ -webkit-animation: leftSlide .7s ease both;
2499
+ animation: leftSlide .7s ease both
2384
2500
  }
2501
+ @-webkit-keyframes leftSlide {
2502
+ 0% {
2503
+ -webkit-transform: translateX(-100%);
2504
+ transform: translateX(-100%)
2505
+ }
2385
2506
 
2386
- @keyframes rotateCarouselBottomOut {
2387
2507
  to {
2388
- opacity: .3;
2389
- -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2390
- transform: translateY(150%) scale(.4) rotateX(-65deg)
2508
+ -webkit-transform: translateX(0);
2509
+ transform: translateX(0)
2391
2510
  }
2392
2511
  }
2393
2512
 
2394
- @-webkit-keyframes rotateCarouselBottomIn {
2513
+ @keyframes leftSlide {
2395
2514
  0% {
2396
- opacity: .3;
2397
- -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2398
- transform: translateY(-150%) scale(.4) rotateX(65deg)
2515
+ -webkit-transform: translateX(-100%);
2516
+ transform: translateX(-100%)
2399
2517
  }
2400
- }
2401
2518
 
2402
- @keyframes rotateCarouselBottomIn {
2403
- 0% {
2404
- opacity: .3;
2405
- -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2406
- transform: translateY(-150%) scale(.4) rotateX(65deg)
2519
+ to {
2520
+ -webkit-transform: translateX(0);
2521
+ transform: translateX(0)
2407
2522
  }
2408
2523
  }
2524
+ .leftSlide-enter-from {
2525
+ transform: translateX(100%);
2526
+ }
2527
+ .leftSlide-leave-to {
2528
+ transform: translateX(-100%);
2529
+ }
2409
2530
 
2410
- @-webkit-keyframes scaleDown {
2411
- to {
2412
- opacity: 0;
2413
- -webkit-transform: scale(.8);
2414
- transform: scale(.8)
2415
- }
2531
+ .rightSlide-enter-active, .rightSlide-leave-active {
2532
+ -webkit-animation: rightSlide .7s ease both;
2533
+ animation: rightSlide .7s ease both
2416
2534
  }
2535
+ @-webkit-keyframes rightSlide {
2536
+ 0% {
2537
+ -webkit-transform: translateX(100%);
2538
+ transform: translateX(100%)
2539
+ }
2417
2540
 
2418
- @keyframes scaleDown {
2419
2541
  to {
2420
- opacity: 0;
2421
- -webkit-transform: scale(.8);
2422
- transform: scale(.8)
2542
+ -webkit-transform: translateX(0);
2543
+ transform: translateX(0)
2423
2544
  }
2424
2545
  }
2425
2546
 
2426
- @-webkit-keyframes scaleUp {
2547
+ @keyframes rightSlide {
2427
2548
  0% {
2428
- opacity: 0;
2429
- -webkit-transform: scale(.8);
2430
- transform: scale(.8)
2549
+ -webkit-transform: translateX(100%);
2550
+ transform: translateX(100%)
2431
2551
  }
2432
- }
2433
2552
 
2434
- @keyframes scaleUp {
2435
- 0% {
2436
- opacity: 0;
2437
- -webkit-transform: scale(.8);
2438
- transform: scale(.8)
2553
+ to {
2554
+ -webkit-transform: translateX(0);
2555
+ transform: translateX(0)
2439
2556
  }
2440
2557
  }
2441
2558
 
2442
- @-webkit-keyframes scaleUpDown {
2443
- 0% {
2444
- opacity: 0;
2445
- -webkit-transform: scale(1.2);
2446
- transform: scale(1.2)
2447
- }
2559
+ .rightSlide-enter-from {
2560
+ transform: translateX(100%);
2448
2561
  }
2449
-
2450
- @keyframes scaleUpDown {
2451
- 0% {
2452
- opacity: 0;
2453
- -webkit-transform: scale(1.2);
2454
- transform: scale(1.2)
2455
- }
2562
+ .rightSlide-leave-to {
2563
+ transform: translateX(-100%);
2564
+ }
2565
+ * {
2566
+ -webkit-box-sizing: border-box;
2567
+ box-sizing: border-box;
2568
+ white-space: normal;
2569
+ word-break: break-all
2456
2570
  }
2457
2571
 
2458
- @-webkit-keyframes scaleDownUp {
2572
+
2573
+
2574
+ @-webkit-keyframes slideToBottom {
2459
2575
  to {
2460
- opacity: 0;
2461
- -webkit-transform: scale(1.2);
2462
- transform: scale(1.2)
2576
+ -webkit-transform: translateY(100%);
2577
+ transform: translateY(100%)
2463
2578
  }
2464
2579
  }
2465
2580
 
2466
- @keyframes scaleDownUp {
2581
+ @keyframes slideToBottom {
2467
2582
  to {
2468
- opacity: 0;
2469
- -webkit-transform: scale(1.2);
2470
- transform: scale(1.2)
2583
+ -webkit-transform: translateY(100%);
2584
+ transform: translateY(100%)
2471
2585
  }
2472
2586
  }
2473
2587
 
2474
- @-webkit-keyframes scaleDownCenter {
2475
- to {
2476
- opacity: 0;
2477
- -webkit-transform: scale(.7);
2478
- transform: scale(.7)
2588
+ @-webkit-keyframes slideFromTop {
2589
+ 0% {
2590
+ -webkit-transform: translateY(-100%);
2591
+ transform: translateY(-100%)
2479
2592
  }
2480
2593
  }
2481
2594
 
2482
- @keyframes scaleDownCenter {
2483
- to {
2484
- opacity: 0;
2485
- -webkit-transform: scale(.7);
2486
- transform: scale(.7)
2595
+ @keyframes slideFromTop {
2596
+ 0% {
2597
+ -webkit-transform: translateY(-100%);
2598
+ transform: translateY(-100%)
2487
2599
  }
2488
2600
  }
2489
2601
 
2490
- @-webkit-keyframes scaleUpCenter {
2602
+ @-webkit-keyframes slideFromBottom {
2491
2603
  0% {
2492
- opacity: 0;
2493
- -webkit-transform: scale(.7);
2494
- transform: scale(.7)
2604
+ -webkit-transform: translateY(100%);
2605
+ transform: translateY(100%)
2495
2606
  }
2496
2607
  }
2497
2608
 
2498
- @keyframes scaleUpCenter {
2609
+ @keyframes slideFromBottom {
2499
2610
  0% {
2500
- opacity: 0;
2501
- -webkit-transform: scale(.7);
2502
- transform: scale(.7)
2611
+ -webkit-transform: translateY(100%);
2612
+ transform: translateY(100%)
2503
2613
  }
2504
2614
  }
2505
2615
 
2506
- @-webkit-keyframes rotatePushTop {
2507
- to {
2508
- opacity: 0;
2509
- -webkit-transform: rotateX(-90deg);
2510
- transform: rotateX(-90deg)
2616
+ @-webkit-keyframes rotateCubeTopOut {
2617
+ 50% {
2618
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2619
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2620
+ -webkit-animation-timing-function: ease-out;
2621
+ animation-timing-function: ease-out
2511
2622
  }
2512
- }
2513
2623
 
2514
- @keyframes rotatePushTop {
2515
2624
  to {
2516
- opacity: 0;
2517
- -webkit-transform: rotateX(-90deg);
2518
- transform: rotateX(-90deg)
2625
+ opacity: .3;
2626
+ -webkit-transform: translateY(-100%) rotateX(90deg);
2627
+ transform: translateY(-100%) rotateX(90deg)
2519
2628
  }
2520
2629
  }
2521
2630
 
2522
- @-webkit-keyframes rotatePushBottom {
2523
- to {
2524
- opacity: 0;
2525
- -webkit-transform: rotateX(90deg);
2526
- transform: rotateX(90deg)
2631
+ @keyframes rotateCubeTopOut {
2632
+ 50% {
2633
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2634
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2635
+ -webkit-animation-timing-function: ease-out;
2636
+ animation-timing-function: ease-out
2527
2637
  }
2528
- }
2529
2638
 
2530
- @keyframes rotatePushBottom {
2531
2639
  to {
2532
- opacity: 0;
2533
- -webkit-transform: rotateX(90deg);
2534
- transform: rotateX(90deg)
2640
+ opacity: .3;
2641
+ -webkit-transform: translateY(-100%) rotateX(90deg);
2642
+ transform: translateY(-100%) rotateX(90deg)
2535
2643
  }
2536
2644
  }
2537
2645
 
2538
- @-webkit-keyframes rotatePullTop {
2646
+ @-webkit-keyframes rotateCubeTopIn {
2539
2647
  0% {
2540
- opacity: 0;
2541
- -webkit-transform: rotateX(-90deg);
2542
- transform: rotateX(-90deg)
2648
+ opacity: .3;
2649
+ -webkit-transform: translateY(100%) rotateX(-90deg);
2650
+ transform: translateY(100%) rotateX(-90deg)
2543
2651
  }
2544
- }
2545
2652
 
2546
- @keyframes rotatePullTop {
2547
- 0% {
2548
- opacity: 0;
2549
- -webkit-transform: rotateX(-90deg);
2550
- transform: rotateX(-90deg)
2653
+ 50% {
2654
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2655
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2656
+ -webkit-animation-timing-function: ease-out;
2657
+ animation-timing-function: ease-out
2551
2658
  }
2552
2659
  }
2553
2660
 
2554
- @-webkit-keyframes rotatePullBottom {
2661
+ @keyframes rotateCubeTopIn {
2555
2662
  0% {
2556
- opacity: 0;
2557
- -webkit-transform: rotateX(90deg);
2558
- transform: rotateX(90deg)
2663
+ opacity: .3;
2664
+ -webkit-transform: translateY(100%) rotateX(-90deg);
2665
+ transform: translateY(100%) rotateX(-90deg)
2559
2666
  }
2560
- }
2561
2667
 
2562
- @keyframes rotatePullBottom {
2563
- 0% {
2564
- opacity: 0;
2565
- -webkit-transform: rotateX(90deg);
2566
- transform: rotateX(90deg)
2668
+ 50% {
2669
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2670
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2671
+ -webkit-animation-timing-function: ease-out;
2672
+ animation-timing-function: ease-out
2567
2673
  }
2568
2674
  }
2569
2675
 
2570
- @-webkit-keyframes coverInUp {
2571
- 0% {
2572
- -webkit-transform: translate3d(0,-100%,0);
2573
- transform: translate3d(0,-100%,0)
2676
+ @-webkit-keyframes rotateCubeBottomOut {
2677
+ 50% {
2678
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2679
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2680
+ -webkit-animation-timing-function: ease-out;
2681
+ animation-timing-function: ease-out
2574
2682
  }
2575
- }
2576
2683
 
2577
- @keyframes coverInUp {
2578
- 0% {
2579
- -webkit-transform: translate3d(0,-100%,0);
2580
- transform: translate3d(0,-100%,0)
2684
+ to {
2685
+ opacity: .3;
2686
+ -webkit-transform: translateY(100%) rotateX(-90deg);
2687
+ transform: translateY(100%) rotateX(-90deg)
2581
2688
  }
2582
2689
  }
2583
2690
 
2584
- @-webkit-keyframes coverInDown {
2585
- 0% {
2586
- -webkit-transform: translate3d(0,100%,0);
2587
- transform: translate3d(0,100%,0)
2691
+ @keyframes rotateCubeBottomOut {
2692
+ 50% {
2693
+ -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2694
+ transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
2695
+ -webkit-animation-timing-function: ease-out;
2696
+ animation-timing-function: ease-out
2697
+ }
2698
+
2699
+ to {
2700
+ opacity: .3;
2701
+ -webkit-transform: translateY(100%) rotateX(-90deg);
2702
+ transform: translateY(100%) rotateX(-90deg)
2588
2703
  }
2589
2704
  }
2590
2705
 
2591
- @keyframes coverInDown {
2706
+ @-webkit-keyframes rotateCubeBottomIn {
2592
2707
  0% {
2593
- -webkit-transform: translate3d(0,100%,0);
2594
- transform: translate3d(0,100%,0)
2708
+ opacity: .3;
2709
+ -webkit-transform: translateY(-100%) rotateX(90deg);
2710
+ transform: translateY(-100%) rotateX(90deg)
2595
2711
  }
2596
- }
2597
2712
 
2598
- .rotateInReverse {
2599
- -webkit-animation-name: rotateInReverse;
2600
- animation-name: rotateInReverse
2713
+ 50% {
2714
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2715
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2716
+ -webkit-animation-timing-function: ease-out;
2717
+ animation-timing-function: ease-out
2718
+ }
2601
2719
  }
2602
2720
 
2603
- @-webkit-keyframes rotateInReverse {
2721
+ @keyframes rotateCubeBottomIn {
2604
2722
  0% {
2605
- opacity: 0;
2606
- -webkit-transform: rotate(200deg);
2607
- transform: rotate(200deg);
2608
- -webkit-transform-origin: center;
2609
- transform-origin: center
2723
+ opacity: .3;
2724
+ -webkit-transform: translateY(-100%) rotateX(90deg);
2725
+ transform: translateY(-100%) rotateX(90deg)
2610
2726
  }
2611
2727
 
2612
- to {
2613
- opacity: 1;
2614
- -webkit-transform: none;
2615
- transform: none;
2616
- -webkit-transform-origin: center;
2617
- transform-origin: center
2728
+ 50% {
2729
+ -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2730
+ transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
2731
+ -webkit-animation-timing-function: ease-out;
2732
+ animation-timing-function: ease-out
2618
2733
  }
2619
2734
  }
2620
2735
 
2621
- @keyframes rotateInReverse {
2622
- 0% {
2736
+ @-webkit-keyframes windOut {
2737
+ to {
2623
2738
  opacity: 0;
2624
- -webkit-transform: rotate(200deg);
2625
- transform: rotate(200deg);
2626
- -webkit-transform-origin: center;
2627
- transform-origin: center
2739
+ -webkit-transform: translateZ(-3000px) rotate(1turn);
2740
+ transform: translateZ(-3000px) rotate(1turn)
2628
2741
  }
2742
+ }
2629
2743
 
2744
+ @keyframes windOut {
2630
2745
  to {
2631
- opacity: 1;
2632
- -webkit-transform: none;
2633
- transform: none;
2634
- -webkit-transform-origin: center;
2635
- transform-origin: center
2746
+ opacity: 0;
2747
+ -webkit-transform: translateZ(-3000px) rotate(1turn);
2748
+ transform: translateZ(-3000px) rotate(1turn)
2636
2749
  }
2637
2750
  }
2638
2751
 
2639
- .zoomInBig {
2640
- -webkit-animation-name: zoomInBig;
2641
- animation-name: zoomInBig;
2642
- -webkit-animation-timing-function: cubic-bezier(0,.44,.75,.99);
2643
- animation-timing-function: cubic-bezier(0,.44,.75,.99)
2752
+ @-webkit-keyframes windIn {
2753
+ 0% {
2754
+ opacity: 0;
2755
+ -webkit-transform: translateZ(-3000px) rotate(-1turn);
2756
+ transform: translateZ(-3000px) rotate(-1turn)
2757
+ }
2644
2758
  }
2645
2759
 
2646
- @-webkit-keyframes zoomInBig {
2760
+ @keyframes windIn {
2647
2761
  0% {
2648
2762
  opacity: 0;
2649
- -webkit-transform: scale3d(2,2,2);
2650
- transform: scale3d(2,2,2)
2763
+ -webkit-transform: translateZ(-3000px) rotate(-1turn);
2764
+ transform: translateZ(-3000px) rotate(-1turn)
2651
2765
  }
2766
+ }
2652
2767
 
2653
- 50% {
2654
- opacity: 1
2768
+ @-webkit-keyframes rotateCarouselTopOut {
2769
+ to {
2770
+ opacity: .3;
2771
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2772
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
2655
2773
  }
2774
+ }
2656
2775
 
2657
- 80% {
2658
- -webkit-transform: scaleX(1);
2659
- transform: scaleX(1)
2776
+ @keyframes rotateCarouselTopOut {
2777
+ to {
2778
+ opacity: .3;
2779
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2780
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
2660
2781
  }
2661
2782
  }
2662
2783
 
2663
- @keyframes zoomInBig {
2784
+ @-webkit-keyframes rotateCarouselTopIn {
2664
2785
  0% {
2665
- opacity: 0;
2666
- -webkit-transform: scale3d(2,2,2);
2667
- transform: scale3d(2,2,2)
2668
- }
2669
-
2670
- 50% {
2671
- opacity: 1
2786
+ opacity: .3;
2787
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2788
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
2672
2789
  }
2790
+ }
2673
2791
 
2674
- 80% {
2675
- -webkit-transform: scaleX(1);
2676
- transform: scaleX(1)
2792
+ @keyframes rotateCarouselTopIn {
2793
+ 0% {
2794
+ opacity: .3;
2795
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2796
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
2677
2797
  }
2678
2798
  }
2679
2799
 
2680
- .flyIn {
2681
- -webkit-animation-name: flyIn;
2682
- animation-name: flyIn
2800
+ @-webkit-keyframes rotateCarouselBottomOut {
2801
+ to {
2802
+ opacity: .3;
2803
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2804
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
2805
+ }
2683
2806
  }
2684
2807
 
2685
- @-webkit-keyframes flyIn {
2686
- 0%,20%,40%,60%,80%,to {
2687
- -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
2688
- transition-timing-function: cubic-bezier(.215,.61,.355,1)
2808
+ @keyframes rotateCarouselBottomOut {
2809
+ to {
2810
+ opacity: .3;
2811
+ -webkit-transform: translateY(150%) scale(.4) rotateX(-65deg);
2812
+ transform: translateY(150%) scale(.4) rotateX(-65deg)
2689
2813
  }
2814
+ }
2690
2815
 
2816
+ @-webkit-keyframes rotateCarouselBottomIn {
2691
2817
  0% {
2692
- opacity: 0;
2693
- -webkit-transform: scale3d(2,2,2);
2694
- transform: scale3d(2,2,2)
2695
- }
2696
-
2697
- 40% {
2698
- -webkit-transform: scale3d(.9,.9,.9);
2699
- transform: scale3d(.9,.9,.9)
2818
+ opacity: .3;
2819
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2820
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
2700
2821
  }
2822
+ }
2701
2823
 
2702
- 60% {
2703
- -webkit-transform: scale3d(1.03,1.03,1.03);
2704
- transform: scale3d(1.03,1.03,1.03)
2824
+ @keyframes rotateCarouselBottomIn {
2825
+ 0% {
2826
+ opacity: .3;
2827
+ -webkit-transform: translateY(-150%) scale(.4) rotateX(65deg);
2828
+ transform: translateY(-150%) scale(.4) rotateX(65deg)
2705
2829
  }
2830
+ }
2706
2831
 
2707
- 80% {
2708
- opacity: 1;
2709
- -webkit-transform: scale3d(.97,.97,.97);
2710
- transform: scale3d(.97,.97,.97)
2832
+ @-webkit-keyframes scaleDown {
2833
+ to {
2834
+ opacity: 0;
2835
+ -webkit-transform: scale(.8);
2836
+ transform: scale(.8)
2711
2837
  }
2838
+ }
2712
2839
 
2840
+ @keyframes scaleDown {
2713
2841
  to {
2714
- -webkit-transform: scaleX(1);
2715
- transform: scaleX(1)
2842
+ opacity: 0;
2843
+ -webkit-transform: scale(.8);
2844
+ transform: scale(.8)
2716
2845
  }
2717
2846
  }
2718
2847
 
2719
- @keyframes flyIn {
2720
- 0%,20%,40%,60%,80%,to {
2721
- -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
2722
- transition-timing-function: cubic-bezier(.215,.61,.355,1)
2848
+ @-webkit-keyframes scaleUp {
2849
+ 0% {
2850
+ opacity: 0;
2851
+ -webkit-transform: scale(.8);
2852
+ transform: scale(.8)
2723
2853
  }
2854
+ }
2724
2855
 
2856
+ @keyframes scaleUp {
2725
2857
  0% {
2726
2858
  opacity: 0;
2727
- -webkit-transform: scale3d(2,2,2);
2728
- transform: scale3d(2,2,2)
2859
+ -webkit-transform: scale(.8);
2860
+ transform: scale(.8)
2729
2861
  }
2862
+ }
2730
2863
 
2731
- 40% {
2732
- -webkit-transform: scale3d(.9,.9,.9);
2733
- transform: scale3d(.9,.9,.9)
2864
+ @-webkit-keyframes scaleUpDown {
2865
+ 0% {
2866
+ opacity: 0;
2867
+ -webkit-transform: scale(1.2);
2868
+ transform: scale(1.2)
2734
2869
  }
2870
+ }
2735
2871
 
2736
- 60% {
2737
- -webkit-transform: scale3d(1.03,1.03,1.03);
2738
- transform: scale3d(1.03,1.03,1.03)
2872
+ @keyframes scaleUpDown {
2873
+ 0% {
2874
+ opacity: 0;
2875
+ -webkit-transform: scale(1.2);
2876
+ transform: scale(1.2)
2739
2877
  }
2878
+ }
2740
2879
 
2741
- 80% {
2742
- opacity: 1;
2743
- -webkit-transform: scale3d(.97,.97,.97);
2744
- transform: scale3d(.97,.97,.97)
2880
+ @-webkit-keyframes scaleDownUp {
2881
+ to {
2882
+ opacity: 0;
2883
+ -webkit-transform: scale(1.2);
2884
+ transform: scale(1.2)
2745
2885
  }
2886
+ }
2746
2887
 
2888
+ @keyframes scaleDownUp {
2747
2889
  to {
2748
- -webkit-transform: scaleX(1);
2749
- transform: scaleX(1)
2890
+ opacity: 0;
2891
+ -webkit-transform: scale(1.2);
2892
+ transform: scale(1.2)
2750
2893
  }
2751
2894
  }
2752
2895
 
2753
- .bounceSmall {
2754
- -webkit-animation-name: bounceSmall;
2755
- animation-name: bounceSmall;
2756
- -webkit-animation-timing-function: ease-out;
2757
- animation-timing-function: ease-out
2896
+ @-webkit-keyframes scaleDownCenter {
2897
+ to {
2898
+ opacity: 0;
2899
+ -webkit-transform: scale(.7);
2900
+ transform: scale(.7)
2901
+ }
2758
2902
  }
2759
2903
 
2760
- @-webkit-keyframes bounceSmall {
2761
- 0% {
2904
+ @keyframes scaleDownCenter {
2905
+ to {
2762
2906
  opacity: 0;
2763
- -webkit-transform: scale(1.7)
2907
+ -webkit-transform: scale(.7);
2908
+ transform: scale(.7)
2764
2909
  }
2910
+ }
2765
2911
 
2766
- 50% {
2767
- opacity: 1;
2768
- -webkit-transform: scale(.95)
2912
+ @-webkit-keyframes scaleUpCenter {
2913
+ 0% {
2914
+ opacity: 0;
2915
+ -webkit-transform: scale(.7);
2916
+ transform: scale(.7)
2769
2917
  }
2918
+ }
2770
2919
 
2771
- 80% {
2772
- -webkit-transform: scale(1.05)
2920
+ @keyframes scaleUpCenter {
2921
+ 0% {
2922
+ opacity: 0;
2923
+ -webkit-transform: scale(.7);
2924
+ transform: scale(.7)
2773
2925
  }
2926
+ }
2774
2927
 
2775
- 90% {
2776
- -webkit-transform: scale(.98)
2928
+ @-webkit-keyframes rotatePushTop {
2929
+ to {
2930
+ opacity: 0;
2931
+ -webkit-transform: rotateX(-90deg);
2932
+ transform: rotateX(-90deg)
2777
2933
  }
2934
+ }
2778
2935
 
2936
+ @keyframes rotatePushTop {
2779
2937
  to {
2780
- -webkit-transform: scale(1)
2938
+ opacity: 0;
2939
+ -webkit-transform: rotateX(-90deg);
2940
+ transform: rotateX(-90deg)
2781
2941
  }
2782
2942
  }
2783
2943
 
2784
- @keyframes bounceSmall {
2785
- 0% {
2944
+ @-webkit-keyframes rotatePushBottom {
2945
+ to {
2786
2946
  opacity: 0;
2787
- -webkit-transform: scale(1.7)
2947
+ -webkit-transform: rotateX(90deg);
2948
+ transform: rotateX(90deg)
2788
2949
  }
2950
+ }
2789
2951
 
2790
- 50% {
2791
- opacity: 1;
2792
- -webkit-transform: scale(.95)
2952
+ @keyframes rotatePushBottom {
2953
+ to {
2954
+ opacity: 0;
2955
+ -webkit-transform: rotateX(90deg);
2956
+ transform: rotateX(90deg)
2793
2957
  }
2958
+ }
2794
2959
 
2795
- 80% {
2796
- -webkit-transform: scale(1.05)
2960
+ @-webkit-keyframes rotatePullTop {
2961
+ 0% {
2962
+ opacity: 0;
2963
+ -webkit-transform: rotateX(-90deg);
2964
+ transform: rotateX(-90deg)
2797
2965
  }
2966
+ }
2798
2967
 
2799
- 90% {
2800
- -webkit-transform: scale(.98)
2968
+ @keyframes rotatePullTop {
2969
+ 0% {
2970
+ opacity: 0;
2971
+ -webkit-transform: rotateX(-90deg);
2972
+ transform: rotateX(-90deg)
2801
2973
  }
2974
+ }
2802
2975
 
2803
- to {
2804
- -webkit-transform: scale(1)
2976
+ @-webkit-keyframes rotatePullBottom {
2977
+ 0% {
2978
+ opacity: 0;
2979
+ -webkit-transform: rotateX(90deg);
2980
+ transform: rotateX(90deg)
2805
2981
  }
2806
2982
  }
2807
2983
 
2808
- .pullUp {
2809
- -webkit-transform-origin: 50% 100%;
2810
- transform-origin: 50% 100%;
2811
- -webkit-animation-name: pullUp;
2812
- animation-name: pullUp;
2813
- -webkit-animation-timing-function: ease-out;
2814
- animation-timing-function: ease-out
2984
+ @keyframes rotatePullBottom {
2985
+ 0% {
2986
+ opacity: 0;
2987
+ -webkit-transform: rotateX(90deg);
2988
+ transform: rotateX(90deg)
2989
+ }
2815
2990
  }
2816
2991
 
2817
- @-webkit-keyframes pullUp {
2818
- 0%,40%,60%,80%,99% {
2819
- -webkit-animation-timing-function: ease-out;
2820
- animation-timing-function: ease-out
2992
+ @-webkit-keyframes coverInUp {
2993
+ 0% {
2994
+ -webkit-transform: translate3d(0,-100%,0);
2995
+ transform: translate3d(0,-100%,0)
2821
2996
  }
2997
+ }
2822
2998
 
2999
+ @keyframes coverInUp {
2823
3000
  0% {
2824
- opacity: 0;
2825
- -webkit-transform: scaleY(.1);
2826
- transform: scaleY(.1);
2827
- -webkit-transform-origin: 50% 100%;
2828
- transform-origin: 50% 100%
3001
+ -webkit-transform: translate3d(0,-100%,0);
3002
+ transform: translate3d(0,-100%,0)
2829
3003
  }
3004
+ }
2830
3005
 
2831
- 40% {
2832
- opacity: 1;
2833
- -webkit-transform: scaleY(1.02);
2834
- transform: scaleY(1.02);
2835
- -webkit-transform-origin: 50% 100%;
2836
- transform-origin: 50% 100%
3006
+ @-webkit-keyframes coverInDown {
3007
+ 0% {
3008
+ -webkit-transform: translate3d(0,100%,0);
3009
+ transform: translate3d(0,100%,0)
2837
3010
  }
3011
+ }
2838
3012
 
2839
- 60% {
2840
- -webkit-transform: scaleY(.98);
2841
- transform: scaleY(.98);
2842
- -webkit-transform-origin: 50% 100%;
2843
- transform-origin: 50% 100%
3013
+ @keyframes coverInDown {
3014
+ 0% {
3015
+ -webkit-transform: translate3d(0,100%,0);
3016
+ transform: translate3d(0,100%,0)
2844
3017
  }
3018
+ }
2845
3019
 
2846
- 80% {
2847
- -webkit-transform: scaleY(1.01);
2848
- transform: scaleY(1.01);
2849
- -webkit-transform-origin: 50% 100%;
2850
- transform-origin: 50% 100%
2851
- }
3020
+ .rotateInReverse {
3021
+ -webkit-animation-name: rotateInReverse;
3022
+ animation-name: rotateInReverse
3023
+ }
2852
3024
 
2853
- 99% {
2854
- -webkit-transform: scaleY(1);
2855
- transform: scaleY(1);
2856
- -webkit-transform-origin: 50% 100%;
2857
- transform-origin: 50% 100%
3025
+ @-webkit-keyframes rotateInReverse {
3026
+ 0% {
3027
+ opacity: 0;
3028
+ -webkit-transform: rotate(200deg);
3029
+ transform: rotate(200deg);
3030
+ -webkit-transform-origin: center;
3031
+ transform-origin: center
2858
3032
  }
2859
3033
 
2860
3034
  to {
3035
+ opacity: 1;
2861
3036
  -webkit-transform: none;
2862
- transform: none
3037
+ transform: none;
3038
+ -webkit-transform-origin: center;
3039
+ transform-origin: center
2863
3040
  }
2864
3041
  }
2865
3042
 
2866
- @keyframes pullUp {
2867
- 0%,40%,60%,80%,99% {
2868
- -webkit-animation-timing-function: ease-out;
2869
- animation-timing-function: ease-out
2870
- }
2871
-
3043
+ @keyframes rotateInReverse {
2872
3044
  0% {
2873
3045
  opacity: 0;
2874
- -webkit-transform: scaleY(.1);
2875
- transform: scaleY(.1);
2876
- -webkit-transform-origin: 50% 100%;
2877
- transform-origin: 50% 100%
3046
+ -webkit-transform: rotate(200deg);
3047
+ transform: rotate(200deg);
3048
+ -webkit-transform-origin: center;
3049
+ transform-origin: center
2878
3050
  }
2879
3051
 
2880
- 40% {
3052
+ to {
2881
3053
  opacity: 1;
2882
- -webkit-transform: scaleY(1.02);
2883
- transform: scaleY(1.02);
2884
- -webkit-transform-origin: 50% 100%;
2885
- transform-origin: 50% 100%
3054
+ -webkit-transform: none;
3055
+ transform: none;
3056
+ -webkit-transform-origin: center;
3057
+ transform-origin: center
2886
3058
  }
3059
+ }
2887
3060
 
2888
- 60% {
2889
- -webkit-transform: scaleY(.98);
2890
- transform: scaleY(.98);
2891
- -webkit-transform-origin: 50% 100%;
2892
- transform-origin: 50% 100%
2893
- }
3061
+ .zoomInBig {
3062
+ -webkit-animation-name: zoomInBig;
3063
+ animation-name: zoomInBig;
3064
+ -webkit-animation-timing-function: cubic-bezier(0,.44,.75,.99);
3065
+ animation-timing-function: cubic-bezier(0,.44,.75,.99)
3066
+ }
2894
3067
 
2895
- 80% {
2896
- -webkit-transform: scaleY(1.01);
2897
- transform: scaleY(1.01);
2898
- -webkit-transform-origin: 50% 100%;
2899
- transform-origin: 50% 100%
3068
+ @-webkit-keyframes zoomInBig {
3069
+ 0% {
3070
+ opacity: 0;
3071
+ -webkit-transform: scale3d(2,2,2);
3072
+ transform: scale3d(2,2,2)
2900
3073
  }
2901
3074
 
2902
- 99% {
2903
- -webkit-transform: scaleY(1);
2904
- transform: scaleY(1);
2905
- -webkit-transform-origin: 50% 100%;
2906
- transform-origin: 50% 100%
3075
+ 50% {
3076
+ opacity: 1
2907
3077
  }
2908
3078
 
2909
- to {
2910
- -webkit-transform: none;
2911
- transform: none
3079
+ 80% {
3080
+ -webkit-transform: scaleX(1);
3081
+ transform: scaleX(1)
2912
3082
  }
2913
3083
  }
2914
3084
 
2915
- .pullDown {
2916
- -webkit-transform-origin: 50% 0;
2917
- transform-origin: 50% 0;
2918
- -webkit-animation-name: pullDown;
2919
- animation-name: pullDown;
3085
+ @keyframes zoomInBig {
3086
+ 0% {
3087
+ opacity: 0;
3088
+ -webkit-transform: scale3d(2,2,2);
3089
+ transform: scale3d(2,2,2)
3090
+ }
3091
+
3092
+ 50% {
3093
+ opacity: 1
3094
+ }
3095
+
3096
+ 80% {
3097
+ -webkit-transform: scaleX(1);
3098
+ transform: scaleX(1)
3099
+ }
3100
+ }
3101
+
3102
+ .flyIn {
3103
+ -webkit-animation-name: flyIn;
3104
+ animation-name: flyIn
3105
+ }
3106
+
3107
+ @-webkit-keyframes flyIn {
3108
+ 0%,20%,40%,60%,80%,to {
3109
+ -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
3110
+ transition-timing-function: cubic-bezier(.215,.61,.355,1)
3111
+ }
3112
+
3113
+ 0% {
3114
+ opacity: 0;
3115
+ -webkit-transform: scale3d(2,2,2);
3116
+ transform: scale3d(2,2,2)
3117
+ }
3118
+
3119
+ 40% {
3120
+ -webkit-transform: scale3d(.9,.9,.9);
3121
+ transform: scale3d(.9,.9,.9)
3122
+ }
3123
+
3124
+ 60% {
3125
+ -webkit-transform: scale3d(1.03,1.03,1.03);
3126
+ transform: scale3d(1.03,1.03,1.03)
3127
+ }
3128
+
3129
+ 80% {
3130
+ opacity: 1;
3131
+ -webkit-transform: scale3d(.97,.97,.97);
3132
+ transform: scale3d(.97,.97,.97)
3133
+ }
3134
+
3135
+ to {
3136
+ -webkit-transform: scaleX(1);
3137
+ transform: scaleX(1)
3138
+ }
3139
+ }
3140
+
3141
+ @keyframes flyIn {
3142
+ 0%,20%,40%,60%,80%,to {
3143
+ -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
3144
+ transition-timing-function: cubic-bezier(.215,.61,.355,1)
3145
+ }
3146
+
3147
+ 0% {
3148
+ opacity: 0;
3149
+ -webkit-transform: scale3d(2,2,2);
3150
+ transform: scale3d(2,2,2)
3151
+ }
3152
+
3153
+ 40% {
3154
+ -webkit-transform: scale3d(.9,.9,.9);
3155
+ transform: scale3d(.9,.9,.9)
3156
+ }
3157
+
3158
+ 60% {
3159
+ -webkit-transform: scale3d(1.03,1.03,1.03);
3160
+ transform: scale3d(1.03,1.03,1.03)
3161
+ }
3162
+
3163
+ 80% {
3164
+ opacity: 1;
3165
+ -webkit-transform: scale3d(.97,.97,.97);
3166
+ transform: scale3d(.97,.97,.97)
3167
+ }
3168
+
3169
+ to {
3170
+ -webkit-transform: scaleX(1);
3171
+ transform: scaleX(1)
3172
+ }
3173
+ }
3174
+
3175
+ .bounceSmall {
3176
+ -webkit-animation-name: bounceSmall;
3177
+ animation-name: bounceSmall;
2920
3178
  -webkit-animation-timing-function: ease-out;
2921
3179
  animation-timing-function: ease-out
2922
3180
  }
2923
3181
 
2924
- @-webkit-keyframes pullDown {
3182
+ @-webkit-keyframes bounceSmall {
3183
+ 0% {
3184
+ opacity: 0;
3185
+ -webkit-transform: scale(1.7)
3186
+ }
3187
+
3188
+ 50% {
3189
+ opacity: 1;
3190
+ -webkit-transform: scale(.95)
3191
+ }
3192
+
3193
+ 80% {
3194
+ -webkit-transform: scale(1.05)
3195
+ }
3196
+
3197
+ 90% {
3198
+ -webkit-transform: scale(.98)
3199
+ }
3200
+
3201
+ to {
3202
+ -webkit-transform: scale(1)
3203
+ }
3204
+ }
3205
+
3206
+ @keyframes bounceSmall {
3207
+ 0% {
3208
+ opacity: 0;
3209
+ -webkit-transform: scale(1.7)
3210
+ }
3211
+
3212
+ 50% {
3213
+ opacity: 1;
3214
+ -webkit-transform: scale(.95)
3215
+ }
3216
+
3217
+ 80% {
3218
+ -webkit-transform: scale(1.05)
3219
+ }
3220
+
3221
+ 90% {
3222
+ -webkit-transform: scale(.98)
3223
+ }
3224
+
3225
+ to {
3226
+ -webkit-transform: scale(1)
3227
+ }
3228
+ }
3229
+
3230
+ .pullUp {
3231
+ -webkit-transform-origin: 50% 100%;
3232
+ transform-origin: 50% 100%;
3233
+ -webkit-animation-name: pullUp;
3234
+ animation-name: pullUp;
3235
+ -webkit-animation-timing-function: ease-out;
3236
+ animation-timing-function: ease-out
3237
+ }
3238
+
3239
+ @-webkit-keyframes pullUp {
2925
3240
  0%,40%,60%,80%,99% {
2926
3241
  -webkit-animation-timing-function: ease-out;
2927
3242
  animation-timing-function: ease-out
@@ -2931,37 +3246,37 @@ body, html {
2931
3246
  opacity: 0;
2932
3247
  -webkit-transform: scaleY(.1);
2933
3248
  transform: scaleY(.1);
2934
- -webkit-transform-origin: 50% 0;
2935
- transform-origin: 50% 0
3249
+ -webkit-transform-origin: 50% 100%;
3250
+ transform-origin: 50% 100%
2936
3251
  }
2937
3252
 
2938
3253
  40% {
2939
3254
  opacity: 1;
2940
3255
  -webkit-transform: scaleY(1.02);
2941
3256
  transform: scaleY(1.02);
2942
- -webkit-transform-origin: 50% 0;
2943
- transform-origin: 50% 0
3257
+ -webkit-transform-origin: 50% 100%;
3258
+ transform-origin: 50% 100%
2944
3259
  }
2945
3260
 
2946
3261
  60% {
2947
3262
  -webkit-transform: scaleY(.98);
2948
3263
  transform: scaleY(.98);
2949
- -webkit-transform-origin: 50% 0;
2950
- transform-origin: 50% 0
3264
+ -webkit-transform-origin: 50% 100%;
3265
+ transform-origin: 50% 100%
2951
3266
  }
2952
3267
 
2953
3268
  80% {
2954
3269
  -webkit-transform: scaleY(1.01);
2955
3270
  transform: scaleY(1.01);
2956
- -webkit-transform-origin: 50% 0;
2957
- transform-origin: 50% 0
3271
+ -webkit-transform-origin: 50% 100%;
3272
+ transform-origin: 50% 100%
2958
3273
  }
2959
3274
 
2960
3275
  99% {
2961
3276
  -webkit-transform: scaleY(1);
2962
3277
  transform: scaleY(1);
2963
- -webkit-transform-origin: 50% 0;
2964
- transform-origin: 50% 0
3278
+ -webkit-transform-origin: 50% 100%;
3279
+ transform-origin: 50% 100%
2965
3280
  }
2966
3281
 
2967
3282
  to {
@@ -2970,7 +3285,7 @@ body, html {
2970
3285
  }
2971
3286
  }
2972
3287
 
2973
- @keyframes pullDown {
3288
+ @keyframes pullUp {
2974
3289
  0%,40%,60%,80%,99% {
2975
3290
  -webkit-animation-timing-function: ease-out;
2976
3291
  animation-timing-function: ease-out
@@ -2980,37 +3295,37 @@ body, html {
2980
3295
  opacity: 0;
2981
3296
  -webkit-transform: scaleY(.1);
2982
3297
  transform: scaleY(.1);
2983
- -webkit-transform-origin: 50% 0;
2984
- transform-origin: 50% 0
3298
+ -webkit-transform-origin: 50% 100%;
3299
+ transform-origin: 50% 100%
2985
3300
  }
2986
3301
 
2987
3302
  40% {
2988
3303
  opacity: 1;
2989
3304
  -webkit-transform: scaleY(1.02);
2990
3305
  transform: scaleY(1.02);
2991
- -webkit-transform-origin: 50% 0;
2992
- transform-origin: 50% 0
3306
+ -webkit-transform-origin: 50% 100%;
3307
+ transform-origin: 50% 100%
2993
3308
  }
2994
3309
 
2995
3310
  60% {
2996
3311
  -webkit-transform: scaleY(.98);
2997
3312
  transform: scaleY(.98);
2998
- -webkit-transform-origin: 50% 0;
2999
- transform-origin: 50% 0
3313
+ -webkit-transform-origin: 50% 100%;
3314
+ transform-origin: 50% 100%
3000
3315
  }
3001
3316
 
3002
3317
  80% {
3003
3318
  -webkit-transform: scaleY(1.01);
3004
3319
  transform: scaleY(1.01);
3005
- -webkit-transform-origin: 50% 0;
3006
- transform-origin: 50% 0
3320
+ -webkit-transform-origin: 50% 100%;
3321
+ transform-origin: 50% 100%
3007
3322
  }
3008
3323
 
3009
3324
  99% {
3010
3325
  -webkit-transform: scaleY(1);
3011
3326
  transform: scaleY(1);
3012
- -webkit-transform-origin: 50% 0;
3013
- transform-origin: 50% 0
3327
+ -webkit-transform-origin: 50% 100%;
3328
+ transform-origin: 50% 100%
3014
3329
  }
3015
3330
 
3016
3331
  to {
@@ -3018,476 +3333,161 @@ body, html {
3018
3333
  transform: none
3019
3334
  }
3020
3335
  }
3021
- :deep(.vue-transition-group) {
3022
- display: block;
3023
- position: relative;
3024
- width: 100%;
3025
- height: 100%;
3026
- }
3027
- .transition-container {
3028
- display: block;
3029
- position: relative;
3030
- width: 100%;
3031
- height: 100%;
3032
- }
3033
- /* 确保循环时的过渡效果平滑 */
3034
- .pages-wrapper {
3035
- position: relative;
3036
- width: 100%;
3037
- height: 100%;
3038
- overflow: hidden;
3039
- }
3040
-
3041
- .page-container {
3042
- position: absolute;
3043
- width: 100%;
3044
- height: 100%;
3045
- background-size: cover;
3046
- background-position: center;
3047
- will-change: transform;
3048
- }
3049
-
3050
- .ele-form {
3051
- position: absolute;
3052
- user-select: none;
3053
- }
3054
-
3055
- .f-single {
3056
- cursor: pointer;
3057
- }
3058
-
3059
- .ani-wrap {
3060
- position: relative;
3061
- }
3062
-
3063
- .fs-tit {
3064
- display: flex;
3065
- padding: 0 5px;
3066
- height: 40px;
3067
- align-items: center;
3068
- white-space: nowrap;
3069
- overflow: hidden;
3070
- text-overflow: ellipsis;
3071
- border-bottom: 1px solid rgba(153, 153, 153, 1);
3072
- }
3073
-
3074
- .require {
3075
- padding: 0 5px 0 0;
3076
- color: red;
3077
- vertical-align: middle;
3078
- }
3079
3336
 
3080
- .f-single ul {
3081
- padding: 15px;
3082
- margin: 0;
3083
- list-style: none;
3084
- }
3085
-
3086
- .f-single ul li {
3087
- display: flex;
3088
- align-items: center;
3089
- margin-top: 12px;
3090
- font-size: 0;
3091
- }
3092
-
3093
- .f-single ul li:first-child {
3094
- margin-top: 0;
3095
- }
3096
-
3097
- .fs-circle {
3098
- display: inline-block;
3099
- width: 16px;
3100
- height: 16px;
3101
- border-radius: 50%;
3102
- position: relative;
3103
- transition: all 0.2s;
3104
- }
3105
-
3106
- .fs-circle.selected {
3107
- background-color: #2687f1;
3108
- border-color: #2687f1 !important;
3109
- }
3110
-
3111
- .fs-circle.selected::after {
3112
- content: "";
3113
- position: absolute;
3114
- top: 3px;
3115
- left: 3px;
3116
- width: 8px;
3117
- height: 8px;
3118
- border-radius: 50%;
3119
- background-color: white;
3120
- }
3121
-
3122
- .fs-txt {
3123
- display: inline-block;
3124
- width: calc(100% - 16px);
3125
- padding-left: 8px;
3126
- vertical-align: top;
3127
- word-break: break-all;
3128
- font-size: 14px;
3129
- line-height: 1.2;
3130
- }
3131
-
3132
- .has-error .fs-tit {
3133
- border-bottom-color: #ff4d4f;
3134
- }
3135
-
3136
- /* 错误提示样式 */
3137
- .error-tip {
3138
- position: fixed;
3139
- left: 0;
3140
- top: 0;
3141
- width: 100%;
3142
- height: 100%;
3143
- z-index: 1000;
3144
- }
3145
-
3146
- .form-submit {
3147
- cursor: pointer;
3148
- transition: all 0.2s;
3149
- outline: none;
3150
- border: none;
3151
- }
3152
-
3153
- .form-submit:hover {
3154
- opacity: 0.9;
3155
- transform: translateY(-1px);
3156
- }
3157
-
3158
- .form-submit:active {
3159
- opacity: 0.8;
3160
- transform: translateY(0);
3161
- }
3162
-
3163
- .form-submit:disabled {
3164
- opacity: 0.6;
3165
- cursor: not-allowed;
3166
- transform: none !important;
3167
- }
3168
-
3169
- /* 统一错误提示样式 */
3170
- .tip-cover {
3171
- position: fixed;
3172
- left: 0;
3173
- top: 0;
3174
- width: 100%;
3175
- height: 100%;
3176
- display: flex;
3177
- align-items: center;
3178
- justify-content: center;
3179
- z-index: 999;
3180
- background-color: rgba(0,0,0,.7);
3181
- }
3182
-
3183
- .tip {
3184
- width: 80%;
3185
- max-width: 250px;
3186
- padding: 10px;
3187
- border-radius: 5px;
3188
- background-color: #fff;
3189
- }
3190
-
3191
- .tip-btn {
3192
- display: block;
3193
- margin: 25px auto;
3194
- width: 120px;
3195
- height: 30px;
3196
- color: #fff;
3197
- border-radius: 4px;
3198
- text-align: center;
3199
- font-size: 14px;
3200
- line-height: 30px;
3201
- background: #ed5566;
3202
- cursor: pointer;
3203
- }
3204
-
3205
- .tip-content {
3206
- font-size: 14px;
3207
- padding-top: 30px;
3208
- text-align: center;
3209
- }
3210
-
3211
- .form-input {
3212
- position: absolute;
3213
- }
3214
-
3215
- .input-wrapper {
3216
- display: flex;
3217
- align-items: center;
3218
- width: 100%;
3219
- height: 100%;
3220
- padding: 0 10px;
3221
- box-sizing: border-box;
3222
- position: relative;
3223
- transition: border-color 0.3s;
3224
- }
3225
-
3226
- .required-marker {
3227
- font-size: 12px;
3228
- padding: 0 5px 0 0;
3229
- color: red;
3230
- vertical-align: middle;
3231
- }
3232
-
3233
- input {
3234
- flex: 1;
3235
- border: none;
3236
- outline: none;
3237
- background: transparent;
3238
- height: 100%;
3239
- padding: 0;
3240
- margin: 0;
3241
- }
3242
- /*
3243
- input::placeholder {
3244
- color: #ccc;
3245
- opacity: 1;
3246
- } */
3247
-
3248
- .dynamic-placeholder-input::placeholder {
3249
- color: var(--placeholder-color, #999);
3250
- opacity: 1;
3251
- }
3252
- .dynamic-placeholder-input::-webkit-input-placeholder {
3253
- color: var(--placeholder-color, #999);
3254
- }
3255
- .dynamic-placeholder-input::-moz-placeholder {
3256
- color: var(--placeholder-color, #999);
3257
- opacity: 1;
3258
- }
3259
- .dynamic-placeholder-input:-ms-input-placeholder {
3260
- color: var(--placeholder-color, #999);
3261
- }
3262
-
3263
- /* 设计稿尺寸(如375px下20px的按钮) */
3264
- .btn {
3265
- width: 20px; /* 直接写设计稿px */
3266
- height: 10px;
3267
- font-size: 14px;
3268
- }
3269
-
3270
- .ele-form {
3271
- position: absolute;
3272
- user-select: none;
3273
- }
3274
-
3275
- .f-select {
3276
- cursor: pointer;
3277
- }
3278
-
3279
- .ani-wrap {
3280
- position: relative;
3281
- }
3282
-
3283
- .fs-tit {
3284
- position: relative;
3285
- display: flex;
3286
- padding: 0 5px;
3287
- height: 35px;
3288
- line-height: 35px;
3289
- align-items: center;
3290
- }
3291
-
3292
- .require {
3293
- padding: 0 5px 0 0;
3294
- color: red;
3295
- vertical-align: middle;
3296
- }
3297
-
3298
- .fs-cont {
3299
- padding-right: 15px;
3300
- white-space: nowrap;
3301
- overflow: hidden;
3302
- text-overflow: ellipsis;
3303
- flex-grow: 1;
3304
- }
3305
-
3306
- .icon-bofang1 {
3307
- font-size: 12px;
3308
- transition: transform 0.2s ease;
3309
- }
3310
-
3311
- .rotate-180 {
3312
- transform: rotate(180deg) !important;
3313
- }
3314
-
3315
- .f-real {
3316
- position: absolute;
3317
- left: 0;
3318
- top: 0;
3319
- width: 100%;
3320
- height: 100%;
3321
- z-index: 1;
3322
- opacity: 0;
3323
- cursor: pointer;
3324
- }
3325
-
3326
- .dropdown-menu {
3327
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
3328
- }
3329
-
3330
- .dropdown-item {
3331
- padding: 8px 10px;
3332
- cursor: pointer;
3333
- transition: background-color 0.2s;
3334
- }
3335
-
3336
- .dropdown-item:hover {
3337
- background-color: #f5f5f5;
3338
- }
3339
-
3340
- .dropdown-item.selected {
3341
- background-color: #e6f7ff;
3342
- color: #1890ff;
3343
- }
3344
-
3345
- .f-select .fs-tit .icon-bofang1 {
3346
- position: absolute;
3347
- right: 10px;
3348
- font-size: 12px;
3349
- display: inline-block;
3350
- transform: rotate(90deg);
3337
+ .pullDown {
3338
+ -webkit-transform-origin: 50% 0;
3339
+ transform-origin: 50% 0;
3340
+ -webkit-animation-name: pullDown;
3341
+ animation-name: pullDown;
3342
+ -webkit-animation-timing-function: ease-out;
3343
+ animation-timing-function: ease-out
3351
3344
  }
3352
3345
 
3353
- @font-face {
3354
- font-family: iconfont;
3355
- src: url(https://h5static.hunbei.com/preview/static/fonts/iconfont.f1262e4.woff2) format("woff2"),
3356
- url(https://h5static.hunbei.com/preview/static/fonts/iconfont.788d827.woff) format("woff"),
3357
- url(https://h5static.hunbei.com/preview/static/fonts/iconfont.9541e59.ttf) format("truetype");
3358
- }
3346
+ @-webkit-keyframes pullDown {
3347
+ 0%,40%,60%,80%,99% {
3348
+ -webkit-animation-timing-function: ease-out;
3349
+ animation-timing-function: ease-out
3350
+ }
3359
3351
 
3360
- .iconfont {
3361
- font-family: iconfont !important;
3362
- font-size: 14px;
3363
- font-style: normal;
3364
- -webkit-font-smoothing: antialiased;
3365
- -moz-osx-font-smoothing: grayscale;
3366
- }
3352
+ 0% {
3353
+ opacity: 0;
3354
+ -webkit-transform: scaleY(.1);
3355
+ transform: scaleY(.1);
3356
+ -webkit-transform-origin: 50% 0;
3357
+ transform-origin: 50% 0
3358
+ }
3367
3359
 
3368
- .icon-bofang1:before {
3369
- content: "\E6CF";
3370
- }
3360
+ 40% {
3361
+ opacity: 1;
3362
+ -webkit-transform: scaleY(1.02);
3363
+ transform: scaleY(1.02);
3364
+ -webkit-transform-origin: 50% 0;
3365
+ transform-origin: 50% 0
3366
+ }
3371
3367
 
3372
- .has-error {
3373
- border-color: #ff4d4f !important;
3374
- }
3368
+ 60% {
3369
+ -webkit-transform: scaleY(.98);
3370
+ transform: scaleY(.98);
3371
+ -webkit-transform-origin: 50% 0;
3372
+ transform-origin: 50% 0
3373
+ }
3375
3374
 
3376
- .error-tip {
3377
- position: fixed;
3378
- left: 0;
3379
- top: 0;
3380
- width: 100%;
3381
- height: 100%;
3382
- z-index: 1000;
3383
- }
3375
+ 80% {
3376
+ -webkit-transform: scaleY(1.01);
3377
+ transform: scaleY(1.01);
3378
+ -webkit-transform-origin: 50% 0;
3379
+ transform-origin: 50% 0
3380
+ }
3384
3381
 
3385
- .ele-form {
3386
- position: absolute;
3387
- user-select: none;
3388
- }
3382
+ 99% {
3383
+ -webkit-transform: scaleY(1);
3384
+ transform: scaleY(1);
3385
+ -webkit-transform-origin: 50% 0;
3386
+ transform-origin: 50% 0
3387
+ }
3389
3388
 
3390
- .f-multiple {
3391
- cursor: pointer;
3389
+ to {
3390
+ -webkit-transform: none;
3391
+ transform: none
3392
+ }
3392
3393
  }
3393
3394
 
3394
- .ani-wrap {
3395
- position: relative;
3396
- }
3395
+ @keyframes pullDown {
3396
+ 0%,40%,60%,80%,99% {
3397
+ -webkit-animation-timing-function: ease-out;
3398
+ animation-timing-function: ease-out
3399
+ }
3397
3400
 
3398
- .fs-tit {
3399
- display: flex;
3400
- padding: 0 5px;
3401
- height: 40px;
3402
- align-items: center;
3403
- white-space: nowrap;
3404
- overflow: hidden;
3405
- text-overflow: ellipsis;
3406
- border-bottom: 1px solid rgba(153, 153, 153, 1);
3407
- }
3401
+ 0% {
3402
+ opacity: 0;
3403
+ -webkit-transform: scaleY(.1);
3404
+ transform: scaleY(.1);
3405
+ -webkit-transform-origin: 50% 0;
3406
+ transform-origin: 50% 0
3407
+ }
3408
3408
 
3409
- .require {
3410
- padding: 0 5px 0 0;
3411
- color: red;
3412
- vertical-align: middle;
3413
- }
3409
+ 40% {
3410
+ opacity: 1;
3411
+ -webkit-transform: scaleY(1.02);
3412
+ transform: scaleY(1.02);
3413
+ -webkit-transform-origin: 50% 0;
3414
+ transform-origin: 50% 0
3415
+ }
3414
3416
 
3415
- .f-multiple ul {
3416
- padding: 15px;
3417
- margin: 0;
3418
- list-style: none;
3419
- }
3417
+ 60% {
3418
+ -webkit-transform: scaleY(.98);
3419
+ transform: scaleY(.98);
3420
+ -webkit-transform-origin: 50% 0;
3421
+ transform-origin: 50% 0
3422
+ }
3420
3423
 
3421
- .f-multiple ul li {
3422
- margin-top: 12px;
3423
- font-size: 0;
3424
- display: flex;
3425
- align-items: center;
3426
- cursor: pointer;
3427
- }
3424
+ 80% {
3425
+ -webkit-transform: scaleY(1.01);
3426
+ transform: scaleY(1.01);
3427
+ -webkit-transform-origin: 50% 0;
3428
+ transform-origin: 50% 0
3429
+ }
3428
3430
 
3429
- .f-multiple ul li:first-child {
3430
- margin-top: 0;
3431
- }
3431
+ 99% {
3432
+ -webkit-transform: scaleY(1);
3433
+ transform: scaleY(1);
3434
+ -webkit-transform-origin: 50% 0;
3435
+ transform-origin: 50% 0
3436
+ }
3432
3437
 
3433
- .fs-circle {
3434
- display: inline-block;
3435
- width: 16px;
3436
- height: 16px;
3437
- border-radius: 50%;
3438
+ to {
3439
+ -webkit-transform: none;
3440
+ transform: none
3441
+ }
3442
+ }
3443
+ :deep(.vue-transition-group) {
3444
+ display: block;
3438
3445
  position: relative;
3439
- transition: all 0.2s;
3446
+ width: 100%;
3447
+ height: 100%;
3440
3448
  }
3441
-
3442
- .fs-circle.selected {
3443
- background-color: #2687f1;
3444
- border-color: #2687f1 !important;
3449
+ .transition-container {
3450
+ display: block;
3451
+ position: relative;
3452
+ width: 100%;
3453
+ height: 100%;
3445
3454
  }
3446
-
3447
- .fs-circle.selected::after {
3448
- content: "";
3449
- position: absolute;
3450
- top: 3px;
3451
- left: 3px;
3452
- width: 8px;
3453
- height: 8px;
3454
- border-radius: 50%;
3455
- background-color: white;
3455
+ /* 确保循环时的过渡效果平滑 */
3456
+ .pages-wrapper {
3457
+ position: relative;
3458
+ width: 100%;
3459
+ height: 100%;
3460
+ overflow: hidden;
3456
3461
  }
3457
3462
 
3458
- .fs-txt {
3459
- display: inline-block;
3460
- width: calc(100% - 16px);
3461
- padding-left: 8px;
3462
- vertical-align: top;
3463
- word-break: break-all;
3464
- font-size: 14px;
3465
- line-height: 1.2;
3463
+ .page-container {
3464
+ position: absolute;
3465
+ width: 100%;
3466
+ height: 100%;
3467
+ background-size: cover;
3468
+ background-position: center;
3469
+ will-change: transform;
3466
3470
  }
3467
3471
 
3468
- .has-error .fs-tit {
3469
- border-bottom-color: #ff4d4f;
3472
+ .form-container {
3473
+ position: relative;
3474
+ width: 100%;
3475
+ height: 100%;
3470
3476
  }
3471
3477
 
3472
- .global.tel {
3478
+ .global.video {
3473
3479
  width: 35px;
3474
3480
  height: 55px;
3475
3481
  border-radius: 50%;
3476
3482
  text-align: center;
3477
- margin-bottom: 15px;
3483
+ margin-bottom: 5px;
3478
3484
  border: 2px solid #fff;
3479
3485
  cursor: pointer;
3480
3486
  }
3481
- .icon-dianhua:before { content: "\E60E"; }
3487
+ .icon-shipin2:before { content: "\E611"; }
3482
3488
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3483
- .global.tel > span { font-size: 12px; line-height: 20px; display: block;}
3484
-
3485
- .form-container {
3486
- position: relative;
3487
- width: 100%;
3488
- height: 100%;
3489
- }
3490
-
3489
+ .global.video > span { font-size: 12px; line-height: 20px; display: block; position: relative; top: -4px;}
3490
+
3491
3491
  /* 字体定义 */
3492
3492
  @font-face {
3493
3493
  font-family: iconfont;
@@ -3900,31 +3900,18 @@ input::placeholder {
3900
3900
  }
3901
3901
 
3902
3902
 
3903
- .global.video {
3904
- width: 35px;
3905
- height: 55px;
3906
- border-radius: 50%;
3907
- text-align: center;
3908
- margin-bottom: 5px;
3909
- border: 2px solid #fff;
3910
- cursor: pointer;
3911
- }
3912
- .icon-shipin2:before { content: "\E611"; }
3913
- .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3914
- .global.video > span { font-size: 12px; line-height: 20px; display: block; position: relative; top: -4px;}
3915
-
3916
- .global.map {
3903
+ .global.tel {
3917
3904
  width: 35px;
3918
3905
  height: 55px;
3919
3906
  border-radius: 50%;
3920
3907
  text-align: center;
3921
- margin-bottom: 5px;
3908
+ margin-bottom: 15px;
3922
3909
  border: 2px solid #fff;
3923
3910
  cursor: pointer;
3924
3911
  }
3925
- .icon-daohang1:before { content: "\E612"; }
3912
+ .icon-dianhua:before { content: "\E60E"; }
3926
3913
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3927
- .global.map > span { font-size: 12px; line-height: 20px; display: block;}
3914
+ .global.tel > span { font-size: 12px; line-height: 20px; display: block;}
3928
3915
 
3929
3916
  .global.receipt {
3930
3917
  width: 35px;
@@ -3939,6 +3926,19 @@ input::placeholder {
3939
3926
  .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3940
3927
  .global.receipt > span { font-size: 12px; line-height: 20px; display: block; }
3941
3928
 
3929
+ .global.map {
3930
+ width: 35px;
3931
+ height: 55px;
3932
+ border-radius: 50%;
3933
+ text-align: center;
3934
+ margin-bottom: 5px;
3935
+ border: 2px solid #fff;
3936
+ cursor: pointer;
3937
+ }
3938
+ .icon-daohang1:before { content: "\E612"; }
3939
+ .iconfont { font-family: iconfont !important; font-size: 30px; font-style: normal; }
3940
+ .global.map > span { font-size: 12px; line-height: 20px; display: block;}
3941
+
3942
3942
  @font-face {
3943
3943
  font-family: iconfont;
3944
3944
  src: url(https://h5static.hunbei.com/preview/static/fonts/iconfont.f1262e4.woff2) format("woff2"),url(https://h5static.hunbei.com/preview/static/fonts/iconfont.788d827.woff) format("woff"),url(https://h5static.hunbei.com/preview/static/fonts/iconfont.9541e59.ttf) format("truetype")