unika-components 1.0.309 → 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,35 +1,3 @@
1
-
2
- .uni-image-component {
3
- max-width: 100%;
4
- }
5
- .uni-image-mask-wrapper {
6
- display: inline-block;
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
-
22
-
23
- .uni-calendar-component {
24
-
25
- }
26
- .slot-number {
27
- position: absolute;
28
- bottom: 2px;
29
- left: 7px;
30
- font-size: 12px;
31
- color: #666
32
- }
33
1
 
34
2
  .uni-video-component {
35
3
  position: relative;
@@ -52,28 +20,31 @@ button.uni-text-component {
52
20
  background: rgba(0, 0, 0, 0.8);
53
21
  }
54
22
 
55
- .like-button {
56
- display: flex;
57
- flex-direction: column;
58
- align-items: center;
59
- cursor: pointer;
60
- }
61
23
 
62
- .icon-heart {
63
- font-size: 24px;
64
- color: #e74c3c;
65
- }
24
+ .uni-calendar-component {
66
25
 
67
- .liked {
68
- color: #f00; /* 更改颜色以示已赞 */
69
26
  }
70
-
71
- .like-count {
72
- margin-top: 4px;
73
- font-size: 16px;
74
- color: #333;
27
+ .slot-number {
28
+ position: absolute;
29
+ bottom: 2px;
30
+ left: 7px;
31
+ font-size: 12px;
32
+ color: #666
75
33
  }
76
34
 
35
+ h2.uni-text-component, p.uni-text-component {
36
+ margin-top: 0;
37
+ margin-bottom: 0;
38
+ }
39
+ button.uni-text-component {
40
+ padding: 5px 10px;
41
+ cursor: pointer;
42
+ }
43
+ .uni-text-component {
44
+ box-sizing: border-box;
45
+ white-space: pre-wrap;
46
+ }
47
+
77
48
  .slide-guide {
78
49
  position: absolute;
79
50
  bottom: 90px;
@@ -157,12 +128,22 @@ body, html {
157
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{
158
129
  position: static !important;
159
130
  }
131
+
132
+ .uni-image-component {
133
+ max-width: 100%;
134
+ }
135
+ .uni-image-mask-wrapper {
136
+ display: inline-block;
137
+ }
160
138
 
161
139
  .effect {
162
140
  width: 100%;
163
141
  height: 100%;
164
142
  }
165
143
 
144
+ .uni-build-up-component {
145
+ }
146
+
166
147
  .ant-input-number {
167
148
  box-sizing: border-box;
168
149
  margin: 0;
@@ -198,14 +179,37 @@ body, html {
198
179
  vertical-align: top;
199
180
  }
200
181
 
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
+
201
208
  .uni-lotties-component {
202
209
  width: 100%;
203
210
  height: 100%;
204
211
  }
205
212
 
206
- .uni-build-up-component {
207
- }
208
-
209
213
  .swiper-warp {
210
214
  width: 100%;
211
215
  height: 100%;
@@ -219,10 +223,6 @@ body, html {
219
223
  max-width: 100%;
220
224
  max-height: 100%;
221
225
  }
222
-
223
- .uni-svg-component {
224
- display: inline-block;
225
- }
226
226
  /**
227
227
  * Swiper 6.8.4
228
228
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -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
- }
@@ -13417,19 +13417,29 @@ 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
- switchPage(currentPage.value);
13423
- sendPageInfo();
13424
13422
  }
13423
+ else {
13424
+ currentPage.value = 0;
13425
+ }
13426
+ console.log('翻到下一页');
13427
+ console.log(currentPage.value);
13428
+ switchPage(currentPage.value);
13429
+ sendPageInfo();
13425
13430
  };
13426
13431
  // 翻到上一页
13427
13432
  const flipToPreviousPage = () => {
13428
13433
  if (currentPage.value > 1) {
13429
13434
  currentPage.value--;
13430
- switchPage(currentPage.value);
13431
- sendPageInfo();
13432
13435
  }
13436
+ else {
13437
+ currentPage.value = totalPages.value - 1;
13438
+ }
13439
+ console.log('翻到上一页');
13440
+ console.log(currentPage.value);
13441
+ switchPage(currentPage.value);
13442
+ sendPageInfo();
13433
13443
  };
13434
13444
  // 将当前页码信息发送回父组件
13435
13445
  const sendPageInfo = () => {
@@ -13504,7 +13514,7 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
13504
13514
  createCommentVNode(" :controller=\"{ control: controlledSwiper }\""),
13505
13515
  createCommentVNode(" :autoplay=\"{delay:15000,disableOnInteraction:false}\">"),
13506
13516
  createVNode(_component_swiper, {
13507
- loop: false,
13517
+ loop: true,
13508
13518
  class: "swiper-container",
13509
13519
  modules: _ctx.modules,
13510
13520
  effect: _ctx.work.effect,
@@ -13424,19 +13424,29 @@
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
- switchPage(currentPage.value);
13430
- sendPageInfo();
13431
13429
  }
13430
+ else {
13431
+ currentPage.value = 0;
13432
+ }
13433
+ console.log('翻到下一页');
13434
+ console.log(currentPage.value);
13435
+ switchPage(currentPage.value);
13436
+ sendPageInfo();
13432
13437
  };
13433
13438
  // 翻到上一页
13434
13439
  const flipToPreviousPage = () => {
13435
13440
  if (currentPage.value > 1) {
13436
13441
  currentPage.value--;
13437
- switchPage(currentPage.value);
13438
- sendPageInfo();
13439
13442
  }
13443
+ else {
13444
+ currentPage.value = totalPages.value - 1;
13445
+ }
13446
+ console.log('翻到上一页');
13447
+ console.log(currentPage.value);
13448
+ switchPage(currentPage.value);
13449
+ sendPageInfo();
13440
13450
  };
13441
13451
  // 将当前页码信息发送回父组件
13442
13452
  const sendPageInfo = () => {
@@ -13511,7 +13521,7 @@
13511
13521
  vue.createCommentVNode(" :controller=\"{ control: controlledSwiper }\""),
13512
13522
  vue.createCommentVNode(" :autoplay=\"{delay:15000,disableOnInteraction:false}\">"),
13513
13523
  vue.createVNode(_component_swiper, {
13514
- loop: false,
13524
+ loop: true,
13515
13525
  class: "swiper-container",
13516
13526
  modules: _ctx.modules,
13517
13527
  effect: _ctx.work.effect,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.309",
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",