From 2cbcb14ff7178a848ceb9476ce830569a98b6f89 Mon Sep 17 00:00:00 2001
From: Shu Guang <61069967+shuguangnet@users.noreply.github.com>
Date: Sat, 17 May 2025 00:27:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=BC=95=E5=AF=BC?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Index.vue | 1876 +++++++++++++++++++++++++++++++++++++++----
 1 file changed, 1733 insertions(+), 143 deletions(-)

diff --git a/src/views/Index.vue b/src/views/Index.vue
index beb8286a..dc55a4b5 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -1,196 +1,1786 @@
 <template>
-  <div>
-  <div class="background">
-    <!-- 背景 SVG 元素 -->
-    <svg
-      class="bg-left"
-      height="90vh"
-      viewBox="0 0 960 1080"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <!-- 省略 SVG 内容 -->
-    </svg>
-    <svg
-      class="bg-right"
-      height="90vh"
-      viewBox="0 0 960 1080"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <!-- 省略 SVG 内容 -->
-    </svg>
-  </div>
-  <div class="container">
-    <!-- Header Section -->
-    <div class="header">
-      <h1>智竞云赛-校园竞赛管理系统</h1>
-      <p>
-        基于Vue 2和Spring Boot开发，集成了阿里云OSS、Ant Design Vue、Echarts等多项技术，为校园竞赛管理提供了一站式解决方案。
-      </p>
-      <router-link to="/race/list" target="_blank">立即体验</router-link>
-      <router-link to="/race/list"  target="_blank">联系我们</router-link>
+  <div class="index-landing-page">
+    <!-- 主背景视觉效果 -->
+    <div class="main-background">
+      <div class="grid-overlay"></div>
+      <div class="glow-orb orb1"></div>
+      <div class="glow-orb orb2"></div>
+      <div class="glow-orb orb3"></div>
     </div>
 
+    <!-- 导航栏 -->
+    <nav class="index-nav">
+      <div class="index-nav-logo">
+        <div class="logo-container">
+          <div class="logo-glow"></div>
+          <h1>基于ChatGLM大模型的高校竞赛管理系统</h1>
+        </div>
+      </div>
+      <div class="index-nav-links">
+        <a href="#features" class="nav-link">
+          <span>功能</span>
+          <div class="link-hover-effect"></div>
+        </a>
+        <a href="#about" class="nav-link">
+          <span>关于</span>
+          <div class="link-hover-effect"></div>
+        </a>
+        <a href="#contact" class="nav-link">
+          <span>联系我们</span>
+          <div class="link-hover-effect"></div>
+        </a>
+        <button class="cyber-button" onclick="window.location.href='/login'">
+          <span class="btn-text">登录</span>
+          <span class="btn-glitch"></span>
+        </button>
+        <button
+          class="cyber-button outline"
+          onclick="window.location.href='/register'"
+        >
+          <span class="btn-text">注册</span>
+          <span class="btn-glitch"></span>
+        </button>
+      </div>
+      <div class="menu-toggle">
+        <div class="hamburger">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="index-hero">
+      <div id="particles-js" class="particles-container"></div>
+      <div class="hero-content-wrapper">
+        <div class="index-hero-content animate-fade-in">
+          <div class="title-container">
+            <h1 class="index-title animate-glitch">
+              <span class="gradient-text">基于ChatGLM大模型的</span>
+              <span class="highlight-text">高校竞赛管理系统</span>
+              <div class="title-glitch-effect"></div>
+            </h1>
+            <div class="title-underline"></div>
+          </div>
+          <p class="index-subtitle animate-slide-up-delay">
+            智能校园竞赛管理系统
+            <span class="typing-cursor">|</span>
+          </p>
+          <div class="index-cta-buttons animate-slide-up-delay-2">
+            <button
+              class="cyber-btn glow-button"
+              onclick="window.location.href='/login'"
+            >
+              <span class="cyber-btn-text">开始使用</span>
+              <span class="cyber-btn-glitch"></span>
+              <span class="cyber-btn-glow"></span>
+            </button>
+            <button
+              class="cyber-btn outline-button"
+              onclick="window.scrollTo({top: document.querySelector('#features').offsetTop, behavior: 'smooth'})"
+            >
+              <span class="cyber-btn-text">了解更多</span>
+              <span class="cyber-arrow">→</span>
+            </button>
+          </div>
+        </div>
+        <div class="index-hero-image animate-float">
+          <div class="code-window">
+            <div class="window-header">
+              <span class="dot"></span>
+              <span class="dot"></span>
+              <span class="dot"></span>
+            </div>
+            <div class="code-content">
+              <pre><code class="language-javascript">class <span class="code-class">基于ChatGLM大模型的高校竞赛管理系统</span> {
+  <span class="code-function">constructor</span>() {
+    this.powered = "<span class="code-string">ChatGLM</span>";
+    this.ready = true;
+  }
+
+  <span class="code-function">createCompetition</span>(type) {
+    return {
+      name: "",
+      type: type,
+      status: "<span class="code-string">待开始</span>"
+    };
+  }
+
+  <span class="code-function">assist</span>() {
+    // 智能助手
+    <span class="code-keyword">const</span> reply = <span class="code-keyword">await</span> chatGLM.generate("<span class="code-string">如何组织校园竞赛?</span>");
+    <span class="code-keyword">return</span> reply;
+  }
+}</code></pre>
+              <div class="code-cursor"></div>
+            </div>
+            <div class="code-reflection"></div>
+          </div>
+        </div>
+      </div>
+      <div class="scroll-indicator">
+        <div class="mouse">
+          <div class="mouse-wheel"></div>
+        </div>
+        <p>向下滚动</p>
+      </div>
+    </section>
+
     <!-- Features Section -->
