unika-components 1.0.126 → 1.0.127

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,4 +1,8 @@
1
1
 
2
+ .uni-image-component {
3
+ max-width: 100%;
4
+ }
5
+
2
6
  h2.uni-text-component, p.uni-text-component {
3
7
  margin-bottom: 0;
4
8
  }
@@ -10,6 +14,49 @@ button.uni-text-component {
10
14
  box-sizing: border-box;
11
15
  white-space: pre-wrap;
12
16
  }
17
+
18
+ .like-button {
19
+ display: flex;
20
+ flex-direction: column;
21
+ align-items: center;
22
+ cursor: pointer;
23
+ }
24
+
25
+ .icon-heart {
26
+ font-size: 24px;
27
+ color: #e74c3c;
28
+ }
29
+
30
+ .liked {
31
+ color: #f00; /* 更改颜色以示已赞 */
32
+ }
33
+
34
+ .like-count {
35
+ margin-top: 4px;
36
+ font-size: 16px;
37
+ color: #333;
38
+ }
39
+
40
+ .uni-video-component {
41
+ position: relative;
42
+ text-align: center;
43
+ }
44
+ .play-pause-button {
45
+ position: absolute;
46
+ top: 50%;
47
+ left: 50%;
48
+ transform: translate(-50%, -50%);
49
+ cursor: pointer;
50
+ font-size: 2rem;
51
+ color: #fff;
52
+ background: rgba(0, 0, 0, 0.6);
53
+ border-radius: 50%;
54
+ padding: 10px;
55
+ transition: background 0.3s;
56
+ }
57
+ .play-pause-button:hover {
58
+ background: rgba(0, 0, 0, 0.8);
59
+ }
13
60
 
14
61
  .slide-guide {
15
62
  position: absolute;
@@ -84,80 +131,6 @@ body, html {
84
131
  }
85
132
  }
86
133
 
