unika-components 1.0.310 → 1.0.311

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,10 +1,36 @@
1
-
2
- .uni-image-component {
3
- max-width: 100%;
4
- }
5
- .uni-image-mask-wrapper {
6
- display: inline-block;
7
- }
1
+
2
+ .uni-video-component {
3
+ position: relative;
4
+ text-align: center;
5
+ }
6
+ .play-pause-button {
7
+ position: absolute;
8
+ top: 50%;
9
+ left: 50%;
10
+ transform: translate(-50%, -50%);
11
+ cursor: pointer;
12
+ font-size: 2rem;
13
+ color: #fff;
14
+ background: rgba(0, 0, 0, 0.6);
15
+ border-radius: 50%;
16
+ padding: 10px;
17
+ transition: background 0.3s;
18
+ }
19
+ .play-pause-button:hover {
20
+ background: rgba(0, 0, 0, 0.8);
21
+ }
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
+ }
8
34
 
9
35
  h2.uni-text-component, p.uni-text-component {
10
36
  margin-top: 0;
@@ -102,85 +128,21 @@ body, html {
102
128
  .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{
103
129
  position: static !important;
104
130
  }
105
-
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
- }
131
+
132
+ .uni-image-component {
133
+ max-width: 100%;
134
+ }
135
+ .uni-image-mask-wrapper {
136
+ display: inline-block;
137
+ }
143
138
 
144
139
  .effect {
145
140
  width: 100%;
146
141
  height: 100%;
147
142
  }
148
143
 
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
- .like-button {
164
- display: flex;
165
- flex-direction: column;
166
- align-items: center;
167
- cursor: pointer;
168
- }
169
-
170
- .icon-heart {
171
- font-size: 24px;
172
- color: #e74c3c;
173
- }
174
-
175
- .liked {
176
- color: #f00; /* 更改颜色以示已赞 */
177
- }
178
-
179
- .like-count {
180
- margin-top: 4px;
181
- font-size: 16px;
182
- color: #333;
183
- }
144
+ .uni-build-up-component {
145
+ }
184
146
 
185
147
  .ant-input-number {
186
148
  box-sizing: border-box;
@@ -217,12 +179,50 @@ body, html {
217
179
  vertical-align: top;
218
180
  }
219
181
 
220
- .uni-build-up-component {
221
- }
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
+ }
222
203
 
223
204
  .uni-svg-component {
224
205
  display: inline-block;
225
206
  }
207
+
208
+ .uni-lotties-component {
209
+ width: 100%;
210
+ height: 100%;
211
+ }
212
+
213
+ .swiper-warp {
214
+ width: 100%;
215
+ height: 100%;
216
+ }
217
+
218
+ .swiper-slide-component {
219
+ text-align: center;
220
+ }
221
+
222
+ .swiper-slide img {
223
+ max-width: 100%;
224
+ max-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,74 +771,261 @@ button.swiper-pagination-bullet {
771
771
  backface-visibility: hidden;
772
772
  }
773
773
 
774
- .unika-calendar-box {
775
- position: relative;
776
- width: 325px !important;
777
- min-height: 300px !important;
778
- height: auto !important;
779
- padding-bottom: 20px;
780
- }
781
- .unika-calendar-title {
782
- font-size: 25px;
783
- padding-bottom: 4px;
784
- }
785
- .unika-calendar-header {
786
- display: -webkit-box;
787
- display: -ms-flexbox;
788
- display: flex;
789
- -webkit-box-pack: justify;
790
- -ms-flex-pack: justify;
791
- justify-content: space-between;
792
- -webkit-box-align: end;
793
- -ms-flex-align: end;
794
- align-items: flex-end;
795
- line-height: 1;
796
- padding: 0 47px 20px;
797
- }
798
- .unika-calendar-header .disabled {
799
- pointer-events: none;
800
- color: #f0f0f0;
801
- }
802
- .unika-calendar-th {
803
- display: -webkit-box;
804
- display: -ms-flexbox;
805
- display: flex;
806
- -webkit-box-pack: start;
807
- -ms-flex-pack: start;
808
- justify-content: flex-start;
809
- height: 25px;
810
- line-height: 25px;
811
- padding: 0 10px;
812
- border-radius: 13px
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);
813
781
  }
814
- .unika-calendar-th > * {
815
- width: 14.2%;
782
+
783
+ .flip-clock {
816
784
  text-align: center;
817
- color: #fff;
818
- font-size: 15px;
785
+ perspective: 600px;
786
+ margin: 0 auto;
819
787
  }
820
- .unika-calendar-th > *:not(:first-child) {
821
- margin-left: 10px;
788
+
789
+ .flip-clock *,
790
+ .flip-clock *:before,
791
+ .flip-clock *:after {
792
+ box-sizing: border-box;
822
793
  }
823
- .unika-calendar-body {
824
- padding: 0;
825
- margin: 0;
826
- font-size: 0;
827
- padding: 5px 10px 0;
828
- text-align: left;
794
+
795
+ .flip-clock__piece {
796
+ display: inline-block;
797
+ margin: 0 0.2vw;
829
798
  }
830
- .unika-calendar-editor {
831
- font-size: 25px;
799
+
800
+ @media (min-width: 1000px) {
801
+ .flip-clock__piece {
802
+ margin: 0 5px;
803
+ }
832
804
  }
833
- .unika-calendar-editor span {
834
- position: relative;
835
- top: 2px;
836
- font-size: 57px;
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);
837
811
  }
838
- .unika-calendar-day {
839
- display: inline-block;
840
- width: 24px;
841
- height: 24px;
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
+ .unika-calendar-box {
962
+ position: relative;
963
+ width: 325px !important;
964
+ min-height: 300px !important;
965
+ height: auto !important;
966
+ padding-bottom: 20px;
967
+ }
968
+ .unika-calendar-title {
969
+ font-size: 25px;
970
+ padding-bottom: 4px;
971
+ }
972
+ .unika-calendar-header {
973
+ display: -webkit-box;
974
+ display: -ms-flexbox;
975
+ display: flex;
976
+ -webkit-box-pack: justify;
977
+ -ms-flex-pack: justify;
978
+ justify-content: space-between;
979
+ -webkit-box-align: end;
980
+ -ms-flex-align: end;
981
+ align-items: flex-end;
982
+ line-height: 1;
983
+ padding: 0 47px 20px;
984
+ }
985
+ .unika-calendar-header .disabled {
986
+ pointer-events: none;
987
+ color: #f0f0f0;
988
+ }
989
+ .unika-calendar-th {
990
+ display: -webkit-box;
991
+ display: -ms-flexbox;
992
+ display: flex;
993
+ -webkit-box-pack: start;
994
+ -ms-flex-pack: start;
995
+ justify-content: flex-start;
996
+ height: 25px;
997
+ line-height: 25px;
998
+ padding: 0 10px;
999
+ border-radius: 13px
1000
+ }
1001
+ .unika-calendar-th > * {
1002
+ width: 14.2%;
1003
+ text-align: center;
1004
+ color: #fff;
1005
+ font-size: 15px;
1006
+ }
1007
+ .unika-calendar-th > *:not(:first-child) {
1008
+ margin-left: 10px;
1009
+ }
1010
+ .unika-calendar-body {
1011
+ padding: 0;
1012
+ margin: 0;
1013
+ font-size: 0;
1014
+ padding: 5px 10px 0;
1015
+ text-align: left;
1016
+ }
1017
+ .unika-calendar-editor {
1018
+ font-size: 25px;
1019
+ }
1020
+ .unika-calendar-editor span {
1021
+ position: relative;
1022
+ top: 2px;
1023
+ font-size: 57px;
1024
+ }
1025
+ .unika-calendar-day {
1026
+ display: inline-block;
1027
+ width: 24px;
1028
+ height: 24px;
842
1029
  line-height: 24px;
843
1030
  text-align: center;
844
1031
  font-size: 14px;
@@ -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
- }
@@ -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);
@@ -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.311",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",