unika-components 1.0.44 → 1.0.46

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,17 +1,170 @@
1
1
  declare const _default: import("vue").DefineComponent<{
2
+ left: {
3
+ type: StringConstructor;
4
+ default: string;
5
+ };
6
+ top: {
7
+ type: StringConstructor;
8
+ default: string;
9
+ };
10
+ opacity: {
11
+ type: NumberConstructor;
12
+ default: number;
13
+ };
2
14
  deadline: {
3
15
  type: StringConstructor;
4
16
  default: string;
5
17
  };
18
+ mainColor: {
19
+ type: StringConstructor;
20
+ default: string;
21
+ };
22
+ mainFlipBackgroundColor: {
23
+ type: StringConstructor;
24
+ default: string;
25
+ };
26
+ labelColor: {
27
+ type: StringConstructor;
28
+ default: string;
29
+ };
30
+ showLabels: {
31
+ type: BooleanConstructor;
32
+ required: false;
33
+ default: boolean;
34
+ };
35
+ flipAnimation: {
36
+ type: BooleanConstructor;
37
+ required: false;
38
+ default: boolean;
39
+ };
40
+ language: {
41
+ type: StringConstructor;
42
+ required: false;
43
+ default: string;
44
+ };
45
+ size: {
46
+ type: StringConstructor;
47
+ required: false;
48
+ default: string;
49
+ };
50
+ countdownSize: {
51
+ type: StringConstructor;
52
+ required: false;
53
+ default: (props: {
54
+ size: string;
55
+ }) => "2.25rem" | "2.75rem" | "1.5rem";
56
+ };
57
+ labelSize: {
58
+ type: StringConstructor;
59
+ required: false;
60
+ default: (props: {
61
+ size: string;
62
+ }) => "1" | "1.25rem" | ".8rem";
63
+ };
64
+ labels: {
65
+ type: ObjectConstructor;
66
+ required: false;
67
+ default: (props: {
68
+ language: string;
69
+ }) => {
70
+ days: string;
71
+ hours: string;
72
+ minutes: string;
73
+ seconds: string;
74
+ };
75
+ };
6
76
  }, {
7
77
  styleProps: import("vue").ComputedRef<Pick<any, string>>;
8
78
  handleClick: () => void;
9
79
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
80
+ left: {
81
+ type: StringConstructor;
82
+ default: string;
83
+ };
84
+ top: {
85
+ type: StringConstructor;
86
+ default: string;
87
+ };
88
+ opacity: {
89
+ type: NumberConstructor;
90
+ default: number;
91
+ };
10
92
  deadline: {
11
93
  type: StringConstructor;
12
94
  default: string;
13
95
  };
96
+ mainColor: {
97
+ type: StringConstructor;
98
+ default: string;
99
+ };
100
+ mainFlipBackgroundColor: {
101
+ type: StringConstructor;
102
+ default: string;
103
+ };
104
+ labelColor: {
105
+ type: StringConstructor;
106
+ default: string;
107
+ };
108
+ showLabels: {
109
+ type: BooleanConstructor;
110
+ required: false;
111
+ default: boolean;
112
+ };
113
+ flipAnimation: {
114
+ type: BooleanConstructor;
115
+ required: false;
116
+ default: boolean;
117
+ };
118
+ language: {
119
+ type: StringConstructor;
120
+ required: false;
121
+ default: string;
122
+ };
123
+ size: {
124
+ type: StringConstructor;
125
+ required: false;
126
+ default: string;
127
+ };
128
+ countdownSize: {
129
+ type: StringConstructor;
130
+ required: false;
131
+ default: (props: {
132
+ size: string;
133
+ }) => "2.25rem" | "2.75rem" | "1.5rem";
134
+ };
135
+ labelSize: {
136
+ type: StringConstructor;
137
+ required: false;
138
+ default: (props: {
139
+ size: string;
140
+ }) => "1" | "1.25rem" | ".8rem";
141
+ };
142
+ labels: {
143
+ type: ObjectConstructor;
144
+ required: false;
145
+ default: (props: {
146
+ language: string;
147
+ }) => {
148
+ days: string;
149
+ hours: string;
150
+ minutes: string;
151
+ seconds: string;
152
+ };
153
+ };
14
154
  }>>, {
155
+ left: string;
156
+ size: string;
157
+ top: string;
158
+ opacity: number;
15
159
  deadline: string;
160
+ mainColor: string;
161
+ mainFlipBackgroundColor: string;
162
+ labelColor: string;
163
+ showLabels: boolean;
164
+ flipAnimation: boolean;
165
+ language: string;
166
+ countdownSize: string;
167
+ labelSize: string;
168
+ labels: Record<string, any>;
16
169
  }, {}>;
17
170
  export default _default;
@@ -1,101 +1,22 @@
1
1
 
2
- .uni-image-component {
3
- max-width: 100%;
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;
4
12
  }
5
13
 