87
- .uni-video-component {
88
- position: relative;
89
- text-align: center;
90
- }
91
- .play-pause-button {
92
- position: absolute;
93
- top: 50%;
94
- left: 50%;
95
- transform: translate(-50%, -50%);
96
- cursor: pointer;
97
- font-size: 2rem;
98
- color: #fff;
99
- background: rgba(0, 0, 0, 0.6);
100
- border-radius: 50%;
101
- padding: 10px;
102
- transition: background 0.3s;
103
- }
104
- .play-pause-button:hover {
105
- background: rgba(0, 0, 0, 0.8);
106
- }
107
-
108
- .uni-image-component {
109
- max-width: 100%;
110
- }
111
-
112
- .slot-number {
113
- position: absolute;
114
- bottom: 2px;
115
- left: 7px;
116
- font-size: 12px;
117
- color: #666
118
- }
119
-
120
- .effect {
121
- width: 100%;
122
- height: 100%;
123
- }
124
-
125
- .swiper-warp {
126
- width: 100%;
127
- height: 100%;
128
- }
129
-
130
- .swiper-slide-component {
131
- text-align: center;
132
- }
133
-
134
- .swiper-slide img {
135
- max-width: 100%;
136
- max-height: 100%;
137
- }
138
-
139
- .like-button {
140
- display: flex;
141
- flex-direction: column;
142
- align-items: center;
143
- cursor: pointer;
144
- }
145
-
146
- .icon-heart {
147
- font-size: 24px;
148
- color: #e74c3c;
149
- }
150
-
151
- .liked {
152
- color: #f00; /* 更改颜色以示已赞 */
153
- }
154
-
155
- .like-count {
156
- margin-top: 4px;
157
- font-size: 16px;
158
- color: #333;
159
- }
160
-
161
134
  .ant-input-number {
162
135
  box-sizing: border-box;
163
136
  margin: 0;
@@ -192,6 +165,33 @@ body, html {
192
165
  margin-bottom: 0px;
193
166
  vertical-align: top;
194
167
  }
168
+
169
+ .swiper-warp {
170
+ width: 100%;
171
+ height: 100%;
172
+ }
173
+
174
+ .swiper-slide-component {
175
+ text-align: center;
176
+ }
177
+
178
+ .swiper-slide img {
179
+ max-width: 100%;
180
+ max-height: 100%;
181
+ }
182
+
183
+ .slot-number {
184
+ position: absolute;
185
+ bottom: 2px;
186
+ left: 7px;
187
+ font-size: 12px;
188
+ color: #666
189
+ }
190
+
191
+ .effect {
192
+ width: 100%;
193
+ height: 100%;
194
+ }
195
195
  /**
196
196
  * Swiper 6.8.4
197
197
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -740,88 +740,275 @@ button.swiper-pagination-bullet {
740
740
  backface-visibility: hidden;
741
741
  }
742
742
 
743
- .unika-calendar-title {
744
- font-size: 25px;
745
- padding-bottom: 4px;
746
- }
747
- .unika-calendar-header {
748
- display: -webkit-box;
749
- display: -ms-flexbox;
750
- display: flex;
751
- -webkit-box-pack: justify;
752
- -ms-flex-pack: justify;
753
- justify-content: space-between;
754
- -webkit-box-align: end;
755
- -ms-flex-align: end;
756
- align-items: flex-end;
757
- line-height: 1;
758
- padding: 0 47px 20px;
759
- }
760
- .unika-calendar-header .disabled {
761
- pointer-events: none;
762
- color: #f0f0f0;
763
- }
764
- .unika-calendar-th {
765
- display: -webkit-box;
766
- display: -ms-flexbox;
767
- display: flex;
768
- -webkit-box-pack: start;
769
- -ms-flex-pack: start;
770
- justify-content: flex-start;
771
- height: 25px;
772
- line-height: 25px;
773
- padding: 0 10px;
774
- border-radius: 13px
743
+
744
+ .no-animation__card {
745
+ font-weight: 500;
746
+ font-size: var(--countdown-size, 2rem);
747
+ line-height: 1.5;
748
+ display: block;
749
+ color: var(--main-color, #EC685C);
775
750
  }
776
- .unika-calendar-th > * {
777
- width: 14.2%;
751
+
752
+ .flip-clock {
778
753
  text-align: center;
779
- color: #fff;
780
- font-size: 15px;
781
- }
782
- .unika-calendar-th > *:not(:first-child) {
783
- margin-left: 10px;
784
- }
785
- .unika-calendar-body {
786
- padding: 0;
787
- margin: 0;
788
- font-size: 0;
789
- padding: 5px 10px 0;
790
- text-align: left;
791
- }
792
- .unika-calendar-editor {
793
- font-size: 25px;
754
+ perspective: 600px;
755
+ margin: 0 auto;
794
756
  }
795
- .unika-calendar-editor span {
796
- position: relative;
797
- top: 2px;
798
- font-size: 57px;
757
+
758
+ .flip-clock *,
759
+ .flip-clock *:before,
760
+ .flip-clock *:after {
761
+ box-sizing: border-box;
799
762
  }
800
- .unika-calendar-day {
763
+
764
+ .flip-clock__piece {
801
765
  display: inline-block;
802
- width: 24px;
803
- height: 24px;
804
- line-height: 24px;
805
- text-align: center;
806
- font-size: 14px;
807
- position: absolute;
808
- border-radius: 50%;
766
+ margin: 0 0.2vw;
809
767
  }
810
- .unika-calendar-row {
811
- display: flex;
768
+
769
+ @media (min-width: 1000px) {
770
+ .flip-clock__piece {
771
+ margin: 0 5px;
772
+ }
812
773
  }
813
- .unika-calendar-row:not(:last-child) {
814
- margin-bottom: 10px;
774
+
775
+ .flip-clock__slot {
776
+ font-size: var(--label-size, 1rem);
777
+ line-height: 1.5;
778
+ display: block;
779
+ color: var(--label-color, #222222);
815
780
  }
816
- .unika-calendar-row > * {
817
- flex: 1;
818
- padding: 2px;
819
- height: 28px;
820
- box-sizing: border-box;
781
+
782
+ .flip-card {
783
+ display: block;
821
784
  position: relative;
785
+ padding-bottom: 0.72em; /* halfHeight */
786
+ font-size: var(--countdown-size, 2.25rem);
787
+ line-height: 0.95;
822
788
  }
