在 App.vue 中添加页面可见性变化处理逻辑，优化背景图片轮换功能；在 _misc.scss 中调整背景渐变透明度和样式，提升视觉效果。

src/@core/scss/base/placeholders/_misc.scss

@@ -1,29 +1,29 @@
 %blurry-bg {
+    position: relative;
     /* stylelint-disable property-no-vendor-prefix */
-    // -webkit-backdrop-filter: blur(6px);
-    // backdrop-filter: blur(6px);
+    // -webkit-backdrop-filter: blur(6px);-webkit-backdrop-filter-webkit-backdrop-filter
+    // backdrop-filter: blur(6px);backdrop-filterbackdrop-filter
     /* stylelint-enable */
     background-color: transparent;
-
-    position: relative;
+    box-shadow: none;
     
     &::before {
-      content: "";
       position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: calc(env(safe-area-inset-top) + 5rem);
-      pointer-events: none;
       z-index: -1;
+      block-size: calc(env(safe-area-inset-top) + 5rem);
+      content: "";
+      inset-block-start: 0;
+      inset-inline: 0;
+      pointer-events: none;
+      transition: opacity 0.2s ease-in-out, background 0.2s ease-in-out;
       
       .v-theme--light & {
         background: linear-gradient(
           to bottom,
-          rgba(var(--v-theme-background), 0.9) 0%,
-          rgba(var(--v-theme-background), 0.7) 20%,
-          rgba(var(--v-theme-background), 0.5) 40%,
-          rgba(var(--v-theme-background), 0.3) 60%,
+          rgba(var(--v-theme-background), 0.85) 0%,
+          rgba(var(--v-theme-background), 0.65) 20%,
+          rgba(var(--v-theme-background), 0.45) 40%,
+          rgba(var(--v-theme-background), 0.25) 60%,
           rgba(var(--v-theme-background), 0.1) 80%,
           rgba(var(--v-theme-background), 0.0) 100%
         );
@@ -32,11 +32,11 @@
       .v-theme--dark & {
         background: linear-gradient(
           to bottom,
-          rgba(var(--v-theme-background), 1) 0%,
-          rgba(var(--v-theme-background), 0.8) 20%,
-          rgba(var(--v-theme-background), 0.6) 40%,
-          rgba(var(--v-theme-background), 0.4) 60%,
-          rgba(var(--v-theme-background), 0.2) 80%,
+          rgba(var(--v-theme-background), 0.9) 0%,
+          rgba(var(--v-theme-background), 0.7) 20%,
+          rgba(var(--v-theme-background), 0.5) 40%,
+          rgba(var(--v-theme-background), 0.3) 60%,
+          rgba(var(--v-theme-background), 0.15) 80%,
           rgba(var(--v-theme-background), 0.0) 100%
         );
       }
@@ -44,11 +44,11 @@
       .v-theme--purple & {
         background: linear-gradient(
           to bottom,
-          rgba(var(--v-theme-background), 1) 0%,
-          rgba(var(--v-theme-background), 0.8) 20%,
-          rgba(var(--v-theme-background), 0.6) 40%,
-          rgba(var(--v-theme-background), 0.4) 60%,
-          rgba(var(--v-theme-background), 0.2) 80%,
+          rgba(var(--v-theme-background), 0.9) 0%,
+          rgba(var(--v-theme-background), 0.7) 20%,
+          rgba(var(--v-theme-background), 0.5) 40%,
+          rgba(var(--v-theme-background), 0.3) 60%,
+          rgba(var(--v-theme-background), 0.15) 80%,
           rgba(var(--v-theme-background), 0.0) 100%
         );
       }
@@ -56,14 +56,65 @@
       .v-theme--transparent & {
         background: linear-gradient(
           to bottom,
-          rgba(11, 11, 11, 0.8) 0%,
-          rgba(11, 11, 11, 0.7) 20%,
-          rgba(11, 11, 11, 0.6) 40%,
-          rgba(11, 11, 11, 0.4) 60%,
-          rgba(11, 11, 11, 0.2) 80%,
-          rgba(11, 11, 11, 0.0) 100%
+          rgba(11, 11, 11, 70%) 0%,
+          rgba(11, 11, 11, 60%) 20%,
+          rgba(11, 11, 11, 50%) 40%,
+          rgba(11, 11, 11, 30%) 60%,
+          rgba(11, 11, 11, 15%) 80%,
+          rgba(11, 11, 11, 0%) 100%
         );
       }
     }
-    box-shadow: none;
+    
+    .window-scrolled & {
+      &::before {
+        .v-theme--light & {
+          background: linear-gradient(
+            to bottom,
+            rgba(var(--v-theme-background), 0.95) 0%,
+            rgba(var(--v-theme-background), 0.85) 20%,
+            rgba(var(--v-theme-background), 0.7) 40%,
+            rgba(var(--v-theme-background), 0.5) 60%,
+            rgba(var(--v-theme-background), 0.2) 80%,
+            rgba(var(--v-theme-background), 0.0) 100%
+          );
+        }
+        
+        .v-theme--dark & {
+          background: linear-gradient(
+            to bottom,
+            rgba(var(--v-theme-background), 1) 0%,
+            rgba(var(--v-theme-background), 0.9) 20%,
+            rgba(var(--v-theme-background), 0.75) 40%,
+            rgba(var(--v-theme-background), 0.55) 60%,
+            rgba(var(--v-theme-background), 0.3) 80%,
+            rgba(var(--v-theme-background), 0.0) 100%
+          );
+        }
+  
+        .v-theme--purple & {
+          background: linear-gradient(
+            to bottom,
+            rgba(var(--v-theme-background), 1) 0%,
+            rgba(var(--v-theme-background), 0.9) 20%,
+            rgba(var(--v-theme-background), 0.75) 40%,
+            rgba(var(--v-theme-background), 0.55) 60%,
+            rgba(var(--v-theme-background), 0.3) 80%,
+            rgba(var(--v-theme-background), 0.0) 100%
+          );
+        }
+  
+        .v-theme--transparent & {
+          background: linear-gradient(
+            to bottom,
+            rgba(11, 11, 11, 90%) 0%,
+            rgba(11, 11, 11, 80%) 20%,
+            rgba(11, 11, 11, 70%) 40%,
+            rgba(11, 11, 11, 50%) 60%,
+            rgba(11, 11, 11, 30%) 80%,
+            rgba(11, 11, 11, 0%) 100%
+          );
+        }
+      }
+    }
 }