From 5753d4ff07676b8776590ecae7e74ae0e46c7e1f Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Mon, 21 Apr 2025 11:51:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20index.html=20=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84=E6=A0=B7=E5=BC=8F=E8=AE=BE=E7=BD=AE=EF=BC=8C=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E5=86=97=E4=BD=99=E7=9A=84=E5=AD=97=E4=BD=93=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=AE=9A=E4=B9=89=EF=BC=9B=E5=9C=A8=20=5Fmisc.scss=20?=
 =?UTF-8?q?=E4=B8=AD=E8=B0=83=E6=95=B4=E8=83=8C=E6=99=AF=E6=B8=90=E5=8F=98?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=92=8C=E9=80=8F=E6=98=8E=E5=BA=A6=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=BC=BA=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C=EF=BC=9B?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=20Footer.vue=20=E4=B8=AD=E7=9A=84=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E9=98=B4=E5=BD=B1=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                  |  75 +---------
 src/@core/scss/base/placeholders/_misc.scss | 152 ++++++++++----------
 src/layouts/components/Footer.vue           |   4 +-
 3 files changed, 81 insertions(+), 150 deletions(-)

diff --git a/index.html b/index.html
index fc6fff17..15a7a159 100644
--- a/index.html
+++ b/index.html
@@ -33,79 +33,6 @@
   <meta name="HandheldFriendly" content="True" />
   <meta name="MobileOptimized" content="320" />
   <link rel="stylesheet" type="text/css" href="/loader.css" />
-  <style>
-    :root {
-      /* 系统字体栈优化 */
-      --font-family-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
-        "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
-        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-      --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-        "Courier New", monospace;
-
-      /* 针对不同操作系统的字体优化 */
-      --font-ios: -apple-system, "SF Pro Text", "SF Pro Display";
-      --font-macos: -apple-system, BlinkMacSystemFont, "SF Pro Text";
-      --font-windows: "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol";
-      --font-android: Roboto, "Noto Sans";
-    }
-
-    /* 基础字体设置 */
-    html {
-      font-family: var(--font-family-sans);
-      -webkit-text-size-adjust: 100%;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      text-rendering: optimizeLegibility;
-    }
-
-    /* 系统特定优化 */
-    @supports (-webkit-touch-callout: none) {
-
-      /* iOS设备 */
-      body {
-        font-family: var(--font-ios);
-        /* iOS文本渲染优化 */
-        -webkit-text-size-adjust: none;
-      }
-    }
-
-    /* macOS特定优化 */
-    @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-color-index: 0) {
-      body {
-        font-family: var(--font-macos);
-      }
-    }
-
-    /* Windows特定优化 */
-    @media screen and (-ms-high-contrast: active),
-    (-ms-high-contrast: none) {
-      body {
-        font-family: var(--font-windows);
-      }
-    }
-
-    /* Android特定优化 */
-    @supports (-webkit-overflow-scrolling: touch) and (not (-webkit-touch-callout: none)) {
-      body {
-        font-family: var(--font-android);
-      }
-    }
-
-    /* 中文字体优化 */
-    :lang(zh),
-    :lang(zh-CN) {
-      font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
-        "Microsoft YaHei", "Heiti SC", "Noto Sans SC", "Source Han Sans SC", sans-serif;
-      letter-spacing: 0.05em;
-    }
-
-    /* 平板和移动设备字体大小优化 */
-    @media (max-width: 768px) {
-      html {
-        font-size: 14px;
-      }
-    }
-  </style>
   <script>
     const loaderColor = localStorage.getItem('materio-initial-loader-bg') || '#FFFFFF'
     if (loaderColor) document.documentElement.style.setProperty('--initial-loader-bg', loaderColor)
@@ -118,7 +45,7 @@
   <div id="loading-bg">
     <div class="loading-logo">
       <!-- Logo -->
-      <svg width="10rem" height="10rem" viewBox="0 0 192 192" version="1.1" xmlns="http://www.w3.org/2000/svg"
+      <svg width="160px" height="160px" viewBox="0 0 192 192" version="1.1" xmlns="http://www.w3.org/2000/svg"
         style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2">
         <g transform="matrix(1,0,0,1,-2606,-236)">
           <g id="a2-c" transform="matrix(1,0,0,1,2606,236)">