-    <div class="features">
-      <div class="feature-card" v-for="feature in features" :key="feature.title">
-        <h3>{{ feature.title }}</h3>
-        <p>{{ feature.description }}</p>
+    <section class="index-features" id="features">
+      <div class="section-header">
+        <h2 class="cyber-heading">核心功能</h2>
+        <div class="header-underline"></div>
       </div>
-    </div>
+      <div class="index-feature-grid">
+        <div class="index-feature-card">
+          <div class="feature-icon">
+            <svg viewBox="0 0 24 24" class="feature-svg">
+              <path
+                d="M19,5H17V3H19M12,5H10V3H12M5,5H3V3H5M17,19H19V21H17M12,19H10V21H12M5,19H3V21H5M21,21H13V23H21M11,21H3V23H11M21,13H3V15H21M21,9H3V11H21M21,17H3V19H21M21,3H13V5H21M21,7H13V9H21M11,3H3V5H11M11,7H3V9H11M21,15H13V17H21M11,15H3V17H11"
+                fill="currentColor"
+              />
+            </svg>
+            <div class="icon-glow"></div>
+          </div>
+          <h3>竞赛管理</h3>
+          <p>轻松创建和管理校园各类竞赛，支持学科竞赛、文体活动等多种形式</p>
+          <div class="card-hover-effect"></div>
+        </div>
+        <div class="index-feature-card">
+          <div class="feature-icon">
+            <svg viewBox="0 0 24 24" class="feature-svg">
+              <path
+                d="M21,16V4H3V16H21M21,2A2,2 0 0,1 23,4V16A2,2 0 0,1 21,18H14V20H16V22H8V20H10V18H3A2,2 0 0,1 1,16V4A2,2 0 0,1 3,2H21M5,6H14V11H5V6M15,6H19V8H15V6M19,9V14H15V9H19M5,12H9V14H5V12M10,12H14V14H10V12Z"
+                fill="currentColor"
+              />
+            </svg>
+            <div class="icon-glow"></div>
+          </div>
+          <h3>智能助手</h3>
+          <p>基于ChatGLM的智能助手，辅助竞赛组织、解答问题、生成报告</p>
+          <div class="card-hover-effect"></div>
+        </div>
+        <div class="index-feature-card">
+          <div class="feature-icon">
+            <svg viewBox="0 0 24 24" class="feature-svg">
+              <path
+                d="M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z"
+                fill="currentColor"
+              />
+            </svg>
+            <div class="icon-glow"></div>
+          </div>
+          <h3>数据分析</h3>
+          <p>详细的竞赛数据统计、参与情况分析和智能化报表生成</p>
+          <div class="card-hover-effect"></div>
+        </div>
+        <div class="index-feature-card">
+          <div class="feature-icon">
+            <svg viewBox="0 0 24 24" class="feature-svg">
+              <path
+                d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
+                fill="currentColor"
+              />
+            </svg>
+            <div class="icon-glow"></div>
+          </div>
+          <h3>用户管理</h3>
+          <p>完善的用户系统，支持学生、教师和管理员多角色权限管理</p>
+          <div class="card-hover-effect"></div>
+        </div>
+      </div>
+    </section>
 
-    <!-- Contact Section -->
-    <div class="contact-section">
-      <h2>加入我们的社区</h2>
-      <p>扫描下方二维码，加入智竞云赛交流群，了解更多信息与技术交流。</p>
-      <!-- <img src="img/wechat-group-3.jpeg" alt="微信群二维码" /> -->
-    </div>
- <!-- Footer Section -->
-    <div class="footer">© 2023 智竞云赛-校园竞赛管理系统 版权所有</div>
+    <!-- Statistics Section with Cyber Style -->
+    <section class="index-statistics">
+      <div class="stats-background">
+        <div class="stats-grid"></div>
+      </div>
+      <div class="stats-container">
+        <div class="index-stat-item">
+          <div class="stat-counter">50<span class="plus-sign">+</span></div>
+          <div class="stat-line"></div>
+          <p>校园活跃使用</p>
+        </div>
+        <div class="index-stat-item">
+          <div class="stat-counter">300<span class="plus-sign">+</span></div>
+          <div class="stat-line"></div>
+          <p>成功举办的竞赛</p>
+        </div>
+        <div class="index-stat-item">
+          <div class="stat-counter">10000<span class="plus-sign">+</span></div>
+          <div class="stat-line"></div>
+          <p>学生参与人次</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Footer Section -->
+    <footer class="index-footer" id="contact">
+      <div class="footer-glow"></div>
+      <div class="index-footer-content">
+        <div class="index-footer-section">
+          <h3>关于我们</h3>
+          <div class="section-underline"></div>
+          <p>
+            基于ChatGLM大模型的高校竞赛管理系统
+            是基于ChatGLM大语言模型打造的新一代校园竞赛管理系统，致力于提升校园活动组织效率
+          </p>
+        </div>
+        <div class="index-footer-section">
+          <h3>快速链接</h3>
+          <div class="section-underline"></div>
+          <a href="#features" class="footer-link">系统功能</a>
+          <a href="#about" class="footer-link">关于我们</a>
+          <a href="#contact" class="footer-link">联系方式</a>
+        </div>
+        <div class="index-footer-section" id="about">
+          <h3>联系方式</h3>
+          <div class="section-underline"></div>
+          <p>邮箱：contact@campusglm.edu.cn</p>
+          <p>电话：(+86) 123-4567-8900</p>
+          <div class="social-links">
+            <a href="#" class="social-icon">
+              <svg viewBox="0 0 24 24">
+                <path
+                  d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z"
+                />
+              </svg>
+            </a>
+            <a href="#" class="social-icon">
+              <svg viewBox="0 0 24 24">
+                <path
+                  d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"
+                />
+              </svg>
+            </a>
+            <a href="#" class="social-icon">
+              <svg viewBox="0 0 24 24">
+                <path
+                  d="M12.72 2C11.58 2 10.35 2.18 9.14 2.5C6.32 3.29 4.07 5.23 2.89 7.94C1.71 10.6 1.61 13.29 2.61 16.08C3.42 18.33 4.97 20.08 6.94 21.18C7.62 21.6 8.34 21.94 9.08 22.19C9.42 22.31 9.78 22.42 10.14 22.5C11.23 22.73 12.38 22.77 13.5 22.67C16.74 22.36 19.47 20.57 21.11 17.77C22.89 14.71 22.99 11.11 21.35 7.94C20.2 5.72 18.19 4.03 15.86 3.17C14.9 2.82 13.8 2.6 12.72 2M12.21 4C14.33 4 16.3 4.83 17.76 6.31C19.22 7.79 20 9.79 20 12C20 14.21 19.22 16.21 17.76 17.69C16.3 19.17 14.33 20 12.21 20C10.09 20 8.12 19.17 6.66 17.69C5.2 16.21 4.42 14.21 4.42 12C4.42 9.79 5.2 7.79 6.66 6.31C8.12 4.83 10.09 4 12.21 4M11 7V17H13V7H11Z"
+                />
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="index-footer-bottom">
+        <p>
+          &copy; 2025 基于ChatGLM大模型的高校竞赛管理系统. All rights reserved.
+        </p>
+      </div>
+    </footer>
   </div>
