优化 index.html 中的样式设置，移除冗余的字体样式定义；在 _misc.scss 中调整背景渐变样式和透明度，增强视觉效果；更新 Footer.vue 中的卡片阴影效果

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)">

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
+    // -webkit-backdrop-filter: blur(6px);-webkit-backdrop-filter-webkit-backdrop-filter-webkit-backdrop-filter
-    // backdrop-filter: blur(6px);backdrop-filterbackdrop-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-surface), 0.9) 0%,
-          rgba(var(--v-theme-background), 0.65) 20%,
+          rgba(var(--v-theme-surface), 0.7) 20%,
-          rgba(var(--v-theme-background), 0.45) 40%,
+          rgba(var(--v-theme-surface), 0.5) 40%,
-          rgba(var(--v-theme-background), 0.25) 60%,
+          rgba(var(--v-theme-surface), 0.3) 60%,
-          rgba(var(--v-theme-background), 0.1) 80%,
+          rgba(var(--v-theme-surface), 0.1) 80%,
-          rgba(var(--v-theme-background), 0.0) 100%
+          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.8) 0%,
-          rgba(var(--v-theme-background), 0.7) 20%,
+          rgba(var(--v-theme-background), 0.6) 20%,
-          rgba(var(--v-theme-background), 0.5) 40%,
+          rgba(var(--v-theme-background), 0.4) 40%,
-          rgba(var(--v-theme-background), 0.3) 60%,
+          rgba(var(--v-theme-background), 0.25) 60%,
-          rgba(var(--v-theme-background), 0.15) 80%,
+          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.8) 0%,
-          rgba(var(--v-theme-background), 0.7) 20%,
+          rgba(var(--v-theme-background), 0.6) 20%,
-          rgba(var(--v-theme-background), 0.5) 40%,
+          rgba(var(--v-theme-background), 0.4) 40%,
-          rgba(var(--v-theme-background), 0.3) 60%,
+          rgba(var(--v-theme-background), 0.25) 60%,
-          rgba(var(--v-theme-background), 0.15) 80%,
+          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%) 0%,
-          rgba(11, 11, 11, 60%) 20%,
+          rgba(11, 11, 11, 50%) 20%,
-          rgba(11, 11, 11, 50%) 40%,
+          rgba(11, 11, 11, 40%) 40%,
-          rgba(11, 11, 11, 30%) 60%,
+          rgba(11, 11, 11, 25%) 60%,
-          rgba(11, 11, 11, 15%) 80%,
+          rgba(11, 11, 11, 10%) 80%,
           rgba(11, 11, 11, 0%) 100%
         );
       }
     }
-    
+}
-    .window-scrolled & {
+
-      &::before {
+// 移动端样式
-        .v-theme--light & {
+@media (pointer: coarse) {
-          background: linear-gradient(
+  %blurry-bg {
-            to bottom,
+    &::before {
-            rgba(var(--v-theme-background), 0.95) 0%,
+      .v-theme--light & {
-            rgba(var(--v-theme-background), 0.85) 20%,
+        background: linear-gradient(
-            rgba(var(--v-theme-background), 0.7) 40%,
+          to bottom,
-            rgba(var(--v-theme-background), 0.5) 60%,
+          rgba(var(--v-theme-surface), 1) 0%,
-            rgba(var(--v-theme-background), 0.2) 80%,
+          rgba(var(--v-theme-surface), 0.9) 20%,
-            rgba(var(--v-theme-background), 0.0) 100%
+          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%,
+      .v-theme--dark & {
-            rgba(var(--v-theme-background), 0.9) 20%,
+        background: linear-gradient(
-            rgba(var(--v-theme-background), 0.75) 40%,
+          to bottom,
-            rgba(var(--v-theme-background), 0.55) 60%,
+          rgba(var(--v-theme-background), 1) 0%,
-            rgba(var(--v-theme-background), 0.3) 80%,
+          rgba(var(--v-theme-background), 0.85) 20%,
-            rgba(var(--v-theme-background), 0.0) 100%
+          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%,
+      .v-theme--purple & {
-            rgba(var(--v-theme-background), 0.9) 20%,
+        background: linear-gradient(
-            rgba(var(--v-theme-background), 0.75) 40%,
+          to bottom,
-            rgba(var(--v-theme-background), 0.55) 60%,
+          rgba(var(--v-theme-background), 1) 0%,
-            rgba(var(--v-theme-background), 0.3) 80%,
+          rgba(var(--v-theme-background), 0.85) 20%,
-            rgba(var(--v-theme-background), 0.0) 100%
+          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%,
+      .v-theme--transparent & {
-            rgba(11, 11, 11, 80%) 20%,
+        background: linear-gradient(
-            rgba(11, 11, 11, 70%) 40%,
+          to bottom,
-            rgba(11, 11, 11, 50%) 60%,
+          rgba(11, 11, 11, 90%) 0%,
-            rgba(11, 11, 11, 30%) 80%,
+          rgba(11, 11, 11, 80%) 20%,
-            rgba(11, 11, 11, 0%) 100%
+          rgba(11, 11, 11, 65%) 40%,
-          );
+          rgba(11, 11, 11, 45%) 60%,
-        }
+          rgba(11, 11, 11, 25%) 80%,
+          rgba(11, 11, 11, 0%) 100%
+        );
       }
     }
+  }
 }

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