unika-components 1.0.120 → 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,49 @@
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
+ }
5
48
 
6
49
  h2.uni-text-component, p.uni-text-component {
7
50
  margin-bottom: 0;
@@ -96,54 +139,6 @@ body, html {
96
139
  color: #666
97
140
  }
98
141
 
99
- .uni-video-component {
100
- position: relative;
101
- text-align: center;
102
- }
103
- .play-pause-button {
104
- position: absolute;
105
- top: 50%;
106
- left: 50%;
107
- transform: translate(-50%, -50%);
108
- cursor: pointer;
109
- font-size: 2rem;
110
- color: #fff;
111
- background: rgba(0, 0, 0, 0.6);
112
- border-radius: 50%;
113
- padding: 10px;
114
- transition: background 0.3s;
115
- }
116
- .play-pause-button:hover {
117
- background: rgba(0, 0, 0, 0.8);
118
- }
119
-
120
- .like-button {
121
- display: flex;
122
- flex-direction: column;
123
- align-items: center;
124
- cursor: pointer;
125
- }
126
-
127
- .icon-heart {
128
- font-size: 24px;
129
- color: #e74c3c;
130
- }
131
-
132
- .liked {
133
- color: #f00; /* 更改颜色以示已赞 */
134
- }
135
-
136
- .like-count {
137
- margin-top: 4px;
138
- font-size: 16px;
139
- color: #333;
140
- }
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 @@ body, html {
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, createElementVNode, createCommentVNode, normalizeClass, 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. */
@@ -13079,10 +13079,11 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
13079
13079
  default: withCtx(() => [
13080
13080
  (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.work?.pages, (page, index) => {
13081
13081
  return (openBlock(), createBlock(_component_swiper_slide, {
13082
- key: index,
13083
- class: "swiper-slide"
13082
+ class: normalizeClass(['swiper-slide', `slide-${index}`]),
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 })
@@ -13101,7 +13102,7 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
13101
13102
  ], 4 /* STYLE */)
13102
13103
  ]),
13103
13104
  _: 2 /* DYNAMIC */
13104
- }, 1024 /* DYNAMIC_SLOTS */))
13105
+ }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class"]))
13105
13106
  }), 128 /* KEYED_FRAGMENT */))
13106
13107
  ]),
13107
13108
  _: 1 /* STABLE */
@@ -13086,10 +13086,11 @@
13086
13086
  default: vue.withCtx(() => [
13087
13087
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.work?.pages, (page, index) => {
13088
13088
  return (vue.openBlock(), vue.createBlock(_component_swiper_slide, {
13089
- key: index,
13090
- class: "swiper-slide"
13089
+ class: vue.normalizeClass(['swiper-slide', `slide-${index}`]),
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 })
@@ -13108,7 +13109,7 @@
13108
13109
  ], 4 /* STYLE */)
13109
13110
  ]),
13110
13111
  _: 2 /* DYNAMIC */
13111
- }, 1024 /* DYNAMIC_SLOTS */))
13112
+ }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class"]))
13112
13113
  }), 128 /* KEYED_FRAGMENT */))
13113
13114
  ]),
13114
13115
  _: 1 /* STABLE */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.120",
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",