update：优化特效

src/pages/device/my-device.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { onLoad, onShow } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
+import DeviceOnlineEffects from "@/components/DeviceOnlineEffects.vue";
 import Header from "@/components/Header.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import ModalDialog from "@/components/ModalDialog.vue";
@@ -510,10 +511,17 @@ onShow(async () => {
           src="../../static/home-device/device-platform.png"
           mode="widthFix"
         />
+        <DeviceOnlineEffects
+          v-if="isDeviceOnline"
+          variant="detail"
+        />
         <image
           class="device-bow"
-          src="../../static/home-device/device-bow.png"
-          mode="widthFix"
+          :class="{ 'device-bow--online': isDeviceOnline }"
+          :src="isDeviceOnline
+            ? '../../static/home-device/device-bow--online.png'
+            : '../../static/home-device/device-bow.png'"
+          :mode="isDeviceOnline ? 'aspectFit' : 'widthFix'"
         />
       </view>
 
@@ -948,7 +956,7 @@ onShow(async () => {
     transform: translateY(0);
   }
   50% {
-    transform: translateY(-10rpx);
+    transform: translateY(-20rpx);
   }
 }
 
@@ -956,6 +964,7 @@ onShow(async () => {
   position: absolute;
   top: 214rpx;
   left: 50%;
+  z-index: 1;
   width: 750rpx;
   transform: translateX(-50%);
 }
@@ -964,10 +973,15 @@ onShow(async () => {
   position: absolute;
   top: 0;
   left: 50%;
+  z-index: 4;
   width: 562rpx;
   transform: translateX(-50%);
 }
 
+.device-bow--online {
+  height: 466rpx;
+}
+
 .device-heading {
   position: relative;
   z-index: 2;

src/pages/index.vue

@@ -6,6 +6,7 @@ import AppFooter from "@/components/AppFooter.vue";
 import UserHeader from "@/components/UserHeader.vue";
 import Signin from "@/components/Signin.vue";
 import BubbleTip from "@/components/BubbleTip.vue";
+import DeviceOnlineEffects from "@/components/DeviceOnlineEffects.vue";
 import ModalDialog from "@/components/ModalDialog.vue";
 import OtaModal from "@/components/OtaModal.vue";
 
@@ -60,6 +61,7 @@ const deviceCardAssets = {
   },
   online: {
     bow: "../static/home-device/device-bow--online.png",
+    platform: "../static/home-device/device-platform-glow--online.png",
     background: "../static/home-device/device-card-bg--bound.png",
     actionBackground: "../static/home-device/device-action-bg--device.png",
   },
@@ -483,8 +485,28 @@ onShareTimeline(() => {
                   mode="scaleToFill"
               />
               <image
+                  v-if="deviceCardState === 'online'"
+                  class="device-visual-platform-glow"
+                  :src="deviceCardAsset.platform"
+                  mode="scaleToFill"
+              />
+              <DeviceOnlineEffects
+                  v-if="deviceCardState === 'online'"
+                  variant="home"
+              />
+              <view
+                  v-if="deviceCardState === 'online'"
+                  class="device-visual-float-group"
+              >
+                <image
+                    class="device-visual-bow device-visual-bow--online"
+                    :src="deviceCardAsset.bow"
+                    mode="scaleToFill"
+                />
+              </view>
+              <image
+                  v-else
                   class="device-visual-bow"
-                  :class="{ 'device-visual-bow--floating': deviceCardState === 'online' }"
                   :src="deviceCardAsset.bow"
                   mode="scaleToFill"
               />
@@ -686,6 +708,8 @@ onShareTimeline(() => {
 }
 
 .device-visual-background,
+.device-visual-platform-glow,
+.device-visual-float-group,
 .device-visual-bow {
   display: flex;
   position: absolute;
@@ -697,6 +721,26 @@ onShareTimeline(() => {
   left: 0;
   width: 100%;
   height: 100%;
+  z-index: 0;
+}
+
+.device-visual-platform-glow {
+  left: 0;
+  bottom: 0;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  transform-origin: center bottom;
+  animation: device-platform-glow 3.6s ease-in-out -1.1s infinite;
+}
+
+.device-visual-float-group {
+  top: 0;
+  left: 0;
+  z-index: 5;
+  width: 100%;
+  height: 388rpx;
+  animation: device-bow-float 3s ease-in-out infinite;
 }
 
 .device-visual-bow {
@@ -706,17 +750,27 @@ onShareTimeline(() => {
   height: 388rpx;
 }
 
-.device-visual-bow--floating {
-  animation: device-bow-float 3s ease-in-out infinite;
+.device-visual-bow--online {
+  z-index: 1;
 }
 
 @keyframes device-bow-float {
   0%,
   100% {
-    transform: translateY(0) rotate(-0.5deg);
+    transform: translateY(0);
   }
   50% {
-    transform: translateY(-10rpx) rotate(0.5deg);
+    transform: translateY(-20rpx);
+  }
+}
+
+@keyframes device-platform-glow {
+  0%,
+  100% {
+    opacity: 0.92;
+  }
+  50% {
+    opacity: 1;
   }
 }
 
@@ -730,7 +784,7 @@ onShareTimeline(() => {
   position: absolute;
   top: 10rpx;
   right: 14rpx;
-  z-index: 2;
+  z-index: 6;
   height: 34rpx;
   color: #ffffff;
   font-family: Inter-Regular, sans-serif;
@@ -802,7 +856,7 @@ onShareTimeline(() => {
   position: absolute;
   bottom: 28rpx;
   left: 50%;
-  z-index: 2;
+  z-index: 6;
   width: 218rpx;
   height: 56rpx;
   justify-content: center;