unika-components 1.0.63 → 1.0.65

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.
Files changed (4) hide show
  1. package/dist/unika-components.css +310 -310
  2. package/dist/unika-components.esm.js +7 -13
  3. package/dist/unika-components.umd.js +7 -13
  4. package/package.json +1 -1
package/dist/unika-components.css CHANGED
@@ -1,44 +1,4 @@
1
1
 
2
- .uni-image-component {
3
- max-width: 100%;
4
- }
5
-
6
- .uni-background-component {
7
- width: 100%;
8
- }
9
- .bg-img {
10
- width: 100%;
11
- height: 100%;
12
- object-fit: cover;
13
- z-index:1;
14
- }
15
- .watermark {
16
- height: 100%;
17
- position: absolute;
18
- top: 0;
19
- left: 0;
20
- right: 0;
21
- bottom: 0;
22
- }
23
- .watermark-div {
24
- height: 100%;
25
- width:100%;
26
- position:absolute;
27
- z-index:99999999;
28
- }
29
- body:before{
30
- content: '';
31
- position: fixed;
32
- top: 0;
33
- bottom: 0;
34
- left: 0;
35
- right: 0;
36
- z-index: -1;
37
- /* background: url(https://unika-static-dev.unika.cc/logo.png) 0 0 repeat; */
38
- background-position: center;
39
- opacity: 0.1;
40
- }
41
-
42
2
  h2.uni-text-component, p.uni-text-component {
43
3
  margin-bottom: 0;
44
4
  }
@@ -50,27 +10,6 @@ button.uni-text-component {
50
10
  box-sizing: border-box;
51
11
  white-space: pre-wrap;
52
12
  }
53
-
54
- .uni-video-component {
55
- position: relative;
56
- text-align: center;
57
- }
58
- .play-pause-button {
59
- position: absolute;
60
- top: 50%;
61
- left: 50%;
62
- transform: translate(-50%, -50%);
63
- cursor: pointer;
64
- font-size: 2rem;
65
- color: #fff;
66
- background: rgba(0, 0, 0, 0.6);
67
- border-radius: 50%;
68
- padding: 10px;
69
- transition: background 0.3s;
70
- }
71
- .play-pause-button:hover {
72
- background: rgba(0, 0, 0, 0.8);
73
- }
74
13
 
75
14
  .slide-guide {
76
15
  position: absolute;
@@ -145,6 +84,61 @@ body, html {
145
84
  }
146
85
  }
147
86
 
87
+ .uni-video-component {
88
+ position: relative;
89
+ text-align: center;
90
+ }
91
+ .play-pause-button {
92
+ position: absolute;
93
+ top: 50%;
94
+ left: 50%;
95
+ transform: translate(-50%, -50%);
96
+ cursor: pointer;
97
+ font-size: 2rem;
98
+ color: #fff;
99
+ background: rgba(0, 0, 0, 0.6);
100
+ border-radius: 50%;
101
+ padding: 10px;
102
+ transition: background 0.3s;
103
+ }
104
+ .play-pause-button:hover {
105
+ background: rgba(0, 0, 0, 0.8);
106
+ }
107
+
108
+ .slot-number {
109
+ position: absolute;
110
+ bottom: 2px;
111
+ left: 7px;
112
+ font-size: 12px;
113
+ color: #666
114
+ }
115
+
116
+ .uni-image-component {
117
+ max-width: 100%;
118
+ }
119
+
120
+ .like-button {
121
+ display: flex;
122
+ flex-direction: column;
123
+ align-items: center;
124
+ cursor: pointer;
125
+ }
126
+
127
+ .icon-heart {
128
+ font-size: 24px;
129
+ color: #e74c3c;
130
+ }
131
+
132
+ .liked {
133
+ color: #f00; /* 更改颜色以示已赞 */
134
+ }
135
+
136
+ .like-count {
137
+ margin-top: 4px;
138
+ font-size: 16px;
139
+ color: #333;
140
+ }
141
+
148
142
  #audio {
