From bed21856ab1bb4b0f58a6dee549bac4d5bceddea Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Mon, 23 Jun 2025 19:57:35 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=83=8C=E6=99=AF=E9=80=8F?=
 =?UTF-8?q?=E6=98=8E=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scss/template/placeholders/_misc.scss     | 70 ++++++-------------
 1 file changed, 22 insertions(+), 48 deletions(-)

diff --git a/src/@core/scss/template/placeholders/_misc.scss b/src/@core/scss/template/placeholders/_misc.scss
index 8f294635..2bc7531e 100644
--- a/src/@core/scss/template/placeholders/_misc.scss
+++ b/src/@core/scss/template/placeholders/_misc.scss
@@ -3,70 +3,44 @@
     background: transparent;
     box-shadow: none;
 
-
-    .v-theme--light & {
-      backdrop-filter: blur(16px);
-      background: rgba(var(--v-theme-surface), 0.9);
-      box-shadow: 0 0 8px 0 rgba(var(--v-theme-on-surface), 0.1);
-    }
-    
     &::before {
       position: absolute;
       z-index: -1;
+      
+      // 磨砂渐变效果
+      backdrop-filter: blur(20px);
       block-size: calc(env(safe-area-inset-top, 0px) + 5rem);
       content: "";
       inset-block-start: 0;
       inset-inline: 0;
-      pointer-events: none;
-      transition: all 0.2s ease-in-out;
       
+      // 使用遮罩实现渐变效果
+      mask: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 100%) 0%,
+        rgba(0, 0, 0, 90%) calc(env(safe-area-inset-top, 0px) + 1rem),
+        rgba(0, 0, 0, 70%) calc(env(safe-area-inset-top, 0px) + 2rem),
+        rgba(0, 0, 0, 50%) calc(env(safe-area-inset-top, 0px) + 3rem),
+        rgba(0, 0, 0, 20%) calc(env(safe-area-inset-top, 0px) + 4rem),
+        rgba(0, 0, 0, 0%) 100%
+      );
+      pointer-events: none;
+      transition: all 0.5s ease-in-out;
+      
+      .v-theme--light & {
+        background: rgba(var(--v-theme-surface), 0.8);
+      }
       
       .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.0) 100%
-        );
+        background: rgba(var(--v-theme-background), 0.6);
       }
 
       .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.0) 100%
-        );
+        background: rgba(var(--v-theme-background), 0.6);
       }
 
       .v-theme--transparent & {
-        background: linear-gradient(
-          to bottom,
-          rgba(var(--v-theme-background), 0.5) 0%,
-          rgba(var(--v-theme-background), 0.4) 20%,
-          rgba(var(--v-theme-background), 0.3) 40%,
-          rgba(var(--v-theme-background), 0.2) 60%,
-          rgba(var(--v-theme-background), 0.1) 80%,
-          rgba(var(--v-theme-background), 0.0) 100%
-        );
-
-        @media (width <= 640px) {
-          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.1) 80%,
-          rgba(var(--v-theme-background), 0.0) 100%
-        );
-        }
+        background: rgba(var(--v-theme-background), 0.3);
       }
     }
 }