unika-components 1.0.54 → 1.0.56

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

@@ -357,6 +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>;
     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

@@ -10,10 +10,27 @@ button.uni-text-component {
   box-sizing: border-box;
   white-space: pre-wrap;
 }
-
-.uni-image-component {
-  max-width: 100%;
-}
+
+  .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);
+  }
 
  .slide-guide {
     position: absolute;
@@ -88,122 +105,28 @@ body, html {
     }
 }
 
-#audio {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  z-index: 103;
-  width: 30px;
-  height: 30px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-#audio .audio {
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  color: #fff;
-  background: #666;
-  border-radius: 50%;
-  overflow: hidden;
-  will-change: transform;
-}
-#audio .audio .music-icon {
-  display: block;
-  width: 100%;
-  height: 100%;
+#app1 {
+  position: relative;
 }
-#audio .icon-cancel {
+.snowflake {
   position: absolute;
-  width: 100%;
-  height: 100%;
+  top: 0;
+  left: 0;
+  width: 10px;
+  height: 10px;
+  background: red;
   border-radius: 50%;
-  overflow: hidden;
-  padding: 14px 0;
-}
-#audio .icon-cancel .icon-h {
-  -webkit-transform: rotate(45deg);
-  transform: rotate(45deg);
-  width: 100%;
-  height: 2px;
-  background: #fff;
-}
-#audio .mrotate {
-  -webkit-animation: mrotate 5s linear infinite;
-  animation: mrotate 5s linear infinite;
-}
-.video-play-audio {
-  position: absolute;
-  left: -9999px;
-  top: -9999px;
-  width: 0;
-  height: 0;
-  z-index: -1;
-  opacity: 1;
-  overflow: hidden;
-}
-
-.music-img {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-}
-
-.uni-music-component {
-}
-
-/* 无限旋转 */
-@keyframes mrotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  animation: falling 10s linear infinite;
 }
-@-webkit-keyframes mrotate {
+@keyframes falling {
   from {
-    -webkit-transform: rotate(0deg);
+    transform: translateY(0) rotate(0deg);
   }
   to {
-    -webkit-transform: rotate(360deg);
+    transform: translateY(100vh) rotate(360deg);
   }
 }
 
-  .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);
-  }
-
   .uni-background-component {
     width: 100%;
   }
@@ -261,6 +184,10 @@ body, html {
   font-size: 16px;
   color: #333;
 }
+
+.uni-image-component {
+  max-width: 100%;
+}
 
 .slot-number {
   position: absolute;
@@ -270,6 +197,20 @@ body, html {
   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;
@@ -291,41 +232,100 @@ body, html {
     background: rgba(0, 0, 0, 0.8);
   }
 
-#app1 {
-  position: relative;
+#audio {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 103;
+  width: 30px;
+  height: 30px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
-.snowflake {
+#audio .audio {
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  color: #fff;
+  background: #666;
+  border-radius: 50%;
+  overflow: hidden;
+  will-change: transform;
+}
+#audio .audio .music-icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+#audio .icon-cancel {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 10px;
-  height: 10px;
-  background: red;
+  width: 100%;
+  height: 100%;
   border-radius: 50%;
-  animation: falling 10s linear infinite;
+  overflow: hidden;
+  padding: 14px 0;
 }
-@keyframes falling {
-  from {
-    transform: translateY(0) rotate(0deg);
-  }
-  to {
-    transform: translateY(100vh) rotate(360deg);
-  }
+#audio .icon-cancel .icon-h {
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  width: 100%;
+  height: 2px;
+  background: #fff;
+}
+#audio .mrotate {
+  -webkit-animation: mrotate 5s linear infinite;
+  animation: mrotate 5s linear infinite;
+}
+.video-play-audio {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+  width: 0;
+  height: 0;
+  z-index: -1;
+  opacity: 1;
+  overflow: hidden;
 }
 
-/*.swiper-container {
+.music-img {
+  position: relative;
+  display: inline-block;
   width: 100%;
-  height: 300px;
+  height: 100%;
 }
 
-.swiper-slide {
-  text-align: center;
+.uni-music-component {
 }
 
-.swiper-slide img {
-  max-width: 100%;
-  max-height: 100%;
-}*/
+/* 无限旋转 */
+@keyframes mrotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes mrotate {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
 /**
  * Swiper 6.8.4
  * Most modern mobile touch slider and framework with hardware accelerated transitions

package/dist/unika-components.esm.js

@@ -46744,8 +46744,12 @@ 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 play = () => {
             if (lottieAnimation.value) {
+                lottieAnimation.value.stop();
                 lottieAnimation.value.play();
             }
         };
@@ -46754,6 +46758,9 @@ var script$1 = defineComponent({
             // AstronautJSON,
             handleClick,
             lottieAnimation,
+            loopC,
+            delayC,
+            animationLinkC,
             play
         };
     }
@@ -46771,9 +46778,9 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     'position': 'absolute',
     'transform': _ctx.lottiesTransform
   }),
-    animationLink: _ctx.animationLink,
-    loop: _ctx.loop,
-    delay: _ctx.delay,
+    animationLink: _ctx.animationLinkC,
+    loop: _ctx.loopC,
+    delay: _ctx.delayC,
     ref: "lottieAnimation",
     class: "uni-lotties-component"
   }, null, 8 /* PROPS */, ["style", "animationLink", "loop", "delay"]))

package/dist/unika-components.umd.js

@@ -46751,8 +46751,12 @@
           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 play = () => {
               if (lottieAnimation.value) {
+                  lottieAnimation.value.stop();
                   lottieAnimation.value.play();
               }
           };
@@ -46761,6 +46765,9 @@
               // AstronautJSON,
               handleClick,
               lottieAnimation,
+              loopC,
+              delayC,
+              animationLinkC,
               play
           };
       }
@@ -46778,9 +46785,9 @@
       'position': 'absolute',
       'transform': _ctx.lottiesTransform
     }),
-      animationLink: _ctx.animationLink,
-      loop: _ctx.loop,
-      delay: _ctx.delay,
+      animationLink: _ctx.animationLinkC,
+      loop: _ctx.loopC,
+      delay: _ctx.delayC,
       ref: "lottieAnimation",
       class: "uni-lotties-component"
     }, null, 8 /* PROPS */, ["style", "animationLink", "loop", "delay"]))

package/package.json

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