unika-components 1.0.140 → 1.0.142

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,36 +1,7 @@
1
-
2
-
3
- .uni-calendar-component {
4
-
5
- }
6
- .slot-number {
7
- position: absolute;
8
- bottom: 2px;
9
- left: 7px;
10
- font-size: 12px;
11
- color: #666
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
- }
1
+
2
+ .uni-image-component {
3
+ max-width: 100%;
4
+ }
34
5
 
35
6
  .slide-guide {
36
7
  position: absolute;
@@ -116,45 +87,38 @@ button.uni-text-component {
116
87
  box-sizing: border-box;
117
88
  white-space: pre-wrap;
118
89
  }
119
-
120
- .uni-image-component {
121
- max-width: 100%;
122
- }
123
-
124
- .swiper-warp {
125
- width: 100%;
126
- height: 100%;
127
- }
128
-
129
- .swiper-slide-component {
130
- text-align: center;
131
- }
132
90
 
133
- .swiper-slide img {
134
- max-width: 100%;
135
- max-height: 100%;
136
- }
91
+ .uni-video-component {
92
+ position: relative;
93
+ text-align: center;
94
+ }
95
+ .play-pause-button {
96
+ position: absolute;
97
+ top: 50%;
98
+ left: 50%;
99
+ transform: translate(-50%, -50%);
100
+ cursor: pointer;
101
+ font-size: 2rem;
102
+ color: #fff;
103
+ background: rgba(0, 0, 0, 0.6);
104
+ border-radius: 50%;
105
+ padding: 10px;
106
+ transition: background 0.3s;
107
+ }
108
+ .play-pause-button:hover {
109
+ background: rgba(0, 0, 0, 0.8);
110
+ }
137
111
 
138
- .like-button {
139
- display: flex;
140
- flex-direction: column;
141
- align-items: center;
142
- cursor: pointer;
143
- }
144
112
 
145
- .icon-heart {
146
- font-size: 24px;
147
- color: #e74c3c;
148
- }
113
+ .uni-calendar-component {
149
114
 
150
- .liked {
151
- color: #f00; /* 更改颜色以示已赞 */
152
115
  }
153
-
154
- .like-count {
155
- margin-top: 4px;
156
- font-size: 16px;
157
- color: #333;
116
+ .slot-number {
117
+ position: absolute;
118
+ bottom: 2px;
119
+ left: 7px;
120
+ font-size: 12px;
121
+ color: #666
158
122
  }
159
123
 
160
124
  .ant-input-number {
@@ -192,10 +156,46 @@ button.uni-text-component {
192
156
  vertical-align: top;
193
157
  }
194
158
 
159
+ .like-button {
160
+ display: flex;
161
+ flex-direction: column;
162
+ align-items: center;
163
+ cursor: pointer;
164
+ }
165
+
166
+ .icon-heart {
167
+ font-size: 24px;
168
+ color: #e74c3c;
169
+ }
170
+
171
+ .liked {
172
+ color: #f00; /* 更改颜色以示已赞 */
173
+ }
174
+
175
+ .like-count {
176
+ margin-top: 4px;
177
+ font-size: 16px;
178
+ color: #333;
179
+ }
180
+
195
181
  .effect {
196
182
  width: 100%;
197
183
  height: 100%;
198
184
  }
185
+
186
+ .swiper-warp {
187
+ width: 100%;
188
+ height: 100%;
189
+ }
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
  * Swiper 6.8.4
201
201
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -744,6 +744,199 @@ button.swiper-pagination-bullet {
744
744
  backface-visibility: hidden;
745
745
  }
746
746
 
747
+
748
+ .no-animation__card {
749
+ font-weight: 500;
750
+ font-size: var(--countdown-size, 2rem);
751
+ line-height: 1.5;
752
+ display: block;
753
+ color: var(--main-color, #EC685C);
754
+ }
755
+
756
+ .flip-clock {
757
+ text-align: center;
758
+ perspective: 600px;
759
+ margin: 0 auto;
760
+ }
761
+
762
+ .flip-clock *,
763
+ .flip-clock *:before,
764
+ .flip-clock *:after {
765
+ box-sizing: border-box;
766
+ }
767
+
768
+ .flip-clock__piece {
769
+ display: inline-block;
770
+ margin: 0 0.2vw;
771
+ }
772
+
773
+ @media (min-width: 1000px) {
774
+ .flip-clock__piece {
775
+ margin: 0 5px;
776
+ }
777
+ }
778
+
779
+ .flip-clock__slot {
780
+ font-size: var(--label-size, 1rem);
781
+ line-height: 1.5;
782
+ display: block;
783
+ color: var(--label-color, #222222);
784
+ }
785
+
786
+ .flip-card {
787
+ display: block;
788
+ position: relative;
789
+ padding-bottom: 0.72em; /* halfHeight */
790
+ font-size: var(--countdown-size, 2.25rem);
791
+ line-height: 0.95;
792
+ }
793
+
794
+ @media (min-width: 1000px) {
795
+ .flip-clock__slot {
796
+ font-size: 1.2rem;
797
+ }
798
+
799
+ .flip-card {
800
+ font-size: 3rem;
801
+ }
802
+ }
803
+
804
+ .flip-card__top,
805
+ .flip-card__bottom,
806
+ .flip-card__back-bottom,
807
+ .flip-card__back::before,
808
+ .flip-card__back::after{
809
+ display: block;
810
+ height: 0.72em; /* halfHeight */
811
+ color: var(--main-color, #EC685C);
812
+ background: var(--main-flip-background-color, #222222);
813
+ padding: 0.23em 0.15em 0.4em;
814
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
815
+ backface-visibility: hidden;
816
+ -webkit-backface-visibility: hidden;
817
+ transform-style: preserve-3d;
818
+ width: 2.1em;
819
+ }
820
+
821
+ .flip-card__top-4digits,
822
+ .flip-card__bottom-4digits,
823
+ .flip-card__back-bottom-4digits,
824
+ .flip-card__back-4digits::before,
825
+ .flip-card__back-4digits::after {
826
+ display: block;
827
+ height: 0.72em; /* halfHeight */
828
+ color: var(--main-color, #EC685C);
829
+ background: var(--main-flip-background-color, #222222);
830
+ padding: 0.23em 0.15em 0.4em;
831
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
832
+ backface-visibility: hidden;
833
+ -webkit-backface-visibility: hidden;
834
+ transform-style: preserve-3d;
835
+ width: 2.65em;
836
+ }
837
+
838
+ .flip-card__bottom,
839
+ .flip-card__back-bottom,
840
+ .flip-card__bottom-4digits,
841
+ .flip-card__back-bottom-4digits {
842
+ color: var(--second-flip-color, #EC685C);
843
+ position: absolute;
844
+ top: 50%;
845
+ left: 0;
846
+ border-top: solid 1px var(--second-flip-background-color, #000);
847
+ background: var(--second-flip-background-color, #393939);
848
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
849
+ pointer-events: none;
850
+ overflow: hidden;
851
+ z-index: 2;
852
+ }
853
+
854
+ .flip-card__back-bottom,
855
+ .flip-card__back-bottom-4digits {
856
+ z-index: 1;
857
+ }
858
+
859
+ .flip-card__bottom::after,
860
+ .flip-card__back-bottom::after,
861
+ .flip-card__bottom-4digits::after,
862
+ .flip-card__back-bottom-4digits::after {
863
+ display: block;
864
+ margin-top: -0.72em; /* Negative halfHeight */
865
+ }
866
+ .flip-card__back::before,
867
+ .flip-card__bottom::after,
868
+ .flip-card__back-bottom::after,
869
+ .flip-card__back-4digits::before,
870
+ .flip-card__bottom-4digits::after,
871
+ .flip-card__back-bottom-4digits::after {
872
+ content: attr(data-value);
873
+ }
874
+
875
+ .flip-card__back,
876
+ .flip-card__back-4digits {
877
+ position: absolute;
878
+ top: 0;
879
+ height: 100%;
880
+ left: 0%;
881
+ pointer-events: none;
882
+ }
883
+ .flip-card__back::before,
884
+ .flip-card__back-4digits::before {
885
+ position: relative;
886
+ overflow: hidden;
887
+ z-index: -1;
888
+ }
889
+
890
+ .flip .flip-card__back::before,
891
+ .flip .flip-card__back-4digits::before {
892
+ z-index: 1;
893
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
894
+ animation-fill-mode: both;
895
+ transform-origin: center bottom;
896
+ }
897
+
898
+ .flip .flip-card__bottom,
899
+ .flip .flip-card__bottom-4digits {
900
+ transform-origin: center top;
901
+ animation-fill-mode: both;
902
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
903
+ }
904
+ @keyframes flipTop {
905
+ 0% {
906
+ transform: rotateX(0deg);
907
+ z-index: 2;
908
+ }
909
+ 0%, 99% {
910
+ opacity: 1;
911
+ }
912
+ 100% {
913
+ transform: rotateX(-90deg);
914
+ opacity: 0;
915
+ }
916
+ }
917
+
918
+ @keyframes flipBottom {
919
+ 0%, 50% {
920
+ z-index: -1;
921
+ transform: rotateX(90deg);
922
+ opacity: 0;
923
+ }
924
+ 51% {
925
+ opacity: 1;
926
+ }
927
+ 100% {
928
+ opacity: 1;
929
+ transform: rotateX(0deg);
930
+ z-index: 5;
931
+ }
932
+ }
933
+
934
+ .unika-calendar-box {
935
+ position: relative;
936
+ width: 325px !important;
937
+ min-height: 325px !important;
938
+ height: auto !important;
939
+ }
747
940
  .unika-calendar-title {
748
941
  font-size: 25px;
749
942
  padding-bottom: 4px;
@@ -995,190 +1188,3 @@ button.swiper-pagination-bullet {
995
1188
  padding: 0 0px;
996
1189
  border-bottom: 1px solid
997
1190
  }
998
-
999
-
1000
- .no-animation__card {
1001
- font-weight: 500;
1002
- font-size: var(--countdown-size, 2rem);
1003
- line-height: 1.5;
1004
- display: block;
1005
- color: var(--main-color, #EC685C);
1006
- }
1007
-
1008
- .flip-clock {
1009
- text-align: center;
1010
- perspective: 600px;
1011
- margin: 0 auto;
1012
- }
1013
-
1014
- .flip-clock *,
1015
- .flip-clock *:before,
1016
- .flip-clock *:after {
1017
- box-sizing: border-box;
1018
- }
1019
-
1020
- .flip-clock__piece {
1021
- display: inline-block;
1022
- margin: 0 0.2vw;
1023
- }
1024
-
1025
- @media (min-width: 1000px) {
1026
- .flip-clock__piece {
1027
- margin: 0 5px;
1028
- }
1029
- }
1030
-
1031
- .flip-clock__slot {
1032
- font-size: var(--label-size, 1rem);
1033
- line-height: 1.5;
1034
- display: block;
1035
- color: var(--label-color, #222222);
1036
- }
1037
-
1038
- .flip-card {
1039
- display: block;
1040
- position: relative;
1041
- padding-bottom: 0.72em; /* halfHeight */
1042
- font-size: var(--countdown-size, 2.25rem);
1043
- line-height: 0.95;
1044
- }
1045
-
1046
- @media (min-width: 1000px) {
1047
- .flip-clock__slot {
1048
- font-size: 1.2rem;
1049
- }
1050
-
1051
- .flip-card {
1052
- font-size: 3rem;
1053
- }
1054
- }
1055
-
1056
- .flip-card__top,
1057
- .flip-card__bottom,
1058
- .flip-card__back-bottom,
1059
- .flip-card__back::before,
1060
- .flip-card__back::after{
1061
- display: block;
1062
- height: 0.72em; /* halfHeight */
1063
- color: var(--main-color, #EC685C);
1064
- background: var(--main-flip-background-color, #222222);
1065
- padding: 0.23em 0.15em 0.4em;
1066
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1067
- backface-visibility: hidden;
1068
- -webkit-backface-visibility: hidden;
1069
- transform-style: preserve-3d;
1070
- width: 2.1em;
1071
- }
1072
-
1073
- .flip-card__top-4digits,
1074
- .flip-card__bottom-4digits,
1075
- .flip-card__back-bottom-4digits,
1076
- .flip-card__back-4digits::before,
1077
- .flip-card__back-4digits::after {
1078
- display: block;
1079
- height: 0.72em; /* halfHeight */
1080
- color: var(--main-color, #EC685C);
1081
- background: var(--main-flip-background-color, #222222);
1082
- padding: 0.23em 0.15em 0.4em;
1083
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1084
- backface-visibility: hidden;
1085
- -webkit-backface-visibility: hidden;
1086
- transform-style: preserve-3d;
1087
- width: 2.65em;
1088
- }
1089
-
1090
- .flip-card__bottom,
1091
- .flip-card__back-bottom,
1092
- .flip-card__bottom-4digits,
1093
- .flip-card__back-bottom-4digits {
1094
- color: var(--second-flip-color, #EC685C);
1095
- position: absolute;
1096
- top: 50%;
1097
- left: 0;
1098
- border-top: solid 1px var(--second-flip-background-color, #000);
1099
- background: var(--second-flip-background-color, #393939);
1100
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1101
- pointer-events: none;
1102
- overflow: hidden;
1103
- z-index: 2;
1104
- }
1105
-
1106
- .flip-card__back-bottom,
1107
- .flip-card__back-bottom-4digits {
1108
- z-index: 1;
1109
- }
1110
-
1111
- .flip-card__bottom::after,
1112
- .flip-card__back-bottom::after,
1113
- .flip-card__bottom-4digits::after,
1114
- .flip-card__back-bottom-4digits::after {
1115
- display: block;
1116
- margin-top: -0.72em; /* Negative halfHeight */
1117
- }
1118
- .flip-card__back::before,
1119
- .flip-card__bottom::after,
1120
- .flip-card__back-bottom::after,
1121
- .flip-card__back-4digits::before,
1122
- .flip-card__bottom-4digits::after,
1123
- .flip-card__back-bottom-4digits::after {
1124
- content: attr(data-value);
1125
- }
1126
-
1127
- .flip-card__back,
1128
- .flip-card__back-4digits {
1129
- position: absolute;
1130
- top: 0;
1131
- height: 100%;
1132
- left: 0%;
1133
- pointer-events: none;
1134
- }
1135
- .flip-card__back::before,
1136
- .flip-card__back-4digits::before {
1137
- position: relative;
1138
- overflow: hidden;
1139
- z-index: -1;
1140
- }
1141
-
1142
- .flip .flip-card__back::before,
1143
- .flip .flip-card__back-4digits::before {
1144
- z-index: 1;
1145
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1146
- animation-fill-mode: both;
1147
- transform-origin: center bottom;
1148
- }
1149
-
1150
- .flip .flip-card__bottom,
1151
- .flip .flip-card__bottom-4digits {
1152
- transform-origin: center top;
1153
- animation-fill-mode: both;
1154
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1155
- }
1156
- @keyframes flipTop {
1157
- 0% {
1158
- transform: rotateX(0deg);
1159
- z-index: 2;
1160
- }
1161
- 0%, 99% {
1162
- opacity: 1;
1163
- }
1164
- 100% {
1165
- transform: rotateX(-90deg);
1166
- opacity: 0;
1167
- }
1168
- }
1169
-
1170
- @keyframes flipBottom {
1171
- 0%, 50% {
1172
- z-index: -1;
1173
- transform: rotateX(90deg);
1174
- opacity: 0;
1175
- }
1176
- 51% {
1177
- opacity: 1;
1178
- }
1179
- 100% {
1180
- opacity: 1;
1181
- transform: rotateX(0deg);
1182
- z-index: 5;
1183
- }
1184
- }
@@ -15886,7 +15886,7 @@ function render$d(_ctx, _cache, $props, $setup, $data, $options) {
15886
15886
  class: normalizeClass(`${_ctx.cp}-box`),
15887
15887
  style: normalizeStyle$1({'background-color': _ctx.backgroundColor, 'border-color': _ctx.themeColor,
15888
15888
  'border-radius': _ctx.borderRadius,'border-style': _ctx.borderStyle,'border-width': _ctx.borderWidth,
15889
- 'position': 'relative', 'width': '100%','height': 'auto!important','padding': '0.5867rem 0'})
15889
+ 'position': 'relative', 'min-height': '8.66667rem !important','height': 'auto!important'})
15890
15890
  }, [
15891
15891
  (_ctx.themeStyle == '1')
15892
15892
  ? (openBlock(), createElementBlock("div", {
@@ -16026,7 +16026,7 @@ script$c.__scopeId = "data-v-ef842ea2";
16026
16026
  script$c.__file = "src/components/UniCalendar/Calendar.vue";
16027
16027
 
16028
16028
  const defaultProps$8 = transformToComponentProps(componentsDefaultProps['uni-calendar'].props, isEditingProp);
16029
- const defaultStyles$2 = without$1(Object.keys(calendarDefaultProps), 'actionType', 'url', 'backgroundColor', 'borderRadius', 'borderColor', 'borderStyle', 'borderWidth', 'mainColor', 'mainFlipBackgroundColor', 'labelColor', 'showLabels', 'language', 'size', 'flipAnimation', 'deadline');
16029
+ const defaultStyles$2 = without$1(Object.keys(calendarDefaultProps), 'actionType', 'url', 'backgroundColor', 'borderRadius', 'borderColor', 'borderStyle', 'borderWidth', 'date', 'dateColor', 'themeColor', 'heartColor', 'themeStyle', 'language', 'size');
16030
16030
  // 获取当前日期和时间
16031
16031
  const now$2 = new Date();
16032
16032
  // 添加一天
@@ -16048,7 +16048,6 @@ var script$b = defineComponent({
16048
16048
  // 重用并且简化
16049
16049
  // 抽离并且获得 styleProps
16050
16050
  const styleProps = useStylePick(props, defaultStyles$2);
16051
- console.log(styleProps);
16052
16051
  const handleClick = useComponentClick(props);
16053
16052
  const dataList = ref([
16054
16053
  { date: '2028-01-31', value: '' }
@@ -22238,7 +22237,7 @@ script$a.__scopeId = "data-v-47d33153";
22238
22237
  script$a.__file = "src/components/UniCountdown/Countdown.vue";
22239
22238
 
22240
22239
  const defaultProps$7 = transformToComponentProps(componentsDefaultProps['uni-countdown'].props, isEditingProp);
22241
- const defaultStyles$1 = without$1(Object.keys(countdownDefaultProps), 'actionType', 'url', 'date', 'dateColor', 'themeColor', 'heartColor', 'themeStyle', 'language');
22240
+ const defaultStyles$1 = without$1(Object.keys(countdownDefaultProps), 'actionType', 'url', 'mainColor', 'mainFlipBackgroundColor', 'labelColor', 'showLabels', 'language', 'size', 'flipAnimation', 'deadline');
22242
22241
  // 获取当前日期和时间
22243
22242
  const now = new Date();
22244
22243
  // 添加一天
@@ -15893,7 +15893,7 @@
15893
15893
  class: vue.normalizeClass(`${_ctx.cp}-box`),
15894
15894
  style: vue.normalizeStyle({'background-color': _ctx.backgroundColor, 'border-color': _ctx.themeColor,
15895
15895
  'border-radius': _ctx.borderRadius,'border-style': _ctx.borderStyle,'border-width': _ctx.borderWidth,
15896
- 'position': 'relative', 'width': '100%','height': 'auto!important','padding': '0.5867rem 0'})
15896
+ 'position': 'relative', 'min-height': '8.66667rem !important','height': 'auto!important'})
15897
15897
  }, [
15898
15898
  (_ctx.themeStyle == '1')
15899
15899
  ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -16033,7 +16033,7 @@
16033
16033
  script$c.__file = "src/components/UniCalendar/Calendar.vue";
16034
16034
 
16035
16035
  const defaultProps$8 = transformToComponentProps(componentsDefaultProps['uni-calendar'].props, isEditingProp);
16036
- const defaultStyles$2 = without$1(Object.keys(calendarDefaultProps), 'actionType', 'url', 'backgroundColor', 'borderRadius', 'borderColor', 'borderStyle', 'borderWidth', 'mainColor', 'mainFlipBackgroundColor', 'labelColor', 'showLabels', 'language', 'size', 'flipAnimation', 'deadline');
16036
+ const defaultStyles$2 = without$1(Object.keys(calendarDefaultProps), 'actionType', 'url', 'backgroundColor', 'borderRadius', 'borderColor', 'borderStyle', 'borderWidth', 'date', 'dateColor', 'themeColor', 'heartColor', 'themeStyle', 'language', 'size');
16037
16037
  // 获取当前日期和时间
16038
16038
  const now$2 = new Date();
16039
16039
  // 添加一天
@@ -16055,7 +16055,6 @@
16055
16055
  // 重用并且简化
16056
16056
  // 抽离并且获得 styleProps
16057
16057
  const styleProps = useStylePick(props, defaultStyles$2);
16058
- console.log(styleProps);
16059
16058
  const handleClick = useComponentClick(props);
16060
16059
  const dataList = vue.ref([
16061
16060
  { date: '2028-01-31', value: '' }
@@ -22245,7 +22244,7 @@
22245
22244
  script$a.__file = "src/components/UniCountdown/Countdown.vue";
22246
22245
 
22247
22246
  const defaultProps$7 = transformToComponentProps(componentsDefaultProps['uni-countdown'].props, isEditingProp);
22248
- const defaultStyles$1 = without$1(Object.keys(countdownDefaultProps), 'actionType', 'url', 'date', 'dateColor', 'themeColor', 'heartColor', 'themeStyle', 'language');
22247
+ const defaultStyles$1 = without$1(Object.keys(countdownDefaultProps), 'actionType', 'url', 'mainColor', 'mainFlipBackgroundColor', 'labelColor', 'showLabels', 'language', 'size', 'flipAnimation', 'deadline');
22249
22248
  // 获取当前日期和时间
22250
22249
  const now = new Date();
22251
22250
  // 添加一天
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.140",
3
+ "version": "1.0.142",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",