unika-components 1.0.234 → 1.0.235

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.
@@ -72,10 +72,6 @@ body, html {
72
72
  }
73
73
  }
74
74
 
75
- .uni-image-component {
76
- max-width: 100%;
77
- }
78
-
79
75
  h2.uni-text-component, p.uni-text-component {
80
76
  margin-bottom: 0;
81
77
  }
@@ -108,6 +104,10 @@ button.uni-text-component {
108
104
  .play-pause-button:hover {
109
105
  background: rgba(0, 0, 0, 0.8);
110
106
  }
107
+
108
+ .uni-image-component {
109
+ max-width: 100%;
110
+ }
111
111
 
112
112
 
113
113
  .uni-calendar-component {
@@ -121,11 +121,42 @@ button.uni-text-component {
121
121
  color: #666
122
122
  }
123
123
 
124
- .effect {
124
+ .swiper-warp {
125
125
  width: 100%;
126
126
  height: 100%;
127
127
  }
128
128
 
129
+ .swiper-slide-component {
130
+ text-align: center;
131
+ }
132
+
133
+ .swiper-slide img {
134
+ max-width: 100%;
135
+ max-height: 100%;
136
+ }
137
+
138
+ .like-button {
139
+ display: flex;
140
+ flex-direction: column;
141
+ align-items: center;
142
+ cursor: pointer;
143
+ }
144
+
145
+ .icon-heart {
146
+ font-size: 24px;
147
+ color: #e74c3c;
148
+ }
149
+
150
+ .liked {
151
+ color: #f00; /* 更改颜色以示已赞 */
152
+ }
153
+
154
+ .like-count {
155
+ margin-top: 4px;
156
+ font-size: 16px;
157
+ color: #333;
158
+ }
159
+
129
160
  .ant-input-number {
130
161
  box-sizing: border-box;
131
162
  margin: 0;
@@ -161,41 +192,10 @@ button.uni-text-component {
161
192
  vertical-align: top;
162
193
  }
163
194
 
164
- .like-button {
165
- display: flex;
166
- flex-direction: column;
167
- align-items: center;
168
- cursor: pointer;
169
- }
170
-
171
- .icon-heart {
172
- font-size: 24px;
173
- color: #e74c3c;
174
- }
175
-
176
- .liked {
177
- color: #f00; /* 更改颜色以示已赞 */
178
- }
179
-
180
- .like-count {
181
- margin-top: 4px;
182
- font-size: 16px;
183
- color: #333;
184
- }
185
-
186
- .swiper-warp {
195
+ .effect {
187
196
  width: 100%;
188
197
  height: 100%;
189
198
  }
190
-
191
- .swiper-slide-component {
192
- text-align: center;
193
- }
194
-
195
- .swiper-slide img {
196
- max-width: 100%;
197
- max-height: 100%;
198
- }
199
199
 
200
200
  .uni-svg-component {
201
201
  display: inline-block;
@@ -751,193 +751,6 @@ button.swiper-pagination-bullet {
751
751
  backface-visibility: hidden;
752
752
  }
753
753
 
754
-
755
- .no-animation__card {
756
- font-weight: 500;
757
- font-size: var(--countdown-size, 2rem);
758
- line-height: 1.5;
759
- display: block;
760
- color: var(--main-color, #EC685C);
761
- }
762
-
763
- .flip-clock {
764
- text-align: center;
765
- perspective: 600px;
766
- margin: 0 auto;
767
- }
768
-
769
- .flip-clock *,
770
- .flip-clock *:before,
771
- .flip-clock *:after {
772
- box-sizing: border-box;
773
- }
774
-
775
- .flip-clock__piece {
776
- display: inline-block;
777
- margin: 0 0.2vw;
778
- }
779
-
780
- @media (min-width: 1000px) {
781
- .flip-clock__piece {
782
- margin: 0 5px;
783
- }
784
- }
785
-
786
- .flip-clock__slot {
787
- font-size: var(--label-size, 1rem);
788
- line-height: 1.5;
789
- display: block;
790
- color: var(--label-color, #222222);
791
- }
792
-
793
- .flip-card {
794
- display: block;
795
- position: relative;
796
- padding-bottom: 0.72em; /* halfHeight */
797
- font-size: var(--countdown-size, 2.25rem);
798
- line-height: 0.95;
799
- }
800
-
801
- @media (min-width: 1000px) {
802
- .flip-clock__slot {
803
- font-size: 1.2rem;
804
- }
805
-
806
- .flip-card {
807
- font-size: 3rem;
808
- }
809
- }
810
-
811
- .flip-card__top,
812
- .flip-card__bottom,
813
- .flip-card__back-bottom,
814
- .flip-card__back::before,
815
- .flip-card__back::after{
816
- display: block;
817
- height: 0.72em; /* halfHeight */
818
- color: var(--main-color, #EC685C);
819
- background: var(--main-flip-background-color, #222222);
820
- padding: 0.23em 0.15em 0.4em;
821
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
822
- backface-visibility: hidden;
823
- -webkit-backface-visibility: hidden;
824
- transform-style: preserve-3d;
825
- width: 2.1em;
826
- }
827
-
828
- .flip-card__top-4digits,
829
- .flip-card__bottom-4digits,
830
- .flip-card__back-bottom-4digits,
831
- .flip-card__back-4digits::before,
832
- .flip-card__back-4digits::after {
833
- display: block;
834
- height: 0.72em; /* halfHeight */
835
- color: var(--main-color, #EC685C);
836
- background: var(--main-flip-background-color, #222222);
837
- padding: 0.23em 0.15em 0.4em;
838
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
839
- backface-visibility: hidden;
840
- -webkit-backface-visibility: hidden;
841
- transform-style: preserve-3d;
842
- width: 2.65em;
843
- }
844
-
845
- .flip-card__bottom,
846
- .flip-card__back-bottom,
847
- .flip-card__bottom-4digits,
848
- .flip-card__back-bottom-4digits {
849
- color: var(--second-flip-color, #EC685C);
850
- position: absolute;
851
- top: 50%;
852
- left: 0;
853
- border-top: solid 1px var(--second-flip-background-color, #000);
854
- background: var(--second-flip-background-color, #393939);
855
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
856
- pointer-events: none;
857
- overflow: hidden;
858
- z-index: 2;
859
- }
860
-
861
- .flip-card__back-bottom,
862
- .flip-card__back-bottom-4digits {
863
- z-index: 1;
864
- }
865
-
866
- .flip-card__bottom::after,
867
- .flip-card__back-bottom::after,
868
- .flip-card__bottom-4digits::after,
869
- .flip-card__back-bottom-4digits::after {
870
- display: block;
871
- margin-top: -0.72em; /* Negative halfHeight */
872
- }
873
- .flip-card__back::before,
874
- .flip-card__bottom::after,
875
- .flip-card__back-bottom::after,
876
- .flip-card__back-4digits::before,
877
- .flip-card__bottom-4digits::after,
878
- .flip-card__back-bottom-4digits::after {
879
- content: attr(data-value);
880
- }
881
-
882
- .flip-card__back,
883
- .flip-card__back-4digits {
884
- position: absolute;
885
- top: 0;
886
- height: 100%;
887
- left: 0%;
888
- pointer-events: none;
889
- }
890
- .flip-card__back::before,
891
- .flip-card__back-4digits::before {
892
- position: relative;
893
- overflow: hidden;
894
- z-index: -1;
895
- }
896
-
897
- .flip .flip-card__back::before,
898
- .flip .flip-card__back-4digits::before {
899
- z-index: 1;
900
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
901
- animation-fill-mode: both;
902
- transform-origin: center bottom;
903
- }
904
-
905
- .flip .flip-card__bottom,
906
- .flip .flip-card__bottom-4digits {
907
- transform-origin: center top;
908
- animation-fill-mode: both;
909
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
910
- }
911
- @keyframes flipTop {
912
- 0% {
913
- transform: rotateX(0deg);
914
- z-index: 2;
915
- }
916
- 0%, 99% {
917
- opacity: 1;
918
- }
919
- 100% {
920
- transform: rotateX(-90deg);
921
- opacity: 0;
922
- }
923
- }
924
-
925
- @keyframes flipBottom {
926
- 0%, 50% {
927
- z-index: -1;
928
- transform: rotateX(90deg);
929
- opacity: 0;
930
- }
931
- 51% {
932
- opacity: 1;
933
- }
934
- 100% {
935
- opacity: 1;
936
- transform: rotateX(0deg);
937
- z-index: 5;
938
- }
939
- }
940
-
941
754
  .unika-calendar-box {
942
755
  position: relative;
943
756
  width: 325px !important;
@@ -1197,3 +1010,190 @@ button.swiper-pagination-bullet {
1197
1010
  padding: 0 0px;
1198
1011
  border-bottom: 1px solid
1199
1012
  }
1013
+
1014
+
1015
+ .no-animation__card {
1016
+ font-weight: 500;
1017
+ font-size: var(--countdown-size, 2rem);
1018
+ line-height: 1.5;
1019
+ display: block;
1020
+ color: var(--main-color, #EC685C);
1021
+ }
1022
+
1023
+ .flip-clock {
1024
+ text-align: center;
1025
+ perspective: 600px;
1026
+ margin: 0 auto;
1027
+ }
1028
+
1029
+ .flip-clock *,
1030
+ .flip-clock *:before,
1031
+ .flip-clock *:after {
1032
+ box-sizing: border-box;
1033
+ }
1034
+
1035
+ .flip-clock__piece {
1036
+ display: inline-block;
1037
+ margin: 0 0.2vw;
1038
+ }
1039
+
1040
+ @media (min-width: 1000px) {
1041
+ .flip-clock__piece {
1042
+ margin: 0 5px;
1043
+ }
1044
+ }
1045
+
1046
+ .flip-clock__slot {
1047
+ font-size: var(--label-size, 1rem);
1048
+ line-height: 1.5;
1049
+ display: block;
1050
+ color: var(--label-color, #222222);
1051
+ }
1052
+
1053
+ .flip-card {
1054
+ display: block;
1055
+ position: relative;
1056
+ padding-bottom: 0.72em; /* halfHeight */
1057
+ font-size: var(--countdown-size, 2.25rem);
1058
+ line-height: 0.95;
1059
+ }
1060
+
1061
+ @media (min-width: 1000px) {
1062
+ .flip-clock__slot {
1063
+ font-size: 1.2rem;
1064
+ }
1065
+
1066
+ .flip-card {
1067
+ font-size: 3rem;
1068
+ }
1069
+ }
1070
+
1071
+ .flip-card__top,
1072
+ .flip-card__bottom,
1073
+ .flip-card__back-bottom,
1074
+ .flip-card__back::before,
1075
+ .flip-card__back::after{
1076
+ display: block;
1077
+ height: 0.72em; /* halfHeight */
1078
+ color: var(--main-color, #EC685C);
1079
+ background: var(--main-flip-background-color, #222222);
1080
+ padding: 0.23em 0.15em 0.4em;
1081
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1082
+ backface-visibility: hidden;
1083
+ -webkit-backface-visibility: hidden;
1084
+ transform-style: preserve-3d;
1085
+ width: 2.1em;
1086
+ }
1087
+
1088
+ .flip-card__top-4digits,
1089
+ .flip-card__bottom-4digits,
1090
+ .flip-card__back-bottom-4digits,
1091
+ .flip-card__back-4digits::before,
1092
+ .flip-card__back-4digits::after {
1093
+ display: block;
1094
+ height: 0.72em; /* halfHeight */
1095
+ color: var(--main-color, #EC685C);
1096
+ background: var(--main-flip-background-color, #222222);
1097
+ padding: 0.23em 0.15em 0.4em;
1098
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1099
+ backface-visibility: hidden;
1100
+ -webkit-backface-visibility: hidden;
1101
+ transform-style: preserve-3d;
1102
+ width: 2.65em;
1103
+ }
1104
+
1105
+ .flip-card__bottom,
1106
+ .flip-card__back-bottom,
1107
+ .flip-card__bottom-4digits,
1108
+ .flip-card__back-bottom-4digits {
1109
+ color: var(--second-flip-color, #EC685C);
1110
+ position: absolute;
1111
+ top: 50%;
1112
+ left: 0;
1113
+ border-top: solid 1px var(--second-flip-background-color, #000);
1114
+ background: var(--second-flip-background-color, #393939);
1115
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1116
+ pointer-events: none;
1117
+ overflow: hidden;
1118
+ z-index: 2;
1119
+ }
1120
+
1121
+ .flip-card__back-bottom,
1122
+ .flip-card__back-bottom-4digits {
1123
+ z-index: 1;
1124
+ }
1125
+
1126
+ .flip-card__bottom::after,
1127
+ .flip-card__back-bottom::after,
1128
+ .flip-card__bottom-4digits::after,
1129
+ .flip-card__back-bottom-4digits::after {
1130
+ display: block;
1131
+ margin-top: -0.72em; /* Negative halfHeight */
1132
+ }
1133
+ .flip-card__back::before,
1134
+ .flip-card__bottom::after,
1135
+ .flip-card__back-bottom::after,
1136
+ .flip-card__back-4digits::before,
1137
+ .flip-card__bottom-4digits::after,
1138
+ .flip-card__back-bottom-4digits::after {
1139
+ content: attr(data-value);
1140
+ }
1141
+
1142
+ .flip-card__back,
1143
+ .flip-card__back-4digits {
1144
+ position: absolute;
1145
+ top: 0;
1146
+ height: 100%;
1147
+ left: 0%;
1148
+ pointer-events: none;
1149
+ }
1150
+ .flip-card__back::before,
1151
+ .flip-card__back-4digits::before {
1152
+ position: relative;
1153
+ overflow: hidden;
1154
+ z-index: -1;
1155
+ }
1156
+
1157
+ .flip .flip-card__back::before,
1158
+ .flip .flip-card__back-4digits::before {
1159
+ z-index: 1;
1160
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1161
+ animation-fill-mode: both;
1162
+ transform-origin: center bottom;
1163
+ }
1164
+
1165
+ .flip .flip-card__bottom,
1166
+ .flip .flip-card__bottom-4digits {
1167
+ transform-origin: center top;
1168
+ animation-fill-mode: both;
1169
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1170
+ }
1171
+ @keyframes flipTop {
1172
+ 0% {
1173
+ transform: rotateX(0deg);
1174
+ z-index: 2;
1175
+ }
1176
+ 0%, 99% {
1177
+ opacity: 1;
1178
+ }
1179
+ 100% {
1180
+ transform: rotateX(-90deg);
1181
+ opacity: 0;
1182
+ }
1183
+ }
1184
+
1185
+ @keyframes flipBottom {
1186
+ 0%, 50% {
1187
+ z-index: -1;
1188
+ transform: rotateX(90deg);
1189
+ opacity: 0;
1190
+ }
1191
+ 51% {
1192
+ opacity: 1;
1193
+ }
1194
+ 100% {
1195
+ opacity: 1;
1196
+ transform: rotateX(0deg);
1197
+ z-index: 5;
1198
+ }
1199
+ }
@@ -53964,8 +53964,8 @@ var script$6 = defineComponent({
53964
53964
  const styleProps = useStylePick(props, defaultStyles$4);
53965
53965
  const handleClick = useComponentClick(props);
53966
53966
  const useForm = Form$1.useForm;
53967
- const labelCol = { span: 22 };
53968
- const wrapperCol = { span: 22 };
53967
+ const labelCol = { span: 8 };
53968
+ const wrapperCol = { span: 14 };
53969
53969
  const modelRef = reactive({
53970
53970
  name: '',
53971
53971
  phoneNumber: '',
@@ -54047,7 +54047,8 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
54047
54047
  createVNode(_component_a_form, {
54048
54048
  "label-col": _ctx.labelCol,
54049
54049
  "wrapper-col": _ctx.wrapperCol,
54050
- style: {"padding":"5px"}
54050
+ style: {"padding":"5px"},
54051
+ layout: "vertical"
54051
54052
  }, {
54052
54053
  default: withCtx(() => [
54053
54054
  createVNode(_component_a_form_item, mergeProps({ label: "姓名" }, _ctx.validateInfos.name), {
@@ -53971,8 +53971,8 @@ summary tabindex target title type usemap value width wmode wrap`;
53971
53971
  const styleProps = useStylePick(props, defaultStyles$4);
53972
53972
  const handleClick = useComponentClick(props);
53973
53973
  const useForm = Form$1.useForm;
53974
- const labelCol = { span: 22 };
53975
- const wrapperCol = { span: 22 };
53974
+ const labelCol = { span: 8 };
53975
+ const wrapperCol = { span: 14 };
53976
53976
  const modelRef = vue.reactive({
53977
53977
  name: '',
53978
53978
  phoneNumber: '',
@@ -54054,7 +54054,8 @@ summary tabindex target title type usemap value width wmode wrap`;
54054
54054
  vue.createVNode(_component_a_form, {
54055
54055
  "label-col": _ctx.labelCol,
54056
54056
  "wrapper-col": _ctx.wrapperCol,
54057
- style: {"padding":"5px"}
54057
+ style: {"padding":"5px"},
54058
+ layout: "vertical"
54058
54059
  }, {
54059
54060
  default: vue.withCtx(() => [
54060
54061
  vue.createVNode(_component_a_form_item, vue.mergeProps({ label: "姓名" }, _ctx.validateInfos.name), {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.234",
3
+ "version": "1.0.235",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",