149
143
  position: absolute;
150
144
  right: 10px;
@@ -240,6 +234,56 @@ body, html {
240
234
  }
241
235
  }
242
236
 
237
+ .uni-background-component {
238
+ width: 100%;
239
+ }
240
+ .bg-img {
241
+ width: 100%;
242
+ height: 100%;
243
+ object-fit: cover;
244
+ z-index:1;
245
+ }
246
+ .watermark {
247
+ height: 100%;
248
+ position: absolute;
249
+ top: 0;
250
+ left: 0;
251
+ right: 0;
252
+ bottom: 0;
253
+ }
254
+ .watermark-div {
255
+ height: 100%;
256
+ width:100%;
257
+ position:absolute;
258
+ z-index:99999999;
259
+ }
260
+ body:before{
261
+ content: '';
262
+ position: fixed;
263
+ top: 0;
264
+ bottom: 0;
265
+ left: 0;
266
+ right: 0;
267
+ z-index: -1;
268
+ /* background: url(https://unika-static-dev.unika.cc/logo.png) 0 0 repeat; */
269
+ background-position: center;
270
+ opacity: 0.1;
271
+ }
272
+
273
+ /*.swiper-container {
274
+ width: 100%;
275
+ height: 300px;
276
+ }
277
+
278
+ .swiper-slide {
279
+ text-align: center;
280
+ }
281
+
282
+ .swiper-slide img {
283
+ max-width: 100%;
284
+ max-height: 100%;
285
+ }*/
286
+
243
287
  #app1 {
244
288
  position: relative;
245
289
  }
@@ -262,14 +306,6 @@ body, html {
262
306
  }
263
307
  }
264
308
 
