unika-components 1.0.56 → 1.0.57

package/dist/src/components/UniLotties/UniLotties.vue.d.ts

@@ -357,9 +357,9 @@ declare const _default: import("vue").DefineComponent<{
         rendererSettings: any;
         assetsPath: string;
     }> | null>;
-    loopC: import("vue").ComputedRef<boolean>;
-    delayC: import("vue").ComputedRef<number>;
-    animationLinkC: import("vue").ComputedRef<string>;
+    loopC: import("vue").Ref<boolean>;
+    delayC: import("vue").Ref<number>;
+    animationLinkC: import("vue").Ref<string>;
     play: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     left: {

package/dist/unika-components.css

@@ -1,4 +1,8 @@
 
+.uni-image-component {
+  max-width: 100%;
+}
+
 h2.uni-text-component, p.uni-text-component {
   margin-bottom: 0;
 }
@@ -11,26 +15,41 @@ button.uni-text-component {
   white-space: pre-wrap;
 }
 
-  .uni-video-component {
-    position: relative;
-    text-align: center;
+  .uni-background-component {
+    width: 100%;
   }
-  .play-pause-button {
+  .bg-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index:1;
+  }
+  .watermark {
+    height: 100%;
     position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    cursor: pointer;
-    font-size: 2rem;
-    color: #fff;
-    background: rgba(0, 0, 0, 0.6);
-    border-radius: 50%;
-    padding: 10px;
-    transition: background 0.3s;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
   }
-  .play-pause-button:hover {
-    background: rgba(0, 0, 0, 0.8);
+  .watermark-div {
+    height: 100%;
+    width:100%;
+    position:absolute;
+    z-index:99999999;
   }
+  body:before{
+  content: '';
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: -1;
+  /* background: url(https://unika-static-dev.unika.cc/logo.png) 0 0 repeat; */
+  background-position: center;  
+  opacity: 0.1;
+}
 
  .slide-guide {
     position: absolute;
@@ -105,133 +124,6 @@ body, html {
     }
 }
 
-#app1 {
-  position: relative;
-}
-.snowflake {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 10px;
-  height: 10px;
-  background: red;
-  border-radius: 50%;
-  animation: falling 10s linear infinite;
-}
-@keyframes falling {
-  from {
-    transform: translateY(0) rotate(0deg);
-  }
-  to {
-    transform: translateY(100vh) rotate(360deg);
-  }
-}
-
-  .uni-background-component {
-    width: 100%;
-  }
-  .bg-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    z-index:1;
-  }
-  .watermark {
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-  .watermark-div {
-    height: 100%;
-    width:100%;
-    position:absolute;
-    z-index:99999999;
-  }
-  body:before{
-  content: '';
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: -1;
-  /* background: url(https://unika-static-dev.unika.cc/logo.png) 0 0 repeat; */
-  background-position: center;  
-  opacity: 0.1;
-}
-
-.like-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
-}
-
-.icon-heart {
-  font-size: 24px;
-  color: #e74c3c;
-}
-
-.liked {
-  color: #f00; /* 更改颜色以示已赞 */
-}
-
-.like-count {
-  margin-top: 4px;
-  font-size: 16px;
-  color: #333;
-}
-
-.uni-image-component {
-  max-width: 100%;
-}
-
-.slot-number {
-  position: absolute;
-  bottom: 2px;
-  left: 7px;
-  font-size: 12px;
-  color: #666
-}
-
-/*.swiper-container {
-  width: 100%;
-  height: 300px;
-}
-
-.swiper-slide {
-  text-align: center;
-}
-
-.swiper-slide img {
-  max-width: 100%;
-  max-height: 100%;
-}*/
-
-  .video-player {
-    position: relative;
-    text-align: center;
-  }
-  .play-pause-button {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    cursor: pointer;
-    font-size: 2rem;
-    color: #fff;
-    background: rgba(0, 0, 0, 0.6);
-    border-radius: 50%;
-    padding: 10px;
-    transition: background 0.3s;
-  }
-  .play-pause-button:hover {
-    background: rgba(0, 0, 0, 0.8);
-  }
-
 #audio {
   position: absolute;
   right: 10px;
@@ -326,6 +218,114 @@ body, html {
     -webkit-transform: rotate(360deg);
   }
 }
