unika-components 1.0.176 → 1.0.177

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.
Files changed (4) hide show
  1. package/dist/unika-components.css +241 -241
  2. package/dist/unika-components.esm.js +7 -3
  3. package/dist/unika-components.umd.js +7 -3
  4. package/package.json +1 -1
package/dist/unika-components.css CHANGED
@@ -1,14 +1,6 @@
1
1
 
2
- h2.uni-text-component, p.uni-text-component {
3
- margin-bottom: 0;
4
- }
5
- button.uni-text-component {
6
- padding: 5px 10px;
7
- cursor: pointer;
8
- }
9
- .uni-text-component {
10
- box-sizing: border-box;
11
- white-space: pre-wrap;
2
+ .uni-image-component {
3
+ max-width: 100%;
12
4
  }
13
5
 
14
6
  .uni-video-component {
@@ -31,6 +23,30 @@ button.uni-text-component {
31
23
  .play-pause-button:hover {
32
24
  background: rgba(0, 0, 0, 0.8);
33
25
  }
26
+
27
+
28
+ .uni-calendar-component {
29
+
30
+ }
31
+ .slot-number {
32
+ position: absolute;
33
+ bottom: 2px;
34
+ left: 7px;
35
+ font-size: 12px;
36
+ color: #666
37
+ }
38
+
39
+ h2.uni-text-component, p.uni-text-component {
40
+ margin-bottom: 0;
41
+ }
42
+ button.uni-text-component {
43
+ padding: 5px 10px;
44
+ cursor: pointer;
45
+ }
46
+ .uni-text-component {
47
+ box-sizing: border-box;
48
+ white-space: pre-wrap;
49
+ }
34
50
 
35
51
  .slide-guide {
36
52
  position: absolute;
@@ -104,48 +120,26 @@ body, html {
104
120
  transform: translate3d(-50%, -50%, 0);
105
121
  }
106
122
  }
107
-
108
- .uni-image-component {
109
- max-width: 100%;
110
- }
111
-
112
- .like-button {
113
- display: flex;
114
- flex-direction: column;
115
- align-items: center;
116
- cursor: pointer;
117
- }
118
123
 
119
- .icon-heart {
120
- font-size: 24px;
121
- color: #e74c3c;
124
+ .effect {
125
+ width: 100%;
126
+ height: 100%;
122
127
  }
123
128
 
124
- .liked {
125
- color: #f00; /* 更改颜色以示已赞 */
129
+ .swiper-warp {
130
+ width: 100%;
131
+ height: 100%;
126
132
  }
127
133
 
128
- .like-count {
129
- margin-top: 4px;
130
- font-size: 16px;
131
- color: #333;
134
+ .swiper-slide-component {
135
+ text-align: center;
132
136
  }
133
137
 
134
-
135
- .uni-calendar-component {
136
-
137
- }
138
- .slot-number {
139
- position: absolute;
140
- bottom: 2px;
141
- left: 7px;
142
- font-size: 12px;
143
- color: #666
138
+ .swiper-slide img {
139
+ max-width: 100%;
140
+ max-height: 100%;
144
141
  }
145
142
 
146
- .uni-build-up-component {
147
- }
148
-
149
143
  .ant-input-number {
150
144
  box-sizing: border-box;
151
145
  margin: 0;
@@ -181,24 +175,30 @@ body, html {
181
175
  vertical-align: top;
182
176
  }
183
177
 
184
- .swiper-warp {
185
- width: 100%;
186
- height: 100%;
178
+ .like-button {
179
+ display: flex;
180
+ flex-direction: column;
181
+ align-items: center;
182
+ cursor: pointer;
187
183
  }
188
184
 
189
- .swiper-slide-component {
190
- text-align: center;
185
+ .icon-heart {
186
+ font-size: 24px;
187
+ color: #e74c3c;
191
188
  }
192
189
 
193
- .swiper-slide img {
194
- max-width: 100%;
195
- max-height: 100%;
190
+ .liked {
191
+ color: #f00; /* 更改颜色以示已赞 */
196
192
  }
197
193
 
198
- .effect {
199
- width: 100%;
200
- height: 100%;
194
+ .like-count {
195
+ margin-top: 4px;
196
+ font-size: 16px;
197
+ color: #333;
201
198
  }
199
+
200
+ .uni-build-up-component {
201
+ }
202
202
  /**
203
203
  * Swiper 6.8.4
204
204
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -747,193 +747,6 @@ button.swiper-pagination-bullet {
747
747
  backface-visibility: hidden;
748
748
  }
749
749
 
750
-
751
- .no-animation__card {
752
- font-weight: 500;
753
- font-size: var(--countdown-size, 2rem);
754
- line-height: 1.5;
755
- display: block;
756
- color: var(--main-color, #EC685C);
757
- }
758
-
759
- .flip-clock {
760
- text-align: center;
761
- perspective: 600px;
762
- margin: 0 auto;
763
- }
764
-
765
- .flip-clock *,
766
- .flip-clock *:before,
767
- .flip-clock *:after {
768
- box-sizing: border-box;
769
- }
770
-
771
- .flip-clock__piece {
772
- display: inline-block;
773
- margin: 0 0.2vw;
774
- }
775
-
776
- @media (min-width: 1000px) {
777
- .flip-clock__piece {
778
- margin: 0 5px;
779
- }
780
- }
781
-
782
- .flip-clock__slot {
783
- font-size: var(--label-size, 1rem);
784
- line-height: 1.5;
785
- display: block;
786
- color: var(--label-color, #222222);
787
- }
788
-
789
- .flip-card {
790
- display: block;
791
- position: relative;
792
- padding-bottom: 0.72em; /* halfHeight */
793
- font-size: var(--countdown-size, 2.25rem);
794
- line-height: 0.95;
795
- }
796
-
797
- @media (min-width: 1000px) {
798
- .flip-clock__slot {
799
- font-size: 1.2rem;
800
- }
801
-
802
- .flip-card {
803
- font-size: 3rem;
804
- }
805
- }
806
-
807
- .flip-card__top,
808
- .flip-card__bottom,
809
- .flip-card__back-bottom,
810
- .flip-card__back::before,
811
- .flip-card__back::after{
812
- display: block;
813
- height: 0.72em; /* halfHeight */
814
- color: var(--main-color, #EC685C);
815
- background: var(--main-flip-background-color, #222222);
816
- padding: 0.23em 0.15em 0.4em;
817
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
818
- backface-visibility: hidden;
819
- -webkit-backface-visibility: hidden;
820
- transform-style: preserve-3d;
821
- width: 2.1em;
822
- }
823
-
824
- .flip-card__top-4digits,
825
- .flip-card__bottom-4digits,
826
- .flip-card__back-bottom-4digits,
827
- .flip-card__back-4digits::before,
828
- .flip-card__back-4digits::after {
829
- display: block;
830
- height: 0.72em; /* halfHeight */
831
- color: var(--main-color, #EC685C);
832
- background: var(--main-flip-background-color, #222222);
833
- padding: 0.23em 0.15em 0.4em;
834
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
835
- backface-visibility: hidden;
836
- -webkit-backface-visibility: hidden;
837
- transform-style: preserve-3d;
838
- width: 2.65em;
839
- }
840
-
841
- .flip-card__bottom,
842
- .flip-card__back-bottom,
843
- .flip-card__bottom-4digits,
844
- .flip-card__back-bottom-4digits {
845
- color: var(--second-flip-color, #EC685C);
846
- position: absolute;
847
- top: 50%;
848
- left: 0;
849
- border-top: solid 1px var(--second-flip-background-color, #000);
850
- background: var(--second-flip-background-color, #393939);
851
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
852
- pointer-events: none;
853
- overflow: hidden;
854
- z-index: 2;
855
- }
856
-
857
- .flip-card__back-bottom,
858
- .flip-card__back-bottom-4digits {
859
- z-index: 1;
860
- }
861
-
862
- .flip-card__bottom::after,
863
- .flip-card__back-bottom::after,
864
- .flip-card__bottom-4digits::after,
865
- .flip-card__back-bottom-4digits::after {
866
- display: block;
867
- margin-top: -0.72em; /* Negative halfHeight */
868
- }
869
- .flip-card__back::before,
870
- .flip-card__bottom::after,
871
- .flip-card__back-bottom::after,
872
- .flip-card__back-4digits::before,
873
- .flip-card__bottom-4digits::after,
874
- .flip-card__back-bottom-4digits::after {
875
- content: attr(data-value);
876
- }
877
-
878
- .flip-card__back,
879
- .flip-card__back-4digits {
880
- position: absolute;
881
- top: 0;
882
- height: 100%;
883
- left: 0%;
884
- pointer-events: none;
885
- }
886
- .flip-card__back::before,
887
- .flip-card__back-4digits::before {
888
- position: relative;
889
- overflow: hidden;
890
- z-index: -1;
891
- }
892
-
893
- .flip .flip-card__back::before,
894
- .flip .flip-card__back-4digits::before {
895
- z-index: 1;
896
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
897
- animation-fill-mode: both;
898
- transform-origin: center bottom;
899
- }
900
-
901
- .flip .flip-card__bottom,
902
- .flip .flip-card__bottom-4digits {
903
- transform-origin: center top;
904
- animation-fill-mode: both;
905
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
906
- }
907
- @keyframes flipTop {
908
- 0% {
909
- transform: rotateX(0deg);
910
- z-index: 2;
911
- }
912
- 0%, 99% {
913
- opacity: 1;
914
- }
915
- 100% {
916
- transform: rotateX(-90deg);
917
- opacity: 0;
918
- }
919
- }
920
-
921
- @keyframes flipBottom {
922
- 0%, 50% {
923
- z-index: -1;
924
- transform: rotateX(90deg);
925
- opacity: 0;
926
- }
927
- 51% {
928
- opacity: 1;
929
- }
930
- 100% {
931
- opacity: 1;
932
- transform: rotateX(0deg);
933
- z-index: 5;
934
- }
935
- }
936
-
937
750
  .unika-calendar-box {
938
751
  position: relative;
939
752
  width: 325px !important;
@@ -1191,3 +1004,190 @@ button.swiper-pagination-bullet {
1191
1004
  padding: 0 0px;
1192
1005
  border-bottom: 1px solid
1193
1006
  }
1007
+
1008
+
1009
+ .no-animation__card {
1010
+ font-weight: 500;
1011
+ font-size: var(--countdown-size, 2rem);
1012
+ line-height: 1.5;
1013
+ display: block;
1014
+ color: var(--main-color, #EC685C);
1015
+ }
1016
+
1017
+ .flip-clock {
1018
+ text-align: center;
1019
+ perspective: 600px;
1020
+ margin: 0 auto;
1021
+ }
1022
+
1023
+ .flip-clock *,
1024
+ .flip-clock *:before,
1025
+ .flip-clock *:after {
1026
+ box-sizing: border-box;
1027
+ }
1028
+
1029
+ .flip-clock__piece {
1030
+ display: inline-block;
1031
+ margin: 0 0.2vw;
1032
+ }
1033
+
1034
+ @media (min-width: 1000px) {
1035
+ .flip-clock__piece {
1036
+ margin: 0 5px;
1037
+ }
1038
+ }
1039
+
1040
+ .flip-clock__slot {
1041
+ font-size: var(--label-size, 1rem);
1042
+ line-height: 1.5;
1043
+ display: block;
1044
+ color: var(--label-color, #222222);
1045
+ }
1046
+
1047
+ .flip-card {
1048
+ display: block;
1049
+ position: relative;
1050
+ padding-bottom: 0.72em; /* halfHeight */
1051
+ font-size: var(--countdown-size, 2.25rem);
1052
+ line-height: 0.95;
1053
+ }
1054
+
1055
+ @media (min-width: 1000px) {
1056
+ .flip-clock__slot {
1057
+ font-size: 1.2rem;
1058
+ }
1059
+
1060
+ .flip-card {
1061
+ font-size: 3rem;
1062
+ }
1063
+ }
1064
+
1065
+ .flip-card__top,
1066
+ .flip-card__bottom,
1067
+ .flip-card__back-bottom,
1068
+ .flip-card__back::before,
1069
+ .flip-card__back::after{
1070
+ display: block;
1071
+ height: 0.72em; /* halfHeight */
1072
+ color: var(--main-color, #EC685C);
1073
+ background: var(--main-flip-background-color, #222222);
1074
+ padding: 0.23em 0.15em 0.4em;
1075
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1076
+ backface-visibility: hidden;
1077
+ -webkit-backface-visibility: hidden;
1078
+ transform-style: preserve-3d;
1079
+ width: 2.1em;
1080
+ }
1081
+
1082
+ .flip-card__top-4digits,
1083
+ .flip-card__bottom-4digits,
1084
+ .flip-card__back-bottom-4digits,
1085
+ .flip-card__back-4digits::before,
1086
+ .flip-card__back-4digits::after {
1087
+ display: block;
1088
+ height: 0.72em; /* halfHeight */
1089
+ color: var(--main-color, #EC685C);
1090
+ background: var(--main-flip-background-color, #222222);
1091
+ padding: 0.23em 0.15em 0.4em;
1092
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1093
+ backface-visibility: hidden;
1094
+ -webkit-backface-visibility: hidden;
1095
+ transform-style: preserve-3d;
1096
+ width: 2.65em;
1097
+ }
1098
+
1099
+ .flip-card__bottom,
1100
+ .flip-card__back-bottom,
1101
+ .flip-card__bottom-4digits,
1102
+ .flip-card__back-bottom-4digits {
1103
+ color: var(--second-flip-color, #EC685C);
1104
+ position: absolute;
1105
+ top: 50%;
1106
+ left: 0;
1107
+ border-top: solid 1px var(--second-flip-background-color, #000);
1108
+ background: var(--second-flip-background-color, #393939);
1109
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1110
+ pointer-events: none;
1111
+ overflow: hidden;
1112
+ z-index: 2;
1113
+ }
1114
+
1115
+ .flip-card__back-bottom,
1116
+ .flip-card__back-bottom-4digits {
1117
+ z-index: 1;
1118
+ }
1119
+
1120
+ .flip-card__bottom::after,
1121
+ .flip-card__back-bottom::after,
1122
+ .flip-card__bottom-4digits::after,
1123
+ .flip-card__back-bottom-4digits::after {
1124
+ display: block;
1125
+ margin-top: -0.72em; /* Negative halfHeight */
1126
+ }
1127
+ .flip-card__back::before,
1128
+ .flip-card__bottom::after,
1129
+ .flip-card__back-bottom::after,
1130
+ .flip-card__back-4digits::before,
1131
+ .flip-card__bottom-4digits::after,
1132
+ .flip-card__back-bottom-4digits::after {
1133
+ content: attr(data-value);
1134
+ }
1135
+
1136
+ .flip-card__back,
1137
+ .flip-card__back-4digits {
1138
+ position: absolute;
1139
+ top: 0;
1140
+ height: 100%;
1141
+ left: 0%;
1142
+ pointer-events: none;
1143
+ }
1144
+ .flip-card__back::before,
1145
+ .flip-card__back-4digits::before {
1146
+ position: relative;
1147
+ overflow: hidden;
1148
+ z-index: -1;
1149
+ }
1150
+
1151
+ .flip .flip-card__back::before,
1152
+ .flip .flip-card__back-4digits::before {
1153
+ z-index: 1;
1154
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1155
+ animation-fill-mode: both;
1156
+ transform-origin: center bottom;
1157
+ }
1158
+
1159
+ .flip .flip-card__bottom,
1160
+ .flip .flip-card__bottom-4digits {
1161
+ transform-origin: center top;
1162
+ animation-fill-mode: both;
1163
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1164
+ }
1165
+ @keyframes flipTop {
1166
+ 0% {
1167
+ transform: rotateX(0deg);
1168
+ z-index: 2;
1169
+ }
1170
+ 0%, 99% {
1171
+ opacity: 1;
1172
+ }
1173
+ 100% {
1174
+ transform: rotateX(-90deg);
1175
+ opacity: 0;
1176
+ }
1177
+ }
1178
+
1179
+ @keyframes flipBottom {
1180
+ 0%, 50% {
1181
+ z-index: -1;
1182
+ transform: rotateX(90deg);
1183
+ opacity: 0;
1184
+ }
1185
+ 51% {
1186
+ opacity: 1;
1187
+ }
1188
+ 100% {
1189
+ opacity: 1;
1190
+ transform: rotateX(0deg);
1191
+ z-index: 5;
1192
+ }
1193
+ }
package/dist/unika-components.esm.js CHANGED
@@ -94368,9 +94368,13 @@ var script = defineComponent({
94368
94368
  }
94369
94369
  };
94370
94370
  watch(() => props.svgSrc, loadSvg, { immediate: true });
94371
- watch(() => props.color, loadSvg);
94372
- watch(() => props.width, loadSvg);
94373
- watch(() => props.height, loadSvg);
94371
+ // watch(() => props.color, loadSvg)
94372
+ // watch(() => props.width, loadSvg)
94373
+ // watch(() => props.height, loadSvg)
94374
+ // watch(() => props.delay, (newValue, oldValue) => {
94375
+ // delayC.value = newValue
94376
+ // animationLinkC.value= props.animationLink
94377
+ // }, { deep: true })
94374
94378
  return {
94375
94379
  styleProps,
94376
94380
  handleClick,
package/dist/unika-components.umd.js CHANGED
@@ -94374,9 +94374,13 @@ summary tabindex target title type usemap value width wmode wrap`;
94374
94374
  }
94375
94375
  };
94376
94376
  vue.watch(() => props.svgSrc, loadSvg, { immediate: true });
94377
- vue.watch(() => props.color, loadSvg);
94378
- vue.watch(() => props.width, loadSvg);
94379
- vue.watch(() => props.height, loadSvg);
94377
+ // watch(() => props.color, loadSvg)
94378
+ // watch(() => props.width, loadSvg)
94379
+ // watch(() => props.height, loadSvg)
94380
+ // watch(() => props.delay, (newValue, oldValue) => {
94381
+ // delayC.value = newValue
94382
+ // animationLinkC.value= props.animationLink
94383
+ // }, { deep: true })
94380
94384
  return {
94381
94385
  styleProps,
94382
94386
  handleClick,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.176",
3
+ "version": "1.0.177",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",