6
- #audio {
7
- position: absolute;
8
- right: 10px;
9
- top: 10px;
10
- z-index: 103;
11
- width: 30px;
12
- height: 30px;
13
- display: -webkit-box;
14
- display: -ms-flexbox;
15
- display: flex;
16
- -webkit-box-align: center;
17
- -ms-flex-align: center;
18
- align-items: center;
19
- }
20
- #audio .audio {
21
- width: 100%;
22
- height: 100%;
23
- display: -webkit-box;
24
- display: -ms-flexbox;
25
- display: flex;
26
- -webkit-box-align: center;
27
- -ms-flex-align: center;
28
- align-items: center;
29
- -webkit-box-pack: center;
30
- -ms-flex-pack: center;
31
- justify-content: center;
32
- color: #fff;
33
- background: #666;
34
- border-radius: 50%;
35
- overflow: hidden;
36
- will-change: transform;
37
- }
38
- #audio .audio .music-icon {
39
- display: block;
40
- width: 100%;
41
- height: 100%;
42
- }
43
- #audio .icon-cancel {
44
- position: absolute;
45
- width: 100%;
46
- height: 100%;
47
- border-radius: 50%;
48
- overflow: hidden;
49
- padding: 14px 0;
50
- }
51
- #audio .icon-cancel .icon-h {
52
- -webkit-transform: rotate(45deg);
53
- transform: rotate(45deg);
54
- width: 100%;
55
- height: 2px;
56
- background: #fff;
57
- }
58
- #audio .mrotate {
59
- -webkit-animation: mrotate 5s linear infinite;
60
- animation: mrotate 5s linear infinite;
61
- }
62
- .video-play-audio {
14
+ .slot-number {
63
15
  position: absolute;
64
- left: -9999px;
65
- top: -9999px;
66
- width: 0;
67
- height: 0;
68
- z-index: -1;
69
- opacity: 1;
70
- overflow: hidden;
71
- }
72
-
73
- .music-img {
74
- position: relative;
75
- display: inline-block;
76
- width: 100%;
77
- height: 100%;
78
- }
79
-
80
- .uni-music-component {
81
- }
82
-
83
- /* 无限旋转 */
84
- @keyframes mrotate {
85
- from {
86
- transform: rotate(0deg);
87
- }
88
- to {
89
- transform: rotate(360deg);
90
- }
91
- }
92
- @-webkit-keyframes mrotate {
93
- from {
94
- -webkit-transform: rotate(0deg);
95
- }
96
- to {
97
- -webkit-transform: rotate(360deg);
98
- }
16
+ bottom: 2px;
17
+ left: 7px;
18
+ font-size: 12px;
19
+ color: #666
99
20
  }
100
21
 
101
22
  .slide-guide {
@@ -171,50 +92,6 @@ body, html {
171
92
  }
172
93
  }
173
94
 
174
- .slot-number {
175
- position: absolute;
176
- bottom: 2px;
177
- left: 7px;
178
- font-size: 12px;
179
- color: #666
180
- }
181
-
182
- .uni-background-component {
183
- width: 100%;
184
- }
185
- .bg-img {
186
- width: 100%;
187
- height: 100%;
188
- object-fit: cover;
189
- z-index:1;
190
- }
191
- .watermark {
192
- height: 100%;
193
- position: absolute;
194
- top: 0;
195
- left: 0;
196
- right: 0;
197
- bottom: 0;
198
- }
199
- .watermark-div {
200
- height: 100%;
201
- width:100%;
202
- position:absolute;
203
- z-index:99999999;
204
- }
205
- body:before{
206
- content: '';
207
- position: fixed;
208
- top: 0;
209
- bottom: 0;
210
- left: 0;
211
- right: 0;
212
- z-index: -1;
213
- /* background: url(https://unika-static-dev.unika.cc/logo.png) 0 0 repeat; */
214
- background-position: center;
215
- opacity: 0.1;
216
- }
217
-
218
95
  .uni-video-component {
219
96
  position: relative;
220
97
  text-align: center;
@@ -236,16 +113,8 @@ body, html {
236
113
  background: rgba(0, 0, 0, 0.8);
237
114
  }
238
115
 
239
- h2.uni-text-component, p.uni-text-component {
240
- margin-bottom: 0;
241
- }
242
- button.uni-text-component {
243
- padding: 5px 10px;
244
- cursor: pointer;
245
- }
246
- .uni-text-component {
247
- box-sizing: border-box;
248
- white-space: pre-wrap;
116
+ .uni-image-component {
117
+ max-width: 100%;
249
118
  }
250
119
 
251
120
  .like-button {
@@ -270,6 +139,56 @@ button.uni-text-component {
270
139
  color: #333;
271
140
  }
272
141
 
142
+ /*.swiper-container {
143
+ width: 100%;
144
+ height: 300px;
145
+ }
146
+
147
+ .swiper-slide {
148
+ text-align: center;
149
+ }
150
+
151
+ .swiper-slide img {
152
+ max-width: 100%;
153
+ max-height: 100%;
154
+ }*/
155
+
156
+ .uni-background-component {
157
+ width: 100%;
158
+ }
159
+ .bg-img {
160
+ width: 100%;
161
+ height: 100%;
162
+ object-fit: cover;
163
+ z-index:1;
164
+ }
165
+ .watermark {
166
+ height: 100%;
167
+ position: absolute;
168
+ top: 0;
169
+ left: 0;
170
+ right: 0;
171
+ bottom: 0;
172
+ }
173
+ .watermark-div {
174
+ height: 100%;
175
+ width:100%;
176
+ position:absolute;
177
+ z-index:99999999;
178
+ }
179
+ body:before{
180
+ content: '';
181
+ position: fixed;
182
+ top: 0;
183
+ bottom: 0;
184
+ left: 0;
185
+ right: 0;
186
+ z-index: -1;
187
+ /* background: url(https://unika-static-dev.unika.cc/logo.png) 0 0 repeat; */
188
+ background-position: center;
189
+ opacity: 0.1;
190
+ }
191
+
273
192
  #app1 {
274
193
  position: relative;
275
194
  }
@@ -292,6 +211,101 @@ button.uni-text-component {
292
211
  }
293
212
  }
294
213
 
214
+ #audio {
215
+ position: absolute;
216
+ right: 10px;
217
+ top: 10px;
218
+ z-index: 103;
219
+ width: 30px;
220
+ height: 30px;
221
+ display: -webkit-box;
222
+ display: -ms-flexbox;
223
+ display: flex;
224
+ -webkit-box-align: center;
225
+ -ms-flex-align: center;
226
+ align-items: center;
227
+ }
228
+ #audio .audio {
229
+ width: 100%;
230
+ height: 100%;
231
+ display: -webkit-box;
232
+ display: -ms-flexbox;
233
+ display: flex;
234
+ -webkit-box-align: center;
235
+ -ms-flex-align: center;
236
+ align-items: center;
237
+ -webkit-box-pack: center;
238
+ -ms-flex-pack: center;
239
+ justify-content: center;
240
+ color: #fff;
241
+ background: #666;
242
+ border-radius: 50%;
243
+ overflow: hidden;
244
+ will-change: transform;
245
+ }
246
+ #audio .audio .music-icon {
247
+ display: block;
248
+ width: 100%;
249
+ height: 100%;
250
+ }
251
+ #audio .icon-cancel {
252
+ position: absolute;
253
+ width: 100%;
254
+ height: 100%;
255
+ border-radius: 50%;
256
+ overflow: hidden;
257
+ padding: 14px 0;
258
+ }
259
+ #audio .icon-cancel .icon-h {
260
+ -webkit-transform: rotate(45deg);
261
+ transform: rotate(45deg);
262
+ width: 100%;
263
+ height: 2px;
264
+ background: #fff;
265
+ }
266
+ #audio .mrotate {
267
+ -webkit-animation: mrotate 5s linear infinite;
268
+ animation: mrotate 5s linear infinite;
269
+ }
270
+ .video-play-audio {
271
+ position: absolute;
272
+ left: -9999px;
273
+ top: -9999px;
274
+ width: 0;
275
+ height: 0;
276
+ z-index: -1;
277
+ opacity: 1;
278
+ overflow: hidden;
279
+ }
280
+
281
+ .music-img {
282
+ position: relative;
283
+ display: inline-block;
284
+ width: 100%;
285
+ height: 100%;
286
+ }
287
+
288
+ .uni-music-component {
289
+ }
290
+
291
+ /* 无限旋转 */
292
+ @keyframes mrotate {
293
+ from {
294
+ transform: rotate(0deg);
295
+ }
296
+ to {
297
+ transform: rotate(360deg);
298
+ }
299
+ }
300
+ @-webkit-keyframes mrotate {
301
+ from {
302
+ -webkit-transform: rotate(0deg);
303
+ }
304
+ to {
305
+ -webkit-transform: rotate(360deg);
306
+ }
307
+ }
308
+
295
309
  .video-player {
296
310
  position: relative;
297
311
  text-align: center;
@@ -312,20 +326,6 @@ button.uni-text-component {
312
326
  .play-pause-button:hover {
313
327
  background: rgba(0, 0, 0, 0.8);
314
328
  }
315
-
316
- /*.swiper-container {
317
- width: 100%;
318
- height: 300px;
319
- }
320
-
321
- .swiper-slide {
322
- text-align: center;
323
- }
324
-
325
- .swiper-slide img {
326
- max-width: 100%;
327
- max-height: 100%;
328
- }*/
329
329
  /**
330
330
  * Swiper 6.8.4
331
331
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -874,6 +874,193 @@ button.swiper-pagination-bullet {
874
874
  backface-visibility: hidden;
875
875
  }
876
876
 
877
+
878
+ .no-animation__card {
879
+ font-weight: 500;
880
+ font-size: var(--countdown-size, 2rem);
881
+ line-height: 1.5;
882
+ display: block;
883
+ color: var(--main-color, #EC685C);
884
+ }
885
+
886
+ .flip-clock {
887
+ text-align: center;
888
+ perspective: 600px;
889
+ margin: 0 auto;
890
+ }
891
+
892
+ .flip-clock *,
893
+ .flip-clock *:before,
894
+ .flip-clock *:after {
895
+ box-sizing: border-box;
896
+ }
897
+
898
+ .flip-clock__piece {
899
+ display: inline-block;
900
+ margin: 0 0.2vw;
901
+ }
902
+
903
+ @media (min-width: 1000px) {
904
+ .flip-clock__piece {
905
+ margin: 0 5px;
906
+ }
907
+ }
908
+
909
+ .flip-clock__slot {
910
+ font-size: var(--label-size, 1rem);
911
+ line-height: 1.5;
912
+ display: block;
913
+ color: var(--label-color, #222222);
914
+ }
915
+
916
+ .flip-card {
917
+ display: block;
918
+ position: relative;
919
+ padding-bottom: 0.72em; /* halfHeight */
920
+ font-size: var(--countdown-size, 2.25rem);
921
+ line-height: 0.95;
922
+ }
923
+
924
+ @media (min-width: 1000px) {
925
+ .flip-clock__slot {
926
+ font-size: 1.2rem;
927
+ }
928
+
929
+ .flip-card {
930
+ font-size: 3rem;
931
+ }
932
+ }
933
+
934
+ .flip-card__top,
935
+ .flip-card__bottom,
936
+ .flip-card__back-bottom,
937
+ .flip-card__back::before,
938
+ .flip-card__back::after{
939
+ display: block;
940
+ height: 0.72em; /* halfHeight */
941
+ color: var(--main-color, #EC685C);
942
+ background: var(--main-flip-background-color, #222222);
943
+ padding: 0.23em 0.15em 0.4em;
944
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
945
+ backface-visibility: hidden;
946
+ -webkit-backface-visibility: hidden;
947
+ transform-style: preserve-3d;
948
+ width: 2.1em;
949
+ }
950
+
951
+ .flip-card__top-4digits,
952
+ .flip-card__bottom-4digits,
953
+ .flip-card__back-bottom-4digits,
954
+ .flip-card__back-4digits::before,
955
+ .flip-card__back-4digits::after {
956
+ display: block;
957
+ height: 0.72em; /* halfHeight */
958
+ color: var(--main-color, #EC685C);
959
+ background: var(--main-flip-background-color, #222222);
960
+ padding: 0.23em 0.15em 0.4em;
961
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
962
+ backface-visibility: hidden;
963
+ -webkit-backface-visibility: hidden;
964
+ transform-style: preserve-3d;
965
+ width: 2.65em;
966
+ }
967
+
968
+ .flip-card__bottom,
969
+ .flip-card__back-bottom,
970
+ .flip-card__bottom-4digits,
971
+ .flip-card__back-bottom-4digits {
972
+ color: var(--second-flip-color, #EC685C);
973
+ position: absolute;
974
+ top: 50%;
975
+ left: 0;
976
+ border-top: solid 1px var(--second-flip-background-color, #000);
977
+ background: var(--second-flip-background-color, #393939);
978
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
979
+ pointer-events: none;
980
+ overflow: hidden;
981
+ z-index: 2;
982
+ }
983
+
984
+ .flip-card__back-bottom,
985
+ .flip-card__back-bottom-4digits {
986
+ z-index: 1;
987
+ }
988
+
989
+ .flip-card__bottom::after,
990
+ .flip-card__back-bottom::after,
991
+ .flip-card__bottom-4digits::after,
992
+ .flip-card__back-bottom-4digits::after {
993
+ display: block;
994
+ margin-top: -0.72em; /* Negative halfHeight */
995
+ }
996
+ .flip-card__back::before,
997
+ .flip-card__bottom::after,
998
+ .flip-card__back-bottom::after,
999
+ .flip-card__back-4digits::before,
1000
+ .flip-card__bottom-4digits::after,
1001
+ .flip-card__back-bottom-4digits::after {
1002
+ content: attr(data-value);
1003
+ }
1004
+
1005
+ .flip-card__back,
1006
+ .flip-card__back-4digits {
1007
+ position: absolute;
1008
+ top: 0;
1009
+ height: 100%;
1010
+ left: 0%;
1011
+ pointer-events: none;
1012
+ }
1013
+ .flip-card__back::before,
1014
+ .flip-card__back-4digits::before {
1015
+ position: relative;
1016
+ overflow: hidden;
1017
+ z-index: -1;
1018
+ }
1019
+
1020
+ .flip .flip-card__back::before,
1021
+ .flip .flip-card__back-4digits::before {
1022
+ z-index: 1;
1023
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1024
+ animation-fill-mode: both;
1025
+ transform-origin: center bottom;
1026
+ }
1027
+
1028
+ .flip .flip-card__bottom,
1029
+ .flip .flip-card__bottom-4digits {
1030
+ transform-origin: center top;
1031
+ animation-fill-mode: both;
1032
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1033
+ }
1034
+ @keyframes flipTop {
1035
+ 0% {
1036
+ transform: rotateX(0deg);
1037
+ z-index: 2;
1038
+ }
1039
+ 0%, 99% {
1040
+ opacity: 1;
1041
+ }
1042
+ 100% {
1043
+ transform: rotateX(-90deg);
1044
+ opacity: 0;
1045
+ }
1046
+ }
1047
+
1048
+ @keyframes flipBottom {
1049
+ 0%, 50% {
1050
+ z-index: -1;
1051
+ transform: rotateX(90deg);
1052
+ opacity: 0;
1053
+ }
1054
+ 51% {
1055
+ opacity: 1;
1056
+ }
1057
+ 100% {
1058
+ opacity: 1;
1059
+ transform: rotateX(0deg);
1060
+ z-index: 5;
1061
+ }
1062
+ }
1063
+
877
1064
  .unika-calendar-title {
878
1065
  font-size: 25px;
879
1066
  padding-bottom: 4px;
@@ -1125,190 +1312,3 @@ button.swiper-pagination-bullet {
1125
1312
  padding: 0 0px;
1126
1313
  border-bottom: 1px solid
1127
1314
  }
1128
-
1129
-
1130
- .no-animation__card {
1131
- font-weight: 500;
1132
- font-size: var(--countdown-size, 2rem);
1133
- line-height: 1.5;
1134
- display: block;
1135
- color: var(--main-color, #EC685C);
1136
- }
1137
-
1138
- .flip-clock {
1139
- text-align: center;
1140
- perspective: 600px;
1141
- margin: 0 auto;
1142
- }
1143
-
1144
- .flip-clock *,
1145
- .flip-clock *:before,
1146
- .flip-clock *:after {
1147
- box-sizing: border-box;
1148
- }
1149
-
1150
- .flip-clock__piece {
1151
- display: inline-block;
1152
- margin: 0 0.2vw;
1153
- }
1154
-
1155
- @media (min-width: 1000px) {
1156
- .flip-clock__piece {
1157
- margin: 0 5px;
1158
- }
1159
- }
1160
-
1161
- .flip-clock__slot {
1162
- font-size: var(--label-size, 1rem);
1163
- line-height: 1.5;
1164
- display: block;
1165
- color: var(--label-color, #222222);
1166
- }
1167
-
1168
- .flip-card {
1169
- display: block;
1170
- position: relative;
1171
- padding-bottom: 0.72em; /* halfHeight */
1172
- font-size: var(--countdown-size, 2.25rem);
1173
- line-height: 0.95;
1174
- }
1175
-
1176
- @media (min-width: 1000px) {
1177
- .flip-clock__slot {
1178
- font-size: 1.2rem;
1179
- }
1180
-
1181
- .flip-card {
1182
- font-size: 3rem;
1183
- }
1184
- }
1185
-
1186
- .flip-card__top,
1187
- .flip-card__bottom,
1188
- .flip-card__back-bottom,
1189
- .flip-card__back::before,
1190
- .flip-card__back::after{
1191
- display: block;
1192
- height: 0.72em; /* halfHeight */
1193
- color: var(--main-color, #EC685C);
1194
- background: var(--main-flip-background-color, #222222);
1195
- padding: 0.23em 0.15em 0.4em;
1196
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1197
- backface-visibility: hidden;
1198
- -webkit-backface-visibility: hidden;
1199
- transform-style: preserve-3d;
1200
- width: 2.1em;
1201
- }
1202
-
1203
- .flip-card__top-4digits,
1204
- .flip-card__bottom-4digits,
1205
- .flip-card__back-bottom-4digits,
1206
- .flip-card__back-4digits::before,
1207
- .flip-card__back-4digits::after {
1208
- display: block;
1209
- height: 0.72em; /* halfHeight */
1210
- color: var(--main-color, #EC685C);
1211
- background: var(--main-flip-background-color, #222222);
1212
- padding: 0.23em 0.15em 0.4em;
1213
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1214
- backface-visibility: hidden;
1215
- -webkit-backface-visibility: hidden;
1216
- transform-style: preserve-3d;
1217
- width: 2.65em;
1218
- }
1219
-
1220
- .flip-card__bottom,
1221
- .flip-card__back-bottom,
1222
- .flip-card__bottom-4digits,
1223
- .flip-card__back-bottom-4digits {
1224
- color: var(--second-flip-color, #EC685C);
1225
- position: absolute;
1226
- top: 50%;
1227
- left: 0;
1228
- border-top: solid 1px #000;
1229
- background: var(--second-flip-background-color, #393939);
1230
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1231
- pointer-events: none;
1232
- overflow: hidden;
1233
- z-index: 2;
1234
- }
1235
-
1236
- .flip-card__back-bottom,
1237
- .flip-card__back-bottom-4digits {
1238
- z-index: 1;
1239
- }
1240
-
1241
- .flip-card__bottom::after,
1242
- .flip-card__back-bottom::after,
1243
- .flip-card__bottom-4digits::after,
1244
- .flip-card__back-bottom-4digits::after {
1245
- display: block;
1246
- margin-top: -0.72em; /* Negative halfHeight */
1247
- }
1248
- .flip-card__back::before,
1249
- .flip-card__bottom::after,
1250
- .flip-card__back-bottom::after,
1251
- .flip-card__back-4digits::before,
1252
- .flip-card__bottom-4digits::after,
1253
- .flip-card__back-bottom-4digits::after {
1254
- content: attr(data-value);
1255
- }
1256
-
1257
- .flip-card__back,
1258
- .flip-card__back-4digits {
1259
- position: absolute;
1260
- top: 0;
1261
- height: 100%;
1262
- left: 0%;
1263
- pointer-events: none;
1264
- }
1265
- .flip-card__back::before,
1266
- .flip-card__back-4digits::before {
1267
- position: relative;
1268
- overflow: hidden;
1269
- z-index: -1;
1270
- }
1271
-
1272
- .flip .flip-card__back::before,
1273
- .flip .flip-card__back-4digits::before {
1274
- z-index: 1;
1275
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1276
- animation-fill-mode: both;
1277
- transform-origin: center bottom;
1278
- }
1279
-
1280
- .flip .flip-card__bottom,
1281
- .flip .flip-card__bottom-4digits {
1282
- transform-origin: center top;
1283
- animation-fill-mode: both;
1284
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1285
- }
1286
- @keyframes flipTop {
1287
- 0% {
1288
- transform: rotateX(0deg);
1289
- z-index: 2;
1290
- }
1291
- 0%, 99% {
1292
- opacity: 1;
1293
- }
1294
- 100% {
1295
- transform: rotateX(-90deg);
1296
- opacity: 0;
1297
- }
1298
- }
1299
-
1300
- @keyframes flipBottom {
1301
- 0%, 50% {
1302
- z-index: -1;
1303
- transform: rotateX(90deg);
1304
- opacity: 0;
1305
- }
1306
- 51% {
1307
- opacity: 1;
1308
- }
1309
- 100% {
1310
- opacity: 1;
1311
- transform: rotateX(0deg);
1312
- z-index: 5;
1313
- }
1314
- }
@@ -4304,12 +4304,12 @@ const extraProps = {
4304
4304
  },
4305
4305
  ...isEditingProp
4306
4306
  };
4307
- const defaultProps$c = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps);
4307
+ const defaultProps$b = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps);
4308
4308
  // array that contains style props
4309
4309
  var script$i = defineComponent({
4310
4310
  name: 'uni-text',
4311
4311
  props: {
4312
- ...defaultProps$c
4312
+ ...defaultProps$b
4313
4313
  },
4314
4314
  setup(props) {
4315
4315
  const styleProps = useStylePick(props);
@@ -4376,12 +4376,12 @@ script$h.install = (app) => {
4376
4376
  app.component(script$h.name, script$h);
4377
4377
  };
4378
4378
 
4379
- const defaultProps$b = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
4379
+ const defaultProps$a = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
4380
4380
  // array that contains style props
4381
4381
  var script$g = defineComponent({
4382
4382
  name: 'uni-shape',
4383
4383
  props: {
4384
- ...defaultProps$b
4384
+ ...defaultProps$a
4385
4385
  },
4386
4386
  setup(props) {
4387
4387
  const styleProps = useStylePick(props);
@@ -11902,7 +11902,7 @@ script$e.install = (app) => {
11902
11902
  app.component(script$e.name, script$e);
11903
11903
  };
11904
11904
 
11905
- const defaultProps$a = transformToComponentProps(componentsDefaultProps['uni-background'].props, isEditingProp);
11905
+ const defaultProps$9 = transformToComponentProps(componentsDefaultProps['uni-background'].props, isEditingProp);
11906
11906
  // array that contains style props
11907
11907
  var script$d = defineComponent({
11908
11908
  name: 'uni-background',
@@ -11911,7 +11911,7 @@ var script$d = defineComponent({
11911
11911
  type: Boolean,
11912
11912
  default: false
11913
11913
  },
11914
- ...defaultProps$a
11914
+ ...defaultProps$9
11915
11915
  },
11916
11916
  components: {},
11917
11917
  setup(props) {
@@ -11960,12 +11960,12 @@ script$d.install = (app) => {
11960
11960
  app.component(script$d.name, script$d);
11961
11961
  };
11962
11962
 
11963
- const defaultProps$9 = transformToComponentProps(componentsDefaultProps['uni-music'].props, isEditingProp);
11963
+ const defaultProps$8 = transformToComponentProps(componentsDefaultProps['uni-music'].props, isEditingProp);
11964
11964
  // array that contains style props
11965
11965
  var script$c = defineComponent({
11966
11966
  name: 'uni-music',
11967
11967
  props: {
11968
- ...defaultProps$9
11968
+ ...defaultProps$8
11969
11969
  },
11970
11970
  setup(props) {
11971
11971
  // 重用并且简化
@@ -12073,12 +12073,12 @@ script$c.install = (app) => {
12073
12073
  app.component(script$c.name, script$c);
12074
12074
  };
12075
12075
 
12076
- const defaultProps$8 = transformToComponentProps(componentsDefaultProps['uni-video'].props, isEditingProp);
12076
+ const defaultProps$7 = transformToComponentProps(componentsDefaultProps['uni-video'].props, isEditingProp);
12077
12077
  // array that contains style props
12078
12078
  var script$b = defineComponent({
12079
12079
  name: 'uni-video',
12080
12080
  props: {
12081
- ...defaultProps$8
12081
+ ...defaultProps$7
12082
12082
  },
12083
12083
  components: {
12084
12084
  // FontAwesomeIcon
@@ -20824,7 +20824,7 @@ var script$8 = {
20824
20824
  },
20825
20825
  secondFlipBackgroundColor: {
20826
20826
  type: String,
20827
- default: '#393939' // 下层背景颜色
20827
+ default: (props) => props.mainFlipBackgroundColor // 下层背景颜色
20828
20828
  },
20829
20829
  labelColor: {
20830
20830
  type: String,
@@ -21100,7 +21100,7 @@ script$8.render = render$9;
21100
21100
  script$8.__scopeId = "data-v-47d33153";
21101
21101
  script$8.__file = "src/components/UniCountdown/Countdown.vue";
21102
21102
 
21103
- const defaultProps$7 = transformToComponentProps(componentsDefaultProps['uni-countdown'].props, isEditingProp);
21103
+ transformToComponentProps(componentsDefaultProps['uni-countdown'].props, isEditingProp);
21104
21104
  // 获取当前日期和时间
21105
21105
  const now = new Date();
21106
21106
  // 添加一天
@@ -21118,11 +21118,106 @@ const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
21118
21118
  var script$7 = defineComponent({
21119
21119
  name: 'uni-countdown',
21120
21120
  props: {
21121
- ...defaultProps$7,
21121
+ left: {
21122
+ type: String,
21123
+ default: '25px'
21124
+ },
21125
+ top: {
21126
+ type: String,
21127
+ default: '204.5px'
21128
+ },
21129
+ opacity: {
21130
+ type: Number,
21131
+ default: 1
21132
+ },
21122
21133
  deadline: {
21123
21134
  type: String,
21124
21135
  default: formattedDate
21125
- }
21136
+ },
21137
+ mainColor: {
21138
+ type: String,
21139
+ default: '#EC685C' // 上层时间颜色
21140
+ },
21141
+ mainFlipBackgroundColor: {
21142
+ type: String,
21143
+ default: '#222222' // 上层背景颜色
21144
+ },
21145
+ labelColor: {
21146
+ type: String,
21147
+ default: '#222222' // 时间单位颜色
21148
+ },
21149
+ showLabels: {
21150
+ type: Boolean,
21151
+ required: false,
21152
+ default: true
21153
+ },
21154
+ flipAnimation: {
21155
+ type: Boolean,
21156
+ required: false,
21157
+ default: true
21158
+ },
21159
+ language: {
21160
+ type: String,
21161
+ required: false,
21162
+ default: 'en'
21163
+ },
21164
+ size: {
21165
+ type: String,
21166
+ required: false,
21167
+ default: "middle"
21168
+ },
21169
+ countdownSize: {
21170
+ type: String,
21171
+ required: false,
21172
+ default: function (props) {
21173
+ if (props.size == 'middle') {
21174
+ return "2.25rem";
21175
+ }
21176
+ else if (props.size == 'large') {
21177
+ return "2.75rem";
21178
+ }
21179
+ else {
21180
+ return "1.5rem";
21181
+ }
21182
+ }
21183
+ },
21184
+ labelSize: {
21185
+ type: String,
21186
+ required: false,
21187
+ default: function (props) {
21188
+ if (props.size == 'middle') {
21189
+ return "1";
21190
+ }
21191
+ else if (props.size == 'large') {
21192
+ return "1.25rem";
21193
+ }
21194
+ else {
21195
+ return ".8rem";
21196
+ }
21197
+ }
21198
+ },
21199
+ labels: {
21200
+ type: Object,
21201
+ required: false,
21202
+ default: function (props) {
21203
+ if (props.language == 'en') {
21204
+ return {
21205
+ days: 'Days',
21206
+ hours: 'Hours',
21207
+ minutes: 'Minutes',
21208
+ seconds: 'Seconds'
21209
+ };
21210
+ }
21211
+ else {
21212
+ return {
21213
+ days: 'วัน',
21214
+ hours: 'ชั่วโมง',
21215
+ minutes: 'นาที',
21216
+ seconds: 'ที่สอง'
21217
+ };
21218
+ }
21219
+ }
21220
+ },
21126
21221
  },
21127
21222
  components: {
21128
21223
  Countdown: script$8
@@ -21144,9 +21239,19 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
21144
21239
 
21145
21240
  return (openBlock(), createElementBlock("div", {
21146
21241
  class: "uni-countdown-component",
21147
- style: normalizeStyle(_ctx.styleProps)
21242
+ style: normalizeStyle({left: _ctx.left, top: _ctx.top, opacity: _ctx.opacity, position: 'absolute'})
21148
21243
  }, [
21149
- createVNode(_component_Countdown, { deadline: _ctx.deadline }, null, 8 /* PROPS */, ["deadline"])
21244
+ createVNode(_component_Countdown, {
21245
+ deadline: _ctx.deadline,
21246
+ mainColor: _ctx.mainColor,
21247
+ mainFlipBackgroundColor: _ctx.mainFlipBackgroundColor,
21248
+ labelColor: _ctx.labelColor,
21249
+ showLabels: _ctx.showLabels,
21250
+ labels: _ctx.labels,
21251
+ language: _ctx.language,
21252
+ countdownSize: _ctx.countdownSize,
21253
+ labelSize: _ctx.labelSize
21254
+ }, null, 8 /* PROPS */, ["deadline", "mainColor", "mainFlipBackgroundColor", "labelColor", "showLabels", "labels", "language", "countdownSize", "labelSize"])
21150
21255
  ], 4 /* STYLE */))
21151
21256
  }
21152
21257
 
@@ -4311,12 +4311,12 @@
4311
4311
  },
4312
4312
  ...isEditingProp
4313
4313
  };
4314
- const defaultProps$c = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps);
4314
+ const defaultProps$b = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps);
4315
4315
  // array that contains style props
4316
4316
  var script$i = vue.defineComponent({
4317
4317
  name: 'uni-text',
4318
4318
  props: {
4319
- ...defaultProps$c
4319
+ ...defaultProps$b
4320
4320
  },
4321
4321
  setup(props) {
4322
4322
  const styleProps = useStylePick(props);
@@ -4383,12 +4383,12 @@
4383
4383
  app.component(script$h.name, script$h);
4384
4384
  };
4385
4385
 
4386
- const defaultProps$b = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
4386
+ const defaultProps$a = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
4387
4387
  // array that contains style props
4388
4388
  var script$g = vue.defineComponent({
4389
4389
  name: 'uni-shape',
4390
4390
  props: {
4391
- ...defaultProps$b
4391
+ ...defaultProps$a
4392
4392
  },
4393
4393
  setup(props) {
4394
4394
  const styleProps = useStylePick(props);
@@ -11909,7 +11909,7 @@
11909
11909
  app.component(script$e.name, script$e);
11910
11910
  };
11911
11911
 
11912
- const defaultProps$a = transformToComponentProps(componentsDefaultProps['uni-background'].props, isEditingProp);
11912
+ const defaultProps$9 = transformToComponentProps(componentsDefaultProps['uni-background'].props, isEditingProp);
11913
11913
  // array that contains style props
11914
11914
  var script$d = vue.defineComponent({
11915
11915
  name: 'uni-background',
@@ -11918,7 +11918,7 @@
11918
11918
  type: Boolean,
11919
11919
  default: false
11920
11920
  },
11921
- ...defaultProps$a
11921
+ ...defaultProps$9
11922
11922
  },
11923
11923
  components: {},
11924
11924
  setup(props) {
@@ -11967,12 +11967,12 @@
11967
11967
  app.component(script$d.name, script$d);
11968
11968
  };
11969
11969
 
11970
- const defaultProps$9 = transformToComponentProps(componentsDefaultProps['uni-music'].props, isEditingProp);
11970
+ const defaultProps$8 = transformToComponentProps(componentsDefaultProps['uni-music'].props, isEditingProp);
11971
11971
  // array that contains style props
11972
11972
  var script$c = vue.defineComponent({
11973
11973
  name: 'uni-music',
11974
11974
  props: {
11975
- ...defaultProps$9
11975
+ ...defaultProps$8
11976
11976
  },
11977
11977
  setup(props) {
11978
11978
  // 重用并且简化
@@ -12080,12 +12080,12 @@
12080
12080
  app.component(script$c.name, script$c);
12081
12081
  };
12082
12082
 
12083
- const defaultProps$8 = transformToComponentProps(componentsDefaultProps['uni-video'].props, isEditingProp);
12083
+ const defaultProps$7 = transformToComponentProps(componentsDefaultProps['uni-video'].props, isEditingProp);
12084
12084
  // array that contains style props
12085
12085
  var script$b = vue.defineComponent({
12086
12086
  name: 'uni-video',
12087
12087
  props: {
12088
- ...defaultProps$8
12088
+ ...defaultProps$7
12089
12089
  },
12090
12090
  components: {
12091
12091
  // FontAwesomeIcon
@@ -20831,7 +20831,7 @@
20831
20831
  },
20832
20832
  secondFlipBackgroundColor: {
20833
20833
  type: String,
20834
- default: '#393939' // 下层背景颜色
20834
+ default: (props) => props.mainFlipBackgroundColor // 下层背景颜色
20835
20835
  },
20836
20836
  labelColor: {
20837
20837
  type: String,
@@ -21107,7 +21107,7 @@
21107
21107
  script$8.__scopeId = "data-v-47d33153";
21108
21108
  script$8.__file = "src/components/UniCountdown/Countdown.vue";
21109
21109
 
21110
- const defaultProps$7 = transformToComponentProps(componentsDefaultProps['uni-countdown'].props, isEditingProp);
21110
+ transformToComponentProps(componentsDefaultProps['uni-countdown'].props, isEditingProp);
21111
21111
  // 获取当前日期和时间
21112
21112
  const now = new Date();
21113
21113
  // 添加一天
@@ -21125,11 +21125,106 @@
21125
21125
  var script$7 = vue.defineComponent({
21126
21126
  name: 'uni-countdown',
21127
21127
  props: {
21128
- ...defaultProps$7,
21128
+ left: {
21129
+ type: String,
21130
+ default: '25px'
21131
+ },
21132
+ top: {
21133
+ type: String,
21134
+ default: '204.5px'
21135
+ },
21136
+ opacity: {
21137
+ type: Number,
21138
+ default: 1
21139
+ },
21129
21140
  deadline: {
21130
21141
  type: String,
21131
21142
  default: formattedDate
21132
- }
21143
+ },
21144
+ mainColor: {
21145
+ type: String,
21146
+ default: '#EC685C' // 上层时间颜色
21147
+ },
21148
+ mainFlipBackgroundColor: {
21149
+ type: String,
21150
+ default: '#222222' // 上层背景颜色
21151
+ },
21152
+ labelColor: {
21153
+ type: String,
21154
+ default: '#222222' // 时间单位颜色
21155
+ },
21156
+ showLabels: {
21157
+ type: Boolean,
21158
+ required: false,
21159
+ default: true
21160
+ },
21161
+ flipAnimation: {
21162
+ type: Boolean,
21163
+ required: false,
21164
+ default: true
21165
+ },
21166
+ language: {
21167
+ type: String,
21168
+ required: false,
21169
+ default: 'en'
21170
+ },
21171
+ size: {
21172
+ type: String,
21173
+ required: false,
21174
+ default: "middle"
21175
+ },
21176
+ countdownSize: {
21177
+ type: String,
21178
+ required: false,
21179
+ default: function (props) {
21180
+ if (props.size == 'middle') {
21181
+ return "2.25rem";
21182
+ }
21183
+ else if (props.size == 'large') {
21184
+ return "2.75rem";
21185
+ }
21186
+ else {
21187
+ return "1.5rem";
21188
+ }
21189
+ }
21190
+ },
21191
+ labelSize: {
21192
+ type: String,
21193
+ required: false,
21194
+ default: function (props) {
21195
+ if (props.size == 'middle') {
21196
+ return "1";
21197
+ }
21198
+ else if (props.size == 'large') {
21199
+ return "1.25rem";
21200
+ }
21201
+ else {
21202
+ return ".8rem";
21203
+ }
21204
+ }
21205
+ },
21206
+ labels: {
21207
+ type: Object,
21208
+ required: false,
21209
+ default: function (props) {
21210
+ if (props.language == 'en') {
21211
+ return {
21212
+ days: 'Days',
21213
+ hours: 'Hours',
21214
+ minutes: 'Minutes',
21215
+ seconds: 'Seconds'
21216
+ };
21217
+ }
21218
+ else {
21219
+ return {
21220
+ days: 'วัน',
21221
+ hours: 'ชั่วโมง',
21222
+ minutes: 'นาที',
21223
+ seconds: 'ที่สอง'
21224
+ };
21225
+ }
21226
+ }
21227
+ },
21133
21228
  },
21134
21229
  components: {
21135
21230
  Countdown: script$8
@@ -21151,9 +21246,19 @@
21151
21246
 
21152
21247
  return (vue.openBlock(), vue.createElementBlock("div", {
21153
21248
  class: "uni-countdown-component",
21154
- style: vue.normalizeStyle(_ctx.styleProps)
21249
+ style: vue.normalizeStyle({left: _ctx.left, top: _ctx.top, opacity: _ctx.opacity, position: 'absolute'})
21155
21250
  }, [
21156
- vue.createVNode(_component_Countdown, { deadline: _ctx.deadline }, null, 8 /* PROPS */, ["deadline"])
21251
+ vue.createVNode(_component_Countdown, {
21252
+ deadline: _ctx.deadline,
21253
+ mainColor: _ctx.mainColor,
21254
+ mainFlipBackgroundColor: _ctx.mainFlipBackgroundColor,
21255
+ labelColor: _ctx.labelColor,
21256
+ showLabels: _ctx.showLabels,
21257
+ labels: _ctx.labels,
21258
+ language: _ctx.language,
21259
+ countdownSize: _ctx.countdownSize,
21260
+ labelSize: _ctx.labelSize
21261
+ }, null, 8 /* PROPS */, ["deadline", "mainColor", "mainFlipBackgroundColor", "labelColor", "showLabels", "labels", "language", "countdownSize", "labelSize"])
21157
21262
  ], 4 /* STYLE */))
21158
21263
  }
21159
21264
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.44",
3
+ "version": "1.0.46",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",