unika-components 1.0.158 → 1.0.160
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.
|
@@ -16,7 +16,6 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
16
16
|
onSwiper: (swiper: any) => void;
|
|
17
17
|
modules: import("swiper/types").SwiperComponent[];
|
|
18
18
|
direction: string;
|
|
19
|
-
effect: string;
|
|
20
19
|
upArrow: import("vue").Ref<boolean>;
|
|
21
20
|
slideChangeTransitionEnd: (e: any) => void;
|
|
22
21
|
slideClasses: (index: number) => string[];
|
|
@@ -1,4 +1,53 @@
|
|
|
1
1
|
|
|
2
|
+
.uni-image-component {
|
|
3
|
+
max-width: 100%;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
h2.uni-text-component, p.uni-text-component {
|
|
7
|
+
margin-bottom: 0;
|
|
8
|
+
}
|
|
9
|
+
button.uni-text-component {
|
|
10
|
+
padding: 5px 10px;
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
}
|
|
13
|
+
.uni-text-component {
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
white-space: pre-wrap;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
.uni-calendar-component {
|
|
20
|
+
|
|
21
|
+
}
|
|
22
|
+
.slot-number {
|
|
23
|
+
position: absolute;
|
|
24
|
+
bottom: 2px;
|
|
25
|
+
left: 7px;
|
|
26
|
+
font-size: 12px;
|
|
27
|
+
color: #666
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.uni-video-component {
|
|
31
|
+
position: relative;
|
|
32
|
+
text-align: center;
|
|
33
|
+
}
|
|
34
|
+
.play-pause-button {
|
|
35
|
+
position: absolute;
|
|
36
|
+
top: 50%;
|
|
37
|
+
left: 50%;
|
|
38
|
+
transform: translate(-50%, -50%);
|
|
39
|
+
cursor: pointer;
|
|
40
|
+
font-size: 2rem;
|
|
41
|
+
color: #fff;
|
|
42
|
+
background: rgba(0, 0, 0, 0.6);
|
|
43
|
+
border-radius: 50%;
|
|
44
|
+
padding: 10px;
|
|
45
|
+
transition: background 0.3s;
|
|
46
|
+
}
|
|
47
|
+
.play-pause-button:hover {
|
|
48
|
+
background: rgba(0, 0, 0, 0.8);
|
|
49
|
+
}
|
|
50
|
+
|
|
2
51
|
.slide-guide {
|
|
3
52
|
position: absolute;
|
|
4
53
|
bottom: 90px;
|
|
@@ -72,43 +121,6 @@ body, html {
|
|
|
72
121
|
}
|
|
73
122
|
}
|
|
74
123
|
|
|
75
|
-
.uni-video-component {
|
|
76
|
-
position: relative;
|
|
77
|
-
text-align: center;
|
|
78
|
-
}
|
|
79
|
-
.play-pause-button {
|
|
80
|
-
position: absolute;
|
|
81
|
-
top: 50%;
|
|
82
|
-
left: 50%;
|
|
83
|
-
transform: translate(-50%, -50%);
|
|
84
|
-
cursor: pointer;
|
|
85
|
-
font-size: 2rem;
|
|
86
|
-
color: #fff;
|
|
87
|
-
background: rgba(0, 0, 0, 0.6);
|
|
88
|
-
border-radius: 50%;
|
|
89
|
-
padding: 10px;
|
|
90
|
-
transition: background 0.3s;
|
|
91
|
-
}
|
|
92
|
-
.play-pause-button:hover {
|
|
93
|
-
background: rgba(0, 0, 0, 0.8);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
h2.uni-text-component, p.uni-text-component {
|
|
97
|
-
margin-bottom: 0;
|
|
98
|
-
}
|
|
99
|
-
button.uni-text-component {
|
|
100
|
-
padding: 5px 10px;
|
|
101
|
-
cursor: pointer;
|
|
102
|
-
}
|
|
103
|
-
.uni-text-component {
|
|
104
|
-
box-sizing: border-box;
|
|
105
|
-
white-space: pre-wrap;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.uni-image-component {
|
|
109
|
-
max-width: 100%;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
124
|
.like-button {
|
|
113
125
|
display: flex;
|
|
114
126
|
flex-direction: column;
|
|
@@ -131,16 +143,18 @@ button.uni-text-component {
|
|
|
131
143
|
color: #333;
|
|
132
144
|
}
|
|
133
145
|
|
|
146
|
+
.swiper-warp {
|
|
147
|
+
width: 100%;
|
|
148
|
+
height: 100%;
|
|
149
|
+
}
|
|
134
150
|
|
|
135
|
-
.
|
|
136
|
-
|
|
151
|
+
.swiper-slide-component {
|
|
152
|
+
text-align: center;
|
|
137
153
|
}
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
font-size: 12px;
|
|
143
|
-
color: #666
|
|
154
|
+
|
|
155
|
+
.swiper-slide img {
|
|
156
|
+
max-width: 100%;
|
|
157
|
+
max-height: 100%;
|
|
144
158
|
}
|
|
145
159
|
|
|
146
160
|
.ant-input-number {
|
|
@@ -178,20 +192,6 @@ button.uni-text-component {
|
|
|
178
192
|
vertical-align: top;
|
|
179
193
|
}
|
|
180
194
|
|
|
181
|
-
.swiper-warp {
|
|
182
|
-
width: 100%;
|
|
183
|
-
height: 100%;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
.swiper-slide-component {
|
|
187
|
-
text-align: center;
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
.swiper-slide img {
|
|
191
|
-
max-width: 100%;
|
|
192
|
-
max-height: 100%;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
195
|
.effect {
|
|
196
196
|
width: 100%;
|
|
197
197
|
height: 100%;
|
|
@@ -747,193 +747,6 @@ button.swiper-pagination-bullet {
|
|
|
747
747
|
backface-visibility: hidden;
|
|
748
748
|
}
|
|
749
749
|
|
|
750
|
-
|
|
751
|
-
.no-animation__card {
|
|
752
|
-
font-weight: 500;
|
|
753
|
-
font-size: var(--countdown-size, 2rem);
|
|
754
|
-
line-height: 1.5;
|
|
755
|
-
display: block;
|
|
756
|
-
color: var(--main-color, #EC685C);
|
|
757
|
-
}
|
|
758
|
-
|
|
759
|
-
.flip-clock {
|
|
760
|
-
text-align: center;
|
|
761
|
-
perspective: 600px;
|
|
762
|
-
margin: 0 auto;
|
|
763
|
-
}
|
|
764
|
-
|
|
765
|
-
.flip-clock *,
|
|
766
|
-
.flip-clock *:before,
|
|
767
|
-
.flip-clock *:after {
|
|
768
|
-
box-sizing: border-box;
|
|
769
|
-
}
|
|
770
|
-
|
|
771
|
-
.flip-clock__piece {
|
|
772
|
-
display: inline-block;
|
|
773
|
-
margin: 0 0.2vw;
|
|
774
|
-
}
|
|
775
|
-
|
|
776
|
-
@media (min-width: 1000px) {
|
|
777
|
-
.flip-clock__piece {
|
|
778
|
-
margin: 0 5px;
|
|
779
|
-
}
|
|
780
|
-
}
|
|
781
|
-
|
|
782
|
-
.flip-clock__slot {
|
|
783
|
-
font-size: var(--label-size, 1rem);
|
|
784
|
-
line-height: 1.5;
|
|
785
|
-
display: block;
|
|
786
|
-
color: var(--label-color, #222222);
|
|
787
|
-
}
|
|
788
|
-
|
|
789
|
-
.flip-card {
|
|
790
|
-
display: block;
|
|
791
|
-
position: relative;
|
|
792
|
-
padding-bottom: 0.72em; /* halfHeight */
|
|
793
|
-
font-size: var(--countdown-size, 2.25rem);
|
|
794
|
-
line-height: 0.95;
|
|
795
|
-
}
|
|
796
|
-
|
|
797
|
-
@media (min-width: 1000px) {
|
|
798
|
-
.flip-clock__slot {
|
|
799
|
-
font-size: 1.2rem;
|
|
800
|
-
}
|
|
801
|
-
|
|
802
|
-
.flip-card {
|
|
803
|
-
font-size: 3rem;
|
|
804
|
-
}
|
|
805
|
-
}
|
|
806
|
-
|
|
807
|
-
.flip-card__top,
|
|
808
|
-
.flip-card__bottom,
|
|
809
|
-
.flip-card__back-bottom,
|
|
810
|
-
.flip-card__back::before,
|
|
811
|
-
.flip-card__back::after{
|
|
812
|
-
display: block;
|
|
813
|
-
height: 0.72em; /* halfHeight */
|
|
814
|
-
color: var(--main-color, #EC685C);
|
|
815
|
-
background: var(--main-flip-background-color, #222222);
|
|
816
|
-
padding: 0.23em 0.15em 0.4em;
|
|
817
|
-
border-radius: 0.15em 0.15em 0 0; /* borderRadius */
|
|
818
|
-
backface-visibility: hidden;
|
|
819
|
-
-webkit-backface-visibility: hidden;
|
|
820
|
-
transform-style: preserve-3d;
|
|
821
|
-
width: 2.1em;
|
|
822
|
-
}
|
|
823
|
-
|
|
824
|
-
.flip-card__top-4digits,
|
|
825
|
-
.flip-card__bottom-4digits,
|
|
826
|
-
.flip-card__back-bottom-4digits,
|
|
827
|
-
.flip-card__back-4digits::before,
|
|
828
|
-
.flip-card__back-4digits::after {
|
|
829
|
-
display: block;
|
|
830
|
-
height: 0.72em; /* halfHeight */
|
|
831
|
-
color: var(--main-color, #EC685C);
|
|
832
|
-
background: var(--main-flip-background-color, #222222);
|
|
833
|
-
padding: 0.23em 0.15em 0.4em;
|
|
834
|
-
border-radius: 0.15em 0.15em 0 0; /* borderRadius */
|
|
835
|
-
backface-visibility: hidden;
|
|
836
|
-
-webkit-backface-visibility: hidden;
|
|
837
|
-
transform-style: preserve-3d;
|
|
838
|
-
width: 2.65em;
|
|
839
|
-
}
|
|
840
|
-
|
|
841
|
-
.flip-card__bottom,
|
|
842
|
-
.flip-card__back-bottom,
|
|
843
|
-
.flip-card__bottom-4digits,
|
|
844
|
-
.flip-card__back-bottom-4digits {
|
|
845
|
-
color: var(--second-flip-color, #EC685C);
|
|
846
|
-
position: absolute;
|
|
847
|
-
top: 50%;
|
|
848
|
-
left: 0;
|
|
849
|
-
border-top: solid 1px var(--second-flip-background-color, #000);
|
|
850
|
-
background: var(--second-flip-background-color, #393939);
|
|
851
|
-
border-radius: 0 0 0.15em 0.15em; /* borderRadius */
|
|
852
|
-
pointer-events: none;
|
|
853
|
-
overflow: hidden;
|
|
854
|
-
z-index: 2;
|
|
855
|
-
}
|
|
856
|
-
|
|
857
|
-
.flip-card__back-bottom,
|
|
858
|
-
.flip-card__back-bottom-4digits {
|
|
859
|
-
z-index: 1;
|
|
860
|
-
}
|
|
861
|
-
|
|
862
|
-
.flip-card__bottom::after,
|
|
863
|
-
.flip-card__back-bottom::after,
|
|
864
|
-
.flip-card__bottom-4digits::after,
|
|
865
|
-
.flip-card__back-bottom-4digits::after {
|
|
866
|
-
display: block;
|
|
867
|
-
margin-top: -0.72em; /* Negative halfHeight */
|
|
868
|
-
}
|
|
869
|
-
.flip-card__back::before,
|
|
870
|
-
.flip-card__bottom::after,
|
|
871
|
-
.flip-card__back-bottom::after,
|
|
872
|
-
.flip-card__back-4digits::before,
|
|
873
|
-
.flip-card__bottom-4digits::after,
|
|
874
|
-
.flip-card__back-bottom-4digits::after {
|
|
875
|
-
content: attr(data-value);
|
|
876
|
-
}
|
|
877
|
-
|
|
878
|
-
.flip-card__back,
|
|
879
|
-
.flip-card__back-4digits {
|
|
880
|
-
position: absolute;
|
|
881
|
-
top: 0;
|
|
882
|
-
height: 100%;
|
|
883
|
-
left: 0%;
|
|
884
|
-
pointer-events: none;
|
|
885
|
-
}
|
|
886
|
-
.flip-card__back::before,
|
|
887
|
-
.flip-card__back-4digits::before {
|
|
888
|
-
position: relative;
|
|
889
|
-
overflow: hidden;
|
|
890
|
-
z-index: -1;
|
|
891
|
-
}
|
|
892
|
-
|
|
893
|
-
.flip .flip-card__back::before,
|
|
894
|
-
.flip .flip-card__back-4digits::before {
|
|
895
|
-
z-index: 1;
|
|
896
|
-
animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
|
|
897
|
-
animation-fill-mode: both;
|
|
898
|
-
transform-origin: center bottom;
|
|
899
|
-
}
|
|
900
|
-
|
|
901
|
-
.flip .flip-card__bottom,
|
|
902
|
-
.flip .flip-card__bottom-4digits {
|
|
903
|
-
transform-origin: center top;
|
|
904
|
-
animation-fill-mode: both;
|
|
905
|
-
animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
|
|
906
|
-
}
|
|
907
|
-
@keyframes flipTop {
|
|
908
|
-
0% {
|
|
909
|
-
transform: rotateX(0deg);
|
|
910
|
-
z-index: 2;
|
|
911
|
-
}
|
|
912
|
-
0%, 99% {
|
|
913
|
-
opacity: 1;
|
|
914
|
-
}
|
|
915
|
-
100% {
|
|
916
|
-
transform: rotateX(-90deg);
|
|
917
|
-
opacity: 0;
|
|
918
|
-
}
|
|
919
|
-
}
|
|
920
|
-
|
|
921
|
-
@keyframes flipBottom {
|
|
922
|
-
0%, 50% {
|
|
923
|
-
z-index: -1;
|
|
924
|
-
transform: rotateX(90deg);
|
|
925
|
-
opacity: 0;
|
|
926
|
-
}
|
|
927
|
-
51% {
|
|
928
|
-
opacity: 1;
|
|
929
|
-
}
|
|
930
|
-
100% {
|
|
931
|
-
opacity: 1;
|
|
932
|
-
transform: rotateX(0deg);
|
|
933
|
-
z-index: 5;
|
|
934
|
-
}
|
|
935
|
-
}
|
|
936
|
-
|
|
937
750
|
.unika-calendar-box {
|
|
938
751
|
position: relative;
|
|
939
752
|
width: 325px !important;
|
|
@@ -1191,3 +1004,190 @@ button.swiper-pagination-bullet {
|
|
|
1191
1004
|
padding: 0 0px;
|
|
1192
1005
|
border-bottom: 1px solid
|
|
1193
1006
|
}
|
|
1007
|
+
|
|
1008
|
+
|
|
1009
|
+
.no-animation__card {
|
|
1010
|
+
font-weight: 500;
|
|
1011
|
+
font-size: var(--countdown-size, 2rem);
|
|
1012
|
+
line-height: 1.5;
|
|
1013
|
+
display: block;
|
|
1014
|
+
color: var(--main-color, #EC685C);
|
|
1015
|
+
}
|
|
1016
|
+
|
|
1017
|
+
.flip-clock {
|
|
1018
|
+
text-align: center;
|
|
1019
|
+
perspective: 600px;
|
|
1020
|
+
margin: 0 auto;
|
|
1021
|
+
}
|
|
1022
|
+
|
|
1023
|
+
.flip-clock *,
|
|
1024
|
+
.flip-clock *:before,
|
|
1025
|
+
.flip-clock *:after {
|
|
1026
|
+
box-sizing: border-box;
|
|
1027
|
+
}
|
|
1028
|
+
|
|
1029
|
+
.flip-clock__piece {
|
|
1030
|
+
display: inline-block;
|
|
1031
|
+
margin: 0 0.2vw;
|
|
1032
|
+
}
|
|
1033
|
+
|
|
1034
|
+
@media (min-width: 1000px) {
|
|
1035
|
+
.flip-clock__piece {
|
|
1036
|
+
margin: 0 5px;
|
|
1037
|
+
}
|
|
1038
|
+
}
|
|
1039
|
+
|
|
1040
|
+
.flip-clock__slot {
|
|
1041
|
+
font-size: var(--label-size, 1rem);
|
|
1042
|
+
line-height: 1.5;
|
|
1043
|
+
display: block;
|
|
1044
|
+
color: var(--label-color, #222222);
|
|
1045
|
+
}
|
|
1046
|
+
|
|
1047
|
+
.flip-card {
|
|
1048
|
+
display: block;
|
|
1049
|
+
position: relative;
|
|
1050
|
+
padding-bottom: 0.72em; /* halfHeight */
|
|
1051
|
+
font-size: var(--countdown-size, 2.25rem);
|
|
1052
|
+
line-height: 0.95;
|
|
1053
|
+
}
|
|
1054
|
+
|
|
1055
|
+
@media (min-width: 1000px) {
|
|
1056
|
+
.flip-clock__slot {
|
|
1057
|
+
font-size: 1.2rem;
|
|
1058
|
+
}
|
|
1059
|
+
|
|
1060
|
+
.flip-card {
|
|
1061
|
+
font-size: 3rem;
|
|
1062
|
+
}
|
|
1063
|
+
}
|
|
1064
|
+
|
|
1065
|
+
.flip-card__top,
|
|
1066
|
+
.flip-card__bottom,
|
|
1067
|
+
.flip-card__back-bottom,
|
|
1068
|
+
.flip-card__back::before,
|
|
1069
|
+
.flip-card__back::after{
|
|
1070
|
+
display: block;
|
|
1071
|
+
height: 0.72em; /* halfHeight */
|
|
1072
|
+
color: var(--main-color, #EC685C);
|
|
1073
|
+
background: var(--main-flip-background-color, #222222);
|
|
1074
|
+
padding: 0.23em 0.15em 0.4em;
|
|
1075
|
+
border-radius: 0.15em 0.15em 0 0; /* borderRadius */
|
|
1076
|
+
backface-visibility: hidden;
|
|
1077
|
+
-webkit-backface-visibility: hidden;
|
|
1078
|
+
transform-style: preserve-3d;
|
|
1079
|
+
width: 2.1em;
|
|
1080
|
+
}
|
|
1081
|
+
|
|
1082
|
+
.flip-card__top-4digits,
|
|
1083
|
+
.flip-card__bottom-4digits,
|
|
1084
|
+
.flip-card__back-bottom-4digits,
|
|
1085
|
+
.flip-card__back-4digits::before,
|
|
1086
|
+
.flip-card__back-4digits::after {
|
|
1087
|
+
display: block;
|
|
1088
|
+
height: 0.72em; /* halfHeight */
|
|
1089
|
+
color: var(--main-color, #EC685C);
|
|
1090
|
+
background: var(--main-flip-background-color, #222222);
|
|
1091
|
+
padding: 0.23em 0.15em 0.4em;
|
|
1092
|
+
border-radius: 0.15em 0.15em 0 0; /* borderRadius */
|
|
1093
|
+
backface-visibility: hidden;
|
|
1094
|
+
-webkit-backface-visibility: hidden;
|
|
1095
|
+
transform-style: preserve-3d;
|
|
1096
|
+
width: 2.65em;
|
|
1097
|
+
}
|
|
1098
|
+
|
|
1099
|
+
.flip-card__bottom,
|
|
1100
|
+
.flip-card__back-bottom,
|
|
1101
|
+
.flip-card__bottom-4digits,
|
|
1102
|
+
.flip-card__back-bottom-4digits {
|
|
1103
|
+
color: var(--second-flip-color, #EC685C);
|
|
1104
|
+
position: absolute;
|
|
1105
|
+
top: 50%;
|
|
1106
|
+
left: 0;
|
|
1107
|
+
border-top: solid 1px var(--second-flip-background-color, #000);
|
|
1108
|
+
background: var(--second-flip-background-color, #393939);
|
|
1109
|
+
border-radius: 0 0 0.15em 0.15em; /* borderRadius */
|
|
1110
|
+
pointer-events: none;
|
|
1111
|
+
overflow: hidden;
|
|
1112
|
+
z-index: 2;
|
|
1113
|
+
}
|
|
1114
|
+
|
|
1115
|
+
.flip-card__back-bottom,
|
|
1116
|
+
.flip-card__back-bottom-4digits {
|
|
1117
|
+
z-index: 1;
|
|
1118
|
+
}
|
|
1119
|
+
|
|
1120
|
+
.flip-card__bottom::after,
|
|
1121
|
+
.flip-card__back-bottom::after,
|
|
1122
|
+
.flip-card__bottom-4digits::after,
|
|
1123
|
+
.flip-card__back-bottom-4digits::after {
|
|
1124
|
+
display: block;
|
|
1125
|
+
margin-top: -0.72em; /* Negative halfHeight */
|
|
1126
|
+
}
|
|
1127
|
+
.flip-card__back::before,
|
|
1128
|
+
.flip-card__bottom::after,
|
|
1129
|
+
.flip-card__back-bottom::after,
|
|
1130
|
+
.flip-card__back-4digits::before,
|
|
1131
|
+
.flip-card__bottom-4digits::after,
|
|
1132
|
+
.flip-card__back-bottom-4digits::after {
|
|
1133
|
+
content: attr(data-value);
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
.flip-card__back,
|
|
1137
|
+
.flip-card__back-4digits {
|
|
1138
|
+
position: absolute;
|
|
1139
|
+
top: 0;
|
|
1140
|
+
height: 100%;
|
|
1141
|
+
left: 0%;
|
|
1142
|
+
pointer-events: none;
|
|
1143
|
+
}
|
|
1144
|
+
.flip-card__back::before,
|
|
1145
|
+
.flip-card__back-4digits::before {
|
|
1146
|
+
position: relative;
|
|
1147
|
+
overflow: hidden;
|
|
1148
|
+
z-index: -1;
|
|
1149
|
+
}
|
|
1150
|
+
|
|
1151
|
+
.flip .flip-card__back::before,
|
|
1152
|
+
.flip .flip-card__back-4digits::before {
|
|
1153
|
+
z-index: 1;
|
|
1154
|
+
animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
|
|
1155
|
+
animation-fill-mode: both;
|
|
1156
|
+
transform-origin: center bottom;
|
|
1157
|
+
}
|
|
1158
|
+
|
|
1159
|
+
.flip .flip-card__bottom,
|
|
1160
|
+
.flip .flip-card__bottom-4digits {
|
|
1161
|
+
transform-origin: center top;
|
|
1162
|
+
animation-fill-mode: both;
|
|
1163
|
+
animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
|
|
1164
|
+
}
|
|
1165
|
+
@keyframes flipTop {
|
|
1166
|
+
0% {
|
|
1167
|
+
transform: rotateX(0deg);
|
|
1168
|
+
z-index: 2;
|
|
1169
|
+
}
|
|
1170
|
+
0%, 99% {
|
|
1171
|
+
opacity: 1;
|
|
1172
|
+
}
|
|
1173
|
+
100% {
|
|
1174
|
+
transform: rotateX(-90deg);
|
|
1175
|
+
opacity: 0;
|
|
1176
|
+
}
|
|
1177
|
+
}
|
|
1178
|
+
|
|
1179
|
+
@keyframes flipBottom {
|
|
1180
|
+
0%, 50% {
|
|
1181
|
+
z-index: -1;
|
|
1182
|
+
transform: rotateX(90deg);
|
|
1183
|
+
opacity: 0;
|
|
1184
|
+
}
|
|
1185
|
+
51% {
|
|
1186
|
+
opacity: 1;
|
|
1187
|
+
}
|
|
1188
|
+
100% {
|
|
1189
|
+
opacity: 1;
|
|
1190
|
+
transform: rotateX(0deg);
|
|
1191
|
+
z-index: 5;
|
|
1192
|
+
}
|
|
1193
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, withModifiers, normalizeStyle as normalizeStyle$1, withCtx, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, normalizeProps, guardReactiveProps, h as h$2, ref, onUpdated, watch, nextTick as nextTick$1, onMounted, onBeforeUnmount, onBeforeUpdate, resolveComponent, createVNode, normalizeClass, createElementVNode, createCommentVNode, renderSlot, pushScopeId, popScopeId, toRefs, onBeforeMount, onUnmounted, withDirectives, vShow, isVNode, Comment, Text, reactive, getCurrentInstance, inject, provide, unref, shallowRef, watchEffect, triggerRef, Transition, resolveDirective, cloneVNode, toRef, Teleport, isRef, toRaw, render as render$m, TransitionGroup
|
|
1
|
+
import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, withModifiers, normalizeStyle as normalizeStyle$1, withCtx, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, normalizeProps, guardReactiveProps, h as h$2, ref, onUpdated, watch, nextTick as nextTick$1, onMounted, onBeforeUnmount, onBeforeUpdate, resolveComponent, createVNode, normalizeClass, createElementVNode, mergeProps, createCommentVNode, renderSlot, pushScopeId, popScopeId, toRefs, onBeforeMount, onUnmounted, withDirectives, vShow, isVNode, Comment, Text, reactive, getCurrentInstance, inject, provide, unref, shallowRef, watchEffect, triggerRef, Transition, resolveDirective, cloneVNode, toRef, Teleport, isRef, toRaw, render as render$m, TransitionGroup } from 'vue';
|
|
2
2
|
import crypto from 'crypto';
|
|
3
3
|
|
|
4
4
|
/** Detect free variable `global` from Node.js. */
|
|
@@ -13023,7 +13023,7 @@ var script$g = defineComponent({
|
|
|
13023
13023
|
};
|
|
13024
13024
|
const upArrow = ref(true);
|
|
13025
13025
|
const runAnimations = (currentIndex) => {
|
|
13026
|
-
|
|
13026
|
+
const pages = cloneDeep$1(props.work && props.work.pages);
|
|
13027
13027
|
pages[currentIndex].components && pages[currentIndex].components.forEach((component) => {
|
|
13028
13028
|
const animationQueue = component.animations || [];
|
|
13029
13029
|
const len = animationQueue.length;
|
|
@@ -13041,20 +13041,31 @@ var script$g = defineComponent({
|
|
|
13041
13041
|
animationDelay: `${animation.delay}s`,
|
|
13042
13042
|
animationFillMode: 'both'
|
|
13043
13043
|
};
|
|
13044
|
-
componentRefs.value.get('component-' + component.id)
|
|
13045
|
-
|
|
13044
|
+
const element = componentRefs.value.get('component-' + component.id);
|
|
13045
|
+
if (element) {
|
|
13046
|
+
// element.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
|
|
13047
|
+
element.style.cssText = getComputedCSSText(animationStyle);
|
|
13048
|
+
animIdx++;
|
|
13049
|
+
}
|
|
13046
13050
|
}
|
|
13047
13051
|
else {
|
|
13048
|
-
componentRefs.value.get('component-' + component.id)
|
|
13052
|
+
const element = componentRefs.value.get('component-' + component.id);
|
|
13053
|
+
if (element) {
|
|
13054
|
+
element.style.cssText = getComputedCSSText(oldStyle);
|
|
13055
|
+
}
|
|
13049
13056
|
}
|
|
13050
13057
|
};
|
|
13051
13058
|
runAnimation();
|
|
13052
|
-
componentRefs.value.get('component-' + component.id)
|
|
13053
|
-
|
|
13059
|
+
const element = componentRefs.value.get('component-' + component.id);
|
|
13060
|
+
if (element) {
|
|
13061
|
+
element.addEventListener('animationend', runAnimation, false);
|
|
13062
|
+
element.addEventListener('webkitAnimationEnd', runAnimation, false);
|
|
13063
|
+
}
|
|
13054
13064
|
});
|
|
13055
13065
|
};
|
|
13056
13066
|
const onSlideChange = (swiper) => {
|
|
13057
13067
|
const currentIndex = swiper.activeIndex;
|
|
13068
|
+
console.log('Slide changed to:', currentIndex); // 添加调试信息
|
|
13058
13069
|
runAnimations(currentIndex);
|
|
13059
13070
|
if (currentIndex === swiper.slides.length - 1) {
|
|
13060
13071
|
upArrow.value = false;
|
|
@@ -13062,22 +13073,19 @@ var script$g = defineComponent({
|
|
|
13062
13073
|
else {
|
|
13063
13074
|
upArrow.value = true;
|
|
13064
13075
|
}
|
|
13065
|
-
// swiper.swiperAnimation.animate();
|
|
13066
13076
|
swiperAnimate(swiper);
|
|
13067
13077
|
};
|
|
13068
13078
|
const slideChangeTransitionEnd = (e) => {
|
|
13069
13079
|
swiperAnimate(e);
|
|
13070
13080
|
};
|
|
13071
13081
|
const onSwiper = (swiper) => {
|
|
13072
|
-
// swiper.swiperAnimation = new SwiperAnimation();
|
|
13073
|
-
// swiper.swiperAnimation.init(swiper).animate();
|
|
13074
13082
|
swiperAnimateCache();
|
|
13075
13083
|
swiperAnimate(swiper);
|
|
13076
13084
|
const currentIndex = swiper.activeIndex;
|
|
13077
13085
|
runAnimations(currentIndex);
|
|
13078
13086
|
};
|
|
13079
13087
|
const direction = 'vertical';
|
|
13080
|
-
const effect = 'fade'
|
|
13088
|
+
// const effect = 'fade'
|
|
13081
13089
|
const slideClasses = (index) => {
|
|
13082
13090
|
return ['swiper-slide', `slide-${index}`];
|
|
13083
13091
|
};
|
|
@@ -13088,7 +13096,7 @@ var script$g = defineComponent({
|
|
|
13088
13096
|
onSwiper,
|
|
13089
13097
|
modules: [EffectFade],
|
|
13090
13098
|
direction,
|
|
13091
|
-
effect,
|
|
13099
|
+
// effect,
|
|
13092
13100
|
upArrow,
|
|
13093
13101
|
slideChangeTransitionEnd,
|
|
13094
13102
|
slideClasses
|
|
@@ -13118,7 +13126,7 @@ function render$h(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
13118
13126
|
createVNode(_component_swiper, {
|
|
13119
13127
|
class: "swiper-container",
|
|
13120
13128
|
modules: _ctx.modules,
|
|
13121
|
-
effect: _ctx.effect,
|
|
13129
|
+
effect: _ctx.work.effect,
|
|
13122
13130
|
direction: _ctx.direction,
|
|
13123
13131
|
onSwiper: _ctx.onSwiper,
|
|
13124
13132
|
onSlideChange: _ctx.onSlideChange
|
|
@@ -13137,13 +13145,14 @@ function render$h(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
13137
13145
|
(openBlock(true), createElementBlock(Fragment, null, renderList(page.components, (item) => {
|
|
13138
13146
|
return (openBlock(), createElementBlock("div", {
|
|
13139
13147
|
key: item.id,
|
|
13140
|
-
id: `component-${item.id}`,
|
|
13141
13148
|
ref_for: true,
|
|
13142
13149
|
ref: _ctx.setComponentRef,
|
|
13150
|
+
id: `component-${item.id}`,
|
|
13143
13151
|
style: {"width":"100%","height":"100%"}
|
|
13144
13152
|
}, [
|
|
13145
|
-
|
|
13146
|
-
|
|
13153
|
+
(item.name != 'uni-build-up')
|
|
13154
|
+
? (openBlock(), createBlock(resolveDynamicComponent(item.name), normalizeProps(mergeProps({ key: 0 }, item.props)), null, 16 /* FULL_PROPS */))
|
|
13155
|
+
: createCommentVNode("v-if", true)
|
|
13147
13156
|
], 8 /* PROPS */, _hoisted_2$3))
|
|
13148
13157
|
}), 128 /* KEYED_FRAGMENT */))
|
|
13149
13158
|
], 4 /* STYLE */)
|
|
@@ -13030,7 +13030,7 @@
|
|
|
13030
13030
|
};
|
|
13031
13031
|
const upArrow = vue.ref(true);
|
|
13032
13032
|
const runAnimations = (currentIndex) => {
|
|
13033
|
-
|
|
13033
|
+
const pages = cloneDeep$1(props.work && props.work.pages);
|
|
13034
13034
|
pages[currentIndex].components && pages[currentIndex].components.forEach((component) => {
|
|
13035
13035
|
const animationQueue = component.animations || [];
|
|
13036
13036
|
const len = animationQueue.length;
|
|
@@ -13048,20 +13048,31 @@
|
|
|
13048
13048
|
animationDelay: `${animation.delay}s`,
|
|
13049
13049
|
animationFillMode: 'both'
|
|
13050
13050
|
};
|
|
13051
|
-
componentRefs.value.get('component-' + component.id)
|
|
13052
|
-
|
|
13051
|
+
const element = componentRefs.value.get('component-' + component.id);
|
|
13052
|
+
if (element) {
|
|
13053
|
+
// element.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
|
|
13054
|
+
element.style.cssText = getComputedCSSText(animationStyle);
|
|
13055
|
+
animIdx++;
|
|
13056
|
+
}
|
|
13053
13057
|
}
|
|
13054
13058
|
else {
|
|
13055
|
-
componentRefs.value.get('component-' + component.id)
|
|
13059
|
+
const element = componentRefs.value.get('component-' + component.id);
|
|
13060
|
+
if (element) {
|
|
13061
|
+
element.style.cssText = getComputedCSSText(oldStyle);
|
|
13062
|
+
}
|
|
13056
13063
|
}
|
|
13057
13064
|
};
|
|
13058
13065
|
runAnimation();
|
|
13059
|
-
componentRefs.value.get('component-' + component.id)
|
|
13060
|
-
|
|
13066
|
+
const element = componentRefs.value.get('component-' + component.id);
|
|
13067
|
+
if (element) {
|
|
13068
|
+
element.addEventListener('animationend', runAnimation, false);
|
|
13069
|
+
element.addEventListener('webkitAnimationEnd', runAnimation, false);
|
|
13070
|
+
}
|
|
13061
13071
|
});
|
|
13062
13072
|
};
|
|
13063
13073
|
const onSlideChange = (swiper) => {
|
|
13064
13074
|
const currentIndex = swiper.activeIndex;
|
|
13075
|
+
console.log('Slide changed to:', currentIndex); // 添加调试信息
|
|
13065
13076
|
runAnimations(currentIndex);
|
|
13066
13077
|
if (currentIndex === swiper.slides.length - 1) {
|
|
13067
13078
|
upArrow.value = false;
|
|
@@ -13069,22 +13080,19 @@
|
|
|
13069
13080
|
else {
|
|
13070
13081
|
upArrow.value = true;
|
|
13071
13082
|
}
|
|
13072
|
-
// swiper.swiperAnimation.animate();
|
|
13073
13083
|
swiperAnimate(swiper);
|
|
13074
13084
|
};
|
|
13075
13085
|
const slideChangeTransitionEnd = (e) => {
|
|
13076
13086
|
swiperAnimate(e);
|
|
13077
13087
|
};
|
|
13078
13088
|
const onSwiper = (swiper) => {
|
|
13079
|
-
// swiper.swiperAnimation = new SwiperAnimation();
|
|
13080
|
-
// swiper.swiperAnimation.init(swiper).animate();
|
|
13081
13089
|
swiperAnimateCache();
|
|
13082
13090
|
swiperAnimate(swiper);
|
|
13083
13091
|
const currentIndex = swiper.activeIndex;
|
|
13084
13092
|
runAnimations(currentIndex);
|
|
13085
13093
|
};
|
|
13086
13094
|
const direction = 'vertical';
|
|
13087
|
-
const effect = 'fade'
|
|
13095
|
+
// const effect = 'fade'
|
|
13088
13096
|
const slideClasses = (index) => {
|
|
13089
13097
|
return ['swiper-slide', `slide-${index}`];
|
|
13090
13098
|
};
|
|
@@ -13095,7 +13103,7 @@
|
|
|
13095
13103
|
onSwiper,
|
|
13096
13104
|
modules: [EffectFade],
|
|
13097
13105
|
direction,
|
|
13098
|
-
effect,
|
|
13106
|
+
// effect,
|
|
13099
13107
|
upArrow,
|
|
13100
13108
|
slideChangeTransitionEnd,
|
|
13101
13109
|
slideClasses
|
|
@@ -13125,7 +13133,7 @@
|
|
|
13125
13133
|
vue.createVNode(_component_swiper, {
|
|
13126
13134
|
class: "swiper-container",
|
|
13127
13135
|
modules: _ctx.modules,
|
|
13128
|
-
effect: _ctx.effect,
|
|
13136
|
+
effect: _ctx.work.effect,
|
|
13129
13137
|
direction: _ctx.direction,
|
|
13130
13138
|
onSwiper: _ctx.onSwiper,
|
|
13131
13139
|
onSlideChange: _ctx.onSlideChange
|
|
@@ -13144,13 +13152,14 @@
|
|
|
13144
13152
|
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(page.components, (item) => {
|
|
13145
13153
|
return (vue.openBlock(), vue.createElementBlock("div", {
|
|
13146
13154
|
key: item.id,
|
|
13147
|
-
id: `component-${item.id}`,
|
|
13148
13155
|
ref_for: true,
|
|
13149
13156
|
ref: _ctx.setComponentRef,
|
|
13157
|
+
id: `component-${item.id}`,
|
|
13150
13158
|
style: {"width":"100%","height":"100%"}
|
|
13151
13159
|
}, [
|
|
13152
|
-
|
|
13153
|
-
|
|
13160
|
+
(item.name != 'uni-build-up')
|
|
13161
|
+
? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.normalizeProps(vue.mergeProps({ key: 0 }, item.props)), null, 16 /* FULL_PROPS */))
|
|
13162
|
+
: vue.createCommentVNode("v-if", true)
|
|
13154
13163
|
], 8 /* PROPS */, _hoisted_2$3))
|
|
13155
13164
|
}), 128 /* KEYED_FRAGMENT */))
|
|
13156
13165
|
], 4 /* STYLE */)
|