<template>
  <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" @click="goToLogin">
          <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" @click="goToLogin">
              <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" @click="goToLogin">
              <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 -->
    <section class="index-features" id="features">
      <div class="section-header">
        <h2 class="cyber-heading">核心功能</h2>
        <div class="header-underline"></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>

    <!-- 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>
</template>

<style>
/* 基础设置与重置 */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Roboto:wght@300;400;500;700&display=swap");

: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);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  background-color: var(--darker);
  color: var(--text-primary);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Orbitron", sans-serif;
  letter-spacing: 1px;
}

/* 主背景视觉效果 */
.main-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--darker) 0%, #0d162e 100%);
  z-index: -2;
  overflow: hidden;
}

.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;
}

@keyframes gridMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 40px;
  }
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.4;
  animation: floatOrb 15s ease-in-out infinite;
}

.orb1 {
  width: 300px;
  height: 300px;
  background: var(--primary);
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.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;
}

.index-title {
  font-size: 64px;
  font-weight: 900;
  margin-bottom: 16px;
  line-height: 1.1;
  position: relative;
}

.gradient-text {
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.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;
}

/* 赛博朋克 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;
}

.outline-button:hover .cyber-arrow {
  transform: translateX(5px);
}

@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;
  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);
}

.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;
}

@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;
  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>
export default {
  name: "Index",
  methods: {
    goToLogin() {
      this.$router.push("/login");
    },
  },
};
</script>