-</div>
 </template>
 
-<script setup>
-import { ref } from "vue";
+<style>
+/* 基础设置与重置 */
+@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Roboto:wght@300;400;500;700&display=swap");
 
-// 定义特性信息
-const features = ref([
-  {
-    title: "现代化前端技术",
-    description:
-      "系统采用Vue 2框架，结合阿里的Ant Design Vue组件库，提供简洁、易用的用户界面，并通过Vuex和Vue-Router实现高效的状态和路由管理。",
-  },
-  {
-    title: "自动化数据交互",
-    description:
-      "通过OpenApi自动生成前端请求代码，极大简化了与后端的数据交互流程，提升了开发效率。",
-  },
-  {
-    title: "多样化数据展示",
-    description:
-      "平台内置Echarts，支持丰富的数据可视化展示，提供全面的数据分析能力，助力竞赛管理决策。",
-  },
-  {
-    title: "强大的后端支持",
-    description:
-      "后端基于Spring Boot框架，集成阿里云OSS实现文件托管与防盗链，保障文件的安全性和可扩展性。",
-  },
-  {
-    title: "高效数据导入",
-    description:
-      "使用EasyExcel处理用户数据的批量导入，快速高效地完成数据录入工作，提高数据处理效率。",
-  },
-  {
-    title: "智能AI对接",
-    description:
-      "平台接入了讯飞星火API与ollma大模型，实现了智能语音识别和自然语言处理，提供更智能的用户体验。",
-  },
-]);
-</script>
+:root {
+  --primary: #4e54c8;
+  --primary-dark: #3f44ae;
+  --primary-light: #8f94fb;
+  --secondary: #ff3d81;
+  --secondary-dark: #c0246e;
+  --accent: #ba68c8;
+  --dark: #111827;
+  --darker: #0b0f1a;
+  --light: #e0f7fa;
+  --grid-color: rgba(78, 84, 200, 0.1);
+  --text-primary: #e0f7fa;
+  --text-secondary: #b6e7ef;
+  --shadow-neon: 0 0 15px rgba(78, 84, 200, 0.5),
+    0 0 30px rgba(78, 84, 200, 0.3);
+}
 
-<style scoped>
 * {
+  margin: 0;
+  padding: 0;
   box-sizing: border-box;
 }
 
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
-    Roboto, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei",
-    "Microsoft Jhenghei", sans-serif;
-  color: #333;
+  font-family: "Roboto", sans-serif;
+  background-color: var(--darker);
+  color: var(--text-primary);
+  overflow-x: hidden;
 }
 
-.background {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Orbitron", sans-serif;
+  letter-spacing: 1px;
+}
+
+/* 主背景视觉效果 */
+.main-background {
   position: fixed;
-  left: 0px;
-  bottom: 0px;
-  right: 0px;
-  top: 0px;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, var(--darker) 0%, #0d162e 100%);
+  z-index: -2;
   overflow: hidden;
-  background-color: var(--color-bg-1);
+}
+
+.grid-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(
+      to right,
+      var(--grid-color) 1px,
+      transparent 1px
+    ),
+    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
+  background-size: 40px 40px;
+  opacity: 0.5;
   z-index: -1;
+  transform: perspective(500px) rotateX(60deg);
+  transform-origin: center center;
+  animation: gridMove 50s linear infinite;
 }
 
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px;
+@keyframes gridMove {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 0 40px;
+  }
 }
 
