unika-components 1.0.248 → 1.0.249

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.
@@ -8,10 +8,16 @@ declare const _default: import("vue").DefineComponent<{
8
8
  WebkitMaskImage: string;
9
9
  WebkitMaskRepeat: string;
10
10
  WebkitMaskSize: string;
11
+ MaskImage: string;
12
+ MaskRepeat: string;
13
+ MaskSize: string;
11
14
  } | {
12
15
  WebkitMaskImage?: undefined;
13
16
  WebkitMaskRepeat?: undefined;
14
17
  WebkitMaskSize?: undefined;
18
+ MaskImage?: undefined;
19
+ MaskRepeat?: undefined;
20
+ MaskSize?: undefined;
15
21
  }>;
16
22
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
17
23
  [x: string]: any;
@@ -1,11 +1,4 @@
1
1
 
2
- .uni-image-component {
3
- max-width: 100%;
4
- }
5
- .uni-image-mask-wrapper {
6
- display: inline-block;
7
- }
8
-
9
2
  h2.uni-text-component, p.uni-text-component {
10
3
  margin-bottom: 0;
11
4
  }
@@ -17,6 +10,28 @@ button.uni-text-component {
17
10
  box-sizing: border-box;
18
11
  white-space: pre-wrap;
19
12
  }
13
+
14
+ .like-button {
15
+ display: flex;
16
+ flex-direction: column;
17
+ align-items: center;
18
+ cursor: pointer;
19
+ }
20
+
21
+ .icon-heart {
22
+ font-size: 24px;
23
+ color: #e74c3c;
24
+ }
25
+
26
+ .liked {
27
+ color: #f00; /* 更改颜色以示已赞 */
28
+ }
29
+
30
+ .like-count {
31
+ margin-top: 4px;
32
+ font-size: 16px;
33
+ color: #333;
34
+ }
20
35
 
21
36
  .slide-guide {
22
37
  position: absolute;
@@ -90,6 +105,30 @@ body, html {
90
105
  transform: translate3d(-50%, -50%, 0);
91
106
  }
92
107
  }
108
+
109
+ .uni-image-component {
110
+ max-width: 100%;
111
+ }
112
+ .uni-image-mask-wrapper {
113
+ display: inline-block;
114
+ }
115
+
116
+
117
+ .uni-calendar-component {
118
+
119
+ }
120
+ .slot-number {
121
+ position: absolute;
122
+ bottom: 2px;
123
+ left: 7px;
124
+ font-size: 12px;
125
+ color: #666
126
+ }
127
+
128
+ .effect {
129
+ width: 100%;
130
+ height: 100%;
131
+ }
93
132
 
