完善落地页设计 + 添加 GitHub Pages 部署

- Hero: 固定背景 + 两阶段滚动（平移→缩放到120vw）
- 毛玻璃蒙层自然渐变过渡
- MC 风格立体凸起按钮（厚度效果）
- 配色改为 MC 新版 UI 风格（中性灰调）
- 渐变色块背景（Logo 绿/金配色）
- 响应式设计优化
- 添加 GitHub Actions 自动部署到 Pages

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: boybook

.github/workflows/deploy.yml

@@ -0,0 +1,44 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [master]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - run: npm ci
+
+      - run: npm run build
+
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@v4

src/App.vue

@@ -1,10 +1,13 @@
 <template>
   <div class="app">
     <HeroSection />
-    <ServerAddress />
-    <DownloadButtons />
-    <TutorialSection />
-    <FooterSection />
+    <div class="content-overlay">
+      <div class="gradient-bg"></div>
+      <ServerAddress />
+      <DownloadButtons />
+      <TutorialSection />
+      <FooterSection />
+    </div>
   </div>
 </template>
 
@@ -19,7 +22,71 @@ import FooterSection from './components/FooterSection.vue'
 <style scoped>
 .app {
   min-height: 100vh;
-  display: flex;
-  flex-direction: column;
+}
+
+.content-overlay {
+  position: relative;
+  z-index: 2;
+  padding-top: 280px;
+  /* 毛玻璃 */
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  /* 多段渐变背景：顶部从全透明缓慢过渡到半透明深色 */
+  background: linear-gradient(
+    to bottom,
+    rgba(40, 40, 42, 0) 0%,
+    rgba(40, 40, 42, 0.3) 40px,
+    rgba(40, 40, 42, 0.6) 100px,
+    rgba(40, 40, 42, 0.85) 200px,
+    rgba(40, 40, 42, 0.9) 400px
+  );
+  /* 顶部渐变遮罩让 backdrop-filter 也跟着渐入 */
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    rgba(0,0,0,0.3) 40px,
+    rgba(0,0,0,0.7) 120px,
+    black 240px
+  );
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    rgba(0,0,0,0.3) 40px,
+    rgba(0,0,0,0.7) 120px,
+    black 240px
+  );
+}
+
+/* 巨大模糊渐变色块背景 */
+.gradient-bg {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background:
+    /* 左上：Logo 绿色调 */
+    radial-gradient(
+      ellipse 80% 60% at 10% 8%,
+      rgba(62, 138, 46, 0.18) 0%,
+      transparent 70%
+    ),
+    /* 右侧偏中：Logo 黄/金色调 */
+    radial-gradient(
+      ellipse 70% 50% at 85% 30%,
+      rgba(200, 160, 40, 0.12) 0%,
+      transparent 70%
+    ),
+    /* 中下：深绿微光 */
+    radial-gradient(
+      ellipse 90% 50% at 40% 75%,
+      rgba(46, 100, 60, 0.14) 0%,
+      transparent 70%
+    ),
+    /* 右下角：暖橙微光 */
+    radial-gradient(
+      ellipse 50% 40% at 90% 90%,
+      rgba(180, 100, 40, 0.08) 0%,
+      transparent 70%
+    );
 }
 </style>

src/components/DownloadButtons.vue

@@ -22,7 +22,7 @@
 
 <style scoped>
 .download-section {
-  padding: 8px 20px 48px;
+  padding: 8px 48px 56px;
   text-align: center;
 }
 
@@ -36,23 +36,31 @@
 .btn {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  padding: 14px 28px;
-  border-radius: var(--radius-sm);
-  font-size: 1rem;
+  gap: 10px;
+  padding: 12px 32px;
+  border-radius: var(--radius);
+  font-size: 1.05rem;
   font-weight: 600;
   text-decoration: none;
-  transition: background 0.2s, transform 0.1s;
   cursor: pointer;
+  border: none;
+  position: relative;
+  /* 凸起厚度：底部深色边模拟立体感 */
+  border-bottom: 4px solid;
+  border-top: 2px solid;
+  transition: border-bottom-width 0.05s, border-top-width 0.05s, padding 0.05s, filter 0.1s;
 }
 
 .btn:hover {
   text-decoration: none;
-  transform: translateY(-1px);
+  filter: brightness(1.08);
 }
 
+/* 按下：厚度消失，按钮下沉 */
 .btn:active {
-  transform: translateY(0);
+  border-bottom-width: 2px;
+  border-top-width: 3px;
+  filter: brightness(0.92);
 }
 
 .btn-icon {
@@ -61,34 +69,51 @@
   flex-shrink: 0;
 }
 
+/* 主按钮：绿色 */
 .btn-primary {
-  background: var(--accent-green);
+  background: #3e8a2e;
   color: #fff;
+  border-bottom-color: #2a5f1e;
+  border-top-color: #5eb34c;
+  border-left: 2px solid #4a9e38;
+  border-right: 2px solid #4a9e38;
 }
 
-.btn-primary:hover {
-  background: var(--accent-green-hover);
+.btn-primary:active {
+  background: #367a27;
+  border-top-color: #2a5f1e;
+  border-bottom-color: #5eb34c;
 }
 
+/* 次按钮：浅灰 */
 .btn-secondary {
-  background: transparent;
-  color: var(--text-primary);
-  border: 1px solid var(--border-color);
+  background: #c8c8c8;
+  color: #313233;
+  border-bottom-color: #8e8e8e;
+  border-top-color: #e8e8e8;
+  border-left: 2px solid #b0b0b0;
+  border-right: 2px solid #b0b0b0;
 }
 
-.btn-secondary:hover {
-  background: var(--bg-card);
+.btn-secondary:active {
+  background: #b8b8b8;
+  border-top-color: #8e8e8e;
+  border-bottom-color: #e8e8e8;
 }
 
 @media (max-width: 640px) {
+  .download-section {
+    padding: 8px 20px 40px;
+  }
+
   .buttons {
     flex-direction: column;
-    align-items: center;
+    align-items: stretch;
   }
 
   .btn {
-    width: 80%;
     justify-content: center;
+    padding: 12px 24px;
   }
 }
 </style>

src/components/FooterSection.vue

@@ -1,6 +1,6 @@
 <template>
   <footer class="footer">
-    <p class="copyright">&copy;2025 宁波易什网络科技有限公司 版权所有</p>
+    <p class="copyright">&copy;2026 宁波易什网络科技有限公司 版权所有</p>
     <p class="icp">
       ICP备案/许可证号:
       <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">浙ICP备2022033471号-1</a>