823
- /*.unika-calendar-row > *.color-grey {
824
- background-color: #EBF1F9;
789
+
790
+ @media (min-width: 1000px) {
791
+ .flip-clock__slot {
792
+ font-size: 1.2rem;
793
+ }
794
+
795
+ .flip-card {
796
+ font-size: 3rem;
797
+ }
798
+ }
799
+
800
+ .flip-card__top,
801
+ .flip-card__bottom,
802
+ .flip-card__back-bottom,
803
+ .flip-card__back::before,
804
+ .flip-card__back::after{
805
+ display: block;
806
+ height: 0.72em; /* halfHeight */
807
+ color: var(--main-color, #EC685C);
808
+ background: var(--main-flip-background-color, #222222);
809
+ padding: 0.23em 0.15em 0.4em;
810
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
811
+ backface-visibility: hidden;
812
+ -webkit-backface-visibility: hidden;
813
+ transform-style: preserve-3d;
814
+ width: 2.1em;
815
+ }
816
+
817
+ .flip-card__top-4digits,
818
+ .flip-card__bottom-4digits,
819
+ .flip-card__back-bottom-4digits,
820
+ .flip-card__back-4digits::before,
821
+ .flip-card__back-4digits::after {
822
+ display: block;
823
+ height: 0.72em; /* halfHeight */
824
+ color: var(--main-color, #EC685C);
825
+ background: var(--main-flip-background-color, #222222);
826
+ padding: 0.23em 0.15em 0.4em;
827
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
828
+ backface-visibility: hidden;
829
+ -webkit-backface-visibility: hidden;
830
+ transform-style: preserve-3d;
831
+ width: 2.65em;
832
+ }
833
+
834
+ .flip-card__bottom,
835
+ .flip-card__back-bottom,
836
+ .flip-card__bottom-4digits,
837
+ .flip-card__back-bottom-4digits {
838
+ color: var(--second-flip-color, #EC685C);
839
+ position: absolute;
840
+ top: 50%;
841
+ left: 0;
842
+ border-top: solid 1px var(--second-flip-background-color, #000);
843
+ background: var(--second-flip-background-color, #393939);
844
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
845
+ pointer-events: none;
846
+ overflow: hidden;
847
+ z-index: 2;
848
+ }
849
+
850
+ .flip-card__back-bottom,
851
+ .flip-card__back-bottom-4digits {
852
+ z-index: 1;
853
+ }
854
+
855
+ .flip-card__bottom::after,
856
+ .flip-card__back-bottom::after,
857
+ .flip-card__bottom-4digits::after,
858
+ .flip-card__back-bottom-4digits::after {
859
+ display: block;
860
+ margin-top: -0.72em; /* Negative halfHeight */
861
+ }
862
+ .flip-card__back::before,
863
+ .flip-card__bottom::after,
864
+ .flip-card__back-bottom::after,
865
+ .flip-card__back-4digits::before,
866
+ .flip-card__bottom-4digits::after,
867
+ .flip-card__back-bottom-4digits::after {
868
+ content: attr(data-value);
869
+ }
870
+
871
+ .flip-card__back,
872
+ .flip-card__back-4digits {
873
+ position: absolute;
874
+ top: 0;
875
+ height: 100%;
876
+ left: 0%;
877
+ pointer-events: none;
878
+ }
879
+ .flip-card__back::before,
880
+ .flip-card__back-4digits::before {
881
+ position: relative;
882
+ overflow: hidden;
883
+ z-index: -1;
884
+ }
885
+
886
+ .flip .flip-card__back::before,
887
+ .flip .flip-card__back-4digits::before {
888
+ z-index: 1;
889
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
890
+ animation-fill-mode: both;
891
+ transform-origin: center bottom;
892
+ }
893
+
894
+ .flip .flip-card__bottom,
895
+ .flip .flip-card__bottom-4digits {
896
+ transform-origin: center top;
897
+ animation-fill-mode: both;
898
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
899
+ }
900
+ @keyframes flipTop {
901
+ 0% {
902
+ transform: rotateX(0deg);
903
+ z-index: 2;
904
+ }
905
+ 0%, 99% {
906
+ opacity: 1;
907
+ }
908
+ 100% {
909
+ transform: rotateX(-90deg);
910
+ opacity: 0;
911
+ }
912
+ }
913
+
914
+ @keyframes flipBottom {
915
+ 0%, 50% {
916
+ z-index: -1;
917
+ transform: rotateX(90deg);
918
+ opacity: 0;
919
+ }
920
+ 51% {
921
+ opacity: 1;
922
+ }
923
+ 100% {
924
+ opacity: 1;
925
+ transform: rotateX(0deg);
926
+ z-index: 5;
927
+ }
928
+ }
929
+
930
+ .unika-calendar-title {
931
+ font-size: 25px;
932
+ padding-bottom: 4px;
933
+ }
934
+ .unika-calendar-header {
935
+ display: -webkit-box;
936
+ display: -ms-flexbox;
937
+ display: flex;
938
+ -webkit-box-pack: justify;
939
+ -ms-flex-pack: justify;
940
+ justify-content: space-between;
941
+ -webkit-box-align: end;
942
+ -ms-flex-align: end;
943
+ align-items: flex-end;
944
+ line-height: 1;
945
+ padding: 0 47px 20px;
946
+ }
947
+ .unika-calendar-header .disabled {
948
+ pointer-events: none;
949
+ color: #f0f0f0;
950
+ }
951
+ .unika-calendar-th {
952
+ display: -webkit-box;
953
+ display: -ms-flexbox;
954
+ display: flex;
955
+ -webkit-box-pack: start;
956
+ -ms-flex-pack: start;
957
+ justify-content: flex-start;
958
+ height: 25px;
959
+ line-height: 25px;
960
+ padding: 0 10px;
961
+ border-radius: 13px
962
+ }
963
+ .unika-calendar-th > * {
964
+ width: 14.2%;
965
+ text-align: center;
966
+ color: #fff;
967
+ font-size: 15px;
968
+ }
969
+ .unika-calendar-th > *:not(:first-child) {
970
+ margin-left: 10px;
971
+ }
972
+ .unika-calendar-body {
973
+ padding: 0;
974
+ margin: 0;
975
+ font-size: 0;
976
+ padding: 5px 10px 0;
977
+ text-align: left;
978
+ }
979
+ .unika-calendar-editor {
980
+ font-size: 25px;
981
+ }
982
+ .unika-calendar-editor span {
983
+ position: relative;
984
+ top: 2px;
985
+ font-size: 57px;
986
+ }
987
+ .unika-calendar-day {
988
+ display: inline-block;
989
+ width: 24px;
990
+ height: 24px;
991
+ line-height: 24px;
992
+ text-align: center;
993
+ font-size: 14px;
994
+ position: absolute;
995
+ border-radius: 50%;
996
+ }
997
+ .unika-calendar-row {
998
+ display: flex;
999
+ }
1000
+ .unika-calendar-row:not(:last-child) {
1001
+ margin-bottom: 10px;
1002
+ }
1003
+ .unika-calendar-row > * {
1004
+ flex: 1;
1005
+ padding: 2px;
1006
+ height: 28px;
1007
+ box-sizing: border-box;
1008
+ position: relative;
1009
+ }
1010
+ /*.unika-calendar-row > *.color-grey {
1011
+ background-color: #EBF1F9;
825
1012
  }*/
826
1013
  .unika-calendar-row > *.color-purple {
827
1014
  background-color: #D5C3FF;
@@ -991,190 +1178,3 @@ button.swiper-pagination-bullet {
991
1178
  padding: 0 0px;
992
1179
  border-bottom: 1px solid
993
1180
  }
994
-
995
-
996
- .no-animation__card {
997
- font-weight: 500;
998
- font-size: var(--countdown-size, 2rem);
999
- line-height: 1.5;
1000
- display: block;
1001
- color: var(--main-color, #EC685C);
1002
- }
1003
-
1004
- .flip-clock {
1005
- text-align: center;
1006
- perspective: 600px;
1007
- margin: 0 auto;
1008
- }
1009
-
1010
- .flip-clock *,
1011
- .flip-clock *:before,
1012
- .flip-clock *:after {
1013
- box-sizing: border-box;
1014
- }
1015
-
1016
- .flip-clock__piece {
1017
- display: inline-block;
1018
- margin: 0 0.2vw;
1019
- }
1020
-
1021
- @media (min-width: 1000px) {
1022
- .flip-clock__piece {
1023
- margin: 0 5px;
1024
- }
1025
- }
1026
-
1027
- .flip-clock__slot {
1028
- font-size: var(--label-size, 1rem);
1029
- line-height: 1.5;
1030
- display: block;
1031
- color: var(--label-color, #222222);
1032
- }
1033
-
1034
- .flip-card {
1035
- display: block;
1036
- position: relative;
1037
- padding-bottom: 0.72em; /* halfHeight */
1038
- font-size: var(--countdown-size, 2.25rem);
1039
- line-height: 0.95;
1040
- }
1041
-
1042
- @media (min-width: 1000px) {
1043
- .flip-clock__slot {
1044
- font-size: 1.2rem;
1045
- }
1046
-
1047
- .flip-card {
1048
- font-size: 3rem;
1049
- }
1050
- }
1051
-
1052
- .flip-card__top,
1053
- .flip-card__bottom,
1054
- .flip-card__back-bottom,
1055
- .flip-card__back::before,
1056
- .flip-card__back::after{
1057
- display: block;
1058
- height: 0.72em; /* halfHeight */
1059
- color: var(--main-color, #EC685C);
1060
- background: var(--main-flip-background-color, #222222);
1061
- padding: 0.23em 0.15em 0.4em;
1062
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1063
- backface-visibility: hidden;
1064
- -webkit-backface-visibility: hidden;
1065
- transform-style: preserve-3d;
1066
- width: 2.1em;
1067
- }
1068
-
1069
- .flip-card__top-4digits,
1070
- .flip-card__bottom-4digits,
1071
- .flip-card__back-bottom-4digits,
1072
- .flip-card__back-4digits::before,
1073
- .flip-card__back-4digits::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.65em;
1084
- }
1085
-
1086
- .flip-card__bottom,
1087
- .flip-card__back-bottom,
1088
- .flip-card__bottom-4digits,
1089
- .flip-card__back-bottom-4digits {
1090
- color: var(--second-flip-color, #EC685C);
1091
- position: absolute;
1092
- top: 50%;
1093
- left: 0;
1094
- border-top: solid 1px var(--second-flip-background-color, #000);
1095
- background: var(--second-flip-background-color, #393939);
1096
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1097
- pointer-events: none;
1098
- overflow: hidden;
1099
- z-index: 2;
1100
- }
1101
-
1102
- .flip-card__back-bottom,
1103
- .flip-card__back-bottom-4digits {
1104
- z-index: 1;
1105
- }
1106
-
1107
- .flip-card__bottom::after,
1108
- .flip-card__back-bottom::after,
1109
- .flip-card__bottom-4digits::after,
1110
- .flip-card__back-bottom-4digits::after {
1111
- display: block;
1112
- margin-top: -0.72em; /* Negative halfHeight */
1113
- }
1114
- .flip-card__back::before,
1115
- .flip-card__bottom::after,
1116
- .flip-card__back-bottom::after,
1117
- .flip-card__back-4digits::before,
1118
- .flip-card__bottom-4digits::after,
1119
- .flip-card__back-bottom-4digits::after {
1120
- content: attr(data-value);
1121
- }
1122
-
1123
- .flip-card__back,
1124
- .flip-card__back-4digits {
1125
- position: absolute;
1126
- top: 0;
1127
- height: 100%;
1128
- left: 0%;
1129
- pointer-events: none;
1130
- }
1131
- .flip-card__back::before,
1132
- .flip-card__back-4digits::before {
1133
- position: relative;
1134
- overflow: hidden;
1135
- z-index: -1;
1136
- }
1137
-
1138
- .flip .flip-card__back::before,
1139
- .flip .flip-card__back-4digits::before {
1140
- z-index: 1;
1141
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1142
- animation-fill-mode: both;
1143
- transform-origin: center bottom;
1144
- }
1145
-
1146
- .flip .flip-card__bottom,
1147
- .flip .flip-card__bottom-4digits {
1148
- transform-origin: center top;
1149
- animation-fill-mode: both;
1150
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1151
- }
1152
- @keyframes flipTop {
1153
- 0% {
1154
- transform: rotateX(0deg);
1155
- z-index: 2;
1156
- }
1157
- 0%, 99% {
1158
- opacity: 1;
1159
- }
1160
- 100% {
1161
- transform: rotateX(-90deg);
1162
- opacity: 0;
1163
- }
1164
- }
1165
-
1166
- @keyframes flipBottom {
1167
- 0%, 50% {
1168
- z-index: -1;
1169
- transform: rotateX(90deg);
1170
- opacity: 0;
1171
- }
1172
- 51% {
1173
- opacity: 1;
1174
- }
1175
- 100% {
1176
- opacity: 1;
1177
- transform: rotateX(0deg);
1178
- z-index: 5;
1179
- }
1180
- }
@@ -75575,8 +75575,8 @@ var script$1 = defineComponent({
75575
75575
  const styleProps = useStylePick(props);
75576
75576
  const handleClick = useComponentClick(props);
75577
75577
  const openUrl = () => {
75578
- alert('Button clicked!');
75579
75578
  if (!props.isEditing) {
75579
+ alert('Button clicked!');
75580
75580
  window.location.href = props.buttonUrl;
75581
75581
  }
75582
75582
  };
@@ -75582,8 +75582,8 @@ summary tabindex target title type usemap value width wmode wrap`;
75582
75582
  const styleProps = useStylePick(props);
75583
75583
  const handleClick = useComponentClick(props);
75584
75584
  const openUrl = () => {
75585
- alert('Button clicked!');
75586
75585
  if (!props.isEditing) {
75586
+ alert('Button clicked!');
75587
75587
  window.location.href = props.buttonUrl;
75588
75588
  }
75589
75589
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.126",
3
+ "version": "1.0.127",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",