+
+.slot-number {
+  position: absolute;
+  bottom: 2px;
+  left: 7px;
+  font-size: 12px;
+  color: #666
+}
+
+.like-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
+
+.icon-heart {
+  font-size: 24px;
+  color: #e74c3c;
+}
+
+.liked {
+  color: #f00; /* 更改颜色以示已赞 */
+}
+
+.like-count {
+  margin-top: 4px;
+  font-size: 16px;
+  color: #333;
+}
+
+  .uni-video-component {
+    position: relative;
+    text-align: center;
+  }
+  .play-pause-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+    font-size: 2rem;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    padding: 10px;
+    transition: background 0.3s;
+  }
+  .play-pause-button:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+
+#app1 {
+  position: relative;
+}
+.snowflake {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 10px;
+  height: 10px;
+  background: red;
+  border-radius: 50%;
+  animation: falling 10s linear infinite;
+}
+@keyframes falling {
+  from {
+    transform: translateY(0) rotate(0deg);
+  }
+  to {
+    transform: translateY(100vh) rotate(360deg);
+  }
+}
+
+  .video-player {
+    position: relative;
+    text-align: center;
+  }
+  .play-pause-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+    font-size: 2rem;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    padding: 10px;
+    transition: background 0.3s;
+  }
+  .play-pause-button:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+
+/*.swiper-container {
+  width: 100%;
+  height: 300px;
+}
+
+.swiper-slide {
+  text-align: center;
+}
+
+.swiper-slide img {
+  max-width: 100%;
+  max-height: 100%;
+}*/
 /**
  * Swiper 6.8.4
  * Most modern mobile touch slider and framework with hardware accelerated transitions

package/dist/unika-components.esm.js

@@ -46744,9 +46744,19 @@ var script$1 = defineComponent({
         const styleProps = useStylePick(props);
         const handleClick = useComponentClick(props);
         const lottieAnimation = ref(null);
-        const loopC = computed(() => { return props.loop; });
-        const delayC = computed(() => { return props.delay; });
-        const animationLinkC = computed(() => { return props.animationLink; });
+        const { loop, delay, animationLink } = toRefs(props);
+        const loopC = ref(props.loop);
+        const delayC = ref(props.delay);
+        const animationLinkC = ref(props.animationLink);
+        watch(loop, (newVal) => {
+            loopC.value = newVal;
+        });
+        watch(delay, (newVal) => {
+            delayC.value = newVal;
+        });
+        watch(animationLink, (newVal) => {
+            animationLinkC.value = newVal;
+        });
         const play = () => {
             if (lottieAnimation.value) {
                 lottieAnimation.value.stop();

package/dist/unika-components.umd.js

@@ -46751,9 +46751,19 @@
           const styleProps = useStylePick(props);
           const handleClick = useComponentClick(props);
           const lottieAnimation = vue.ref(null);
-          const loopC = vue.computed(() => { return props.loop; });
-          const delayC = vue.computed(() => { return props.delay; });
-          const animationLinkC = vue.computed(() => { return props.animationLink; });
+          const { loop, delay, animationLink } = vue.toRefs(props);
+          const loopC = vue.ref(props.loop);
+          const delayC = vue.ref(props.delay);
+          const animationLinkC = vue.ref(props.animationLink);
+          vue.watch(loop, (newVal) => {
+              loopC.value = newVal;
+          });
+          vue.watch(delay, (newVal) => {
+              delayC.value = newVal;
+          });
+          vue.watch(animationLink, (newVal) => {
+              animationLinkC.value = newVal;
+          });
           const play = () => {
               if (lottieAnimation.value) {
                   lottieAnimation.value.stop();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unika-components",
-  "version": "1.0.56",
+  "version": "1.0.57",
   "private": false,
   "main": "dist/unika-components.umd.js",
   "module": "dist/unika-components.esm.js",