unika-components 1.0.199 → 1.0.200

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.
@@ -2,18 +2,28 @@
2
2
  .uni-image-component {
3
3
  max-width: 100%;
4
4
  }
5
-
6
- h2.uni-text-component, p.uni-text-component {
7
- margin-bottom: 0;
8
- }
9
- button.uni-text-component {
10
- padding: 5px 10px;
11
- cursor: pointer;
12
- }
13
- .uni-text-component {
14
- box-sizing: border-box;
15
- white-space: pre-wrap;
16
- }
5
+
6
+ .like-button {
7
+ display: flex;
8
+ flex-direction: column;
9
+ align-items: center;
10
+ cursor: pointer;
11
+ }
12
+
13
+ .icon-heart {
14
+ font-size: 24px;
15
+ color: #e74c3c;
16
+ }
17
+
18
+ .liked {
19
+ color: #f00; /* 更改颜色以示已赞 */
20
+ }
21
+
22
+ .like-count {
23
+ margin-top: 4px;
24
+ font-size: 16px;
25
+ color: #333;
26
+ }
17
27
 
18
28
  .slide-guide {
19
29
  position: absolute;
@@ -88,28 +98,6 @@ body, html {
88
98
  }
89
99
  }
90
100
 
91
- .like-button {
92
- display: flex;
93
- flex-direction: column;
94
- align-items: center;
95
- cursor: pointer;
96
- }
97
-
98
- .icon-heart {
99
- font-size: 24px;
100
- color: #e74c3c;
101
- }
102
-
103
- .liked {
104
- color: #f00; /* 更改颜色以示已赞 */
105
- }
106
-
107
- .like-count {
108
- margin-top: 4px;
109
- font-size: 16px;
110
- color: #333;
111
- }
112
-
113
101
  .uni-video-component {
114
102
  position: relative;
115
103
  text-align: center;
@@ -143,6 +131,11 @@ body, html {
143
131
  color: #666
144
132
  }
145
133
 
134
+ .effect {
135
+ width: 100%;
136
+ height: 100%;
137
+ }
138
+
146
139
  .ant-input-number {
147
140
  box-sizing: border-box;
148
141
  margin: 0;
@@ -177,11 +170,18 @@ body, html {
177
170
  margin-bottom: 0px;
178
171
  vertical-align: top;
179
172
  }
180
-
181
- .effect {
182
- width: 100%;
183
- height: 100%;
184
- }
173
+
174
+ h2.uni-text-component, p.uni-text-component {
175
+ margin-bottom: 0;
176
+ }
177
+ button.uni-text-component {
178
+ padding: 5px 10px;
179
+ cursor: pointer;
180
+ }
181
+ .uni-text-component {
182
+ box-sizing: border-box;
183
+ white-space: pre-wrap;
184
+ }
185
185
 
186
186
  .swiper-warp {
187
187
  width: 100%;
@@ -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;
@@ -1195,3 +1008,190 @@ button.swiper-pagination-bullet {
1195
1008
  padding: 0 0px;
1196
1009
  border-bottom: 1px solid
1197
1010
  }
1011
+
1012
+
1013
+ .no-animation__card {
1014
+ font-weight: 500;
1015
+ font-size: var(--countdown-size, 2rem);
1016
+ line-height: 1.5;
1017
+ display: block;
1018
+ color: var(--main-color, #EC685C);
1019
+ }
1020
+
1021
+ .flip-clock {
1022
+ text-align: center;
1023
+ perspective: 600px;
1024
+ margin: 0 auto;
1025
+ }
1026
+
1027
+ .flip-clock *,
1028
+ .flip-clock *:before,
1029
+ .flip-clock *:after {
1030
+ box-sizing: border-box;
1031
+ }
1032
+
1033
+ .flip-clock__piece {
1034
+ display: inline-block;
1035
+ margin: 0 0.2vw;
1036
+ }
1037
+
1038
+ @media (min-width: 1000px) {
1039
+ .flip-clock__piece {
1040
+ margin: 0 5px;
1041
+ }
1042
+ }
1043
+
1044
+ .flip-clock__slot {
1045
+ font-size: var(--label-size, 1rem);
1046
+ line-height: 1.5;
1047
+ display: block;
1048
+ color: var(--label-color, #222222);
1049
+ }
1050
+
1051
+ .flip-card {
1052
+ display: block;
1053
+ position: relative;
1054
+ padding-bottom: 0.72em; /* halfHeight */
1055
+ font-size: var(--countdown-size, 2.25rem);
1056
+ line-height: 0.95;
1057
+ }
1058
+
1059
+ @media (min-width: 1000px) {
1060
+ .flip-clock__slot {
1061
+ font-size: 1.2rem;
1062
+ }
1063
+
1064
+ .flip-card {
1065
+ font-size: 3rem;
1066
+ }
1067
+ }
1068
+
1069
+ .flip-card__top,
1070
+ .flip-card__bottom,
1071
+ .flip-card__back-bottom,
1072
+ .flip-card__back::before,
1073
+ .flip-card__back::after{
1074
+ display: block;
1075
+ height: 0.72em; /* halfHeight */
1076
+ color: var(--main-color, #EC685C);
1077
+ background: var(--main-flip-background-color, #222222);
1078
+ padding: 0.23em 0.15em 0.4em;
1079
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1080
+ backface-visibility: hidden;
1081
+ -webkit-backface-visibility: hidden;
1082
+ transform-style: preserve-3d;
1083
+ width: 2.1em;
1084
+ }
1085
+
1086
+ .flip-card__top-4digits,
1087
+ .flip-card__bottom-4digits,
1088
+ .flip-card__back-bottom-4digits,
1089
+ .flip-card__back-4digits::before,
1090
+ .flip-card__back-4digits::after {
1091
+ display: block;
1092
+ height: 0.72em; /* halfHeight */
1093
+ color: var(--main-color, #EC685C);
1094
+ background: var(--main-flip-background-color, #222222);
1095
+ padding: 0.23em 0.15em 0.4em;
1096
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1097
+ backface-visibility: hidden;
1098
+ -webkit-backface-visibility: hidden;
1099
+ transform-style: preserve-3d;
1100
+ width: 2.65em;
1101
+ }
1102
+
1103
+ .flip-card__bottom,
1104
+ .flip-card__back-bottom,
1105
+ .flip-card__bottom-4digits,
1106
+ .flip-card__back-bottom-4digits {
1107
+ color: var(--second-flip-color, #EC685C);
1108
+ position: absolute;
1109
+ top: 50%;
1110
+ left: 0;
1111
+ border-top: solid 1px var(--second-flip-background-color, #000);
1112
+ background: var(--second-flip-background-color, #393939);
1113
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1114
+ pointer-events: none;
1115
+ overflow: hidden;
1116
+ z-index: 2;
1117
+ }
1118
+
1119
+ .flip-card__back-bottom,
1120
+ .flip-card__back-bottom-4digits {
1121
+ z-index: 1;
1122
+ }
1123
+
1124
+ .flip-card__bottom::after,
1125
+ .flip-card__back-bottom::after,
1126
+ .flip-card__bottom-4digits::after,
1127
+ .flip-card__back-bottom-4digits::after {
1128
+ display: block;
1129
+ margin-top: -0.72em; /* Negative halfHeight */
1130
+ }
1131
+ .flip-card__back::before,
1132
+ .flip-card__bottom::after,
1133
+ .flip-card__back-bottom::after,
1134
+ .flip-card__back-4digits::before,
1135
+ .flip-card__bottom-4digits::after,
1136
+ .flip-card__back-bottom-4digits::after {
1137
+ content: attr(data-value);
1138
+ }
1139
+
1140
+ .flip-card__back,
1141
+ .flip-card__back-4digits {
1142
+ position: absolute;
1143
+ top: 0;
1144
+ height: 100%;
1145
+ left: 0%;
1146
+ pointer-events: none;
1147
+ }
1148
+ .flip-card__back::before,
1149
+ .flip-card__back-4digits::before {
1150
+ position: relative;
1151
+ overflow: hidden;
1152
+ z-index: -1;
1153
+ }
1154
+
1155
+ .flip .flip-card__back::before,
1156
+ .flip .flip-card__back-4digits::before {
1157
+ z-index: 1;
1158
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1159
+ animation-fill-mode: both;
1160
+ transform-origin: center bottom;
1161
+ }
1162
+
1163
+ .flip .flip-card__bottom,
1164
+ .flip .flip-card__bottom-4digits {
1165
+ transform-origin: center top;
1166
+ animation-fill-mode: both;
1167
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1168
+ }
1169
+ @keyframes flipTop {
1170
+ 0% {
1171
+ transform: rotateX(0deg);
1172
+ z-index: 2;
1173
+ }
1174
+ 0%, 99% {
1175
+ opacity: 1;
1176
+ }
1177
+ 100% {
1178
+ transform: rotateX(-90deg);
1179
+ opacity: 0;
1180
+ }
1181
+ }
1182
+
1183
+ @keyframes flipBottom {
1184
+ 0%, 50% {
1185
+ z-index: -1;
1186
+ transform: rotateX(90deg);
1187
+ opacity: 0;
1188
+ }
1189
+ 51% {
1190
+ opacity: 1;
1191
+ }
1192
+ 100% {
1193
+ opacity: 1;
1194
+ transform: rotateX(0deg);
1195
+ z-index: 5;
1196
+ }
1197
+ }
@@ -13124,17 +13124,16 @@ var script$h = defineComponent({
13124
13124
  });
13125
13125
 
13126
13126
  const _hoisted_1$a = { style: {"width":"100%","height":"100%"} };
13127
- const _hoisted_2$3 = ["id"];
13128
- const _hoisted_3$3 = {
13127
+ const _hoisted_2$3 = {
13129
13128
  key: 0,
13130
13129
  class: "up-arrow"
13131
13130
  };
13132
- const _hoisted_4$2 = /*#__PURE__*/createElementVNode("img", {
13131
+ const _hoisted_3$3 = /*#__PURE__*/createElementVNode("img", {
13133
13132
  src: "https://img1.maka.im/assets/usual/slideguide-3-view.png",
13134
13133
  alt: ""
13135
13134
  }, null, -1 /* HOISTED */);
13136
- const _hoisted_5$2 = [
13137
- _hoisted_4$2
13135
+ const _hoisted_4$2 = [
13136
+ _hoisted_3$3
13138
13137
  ];
13139
13138
 
13140
13139
  function render$i(_ctx, _cache, $props, $setup, $data, $options) {
@@ -13164,15 +13163,17 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
13164
13163
  (openBlock(true), createElementBlock(Fragment, null, renderList(page.components, (item) => {
13165
13164
  return (openBlock(), createElementBlock("div", {
13166
13165
  key: item.id,
13167
- ref_for: true,
13168
- ref: _ctx.setComponentRef,
13169
- id: `component-${item.id}`,
13170
13166
  style: {"width":"100%","height":"100%"}
13171
13167
  }, [
13172
13168
  (item.name != 'uni-build-up')
13173
- ? (openBlock(), createBlock(resolveDynamicComponent(item.name), normalizeProps(mergeProps({ key: 0 }, item.props)), null, 16 /* FULL_PROPS */))
13169
+ ? (openBlock(), createBlock(resolveDynamicComponent(item.name), mergeProps({
13170
+ key: 0,
13171
+ ref_for: true,
13172
+ ref: _ctx.setComponentRef,
13173
+ id: `component-${item.id}`
13174
+ }, item.props), null, 16 /* FULL_PROPS */, ["id"]))
13174
13175
  : createCommentVNode("v-if", true)
13175
- ], 8 /* PROPS */, _hoisted_2$3))
13176
+ ]))
13176
13177
  }), 128 /* KEYED_FRAGMENT */))
13177
13178
  ], 4 /* STYLE */)
13178
13179
  ]),
@@ -13183,7 +13184,7 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
13183
13184
  _: 1 /* STABLE */
13184
13185
  }, 8 /* PROPS */, ["modules", "effect", "direction", "onSwiper", "onSlideChange"]),
13185
13186
  (_ctx.upArrow)
13186
- ? (openBlock(), createElementBlock("button", _hoisted_3$3, [..._hoisted_5$2]))
13187
+ ? (openBlock(), createElementBlock("button", _hoisted_2$3, [..._hoisted_4$2]))
13187
13188
  : createCommentVNode("v-if", true)
13188
13189
  ]))
13189
13190
  }
@@ -13131,17 +13131,16 @@
13131
13131
  });
13132
13132
 
13133
13133
  const _hoisted_1$a = { style: {"width":"100%","height":"100%"} };
13134
- const _hoisted_2$3 = ["id"];
13135
- const _hoisted_3$3 = {
13134
+ const _hoisted_2$3 = {
13136
13135
  key: 0,
13137
13136
  class: "up-arrow"
13138
13137
  };
13139
- const _hoisted_4$2 = /*#__PURE__*/vue.createElementVNode("img", {
13138
+ const _hoisted_3$3 = /*#__PURE__*/vue.createElementVNode("img", {
13140
13139
  src: "https://img1.maka.im/assets/usual/slideguide-3-view.png",
13141
13140
  alt: ""
13142
13141
  }, null, -1 /* HOISTED */);
13143
- const _hoisted_5$2 = [
13144
- _hoisted_4$2
13142
+ const _hoisted_4$2 = [
13143
+ _hoisted_3$3
13145
13144
  ];
13146
13145
 
13147
13146
  function render$i(_ctx, _cache, $props, $setup, $data, $options) {
@@ -13171,15 +13170,17 @@
13171
13170
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(page.components, (item) => {
13172
13171
  return (vue.openBlock(), vue.createElementBlock("div", {
13173
13172
  key: item.id,
13174
- ref_for: true,
13175
- ref: _ctx.setComponentRef,
13176
- id: `component-${item.id}`,
13177
13173
  style: {"width":"100%","height":"100%"}
13178
13174
  }, [
13179
13175
  (item.name != 'uni-build-up')
13180
- ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.normalizeProps(vue.mergeProps({ key: 0 }, item.props)), null, 16 /* FULL_PROPS */))
13176
+ ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.mergeProps({
13177
+ key: 0,
13178
+ ref_for: true,
13179
+ ref: _ctx.setComponentRef,
13180
+ id: `component-${item.id}`
13181
+ }, item.props), null, 16 /* FULL_PROPS */, ["id"]))
13181
13182
  : vue.createCommentVNode("v-if", true)
13182
- ], 8 /* PROPS */, _hoisted_2$3))
13183
+ ]))
13183
13184
  }), 128 /* KEYED_FRAGMENT */))
13184
13185
  ], 4 /* STYLE */)
13185
13186
  ]),
@@ -13190,7 +13191,7 @@
13190
13191
  _: 1 /* STABLE */
13191
13192
  }, 8 /* PROPS */, ["modules", "effect", "direction", "onSwiper", "onSlideChange"]),
13192
13193
  (_ctx.upArrow)
13193
- ? (vue.openBlock(), vue.createElementBlock("button", _hoisted_3$3, [..._hoisted_5$2]))
13194
+ ? (vue.openBlock(), vue.createElementBlock("button", _hoisted_2$3, [..._hoisted_4$2]))
13194
13195
  : vue.createCommentVNode("v-if", true)
13195
13196
  ]))
13196
13197
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.199",
3
+ "version": "1.0.200",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",