unika-components 1.0.232 → 1.0.234

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.
@@ -330,6 +330,7 @@ declare const _default: import("vue").DefineComponent<{
330
330
  loopC: import("vue").Ref<any>;
331
331
  delayC: import("vue").Ref<any>;
332
332
  animationLinkC: import("vue").Ref<any>;
333
+ lottieKey: import("vue").Ref<number>;
333
334
  play: () => void;
334
335
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
335
336
  [x: string]: any;
@@ -387,6 +387,9 @@ export declare const registerFormDefaultProps: {
387
387
  attendanceTimeList: string[];
388
388
  opacity: number;
389
389
  isPhoneNumber: boolean;
390
+ buttonBackgroundColor: string;
391
+ buttonFontColor: string;
392
+ titleFontColor: string;
390
393
  };
391
394
  export declare const lottiesDefaultProps: {
392
395
  animationLink: string;
@@ -705,6 +708,9 @@ export declare const componentsDefaultProps: {
705
708
  attendanceTimeList: string[];
706
709
  opacity: number;
707
710
  isPhoneNumber: boolean;
711
+ buttonBackgroundColor: string;
712
+ buttonFontColor: string;
713
+ titleFontColor: string;
708
714
  };
709
715
  };
710
716
  'uni-lotties': {
@@ -1,16 +1,4 @@
1
1
 
2
- h2.uni-text-component, p.uni-text-component {
3
- margin-bottom: 0;
4
- }
5
- button.uni-text-component {
6
- padding: 5px 10px;
7
- cursor: pointer;
8
- }
9
- .uni-text-component {
10
- box-sizing: border-box;
11
- white-space: pre-wrap;
12
- }
13
-
14
2
  .slide-guide {
15
3
  position: absolute;
16
4
  bottom: 90px;
@@ -87,28 +75,18 @@ body, html {
87
75
  .uni-image-component {
88
76
  max-width: 100%;
89
77
  }
90
-
91
- .like-button {
92
- display: flex;
93
- flex-direction: column;
94
- align-items: center;
95
- cursor: pointer;
96
- }
97
-
98
- .icon-heart {
99
- font-size: 24px;
100
- color: #e74c3c;
101
- }
102
-
103
- .liked {
104
- color: #f00; /* 更改颜色以示已赞 */
105
- }
106
-
107
- .like-count {
108
- margin-top: 4px;
109
- font-size: 16px;
110
- color: #333;
111
- }
78
+
79
+ h2.uni-text-component, p.uni-text-component {
80
+ margin-bottom: 0;
81
+ }
82
+ button.uni-text-component {
83
+ padding: 5px 10px;
84
+ cursor: pointer;
85
+ }
86
+ .uni-text-component {
87
+ box-sizing: border-box;
88
+ white-space: pre-wrap;
89
+ }
112
90
 
113
91
  .uni-video-component {
114
92
  position: relative;
@@ -143,20 +121,11 @@ body, html {
143
121
  color: #666
144
122
  }
145
123
 
146
- .swiper-warp {
124
+ .effect {
147
125
  width: 100%;
148
126
  height: 100%;
149
127
  }
150
128
 
151
- .swiper-slide-component {
152
- text-align: center;
153
- }
154
-
155
- .swiper-slide img {
156
- max-width: 100%;
157
- max-height: 100%;
158
- }
159
-
160
129
  .ant-input-number {
161
130
  box-sizing: border-box;
162
131
  margin: 0;
@@ -192,17 +161,48 @@ body, html {
192
161
  vertical-align: top;
193
162
  }
194
163
 
195
- .effect {
164
+ .like-button {
165
+ display: flex;
166
+ flex-direction: column;
167
+ align-items: center;
168
+ cursor: pointer;
169
+ }
170
+
171
+ .icon-heart {
172
+ font-size: 24px;
173
+ color: #e74c3c;
174
+ }
175
+
176
+ .liked {
177
+ color: #f00; /* 更改颜色以示已赞 */
178
+ }
179
+
180
+ .like-count {
181
+ margin-top: 4px;
182
+ font-size: 16px;
183
+ color: #333;
184
+ }
185
+
186
+ .swiper-warp {
196
187
  width: 100%;
197
188
  height: 100%;
198
189
  }
199
190
 
200
- .uni-build-up-component {
201
- }
191
+ .swiper-slide-component {
192
+ text-align: center;
193
+ }
194
+
195
+ .swiper-slide img {
196
+ max-width: 100%;
197
+ max-height: 100%;
198
+ }
202
199
 
203
200
  .uni-svg-component {
204
201
  display: inline-block;
205
202
  }
203
+
204
+ .uni-build-up-component {
205
+ }
206
206
  /**
207
207
  * Swiper 6.8.4
208
208
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -751,6 +751,193 @@ button.swiper-pagination-bullet {
751
751
  backface-visibility: hidden;
752
752
  }
753
753
 
754
+
755
+ .no-animation__card {
756
+ font-weight: 500;
757
+ font-size: var(--countdown-size, 2rem);
758
+ line-height: 1.5;
759
+ display: block;
760
+ color: var(--main-color, #EC685C);
761
+ }
762
+
763
+ .flip-clock {
764
+ text-align: center;
765
+ perspective: 600px;
766
+ margin: 0 auto;
767
+ }
768
+
769
+ .flip-clock *,
770
+ .flip-clock *:before,
771
+ .flip-clock *:after {
772
+ box-sizing: border-box;
773
+ }
774
+
775
+ .flip-clock__piece {
776
+ display: inline-block;
777
+ margin: 0 0.2vw;
778
+ }
779
+
780
+ @media (min-width: 1000px) {
781
+ .flip-clock__piece {
782
+ margin: 0 5px;
783
+ }
784
+ }
785
+
786
+ .flip-clock__slot {
787
+ font-size: var(--label-size, 1rem);
788
+ line-height: 1.5;
789
+ display: block;
790
+ color: var(--label-color, #222222);
791
+ }
792
+
793
+ .flip-card {
794
+ display: block;
795
+ position: relative;
796
+ padding-bottom: 0.72em; /* halfHeight */
797
+ font-size: var(--countdown-size, 2.25rem);
798
+ line-height: 0.95;
799
+ }
800
+
801
+ @media (min-width: 1000px) {
802
+ .flip-clock__slot {
803
+ font-size: 1.2rem;
804
+ }
805
+
806
+ .flip-card {
807
+ font-size: 3rem;
808
+ }
809
+ }
810
+
811
+ .flip-card__top,
812
+ .flip-card__bottom,
813
+ .flip-card__back-bottom,
814
+ .flip-card__back::before,
815
+ .flip-card__back::after{
816
+ display: block;
817
+ height: 0.72em; /* halfHeight */
818
+ color: var(--main-color, #EC685C);
819
+ background: var(--main-flip-background-color, #222222);
820
+ padding: 0.23em 0.15em 0.4em;
821
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
822
+ backface-visibility: hidden;
823
+ -webkit-backface-visibility: hidden;
824
+ transform-style: preserve-3d;
825
+ width: 2.1em;
826
+ }
827
+
828
+ .flip-card__top-4digits,
829
+ .flip-card__bottom-4digits,
830
+ .flip-card__back-bottom-4digits,
831
+ .flip-card__back-4digits::before,
832
+ .flip-card__back-4digits::after {
833
+ display: block;
834
+ height: 0.72em; /* halfHeight */
835
+ color: var(--main-color, #EC685C);
836
+ background: var(--main-flip-background-color, #222222);
837
+ padding: 0.23em 0.15em 0.4em;
838
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
839
+ backface-visibility: hidden;
840
+ -webkit-backface-visibility: hidden;
841
+ transform-style: preserve-3d;
842
+ width: 2.65em;
843
+ }
844
+
845
+ .flip-card__bottom,
846
+ .flip-card__back-bottom,
847
+ .flip-card__bottom-4digits,
848
+ .flip-card__back-bottom-4digits {
849
+ color: var(--second-flip-color, #EC685C);
850
+ position: absolute;
851
+ top: 50%;
852
+ left: 0;
853
+ border-top: solid 1px var(--second-flip-background-color, #000);
854
+ background: var(--second-flip-background-color, #393939);
855
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
856
+ pointer-events: none;
857
+ overflow: hidden;
858
+ z-index: 2;
859
+ }
860
+
861
+ .flip-card__back-bottom,
862
+ .flip-card__back-bottom-4digits {
863
+ z-index: 1;
864
+ }
865
+
866
+ .flip-card__bottom::after,
867
+ .flip-card__back-bottom::after,
868
+ .flip-card__bottom-4digits::after,
869
+ .flip-card__back-bottom-4digits::after {
870
+ display: block;
871
+ margin-top: -0.72em; /* Negative halfHeight */
872
+ }
873
+ .flip-card__back::before,
874
+ .flip-card__bottom::after,
875
+ .flip-card__back-bottom::after,
876
+ .flip-card__back-4digits::before,
877
+ .flip-card__bottom-4digits::after,
878
+ .flip-card__back-bottom-4digits::after {
879
+ content: attr(data-value);
880
+ }
881
+
882
+ .flip-card__back,
883
+ .flip-card__back-4digits {
884
+ position: absolute;
885
+ top: 0;
886
+ height: 100%;
887
+ left: 0%;
888
+ pointer-events: none;
889
+ }
890
+ .flip-card__back::before,
891
+ .flip-card__back-4digits::before {
892
+ position: relative;
893
+ overflow: hidden;
894
+ z-index: -1;
895
+ }
896
+
897
+ .flip .flip-card__back::before,
898
+ .flip .flip-card__back-4digits::before {
899
+ z-index: 1;
900
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
901
+ animation-fill-mode: both;
902
+ transform-origin: center bottom;
903
+ }
904
+
905
+ .flip .flip-card__bottom,
906
+ .flip .flip-card__bottom-4digits {
907
+ transform-origin: center top;
908
+ animation-fill-mode: both;
909
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
910
+ }
911
+ @keyframes flipTop {
912
+ 0% {
913
+ transform: rotateX(0deg);
914
+ z-index: 2;
915
+ }
916
+ 0%, 99% {
917
+ opacity: 1;
918
+ }
919
+ 100% {
920
+ transform: rotateX(-90deg);
921
+ opacity: 0;
922
+ }
923
+ }
924
+
925
+ @keyframes flipBottom {
926
+ 0%, 50% {
927
+ z-index: -1;
928
+ transform: rotateX(90deg);
929
+ opacity: 0;
930
+ }
931
+ 51% {
932
+ opacity: 1;
933
+ }
934
+ 100% {
935
+ opacity: 1;
936
+ transform: rotateX(0deg);
937
+ z-index: 5;
938
+ }
939
+ }
940
+
754
941
  .unika-calendar-box {
755
942
  position: relative;
756
943
  width: 325px !important;
@@ -1010,190 +1197,3 @@ button.swiper-pagination-bullet {
1010
1197
  padding: 0 0px;
1011
1198
  border-bottom: 1px solid
1012
1199
  }
1013
-
1014
-
1015
- .no-animation__card {
1016
- font-weight: 500;
1017
- font-size: var(--countdown-size, 2rem);
1018
- line-height: 1.5;
1019
- display: block;
1020
- color: var(--main-color, #EC685C);
1021
- }
1022
-
1023
- .flip-clock {
1024
- text-align: center;
1025
- perspective: 600px;
1026
- margin: 0 auto;
1027
- }
1028
-
1029
- .flip-clock *,
1030
- .flip-clock *:before,
1031
- .flip-clock *:after {
1032
- box-sizing: border-box;
1033
- }
1034
-
1035
- .flip-clock__piece {
1036
- display: inline-block;
1037
- margin: 0 0.2vw;
1038
- }
1039
-
1040
- @media (min-width: 1000px) {
1041
- .flip-clock__piece {
1042
- margin: 0 5px;
1043
- }
1044
- }
1045
-
1046
- .flip-clock__slot {
1047
- font-size: var(--label-size, 1rem);
1048
- line-height: 1.5;
1049
- display: block;
1050
- color: var(--label-color, #222222);
1051
- }
1052
-
1053
- .flip-card {
1054
- display: block;
1055
- position: relative;
1056
- padding-bottom: 0.72em; /* halfHeight */
1057
- font-size: var(--countdown-size, 2.25rem);
1058
- line-height: 0.95;
1059
- }
1060
-
1061
- @media (min-width: 1000px) {
1062
- .flip-clock__slot {
1063
- font-size: 1.2rem;
1064
- }
1065
-
1066
- .flip-card {
1067
- font-size: 3rem;
1068
- }
1069
- }
1070
-
1071
- .flip-card__top,
1072
- .flip-card__bottom,
1073
- .flip-card__back-bottom,
1074
- .flip-card__back::before,
1075
- .flip-card__back::after{
1076
- display: block;
1077
- height: 0.72em; /* halfHeight */
1078
- color: var(--main-color, #EC685C);
1079
- background: var(--main-flip-background-color, #222222);
1080
- padding: 0.23em 0.15em 0.4em;
1081
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1082
- backface-visibility: hidden;
1083
- -webkit-backface-visibility: hidden;
1084
- transform-style: preserve-3d;
1085
- width: 2.1em;
1086
- }
1087
-
1088
- .flip-card__top-4digits,
1089
- .flip-card__bottom-4digits,
1090
- .flip-card__back-bottom-4digits,
1091
- .flip-card__back-4digits::before,
1092
- .flip-card__back-4digits::after {
1093
- display: block;
1094
- height: 0.72em; /* halfHeight */
1095
- color: var(--main-color, #EC685C);
1096
- background: var(--main-flip-background-color, #222222);
1097
- padding: 0.23em 0.15em 0.4em;
1098
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1099
- backface-visibility: hidden;
1100
- -webkit-backface-visibility: hidden;
1101
- transform-style: preserve-3d;
1102
- width: 2.65em;
1103
- }
1104
-
1105
- .flip-card__bottom,
1106
- .flip-card__back-bottom,
1107
- .flip-card__bottom-4digits,
1108
- .flip-card__back-bottom-4digits {
1109
- color: var(--second-flip-color, #EC685C);
1110
- position: absolute;
1111
- top: 50%;
1112
- left: 0;
1113
- border-top: solid 1px var(--second-flip-background-color, #000);
1114
- background: var(--second-flip-background-color, #393939);
1115
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1116
- pointer-events: none;
1117
- overflow: hidden;
1118
- z-index: 2;
1119
- }
1120
-
1121
- .flip-card__back-bottom,
1122
- .flip-card__back-bottom-4digits {
1123
- z-index: 1;
1124
- }
1125
-
1126
- .flip-card__bottom::after,
1127
- .flip-card__back-bottom::after,
1128
- .flip-card__bottom-4digits::after,
1129
- .flip-card__back-bottom-4digits::after {
1130
- display: block;
1131
- margin-top: -0.72em; /* Negative halfHeight */
1132
- }
1133
- .flip-card__back::before,
1134
- .flip-card__bottom::after,
1135
- .flip-card__back-bottom::after,
1136
- .flip-card__back-4digits::before,
1137
- .flip-card__bottom-4digits::after,
1138
- .flip-card__back-bottom-4digits::after {
1139
- content: attr(data-value);
1140
- }
1141
-
1142
- .flip-card__back,
1143
- .flip-card__back-4digits {
1144
- position: absolute;
1145
- top: 0;
1146
- height: 100%;
1147
- left: 0%;
1148
- pointer-events: none;
1149
- }
1150
- .flip-card__back::before,
1151
- .flip-card__back-4digits::before {
1152
- position: relative;
1153
- overflow: hidden;
1154
- z-index: -1;
1155
- }
1156
-
1157
- .flip .flip-card__back::before,
1158
- .flip .flip-card__back-4digits::before {
1159
- z-index: 1;
1160
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1161
- animation-fill-mode: both;
1162
- transform-origin: center bottom;
1163
- }
1164
-
1165
- .flip .flip-card__bottom,
1166
- .flip .flip-card__bottom-4digits {
1167
- transform-origin: center top;
1168
- animation-fill-mode: both;
1169
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1170
- }
1171
- @keyframes flipTop {
1172
- 0% {
1173
- transform: rotateX(0deg);
1174
- z-index: 2;
1175
- }
1176
- 0%, 99% {
1177
- opacity: 1;
1178
- }
1179
- 100% {
1180
- transform: rotateX(-90deg);
1181
- opacity: 0;
1182
- }
1183
- }
1184
-
1185
- @keyframes flipBottom {
1186
- 0%, 50% {
1187
- z-index: -1;
1188
- transform: rotateX(90deg);
1189
- opacity: 0;
1190
- }
1191
- 51% {
1192
- opacity: 1;
1193
- }
1194
- 100% {
1195
- opacity: 1;
1196
- transform: rotateX(0deg);
1197
- z-index: 5;
1198
- }
1199
- }