unika-components 1.0.311 → 1.0.313

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,3 +1,10 @@
1
+
2
+ .uni-image-component {
3
+ max-width: 100%;
4
+ }
5
+ .uni-image-mask-wrapper {
6
+ display: inline-block;
7
+ }
1
8
 
2
9
  .uni-video-component {
3
10
  position: relative;
@@ -19,18 +26,6 @@
19
26
  .play-pause-button:hover {
20
27
  background: rgba(0, 0, 0, 0.8);
21
28
  }
22
-
23
-
24
- .uni-calendar-component {
25
-
26
- }
27
- .slot-number {
28
- position: absolute;
29
- bottom: 2px;
30
- left: 7px;
31
- font-size: 12px;
32
- color: #666
33
- }
34
29
 
35
30
  h2.uni-text-component, p.uni-text-component {
36
31
  margin-top: 0;
@@ -44,6 +39,18 @@ button.uni-text-component {
44
39
  box-sizing: border-box;
45
40
  white-space: pre-wrap;
46
41
  }
42
+
43
+
44
+ .uni-calendar-component {
45
+
46
+ }
47
+ .slot-number {
48
+ position: absolute;
49
+ bottom: 2px;
50
+ left: 7px;
51
+ font-size: 12px;
52
+ color: #666
53
+ }
47
54
 
48
55
  .slide-guide {
49
56
  position: absolute;
@@ -128,21 +135,32 @@ body, html {
128
135
  .edit-wrapper .uni-lotties-component, .edit-wrapper .uni-like-component, .edit-wrapper .uni-background-component, .edit-wrapper .uni-svg-component, .edit-wrapper .uni-register-form-component{
129
136
  position: static !important;
130
137
  }
131
-
132
- .uni-image-component {
133
- max-width: 100%;
134
- }
135
- .uni-image-mask-wrapper {
136
- display: inline-block;
137
- }
138
138
 
139
- .effect {
140
- width: 100%;
141
- height: 100%;
139
+ .like-button {
140
+ display: flex;
141
+ flex-direction: column;
142
+ align-items: center;
143
+ cursor: pointer;
142
144
  }
143
145
 
144
- .uni-build-up-component {
145
- }
146
+ .icon-heart {
147
+ font-size: 24px;
148
+ color: #e74c3c;
149
+ }
150
+
151
+ .liked {
152
+ color: #f00; /* 更改颜色以示已赞 */
153
+ }
154
+
155
+ .like-count {
156
+ margin-top: 4px;
157
+ font-size: 16px;
158
+ color: #333;
159
+ }
160
+
161
+ .uni-svg-component {
162
+ display: inline-block;
163
+ }
146
164
 
147
165
  .ant-input-number {
148
166
  box-sizing: border-box;
@@ -179,33 +197,7 @@ body, html {
179
197
  vertical-align: top;
180
198
  }
181
199
 
182
- .like-button {
183
- display: flex;
184
- flex-direction: column;
185
- align-items: center;
186
- cursor: pointer;
187
- }
188
-
189
- .icon-heart {
190
- font-size: 24px;
191
- color: #e74c3c;
192
- }
193
-
194
- .liked {
195
- color: #f00; /* 更改颜色以示已赞 */
196
- }
197
-
198
- .like-count {
199
- margin-top: 4px;
200
- font-size: 16px;
201
- color: #333;
202
- }
203
-
204
- .uni-svg-component {
205
- display: inline-block;
206
- }
207
-
208
- .uni-lotties-component {
200
+ .effect {
209
201
  width: 100%;
210
202
  height: 100%;
211
203
  }
@@ -223,6 +215,14 @@ body, html {
223
215
  max-width: 100%;
224
216
  max-height: 100%;
225
217
  }
218
+
219
+ .uni-build-up-component {
220
+ }
221
+
222
+ .uni-lotties-component {
223
+ width: 100%;
224
+ height: 100%;
225
+ }
226
226
  /**
227
227
  * Swiper 6.8.4
228
228
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -771,193 +771,6 @@ button.swiper-pagination-bullet {
771
771
  backface-visibility: hidden;
772
772
  }
773
773
 
774
-
775
- .no-animation__card {
776
- font-weight: 500;
777
- font-size: var(--countdown-size, 2rem);
778
- line-height: 1.5;
779
- display: block;
780
- color: var(--main-color, #EC685C);
781
- }
782
-
783
- .flip-clock {
784
- text-align: center;
785
- perspective: 600px;
786
- margin: 0 auto;
787
- }
788
-
789
- .flip-clock *,
790
- .flip-clock *:before,
791
- .flip-clock *:after {
792
- box-sizing: border-box;
793
- }
794
-
795
- .flip-clock__piece {
796
- display: inline-block;
797
- margin: 0 0.2vw;
798
- }
799
-
800
- @media (min-width: 1000px) {
801
- .flip-clock__piece {
802
- margin: 0 5px;
803
- }
804
- }
805
-
806
- .flip-clock__slot {
807
- font-size: var(--label-size, 1rem);
808
- line-height: 1.5;
809
- display: block;
810
- color: var(--label-color, #222222);
811
- }
812
-
813
- .flip-card {
814
- display: block;
815
- position: relative;
816
- padding-bottom: 0.72em; /* halfHeight */
817
- font-size: var(--countdown-size, 2.25rem);
818
- line-height: 0.95;
819
- }
820
-
821
- @media (min-width: 1000px) {
822
- .flip-clock__slot {
823
- font-size: 1.2rem;
824
- }
825
-
826
- .flip-card {
827
- font-size: 3rem;
828
- }
829
- }
830
-
831
- .flip-card__top,
832
- .flip-card__bottom,
833
- .flip-card__back-bottom,
834
- .flip-card__back::before,
835
- .flip-card__back::after{
836
- display: block;
837
- height: 0.72em; /* halfHeight */
838
- color: var(--main-color, #EC685C);
839
- background: var(--main-flip-background-color, #222222);
840
- padding: 0.23em 0.15em 0.4em;
841
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
842
- backface-visibility: hidden;
843
- -webkit-backface-visibility: hidden;
844
- transform-style: preserve-3d;
845
- width: 2.1em;
846
- }
847
-
848
- .flip-card__top-4digits,
849
- .flip-card__bottom-4digits,
850
- .flip-card__back-bottom-4digits,
851
- .flip-card__back-4digits::before,
852
- .flip-card__back-4digits::after {
853
- display: block;
854
- height: 0.72em; /* halfHeight */
855
- color: var(--main-color, #EC685C);
856
- background: var(--main-flip-background-color, #222222);
857
- padding: 0.23em 0.15em 0.4em;
858
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
859
- backface-visibility: hidden;
860
- -webkit-backface-visibility: hidden;
861
- transform-style: preserve-3d;
862
- width: 2.65em;
863
- }
864
-
865
- .flip-card__bottom,
866
- .flip-card__back-bottom,
867
- .flip-card__bottom-4digits,
868
- .flip-card__back-bottom-4digits {
869
- color: var(--second-flip-color, #EC685C);
870
- position: absolute;
871
- top: 50%;
872
- left: 0;
873
- border-top: solid 1px var(--second-flip-background-color, #000);
874
- background: var(--second-flip-background-color, #393939);
875
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
876
- pointer-events: none;
877
- overflow: hidden;
878
- z-index: 2;
879
- }
880
-
881
- .flip-card__back-bottom,
882
- .flip-card__back-bottom-4digits {
883
- z-index: 1;
884
- }
885
-
886
- .flip-card__bottom::after,
887
- .flip-card__back-bottom::after,
888
- .flip-card__bottom-4digits::after,
889
- .flip-card__back-bottom-4digits::after {
890
- display: block;
891
- margin-top: -0.72em; /* Negative halfHeight */
892
- }
893
- .flip-card__back::before,
894
- .flip-card__bottom::after,
895
- .flip-card__back-bottom::after,
896
- .flip-card__back-4digits::before,
897
- .flip-card__bottom-4digits::after,
898
- .flip-card__back-bottom-4digits::after {
899
- content: attr(data-value);
900
- }
901
-
902
- .flip-card__back,
903
- .flip-card__back-4digits {
904
- position: absolute;
905
- top: 0;
906
- height: 100%;
907
- left: 0%;
908
- pointer-events: none;
909
- }
910
- .flip-card__back::before,
911
- .flip-card__back-4digits::before {
912
- position: relative;
913
- overflow: hidden;
914
- z-index: -1;
915
- }
916
-
917
- .flip .flip-card__back::before,
918
- .flip .flip-card__back-4digits::before {
919
- z-index: 1;
920
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
921
- animation-fill-mode: both;
922
- transform-origin: center bottom;
923
- }
924
-
925
- .flip .flip-card__bottom,
926
- .flip .flip-card__bottom-4digits {
927
- transform-origin: center top;
928
- animation-fill-mode: both;
929
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
930
- }
931
- @keyframes flipTop {
932
- 0% {
933
- transform: rotateX(0deg);
934
- z-index: 2;
935
- }
936
- 0%, 99% {
937
- opacity: 1;
938
- }
939
- 100% {
940
- transform: rotateX(-90deg);
941
- opacity: 0;
942
- }
943
- }
944
-
945
- @keyframes flipBottom {
946
- 0%, 50% {
947
- z-index: -1;
948
- transform: rotateX(90deg);
949
- opacity: 0;
950
- }
951
- 51% {
952
- opacity: 1;
953
- }
954
- 100% {
955
- opacity: 1;
956
- transform: rotateX(0deg);
957
- z-index: 5;
958
- }
959
- }
960
-
961
774
  .unika-calendar-box {
962
775
  position: relative;
963
776
  width: 325px !important;
@@ -1218,3 +1031,190 @@ button.swiper-pagination-bullet {
1218
1031
  padding: 0 0px;
1219
1032
  border-bottom: 1px solid
1220
1033
  }
1034
+
1035
+
1036
+ .no-animation__card {
1037
+ font-weight: 500;
1038
+ font-size: var(--countdown-size, 2rem);
1039
+ line-height: 1.5;
1040
+ display: block;
1041
+ color: var(--main-color, #EC685C);
1042
+ }
1043
+
1044
+ .flip-clock {
1045
+ text-align: center;
1046
+ perspective: 600px;
1047
+ margin: 0 auto;
1048
+ }
1049
+
1050
+ .flip-clock *,
1051
+ .flip-clock *:before,
1052
+ .flip-clock *:after {
1053
+ box-sizing: border-box;
1054
+ }
1055
+
1056
+ .flip-clock__piece {
1057
+ display: inline-block;
1058
+ margin: 0 0.2vw;
1059
+ }
1060
+
1061
+ @media (min-width: 1000px) {
1062
+ .flip-clock__piece {
1063
+ margin: 0 5px;
1064
+ }
1065
+ }
1066
+
1067
+ .flip-clock__slot {
1068
+ font-size: var(--label-size, 1rem);
1069
+ line-height: 1.5;
1070
+ display: block;
1071
+ color: var(--label-color, #222222);
1072
+ }
1073
+
1074
+ .flip-card {
1075
+ display: block;
1076
+ position: relative;
1077
+ padding-bottom: 0.72em; /* halfHeight */
1078
+ font-size: var(--countdown-size, 2.25rem);
1079
+ line-height: 0.95;
1080
+ }
1081
+
1082
+ @media (min-width: 1000px) {
1083
+ .flip-clock__slot {
1084
+ font-size: 1.2rem;
1085
+ }
1086
+
1087
+ .flip-card {
1088
+ font-size: 3rem;
1089
+ }
1090
+ }
1091
+
1092
+ .flip-card__top,
1093
+ .flip-card__bottom,
1094
+ .flip-card__back-bottom,
1095
+ .flip-card__back::before,
1096
+ .flip-card__back::after{
1097
+ display: block;
1098
+ height: 0.72em; /* halfHeight */
1099
+ color: var(--main-color, #EC685C);
1100
+ background: var(--main-flip-background-color, #222222);
1101
+ padding: 0.23em 0.15em 0.4em;
1102
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1103
+ backface-visibility: hidden;
1104
+ -webkit-backface-visibility: hidden;
1105
+ transform-style: preserve-3d;
1106
+ width: 2.1em;
1107
+ }
1108
+
1109
+ .flip-card__top-4digits,
1110
+ .flip-card__bottom-4digits,
1111
+ .flip-card__back-bottom-4digits,
1112
+ .flip-card__back-4digits::before,
1113
+ .flip-card__back-4digits::after {
1114
+ display: block;
1115
+ height: 0.72em; /* halfHeight */
1116
+ color: var(--main-color, #EC685C);
1117
+ background: var(--main-flip-background-color, #222222);
1118
+ padding: 0.23em 0.15em 0.4em;
1119
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1120
+ backface-visibility: hidden;
1121
+ -webkit-backface-visibility: hidden;
1122
+ transform-style: preserve-3d;
1123
+ width: 2.65em;
1124
+ }
1125
+
1126
+ .flip-card__bottom,
1127
+ .flip-card__back-bottom,
1128
+ .flip-card__bottom-4digits,
1129
+ .flip-card__back-bottom-4digits {
1130
+ color: var(--second-flip-color, #EC685C);
1131
+ position: absolute;
1132
+ top: 50%;
1133
+ left: 0;
1134
+ border-top: solid 1px var(--second-flip-background-color, #000);
1135
+ background: var(--second-flip-background-color, #393939);
1136
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1137
+ pointer-events: none;
1138
+ overflow: hidden;
1139
+ z-index: 2;
1140
+ }
1141
+
1142
+ .flip-card__back-bottom,
1143
+ .flip-card__back-bottom-4digits {
1144
+ z-index: 1;
1145
+ }
1146
+
1147
+ .flip-card__bottom::after,
1148
+ .flip-card__back-bottom::after,
1149
+ .flip-card__bottom-4digits::after,
1150
+ .flip-card__back-bottom-4digits::after {
1151
+ display: block;
1152
+ margin-top: -0.72em; /* Negative halfHeight */
1153
+ }
1154
+ .flip-card__back::before,
1155
+ .flip-card__bottom::after,
1156
+ .flip-card__back-bottom::after,
1157
+ .flip-card__back-4digits::before,
1158
+ .flip-card__bottom-4digits::after,
1159
+ .flip-card__back-bottom-4digits::after {
1160
+ content: attr(data-value);
1161
+ }
1162
+
1163
+ .flip-card__back,
1164
+ .flip-card__back-4digits {
1165
+ position: absolute;
1166
+ top: 0;
1167
+ height: 100%;
1168
+ left: 0%;
1169
+ pointer-events: none;
1170
+ }
1171
+ .flip-card__back::before,
1172
+ .flip-card__back-4digits::before {
1173
+ position: relative;
1174
+ overflow: hidden;
1175
+ z-index: -1;
1176
+ }
1177
+
1178
+ .flip .flip-card__back::before,
1179
+ .flip .flip-card__back-4digits::before {
1180
+ z-index: 1;
1181
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1182
+ animation-fill-mode: both;
1183
+ transform-origin: center bottom;
1184
+ }
1185
+
1186
+ .flip .flip-card__bottom,
1187
+ .flip .flip-card__bottom-4digits {
1188
+ transform-origin: center top;
1189
+ animation-fill-mode: both;
1190
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1191
+ }
1192
+ @keyframes flipTop {
1193
+ 0% {
1194
+ transform: rotateX(0deg);
1195
+ z-index: 2;
1196
+ }
1197
+ 0%, 99% {
1198
+ opacity: 1;
1199
+ }
1200
+ 100% {
1201
+ transform: rotateX(-90deg);
1202
+ opacity: 0;
1203
+ }
1204
+ }
1205
+
1206
+ @keyframes flipBottom {
1207
+ 0%, 50% {
1208
+ z-index: -1;
1209
+ transform: rotateX(90deg);
1210
+ opacity: 0;
1211
+ }
1212
+ 51% {
1213
+ opacity: 1;
1214
+ }
1215
+ 100% {
1216
+ opacity: 1;
1217
+ transform: rotateX(0deg);
1218
+ z-index: 5;
1219
+ }
1220
+ }
@@ -13377,8 +13377,6 @@ var script$h = defineComponent({
13377
13377
  };
13378
13378
  const onSlideChange = (swiper) => {
13379
13379
  const currentIndex = swiper.activeIndex;
13380
- console.log('aaaaaaaa');
13381
- console.log(currentIndex);
13382
13380
  runAnimations(currentIndex);
13383
13381
  callUniLottiesPlay(currentIndex);
13384
13382
  if (currentIndex === swiper.slides.length - 1) {
@@ -13388,7 +13386,10 @@ var script$h = defineComponent({
13388
13386
  upArrow.value = true;
13389
13387
  }
13390
13388
  swiperAnimate(swiper);
13391
- currentPage.value = currentIndex;
13389
+ currentPage.value = (currentIndex - 1);
13390
+ console.log('aaaaaaaa');
13391
+ console.log(currentIndex);
13392
+ console.log(currentPage.value);
13392
13393
  sendPageInfo();
13393
13394
  };
13394
13395
  const slideChangeTransitionEnd = (e) => {
@@ -13447,6 +13448,7 @@ var script$h = defineComponent({
13447
13448
  cur: currentPage.value,
13448
13449
  count: totalPages.value,
13449
13450
  }, '*');
13451
+ console.log('bbbbbbbbbbbbbbb');
13450
13452
  console.log(currentPage.value);
13451
13453
  };
13452
13454
  // 监听来自父组件的消息
@@ -13384,8 +13384,6 @@
13384
13384
  };
13385
13385
  const onSlideChange = (swiper) => {
13386
13386
  const currentIndex = swiper.activeIndex;
13387
- console.log('aaaaaaaa');
13388
- console.log(currentIndex);
13389
13387
  runAnimations(currentIndex);
13390
13388
  callUniLottiesPlay(currentIndex);
13391
13389
  if (currentIndex === swiper.slides.length - 1) {
@@ -13395,7 +13393,10 @@
13395
13393
  upArrow.value = true;
13396
13394
  }
13397
13395
  swiperAnimate(swiper);
13398
- currentPage.value = currentIndex;
13396
+ currentPage.value = (currentIndex - 1);
13397
+ console.log('aaaaaaaa');
13398
+ console.log(currentIndex);
13399
+ console.log(currentPage.value);
13399
13400
  sendPageInfo();
13400
13401
  };
13401
13402
  const slideChangeTransitionEnd = (e) => {
@@ -13454,6 +13455,7 @@
13454
13455
  cur: currentPage.value,
13455
13456
  count: totalPages.value,
13456
13457
  }, '*');
13458
+ console.log('bbbbbbbbbbbbbbb');
13457
13459
  console.log(currentPage.value);
13458
13460
  };
13459
13461
  // 监听来自父组件的消息
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.311",
3
+ "version": "1.0.313",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",