feat: 添加动态背景效果和样式调整以增强首页视觉体验

docs/index.md

@@ -23,34 +23,115 @@ features:
     details: 基于 MC 社区最新内容编写,保持更新
 ---
 
-<style>
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+
+onMounted(() => {
+  document.querySelector(".VPHero").addEventListener("mousemove", (event) => {
+  })
+})
+</script>
+
+<style lang="scss">
 .container {
   --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: linear-gradient(120deg, #b7b7b7 30%, #312104);
-
-  --vp-home-hero-image-background-image: linear-gradient(-45deg, #b7b7b7 50%, #312104 50%);
-
-  --vp-button-brand-bg: #312104;
-  --vp-button-brand-hover-bg: #694e1d;
-  --vp-button-brand-active-bg:#8a641d;
-
+  --vp-home-hero-name-background: linear-gradient(0deg,rgba(183, 183, 183, 0.6) 30%, rgba(255, 255, 245, 0.86));
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #b7b7b7 50%, #b7b7b7 50%);
+
+  --vp-button-brand-bg: rgba(255, 255, 245, 0.86);
+  --vp-button-brand-text: #312104;
+  --vp-button-brand-hover-bg: rgba(255, 255, 245, 0.75);
+  --vp-button-brand-hover-text: #312104;
+  --vp-button-brand-active-bg: rgba(255, 255, 245, 0.65);
+  --vp-button-brand-active-text: #312104;
+
   --vp-home-hero-image-filter: blur(44px);
 }
 
+.VPHome {
+  position: relative;
+  z-index: 1;
+
+  &:before {
+    content: "";
+    width: 100%;
+    height: 400px;
+    position: fixed;
+    top: var(--vp-nav-height);
+    left: 0;
+    z-index: -1;
+    background: url(./bg.jpeg);
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-position: center 30%;
+    transition: opacity 0.3s;
+    opacity: 0;
+  }
+
+  &:after {
+    content: "";
+    width: 100%;
+    height: 400px;
+    position: fixed;
+    top: var(--vp-nav-height);
+    left: 0;
+    z-index: -1;
+    background: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(6px);
+    transition: opacity 0.3s;
+    opacity: 0;
+  }
+}
+
 .image-container .VPImage {
   width: 300px;
   height: 300px;
 }
 
+.VPHero {
+  margin-bottom: 40px;
+}
 @media (min-width: 640px) {
   :root {
     --vp-home-hero-image-filter: blur(56px);
   }
+  .VPHome::before,
+  .VPHome::after {
+    opacity: 0;
+  }
+  .VPHero {
+    color: #515c67;
+    .tagline {
+      color: #414853;
+    }
+  }
+  html.dark {
+    .VPHero {
+      color: rgba(255, 255, 245, 0.86);
+      .tagline {
+        color: rgba(235, 235, 245, 0.6);
+      }
+    }
+  }
 }
 
 @media (min-width: 960px) {
   :root {
     --vp-home-hero-image-filter: blur(68px);
   }
+  .image-container{
+    transform: translate(-32px, -10px) !important;
+  }
+  .VPHome::before,
+  .VPHome::after {
+    opacity: 1 !important;
+  }
+  .VPHero {
+    color: rgba(255, 255, 245, 0.86);
+    .tagline {
+      color: rgba(235, 235, 245, 0.6);
+    }
+  }
 }
+
 </style>