265
- .slot-number {
266
- position: absolute;
267
- bottom: 2px;
268
- left: 7px;
269
- font-size: 12px;
270
- color: #666
271
- }
272
-
273
309
  .video-player {
274
310
  position: relative;
275
311
  text-align: center;
@@ -290,42 +326,6 @@ body, html {
290
326
  .play-pause-button:hover {
291
327
  background: rgba(0, 0, 0, 0.8);
292
328
  }
293
-
294
- .like-button {
295
- display: flex;
296
- flex-direction: column;
297
- align-items: center;
298
- cursor: pointer;
299
- }
300
-
301
- .icon-heart {
302
- font-size: 24px;
303
- color: #e74c3c;
304
- }
305
-
306
- .liked {
307
- color: #f00; /* 更改颜色以示已赞 */
308
- }
309
-
310
- .like-count {
311
- margin-top: 4px;
312
- font-size: 16px;
313
- color: #333;
314
- }
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,213 +874,26 @@ 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;
877
+ .unika-calendar-title {
878
+ font-size: 25px;
879
+ padding-bottom: 4px;
896
880
  }
897
-
898
- .flip-clock__piece {
899
- display: inline-block;
900
- margin: 0 0.2vw;
881
+ .unika-calendar-header {
882
+ display: -webkit-box;
883
+ display: -ms-flexbox;
884
+ display: flex;
885
+ -webkit-box-pack: justify;
886
+ -ms-flex-pack: justify;
887
+ justify-content: space-between;
888
+ -webkit-box-align: end;
889
+ -ms-flex-align: end;
890
+ align-items: flex-end;
891
+ line-height: 1;
892
+ padding: 0 47px 20px;
901
893
  }
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
-
1064
- .unika-calendar-title {
1065
- font-size: 25px;
1066
- padding-bottom: 4px;
1067
- }
1068
- .unika-calendar-header {
1069
- display: -webkit-box;
1070
- display: -ms-flexbox;
1071
- display: flex;
1072
- -webkit-box-pack: justify;
1073
- -ms-flex-pack: justify;
1074
- justify-content: space-between;
1075
- -webkit-box-align: end;
1076
- -ms-flex-align: end;
1077
- align-items: flex-end;
1078
- line-height: 1;
1079
- padding: 0 47px 20px;
1080
- }
1081
- .unika-calendar-header .disabled {
1082
- pointer-events: none;
1083
- color: #f0f0f0;
894
+ .unika-calendar-header .disabled {
895
+ pointer-events: none;
896
+ color: #f0f0f0;
1084
897
  }
1085
898
  .unika-calendar-th {
1086
899
  display: -webkit-box;
@@ -1312,3 +1125,190 @@ button.swiper-pagination-bullet {
1312
1125
  padding: 0 0px;
1313
1126
  border-bottom: 1px solid
1314
1127
  }
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 var(--second-flip-background-color, #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
+ }
package/dist/unika-components.esm.js CHANGED
@@ -46748,22 +46748,16 @@ var script$1 = defineComponent({
46748
46748
  const loopC = ref(props.loop);
46749
46749
  const delayC = ref(props.delay);
46750
46750
  const animationLinkC = ref(props.animationLink);
46751
- watch(loopC, (newVal) => {
46752
- loopC.value = newVal;
46751
+ watch(() => props.loop, (newValue, oldValue) => {
46752
+ loopC.value = newValue;
46753
46753
  animationLinkC.value = 'https://unika-static-dev.unika.cc/lotties/test.json';
46754
46754
  setTimeout(() => {
46755
- animationLinkC.value = 'https://unika-static-dev.unika.cc/lotties/zlweddingbai.json';
46755
+ animationLinkC.value = props.animationLink;
46756
46756
  }, 10);
46757
- console.log(loopC.value);
46758
- });
46759
- watch(delayC, (newVal) => {
46760
- delayC.value = newVal;
46761
- animationLinkC.value = 'https://unika-static-dev.unika.cc/lotties/test.json';
46762
- setTimeout(() => {
46763
- animationLinkC.value = 'https://unika-static-dev.unika.cc/lotties/zlweddingbai.json';
46764
- }, 10);
46765
- console.log(delayC.value);
46766
- });
46757
+ }, { deep: true });
46758
+ watch(() => props.delay, (newValue, oldValue) => {
46759
+ delayC.value = newValue;
46760
+ }, { deep: true });
46767
46761
  const play = () => {
46768
46762
  if (lottieAnimation.value) {
46769
46763
  lottieAnimation.value.stop();
package/dist/unika-components.umd.js CHANGED
@@ -46755,22 +46755,16 @@
46755
46755
  const loopC = vue.ref(props.loop);
46756
46756
  const delayC = vue.ref(props.delay);
46757
46757
  const animationLinkC = vue.ref(props.animationLink);
46758
- vue.watch(loopC, (newVal) => {
46759
- loopC.value = newVal;
46758
+ vue.watch(() => props.loop, (newValue, oldValue) => {
46759
+ loopC.value = newValue;
46760
46760
  animationLinkC.value = 'https://unika-static-dev.unika.cc/lotties/test.json';
46761
46761
  setTimeout(() => {
46762
- animationLinkC.value = 'https://unika-static-dev.unika.cc/lotties/zlweddingbai.json';
46762
+ animationLinkC.value = props.animationLink;
46763
46763
  }, 10);
46764
- console.log(loopC.value);
46765
- });
46766
- vue.watch(delayC, (newVal) => {
46767
- delayC.value = newVal;
46768
- animationLinkC.value = 'https://unika-static-dev.unika.cc/lotties/test.json';
46769
- setTimeout(() => {
46770
- animationLinkC.value = 'https://unika-static-dev.unika.cc/lotties/zlweddingbai.json';
46771
- }, 10);
46772
- console.log(delayC.value);
46773
- });
46764
+ }, { deep: true });
46765
+ vue.watch(() => props.delay, (newValue, oldValue) => {
46766
+ delayC.value = newValue;
46767
+ }, { deep: true });
46774
46768
  const play = () => {
46775
46769
  if (lottieAnimation.value) {
46776
46770
  lottieAnimation.value.stop();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.63",
3
+ "version": "1.0.65",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",