unika-components 1.0.257 → 1.0.259
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.
|
@@ -10,8 +10,10 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
10
10
|
type: PropType<ComponentData[]>;
|
|
11
11
|
};
|
|
12
12
|
}, {
|
|
13
|
+
refs: import("vue").Ref<Map<any, any> & Omit<Map<any, any>, keyof Map<any, any>>>;
|
|
13
14
|
componentRefs: import("vue").Ref<Map<any, any> & Omit<Map<any, any>, keyof Map<any, any>>>;
|
|
14
|
-
setComponentRef: (el: any) => void;
|
|
15
|
+
setComponentRef: (el: any, key: string) => void;
|
|
16
|
+
setAnimationRef: (el: any) => void;
|
|
15
17
|
onSlideChange: (swiper: any) => void;
|
|
16
18
|
onSwiper: (swiper: any) => void;
|
|
17
19
|
modules: import("swiper/types").SwiperComponent[];
|
|
@@ -18,7 +18,7 @@ button.uni-text-component {
|
|
|
18
18
|
display: inline-block;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
.slide-guide {
|
|
22
22
|
position: absolute;
|
|
23
23
|
bottom: 90px;
|
|
24
24
|
left: 50%;
|
|
@@ -91,18 +91,6 @@ body, html {
|
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
|
|
94
|
-
|
|
95
|
-
.uni-calendar-component {
|
|
96
|
-
|
|
97
|
-
}
|
|
98
|
-
.slot-number {
|
|
99
|
-
position: absolute;
|
|
100
|
-
bottom: 2px;
|
|
101
|
-
left: 7px;
|
|
102
|
-
font-size: 12px;
|
|
103
|
-
color: #666
|
|
104
|
-
}
|
|
105
|
-
|
|
106
94
|
.uni-video-component {
|
|
107
95
|
position: relative;
|
|
108
96
|
text-align: center;
|
|
@@ -124,6 +112,43 @@ body, html {
|
|
|
124
112
|
background: rgba(0, 0, 0, 0.8);
|
|
125
113
|
}
|
|
126
114
|
|
|
115
|
+
|
|
116
|
+
.uni-calendar-component {
|
|
117
|
+
|
|
118
|
+
}
|
|
119
|
+
.slot-number {
|
|
120
|
+
position: absolute;
|
|
121
|
+
bottom: 2px;
|
|
122
|
+
left: 7px;
|
|
123
|
+
font-size: 12px;
|
|
124
|
+
color: #666
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.like-button {
|
|
128
|
+
display: flex;
|
|
129
|
+
flex-direction: column;
|
|
130
|
+
align-items: center;
|
|
131
|
+
cursor: pointer;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.icon-heart {
|
|
135
|
+
font-size: 24px;
|
|
136
|
+
color: #e74c3c;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.liked {
|
|
140
|
+
color: #f00; /* 更改颜色以示已赞 */
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.like-count {
|
|
144
|
+
margin-top: 4px;
|
|
145
|
+
font-size: 16px;
|
|
146
|
+
color: #333;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.uni-build-up-component {
|
|
150
|
+
}
|
|
151
|
+
|
|
127
152
|
.uni-lotties-component {
|
|
128
153
|
width: 100%;
|
|
129
154
|
height: 100%;
|
|
@@ -182,35 +207,10 @@ body, html {
|
|
|
182
207
|
margin-bottom: 0px;
|
|
183
208
|
vertical-align: top;
|
|
184
209
|
}
|
|
185
|
-
|
|
186
|
-
.uni-build-up-component {
|
|
187
|
-
}
|
|
188
210
|
|
|
189
211
|
.uni-svg-component {
|
|
190
212
|
display: inline-block;
|
|
191
213
|
}
|
|
192
|
-
|
|
193
|
-
.like-button {
|
|
194
|
-
display: flex;
|
|
195
|
-
flex-direction: column;
|
|
196
|
-
align-items: center;
|
|
197
|
-
cursor: pointer;
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
.icon-heart {
|
|
201
|
-
font-size: 24px;
|
|
202
|
-
color: #e74c3c;
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
.liked {
|
|
206
|
-
color: #f00; /* 更改颜色以示已赞 */
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
.like-count {
|
|
210
|
-
margin-top: 4px;
|
|
211
|
-
font-size: 16px;
|
|
212
|
-
color: #333;
|
|
213
|
-
}
|
|
214
214
|
/**
|
|
215
215
|
* Swiper 6.8.4
|
|
216
216
|
* Most modern mobile touch slider and framework with hardware accelerated transitions
|
|
@@ -759,193 +759,6 @@ button.swiper-pagination-bullet {
|
|
|
759
759
|
backface-visibility: hidden;
|
|
760
760
|
}
|
|
761
761
|
|
|
762
|
-
|
|
763
|
-
.no-animation__card {
|
|
764
|
-
font-weight: 500;
|
|
765
|
-
font-size: var(--countdown-size, 2rem);
|
|
766
|
-
line-height: 1.5;
|
|
767
|
-
display: block;
|
|
768
|
-
color: var(--main-color, #EC685C);
|
|
769
|
-
}
|
|
770
|
-
|
|
771
|
-
.flip-clock {
|
|
772
|
-
text-align: center;
|
|
773
|
-
perspective: 600px;
|
|
774
|
-
margin: 0 auto;
|
|
775
|
-
}
|
|
776
|
-
|
|
777
|
-
.flip-clock *,
|
|
778
|
-
.flip-clock *:before,
|
|
779
|
-
.flip-clock *:after {
|
|
780
|
-
box-sizing: border-box;
|
|
781
|
-
}
|
|
782
|
-
|
|
783
|
-
.flip-clock__piece {
|
|
784
|
-
display: inline-block;
|
|
785
|
-
margin: 0 0.2vw;
|
|
786
|
-
}
|
|
787
|
-
|
|
788
|
-
@media (min-width: 1000px) {
|
|
789
|
-
.flip-clock__piece {
|
|
790
|
-
margin: 0 5px;
|
|
791
|
-
}
|
|
792
|
-
}
|
|
793
|
-
|
|
794
|
-
.flip-clock__slot {
|
|
795
|
-
font-size: var(--label-size, 1rem);
|
|
796
|
-
line-height: 1.5;
|
|
797
|
-
display: block;
|
|
798
|
-
color: var(--label-color, #222222);
|
|
799
|
-
}
|
|
800
|
-
|
|
801
|
-
.flip-card {
|
|
802
|
-
display: block;
|
|
803
|
-
position: relative;
|
|
804
|
-
padding-bottom: 0.72em; /* halfHeight */
|
|
805
|
-
font-size: var(--countdown-size, 2.25rem);
|
|
806
|
-
line-height: 0.95;
|
|
807
|
-
}
|
|
808
|
-
|
|
809
|
-
@media (min-width: 1000px) {
|
|
810
|
-
.flip-clock__slot {
|
|
811
|
-
font-size: 1.2rem;
|
|
812
|
-
}
|
|
813
|
-
|
|
814
|
-
.flip-card {
|
|
815
|
-
font-size: 3rem;
|
|
816
|
-
}
|
|
817
|
-
}
|
|
818
|
-
|
|
819
|
-
.flip-card__top,
|
|
820
|
-
.flip-card__bottom,
|
|
821
|
-
.flip-card__back-bottom,
|
|
822
|
-
.flip-card__back::before,
|
|
823
|
-
.flip-card__back::after{
|
|
824
|
-
display: block;
|
|
825
|
-
height: 0.72em; /* halfHeight */
|
|
826
|
-
color: var(--main-color, #EC685C);
|
|
827
|
-
background: var(--main-flip-background-color, #222222);
|
|
828
|
-
padding: 0.23em 0.15em 0.4em;
|
|
829
|
-
border-radius: 0.15em 0.15em 0 0; /* borderRadius */
|
|
830
|
-
backface-visibility: hidden;
|
|
831
|
-
-webkit-backface-visibility: hidden;
|
|
832
|
-
transform-style: preserve-3d;
|
|
833
|
-
width: 2.1em;
|
|
834
|
-
}
|
|
835
|
-
|
|
836
|
-
.flip-card__top-4digits,
|
|
837
|
-
.flip-card__bottom-4digits,
|
|
838
|
-
.flip-card__back-bottom-4digits,
|
|
839
|
-
.flip-card__back-4digits::before,
|
|
840
|
-
.flip-card__back-4digits::after {
|
|
841
|
-
display: block;
|
|
842
|
-
height: 0.72em; /* halfHeight */
|
|
843
|
-
color: var(--main-color, #EC685C);
|
|
844
|
-
background: var(--main-flip-background-color, #222222);
|
|
845
|
-
padding: 0.23em 0.15em 0.4em;
|
|
846
|
-
border-radius: 0.15em 0.15em 0 0; /* borderRadius */
|
|
847
|
-
backface-visibility: hidden;
|
|
848
|
-
-webkit-backface-visibility: hidden;
|
|
849
|
-
transform-style: preserve-3d;
|
|
850
|
-
width: 2.65em;
|
|
851
|
-
}
|
|
852
|
-
|
|
853
|
-
.flip-card__bottom,
|
|
854
|
-
.flip-card__back-bottom,
|
|
855
|
-
.flip-card__bottom-4digits,
|
|
856
|
-
.flip-card__back-bottom-4digits {
|
|
857
|
-
color: var(--second-flip-color, #EC685C);
|
|
858
|
-
position: absolute;
|
|
859
|
-
top: 50%;
|
|
860
|
-
left: 0;
|
|
861
|
-
border-top: solid 1px var(--second-flip-background-color, #000);
|
|
862
|
-
background: var(--second-flip-background-color, #393939);
|
|
863
|
-
border-radius: 0 0 0.15em 0.15em; /* borderRadius */
|
|
864
|
-
pointer-events: none;
|
|
865
|
-
overflow: hidden;
|
|
866
|
-
z-index: 2;
|
|
867
|
-
}
|
|
868
|
-
|
|
869
|
-
.flip-card__back-bottom,
|
|
870
|
-
.flip-card__back-bottom-4digits {
|
|
871
|
-
z-index: 1;
|
|
872
|
-
}
|
|
873
|
-
|
|
874
|
-
.flip-card__bottom::after,
|
|
875
|
-
.flip-card__back-bottom::after,
|
|
876
|
-
.flip-card__bottom-4digits::after,
|
|
877
|
-
.flip-card__back-bottom-4digits::after {
|
|
878
|
-
display: block;
|
|
879
|
-
margin-top: -0.72em; /* Negative halfHeight */
|
|
880
|
-
}
|
|
881
|
-
.flip-card__back::before,
|
|
882
|
-
.flip-card__bottom::after,
|
|
883
|
-
.flip-card__back-bottom::after,
|
|
884
|
-
.flip-card__back-4digits::before,
|
|
885
|
-
.flip-card__bottom-4digits::after,
|
|
886
|
-
.flip-card__back-bottom-4digits::after {
|
|
887
|
-
content: attr(data-value);
|
|
888
|
-
}
|
|
889
|
-
|
|
890
|
-
.flip-card__back,
|
|
891
|
-
.flip-card__back-4digits {
|
|
892
|
-
position: absolute;
|
|
893
|
-
top: 0;
|
|
894
|
-
height: 100%;
|
|
895
|
-
left: 0%;
|
|
896
|
-
pointer-events: none;
|
|
897
|
-
}
|
|
898
|
-
.flip-card__back::before,
|
|
899
|
-
.flip-card__back-4digits::before {
|
|
900
|
-
position: relative;
|
|
901
|
-
overflow: hidden;
|
|
902
|
-
z-index: -1;
|
|
903
|
-
}
|
|
904
|
-
|
|
905
|
-
.flip .flip-card__back::before,
|
|
906
|
-
.flip .flip-card__back-4digits::before {
|
|
907
|
-
z-index: 1;
|
|
908
|
-
animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
|
|
909
|
-
animation-fill-mode: both;
|
|
910
|
-
transform-origin: center bottom;
|
|
911
|
-
}
|
|
912
|
-
|
|
913
|
-
.flip .flip-card__bottom,
|
|
914
|
-
.flip .flip-card__bottom-4digits {
|
|
915
|
-
transform-origin: center top;
|
|
916
|
-
animation-fill-mode: both;
|
|
917
|
-
animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
|
|
918
|
-
}
|
|
919
|
-
@keyframes flipTop {
|
|
920
|
-
0% {
|
|
921
|
-
transform: rotateX(0deg);
|
|
922
|
-
z-index: 2;
|
|
923
|
-
}
|
|
924
|
-
0%, 99% {
|
|
925
|
-
opacity: 1;
|
|
926
|
-
}
|
|
927
|
-
100% {
|
|
928
|
-
transform: rotateX(-90deg);
|
|
929
|
-
opacity: 0;
|
|
930
|
-
}
|
|
931
|
-
}
|
|
932
|
-
|
|
933
|
-
@keyframes flipBottom {
|
|
934
|
-
0%, 50% {
|
|
935
|
-
z-index: -1;
|
|
936
|
-
transform: rotateX(90deg);
|
|
937
|
-
opacity: 0;
|
|
938
|
-
}
|
|
939
|
-
51% {
|
|
940
|
-
opacity: 1;
|
|
941
|
-
}
|
|
942
|
-
100% {
|
|
943
|
-
opacity: 1;
|
|
944
|
-
transform: rotateX(0deg);
|
|
945
|
-
z-index: 5;
|
|
946
|
-
}
|
|
947
|
-
}
|
|
948
|
-
|
|
949
762
|
.unika-calendar-box {
|
|
950
763
|
position: relative;
|
|
951
764
|
width: 325px !important;
|
|
@@ -1205,3 +1018,190 @@ button.swiper-pagination-bullet {
|
|
|
1205
1018
|
padding: 0 0px;
|
|
1206
1019
|
border-bottom: 1px solid
|
|
1207
1020
|
}
|
|
1021
|
+
|
|
1022
|
+
|
|
1023
|
+
.no-animation__card {
|
|
1024
|
+
font-weight: 500;
|
|
1025
|
+
font-size: var(--countdown-size, 2rem);
|
|
1026
|
+
line-height: 1.5;
|
|
1027
|
+
display: block;
|
|
1028
|
+
color: var(--main-color, #EC685C);
|
|
1029
|
+
}
|
|
1030
|
+
|
|
1031
|
+
.flip-clock {
|
|
1032
|
+
text-align: center;
|
|
1033
|
+
perspective: 600px;
|
|
1034
|
+
margin: 0 auto;
|
|
1035
|
+
}
|
|
1036
|
+
|
|
1037
|
+
.flip-clock *,
|
|
1038
|
+
.flip-clock *:before,
|
|
1039
|
+
.flip-clock *:after {
|
|
1040
|
+
box-sizing: border-box;
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1043
|
+
.flip-clock__piece {
|
|
1044
|
+
display: inline-block;
|
|
1045
|
+
margin: 0 0.2vw;
|
|
1046
|
+
}
|
|
1047
|
+
|
|
1048
|
+
@media (min-width: 1000px) {
|
|
1049
|
+
.flip-clock__piece {
|
|
1050
|
+
margin: 0 5px;
|
|
1051
|
+
}
|
|
1052
|
+
}
|
|
1053
|
+
|
|
1054
|
+
.flip-clock__slot {
|
|
1055
|
+
font-size: var(--label-size, 1rem);
|
|
1056
|
+
line-height: 1.5;
|
|
1057
|
+
display: block;
|
|
1058
|
+
color: var(--label-color, #222222);
|
|
1059
|
+
}
|
|
1060
|
+
|
|
1061
|
+
.flip-card {
|
|
1062
|
+
display: block;
|
|
1063
|
+
position: relative;
|
|
1064
|
+
padding-bottom: 0.72em; /* halfHeight */
|
|
1065
|
+
font-size: var(--countdown-size, 2.25rem);
|
|
1066
|
+
line-height: 0.95;
|
|
1067
|
+
}
|
|
1068
|
+
|
|
1069
|
+
@media (min-width: 1000px) {
|
|
1070
|
+
.flip-clock__slot {
|
|
1071
|
+
font-size: 1.2rem;
|
|
1072
|
+
}
|
|
1073
|
+
|
|
1074
|
+
.flip-card {
|
|
1075
|
+
font-size: 3rem;
|
|
1076
|
+
}
|
|
1077
|
+
}
|
|
1078
|
+
|
|
1079
|
+
.flip-card__top,
|
|
1080
|
+
.flip-card__bottom,
|
|
1081
|
+
.flip-card__back-bottom,
|
|
1082
|
+
.flip-card__back::before,
|
|
1083
|
+
.flip-card__back::after{
|
|
1084
|
+
display: block;
|
|
1085
|
+
height: 0.72em; /* halfHeight */
|
|
1086
|
+
color: var(--main-color, #EC685C);
|
|
1087
|
+
background: var(--main-flip-background-color, #222222);
|
|
1088
|
+
padding: 0.23em 0.15em 0.4em;
|
|
1089
|
+
border-radius: 0.15em 0.15em 0 0; /* borderRadius */
|
|
1090
|
+
backface-visibility: hidden;
|
|
1091
|
+
-webkit-backface-visibility: hidden;
|
|
1092
|
+
transform-style: preserve-3d;
|
|
1093
|
+
width: 2.1em;
|
|
1094
|
+
}
|
|
1095
|
+
|
|
1096
|
+
.flip-card__top-4digits,
|
|
1097
|
+
.flip-card__bottom-4digits,
|
|
1098
|
+
.flip-card__back-bottom-4digits,
|
|
1099
|
+
.flip-card__back-4digits::before,
|
|
1100
|
+
.flip-card__back-4digits::after {
|
|
1101
|
+
display: block;
|
|
1102
|
+
height: 0.72em; /* halfHeight */
|
|
1103
|
+
color: var(--main-color, #EC685C);
|
|
1104
|
+
background: var(--main-flip-background-color, #222222);
|
|
1105
|
+
padding: 0.23em 0.15em 0.4em;
|
|
1106
|
+
border-radius: 0.15em 0.15em 0 0; /* borderRadius */
|
|
1107
|
+
backface-visibility: hidden;
|
|
1108
|
+
-webkit-backface-visibility: hidden;
|
|
1109
|
+
transform-style: preserve-3d;
|
|
1110
|
+
width: 2.65em;
|
|
1111
|
+
}
|
|
1112
|
+
|
|
1113
|
+
.flip-card__bottom,
|
|
1114
|
+
.flip-card__back-bottom,
|
|
1115
|
+
.flip-card__bottom-4digits,
|
|
1116
|
+
.flip-card__back-bottom-4digits {
|
|
1117
|
+
color: var(--second-flip-color, #EC685C);
|
|
1118
|
+
position: absolute;
|
|
1119
|
+
top: 50%;
|
|
1120
|
+
left: 0;
|
|
1121
|
+
border-top: solid 1px var(--second-flip-background-color, #000);
|
|
1122
|
+
background: var(--second-flip-background-color, #393939);
|
|
1123
|
+
border-radius: 0 0 0.15em 0.15em; /* borderRadius */
|
|
1124
|
+
pointer-events: none;
|
|
1125
|
+
overflow: hidden;
|
|
1126
|
+
z-index: 2;
|
|
1127
|
+
}
|
|
1128
|
+
|
|
1129
|
+
.flip-card__back-bottom,
|
|
1130
|
+
.flip-card__back-bottom-4digits {
|
|
1131
|
+
z-index: 1;
|
|
1132
|
+
}
|
|
1133
|
+
|
|
1134
|
+
.flip-card__bottom::after,
|
|
1135
|
+
.flip-card__back-bottom::after,
|
|
1136
|
+
.flip-card__bottom-4digits::after,
|
|
1137
|
+
.flip-card__back-bottom-4digits::after {
|
|
1138
|
+
display: block;
|
|
1139
|
+
margin-top: -0.72em; /* Negative halfHeight */
|
|
1140
|
+
}
|
|
1141
|
+
.flip-card__back::before,
|
|
1142
|
+
.flip-card__bottom::after,
|
|
1143
|
+
.flip-card__back-bottom::after,
|
|
1144
|
+
.flip-card__back-4digits::before,
|
|
1145
|
+
.flip-card__bottom-4digits::after,
|
|
1146
|
+
.flip-card__back-bottom-4digits::after {
|
|
1147
|
+
content: attr(data-value);
|
|
1148
|
+
}
|
|
1149
|
+
|
|
1150
|
+
.flip-card__back,
|
|
1151
|
+
.flip-card__back-4digits {
|
|
1152
|
+
position: absolute;
|
|
1153
|
+
top: 0;
|
|
1154
|
+
height: 100%;
|
|
1155
|
+
left: 0%;
|
|
1156
|
+
pointer-events: none;
|
|
1157
|
+
}
|
|
1158
|
+
.flip-card__back::before,
|
|
1159
|
+
.flip-card__back-4digits::before {
|
|
1160
|
+
position: relative;
|
|
1161
|
+
overflow: hidden;
|
|
1162
|
+
z-index: -1;
|
|
1163
|
+
}
|
|
1164
|
+
|
|
1165
|
+
.flip .flip-card__back::before,
|
|
1166
|
+
.flip .flip-card__back-4digits::before {
|
|
1167
|
+
z-index: 1;
|
|
1168
|
+
animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
|
|
1169
|
+
animation-fill-mode: both;
|
|
1170
|
+
transform-origin: center bottom;
|
|
1171
|
+
}
|
|
1172
|
+
|
|
1173
|
+
.flip .flip-card__bottom,
|
|
1174
|
+
.flip .flip-card__bottom-4digits {
|
|
1175
|
+
transform-origin: center top;
|
|
1176
|
+
animation-fill-mode: both;
|
|
1177
|
+
animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
|
|
1178
|
+
}
|
|
1179
|
+
@keyframes flipTop {
|
|
1180
|
+
0% {
|
|
1181
|
+
transform: rotateX(0deg);
|
|
1182
|
+
z-index: 2;
|
|
1183
|
+
}
|
|
1184
|
+
0%, 99% {
|
|
1185
|
+
opacity: 1;
|
|
1186
|
+
}
|
|
1187
|
+
100% {
|
|
1188
|
+
transform: rotateX(-90deg);
|
|
1189
|
+
opacity: 0;
|
|
1190
|
+
}
|
|
1191
|
+
}
|
|
1192
|
+
|
|
1193
|
+
@keyframes flipBottom {
|
|
1194
|
+
0%, 50% {
|
|
1195
|
+
z-index: -1;
|
|
1196
|
+
transform: rotateX(90deg);
|
|
1197
|
+
opacity: 0;
|
|
1198
|
+
}
|
|
1199
|
+
51% {
|
|
1200
|
+
opacity: 1;
|
|
1201
|
+
}
|
|
1202
|
+
100% {
|
|
1203
|
+
opacity: 1;
|
|
1204
|
+
transform: rotateX(0deg);
|
|
1205
|
+
z-index: 5;
|
|
1206
|
+
}
|
|
1207
|
+
}
|
|
@@ -13045,7 +13045,6 @@ SwiperCore.use([Pagination$1, EffectFade]);
|
|
|
13045
13045
|
function getComputedCSSText(style) {
|
|
13046
13046
|
let cssText = '';
|
|
13047
13047
|
for (const attr in style) {
|
|
13048
|
-
// #!zh: 驼峰转下划线
|
|
13049
13048
|
cssText += `${attr.replace(/[A-Z]+/g, m => `-${m.toLowerCase()}`)}:${style[attr]};`;
|
|
13050
13049
|
}
|
|
13051
13050
|
return cssText;
|
|
@@ -13066,14 +13065,18 @@ var script$h = defineComponent({
|
|
|
13066
13065
|
SwiperSlide
|
|
13067
13066
|
},
|
|
13068
13067
|
setup(props) {
|
|
13069
|
-
// 重用并且简化
|
|
13070
|
-
// 抽离并且获得 styleProps
|
|
13071
13068
|
const componentRefs = ref(new Map());
|
|
13072
|
-
const
|
|
13069
|
+
const setAnimationRef = (el) => {
|
|
13073
13070
|
if (el) {
|
|
13074
13071
|
componentRefs.value.set(el.id, el);
|
|
13075
13072
|
}
|
|
13076
13073
|
};
|
|
13074
|
+
const refs = ref(new Map());
|
|
13075
|
+
const setComponentRef = (el, key) => {
|
|
13076
|
+
if (el) {
|
|
13077
|
+
refs.value.set(key, el);
|
|
13078
|
+
}
|
|
13079
|
+
};
|
|
13077
13080
|
const upArrow = ref(true);
|
|
13078
13081
|
const runAnimations = (currentIndex) => {
|
|
13079
13082
|
const pages = cloneDeep$1(props.work && props.work.pages);
|
|
@@ -13100,7 +13103,6 @@ var script$h = defineComponent({
|
|
|
13100
13103
|
if (element) {
|
|
13101
13104
|
const innerElement = element.querySelector('.inner-component');
|
|
13102
13105
|
if (innerElement) {
|
|
13103
|
-
// element.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
|
|
13104
13106
|
innerElement.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
|
|
13105
13107
|
animIdx++;
|
|
13106
13108
|
}
|
|
@@ -13127,25 +13129,21 @@ var script$h = defineComponent({
|
|
|
13127
13129
|
}
|
|
13128
13130
|
});
|
|
13129
13131
|
};
|
|
13130
|
-
const
|
|
13131
|
-
|
|
13132
|
-
|
|
13133
|
-
|
|
13134
|
-
|
|
13135
|
-
|
|
13136
|
-
|
|
13137
|
-
console.log(vueInstance);
|
|
13138
|
-
if (vueInstance.play) {
|
|
13139
|
-
console.log('bbbbbb');
|
|
13140
|
-
vueInstance.play();
|
|
13132
|
+
const callUniLottiesPlay = (currentIndex) => {
|
|
13133
|
+
const pageComponents = props.work && props.work.pages[currentIndex].components;
|
|
13134
|
+
pageComponents && pageComponents.forEach(component => {
|
|
13135
|
+
if (component.name === 'uni-lotties') {
|
|
13136
|
+
const element = refs.value.get('component-' + component.id);
|
|
13137
|
+
if (element && typeof element.play === 'function') {
|
|
13138
|
+
element.play();
|
|
13141
13139
|
}
|
|
13142
13140
|
}
|
|
13143
13141
|
});
|
|
13144
13142
|
};
|
|
13145
13143
|
const onSlideChange = (swiper) => {
|
|
13146
13144
|
const currentIndex = swiper.activeIndex;
|
|
13147
|
-
console.log('Slide changed to:', currentIndex); // 添加调试信息
|
|
13148
13145
|
runAnimations(currentIndex);
|
|
13146
|
+
callUniLottiesPlay(currentIndex);
|
|
13149
13147
|
if (currentIndex === swiper.slides.length - 1) {
|
|
13150
13148
|
upArrow.value = false;
|
|
13151
13149
|
}
|
|
@@ -13153,12 +13151,6 @@ var script$h = defineComponent({
|
|
|
13153
13151
|
upArrow.value = true;
|
|
13154
13152
|
}
|
|
13155
13153
|
swiperAnimate(swiper);
|
|
13156
|
-
const currentPage = props.work && props.work.pages[currentIndex];
|
|
13157
|
-
currentPage && currentPage.components.forEach((component) => {
|
|
13158
|
-
if (component.name === 'uni-lotties') {
|
|
13159
|
-
restartLottieAnimations();
|
|
13160
|
-
}
|
|
13161
|
-
});
|
|
13162
13154
|
};
|
|
13163
13155
|
const slideChangeTransitionEnd = (e) => {
|
|
13164
13156
|
swiperAnimate(e);
|
|
@@ -13168,26 +13160,21 @@ var script$h = defineComponent({
|
|
|
13168
13160
|
swiperAnimate(swiper);
|
|
13169
13161
|
const currentIndex = swiper.activeIndex;
|
|
13170
13162
|
runAnimations(currentIndex);
|
|
13171
|
-
|
|
13172
|
-
currentPage && currentPage.components.forEach((component) => {
|
|
13173
|
-
if (component.name === 'uni-lotties') {
|
|
13174
|
-
restartLottieAnimations();
|
|
13175
|
-
}
|
|
13176
|
-
});
|
|
13163
|
+
callUniLottiesPlay(currentIndex);
|
|
13177
13164
|
};
|
|
13178
13165
|
const direction = 'vertical';
|
|
13179
|
-
// const effect = 'fade'
|
|
13180
13166
|
const slideClasses = (index) => {
|
|
13181
13167
|
return ['swiper-slide', `slide-${index}`];
|
|
13182
13168
|
};
|
|
13183
13169
|
return {
|
|
13170
|
+
refs,
|
|
13184
13171
|
componentRefs,
|
|
13185
13172
|
setComponentRef,
|
|
13173
|
+
setAnimationRef,
|
|
13186
13174
|
onSlideChange,
|
|
13187
13175
|
onSwiper,
|
|
13188
13176
|
modules: [EffectFade],
|
|
13189
13177
|
direction,
|
|
13190
|
-
// effect,
|
|
13191
13178
|
upArrow,
|
|
13192
13179
|
slideChangeTransitionEnd,
|
|
13193
13180
|
slideClasses
|
|
@@ -13235,14 +13222,17 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
13235
13222
|
}, [
|
|
13236
13223
|
(openBlock(true), createElementBlock(Fragment, null, renderList(page.components, (item) => {
|
|
13237
13224
|
return (openBlock(), createElementBlock("div", {
|
|
13238
|
-
key: item.id,
|
|
13239
13225
|
ref_for: true,
|
|
13240
|
-
ref: _ctx.
|
|
13226
|
+
ref: _ctx.setAnimationRef,
|
|
13241
13227
|
id: `component-${item.id}`,
|
|
13228
|
+
key: item.id,
|
|
13242
13229
|
style: {"width":"100%","height":"100%"}
|
|
13243
13230
|
}, [
|
|
13244
13231
|
(item.name != 'uni-build-up' && !item.isHidden)
|
|
13245
|
-
? (openBlock(), createBlock(resolveDynamicComponent(item.name),
|
|
13232
|
+
? (openBlock(), createBlock(resolveDynamicComponent(item.name), mergeProps({ key: 0 }, item.props, {
|
|
13233
|
+
ref_for: true,
|
|
13234
|
+
ref: el => _ctx.setComponentRef(el, `component-${item.id}`)
|
|
13235
|
+
}), null, 16 /* FULL_PROPS */))
|
|
13246
13236
|
: createCommentVNode("v-if", true)
|
|
13247
13237
|
], 8 /* PROPS */, _hoisted_2$3))
|
|
13248
13238
|
}), 128 /* KEYED_FRAGMENT */))
|
|
@@ -75673,7 +75663,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
75673
75663
|
var Vue3Lottie = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
75674
75664
|
|
|
75675
75665
|
const defaultProps$4 = transformToComponentProps(componentsDefaultProps['uni-lotties'].props, isEditingProp);
|
|
75676
|
-
const defaultStyles$3 = without$1(Object.keys(lottiesDefaultProps), 'actionType', 'url', 'animationLink', 'loop', 'delay', 'pauseAnimation');
|
|
75666
|
+
const defaultStyles$3 = without$1(Object.keys(lottiesDefaultProps), 'actionType', 'url', 'animationLink', 'loop', 'delay', 'pauseAnimation', 'key');
|
|
75677
75667
|
var script$5 = defineComponent({
|
|
75678
75668
|
name: 'uni-lotties',
|
|
75679
75669
|
props: {
|
|
@@ -13052,7 +13052,6 @@
|
|
|
13052
13052
|
function getComputedCSSText(style) {
|
|
13053
13053
|
let cssText = '';
|
|
13054
13054
|
for (const attr in style) {
|
|
13055
|
-
// #!zh: 驼峰转下划线
|
|
13056
13055
|
cssText += `${attr.replace(/[A-Z]+/g, m => `-${m.toLowerCase()}`)}:${style[attr]};`;
|
|
13057
13056
|
}
|
|
13058
13057
|
return cssText;
|
|
@@ -13073,14 +13072,18 @@
|
|
|
13073
13072
|
SwiperSlide
|
|
13074
13073
|
},
|
|
13075
13074
|
setup(props) {
|
|
13076
|
-
// 重用并且简化
|
|
13077
|
-
// 抽离并且获得 styleProps
|
|
13078
13075
|
const componentRefs = vue.ref(new Map());
|
|
13079
|
-
const
|
|
13076
|
+
const setAnimationRef = (el) => {
|
|
13080
13077
|
if (el) {
|
|
13081
13078
|
componentRefs.value.set(el.id, el);
|
|
13082
13079
|
}
|
|
13083
13080
|
};
|
|
13081
|
+
const refs = vue.ref(new Map());
|
|
13082
|
+
const setComponentRef = (el, key) => {
|
|
13083
|
+
if (el) {
|
|
13084
|
+
refs.value.set(key, el);
|
|
13085
|
+
}
|
|
13086
|
+
};
|
|
13084
13087
|
const upArrow = vue.ref(true);
|
|
13085
13088
|
const runAnimations = (currentIndex) => {
|
|
13086
13089
|
const pages = cloneDeep$1(props.work && props.work.pages);
|
|
@@ -13107,7 +13110,6 @@
|
|
|
13107
13110
|
if (element) {
|
|
13108
13111
|
const innerElement = element.querySelector('.inner-component');
|
|
13109
13112
|
if (innerElement) {
|
|
13110
|
-
// element.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
|
|
13111
13113
|
innerElement.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
|
|
13112
13114
|
animIdx++;
|
|
13113
13115
|
}
|
|
@@ -13134,25 +13136,21 @@
|
|
|
13134
13136
|
}
|
|
13135
13137
|
});
|
|
13136
13138
|
};
|
|
13137
|
-
const
|
|
13138
|
-
|
|
13139
|
-
|
|
13140
|
-
|
|
13141
|
-
|
|
13142
|
-
|
|
13143
|
-
|
|
13144
|
-
console.log(vueInstance);
|
|
13145
|
-
if (vueInstance.play) {
|
|
13146
|
-
console.log('bbbbbb');
|
|
13147
|
-
vueInstance.play();
|
|
13139
|
+
const callUniLottiesPlay = (currentIndex) => {
|
|
13140
|
+
const pageComponents = props.work && props.work.pages[currentIndex].components;
|
|
13141
|
+
pageComponents && pageComponents.forEach(component => {
|
|
13142
|
+
if (component.name === 'uni-lotties') {
|
|
13143
|
+
const element = refs.value.get('component-' + component.id);
|
|
13144
|
+
if (element && typeof element.play === 'function') {
|
|
13145
|
+
element.play();
|
|
13148
13146
|
}
|
|
13149
13147
|
}
|
|
13150
13148
|
});
|
|
13151
13149
|
};
|
|
13152
13150
|
const onSlideChange = (swiper) => {
|
|
13153
13151
|
const currentIndex = swiper.activeIndex;
|
|
13154
|
-
console.log('Slide changed to:', currentIndex); // 添加调试信息
|
|
13155
13152
|
runAnimations(currentIndex);
|
|
13153
|
+
callUniLottiesPlay(currentIndex);
|
|
13156
13154
|
if (currentIndex === swiper.slides.length - 1) {
|
|
13157
13155
|
upArrow.value = false;
|
|
13158
13156
|
}
|
|
@@ -13160,12 +13158,6 @@
|
|
|
13160
13158
|
upArrow.value = true;
|
|
13161
13159
|
}
|
|
13162
13160
|
swiperAnimate(swiper);
|
|
13163
|
-
const currentPage = props.work && props.work.pages[currentIndex];
|
|
13164
|
-
currentPage && currentPage.components.forEach((component) => {
|
|
13165
|
-
if (component.name === 'uni-lotties') {
|
|
13166
|
-
restartLottieAnimations();
|
|
13167
|
-
}
|
|
13168
|
-
});
|
|
13169
13161
|
};
|
|
13170
13162
|
const slideChangeTransitionEnd = (e) => {
|
|
13171
13163
|
swiperAnimate(e);
|
|
@@ -13175,26 +13167,21 @@
|
|
|
13175
13167
|
swiperAnimate(swiper);
|
|
13176
13168
|
const currentIndex = swiper.activeIndex;
|
|
13177
13169
|
runAnimations(currentIndex);
|
|
13178
|
-
|
|
13179
|
-
currentPage && currentPage.components.forEach((component) => {
|
|
13180
|
-
if (component.name === 'uni-lotties') {
|
|
13181
|
-
restartLottieAnimations();
|
|
13182
|
-
}
|
|
13183
|
-
});
|
|
13170
|
+
callUniLottiesPlay(currentIndex);
|
|
13184
13171
|
};
|
|
13185
13172
|
const direction = 'vertical';
|
|
13186
|
-
// const effect = 'fade'
|
|
13187
13173
|
const slideClasses = (index) => {
|
|
13188
13174
|
return ['swiper-slide', `slide-${index}`];
|
|
13189
13175
|
};
|
|
13190
13176
|
return {
|
|
13177
|
+
refs,
|
|
13191
13178
|
componentRefs,
|
|
13192
13179
|
setComponentRef,
|
|
13180
|
+
setAnimationRef,
|
|
13193
13181
|
onSlideChange,
|
|
13194
13182
|
onSwiper,
|
|
13195
13183
|
modules: [EffectFade],
|
|
13196
13184
|
direction,
|
|
13197
|
-
// effect,
|
|
13198
13185
|
upArrow,
|
|
13199
13186
|
slideChangeTransitionEnd,
|
|
13200
13187
|
slideClasses
|
|
@@ -13242,14 +13229,17 @@
|
|
|
13242
13229
|
}, [
|
|
13243
13230
|
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(page.components, (item) => {
|
|
13244
13231
|
return (vue.openBlock(), vue.createElementBlock("div", {
|
|
13245
|
-
key: item.id,
|
|
13246
13232
|
ref_for: true,
|
|
13247
|
-
ref: _ctx.
|
|
13233
|
+
ref: _ctx.setAnimationRef,
|
|
13248
13234
|
id: `component-${item.id}`,
|
|
13235
|
+
key: item.id,
|
|
13249
13236
|
style: {"width":"100%","height":"100%"}
|
|
13250
13237
|
}, [
|
|
13251
13238
|
(item.name != 'uni-build-up' && !item.isHidden)
|
|
13252
|
-
? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.
|
|
13239
|
+
? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.mergeProps({ key: 0 }, item.props, {
|
|
13240
|
+
ref_for: true,
|
|
13241
|
+
ref: el => _ctx.setComponentRef(el, `component-${item.id}`)
|
|
13242
|
+
}), null, 16 /* FULL_PROPS */))
|
|
13253
13243
|
: vue.createCommentVNode("v-if", true)
|
|
13254
13244
|
], 8 /* PROPS */, _hoisted_2$3))
|
|
13255
13245
|
}), 128 /* KEYED_FRAGMENT */))
|
|
@@ -75680,7 +75670,7 @@ summary tabindex target title type usemap value width wmode wrap`;
|
|
|
75680
75670
|
var Vue3Lottie = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
75681
75671
|
|
|
75682
75672
|
const defaultProps$4 = transformToComponentProps(componentsDefaultProps['uni-lotties'].props, isEditingProp);
|
|
75683
|
-
const defaultStyles$3 = without$1(Object.keys(lottiesDefaultProps), 'actionType', 'url', 'animationLink', 'loop', 'delay', 'pauseAnimation');
|
|
75673
|
+
const defaultStyles$3 = without$1(Object.keys(lottiesDefaultProps), 'actionType', 'url', 'animationLink', 'loop', 'delay', 'pauseAnimation', 'key');
|
|
75684
75674
|
var script$5 = vue.defineComponent({
|
|
75685
75675
|
name: 'uni-lotties',
|
|
75686
75676
|
props: {
|