94
133
  .uni-video-component {
95
134
  position: relative;
@@ -112,23 +151,6 @@ body, html {
112
151
  background: rgba(0, 0, 0, 0.8);
113
152
  }
114
153
 
115
-
116
- .uni-calendar-component {
117
-
118
- }
119
- .slot-number {
120
- position: absolute;
121
- bottom: 2px;
122
- left: 7px;
123
- font-size: 12px;
124
- color: #666
125
- }
126
-
127
- .effect {
128
- width: 100%;
129
- height: 100%;
130
- }
131
-
132
154
  .ant-input-number {
133
155
  box-sizing: border-box;
134
156
  margin: 0;
@@ -164,31 +186,6 @@ body, html {
164
186
  vertical-align: top;
165
187
  }
166
188
 
167
- .like-button {
168
- display: flex;
169
- flex-direction: column;
170
- align-items: center;
171
- cursor: pointer;
172
- }
173
-
174
- .icon-heart {
175
- font-size: 24px;
176
- color: #e74c3c;
177
- }
178
-
179
- .liked {
180
- color: #f00; /* 更改颜色以示已赞 */
181
- }
182
-
183
- .like-count {
184
- margin-top: 4px;
185
- font-size: 16px;
186
- color: #333;
187
- }
188
-
189
- .uni-build-up-component {
190
- }
191
-
192
189
  .swiper-warp {
193
190
  width: 100%;
194
191
  height: 100%;
@@ -202,6 +199,9 @@ body, html {
202
199
  max-width: 100%;
203
200
  max-height: 100%;
204
201
  }
202
+
203
+ .uni-build-up-component {
204
+ }
205
205
 
206
206
  .uni-svg-component {
207
207
  display: inline-block;
@@ -754,193 +754,6 @@ button.swiper-pagination-bullet {
754
754
  backface-visibility: hidden;
755
755
  }
756
756
 
757
-
758
- .no-animation__card {
759
- font-weight: 500;
760
- font-size: var(--countdown-size, 2rem);
761
- line-height: 1.5;
762
- display: block;
763
- color: var(--main-color, #EC685C);
764
- }
765
-
766
- .flip-clock {
767
- text-align: center;
768
- perspective: 600px;
769
- margin: 0 auto;
770
- }
771
-
772
- .flip-clock *,
773
- .flip-clock *:before,
774
- .flip-clock *:after {
775
- box-sizing: border-box;
776
- }
777
-
778
- .flip-clock__piece {
779
- display: inline-block;
780
- margin: 0 0.2vw;
781
- }
782
-
783
- @media (min-width: 1000px) {
784
- .flip-clock__piece {
785
- margin: 0 5px;
786
- }
787
- }
788
-
789
- .flip-clock__slot {
790
- font-size: var(--label-size, 1rem);
791
- line-height: 1.5;
792
- display: block;
793
- color: var(--label-color, #222222);
794
- }
795
-
796
- .flip-card {
797
- display: block;
798
- position: relative;
799
- padding-bottom: 0.72em; /* halfHeight */
800
- font-size: var(--countdown-size, 2.25rem);
801
- line-height: 0.95;
802
- }
803
-
804
- @media (min-width: 1000px) {
805
- .flip-clock__slot {
806
- font-size: 1.2rem;
807
- }
808
-
809
- .flip-card {
810
- font-size: 3rem;
811
- }
812
- }
813
-
814
- .flip-card__top,
815
- .flip-card__bottom,
816
- .flip-card__back-bottom,
817
- .flip-card__back::before,
818
- .flip-card__back::after{
819
- display: block;
820
- height: 0.72em; /* halfHeight */
821
- color: var(--main-color, #EC685C);
822
- background: var(--main-flip-background-color, #222222);
823
- padding: 0.23em 0.15em 0.4em;
824
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
825
- backface-visibility: hidden;
826
- -webkit-backface-visibility: hidden;
827
- transform-style: preserve-3d;
828
- width: 2.1em;
829
- }
830
-
831
- .flip-card__top-4digits,
832
- .flip-card__bottom-4digits,
833
- .flip-card__back-bottom-4digits,
834
- .flip-card__back-4digits::before,
835
- .flip-card__back-4digits::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.65em;
846
- }
847
-
848
- .flip-card__bottom,
849
- .flip-card__back-bottom,
850
- .flip-card__bottom-4digits,
851
- .flip-card__back-bottom-4digits {
852
- color: var(--second-flip-color, #EC685C);
853
- position: absolute;
854
- top: 50%;
855
- left: 0;
856
- border-top: solid 1px var(--second-flip-background-color, #000);
857
- background: var(--second-flip-background-color, #393939);
858
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
859
- pointer-events: none;
860
- overflow: hidden;
861
- z-index: 2;
862
- }
863
-
864
- .flip-card__back-bottom,
865
- .flip-card__back-bottom-4digits {
866
- z-index: 1;
867
- }
868
-
869
- .flip-card__bottom::after,
870
- .flip-card__back-bottom::after,
871
- .flip-card__bottom-4digits::after,
872
- .flip-card__back-bottom-4digits::after {
873
- display: block;
874
- margin-top: -0.72em; /* Negative halfHeight */
875
- }
876
- .flip-card__back::before,
877
- .flip-card__bottom::after,
878
- .flip-card__back-bottom::after,
879
- .flip-card__back-4digits::before,
880
- .flip-card__bottom-4digits::after,
881
- .flip-card__back-bottom-4digits::after {
882
- content: attr(data-value);
883
- }
884
-
885
- .flip-card__back,
886
- .flip-card__back-4digits {
887
- position: absolute;
888
- top: 0;
889
- height: 100%;
890
- left: 0%;
891
- pointer-events: none;
892
- }
893
- .flip-card__back::before,
894
- .flip-card__back-4digits::before {
895
- position: relative;
896
- overflow: hidden;
897
- z-index: -1;
898
- }
899
-
900
- .flip .flip-card__back::before,
901
- .flip .flip-card__back-4digits::before {
902
- z-index: 1;
903
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
904
- animation-fill-mode: both;
905
- transform-origin: center bottom;
906
- }
907
-
908
- .flip .flip-card__bottom,
909
- .flip .flip-card__bottom-4digits {
910
- transform-origin: center top;
911
- animation-fill-mode: both;
912
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
913
- }
914
- @keyframes flipTop {
915
- 0% {
916
- transform: rotateX(0deg);
917
- z-index: 2;
918
- }
919
- 0%, 99% {
920
- opacity: 1;
921
- }
922
- 100% {
923
- transform: rotateX(-90deg);
924
- opacity: 0;
925
- }
926
- }
927
-
928
- @keyframes flipBottom {
929
- 0%, 50% {
930
- z-index: -1;
931
- transform: rotateX(90deg);
932
- opacity: 0;
933
- }
934
- 51% {
935
- opacity: 1;
936
- }
937
- 100% {
938
- opacity: 1;
939
- transform: rotateX(0deg);
940
- z-index: 5;
941
- }
942
- }
943
-
944
757
  .unika-calendar-box {
945
758
  position: relative;
946
759
  width: 325px !important;
@@ -1200,3 +1013,190 @@ button.swiper-pagination-bullet {
1200
1013
  padding: 0 0px;
1201
1014
  border-bottom: 1px solid
1202
1015
  }
1016
+
1017
+
1018
+ .no-animation__card {
1019
+ font-weight: 500;
1020
+ font-size: var(--countdown-size, 2rem);
1021
+ line-height: 1.5;
1022
+ display: block;
1023
+ color: var(--main-color, #EC685C);
1024
+ }
1025
+
1026
+ .flip-clock {
1027
+ text-align: center;
1028
+ perspective: 600px;
1029
+ margin: 0 auto;
1030
+ }
1031
+
1032
+ .flip-clock *,
1033
+ .flip-clock *:before,
1034
+ .flip-clock *:after {
1035
+ box-sizing: border-box;
1036
+ }
1037
+
1038
+ .flip-clock__piece {
1039
+ display: inline-block;
1040
+ margin: 0 0.2vw;
1041
+ }
1042
+
1043
+ @media (min-width: 1000px) {
1044
+ .flip-clock__piece {
1045
+ margin: 0 5px;
1046
+ }
1047
+ }
1048
+
1049
+ .flip-clock__slot {
1050
+ font-size: var(--label-size, 1rem);
1051
+ line-height: 1.5;
1052
+ display: block;
1053
+ color: var(--label-color, #222222);
1054
+ }
1055
+
1056
+ .flip-card {
1057
+ display: block;
1058
+ position: relative;
1059
+ padding-bottom: 0.72em; /* halfHeight */
1060
+ font-size: var(--countdown-size, 2.25rem);
1061
+ line-height: 0.95;
1062
+ }
1063
+
1064
+ @media (min-width: 1000px) {
1065
+ .flip-clock__slot {
1066
+ font-size: 1.2rem;
1067
+ }
1068
+
1069
+ .flip-card {
1070
+ font-size: 3rem;
1071
+ }
1072
+ }
1073
+
1074
+ .flip-card__top,
1075
+ .flip-card__bottom,
1076
+ .flip-card__back-bottom,
1077
+ .flip-card__back::before,
1078
+ .flip-card__back::after{
1079
+ display: block;
1080
+ height: 0.72em; /* halfHeight */
1081
+ color: var(--main-color, #EC685C);
1082
+ background: var(--main-flip-background-color, #222222);
1083
+ padding: 0.23em 0.15em 0.4em;
1084
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1085
+ backface-visibility: hidden;
1086
+ -webkit-backface-visibility: hidden;
1087
+ transform-style: preserve-3d;
1088
+ width: 2.1em;
1089
+ }
1090
+
1091
+ .flip-card__top-4digits,
1092
+ .flip-card__bottom-4digits,
1093
+ .flip-card__back-bottom-4digits,
1094
+ .flip-card__back-4digits::before,
1095
+ .flip-card__back-4digits::after {
1096
+ display: block;
1097
+ height: 0.72em; /* halfHeight */
1098
+ color: var(--main-color, #EC685C);
1099
+ background: var(--main-flip-background-color, #222222);
1100
+ padding: 0.23em 0.15em 0.4em;
1101
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1102
+ backface-visibility: hidden;
1103
+ -webkit-backface-visibility: hidden;
1104
+ transform-style: preserve-3d;
1105
+ width: 2.65em;
1106
+ }
1107
+
1108
+ .flip-card__bottom,
1109
+ .flip-card__back-bottom,
1110
+ .flip-card__bottom-4digits,
1111
+ .flip-card__back-bottom-4digits {
1112
+ color: var(--second-flip-color, #EC685C);
1113
+ position: absolute;
1114
+ top: 50%;
1115
+ left: 0;
1116
+ border-top: solid 1px var(--second-flip-background-color, #000);
1117
+ background: var(--second-flip-background-color, #393939);
1118
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1119
+ pointer-events: none;
1120
+ overflow: hidden;
1121
+ z-index: 2;
1122
+ }
1123
+
1124
+ .flip-card__back-bottom,
1125
+ .flip-card__back-bottom-4digits {
1126
+ z-index: 1;
1127
+ }
1128
+
1129
+ .flip-card__bottom::after,
1130
+ .flip-card__back-bottom::after,
1131
+ .flip-card__bottom-4digits::after,
1132
+ .flip-card__back-bottom-4digits::after {
1133
+ display: block;
1134
+ margin-top: -0.72em; /* Negative halfHeight */
1135
+ }
1136
+ .flip-card__back::before,
1137
+ .flip-card__bottom::after,
1138
+ .flip-card__back-bottom::after,
1139
+ .flip-card__back-4digits::before,
1140
+ .flip-card__bottom-4digits::after,
1141
+ .flip-card__back-bottom-4digits::after {
1142
+ content: attr(data-value);
1143
+ }
1144
+
1145
+ .flip-card__back,
1146
+ .flip-card__back-4digits {
1147
+ position: absolute;
1148
+ top: 0;
1149
+ height: 100%;
1150
+ left: 0%;
1151
+ pointer-events: none;
1152
+ }
1153
+ .flip-card__back::before,
1154
+ .flip-card__back-4digits::before {
1155
+ position: relative;
1156
+ overflow: hidden;
1157
+ z-index: -1;
1158
+ }
1159
+
1160
+ .flip .flip-card__back::before,
1161
+ .flip .flip-card__back-4digits::before {
1162
+ z-index: 1;
1163
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1164
+ animation-fill-mode: both;
1165
+ transform-origin: center bottom;
1166
+ }
1167
+
1168
+ .flip .flip-card__bottom,
1169
+ .flip .flip-card__bottom-4digits {
1170
+ transform-origin: center top;
1171
+ animation-fill-mode: both;
1172
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1173
+ }
1174
+ @keyframes flipTop {
1175
+ 0% {
1176
+ transform: rotateX(0deg);
1177
+ z-index: 2;
1178
+ }
1179
+ 0%, 99% {
1180
+ opacity: 1;
1181
+ }
1182
+ 100% {
1183
+ transform: rotateX(-90deg);
1184
+ opacity: 0;
1185
+ }
1186
+ }
1187
+
1188
+ @keyframes flipBottom {
1189
+ 0%, 50% {
1190
+ z-index: -1;
1191
+ transform: rotateX(90deg);
1192
+ opacity: 0;
1193
+ }
1194
+ 51% {
1195
+ opacity: 1;
1196
+ }
1197
+ 100% {
1198
+ opacity: 1;
1199
+ transform: rotateX(0deg);
1200
+ z-index: 5;
1201
+ }
1202
+ }
@@ -5427,7 +5427,10 @@ var script$k = defineComponent({
5427
5427
  ? {
5428
5428
  WebkitMaskImage: `url(${props.maskImage})`,
5429
5429
  WebkitMaskRepeat: 'no-repeat',
5430
- WebkitMaskSize: 'contain'
5430
+ WebkitMaskSize: 'contain',
5431
+ MaskImage: `url(${props.maskImage})`,
5432
+ MaskRepeat: 'no-repeat',
5433
+ MaskSize: 'contain'
5431
5434
  }
5432
5435
  : {};
5433
5436
  });
@@ -5434,7 +5434,10 @@
5434
5434
  ? {
5435
5435
  WebkitMaskImage: `url(${props.maskImage})`,
5436
5436
  WebkitMaskRepeat: 'no-repeat',
5437
- WebkitMaskSize: 'contain'
5437
+ WebkitMaskSize: 'contain',
5438
+ MaskImage: `url(${props.maskImage})`,
5439
+ MaskRepeat: 'no-repeat',
5440
+ MaskSize: 'contain'
5438
5441
  }
5439
5442
  : {};
5440
5443
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.248",
3
+ "version": "1.0.249",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",