unika-components 1.0.310 → 1.0.312

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.
@@ -18,6 +18,39 @@ button.uni-text-component {
18
18
  box-sizing: border-box;
19
19
  white-space: pre-wrap;
20
20
  }
21
+
22
+ .uni-video-component {
23
+ position: relative;
24
+ text-align: center;
25
+ }
26
+ .play-pause-button {
27
+ position: absolute;
28
+ top: 50%;
29
+ left: 50%;
30
+ transform: translate(-50%, -50%);
31
+ cursor: pointer;
32
+ font-size: 2rem;
33
+ color: #fff;
34
+ background: rgba(0, 0, 0, 0.6);
35
+ border-radius: 50%;
36
+ padding: 10px;
37
+ transition: background 0.3s;
38
+ }
39
+ .play-pause-button:hover {
40
+ background: rgba(0, 0, 0, 0.8);
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
+ }
21
54
 
22
55
  .slide-guide {
23
56
  position: absolute;
@@ -103,63 +136,6 @@ body, html {
103
136
  position: static !important;
104
137
  }
105
138
 
106
- .uni-video-component {
107
- position: relative;
108
- text-align: center;
109
- }
110
- .play-pause-button {
111
- position: absolute;
112
- top: 50%;
113
- left: 50%;
114
- transform: translate(-50%, -50%);
115
- cursor: pointer;
116
- font-size: 2rem;
117
- color: #fff;
118
- background: rgba(0, 0, 0, 0.6);
119
- border-radius: 50%;
120
- padding: 10px;
121
- transition: background 0.3s;
122
- }
123
- .play-pause-button:hover {
124
- background: rgba(0, 0, 0, 0.8);
125
- }
126
-
127
-
128
- .uni-calendar-component {
129
-
130
- }
131
- .slot-number {
132
- position: absolute;
133
- bottom: 2px;
134
- left: 7px;
135
- font-size: 12px;
136
- color: #666
137
- }
138
-
139
- .uni-lotties-component {
140
- width: 100%;
141
- height: 100%;
142
- }
143
-
144
- .effect {
145
- width: 100%;
146
- height: 100%;
147
- }
148
-
149
- .swiper-warp {
150
- width: 100%;
151
- height: 100%;
152
- }
153
-
154
- .swiper-slide-component {
155
- text-align: center;
156
- }
157
-
158
- .swiper-slide img {
159
- max-width: 100%;
160
- max-height: 100%;
161
- }
162
-
163
139
  .like-button {
164
140
  display: flex;
165
141
  flex-direction: column;
@@ -217,6 +193,30 @@ body, html {
217
193
  vertical-align: top;
218
194
  }
219
195
 
196
+ .effect {
197
+ width: 100%;
198
+ height: 100%;
199
+ }
200
+
201
+ .uni-lotties-component {
202
+ width: 100%;
203
+ height: 100%;
204
+ }
205
+
206
+ .swiper-warp {
207
+ width: 100%;
208
+ height: 100%;
209
+ }
210
+
211
+ .swiper-slide-component {
212
+ text-align: center;
213
+ }
214
+
215
+ .swiper-slide img {
216
+ max-width: 100%;
217
+ max-height: 100%;
218
+ }
219
+
220
220
  .uni-build-up-component {
221
221
  }
222
222
 
@@ -771,6 +771,193 @@ 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
+
774
961
  .unika-calendar-box {
775
962
  position: relative;
776
963
  width: 325px !important;
@@ -1031,190 +1218,3 @@ button.swiper-pagination-bullet {
1031
1218
  padding: 0 0px;
1032
1219
  border-bottom: 1px solid
1033
1220
  }
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
- }
@@ -13388,7 +13388,7 @@ var script$h = defineComponent({
13388
13388
  upArrow.value = true;
13389
13389
  }
13390
13390
  swiperAnimate(swiper);
13391
- currentPage.value = currentIndex;
13391
+ currentPage.value = currentIndex - 1;
13392
13392
  sendPageInfo();
13393
13393
  };
13394
13394
  const slideChangeTransitionEnd = (e) => {
@@ -13417,7 +13417,7 @@ var script$h = defineComponent({
13417
13417
  };
13418
13418
  // 翻到下一页
13419
13419
  const flipToNextPage = () => {
13420
- if (currentPage.value < totalPages.value) {
13420
+ if (currentPage.value < totalPages.value - 1) {
13421
13421
  currentPage.value++;
13422
13422
  }
13423
13423
  else {
@@ -13434,7 +13434,7 @@ var script$h = defineComponent({
13434
13434
  currentPage.value--;
13435
13435
  }
13436
13436
  else {
13437
- currentPage.value = 0;
13437
+ currentPage.value = totalPages.value - 1;
13438
13438
  }
13439
13439
  console.log('翻到上一页');
13440
13440
  console.log(currentPage.value);
@@ -13395,7 +13395,7 @@
13395
13395
  upArrow.value = true;
13396
13396
  }
13397
13397
  swiperAnimate(swiper);
13398
- currentPage.value = currentIndex;
13398
+ currentPage.value = currentIndex - 1;
13399
13399
  sendPageInfo();
13400
13400
  };
13401
13401
  const slideChangeTransitionEnd = (e) => {
@@ -13424,7 +13424,7 @@
13424
13424
  };
13425
13425
  // 翻到下一页
13426
13426
  const flipToNextPage = () => {
13427
- if (currentPage.value < totalPages.value) {
13427
+ if (currentPage.value < totalPages.value - 1) {
13428
13428
  currentPage.value++;
13429
13429
  }
13430
13430
  else {
@@ -13441,7 +13441,7 @@
13441
13441
  currentPage.value--;
13442
13442
  }
13443
13443
  else {
13444
- currentPage.value = 0;
13444
+ currentPage.value = totalPages.value - 1;
13445
13445
  }
13446
13446
  console.log('翻到上一页');
13447
13447
  console.log(currentPage.value);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.310",
3
+ "version": "1.0.312",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",