diff --git a/src/@core/scss/base/placeholders/_misc.scss b/src/@core/scss/base/placeholders/_misc.scss
index 5f81e543..336e518e 100644
--- a/src/@core/scss/base/placeholders/_misc.scss
+++ b/src/@core/scss/base/placeholders/_misc.scss
@@ -1,8 +1,8 @@
 %blurry-bg {
     position: relative;
     /* stylelint-disable property-no-vendor-prefix */
-    // -webkit-backdrop-filter: blur(6px);-webkit-backdrop-filter-webkit-backdrop-filter
-    // backdrop-filter: blur(6px);backdrop-filterbackdrop-filter
+    // -webkit-backdrop-filter: blur(6px);-webkit-backdrop-filter-webkit-backdrop-filter-webkit-backdrop-filter
+    // backdrop-filter: blur(6px);backdrop-filterbackdrop-filterbackdrop-filter
     /* stylelint-enable */
     background-color: transparent;
     box-shadow: none;
@@ -10,33 +10,34 @@
     &::before {
       position: absolute;
       z-index: -1;
-      block-size: calc(env(safe-area-inset-top) + 5rem);
+      block-size: calc(env(safe-area-inset-top, 0px) + 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;
       
+      // PC端样式 (默认)
       .v-theme--light & {
         background: linear-gradient(
           to bottom,
-          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%
+          rgba(var(--v-theme-surface), 0.9) 0%,
+          rgba(var(--v-theme-surface), 0.7) 20%,
+          rgba(var(--v-theme-surface), 0.5) 40%,
+          rgba(var(--v-theme-surface), 0.3) 60%,
+          rgba(var(--v-theme-surface), 0.1) 80%,
+          rgba(var(--v-theme-surface), 0.0) 100%
         );
       }
       
       .v-theme--dark & {
         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.15) 80%,
+          rgba(var(--v-theme-background), 0.8) 0%,
+          rgba(var(--v-theme-background), 0.6) 20%,
+          rgba(var(--v-theme-background), 0.4) 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%
         );
       }
@@ -44,11 +45,11 @@
       .v-theme--purple & {
         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.15) 80%,
+          rgba(var(--v-theme-background), 0.8) 0%,
+          rgba(var(--v-theme-background), 0.6) 20%,
+          rgba(var(--v-theme-background), 0.4) 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%
         );
       }
@@ -56,65 +57,68 @@
       .v-theme--transparent & {
         background: linear-gradient(
           to bottom,
-          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, 60%) 0%,
+          rgba(11, 11, 11, 50%) 20%,
+          rgba(11, 11, 11, 40%) 40%,
+          rgba(11, 11, 11, 25%) 60%,
+          rgba(11, 11, 11, 10%) 80%,
           rgba(11, 11, 11, 0%) 100%
         );
       }
     }
-    
-    .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%
-          );
-        }
+}
+
+// 移动端样式
+@media (pointer: coarse) {
+  %blurry-bg {
+    &::before {
+      .v-theme--light & {
+        background: linear-gradient(
+          to bottom,
+          rgba(var(--v-theme-surface), 1) 0%,
+          rgba(var(--v-theme-surface), 0.9) 20%,
+          rgba(var(--v-theme-surface), 0.7) 40%,
+          rgba(var(--v-theme-surface), 0.5) 60%,
+          rgba(var(--v-theme-surface), 0.2) 80%,
+          rgba(var(--v-theme-surface), 0.0) 100%
+        );
+      }
+      
+      .v-theme--dark & {
+        background: linear-gradient(
+          to bottom,
+          rgba(var(--v-theme-background), 1) 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.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.85) 20%,
+          rgba(var(--v-theme-background), 0.7) 40%,
+          rgba(var(--v-theme-background), 0.5) 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, 65%) 40%,
+          rgba(11, 11, 11, 45%) 60%,
+          rgba(11, 11, 11, 25%) 80%,
+          rgba(11, 11, 11, 0%) 100%
+        );
       }
     }
+  }
 }
diff --git a/src/layouts/components/Footer.vue b/src/layouts/components/Footer.vue
index 0cc648fc..09995104 100644
--- a/src/layouts/components/Footer.vue
+++ b/src/layouts/components/Footer.vue
@@ -89,7 +89,7 @@ const showDynamicButton = computed(() => {
 <template>
   <Teleport v-if="appMode" to="body">
     <div class="footer-nav-container">
-      <VCard class="footer-nav-card border" rounded="pill" :class="{ 'shift-left': showDynamicButton }">
+      <VCard elevation="3" class="footer-nav-card border" rounded="pill" :class="{ 'shift-left': showDynamicButton }">
         <VCardText class="footer-card-content">
           <!-- 添加指示器 -->
           <div ref="indicator" class="nav-indicator"></div>
@@ -133,7 +133,7 @@ const showDynamicButton = computed(() => {
         </VCardText>
       </VCard>
       <Transition name="fade-slide">
-        <VCard v-if="showDynamicButton" class="footer-nav-card dynamic-btn-card border" rounded="pill">
+        <VCard v-if="showDynamicButton" elevation="3" class="footer-nav-card dynamic-btn-card border" rounded="pill">
           <VCardText class="footer-card-content">
             <!-- 各页面的动态按钮 -->
             <VBtn