unika-components 1.0.269 → 1.0.270

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.
@@ -10,27 +10,6 @@ button.uni-text-component {
10
10
  box-sizing: border-box;
11
11
  white-space: pre-wrap;
12
12
  }
13
-
14
- .uni-video-component {
15
- position: relative;
16
- text-align: center;
17
- }
18
- .play-pause-button {
19
- position: absolute;
20
- top: 50%;
21
- left: 50%;
22
- transform: translate(-50%, -50%);
23
- cursor: pointer;
24
- font-size: 2rem;
25
- color: #fff;
26
- background: rgba(0, 0, 0, 0.6);
27
- border-radius: 50%;
28
- padding: 10px;
29
- transition: background 0.3s;
30
- }
31
- .play-pause-button:hover {
32
- background: rgba(0, 0, 0, 0.8);
33
- }
34
13
 
35
14
  .uni-image-component {
36
15
  max-width: 100%;
@@ -133,9 +112,51 @@ body, html {
133
112
  , .edit-wrapper .uni-countdown-component, .edit-wrapper .uni-calendar-component, .edit-wrapper .uni-swiper-component, .edit-wrapper .uni-effect-component, .edit-wrapper .uni-call-component, .edit-wrapper .uni-button-component, .edit-wrapper .uni-like-component , .edit-wrapper .uni-map-component,
134
113
  .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{
135
114
  position: static !important;
136
- transform: rotate(0deg) !important;
137
115
  }
138
116
 
117
+ .like-button {
118
+ display: flex;
119
+ flex-direction: column;
120
+ align-items: center;
121
+ cursor: pointer;
122
+ }
123
+
124
+ .icon-heart {
125
+ font-size: 24px;
126
+ color: #e74c3c;
127
+ }
128
+
129
+ .liked {
130
+ color: #f00; /* 更改颜色以示已赞 */
131
+ }
132
+
133
+ .like-count {
134
+ margin-top: 4px;
135
+ font-size: 16px;
136
+ color: #333;
137
+ }
138
+
139
+ .uni-video-component {
140
+ position: relative;
141
+ text-align: center;
142
+ }
143
+ .play-pause-button {
144
+ position: absolute;
145
+ top: 50%;
146
+ left: 50%;
147
+ transform: translate(-50%, -50%);
148
+ cursor: pointer;
149
+ font-size: 2rem;
150
+ color: #fff;
151
+ background: rgba(0, 0, 0, 0.6);
152
+ border-radius: 50%;
153
+ padding: 10px;
154
+ transition: background 0.3s;
155
+ }
156
+ .play-pause-button:hover {
157
+ background: rgba(0, 0, 0, 0.8);
158
+ }
159
+
139
160
  .ant-input-number {
140
161
  box-sizing: border-box;
141
162
  margin: 0;
@@ -171,31 +192,14 @@ body, html {
171
192
  vertical-align: top;
172
193
  }
173
194
 
174
- .effect {
195
+ .uni-lotties-component {
175
196
  width: 100%;
176
197
  height: 100%;
177
198
  }
178
199
 
179
- .like-button {
180
- display: flex;
181
- flex-direction: column;
182
- align-items: center;
183
- cursor: pointer;
184
- }
185
-
186
- .icon-heart {
187
- font-size: 24px;
188
- color: #e74c3c;
189
- }
190
-
191
- .liked {
192
- color: #f00; /* 更改颜色以示已赞 */
193
- }
194
-
195
- .like-count {
196
- margin-top: 4px;
197
- font-size: 16px;
198
- color: #333;
200
+ .effect {
201
+ width: 100%;
202
+ height: 100%;
199
203
  }
200
204
 
201
205
  .swiper-warp {
@@ -214,11 +218,6 @@ body, html {
214
218
 
215
219
  .uni-build-up-component {
216
220
  }
217
-
218
- .uni-lotties-component {
219
- width: 100%;
220
- height: 100%;
221
- }
222
221
 
223
222
  .uni-svg-component {
224
223
  display: inline-block;
@@ -771,193 +770,6 @@ button.swiper-pagination-bullet {
771
770
  backface-visibility: hidden;
772
771
  }
773
772
 
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
773
  .unika-calendar-box {
962
774
  position: relative;
963
775
  width: 325px !important;
@@ -1217,3 +1029,190 @@ button.swiper-pagination-bullet {
1217
1029
  padding: 0 0px;
1218
1030
  border-bottom: 1px solid
1219
1031
  }
1032
+
1033
+
1034
+ .no-animation__card {
1035
+ font-weight: 500;
1036
+ font-size: var(--countdown-size, 2rem);
1037
+ line-height: 1.5;
1038
+ display: block;
1039
+ color: var(--main-color, #EC685C);
1040
+ }
1041
+
1042
+ .flip-clock {
1043
+ text-align: center;
1044
+ perspective: 600px;
1045
+ margin: 0 auto;
1046
+ }
1047
+
1048
+ .flip-clock *,
1049
+ .flip-clock *:before,
1050
+ .flip-clock *:after {
1051
+ box-sizing: border-box;
1052
+ }
1053
+
1054
+ .flip-clock__piece {
1055
+ display: inline-block;
1056
+ margin: 0 0.2vw;
1057
+ }
1058
+
1059
+ @media (min-width: 1000px) {
1060
+ .flip-clock__piece {
1061
+ margin: 0 5px;
1062
+ }
1063
+ }
1064
+
1065
+ .flip-clock__slot {
1066
+ font-size: var(--label-size, 1rem);
1067
+ line-height: 1.5;
1068
+ display: block;
1069
+ color: var(--label-color, #222222);
1070
+ }
1071
+
1072
+ .flip-card {
1073
+ display: block;
1074
+ position: relative;
1075
+ padding-bottom: 0.72em; /* halfHeight */
1076
+ font-size: var(--countdown-size, 2.25rem);
1077
+ line-height: 0.95;
1078
+ }
1079
+
1080
+ @media (min-width: 1000px) {
1081
+ .flip-clock__slot {
1082
+ font-size: 1.2rem;
1083
+ }
1084
+
1085
+ .flip-card {
1086
+ font-size: 3rem;
1087
+ }
1088
+ }
1089
+
1090
+ .flip-card__top,
1091
+ .flip-card__bottom,
1092
+ .flip-card__back-bottom,
1093
+ .flip-card__back::before,
1094
+ .flip-card__back::after{
1095
+ display: block;
1096
+ height: 0.72em; /* halfHeight */
1097
+ color: var(--main-color, #EC685C);
1098
+ background: var(--main-flip-background-color, #222222);
1099
+ padding: 0.23em 0.15em 0.4em;
1100
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1101
+ backface-visibility: hidden;
1102
+ -webkit-backface-visibility: hidden;
1103
+ transform-style: preserve-3d;
1104
+ width: 2.1em;
1105
+ }
1106
+
1107
+ .flip-card__top-4digits,
1108
+ .flip-card__bottom-4digits,
1109
+ .flip-card__back-bottom-4digits,
1110
+ .flip-card__back-4digits::before,
1111
+ .flip-card__back-4digits::after {
1112
+ display: block;
1113
+ height: 0.72em; /* halfHeight */
1114
+ color: var(--main-color, #EC685C);
1115
+ background: var(--main-flip-background-color, #222222);
1116
+ padding: 0.23em 0.15em 0.4em;
1117
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1118
+ backface-visibility: hidden;
1119
+ -webkit-backface-visibility: hidden;
1120
+ transform-style: preserve-3d;
1121
+ width: 2.65em;
1122
+ }
1123
+
1124
+ .flip-card__bottom,
1125
+ .flip-card__back-bottom,
1126
+ .flip-card__bottom-4digits,
1127
+ .flip-card__back-bottom-4digits {
1128
+ color: var(--second-flip-color, #EC685C);
1129
+ position: absolute;
1130
+ top: 50%;
1131
+ left: 0;
1132
+ border-top: solid 1px var(--second-flip-background-color, #000);
1133
+ background: var(--second-flip-background-color, #393939);
1134
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1135
+ pointer-events: none;
1136
+ overflow: hidden;
1137
+ z-index: 2;
1138
+ }
1139
+
1140
+ .flip-card__back-bottom,
1141
+ .flip-card__back-bottom-4digits {
1142
+ z-index: 1;
1143
+ }
1144
+
1145
+ .flip-card__bottom::after,
1146
+ .flip-card__back-bottom::after,
1147
+ .flip-card__bottom-4digits::after,
1148
+ .flip-card__back-bottom-4digits::after {
1149
+ display: block;
1150
+ margin-top: -0.72em; /* Negative halfHeight */
1151
+ }
1152
+ .flip-card__back::before,
1153
+ .flip-card__bottom::after,
1154
+ .flip-card__back-bottom::after,
1155
+ .flip-card__back-4digits::before,
1156
+ .flip-card__bottom-4digits::after,
1157
+ .flip-card__back-bottom-4digits::after {
1158
+ content: attr(data-value);
1159
+ }
1160
+
1161
+ .flip-card__back,
1162
+ .flip-card__back-4digits {
1163
+ position: absolute;
1164
+ top: 0;
1165
+ height: 100%;
1166
+ left: 0%;
1167
+ pointer-events: none;
1168
+ }
1169
+ .flip-card__back::before,
1170
+ .flip-card__back-4digits::before {
1171
+ position: relative;
1172
+ overflow: hidden;
1173
+ z-index: -1;
1174
+ }
1175
+
1176
+ .flip .flip-card__back::before,
1177
+ .flip .flip-card__back-4digits::before {
1178
+ z-index: 1;
1179
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1180
+ animation-fill-mode: both;
1181
+ transform-origin: center bottom;
1182
+ }
1183
+
1184
+ .flip .flip-card__bottom,
1185
+ .flip .flip-card__bottom-4digits {
1186
+ transform-origin: center top;
1187
+ animation-fill-mode: both;
1188
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1189
+ }
1190
+ @keyframes flipTop {
1191
+ 0% {
1192
+ transform: rotateX(0deg);
1193
+ z-index: 2;
1194
+ }
1195
+ 0%, 99% {
1196
+ opacity: 1;
1197
+ }
1198
+ 100% {
1199
+ transform: rotateX(-90deg);
1200
+ opacity: 0;
1201
+ }
1202
+ }
1203
+
1204
+ @keyframes flipBottom {
1205
+ 0%, 50% {
1206
+ z-index: -1;
1207
+ transform: rotateX(90deg);
1208
+ opacity: 0;
1209
+ }
1210
+ 51% {
1211
+ opacity: 1;
1212
+ }
1213
+ 100% {
1214
+ opacity: 1;
1215
+ transform: rotateX(0deg);
1216
+ z-index: 5;
1217
+ }
1218
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.269",
3
+ "version": "1.0.270",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",