unika-components 1.0.312 → 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.
@@ -5,19 +5,6 @@
5
5
  .uni-image-mask-wrapper {
6
6
  display: inline-block;
7
7
  }
8
-
9
- h2.uni-text-component, p.uni-text-component {
10
- margin-top: 0;
11
- margin-bottom: 0;
12
- }
13
- button.uni-text-component {
14
- padding: 5px 10px;
15
- cursor: pointer;
16
- }
17
- .uni-text-component {
18
- box-sizing: border-box;
19
- white-space: pre-wrap;
20
- }
21
8
 
22
9
  .uni-video-component {
23
10
  position: relative;
@@ -39,6 +26,19 @@ button.uni-text-component {
39
26
  .play-pause-button:hover {
40
27
  background: rgba(0, 0, 0, 0.8);
41
28
  }
29
+
30
+ h2.uni-text-component, p.uni-text-component {
31
+ margin-top: 0;
32
+ margin-bottom: 0;
33
+ }
34
+ button.uni-text-component {
35
+ padding: 5px 10px;
36
+ cursor: pointer;
37
+ }
38
+ .uni-text-component {
39
+ box-sizing: border-box;
40
+ white-space: pre-wrap;
41
+ }
42
42
 
43
43
 
44
44
  .uni-calendar-component {
@@ -157,6 +157,10 @@ body, html {
157
157
  font-size: 16px;
158
158
  color: #333;
159
159
  }
160
+
161
+ .uni-svg-component {
162
+ display: inline-block;
163
+ }
160
164
 
161
165
  .ant-input-number {
162
166
  box-sizing: border-box;
@@ -198,11 +202,6 @@ body, html {
198
202
  height: 100%;
199
203
  }
200
204
 
201
- .uni-lotties-component {
202
- width: 100%;
203
- height: 100%;
204
- }
205
-
206
205
  .swiper-warp {
207
206
  width: 100%;
208
207
  height: 100%;
@@ -219,10 +218,11 @@ body, html {
219
218
 
220
219
  .uni-build-up-component {
221
220
  }
222
-
223
- .uni-svg-component {
224
- display: inline-block;
225
- }
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 - 1;
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 - 1;
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.312",
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",