-.header {
-  text-align: center;
-  padding: 50px 20px;
-  background: linear-gradient(90deg, #4b79a1 0%, #283e51 100%);
-  color: #fff;
-  border-radius: 8px;
+.glow-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(100px);
+  opacity: 0.4;
+  animation: floatOrb 15s ease-in-out infinite;
 }
 
-.header h1 {
-  font-size: 48px;
-  margin-bottom: 20px;
+.orb1 {
+  width: 300px;
+  height: 300px;
+  background: var(--primary);
+  top: 20%;
+  left: 10%;
+  animation-delay: 0s;
 }
 
-.header p {
-  font-size: 20px;
-  line-height: 1.5;
+.orb2 {
+  width: 400px;
+  height: 400px;
+  background: var(--secondary);
+  bottom: 10%;
+  right: 15%;
+  animation-delay: -5s;
+}
+
+.orb3 {
+  width: 250px;
+  height: 250px;
+  background: var(--accent);
+  top: 60%;
+  left: 40%;
+  animation-delay: -10s;
+}
+
+@keyframes floatOrb {
+  0%,
+  100% {
+    transform: translateY(0) scale(1);
+  }
+  50% {
+    transform: translateY(-30px) scale(1.1);
+  }
+}
+
+/* 导航栏样式 */
+.index-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 64px;
+  background: rgba(11, 15, 26, 0.8);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 2px 20px rgba(78, 84, 200, 0.1);
+  z-index: 1000;
+  border-bottom: 1px solid rgba(78, 84, 200, 0.2);
+}
+
+.logo-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.index-nav-logo h1 {
+  font-size: 28px;
+  font-weight: 700;
+  background: linear-gradient(45deg, var(--primary), var(--primary-light));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  margin: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.logo-glow {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: var(--primary);
+  filter: blur(15px);
+  opacity: 0.3;
+  z-index: 0;
+}
+
+.index-nav-links {
+  display: flex;
+  gap: 32px;
+  align-items: center;
+}
+
+.nav-link {
+  position: relative;
+  color: var(--text-primary);
+  text-decoration: none;
+  font-size: 16px;
+  transition: color 0.3s;
+  padding: 5px 0;
+}
+
+.nav-link span {
+  position: relative;
+  z-index: 1;
+}
+
+.link-hover-effect {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--primary), transparent);
+  transition: width 0.3s ease;
+}
+
+.nav-link:hover .link-hover-effect {
+  width: 100%;
+}
+
+.nav-link:hover {
+  color: var(--primary);
+}
+
+/* 赛博朋克按钮样式 */
+.cyber-button {
+  position: relative;
+  background: transparent;
+  color: var(--primary);
+  font-family: "Orbitron", sans-serif;
+  font-size: 14px;
+  padding: 8px 20px;
+  border: 1px solid var(--primary);
+  box-shadow: inset 0 0 5px var(--primary-dark), 0 0 5px var(--primary-dark);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.3s;
+  outline: none;
+}
+
+.cyber-button::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: var(--primary);
+  transform: scaleX(0);
+  transform-origin: right center;
+  transition: transform 0.3s ease;
+}
+
+.cyber-button:hover::before {
+  transform: scaleX(1);
+  transform-origin: left center;
+}
+
+.cyber-button:hover {
+  background: rgba(78, 84, 200, 0.1);
+  text-shadow: 0 0 5px var(--primary);
+}
+
+.cyber-button.outline {
+  border-color: var(--primary-dark);
+  color: var(--text-primary);
+}
+
+.btn-glitch {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--primary);
+  filter: blur(5px);
+  opacity: 0.3;
+}
+
+.cyber-button:hover .btn-glitch {
+  display: block;
+  animation: glitch 0.3s linear;
+}
+
+@keyframes glitch {
+  0% {
+    transform: translate(0);
+  }
+  20% {
+    transform: translate(-5px, 5px);
+  }
+  40% {
+    transform: translate(5px, -5px);
+  }
+  60% {
+    transform: translate(-3px, -3px);
+  }
+  80% {
+    transform: translate(3px, 3px);
+  }
+  100% {
+    transform: translate(0);
+  }
+}
+
+/* 移动菜单按钮 */
+.menu-toggle {
+  display: none;
+  cursor: pointer;
+}
+
+.hamburger {
+  width: 30px;
+  height: 20px;
+  position: relative;
+}
+
+.hamburger span {
+  display: block;
+  width: 100%;
+  height: 2px;
+  background: var(--primary);
+  position: absolute;
+  left: 0;
+  transition: all 0.3s;
+}
+
+.hamburger span:nth-child(1) {
+  top: 0;
+}
+
+.hamburger span:nth-child(2) {
+  top: 9px;
+}
+
+.hamburger span:nth-child(3) {
+  top: 18px;
+}
+
+/* Hero Section */
+.index-hero {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  padding: 64px;
+  overflow: hidden;
+}
+
+.particles-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.hero-content-wrapper {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  z-index: 2;
+}
+
+.index-hero-content {
+  flex: 1;
+  max-width: 600px;
+}
+
+.title-container {
+  position: relative;
   margin-bottom: 30px;
 }
 
