unika-components 1.0.121 → 1.0.122

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,6 +2,61 @@
2
2
  .uni-image-component {
3
3
  max-width: 100%;
4
4
  }
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
+ }
27
+
28
+ .uni-video-component {
29
+ position: relative;
30
+ text-align: center;
31
+ }
32
+ .play-pause-button {
33
+ position: absolute;
34
+ top: 50%;
35
+ left: 50%;
36
+ transform: translate(-50%, -50%);
37
+ cursor: pointer;
38
+ font-size: 2rem;
39
+ color: #fff;
40
+ background: rgba(0, 0, 0, 0.6);
41
+ border-radius: 50%;
42
+ padding: 10px;
43
+ transition: background 0.3s;
44
+ }
45
+ .play-pause-button:hover {
46
+ background: rgba(0, 0, 0, 0.8);
47
+ }
48
+
49
+ h2.uni-text-component, p.uni-text-component {
50
+ margin-bottom: 0;
51
+ }
52
+ button.uni-text-component {
53
+ padding: 5px 10px;
54
+ cursor: pointer;
55
+ }
56
+ .uni-text-component {
57
+ box-sizing: border-box;
58
+ white-space: pre-wrap;
59
+ }
5
60
 
6
61
  .slide-guide {
7
62
  position: absolute;
@@ -76,61 +131,6 @@ body, html {
76
131
  }
77
132
  }
78
133
 
79
- .uni-video-component {
80
- position: relative;
81
- text-align: center;
82
- }
83
- .play-pause-button {
84
- position: absolute;
85
- top: 50%;
86
- left: 50%;
87
- transform: translate(-50%, -50%);
88
- cursor: pointer;
89
- font-size: 2rem;
90
- color: #fff;
91
- background: rgba(0, 0, 0, 0.6);
92
- border-radius: 50%;
93
- padding: 10px;
94
- transition: background 0.3s;
95
- }
96
- .play-pause-button:hover {
97
- background: rgba(0, 0, 0, 0.8);
98
- }
99
-
100
- h2.uni-text-component, p.uni-text-component {
101
- margin-bottom: 0;
102
- }
103
- button.uni-text-component {
104
- padding: 5px 10px;
105
- cursor: pointer;
106
- }
107
- .uni-text-component {
108
- box-sizing: border-box;
109
- white-space: pre-wrap;
110
- }
111
-
112
- .like-button {
113
- display: flex;
114
- flex-direction: column;
115
- align-items: center;
116
- cursor: pointer;
117
- }
118
-
119
- .icon-heart {
120
- font-size: 24px;
121
- color: #e74c3c;
122
- }
123
-
124
- .liked {
125
- color: #f00; /* 更改颜色以示已赞 */
126
- }
127
-
128
- .like-count {
129
- margin-top: 4px;
130
- font-size: 16px;
131
- color: #333;
132
- }
133
-
134
134
  .slot-number {
135
135
  position: absolute;
136
136
  bottom: 2px;
@@ -139,11 +139,6 @@ button.uni-text-component {
139
139
  color: #666
140
140
  }
141
141
 
142
- .effect {
143
- width: 100%;
144
- height: 100%;
145
- }
146
-
147
142
  .ant-input-number {
148
143
  box-sizing: border-box;
149
144
  margin: 0;
@@ -179,6 +174,11 @@ button.uni-text-component {
179
174
  vertical-align: top;
180
175
  }
181
176
 
177
+ .effect {
178
+ width: 100%;
179
+ height: 100%;
180
+ }
181
+
182
182
  .swiper-warp {
183
183
  width: 100%;
184
184
  height: 100%;
@@ -740,6 +740,193 @@ button.swiper-pagination-bullet {
740
740
  backface-visibility: hidden;
741
741
  }
742
742
 
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);
750
+ }
751
+
752
+ .flip-clock {
753
+ text-align: center;
754
+ perspective: 600px;
755
+ margin: 0 auto;
756
+ }
757
+
758
+ .flip-clock *,
759
+ .flip-clock *:before,
760
+ .flip-clock *:after {
761
+ box-sizing: border-box;
762
+ }
763
+
764
+ .flip-clock__piece {
765
+ display: inline-block;
766
+ margin: 0 0.2vw;
767
+ }
768
+
769
+ @media (min-width: 1000px) {
770
+ .flip-clock__piece {
771
+ margin: 0 5px;
772
+ }
773
+ }
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);
780
+ }
781
+
782
+ .flip-card {
783
+ display: block;
784
+ position: relative;
785
+ padding-bottom: 0.72em; /* halfHeight */
786
+ font-size: var(--countdown-size, 2.25rem);
787
+ line-height: 0.95;
788
+ }
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
+
743
930
  .unika-calendar-title {
744
931
  font-size: 25px;
745
932
  padding-bottom: 4px;
@@ -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
- }
@@ -1,4 +1,4 @@
1
- import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, withModifiers, normalizeStyle as normalizeStyle$1, withCtx, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, normalizeProps, guardReactiveProps, h as h$2, ref, onUpdated, watch, nextTick as nextTick$1, onMounted, onBeforeUnmount, onBeforeUpdate, resolveComponent, createVNode, normalizeClass, createElementVNode, createCommentVNode, renderSlot, pushScopeId, popScopeId, toRefs, onBeforeMount, onUnmounted, withDirectives, vShow, isVNode, Comment, Text, reactive, getCurrentInstance, inject, provide, unref, shallowRef, watchEffect, triggerRef, Transition, resolveDirective, cloneVNode, toRef, Teleport, isRef, toRaw, render as render$l, TransitionGroup, mergeProps } from 'vue';
1
+ import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, withModifiers, normalizeStyle as normalizeStyle$1, withCtx, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, normalizeProps, guardReactiveProps, h as h$2, ref, onUpdated, watch, nextTick as nextTick$1, onMounted, onBeforeUnmount, onBeforeUpdate, resolveComponent, createVNode, normalizeClass, createCommentVNode, createElementVNode, renderSlot, pushScopeId, popScopeId, toRefs, onBeforeMount, onUnmounted, withDirectives, vShow, isVNode, Comment, Text, reactive, getCurrentInstance, inject, provide, unref, shallowRef, watchEffect, triggerRef, Transition, resolveDirective, cloneVNode, toRef, Teleport, isRef, toRaw, render as render$l, TransitionGroup, mergeProps } from 'vue';
2
2
  import crypto from 'crypto';
3
3
 
4
4
  /** Detect free variable `global` from Node.js. */
@@ -13083,6 +13083,7 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
13083
13083
  key: index
13084
13084
  }, {
13085
13085
  default: withCtx(() => [
13086
+ createCommentVNode("<swiper-slide :class=\"['swiper-slide', `slide-${index}`]\" v-for=\"(page, index) in work?.pages\" :key=\"index\">"),
13086
13087
  createElementVNode("div", {
13087
13088
  class: "final-page",
13088
13089
  style: normalizeStyle$1({ width: _ctx.work?.width, height: _ctx.work?.height })
@@ -13090,6 +13090,7 @@
13090
13090
  key: index
13091
13091
  }, {
13092
13092
  default: vue.withCtx(() => [
13093
+ vue.createCommentVNode("<swiper-slide :class=\"['swiper-slide', `slide-${index}`]\" v-for=\"(page, index) in work?.pages\" :key=\"index\">"),
13093
13094
  vue.createElementVNode("div", {
13094
13095
  class: "final-page",
13095
13096
  style: vue.normalizeStyle({ width: _ctx.work?.width, height: _ctx.work?.height })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.121",
3
+ "version": "1.0.122",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",