update 单位换算

bi-ui/src/assets/css/main.scss

@@ -189,13 +189,15 @@
   .w-border-light-3 {
     position: relative;
     border: none !important;
-    animation-play-state: running;
+    animation-play-state: inherit;
 
     --border: .2em solid var(--w-main-dark-3);
-    --border-light-color: var(--w-main-light-3);
+    --border-light-color: #FFF9;
     --time: 5s;
 
     
+
+
     &::before {
       content: '';
       pointer-events: none;
@@ -287,7 +289,41 @@
     border-radius: 1em;
   }
 
+  @property --data-num {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 0;
+  }
+
+
+  .w-breathing {
+    --filter: brightness(110%);
+    --transform: scale(1.1);
+    --time: 1.3s;
+    --data-num: 0;
+    --data-num-to: 1;
+    animation: w-am-breathing var(--time) infinite linear;
+    animation-play-state: inherit;
+  }
 
+  @keyframes w-am-breathing {
+    0% {
+      filter: none;
+      transform: none;
+      
+    }
+
+    45% {
+      filter: var(--filter);
+      transform: var(--transform);
+      --data-num: var(--data-num-to);
+    }
+
+    90% {
+      filter: none;
+      transform: none;
+    }
+  }
 
 
 

bi-ui/src/components/global/WEffectBreathing.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="w-breathing">
+    <slot></slot>
+  </div>
+</template>

bi-ui/src/components/global/WEffectLight.vue

@@ -1,50 +1,10 @@
 <template>
-  <div class="WEffectLight" :class="{ 'am': props.am }">
+  <div class="w-breathing">
     <slot></slot>
   </div>
 </template>
-<script setup>
+<style scoped>
-import { IdGenerator } from "@/util";
+.w-breathing {
-
+  --transform: none;
-//唯一标识
-const uid = IdGenerator.next();
-
-const props = defineProps({
-  am: {
-    type: Boolean,
-    default: true
-  }
-})
-
-</script>
-<style lang="scss" scoped>
-@layer {
-  .WEffectLight {
-    --key: brightness(110%);
-    --time: 1.7s;
-    animation: am-WEffectLight var(--time) infinite linear;
-    animation-play-state: paused;
-
-    &.am {
-      animation-play-state: running;
-    }
-  }
-
-
-  @keyframes am-WEffectLight {
-    0% {
-
-      // filter: brightness(100%);
-    }
-
-    40% {
-      filter: var(--key);
-    }
-
-    80% {
-
-      // filter: brightness(100%);
-    }
-  }
 }
 </style>

bi-ui/src/pages/test/components.vue

@@ -211,19 +211,81 @@ codeRef.setCode('new code');//设置代码
           </div>` }}</w-code>
 
         <h2>呼吸灯效果</h2>
+        <div
+          style="display: grid; grid-template-columns: repeat(10, 5em); grid-template-rows: 5em; gap: 1em; margin-bottom: 1em;">
           <w-effect-light>
-          <div style="height: 5em; width: 5em; background-color: var(--w-main);"></div>
+            <div style="height: 100%; width: 100%; background-color: var(--w-main);"></div>
+          </w-effect-light>
+
+          <w-effect-light style="--time:3s; --filter: brightness(150%);">
+            <div style="height: 100%; width: 100%; background-color: var(--w-main);"></div>
+          </w-effect-light>
+
+          <w-effect-light style="--time:5s; --filter: hue-rotate(360deg); background-color: var(--w-main);">
           </w-effect-light>
-        <w-effect-light :am="am" style="--key: brightness(150%); --time:1s;">
+
-          <div style="height: 5em; width: 5em; background-color: var(--w-main);"></div>
+          <w-effect-breathing>
+            <div style="height: 100%; width: 100%; background-color: var(--w-main);"></div>
+          </w-effect-breathing>
+
+          <div class="w-breathing" style="background-color: var(--w-main);"></div>
+
+          <div class="w-breathing"
+            style="background-color: var(--w-main); --time:2s; --filter: brightness(70%) opacity(0); --transform: skew(-5deg) scale(1.2);">
+          </div>
+
+          <div class="w-breathing w-flex"
+            style="background-color: var(--w-main); --time:3s;--filter:none;--transform:none; --data-num: .3; --data-num-to: 1; box-shadow: 0 0 calc(2em * var(--data-num)) #000;">
+            <div style="height: 3em; width: calc(3em * var(--data-num)); background-color: #FFF3; border-radius: 100%;">
+            </div>
+          </div>
+
+        </div>
+        <w-effect-light :style="{ 'animation-play-state': am ? 'running' : 'paused' }"
+          style="--filter: brightness(150%); --time:2s; ">
+          <div
+            style="height: 5em; width: 5em; background-color: var(--w-main); border-radius: 1em; margin-bottom: .5em;">
+          </div>
         </w-effect-light>
         <el-button @click="am = !am;">{{ am ? '暂停' : '播放' }}</el-button>
+
         <w-code language="html">
-          {{ ` <w-effect-light>
+          {{ `
-            <div style="height: 5em; width: 5em; background-color: var(--w-main);"></div>
+        <div
+          style="display: grid; grid-template-columns: repeat(10, 5em); grid-template-rows: 5em; gap: 1em; margin-bottom: 1em;">
+          <w-effect-light>
+            <div style="height: 100%; width: 100%; background-color: var(--w-main);"></div>
           </w-effect-light>
-          <w-effect-light :am="am" style="--key: brightness(150%); --time:1s;">
+
-            <div style="height: 5em; width: 5em; background-color: var(--w-main);"></div>
+          <w-effect-light style="--time:3s; --filter: brightness(150%);">
+            <div style="height: 100%; width: 100%; background-color: var(--w-main);"></div>
+          </w-effect-light>
+
+          <w-effect-light style="--time:5s; --filter: hue-rotate(360deg); background-color: var(--w-main);">
+          </w-effect-light>
+
+          <w-effect-breathing>
+            <div style="height: 100%; width: 100%; background-color: var(--w-main);"></div>
+          </w-effect-breathing>
+
+          <div class="w-breathing" style="background-color: var(--w-main);"></div>
+
+          <div class="w-breathing"
+            style="background-color: var(--w-main); --time:2s; --filter: brightness(70%) opacity(0); --transform: skew(-5deg) scale(1.2);">
+          </div>
+
+          <div class="w-breathing w-flex"
+            style="background-color: var(--w-main); --time:3s;--filter:none;--transform:none; --data-num: .3; --data-num-to: 1; box-shadow: 0 0 calc(2em * var(--data-num)) #000;">
+            <div style="height: 3em; width: calc(3em * var(--data-num)); background-color: #FFF3; border-radius: 100%;">
+            </div>
+          </div>
+
+        </div>
+        <w-effect-light :style="{ 'animation-play-state': am ? 'running' : 'paused' }"
+          style="--filter: brightness(150%); --time:2s; ">
+          <div
+            style="height: 5em; width: 5em; background-color: var(--w-main); border-radius: 1em; margin-bottom: .5em;">
+          </div>
         </w-effect-light>
         <el-button @click="am = !am;">\{\{ am ? '暂停' : '播放' \}\}</el-button>` }}
         </w-code>
@@ -232,6 +294,7 @@ codeRef.setCode('new code');//设置代码
         <w-effect-noise :am="am1" style="--time:5s;">
           <div style="height: 5em; width: 5em; background-color: var(--w-main); border-radius: 10em;"></div>
         </w-effect-noise>
+        
         <el-button @click="am1 = !am1;">{{ am1 ? '暂停' : '播放' }}</el-button>
 
         <h2>加载动画效果</h2>