-.header a {
-  margin: 0 10px;
-  display: inline-block;
-  padding: 10px 20px;
-  background-color: #1890ff;
-  color: #fff;
-  border-radius: 20px;
-  text-decoration: none;
-  transition: background-color 0.3s;
+.index-title {
+  font-size: 64px;
+  font-weight: 900;
+  margin-bottom: 16px;
+  line-height: 1.1;
+  position: relative;
 }
 
-.header a:hover {
-  background-color: #005cbf;
+.gradient-text {
+  background: linear-gradient(90deg, var(--primary), var(--primary-light));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
 }
 
-.features {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+.highlight-text {
+  color: var(--text-primary);
+  position: relative;
+}
+
+.title-glitch-effect {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--primary);
+  opacity: 0;
+  filter: blur(1px);
+  z-index: -1;
+  animation: titleGlitch 5s infinite;
+}
+
+@keyframes titleGlitch {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  92%,
+  94% {
+    opacity: 0.3;
+    transform: translate(2px, -3px);
+  }
+  93%,
+  95% {
+    opacity: 0.3;
+    transform: translate(-3px, 1px);
+  }
+}
+
+.title-underline {
+  height: 3px;
+  width: 120px;
+  background: linear-gradient(90deg, var(--primary), transparent);
+  margin-bottom: 20px;
+}
+
+.index-subtitle {
+  font-size: 24px;
+  color: var(--text-secondary);
+  margin-bottom: 32px;
+  font-weight: 300;
+}
+
+.typing-cursor {
+  animation: blink 1s step-end infinite;
+  color: var(--primary);
+}
+
+@keyframes blink {
+  from,
+  to {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+.index-cta-buttons {
+  display: flex;
   gap: 20px;
-  margin-top: 50px;
 }
 
-.feature-card {
-  background-color: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+/* 赛博朋克 CTA 按钮 */
+.cyber-btn {
+  position: relative;
+  background: transparent;
+  color: var(--text-primary);
+  font-family: "Orbitron", sans-serif;
+  font-size: 16px;
+  padding: 12px 30px;
+  border: 1px solid var(--primary);
+  outline: none;
+  cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  overflow: hidden;
+  transition: all 0.3s;
+}
+
+.cyber-btn-text {
+  position: relative;
+  z-index: 2;
+}
+
+.cyber-btn-glitch {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--primary);
+  opacity: 0;
+  z-index: 1;
+  transform: translateX(-100%);
+}
+
+.cyber-btn-glow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--primary);
+  filter: blur(15px);
+  opacity: 0;
+  z-index: 0;
+  transition: opacity 0.3s;
+}
+
+.glow-button {
+  background: var(--primary);
+  color: var(--darker);
+  box-shadow: 0 0 10px var(--primary-dark);
+}
+
+.glow-button:hover {
+  background: transparent;
+  color: var(--primary);
+}
+
+.glow-button:hover .cyber-btn-glow {
+  opacity: 0.5;
+}
+
+.glow-button:hover .cyber-btn-glitch {
+  animation: btnGlitch 0.3s forwards;
+}
+
+.outline-button {
+  background: transparent;
+  color: var(--text-primary);
+  border: 1px solid rgba(78, 84, 200, 0.5);
+}
+
+.outline-button:hover {
+  border-color: var(--primary);
+  box-shadow: 0 0 10px rgba(78, 84, 200, 0.2);
+}
+
+.cyber-arrow {
+  display: inline-block;
+  margin-left: 8px;
   transition: transform 0.3s;
 }
 
-.feature-card:hover {
-  transform: translateY(-5px);
+.outline-button:hover .cyber-arrow {
+  transform: translateX(5px);
 }
 
-.contact-section {
-  text-align: center;
-  padding: 50px 20px;
-  background: #f0f2f5;
+@keyframes btnGlitch {
+  0% {
+    opacity: 0.3;
+    transform: translateX(-100%);
+  }
+  33% {
+    opacity: 0.3;
+    transform: translateX(50%);
+  }
+  66% {
+    opacity: 0.3;
+    transform: translateX(-25%);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+/* 代码窗口样式 */
+.index-hero-image {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  perspective: 1000px;
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0) rotateY(-5deg);
+  }
+  50% {
+    transform: translateY(-20px) rotateY(5deg);
+  }
+}
+
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+
+.code-window {
+  width: 450px;
+  max-width: 100%;
+  background: rgba(13, 22, 46, 0.8);
+  border: 1px solid rgba(78, 84, 200, 0.3);
   border-radius: 8px;
-  margin-top: 40px;
+  overflow: hidden;
+  box-shadow: 0 0 20px rgba(78, 84, 200, 0.2), 0 0 40px rgba(78, 84, 200, 0.1);
+  position: relative;
+  transform: perspective(1000px) rotateY(-5deg);
+  transform-style: preserve-3d;
+  backdrop-filter: blur(5px);
 }
 
-.contact-section img {
-  max-width: 180px;
-  margin: 20px auto;
-  display: block;
+.code-window::before {
+  content: "";
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  right: -3px;
+  bottom: -3px;
+  background: linear-gradient(45deg, var(--primary), var(--secondary));
+  z-index: -1;
+  border-radius: 10px;
+  opacity: 0.5;
+  animation: borderGlow 4s linear infinite;
 }
 
-.footer {
+@keyframes borderGlow {
+  0%,
+  100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+.window-header {
+  display: flex;
+  padding: 10px 15px;
+  background: rgba(0, 0, 0, 0.3);
+  border-bottom: 1px solid rgba(78, 84, 200, 0.2);
+}
+
+.dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 8px;
+}
+
+.dot:nth-child(1) {
+  background-color: #ff5f56;
+}
+
+.dot:nth-child(2) {
+  background-color: #ffbd2e;
+}
+
+.dot:nth-child(3) {
+  background-color: #27c93f;
+}
+
+.code-content {
+  padding: 20px;
+  position: relative;
+  overflow: hidden;
+}
+
+.code-content pre {
+  margin: 0;
+  font-family: "Fira Code", monospace;
+  color: var(--text-primary);
+  line-height: 1.5;
+  font-size: 14px;
+}
+
+.code-class {
+  color: #ff9d00;
+}
+
+.code-function {
+  color: #66d9ef;
+}
+
+.code-string {
+  color: #a5e844;
+}
+
+.code-keyword {
+  color: #f92672;
+}
+
+.code-cursor {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  width: 8px;
+  height: 16px;
+  background-color: var(--primary);
+  animation: blink 1s step-end infinite;
+}
+
+.code-reflection {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.03),
+    transparent 80%
+  );
+  pointer-events: none;
+}
+
+/* 滚动指示器 */
+.scroll-indicator {
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  opacity: 0.7;
+  transition: opacity 0.3s;
+  animation: fadeInUp 1s ease-out 2s forwards;
+  opacity: 0;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translate(-50%, 20px);
+  }
+  to {
+    opacity: 0.7;
+    transform: translate(-50%, 0);
+  }
+}
+
+.scroll-indicator:hover {
+  opacity: 1;
+}
+
+.mouse {
+  width: 28px;
+  height: 46px;
+  border: 2px solid var(--primary);
+  border-radius: 14px;
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.mouse-wheel {
+  width: 4px;
+  height: 8px;
+  background: var(--primary);
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 2px;
+  animation: scrollWheel 2s infinite;
+}
+
+@keyframes scrollWheel {
+  0% {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(-50%) translateY(20px);
+  }
+}
+
+.scroll-indicator p {
+  font-size: 14px;
+  color: var(--text-secondary);
+  font-weight: 300;
+}
+
+/* 主要部分样式 */
+.section-header {
+  text-align: center;
+  margin-bottom: 60px;
+  position: relative;
+}
+
+.cyber-heading {
+  font-size: 40px;
+  color: var(--text-primary);
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  margin-bottom: 16px;
+  position: relative;
+  display: inline-block;
+}
+
+.cyber-heading::before,
+.cyber-heading::after {
+  content: "";
+  position: absolute;
+  height: 2px;
+  background: var(--primary);
+}
+
+.cyber-heading::before {
+  width: 30px;
+  left: -40px;
+  top: 50%;
+}
+
+.cyber-heading::after {
+  width: 30px;
+  right: -40px;
+  top: 50%;
+}
+
+.header-underline {
+  width: 100px;
+  height: 3px;
+  background: linear-gradient(90deg, transparent, var(--primary), transparent);
+  margin: 0 auto;
+}
+
+/* Features Section */
+.index-features {
+  padding: 100px 64px;
+  position: relative;
+  background: rgba(13, 22, 46, 0.7);
+  z-index: 1;
+}
+
+.index-feature-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 40px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.index-feature-card {
+  background: rgba(17, 24, 39, 0.6);
+  backdrop-filter: blur(10px);
+  padding: 30px;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+  position: relative;
+  border: 1px solid rgba(78, 84, 200, 0.1);
+  overflow: hidden;
+  z-index: 1;
+}
+
+.index-feature-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: linear-gradient(90deg, var(--primary), var(--primary-light));
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.5s ease;
+}
+
+.index-feature-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
+  border-color: rgba(78, 84, 200, 0.3);
+}
+
+.index-feature-card:hover::before {
+  transform: scaleX(1);
+}
+
+.card-hover-effect {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    135deg,
+    transparent 0%,
+    rgba(78, 84, 200, 0.05) 100%
+  );
+  opacity: 0;
+  transition: opacity 0.3s;
+  z-index: -1;
+}
+
+.index-feature-card:hover .card-hover-effect {
+  opacity: 1;
+}
+
+.feature-icon {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.feature-svg {
+  width: 40px;
+  height: 40px;
+  color: var(--primary);
+  z-index: 1;
+}
+
+.icon-glow {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: var(--primary);
+  border-radius: 50%;
+  filter: blur(15px);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.index-feature-card:hover .icon-glow {
+  opacity: 0.3;
+}
+
+.index-feature-card h3 {
+  font-size: 24px;
+  color: var(--text-primary);
+  margin-bottom: 16px;
+  font-weight: 500;
+}
+
+.index-feature-card p {
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+/* Statistics Section */
+.index-statistics {
+  padding: 80px 64px;
+  position: relative;
+  overflow: hidden;
+}
+
+.stats-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--darker);
+  z-index: -1;
+}
+
+.stats-grid {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(
+      to right,
+      rgba(78, 84, 200, 0.05) 1px,
+      transparent 1px
+    ),
+    linear-gradient(to bottom, rgba(78, 84, 200, 0.05) 1px, transparent 1px);
+  background-size: 20px 20px;
+  z-index: -1;
+}
+
+.stats-container {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  max-width: 1200px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.index-stat-item {
   text-align: center;
   padding: 20px;
-  color: #666;
-  margin-top: 30px;
+  width: 300px;
+  max-width: 100%;
+  position: relative;
+}
+
+.stat-counter {
+  font-size: 60px;
+  font-weight: 700;
+  font-family: "Orbitron", sans-serif;
+  background: linear-gradient(90deg, var(--primary), var(--primary-light));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  margin-bottom: 10px;
+  position: relative;
+  display: inline-block;
+}
+
+.plus-sign {
+  font-size: 40px;
+  position: relative;
+  top: -10px;
+}
+
+.stat-line {
+  width: 40px;
+  height: 3px;
+  background: var(--primary);
+  margin: 15px auto;
+}
+
+.index-stat-item p {
+  font-size: 18px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+/* Footer Section */
+.index-footer {
+  padding: 80px 64px 40px;
+  background: linear-gradient(0deg, var(--darker), rgba(13, 22, 46, 0.8));
+  position: relative;
+  overflow: hidden;
+  border-top: 1px solid rgba(78, 84, 200, 0.1);
+}
+
+.footer-glow {
+  position: absolute;
+  bottom: -50px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 500px;
+  height: 100px;
+  background: var(--primary);
+  filter: blur(100px);
+  opacity: 0.1;
+  z-index: 0;
+}
+
+.index-footer-content {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 64px;
+  max-width: 1200px;
+  margin: 0 auto 48px;
+  position: relative;
+  z-index: 1;
+}
+
+.index-footer-section h3 {
+  font-size: 20px;
+  color: var(--text-primary);
+  margin-bottom: 20px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.section-underline {
+  width: 40px;
+  height: 2px;
+  background: var(--primary);
+  margin-bottom: 20px;
+}
+
+.index-footer-section p {
+  color: var(--text-secondary);
+  margin-bottom: 12px;
+  line-height: 1.6;
+}
+
+.footer-link {
+  display: block;
+  color: var(--text-secondary);
+  text-decoration: none;
+  margin-bottom: 12px;
+  transition: all 0.3s;
+  position: relative;
+  padding-left: 15px;
+}
+
+.footer-link::before {
+  content: ">";
+  color: var(--primary);
+  position: absolute;
+  left: 0;
+  transition: transform 0.3s;
+}
+
+.footer-link:hover {
+  color: var(--primary);
+  transform: translateX(5px);
+}
+
+.social-links {
+  display: flex;
+  gap: 15px;
+  margin-top: 20px;
+}
+
+.social-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(78, 84, 200, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+  border: 1px solid rgba(78, 84, 200, 0.2);
+}
+
+.social-icon svg {
+  width: 20px;
+  height: 20px;
+  fill: var(--text-secondary);
+  transition: fill 0.3s;
+}
+
+.social-icon:hover {
+  background: var(--primary);
+  transform: translateY(-3px);
+  box-shadow: 0 5px 15px rgba(78, 84, 200, 0.3);
+}
+
+.social-icon:hover svg {
+  fill: var(--darker);
+}
+
+.index-footer-bottom {
+  text-align: center;
+  padding-top: 32px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  position: relative;
+  z-index: 1;
+}
+
+.index-footer-bottom p {
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+/* 动画类 */
+.animate-glitch {
+  position: relative;
+}
+
+.animate-glitch::before,
+.animate-glitch::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--darker);
+}
+
+.animate-glitch::before {
+  left: 2px;
+  text-shadow: -2px 0 var(--secondary);
+  animation: glitch-anim-1 2s infinite linear alternate-reverse;
+}
+
+.animate-glitch::after {
+  left: -2px;
+  text-shadow: 2px 0 var(--primary);
+  animation: glitch-anim-2 3s infinite linear alternate-reverse;
+}
+
+@keyframes glitch-anim-1 {
+  0%,
+  100% {
+    clip-path: inset(50% 0 50% 0);
+  }
+  10% {
+    clip-path: inset(10% 0 85% 0);
+  }
+  20% {
+    clip-path: inset(75% 0 23% 0);
+  }
+  30% {
+    clip-path: inset(23% 0 61% 0);
+  }
+  40% {
+    clip-path: inset(71% 0 3% 0);
+  }
+  50% {
+    clip-path: inset(40% 0 43% 0);
+  }
+  60% {
+    clip-path: inset(14% 0 80% 0);
+  }
+  70% {
+    clip-path: inset(95% 0 1% 0);
+  }
+  80% {
+    clip-path: inset(50% 0 31% 0);
+  }
+  90% {
+    clip-path: inset(17% 0 69% 0);
+  }
+}
+
+@keyframes glitch-anim-2 {
+  0%,
+  100% {
+    clip-path: inset(50% 0 50% 0);
+  }
+  15% {
+    clip-path: inset(34% 0 12% 0);
+  }
+  25% {
+    clip-path: inset(82% 0 7% 0);
+  }
+  35% {
+    clip-path: inset(27% 0 51% 0);
+  }
+  45% {
+    clip-path: inset(62% 0 33% 0);
+  }
+  55% {
+    clip-path: inset(4% 0 94% 0);
+  }
+  65% {
+    clip-path: inset(15% 0 75% 0);
+  }
+  75% {
+    clip-path: inset(89% 0 8% 0);
+  }
+  85% {
+    clip-path: inset(32% 0 56% 0);
+  }
+  95% {
+    clip-path: inset(79% 0 6% 0);
+  }
+}
+
+/* 响应式调整 */
+@media (max-width: 992px) {
+  .index-hero {
+    padding: 100px 40px 64px;
+  }
+
+  .hero-content-wrapper {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .index-hero-content {
+    margin-bottom: 60px;
+    max-width: 100%;
+  }
+
+  .title-underline {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .index-cta-buttons {
+    justify-content: center;
+  }
+
+  .index-features,
+  .index-statistics {
+    padding: 80px 40px;
+  }
+}
+
+@media (max-width: 768px) {
+  .index-nav {
+    padding: 20px;
+  }
+
+  .index-nav-links {
+    display: none;
+    position: absolute;
+    top: 80px;
+    left: 0;
+    width: 100%;
+    flex-direction: column;
+    background: rgba(11, 15, 26, 0.95);
+    padding: 20px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+    z-index: 999;
+    border-bottom: 1px solid rgba(78, 84, 200, 0.2);
+  }
+
+  .index-nav-links.active {
+    display: flex;
+  }
+
+  .menu-toggle {
+    display: block;
+  }
+
+  .index-title {
+    font-size: 48px;
+  }
+
+  .index-subtitle {
+    font-size: 20px;
+  }
+
+  .cyber-btn {
+    padding: 10px 20px;
+    font-size: 14px;
+  }
+
+  .index-features,
+  .index-statistics,
+  .index-footer {
+    padding: 60px 20px;
+  }
+}
+
+@media (max-width: 576px) {
+  .index-title {
+    font-size: 38px;
+  }
+
+  .cyber-heading {
+    font-size: 30px;
+  }
+
+  .index-feature-card {
+    padding: 20px;
+  }
+
+  .index-cta-buttons {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .stat-counter {
+    font-size: 40px;
+  }
+
+  .plus-sign {
+    font-size: 30px;
+  }
+
+  .index-footer-content {
+    grid-template-columns: 1fr;
+    gap: 40px;
+  }
 }
 </style>
+
+<script setup>
+import { onMounted, ref } from "vue";
+
+// 移动菜单控制
+const menuOpen = ref(false);
+
+const toggleMenu = () => {
+  menuOpen.value = !menuOpen.value;
+  const navLinks = document.querySelector(".index-nav-links");
+  if (navLinks) {
+    if (menuOpen.value) {
+      navLinks.classList.add("active");
+    } else {
+      navLinks.classList.remove("active");
+    }
+  }
+};
+
+onMounted(() => {
+  // 设置菜单切换事件
+  const menuToggle = document.querySelector(".menu-toggle");
+  if (menuToggle) {
+    menuToggle.addEventListener("click", toggleMenu);
+  }
+
+  // 添加随机数字元素到背景
+  const addMatrixElements = () => {
+    const grid = document.createElement("div");
+    grid.classList.add("matrix-bg");
+    document.body.appendChild(grid);
+
+    for (let i = 0; i < 50; i++) {
+      const digit = document.createElement("div");
+      digit.classList.add("matrix-digit");
+      digit.style.left = `${Math.random() * 100}%`;
+      digit.style.top = `${Math.random() * 100}%`;
+      digit.style.animationDelay = `${Math.random() * 5}s`;
+      digit.textContent = Math.floor(Math.random() * 10);
+      grid.appendChild(digit);
+    }
+  };
+
+  // 初始化 particles.js（如果有）
+  if (typeof particlesJS !== "undefined") {
+    particlesJS("particles-js", {
+      particles: {
+        number: { value: 80, density: { enable: true, value_area: 800 } },
+        color: { value: "#4e54c8" },
+        shape: { type: "circle" },
+        opacity: { value: 0.5, random: true },
+        size: { value: 3, random: true },
+        line_linked: {
+          enable: true,
+          distance: 150,
+          color: "#4e54c8",
+          opacity: 0.2,
+          width: 1,
+        },
+        move: {
+          enable: true,
+          speed: 1.5,
+          direction: "none",
+          random: true,
+          straight: false,
+          out_mode: "out",
+          bounce: false,
+        },
+      },
+      interactivity: {
+        detect_on: "canvas",
+        events: {
+          onhover: { enable: true, mode: "grab" },
+          onclick: { enable: true, mode: "push" },
+          resize: true,
+        },
+        modes: {
+          grab: { distance: 140, line_linked: { opacity: 0.5 } },
+          push: { particles_nb: 3 },
+        },
+      },
+      retina_detect: true,
+    });
+  } else {
+    // 如果 particlesJS 未加载，创建备用背景
+    addMatrixElements();
+  }
+
+  // 动画字符效果
+  const subtitleElement = document.querySelector(".index-subtitle");
+  if (subtitleElement) {
+    const text = subtitleElement.textContent.trim().replace("|", "");
+    subtitleElement.textContent = "";
+
+    const typeText = async () => {
+      for (let i = 0; i < text.length; i++) {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        subtitleElement.textContent = text.substring(0, i + 1);
+        if (i === text.length - 1) {
+          subtitleElement.innerHTML += '<span class="typing-cursor">|</span>';
+        }
+      }
+    };
+
+    setTimeout(typeText, 1000);
+  }
+
+  // 添加滚动动画
+  const scrollElements = document.querySelectorAll(
+    ".index-feature-card, .index-stat-item"
+  );
+
+  const isElementInView = (el) => {
+    const rect = el.getBoundingClientRect();
+    return (
+      rect.top <=
+      (window.innerHeight || document.documentElement.clientHeight) * 0.8
+    );
+  };
+
+  const displayScrollElement = (element) => {
+    element.classList.add("scrolled");
+  };
+
+  const hideScrollElement = (element) => {
+    element.classList.remove("scrolled");
+  };
+
+  const handleScrollAnimation = () => {
+    scrollElements.forEach((el) => {
+      if (isElementInView(el)) {
+        displayScrollElement(el);
+      } else {
+        hideScrollElement(el);
+      }
+    });
+  };
+
+  // 添加滚动类
+  const styleSheet = document.styleSheets[0];
+  styleSheet.insertRule(
+    `
+    .index-feature-card, .index-stat-item {
+      opacity: 0;
+      transform: translateY(30px);
+      transition: opacity 0.6s ease, transform 0.6s ease;
+    }
+  `,
+    styleSheet.cssRules.length
+  );
+
+  styleSheet.insertRule(
+    `
+    .index-feature-card.scrolled, .index-stat-item.scrolled {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  `,
+    styleSheet.cssRules.length
+  );
+
+  // 初始检查和添加滚动监听
+  setTimeout(handleScrollAnimation, 100);
+  window.addEventListener("scroll", handleScrollAnimation);
+});
+</script>