add:增加官网首页

src/router/index.js

@@ -16,7 +16,7 @@ import examHistory from '@/views/education/examHistory'
 import courseDetail from '@/views/course/courseDetail'
 import coursePlay from '@/views/course/coursePlayDetail'
 import courseVideo from '@/views/course/courseVideo'
-
+import officialweb from "../views/officialweb";
 import courses from '@/views/course/courses'
 
 import examReport from '@/views/education/examReport'
@@ -35,6 +35,11 @@ const router =  new Router({
       component: login,
       name: 'login',
     },
+    {
+      path: '/officialweb',
+      component: officialweb,
+      name: 'officialweb',
+    },
 
     {
       path: '/video',
@@ -186,17 +191,23 @@ const router =  new Router({
 
 // vue  路由全局拦截器
 router.beforeEach(function (to, from, next) {
-  let token = localStorage.getItem('token')
-  if (to.path === '/login') {
-    if (token) {
-      location.href = '/'
+  //
+
+  if (to.name !== 'login'){
+    let token = localStorage.getItem('token')
+    if (to.path === '/officialweb') {
+      if (token) {
+        location.href = '/'
+      } else {
+        next()
+      }
     } else {
+      if (!token) {
+        next({ name: 'officialweb' }) // 没有token 跳转登录页面
+      }
       next()
     }
-  } else {
-    if (!token) {
-      next({ name: 'login' }) // 没有token 跳转登录页面
-    }
+  }else {
     next()
   }
 })

src/views/officialweb.vue

@@ -0,0 +1,960 @@
+<template>
+  <div id="app">
+    <!-- 导航栏 - 使用Element Navbar组件 -->
+    <nav class="custom-nav">
+      <div class="nav-logo" @click="scrollToTop">
+        <i class="fas fa-brain"></i> GPS-REN
+      </div>
+
+      <el-menu class="nav-menu" mode="horizontal" :default-active="activeNav">
+        <el-menu-item index="1" @click="scrollToSection('home')">首页</el-menu-item>
+        <el-menu-item index="2" @click="scrollToSection('model')">GPS-REN教学法</el-menu-item>
+        <el-menu-item index="3" @click="scrollToSection('features')">平台功能</el-menu-item>
+        <el-menu-item index="4" @click="scrollToSection('cases')">使用案例</el-menu-item>
+        <el-menu-item index="5" @click="scrollToSection('about')">关于我们</el-menu-item>
+      </el-menu>
+
+      <div class="nav-buttons">
+        <el-button class="nav-btn-outline" @click="showLoginDialog">登录</el-button>
+        <el-button class="nav-btn-primary" type="primary" @click="showRegisterDialog">免费注册</el-button>
+      </div>
+    </nav>
+
+    <!-- 主体内容 -->
+    <div>
+      <!-- 英雄区域 -->
+      <section class="hero" id="home">
+        <div class="hero-content">
+          <h1>培养能驾驭AI的高阶人才</h1>
+          <p>面向AI时代的GPS-REN教学模式，重塑高等教育，让学生真正掌握驾驭人工智能的能力</p>
+          <div class="hero-buttons">
+            <a href="#" class="hero-btn hero-btn-primary">教师体验平台</a>
+            <a href="#" class="hero-btn hero-btn-outline">学生端演示</a>
+          </div>
+        </div>
+      </section>
+
+      <!-- GPS-REN模型展示 -->
+      <section class="model-section" id="model">
+        <div class="section-header">
+          <h2>GPS-REN 教学模式</h2>
+          <p>系统化培养AI时代所需的高阶思维与问题解决能力</p>
+        </div>
+
+        <div class="model-steps">
+          <el-card class="step-card" shadow="hover">
+            <div class="step-icon">
+              G
+            </div>
+            <h3>目标导向</h3>
+            <p>明确学习目标，聚焦核心问题</p>
+          </el-card>
+
+          <el-card class="step-card" shadow="hover">
+            <div class="step-icon">
+              P
+            </div>
+            <h3>问题定义</h3>
+            <p>精准描述问题，确立解决方向</p>
+          </el-card>
+
+          <el-card class="step-card" shadow="hover">
+            <div class="step-icon">
+              S
+            </div>
+            <h3>系统拆解</h3>
+            <p>分解复杂问题，建立解决框架</p>
+          </el-card>
+
+          <el-card class="step-card" shadow="hover">
+            <div class="step-icon">
+              R
+            </div>
+            <h3>结果整合</h3>
+            <p>整合解决方案，形成完整成果</p>
+          </el-card>
+
+          <el-card class="step-card" shadow="hover">
+            <div class="step-icon">
+              E
+            </div>
+            <h3>结果评估</h3>
+            <p>系统评估方案，验证达成效果</p>
+          </el-card>
+
+          <el-card class="step-card" shadow="hover">
+            <div class="step-icon">
+              N
+            </div>
+            <h3>总结新知识</h3>
+            <p>提炼核心知识，实现认知升级</p>
+          </el-card>
+        </div>
+      </section>
+
+      <!-- 平台功能 -->
+      <section class="features-section" id="features">
+        <div class="features">
+          <div class="feature-text">
+            <h2>智能教学平台</h2>
+            <p>GPS-REN教学平台为教师和学生提供完整的AI时代教学解决方案，实现教与学的智能闭环。</p>
+
+            <div class="feature-points">
+              <el-row :gutter="20" style="margin-bottom: 20px;">
+                <el-col :span="2">
+                  <i class="el-icon-success" style="color: var(--primary); font-size: 1.5rem;"></i>
+                </el-col>
+                <el-col :span="22">
+                  <h3>教师端</h3>
+                  <p>轻松创建课程目标，AI智能生成评价标准，跟踪学生学习进度</p>
+                </el-col>
+              </el-row>
+
+              <el-row :gutter="20" style="margin-bottom: 20px;">
+                <el-col :span="2">
+                  <i class="el-icon-success" style="color: var(--primary); font-size: 1.5rem;"></i>
+                </el-col>
+                <el-col :span="22">
+                  <h3>学生端</h3>
+                  <p>引导式学习流程，AI即时反馈，GPS-REN完整训练闭环</p>
+                </el-col>
+              </el-row>
+
+              <el-row :gutter="20" style="margin-bottom: 20px;">
+                <el-col :span="2">
+                  <i class="el-icon-success" style="color: var(--primary); font-size: 1.5rem;"></i>
+                </el-col>
+                <el-col :span="22">
+                  <h3>评价系统</h3>
+                  <p>基于GPS-REN的多维度评价体系，AI辅助精准评分与反馈</p>
+                </el-col>
+              </el-row>
+            </div>
+
+            <el-button type="primary" size="large" style="margin-top: 1.5rem; padding: 12px 30px;">查看平台功能</el-button>
+          </div>
+
+          <el-card class="feature-image-card">
+            <i class="el-icon-monitor"></i>
+          </el-card>
+        </div>
+      </section>
+
+      <!-- 评价标准展示 -->
+      <section class="evaluation-section">
+        <div class="section-header">
+          <h2>科学的评价标准</h2>
+          <p>基于GPS-REN的多维度评价体系，确保学习质量</p>
+        </div>
+
+        <div class="evaluation-table">
+          <table>
+            <thead>
+            <tr>
+              <th>步骤</th>
+              <th>评价指标</th>
+              <th>权重</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+              <td>问题定义 (P)</td>
+              <td>功能描述准确、术语表达规范、接口定义清晰</td>
+              <td>20%</td>
+            </tr>
+            <tr>
+              <td>系统拆解 (S)</td>
+              <td>拆解维度合理、逻辑结构完整、颗粒度适中</td>
+              <td>20%</td>
+            </tr>
+            <tr>
+              <td>结果获取 (R)</td>
+              <td>解决方案有效性</td>
+              <td>10%</td>
+            </tr>
+            <tr>
+              <td>结果评估 (E)</td>
+              <td>评估方案合理、评估过程真实、评估结果达成度</td>
+              <td>20%</td>
+            </tr>
+            <tr>
+              <td>总结新知识 (N)</td>
+              <td>关联性、新增性、联结性、准确性</td>
+              <td>30%</td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <!-- 使用案例 -->
+      <section class="case-study" id="cases">
+        <div class="section-header">
+          <h2>成功应用案例</h2>
+          <p>数据结构与算法课程中的实践成果</p>
+        </div>
+
+        <div class="case-grid">
+          <div class="case-image">
+            <i class="el-icon-s-data"></i>
+          </div>
+
+          <div class="case-content">
+            <h3>实现"两性一度"课程目标</h3>
+            <p>在数据结构与算法课程中应用GPS-REN教学模式，成功实现了高阶性、创新性和挑战度的教学目标。</p>
+
+            <ul style="margin-top: 1.5rem; margin-left: 1.5rem;">
+              <li>
+                <i class="el-icon-check" style="color: var(--accent); margin-right: 0.5rem;"></i>
+                课程内容建立元知识体系模块
+              </li>
+              <li>
+                <i class="el-icon-check" style="color: var(--accent); margin-right: 0.5rem;"></i>
+                将原有课程内容设计为多个具体问题
+              </li>
+              <li>
+                <i class="el-icon-check" style="color: var(--accent); margin-right: 0.5rem;"></i>
+                基础验证性考核与GPS-REN评价相结合
+              </li>
+              <li>
+                <i class="el-icon-check" style="color: var(--accent); margin-right: 0.5rem;"></i>
+                学生运用AI工具能力提升3.2倍
+              </li>
+            </ul>
+
+            <el-button style="margin-top: 2rem;" size="medium" plain>查看完整案例</el-button>
+          </div>
+        </div>
+      </section>
+
+      <!-- CTA区域 -->
+      <section class="cta-section">
+        <div class="cta-content">
+          <h2>开启AI时代教学新范式</h2>
+          <p>加入1000+教育机构的选择，共同培养能驾驭AI的高阶人才</p>
+          <div class="cta-buttons">
+            <el-button class="cta-btn cta-btn-light" size="large">教师免费试用</el-button>
+            <el-button class="cta-btn cta-btn-outline" size="large">学校合作咨询</el-button>
+          </div>
+        </div>
+      </section>
+
+      <!-- 底部 -->
+      <footer id="about">
+        <div class="footer-grid">
+          <div class="footer-about">
+            <div class="footer-logo" @click="scrollToTop">
+              <i class="fas fa-brain"></i> GPS-REN
+            </div>
+            <p>我们致力于推动AI时代的高等教育改革，通过GPS-REN教学模式培养能够驾驭人工智能的高阶人才。</p>
+            <div class="social-links">
+              <a href="#" class="social-icon"><i class="el-icon-chat-dot-round"></i></a>
+              <a href="#" class="social-icon"><i class="el-icon-chat-line-round"></i></a>
+              <a href="#" class="social-icon"><i class="el-icon-share"></i></a>
+              <a href="#" class="social-icon"><i class="el-icon-connection"></i></a>
+            </div>
+          </div>
+
+          <div class="footer-links">
+            <h4>平台功能</h4>
+            <ul>
+              <li><a href="#">教师工作台</a></li>
+              <li><a href="#">学生学习端</a></li>
+              <li><a href="#">AI评价系统</a></li>
+              <li><a href="#">课程管理系统</a></li>
+            </ul>
+          </div>
+
+          <div class="footer-links">
+            <h4>教学资源</h4>
+            <ul>
+              <li><a href="#">GPS-REN教学法</a></li>
+              <li><a href="#">课程案例库</a></li>
+              <li><a href="#">教师培训</a></li>
+              <li><a href="#">API文档</a></li>
+            </ul>
+          </div>
+
+          <div class="footer-links">
+            <h4>关于我们</h4>
+            <ul>
+              <li><a href="#">公司介绍</a></li>
+              <li><a href="#">教研团队</a></li>
+              <li><a href="#">加入我们</a></li>
+              <li><a href="#">联系客服</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="copyright">
+          &copy; 2025 GPS-REN教学平台 - 培养AI时代的高阶人才
+        </div>
+      </footer>
+    </div>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name:'officialweb.vue',
+  data() {
+    return {
+      activeNav: '1',
+      evaluationData: [
+        { step: '问题定义 (P)', indicator: '功能描述准确、术语表达规范、接口定义清晰', weight: '20%' },
+        { step: '系统拆解 (S)', indicator: '拆解维度合理、逻辑结构完整、颗粒度适中', weight: '20%' },
+        { step: '结果获取 (R)', indicator: '解决方案有效性', weight: '10%' },
+        { step: '结果评估 (E)', indicator: '评估方案合理、评估过程真实、评估结果达成度', weight: '20%' },
+        { step: '总结新知识 (N)', indicator: '关联性、新增性、联结性、准确性', weight: '30%' }
+      ]
+    };
+  },
+  methods: {
+    scrollToSection(sectionId) {
+      // 平滑滚动到指定区域
+      const element = document.getElementById(sectionId);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' });
+      }
+      // 更新导航激活状态
+      const navMap = {
+        'home': '1',
+        'model': '2',
+        'features': '3',
+        'cases': '4',
+        'about': '5'
+      };
+      this.activeNav = navMap[sectionId] || '1';
+    },
+    scrollToTop() {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+      this.activeNav = '1';
+    },
+    showLoginDialog() {
+      // 这里可以显示登录对话框
+      // this.$message({
+      //   message: '登录功能',
+      //   type: 'info'
+      // });
+      //以外链的形式跳转到登录页面
+      window.open('/#/login', );
+      // this.$router.push({name: 'login'});
+    },
+    showRegisterDialog() {
+      // 这里可以显示注册对话框
+      this.$message({
+        message: '注册功能',
+        type: 'info'
+      });
+    }
+  },
+  mounted() {
+    // 监听滚动，更新导航激活状态
+    window.addEventListener('scroll', () => {
+      const sections = [
+        { id: 'home', offset: 100 },
+        { id: 'model', offset: 100 },
+        { id: 'features', offset: 100 },
+        { id: 'cases', offset: 100 },
+        { id: 'about', offset: 100 }
+      ];
+
+      const scrollPosition = window.scrollY || window.pageYOffset;
+
+      for (const section of sections) {
+        const element = document.getElementById(section.id);
+        if (element) {
+          const position = element.offsetTop - section.offset;
+          if (scrollPosition >= position) {
+            const navMap = {
+              'home': '1',
+              'model': '2',
+              'features': '3',
+              'cases': '4',
+              'about': '5'
+            };
+            this.activeNav = navMap[section.id];
+          }
+        }
+      }
+    });
+  }
+}
+</script>
+
+<style>
+:root {
+  --primary: #2563eb;
+  --primary-dark: #1d4ed8;
+  --secondary: #0f172a;
+  --accent: #f59e0b;
+  --light: #f8fafc;
+  --gray: #64748b;
+  --light-gray: #e2e8f0;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+}
+
+body {
+  background-color: #fff;
+  color: var(--secondary);
+  line-height: 1.6;
+}
+
+/* 导航栏样式 - 使用Element Navbar风格 */
+.custom-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  background-color: rgba(255, 255, 255, 0.95);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 5%;
+}
+
+.nav-logo {
+  display: flex;
+  align-items: center;
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--primary);
+  cursor: pointer;
+}
+
+.nav-logo i {
+  margin-right: 0.5rem;
+  font-size: 1.8rem;
+}
+
+.el-menu.nav-menu {
+  background: transparent !important;
+  border: none !important;
+}
+
+.el-menu.nav-menu .el-menu-item {
+  height: 60px;
+  line-height: 60px;
+  padding: 0 20px;
+  font-size: 1.05rem;
+  font-weight: 500;
+  color: var(--secondary);
+  transition: color 0.3s;
+}
+
+.el-menu.nav-menu .el-menu-item:hover {
+  color: var(--primary);
+  background: transparent !important;
+}
+
+.nav-buttons {
+  display: flex;
+  gap: 15px;
+}
+
+.el-button.nav-btn-outline {
+  padding: 10px 20px;
+  border-radius: 30px;
+  border-color: var(--primary);
+  color: var(--primary);
+  font-weight: 600;
+  transition: all 0.3s;
+}
+
+.el-button.nav-btn-outline:hover {
+  background-color: var(--primary);
+  color: white;
+}
+
+.el-button.nav-btn-primary {
+  padding: 10px 20px;
+  border-radius: 30px;
+  background-color: var(--primary);
+  color: white;
+  border-color: var(--primary);
+  font-weight: 600;
+  transition: all 0.3s;
+}
+
+.el-button.nav-btn-primary:hover {
+  background-color: var(--primary-dark);
+  border-color: var(--primary-dark);
+}
+
+/* 英雄区域 */
+.hero {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 0 5%;
+  background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(255, 255, 255, 1) 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.hero-content {
+  max-width: 900px;
+  z-index: 2;
+}
+
+.hero h1 {
+  font-size: 3.5rem;
+  font-weight: 800;
+  margin-bottom: 1.5rem;
+  line-height: 1.15;
+  color: var(--secondary);
+}
+
+.hero p {
+  font-size: 1.5rem;
+  color: var(--gray);
+  margin-bottom: 2rem;
+  max-width: 700px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.hero-buttons {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  margin-top: 2rem;
+}
+
+.hero-btn {
+  padding: 15px 30px;
+  border-radius: 30px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.3s;
+  display: inline-block;
+  font-size: 1.1rem;
+}
+
+.hero-btn-primary {
+  background-color: var(--primary);
+  color: white;
+  border: 2px solid var(--primary);
+}
+
+.hero-btn-primary:hover {
+  background-color: var(--primary-dark);
+  border-color: var(--primary-dark);
+  color: white;
+}
+
+.hero-btn-outline {
+  border: 2px solid var(--primary);
+  color: var(--primary);
+}
+
+.hero-btn-outline:hover {
+  background-color: var(--primary);
+  color: white;
+}
+
+/* GPS-REN模型展示 - 使用El-Card */
+.model-section {
+  padding: 6rem 5%;
+  background-color: var(--light);
+}
+
+.section-header {
+  text-align: center;
+  max-width: 800px;
+  margin: 0 auto 4rem;
+}
+
+.section-header h2 {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+  font-weight: 700;
+  color: var(--secondary);
+}
+
+.section-header p {
+  font-size: 1.25rem;
+  color: var(--gray);
+}
+
+.model-steps {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 2rem;
+  max-width: calc(100% - 20rem);
+  margin: 0 auto;
+}
+
+.el-card.step-card {
+  border-radius: 16px;
+  padding: 2rem;
+  text-align: center;
+  transition: transform 0.3s, box-shadow 0.3s;
+  height: 100%;
+}
+
+.el-card.step-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1) !important;
+}
+
+.step-icon {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background-color: rgba(37, 99, 235, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 1.5rem;
+  font-size: 2rem;
+  font-weight: bold;
+  color: var(--primary);
+}
+
+.step-card h3 {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  color: var(--secondary);
+}
+
+.step-card p {
+  color: var(--gray);
+}
+
+/* 平台功能 */
+.features-section {
+  padding: 6rem 5%;
+  background-color: white;
+}
+
+.features {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 4rem;
+  max-width: 1200px;
+  margin: 0 auto;
+  align-items: center;
+}
+
+.feature-text {
+  padding-right: 2rem;
+}
+
+.feature-text h2 {
+  font-size: 2.5rem;
+  margin-bottom: 1.5rem;
+  font-weight: 700;
+  color: var(--secondary);
+}
+
+.feature-text p {
+  font-size: 1.1rem;
+  margin-bottom: 2rem;
+  color: var(--gray);
+}
+
+.el-card.feature-image-card {
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  height: 400px;
+  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 5rem;
+}
+
+/* 评价标准展示 */
+.evaluation-section {
+  padding: 6rem 5%;
+  background-color: var(--light);
+}
+
+.evaluation-table {
+  max-width: 1000px;
+  margin: 0 auto;
+  background: white;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th, td {
+  padding: 1.25rem 1.5rem;
+  text-align: left;
+  border-bottom: 1px solid var(--light-gray);
+}
+
+th {
+  background-color: var(--primary);
+  color: white;
+  font-weight: 600;
+}
+
+tr:nth-child(even) {
+  background-color: rgba(37, 99, 235, 0.03);
+}
+
+/* 使用案例 */
+.case-study {
+  padding: 6rem 5%;
+  background-color: white;
+}
+
+.case-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 4rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.case-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.case-content h3 {
+  font-size: 1.8rem;
+  margin-bottom: 1.5rem;
+  font-weight: 700;
+  color: var(--secondary);
+}
+
+.case-image {
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+  position: relative;
+  height: 350px;
+  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 5rem;
+}
+
+/* CTA区域 */
+.cta-section {
+  padding: 8rem 5%;
+  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+  color: white;
+  text-align: center;
+}
+
+.cta-content {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.cta-content h2 {
+  font-size: 2.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.cta-content p {
+  font-size: 1.25rem;
+  margin-bottom: 2.5rem;
+  opacity: 0.9;
+}
+
+.cta-buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+}
+
+.cta-btn {
+  padding: 15px 30px;
+  border-radius: 30px;
+  font-weight: 600;
+  font-size: 1.1rem;
+  transition: all 0.3s;
+}
+
+.cta-btn-light {
+  background-color: white;
+  color: var(--primary);
+  border: none;
+}
+
+.cta-btn-light:hover {
+  background-color: rgba(255, 255, 255, 0.9);
+  color: var(--primary);
+}
+
+.cta-btn-outline {
+  background: transparent;
+  color: white;
+  border: 2px solid white;
+}
+
+.cta-btn-outline:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+/* 底部 - 使用Element风格 */
+footer {
+  background-color: var(--secondary);
+  color: white;
+  padding: 4rem 5% 2rem;
+}
+
+.footer-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  gap: 3rem;
+  max-width: 1200px;
+  margin: 0 auto 3rem;
+}
+
+.footer-logo {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: white;
+  margin-bottom: 1.5rem;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.footer-logo i {
+  margin-right: 0.5rem;
+  font-size: 1.8rem;
+}
+
+.footer-about p {
+  opacity: 0.7;
+  margin-bottom: 1.5rem;
+  line-height: 1.7;
+}
+
+.footer-links h4 {
+  font-size: 1.25rem;
+  margin-bottom: 1.5rem;
+  font-weight: 600;
+}
+
+.footer-links ul {
+  list-style: none;
+  padding: 0;
+}
+
+.footer-links li {
+  margin-bottom: 0.8rem;
+}
+
+.footer-links a {
+  color: rgba(255, 255, 255, 0.7);
+  text-decoration: none;
+  transition: opacity 0.3s;
+  display: block;
+  padding: 5px 0;
+}
+
+.footer-links a:hover {
+  color: white;
+}
+
+.social-links {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.social-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.1);
+  color: white;
+  transition: background-color 0.3s;
+  text-decoration: none;
+  font-size: 1.2rem;
+}
+
+.social-icon:hover {
+  background-color: var(--primary);
+}
+
+.copyright {
+  text-align: center;
+  padding-top: 2rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  opacity: 0.6;
+  font-size: 0.9rem;
+}
+
+/* 响应式设计 */
+@media (max-width: 992px) {
+  .model-steps {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .features, .case-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .footer-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .nav-menu {
+    display: none;
+  }
+
+  .hero h1 {
+    font-size: 2.5rem;
+  }
+
+  .hero p {
+    font-size: 1.25rem;
+  }
+
+  .model-steps {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .hero-buttons, .cta-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+@media (max-width: 576px) {
+  .model-steps {
+    grid-template-columns: 1fr;
+  }
+
+  .footer-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>