unika-components 1.0.222 → 1.0.225

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,3 +1,15 @@
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;
12
+ }
1
13
 
2
14
  .uni-video-component {
3
15
  position: relative;
@@ -20,6 +32,49 @@
20
32
  background: rgba(0, 0, 0, 0.8);
21
33
  }
22
34
 
35
+ .uni-image-component {
36
+ max-width: 100%;
37
+ }
38
+
39
+
40
+ .uni-calendar-component {
41
+
42
+ }
43
+ .slot-number {
44
+ position: absolute;
45
+ bottom: 2px;
46
+ left: 7px;
47
+ font-size: 12px;
48
+ color: #666
49
+ }
50
+
51
+ .effect {
52
+ width: 100%;
53
+ height: 100%;
54
+ }
55
+
56
+ .like-button {
57
+ display: flex;
58
+ flex-direction: column;
59
+ align-items: center;
60
+ cursor: pointer;
61
+ }
62
+
63
+ .icon-heart {
64
+ font-size: 24px;
65
+ color: #e74c3c;
66
+ }
67
+
68
+ .liked {
69
+ color: #f00; /* 更改颜色以示已赞 */
70
+ }
71
+
72
+ .like-count {
73
+ margin-top: 4px;
74
+ font-size: 16px;
75
+ color: #333;
76
+ }
77
+
23
78
  .slide-guide {
24
79
  position: absolute;
25
80
  bottom: 90px;
@@ -92,61 +147,6 @@ body, html {
92
147
  transform: translate3d(-50%, -50%, 0);
93
148
  }
94
149
  }
95
-
96
- h2.uni-text-component, p.uni-text-component {
97
- margin-bottom: 0;
98
- }
99
- button.uni-text-component {
100
- padding: 5px 10px;
101
- cursor: pointer;
102
- }
103
- .uni-text-component {
104
- box-sizing: border-box;
105
- white-space: pre-wrap;
106
- }
107
-
108
- .uni-image-component {
109
- max-width: 100%;
110
- }
111
-
112
-
113
- .uni-calendar-component {
114
-
115
- }
116
- .slot-number {
117
- position: absolute;
118
- bottom: 2px;
119
- left: 7px;
120
- font-size: 12px;
121
- color: #666
122
- }
123
-
124
- .effect {
125
- width: 100%;
126
- height: 100%;
127
- }
128
-
129
- .like-button {
130
- display: flex;
131
- flex-direction: column;
132
- align-items: center;
133
- cursor: pointer;
134
- }
135
-
136
- .icon-heart {
137
- font-size: 24px;
138
- color: #e74c3c;
139
- }
140
-
141
- .liked {
142
- color: #f00; /* 更改颜色以示已赞 */
143
- }
144
-
145
- .like-count {
146
- margin-top: 4px;
147
- font-size: 16px;
148
- color: #333;
149
- }
150
150
 
151
151
  .ant-input-number {
152
152
  box-sizing: border-box;
@@ -185,6 +185,10 @@ button.uni-text-component {
185
185
 
186
186
  .uni-build-up-component {
187
187
  }
188
+
189
+ .uni-svg-component {
190
+ display: inline-block;
191
+ }
188
192
 
189
193
  .swiper-warp {
190
194
  width: 100%;
@@ -199,10 +203,6 @@ button.uni-text-component {
199
203
  max-width: 100%;
200
204
  max-height: 100%;
201
205
  }
202
-
203
- .uni-svg-component {
204
- display: inline-block;
205
- }
206
206
  /**
207
207
  * Swiper 6.8.4
208
208
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -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
+ }
@@ -22474,10 +22474,9 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
22474
22474
  return (openBlock(), createElementBlock("div", {
22475
22475
  onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
22476
22476
  style: normalizeStyle$1(_ctx.styleProps),
22477
- class: "uni-map-component inner-component"
22478
- }, [
22479
- createElementVNode("div", { innerHTML: _ctx.iframeHtml }, null, 8 /* PROPS */, _hoisted_1$5)
22480
- ], 4 /* STYLE */))
22477
+ class: "uni-map-component inner-component",
22478
+ innerHTML: _ctx.iframeHtml
22479
+ }, null, 12 /* STYLE, PROPS */, _hoisted_1$5))
22481
22480
  }
22482
22481
 
22483
22482
  script$a.render = render$b;
@@ -22481,10 +22481,9 @@
22481
22481
  return (vue.openBlock(), vue.createElementBlock("div", {
22482
22482
  onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
22483
22483
  style: vue.normalizeStyle(_ctx.styleProps),
22484
- class: "uni-map-component inner-component"
22485
- }, [
22486
- vue.createElementVNode("div", { innerHTML: _ctx.iframeHtml }, null, 8 /* PROPS */, _hoisted_1$5)
22487
- ], 4 /* STYLE */))
22484
+ class: "uni-map-component inner-component",
22485
+ innerHTML: _ctx.iframeHtml
22486
+ }, null, 12 /* STYLE, PROPS */, _hoisted_1$5))
22488
22487
  }
22489
22488
 
22490
22489
  script$a.render = render$b;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.222",
3
+ "version": "1.0.225",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",