init: 初始化 VitePress 官网项目

2026-06-15 15:24:07 +08:00
commit 6feb246fde
45 changed files with 6594 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@@ -0,0 +1,89 @@
+# 恭学教育官网
+
+基于 VitePress 构建的恭学教育官方网站。
+
+## 如何添加知识库文章
+
+项目中的知识库文章位于 `docs/knowledge/` 目录，采用**静态 Markdown + JSON 索引**的方式管理。
+
+### 1. 创建文章文件
+
+在 `docs/knowledge/` 目录下新建一个 `.md` 文件，文件名即为文章 ID，例如 `my-new-article.md`。
+
+文件内容参考如下：
+
+```markdown
+---
+id: my-new-article
+title: 文章标题
+summary: 文章摘要，会显示在知识库列表卡片上
+category: exam_policy
+tags:
+  - 天津专升本
+  - 考试政策
+author: 恭学教育
+publishedAt: 2026-06-15
+coverImage: https://example.com/cover.png
+viewCount: 0
+isTop: false
+---
+
+<script setup>
+import KnowledgeDetail from '../.vitepress/theme/pages/KnowledgeDetail.vue'
+</script>
+
+<KnowledgeDetail>
+
+这里写正文内容，支持 HTML 和 Markdown。
+
+</KnowledgeDetail>
+```
+
+`category` 常见取值：
+
+- `exam_policy`：考试政策
+- `school_intro`：院校介绍
+- `study_method`：学习方法
+- `exam_guide`：备考攻略
+
+### 2. 更新列表索引
+
+将文章元数据追加到 `docs/knowledge/index.json` 文件中：
+
+```json
+[
+  {
+    "id": "my-new-article",
+    "title": "文章标题",
+    "summary": "文章摘要，会显示在知识库列表卡片上",
+    "category": "exam_policy",
+    "tags": ["天津专升本", "考试政策"],
+    "coverImage": "https://example.com/cover.png",
+    "author": "恭学教育",
+    "publishedAt": "2026-06-15",
+    "viewCount": 0,
+    "isTop": false
+  }
+]
+```
+
+### 文件作用说明
+
+| 文件 | 作用 |
+|------|------|
+| `docs/knowledge/index.md` | 知识库列表页 |
+| `docs/knowledge/index.json` | 知识库列表页读取的文章数据源 |
+| `docs/knowledge/*.md` | 各篇文章详情页 |
+
+## 本地开发
+
+```bash
+npm install
+npm run dev
+```
+
+## 构建
+
+```bash
+npm run build
+```
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -0,0 +1,53 @@
+import { defineConfig } from 'vitepress'
+
+const defaultOgImage = 'https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/%E5%B0%81%E9%9D%A2.png'
+
+export default defineConfig({
+  cleanUrls: 'with-subfolders',
+  title: '恭学教育集团',
+  description: '恭学教育集团是天津专升本培训领军品牌，专注天津专升本7年，已服务21万+学员。提供专业刷题系统、在线网校、权威教材和一对一升学规划，真题覆盖率100%，助你轻松升本成功！',
+  lang: 'zh-CN',
+  head: [
+    ['link', { rel: 'icon', href: '/logo.png' }],
+    ['meta', { name: 'keywords', content: '天津专升本,专升本培训,恭学教育,天津专升本刷题,专升本网校,天津专升本教材,专升本辅导,天津专升本报名,专升本真题,天津专升本课程' }],
+    ['meta', { property: 'og:image', content: defaultOgImage }],
+  ],
+  themeConfig: {
+    logo: '/logo.png',
+    nav: [],
+    outline: false,
+    socialLinks: [],
+  },
+  vite: {
+    resolve: {
+      alias: {
+        '@': '/docs/.vitepress',
+      },
+    },
+    plugins: [
+      {
+        name: 'knowledge-index-redirect',
+        configureServer(server) {
+          server.middlewares.use((req, res, next) => {
+            if (req.url === '/knowledge') {
+              res.statusCode = 302
+              res.setHeader('Location', '/knowledge/')
+              res.end()
+              return
+            }
+            next()
+          })
+        },
+      },
+    ],
+  },
+  transformHead({ pageData }) {
+    const keywords = pageData.frontmatter.keywords
+    if (keywords && Array.isArray(keywords)) {
+      return [
+        ['meta', { name: 'keywords', content: keywords.join(',') }],
+      ]
+    }
+    return []
+  },
+})
--- a/docs/.vitepress/theme/Layout.vue
+++ b/docs/.vitepress/theme/Layout.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import { useRoute } from 'vitepress'
+import Header from './components/Header.vue'
+import Footer from './components/Footer.vue'
+import FloatingService from './components/FloatingService.vue'
+import { Content } from 'vitepress'
+
+const isScrolled = ref(false)
+const route = useRoute()
+
+const handleScroll = () => {
+  isScrolled.value = window.scrollY > 20
+}
+
+onMounted(() => {
+  handleScroll()
+  window.addEventListener('scroll', handleScroll)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+
+// 路由切换后滚动到顶部
+watch(
+  () => route.path,
+  () => {
+    nextTick(() => {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+    })
+  }
+)
+</script>
+
+<template>
+  <div class="font-sans antialiased text-apple-dark bg-white min-h-screen flex flex-col relative">
+    <Header :scrolled="isScrolled" />
+
+    <main class="flex-grow">
+      <Content />
+    </main>
+
+    <Footer />
+    <FloatingService />
+  </div>
+</template>
--- a/docs/.vitepress/theme/components/BookMockup.vue
+++ b/docs/.vitepress/theme/components/BookMockup.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+interface Props {
+  imageSrc?: string
+  title: string
+  color?: string
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'bg-blue-600',
+  className: '',
+})
+</script>
+
+<template>
+  <div :class="['relative group perspective-1000', props.className]">
+    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-gradient-to-tr from-orange-100/40 to-blue-100/40 blur-[60px] rounded-full pointer-events-none"></div>
+
+    <div class="relative z-10 transition-transform duration-500 hover:scale-105 hover:-translate-y-2">
+      <img
+        v-if="props.imageSrc"
+        :src="props.imageSrc"
+        :alt="props.title"
+        class="w-full h-auto object-contain drop-shadow-2xl"
+        style="filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15));"
+        loading="lazy"
+      />
+      <div
+        v-else
+        :class="[
+          'w-[220px] h-[300px] mx-auto rounded-r-xl rounded-l-sm shadow-2xl flex flex-col p-6 relative overflow-hidden',
+          props.color
+        ]"
+      >
+        <div class="absolute left-0 top-0 bottom-0 w-[4px] bg-black/10"></div>
+        <div class="absolute inset-0 bg-gradient-to-tr from-black/10 to-transparent pointer-events-none"></div>
+        <div class="text-white/60 text-xs font-bold tracking-[0.2em] mb-auto uppercase">Gongxue</div>
+        <div class="text-white font-serif text-3xl font-bold leading-tight">{{ props.title }}</div>
+        <div class="mt-4 w-12 h-1 bg-white/50"></div>
+      </div>
+    </div>
+
+    <div class="absolute -bottom-6 left-1/2 -translate-x-1/2 w-[80%] h-4 bg-black/20 blur-xl rounded-[100%] opacity-0 group-hover:opacity-40 transition-opacity duration-500"></div>
+  </div>
+</template>
--- a/docs/.vitepress/theme/components/CountUpNumber.vue
+++ b/docs/.vitepress/theme/components/CountUpNumber.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+interface Props {
+  end: number
+  duration?: number
+  suffix?: string
+  decimals?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  duration: 2000,
+  suffix: '',
+  decimals: 0,
+})
+
+const count = ref(0)
+const refEl = ref<HTMLDivElement | null>(null)
+let hasAnimated = false
+let rafId: number | null = null
+let observer: IntersectionObserver | null = null
+
+onMounted(() => {
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0].isIntersecting && !hasAnimated) {
+        hasAnimated = true
+        let startTime: number | null = null
+
+        const animate = (currentTime: number) => {
+          if (!startTime) startTime = currentTime
+          const progress = Math.min((currentTime - startTime) / props.duration, 1)
+          const easeProgress = 1 - Math.pow(1 - progress, 4)
+          count.value = props.end * easeProgress
+
+          if (progress < 1) {
+            rafId = requestAnimationFrame(animate)
+          } else {
+            count.value = props.end
+          }
+        }
+
+        rafId = requestAnimationFrame(animate)
+      }
+    },
+    { threshold: 0.5 }
+  )
+
+  if (refEl.value) {
+    observer.observe(refEl.value)
+  }
+})
+
+onUnmounted(() => {
+  if (observer && refEl.value) observer.disconnect()
+  if (rafId) cancelAnimationFrame(rafId)
+})
+</script>
+
+<template>
+  <div
+    ref="refEl"
+    class="text-4xl md:text-5xl font-bold text-apple-dark mb-2 transition-transform group-hover:scale-110 duration-300 tabular-nums"
+  >
+    {{ count.toFixed(props.decimals) }}
+    <span v-if="props.suffix" class="text-2xl ml-1 font-medium text-gray-400">{{ props.suffix }}</span>
+  </div>
+</template>
--- a/docs/.vitepress/theme/components/EnrollModal.vue
+++ b/docs/.vitepress/theme/components/EnrollModal.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ref, watch, onUnmounted } from 'vue'
+import { X } from 'lucide-vue-next'
+
+interface Props {
+  isOpen: boolean
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{ (e: 'close'): void }>()
+
+const containerRef = ref<HTMLDivElement | null>(null)
+const modalRef = ref<HTMLDivElement | null>(null)
+
+watch(() => props.isOpen, (open) => {
+  if (!containerRef.value) return
+
+  if (open) {
+    document.body.style.overflow = 'hidden'
+    document.body.style.touchAction = 'none'
+
+    containerRef.value.innerHTML = `
+      <div class="loading-indicator" style="text-align: center; padding: 2rem;">
+        <div style="border: 4px solid #3b82f6; border-top: 4px solid transparent; border-radius: 50%; width: 48px; height: 48px; animation: spin 1s linear infinite; margin: 0 auto 1rem;"></div>
+        <p style="color: #6b7280;">表单加载中...</p>
+      </div>
+      <style>
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+      </style>
+    `
+
+    const iframe = document.createElement('iframe')
+    iframe.id = 'goldendata_form_xFYow5'
+    iframe.src = 'https://baoming.gongxue100.com/f/xFYow5?background=white&banner=show&embedded=true&inner_redirect=false'
+    iframe.width = '100%'
+    iframe.height = '918'
+    iframe.frameBorder = '0'
+    iframe.style.border = 'none'
+
+    iframe.onload = () => {
+      const loader = containerRef.value?.querySelector('.loading-indicator') as HTMLElement | null
+      if (loader) loader.style.display = 'none'
+    }
+
+    iframe.onerror = () => {
+      const loader = containerRef.value?.querySelector('.loading-indicator') as HTMLElement | null
+      if (loader) {
+        loader.innerHTML = `
+          <div style="text-align: center; padding: 2rem;">
+            <div style="width: 48px; height: 48px; background: #fee2e2; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </div>
+            <p style="color: #6b7280; margin-bottom: 1rem;">表单加载失败</p>
+            <button onclick="window.location.reload()" style="background: #3b82f6; color: white; border: none; padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer;">重新加载</button>
+          </div>
+        `
+      }
+    }
+
+    containerRef.value.appendChild(iframe)
+  } else {
+    document.body.style.overflow = ''
+    document.body.style.touchAction = ''
+    if (containerRef.value) {
+      containerRef.value.innerHTML = ''
+    }
+  }
+})
+
+onUnmounted(() => {
+  document.body.style.overflow = ''
+  document.body.style.touchAction = ''
+})
+</script>
+
+<template>
+  <div v-if="isOpen" class="fixed inset-0 z-[9999] flex items-center justify-center p-4">
+    <div 
+      class="absolute inset-0 bg-black/60 backdrop-blur-sm"
+      @click="emit('close')"
+    />
+    
+    <div 
+      ref="modalRef"
+      class="relative bg-white rounded-3xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-hidden animate-slide-up flex flex-col"
+    >
+      <button
+        @click="emit('close')"
+        class="absolute top-4 right-4 p-2 rounded-full hover:bg-gray-100 transition-colors z-10"
+      >
+        <X :size="24" class="text-gray-500" />
+      </button>
+
+      <div class="flex-1 overflow-y-auto">
+        <div class="p-6 md:p-8">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="p-2 bg-orange-100 text-orange-600 rounded-xl">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
+                <circle cx="12" cy="10" r="3"/>
+              </svg>
+            </div>
+            <div>
+              <h3 class="font-bold text-xl text-gray-900">报名上课</h3>
+              <p class="text-xs text-gray-500">填写信息，获取专属学习规划</p>
+            </div>
+          </div>
+          
+          <div 
+            ref="containerRef"
+            class="w-full min-h-[800px]"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
--- a/docs/.vitepress/theme/components/FloatingService.vue
+++ b/docs/.vitepress/theme/components/FloatingService.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRouter } from 'vitepress'
+import { MessageCircle, Phone, BookOpen, Users, X } from 'lucide-vue-next'
+
+const router = useRouter()
+const isOpen = ref(false)
+const showChatModal = ref(false)
+const chatMessages = ref<{ text?: string; isQrcode?: boolean; isTyping?: boolean }[]>([])
+const isTypingComplete = ref(false)
+
+const menuItems = [
+  { icon: MessageCircle, label: '在线咨询', sub: '实时答疑', href: '#consult' },
+  { icon: Phone, label: '课程报名', sub: '18322616529', href: 'tel:18322616529' },
+  { icon: BookOpen, label: '书籍购买', sub: '官方商城', href: '/books' },
+  { icon: Users, label: '商务合作', sub: '企业/机构', href: '/contact' },
+]
+
+let timers: ReturnType<typeof setTimeout>[] = []
+
+watch(showChatModal, (val) => {
+  if (!val) {
+    chatMessages.value = []
+    isTypingComplete.value = false
+    timers.forEach(clearTimeout)
+    timers = []
+    return
+  }
+
+  timers.push(setTimeout(() => { chatMessages.value = [{ isTyping: true }] }, 500))
+  timers.push(setTimeout(() => {
+    chatMessages.value = [{
+      text: '你好同学，正在接入人工客服，或者方便的话，您先留个手机号联系方式，或加我微信咱们再具体沟通？'
+    }]
+  }, 2500))
+  timers.push(setTimeout(() => {
+    chatMessages.value = [...chatMessages.value, { isTyping: true }]
+  }, 3000))
+  timers.push(setTimeout(() => {
+    chatMessages.value = [...chatMessages.value.filter(m => !m.isTyping), { isQrcode: true }]
+    isTypingComplete.value = true
+  }, 4000))
+})
+
+const handleMenuItemClick = (href: string) => {
+  if (href === '#consult') {
+    showChatModal.value = true
+    isOpen.value = false
+  } else if (href.startsWith('tel:')) {
+    window.location.href = href
+  } else {
+    router.go(href)
+    isOpen.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="fixed bottom-6 right-6 z-50 flex flex-col items-end">
+    <div
+      :class="[
+        'mb-4 flex flex-col gap-3 transition-all duration-300 origin-bottom-right',
+        isOpen 
+          ? 'opacity-100 scale-100 translate-y-0' 
+          : 'opacity-0 scale-90 translate-y-10 pointer-events-none'
+      ]"
+    >
+      <button
+        v-for="(item, index) in menuItems"
+        :key="index"
+        @click="handleMenuItemClick(item.href)"
+        class="flex items-center gap-3 bg-white/90 backdrop-blur-lg border border-white/20 p-3 pr-4 rounded-2xl shadow-lg cursor-pointer hover:bg-white hover:scale-105 transition-all group"
+      >
+        <div class="w-10 h-10 rounded-full bg-blue-50 text-apple-blue flex items-center justify-center group-hover:bg-apple-blue group-hover:text-white transition-colors flex-shrink-0">
+          <component :is="item.icon" :size="20" />
+        </div>
+        <div class="text-left min-w-[80px]">
+          <div class="text-sm font-bold text-gray-800">{{ item.label }}</div>
+          <div class="text-xs text-gray-400">{{ item.sub }}</div>
+        </div>
+      </button>
+    </div>
+
+    <button
+      @click="isOpen = !isOpen"
+      :class="[
+        'w-16 h-16 rounded-full shadow-2xl flex items-center justify-center transition-all duration-300 hover:scale-110 active:scale-95',
+        isOpen 
+          ? 'bg-gray-800 rotate-90' 
+          : 'bg-apple-blue hover:bg-apple-blue-hover'
+      ]"
+      :aria-label="isOpen ? '关闭菜单' : '打开客服菜单'"
+    >
+      <X v-if="isOpen" class="text-white" :size="28" />
+      <MessageCircle v-else class="text-white fill-current" :size="28" />
+    </button>
+
+    <div
+      v-if="showChatModal"
+      class="fixed inset-0 z-[9999] flex items-center justify-center p-4"
+    >
+      <div 
+        class="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        @click="showChatModal = false"
+      />
+      
+      <div class="relative bg-white rounded-3xl shadow-2xl w-full max-w-md max-h-[600px] flex flex-col animate-slide-up">
+        <div class="flex items-center justify-between p-4 border-b bg-gradient-to-r from-apple-blue to-blue-600 rounded-t-3xl">
+          <div class="flex items-center gap-3">
+            <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
+              <MessageCircle :size="20" class="text-white" />
+            </div>
+            <div>
+              <h3 class="font-bold text-white">在线客服</h3>
+              <p class="text-xs text-white/80">在线</p>
+            </div>
+          </div>
+          <button
+            @click="showChatModal = false"
+            class="p-2 rounded-full hover:bg-white/20 transition-colors"
+          >
+            <X :size="20" class="text-white" />
+          </button>
+        </div>
+
+        <div class="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50">
+          <div v-for="(msg, index) in chatMessages" :key="index">
+            <div v-if="msg.isTyping" class="flex items-start gap-2">
+              <div class="w-8 h-8 bg-apple-blue rounded-full flex items-center justify-center flex-shrink-0">
+                <MessageCircle :size="16" class="text-white" />
+              </div>
+              <div class="bg-white rounded-2xl rounded-tl-none px-4 py-3 shadow-sm">
+                <div class="flex gap-1">
+                  <span class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0ms;"></span>
+                  <span class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 150ms;"></span>
+                  <span class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 300ms;"></span>
+                </div>
+              </div>
+            </div>
+
+            <div v-else-if="msg.isQrcode" class="flex items-start gap-2">
+              <div class="w-8 h-8 bg-apple-blue rounded-full flex items-center justify-center flex-shrink-0">
+                <MessageCircle :size="16" class="text-white" />
+              </div>
+              <div class="bg-white rounded-2xl rounded-tl-none p-4 shadow-sm">
+                <img 
+                  src="https://duiwaifengxiang-1304851894.cos.ap-beijing.myqcloud.com/gwgongxue/code.jpg" 
+                  alt="客服二维码"
+                  class="w-48 h-48 rounded-lg"
+                />
+                <p class="text-xs text-gray-500 text-center mt-2">扫码添加微信客服</p>
+              </div>
+            </div>
+
+            <div v-else class="flex items-start gap-2 animate-slide-up">
+              <div class="w-8 h-8 bg-apple-blue rounded-full flex items-center justify-center flex-shrink-0">
+                <MessageCircle :size="16" class="text-white" />
+              </div>
+              <div class="bg-white rounded-2xl rounded-tl-none px-4 py-3 shadow-sm max-w-[80%]">
+                <p class="text-sm text-gray-800 leading-relaxed">{{ msg.text }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="p-4 border-t bg-white rounded-b-3xl">
+          <div class="bg-gray-50 rounded-xl p-3 text-center">
+            <p class="text-xs text-gray-500">
+              {{ isTypingComplete 
+                ? '工作时间：周一至周日 9:00-21:00' 
+                : '客服正在输入中…' }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
--- a/docs/.vitepress/theme/components/Footer.vue
+++ b/docs/.vitepress/theme/components/Footer.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+const currentYear = new Date().getFullYear()
+</script>
+
+<template>
+  <footer class="bg-apple-grey text-apple-text-gray py-16 border-t border-gray-200">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
+        <div class="col-span-1 md:col-span-1">
+          <h3 class="text-apple-dark font-bold text-lg mb-4">恭学教育集团</h3>
+          <p class="text-xs leading-relaxed max-w-xs">
+            致力于为天津专升本学子提供最优质的教育资源、最先进的刷题系统以及最权威的出版书籍。智慧教育，触手可及。
+          </p>
+        </div>
+
+        <div>
+          <h4 class="text-apple-dark font-semibold text-sm mb-4">探索</h4>
+          <ul class="space-y-2 text-xs">
+            <li>
+              <a href="/question-bank" class="hover:text-apple-blue hover:underline">
+                刷题小程序
+              </a>
+            </li>
+            <li>
+              <a href="/online-school" class="hover:text-apple-blue hover:underline">
+                在线网校 APP
+              </a>
+            </li>
+            <li>
+              <a href="/books" class="hover:text-apple-blue hover:underline">
+                商城书籍
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <div>
+          <h4 class="text-apple-dark font-semibold text-sm mb-4">服务</h4>
+          <ul class="space-y-2 text-xs">
+            <li>
+              <a href="/knowledge/" class="hover:text-apple-blue hover:underline">
+                专升本知识库
+              </a>
+            </li>
+            <li>
+              <a href="/contact" class="hover:text-apple-blue hover:underline">
+                企业合作
+              </a>
+            </li>
+            <li>
+              <span class="cursor-pointer hover:text-apple-dark">加入我们</span>
+            </li>
+          </ul>
+        </div>
+
+        <div>
+          <h4 class="text-apple-dark font-semibold text-sm mb-4">联系我们</h4>
+          <ul class="space-y-2 text-xs">
+            <li>天津市津南区咸水沽镇雅润路东侧金浩园17号楼底商3号</li>
+            <li>Tel: 18322616529</li>
+            <li>Email: gongxuejiaoyu@sina.cn</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="pt-8 border-t border-gray-300">
+        <div class="flex flex-col md:flex-row justify-center items-center gap-4 mb-4 text-xs">
+          <a 
+            href="https://beian.miit.gov.cn/" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            class="text-apple-text-gray hover:text-apple-blue flex items-center gap-1"
+          >
+            津ICP备19008758号-1
+          </a>
+          <a 
+            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12011202000308" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            class="text-apple-text-gray hover:text-apple-blue"
+          >
+            津公网安备 12011202000308号
+          </a>
+        </div>
+        
+        <div class="text-center text-xs text-apple-text-gray mb-4">
+          违法和不良信息举报电话: 
+          <a href="tel:18322616529" class="text-apple-blue hover:underline ml-1">18322616529</a>
+          举报邮箱: 
+          <a href="mailto:gongxuejiaoyu@sina.cn" class="text-apple-blue hover:underline ml-1">gongxuejiaoyu@sina.cn</a>
+        </div>
+        
+        <div class="flex flex-col md:flex-row justify-between items-center text-xs">
+          <p>Copyright © {{ currentYear }} Gongxue Education Group. 保留所有权利。</p>
+          <div class="flex space-x-4 mt-4 md:mt-0">
+            <a href="/privacy-policy" class="hover:text-apple-blue hover:underline">
+              隐私政策
+            </a>
+            <a href="/terms-of-service" class="hover:text-apple-blue hover:underline">
+              使用条款
+            </a>
+            <span class="cursor-pointer hover:underline">网站地图</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
--- a/docs/.vitepress/theme/components/Header.vue
+++ b/docs/.vitepress/theme/components/Header.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vitepress'
+import { Menu, X } from 'lucide-vue-next'
+
+interface Props {
+  scrolled: boolean
+}
+
+defineProps<Props>()
+
+const route = useRoute()
+const mobileMenuOpen = ref(false)
+
+interface NavItem {
+  path: string
+  label: string
+}
+
+const navItems: NavItem[] = [
+  { path: '/', label: '首页' },
+  { path: '/question-bank', label: '刷题题库' },
+  { path: '/online-school', label: '在线网校' },
+  { path: '/books', label: '出版书籍' },
+  { path: '/knowledge/', label: '知识库' },
+]
+
+const handleNavClick = (path: string) => {
+  mobileMenuOpen.value = false
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
+const isActive = (path: string) => {
+  if (path === '/') return route.path === '/'
+  return route.path.startsWith(path)
+}
+
+watch(() => route.path, () => {
+  mobileMenuOpen.value = false
+})
+</script>
+
+<template>
+  <header
+    :class="[
+      'fixed top-0 left-0 right-0 z-50 transition-all duration-300',
+      scrolled || mobileMenuOpen
+        ? 'bg-white/80 backdrop-blur-xl shadow-sm'
+        : 'bg-transparent'
+    ]"
+  >
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="flex justify-between items-center h-16">
+        <a
+          href="/"
+          class="flex items-center cursor-pointer group"
+          @click="handleNavClick('/')"
+        >
+          <img 
+            src="/logo.png" 
+            alt="恭学教育Logo" 
+            class="w-8 h-8 mr-2 transition-transform group-hover:scale-105"
+          />
+          <span class="font-bold text-lg tracking-tight text-apple-blue">
+            恭学教育
+          </span>
+        </a>
+
+        <nav class="hidden md:flex space-x-8">
+          <a
+            v-for="item in navItems"
+            :key="item.path"
+            :href="item.path"
+            :class="[
+              'text-sm font-medium transition-colors duration-200',
+              isActive(item.path)
+                ? 'text-apple-blue'
+                : 'text-apple-text-gray hover:text-apple-dark'
+            ]"
+            @click="handleNavClick(item.path)"
+          >
+            {{ item.label }}
+          </a>
+        </nav>
+
+        <div class="md:hidden">
+          <button
+            @click="mobileMenuOpen = !mobileMenuOpen"
+            class="text-apple-dark p-2"
+            :aria-label="mobileMenuOpen ? '关闭菜单' : '打开菜单'"
+          >
+            <X v-if="mobileMenuOpen" :size="24" />
+            <Menu v-else :size="24" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="mobileMenuOpen"
+      class="md:hidden absolute top-16 left-0 right-0 bg-white h-screen border-t border-gray-100 p-4 animate-fade-in"
+    >
+      <div class="flex flex-col space-y-6 mt-4">
+        <a
+          v-for="item in navItems"
+          :key="item.path"
+          :href="item.path"
+          :class="[
+            'text-2xl font-semibold text-left py-2 border-b border-gray-100 w-full',
+            isActive(item.path) ? 'text-apple-blue' : 'text-apple-dark'
+          ]"
+          @click="handleNavClick(item.path)"
+        >
+          {{ item.label }}
+        </a>
+      </div>
+    </div>
+  </header>
+</template>
--- a/docs/.vitepress/theme/components/PhoneMockup.vue
+++ b/docs/.vitepress/theme/components/PhoneMockup.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+interface Props {
+  imageSrc: string
+  className?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div 
+    :class="[
+      'relative mx-auto w-full max-w-[280px] z-10 transition-transform duration-300 hover:scale-[1.02]',
+      props.className || ''
+    ]"
+    style="aspect-ratio: 1290 / 2796;"
+  >
+    <div 
+      class="relative w-full h-full bg-black overflow-hidden"
+      style="border-radius: 16% / 7.38%; box-shadow: 0 0 0 1px #444, 0 0 0 3px #d1d1d1, 0 0 0 4px #999, 0 20px 50px -10px rgba(0,0,0,0.3); padding: 3px;"
+    >
+      <div 
+        class="relative w-full h-full bg-[#111] overflow-hidden"
+        style="border-radius: calc(16% - 1%) / calc(7.38% - 0.5%); box-shadow: inset 0 0 20px rgba(255,255,255,0.08);"
+      >
+        <div class="absolute top-[3.5%] left-1/2 -translate-x-1/2 w-[30%] h-[3.5%] bg-black rounded-[20px] z-50 pointer-events-none flex items-center justify-center">
+          <div class="w-[40%] h-[40%] bg-white/10 rounded-full blur-[2px]"></div>
+        </div>
+
+        <img 
+          :src="props.imageSrc" 
+          alt="App Screen" 
+          class="w-full h-full object-cover object-top opacity-100 relative z-10"
+          loading="lazy"
+        />
+        
+        <div class="absolute bottom-[2%] left-1/2 -translate-x-1/2 w-[35%] h-[0.5%] bg-white/80 rounded-full z-20 backdrop-blur-sm"></div>
+      </div>
+    </div>
+  </div>
+</template>
--- a/docs/.vitepress/theme/components/Skeleton.vue
+++ b/docs/.vitepress/theme/components/Skeleton.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+interface Props {
+  className?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['skeleton rounded-lg', props.className || '']"></div>
+</template>
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -0,0 +1,12 @@
+import { h } from 'vue'
+import DefaultTheme from 'vitepress/theme'
+import Layout from './Layout.vue'
+import './style.css'
+
+export default {
+  ...DefaultTheme,
+  Layout: () => h(Layout),
+  enhanceApp({ app, router, siteData }) {
+    // 全局组件或插件可在此注册
+  }
+}
--- a/docs/.vitepress/theme/pages/Books.vue
+++ b/docs/.vitepress/theme/pages/Books.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { X } from 'lucide-vue-next'
+import BookMockup from '../components/BookMockup.vue'
+import { useSiteConfig } from '../../utils/siteConfig'
+
+const siteConfig = useSiteConfig()
+const books = siteConfig.value.books
+const showQrModal = ref(false)
+
+const categories = ['全部', '公共课', '专业课', '模拟卷', '内部讲义']
+</script>
+
+<template>
+  <div class="pt-24 min-h-screen bg-apple-grey animate-fade-in">
+    <div class="max-w-7xl mx-auto px-6 pb-20">
+      <div class="flex flex-col items-center text-center mb-16 pt-8">
+        <span class="bg-white border border-gray-200 text-gray-500 font-bold px-4 py-1.5 rounded-full text-xs mb-6 uppercase tracking-wider shadow-sm">
+          Official Store
+        </span>
+        <h1 class="text-4xl md:text-6xl font-semibold text-apple-dark mb-6">官方出版商城</h1>
+        <p class="text-xl text-gray-500 max-w-2xl font-light">
+          针对天津专升本考纲编写，每年更新。累计销量突破 500,000 册。
+        </p>
+      </div>
+
+      <div class="flex justify-center gap-4 mb-12 flex-wrap">
+        <button
+          v-for="(cat, i) in categories"
+          :key="i"
+          :class="[
+            'px-6 py-2 rounded-full text-sm font-medium transition-all',
+            i === 0 ? 'bg-black text-white shadow-lg' : 'bg-white text-gray-600 hover:bg-gray-100'
+          ]"
+        >
+          {{ cat }}
+        </button>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
+        <div
+          v-for="(book, idx) in books"
+          :key="idx"
+          class="bg-white rounded-[2rem] p-8 flex flex-col items-center text-center shadow-sm hover:shadow-2xl hover:-translate-y-1 transition-all duration-300 group relative overflow-hidden"
+        >
+          <div
+            v-if="book.tag"
+            class="absolute top-6 left-6 bg-red-500 text-white text-[10px] font-bold px-2 py-1 rounded-md"
+          >
+            {{ book.tag }}
+          </div>
+
+          <div class="w-full aspect-[4/3] flex items-center justify-center mb-8 mt-4 group-hover:scale-105 transition-transform duration-500">
+            <BookMockup 
+              :title="book.title" 
+              :imageSrc="book.imageSrc"
+              className="transform scale-90 max-w-[200px]" 
+            />
+          </div>
+
+          <div class="mt-auto w-full">
+            <h3 class="text-xl font-bold text-apple-dark mb-2 truncate">{{ book.title }}</h3>
+            <div class="flex items-center justify-center gap-3 mb-6">
+              <span class="text-red-500 font-bold text-lg">¥{{ book.price }}</span>
+              <span class="text-gray-400 text-sm line-through">¥{{ book.oldPrice }}</span>
+            </div>
+            <button 
+              @click="showQrModal = true"
+              class="w-full py-3 rounded-full bg-apple-blue text-white font-medium text-sm hover:bg-apple-blue-hover transition-colors shadow-md hover:shadow-lg"
+            >
+              立即购买
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="showQrModal"
+      class="fixed inset-0 z-[9999] flex items-center justify-center p-4"
+    >
+      <div 
+        class="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        @click="showQrModal = false"
+      />
+      
+      <div class="relative bg-white rounded-3xl shadow-2xl w-full max-w-md animate-slide-up">
+        <button
+          @click="showQrModal = false"
+          class="absolute top-4 right-4 p-2 rounded-full hover:bg-gray-100 transition-colors z-10"
+        >
+          <X :size="24" class="text-gray-500" />
+        </button>
+
+        <div class="p-8 text-center">
+          <div class="mb-6">
+            <h3 class="text-2xl font-bold text-gray-900 mb-2">扫码添加客服</h3>
+            <p class="text-gray-500">添加微信客服，了解购买详情</p>
+          </div>
+
+          <div class="bg-gray-50 rounded-2xl p-6 inline-block">
+            <img 
+              :src="siteConfig.customerServiceQrcode"
+              alt="客服微信二维码"
+              class="w-64 h-64 mx-auto rounded-lg"
+            />
+          </div>
+
+          <p class="text-sm text-gray-400 mt-6">
+            工作时间：周一至周日 9:00-21:00
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
--- a/docs/.vitepress/theme/pages/Contact.vue
+++ b/docs/.vitepress/theme/pages/Contact.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { Phone, Mail, MapPin, Building2, Clock, MessageCircle, Users, Handshake } from 'lucide-vue-next'
+
+const cooperationModes = [
+  { icon: Building2, title: '机构加盟', desc: '提供品牌授权、课程体系、师资培训、运营支持等全方位加盟服务', color: 'blue' },
+  { icon: Users, title: '校企合作', desc: '与高校、专科院校开展升本培训、就业指导等深度合作项目', color: 'green' },
+  { icon: Handshake, title: '渠道代理', desc: '招募区域代理商，共享优质教育资源，实现互利共赢', color: 'orange' },
+]
+</script>
+
+<template>
+  <div class="pt-16 min-h-screen bg-apple-grey">
+    <section class="py-16 md:py-24 bg-gradient-to-br from-slate-900 to-slate-800">
+      <div class="max-w-7xl mx-auto px-6 text-center">
+        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 text-white/80 text-sm font-medium mb-6">
+          <Handshake :size="18" />
+          <span>Business Cooperation</span>
+        </div>
+        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
+          商务合作
+        </h1>
+        <p class="text-lg md:text-xl text-slate-300 max-w-2xl mx-auto">
+          携手恭学教育，共创教育未来。期待与各类教育机构、企业展开深度合作。
+        </p>
+      </div>
+    </section>
+
+    <section class="py-16 md:py-20">
+      <div class="max-w-7xl mx-auto px-6">
+        <div class="grid md:grid-cols-2 gap-8 lg:gap-12">
+          <div class="space-y-6">
+            <h2 class="text-2xl md:text-3xl font-bold text-apple-dark mb-8">联系我们</h2>
+            
+            <div class="space-y-4">
+              <div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow flex items-start gap-4">
+                <div class="w-12 h-12 bg-apple-blue/10 rounded-xl flex items-center justify-center flex-shrink-0">
+                  <Phone class="text-apple-blue" :size="24" />
+                </div>
+                <div>
+                  <h3 class="font-bold text-apple-dark mb-1">咨询电话</h3>
+                  <a href="tel:18322616529" class="text-xl font-semibold text-apple-blue hover:underline">
+                    18322616529
+                  </a>
+                  <p class="text-sm text-gray-500 mt-1">工作日 9:00 - 21:00</p>
+                </div>
+              </div>
+
+              <div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow flex items-start gap-4">
+                <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0">
+                  <Mail class="text-green-600" :size="24" />
+                </div>
+                <div>
+                  <h3 class="font-bold text-apple-dark mb-1">商务邮箱</h3>
+                  <a href="mailto:business@gongxue.cn" class="text-apple-blue hover:underline">
+                    business@gongxue.cn
+                  </a>
+                  <p class="text-sm text-gray-500 mt-1">我们将在24小时内回复</p>
+                </div>
+              </div>
+
+              <div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow flex items-start gap-4">
+                <div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center flex-shrink-0">
+                  <MapPin class="text-orange-600" :size="24" />
+                </div>
+                <div>
+                  <h3 class="font-bold text-apple-dark mb-1">公司地址</h3>
+                  <p class="text-gray-700">天津市津南区海棠众创大街C区智创工坊2层</p>
+                  <p class="text-sm text-gray-500 mt-1">欢迎预约来访</p>
+                </div>
+              </div>
+
+              <div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow flex items-start gap-4">
+                <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center flex-shrink-0">
+                  <Clock class="text-purple-600" :size="24" />
+                </div>
+                <div>
+                  <h3 class="font-bold text-apple-dark mb-1">工作时间</h3>
+                  <p class="text-gray-700">周一至周日 9:00 - 21:00</p>
+                  <p class="text-sm text-gray-500 mt-1">全年无休，随时为您服务</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex flex-col items-center justify-center">
+            <div class="bg-white p-8 rounded-3xl shadow-lg text-center max-w-sm w-full">
+              <div class="w-16 h-16 bg-apple-blue/10 rounded-2xl flex items-center justify-center mx-auto mb-6">
+                <MessageCircle class="text-apple-blue" :size="32" />
+              </div>
+              <h3 class="text-xl font-bold text-apple-dark mb-2">微信扫码咨询</h3>
+              <p class="text-gray-500 text-sm mb-6">添加客服微信 onlineart，获取详细合作方案</p>
+              
+              <div class="bg-gray-50 p-4 rounded-2xl inline-block">
+                <img 
+                  src="https://duiwaifengxiang-1304851894.cos.ap-beijing.myqcloud.com/gwgongxue/code.jpg" 
+                  alt="客服微信二维码"
+                  class="w-48 h-48 rounded-lg mx-auto"
+                />
+              </div>
+              
+              <p class="text-xs text-gray-400 mt-4">长按识别或扫一扫添加</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="py-16 md:py-20 bg-white">
+      <div class="max-w-7xl mx-auto px-6">
+        <div class="text-center mb-12">
+          <h2 class="text-2xl md:text-3xl font-bold text-apple-dark mb-4">合作模式</h2>
+          <p class="text-gray-500">多元化合作方式，满足不同需求</p>
+        </div>
+
+        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div 
+            v-for="(item, i) in cooperationModes"
+            :key="i"
+            class="bg-apple-grey p-8 rounded-3xl hover:shadow-lg transition-all duration-300 group"
+          >
+            <div :class="[
+              'w-14 h-14 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform',
+              item.color === 'blue' ? 'bg-blue-100 text-blue-600' :
+              item.color === 'green' ? 'bg-green-100 text-green-600' :
+              'bg-orange-100 text-orange-600'
+            ]">
+              <component :is="item.icon" :size="28" />
+            </div>
+            <h3 class="text-xl font-bold text-apple-dark mb-3">{{ item.title }}</h3>
+            <p class="text-gray-600 leading-relaxed">{{ item.desc }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="py-16 md:py-20 bg-apple-grey">
+      <div class="max-w-7xl mx-auto px-6">
+        <div class="bg-white rounded-3xl p-8 md:p-12 shadow-sm">
+          <div class="flex flex-col md:flex-row items-center gap-8">
+            <div class="flex items-center justify-center w-24 h-24 bg-white rounded-2xl flex-shrink-0 shadow-sm">
+              <img 
+                src="/logo.png" 
+                alt="恭学教育Logo" 
+                class="w-16 h-16"
+              />
+            </div>
+            <div>
+              <h2 class="text-2xl font-bold text-apple-dark mb-4">关于恭学教育</h2>
+              <p class="text-gray-600 leading-relaxed mb-4">
+                恭学教育是天津领先的专升本培训品牌，专注于为专科学生提供优质的升本辅导服务。
+                我们拥有完善的课程体系、专业的师资团队和先进的教学技术，已累计帮助数万名学员成功升本。
+              </p>
+              <p class="text-gray-600 leading-relaxed">
+                秉承"赋能未来，让升本更简单"的理念，恭学教育致力于用科技创新推动教育进步，
+                为广大学子提供更高效、更便捷的学习体验。
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
--- a/docs/.vitepress/theme/pages/DataCenter.vue
+++ b/docs/.vitepress/theme/pages/DataCenter.vue
@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { Database, TrendingUp, Target, Sparkles, ArrowRight, BarChart3, Brain, LineChart, PieChart, Zap } from 'lucide-vue-next'
+
+const particles = ref<{ left: number; top: number; delay: number; duration: number }[]>([])
+
+onMounted(() => {
+  particles.value = Array.from({ length: 15 }, () => ({
+    left: Math.random() * 100,
+    top: Math.random() * 100,
+    delay: Math.random() * 2,
+    duration: 4 + Math.random() * 3,
+  }))
+})
+
+const coreCards = [
+  { icon: Target, color: 'indigo', bgColor: 'bg-indigo-100', iconColor: 'text-indigo-600', title: '紧扣考纲动向', desc: '实时跟踪考试政策变化\n精准把握命题趋势' },
+  { icon: TrendingUp, color: 'blue', bgColor: 'bg-blue-100', iconColor: 'text-blue-600', title: '持续优化模型', desc: '迭代教学内容体系\n打造精准预测能力' },
+  { icon: Sparkles, color: 'purple', bgColor: 'bg-purple-100', iconColor: 'text-purple-600', title: '数据驱动提升', desc: '智能分析学习行为\n个性化定制学习路径' },
+]
+
+const capabilities = [
+  { icon: BarChart3, title: '考点分布分析', value: '10万+', desc: '真题数据样本' },
+  { icon: Brain, title: '智能诊断引擎', value: '98%', desc: '诊断准确率' },
+  { icon: LineChart, title: '趋势预测模型', value: '5年', desc: '历史数据追溯' },
+  { icon: PieChart, title: '学情画像系统', value: '360°', desc: '全维度分析' },
+]
+
+const scenarios = [
+  {
+    title: '智能题库推荐',
+    desc: '基于学员答题数据，AI自动识别薄弱知识点，精准推送强化练习题目，避免无效刷题',
+    features: ['个性化推荐', '错题智能归类', '知识图谱分析']
+  },
+  {
+    title: '考情趋势预测',
+    desc: '分析历年真题命题规律，结合最新考纲变化，预测高频考点和题型分布',
+    features: ['命题趋势分析', '考点权重计算', '模拟试卷生成']
+  },
+  {
+    title: '学习路径规划',
+    desc: '根据目标分数和剩余时间，智能规划最优学习路径，合理分配各科复习时间',
+    features: ['目标分解', '进度追踪', '动态调整']
+  },
+  {
+    title: '教学效果评估',
+    desc: '多维度评估教学效果，为教研团队提供改进依据，持续优化课程内容',
+    features: ['效果量化', '对比分析', '优化建议']
+  },
+]
+</script>
+
+<template>
+  <div class="pt-16">
+    <div class="relative min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 overflow-hidden">
+      <div class="absolute inset-0 overflow-hidden opacity-30 pointer-events-none">
+        <div class="dc-grid absolute w-[200%] h-[200%] -top-1/2 -left-1/2 bg-[linear-gradient(to_right,#6366f1_1px,transparent_1px),linear-gradient(to_bottom,#6366f1_1px,transparent_1px)] bg-[size:6rem_6rem]"></div>
+      </div>
+
+      <div class="absolute inset-0 overflow-hidden pointer-events-none">
+        <div
+          v-for="(particle, i) in particles"
+          :key="i"
+          class="absolute w-3 h-3 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-full opacity-20 dc-particle"
+          :style="{ left: `${particle.left}%`, top: `${particle.top}%`, animationDelay: `${particle.delay}s`, animationDuration: `${particle.duration}s` }"
+        ></div>
+      </div>
+
+      <div class="relative z-10 max-w-7xl mx-auto px-6 md:px-8 py-20 md:py-28">
+        <div class="text-center mb-16 md:mb-20">
+          <div class="inline-flex items-center gap-3 px-5 py-2.5 md:px-6 md:py-3 rounded-full bg-indigo-600 text-white text-xs md:text-sm font-bold mb-8 md:mb-10 shadow-xl shadow-indigo-500/30 dc-pulse">
+            <Database :size="18" />
+            <span>数据驱动教学创新</span>
+            <Sparkles :size="18" />
+          </div>
+          
+          <h1 class="text-4xl md:text-5xl lg:text-7xl font-bold text-slate-900 mb-6 md:mb-8">
+            专升本<span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-blue-600">大数据研究中心</span>
+          </h1>
+          <p class="text-lg md:text-xl text-slate-600 max-w-2xl mx-auto mb-8">
+            依托海量真实数据，深度洞察考试趋势，为每一位学员提供精准、高效的学习方案
+          </p>
+          <div class="w-24 md:w-32 h-1 bg-gradient-to-r from-transparent via-indigo-400 to-transparent mx-auto rounded-full"></div>
+        </div>
+
+        <div class="grid md:grid-cols-3 gap-6 md:gap-8 mb-20">
+          <div
+            v-for="(item, i) in coreCards"
+            :key="i"
+            class="bg-white border border-slate-100 p-8 md:p-10 rounded-3xl shadow-xl hover:shadow-2xl transition-shadow duration-300 dc-slide-up"
+            :style="{ animationDelay: `${i * 0.2}s` }"
+          >
+            <div :class="['p-4 rounded-2xl w-16 h-16 flex items-center justify-center mb-6', item.bgColor]">
+              <component :is="item.icon" :class="item.iconColor" :size="32" />
+            </div>
+            <h3 class="text-2xl md:text-3xl font-bold text-slate-900 mb-4">{{ item.title }}</h3>
+            <p class="text-slate-600 text-base md:text-lg leading-loose whitespace-pre-line">{{ item.desc }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <section class="py-20 md:py-28 bg-white">
+      <div class="max-w-7xl mx-auto px-6 md:px-8">
+        <div class="text-center mb-16 dc-slide-up">
+          <span class="inline-block px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 text-xs font-bold mb-4 uppercase tracking-wider">
+            Core Capabilities
+          </span>
+          <h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4">核心数据能力</h2>
+          <p class="text-slate-500 max-w-xl mx-auto">
+            基于多年积累的海量教育数据，构建智能分析体系
+          </p>
+        </div>
+
+        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+          <div
+            v-for="(item, i) in capabilities"
+            :key="i"
+            class="bg-gradient-to-br from-slate-50 to-white p-6 rounded-2xl border border-slate-100 hover:border-indigo-200 hover:shadow-lg transition-all duration-300 group dc-scale-in"
+            :style="{ animationDelay: `${i * 0.1}s` }"
+          >
+            <div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center mb-4 group-hover:bg-indigo-600 transition-colors">
+              <component :is="item.icon" class="text-indigo-600 group-hover:text-white transition-colors" :size="24" />
+            </div>
+            <h3 class="font-bold text-slate-900 mb-2">{{ item.title }}</h3>
+            <div class="text-3xl font-bold text-indigo-600 mb-1">{{ item.value }}</div>
+            <p class="text-sm text-slate-500">{{ item.desc }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="py-20 md:py-28 bg-slate-50">
+      <div class="max-w-7xl mx-auto px-6 md:px-8">
+        <div class="text-center mb-16 dc-slide-up">
+          <span class="inline-block px-4 py-1.5 rounded-full bg-white text-slate-600 text-xs font-bold mb-4 uppercase tracking-wider">
+            Application Scenarios
+          </span>
+          <h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4">数据赋能场景</h2>
+          <p class="text-slate-500 max-w-xl mx-auto">
+            将数据洞察转化为实际教学效果提升
+          </p>
+        </div>
+
+        <div class="grid md:grid-cols-2 gap-8">
+          <div
+            v-for="(item, i) in scenarios"
+            :key="i"
+            class="bg-white p-8 rounded-3xl shadow-lg hover:shadow-xl transition-shadow dc-slide-x"
+            :style="{ animationDelay: `${i * 0.1}s` }"
+          >
+            <div class="flex items-start gap-4 mb-4">
+              <div class="w-10 h-10 bg-indigo-100 rounded-xl flex items-center justify-center flex-shrink-0">
+                <Zap class="text-indigo-600" :size="20" />
+              </div>
+              <div>
+                <h3 class="text-xl font-bold text-slate-900 mb-2">{{ item.title }}</h3>
+                <p class="text-slate-600 leading-relaxed">{{ item.desc }}</p>
+              </div>
+            </div>
+            <div class="flex flex-wrap gap-2 mt-4">
+              <span v-for="(feature, j) in item.features" :key="j" class="px-3 py-1 bg-slate-100 text-slate-600 text-xs rounded-full">
+                {{ feature }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="py-20 md:py-28 bg-gradient-to-br from-indigo-600 to-purple-700">
+      <div class="max-w-4xl mx-auto px-6 md:px-8 text-center">
+        <div class="dc-slide-up">
+          <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">
+            用数据驱动你的升本之路
+          </h2>
+          <p class="text-indigo-100 text-lg mb-10 max-w-2xl mx-auto">
+            加入恭学，体验数据赋能的智能学习方式，让备考更高效、更精准
+          </p>
+          <div class="flex flex-wrap gap-4 justify-center">
+            <a
+              href="/question-bank"
+              class="px-8 py-4 bg-white text-indigo-600 rounded-full font-bold hover:bg-indigo-50 transition-colors shadow-lg flex items-center gap-2"
+            >
+              体验刷题系统 <ArrowRight :size="18" />
+            </a>
+            <a
+              href="/online-school"
+              class="px-8 py-4 bg-indigo-500/30 text-white rounded-full font-bold hover:bg-indigo-500/50 transition-colors border border-white/30 flex items-center gap-2"
+            >
+              了解在线课程
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.dc-grid {
+  animation: dcGridMove 30s linear infinite;
+}
+
+@keyframes dcGridMove {
+  0% { transform: translate(0, 0); }
+  50% { transform: translate(100px, 100px); }
+  100% { transform: translate(0, 0); }
+}
+
+.dc-particle {
+  animation: dcParticleFloat 4s ease-in-out infinite;
+}
+
+@keyframes dcParticleFloat {
+  0%, 100% { transform: translateY(0); opacity: 0.2; }
+  50% { transform: translateY(-40px); opacity: 0.5; }
+}
+
+.dc-pulse {
+  animation: dcPulse 2s ease-in-out infinite;
+}
+
+@keyframes dcPulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+
+.dc-slide-up {
+  animation: dcSlideUp 0.6s ease-out forwards;
+  opacity: 0;
+}
+
+@keyframes dcSlideUp {
+  from { opacity: 0; transform: translateY(40px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.dc-scale-in {
+  animation: dcScaleIn 0.5s ease-out forwards;
+  opacity: 0;
+}
+
+@keyframes dcScaleIn {
+  from { opacity: 0; transform: scale(0.9); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.dc-slide-x {
+  animation: dcSlideX 0.5s ease-out forwards;
+  opacity: 0;
+}
+
+@keyframes dcSlideX {
+  from { opacity: 0; transform: translateX(20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+</style>
--- a/docs/.vitepress/theme/pages/Home.vue
+++ b/docs/.vitepress/theme/pages/Home.vue
@@ -0,0 +1,381 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { 
+  ArrowRight, 
+  BookOpen, 
+  ChevronRight, 
+  Play, 
+  Sparkles, 
+  Smartphone, 
+  GraduationCap,
+  Award,
+  Target,
+  Users,
+  Globe,
+  UserPlus,
+  Database
+} from 'lucide-vue-next'
+import PhoneMockup from '../components/PhoneMockup.vue'
+import BookMockup from '../components/BookMockup.vue'
+import CountUpNumber from '../components/CountUpNumber.vue'
+import EnrollModal from '../components/EnrollModal.vue'
+import { useSiteConfig } from '../../utils/siteConfig'
+
+const siteConfig = useSiteConfig()
+const enrollModalOpen = ref(false)
+const videoPlaying = ref(false)
+const videoRef = ref<HTMLVideoElement | null>(null)
+
+const newsData = [
+  { id: '1', date: '2026-01-15', category: '政策解读', title: '2026年天津高职升本科考试报名热点问答发布', description: '最新报名政策详解：应届生、往届生报考条件，报名时间节点，平行志愿填报策略等重要信息。' },
+]
+
+const cultureItems = [
+  { title: '正直', desc: '坚守底线，以德为先', iconColor: 'text-blue-500', bgColor: 'bg-gray-50' },
+  { title: '进取', desc: '勇于突破，拒绝平庸', iconColor: 'text-red-500', bgColor: 'bg-gray-50' },
+  { title: '协作', desc: '开放协同，持续进化', iconColor: 'text-green-500', bgColor: 'bg-gray-50' },
+  { title: '创造', desc: '超越创新，探索未来', iconColor: 'text-purple-500', bgColor: 'bg-gray-50' },
+]
+
+const teamMembers = [
+  { name: '陈奕静老师', role: '七年专业课教龄王牌老师', avatar: 'https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/%E9%99%88%E5%A5%95%E9%9D%99-tuya.webp' },
+  { name: '郭馨老师', role: '七年专业课教龄王牌老师', avatar: 'https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/%E9%83%AD%E9%A6%A8%20%282%29-%E8%AE%A1%E7%AE%97%E6%9C%BA-tuya.webp' },
+  { name: '师哲老师', role: '教学总监', avatar: 'https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/%E5%B8%88%E5%93%B22-tuya.webp' },
+  { name: '王沐妍老师', role: '七年专业课教龄王牌老师', avatar: 'https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/%E7%8E%8B%E6%B2%90%E5%A6%8D-tuya.webp' },
+]
+
+const handlePlayVideo = () => {
+  if (videoRef.value && siteConfig.value.heroVideoUrl) {
+    if (!videoRef.value.src) {
+      videoRef.value.src = siteConfig.value.heroVideoUrl
+    }
+    videoPlaying.value = true
+    videoRef.value.play()
+  }
+}
+
+const handleVideoEnd = () => {
+  videoPlaying.value = false
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <section class="relative min-h-screen flex flex-col pt-36 md:pt-48 pb-12 md:pb-32 bg-apple-grey overflow-hidden">
+      <div class="absolute top-0 left-0 w-full h-full overflow-hidden z-0 opacity-30 pointer-events-none">
+        <div class="absolute top-[-10%] right-[-20%] w-[800px] h-[800px] bg-blue-100 rounded-full blur-[120px]"></div>
+        <div class="absolute bottom-[-10%] left-[-20%] w-[600px] h-[600px] bg-purple-100 rounded-full blur-[100px]"></div>
+      </div>
+
+      <div class="relative z-10 max-w-7xl mx-auto px-4 md:px-6 flex flex-col items-center text-center">
+        <div class="mb-10 animate-fade-in">
+          <span class="inline-flex items-center gap-2 px-4 py-2 border border-gray-200/60 rounded-full text-xs md:text-sm font-medium text-gray-500 bg-white/80 backdrop-blur-md shadow-sm hover:scale-105 transition-transform cursor-default tracking-wide">
+            <span class="w-1.5 h-1.5 rounded-full bg-apple-blue animate-pulse"></span>
+            恭学教育，天津专升本轻奢品牌
+          </span>
+        </div>
+
+        <h1 class="text-4xl md:text-6xl lg:text-7xl font-semibold text-apple-dark mb-10 md:mb-14 leading-[1.1] tracking-tight animate-slide-up max-w-5xl mx-auto">
+          赋能未来，<br class="md:hidden" />
+          <span class="text-apple-blue">
+            让升本更简单。
+          </span>
+        </h1>
+
+        <div 
+          class="w-full max-w-4xl aspect-video bg-black rounded-[1.5rem] md:rounded-[2rem] shadow-2xl overflow-hidden relative group animate-slide-up mb-12 md:mb-16"
+        >
+          <video
+            v-if="siteConfig.heroVideoUrl"
+            ref="videoRef"
+            :poster="siteConfig.heroVideoCover"
+            :class="[
+              'w-full h-full object-cover transition-opacity duration-500',
+              videoPlaying ? 'opacity-100' : 'opacity-0'
+            ]"
+            :controls="videoPlaying"
+            @ended="handleVideoEnd"
+            preload="none"
+          />
+          
+          <template v-if="!videoPlaying">
+            <img
+              :src="siteConfig.heroVideoCover"
+              alt="Brand Video Cover"
+              class="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:opacity-40 transition-opacity duration-500 scale-105 group-hover:scale-100"
+              loading="eager"
+            />
+            <button
+              @click="handlePlayVideo"
+              class="absolute inset-0 flex items-center justify-center cursor-pointer"
+            >
+              <div class="w-16 h-16 md:w-24 md:h-24 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center border border-white/30 group-hover:scale-110 transition-transform duration-300">
+                <Play class="text-white fill-white ml-1" :size="32" />
+              </div>
+            </button>
+            <div class="absolute bottom-4 left-4 md:bottom-10 md:left-10 text-left pointer-events-none">
+              <h3 class="text-white font-bold text-lg md:text-2xl">{{ siteConfig.heroVideoTitle }}</h3>
+              <p class="text-gray-300 text-xs md:text-base">{{ siteConfig.heroVideoSubtitle }}</p>
+            </div>
+          </template>
+        </div>
+
+        <div class="flex flex-wrap gap-3 md:gap-5 justify-center animate-slide-up">
+          <a
+            href="/online-school"
+            class="px-5 py-2.5 md:px-9 md:py-4 bg-apple-blue hover:bg-apple-blue-hover text-white rounded-full text-sm md:text-lg font-medium transition-all transform hover:scale-105 shadow-lg flex items-center justify-center gap-1.5 md:gap-2"
+          >
+            开始学习 <ChevronRight :size="14" class="md:w-5 md:h-5" />
+          </a>
+          <a
+            href="/data-center"
+            class="px-5 py-2.5 md:px-9 md:py-4 bg-white/90 backdrop-blur-md text-apple-blue border-2 border-apple-blue/30 rounded-full text-sm md:text-lg font-medium hover:bg-apple-blue hover:text-white hover:border-apple-blue transition-all flex items-center justify-center gap-1.5 md:gap-2"
+          >
+            <Database :size="16" class="md:w-5 md:h-5" /> 大数据中心
+          </a>
+          <button
+            @click="enrollModalOpen = true"
+            class="px-5 py-2.5 md:px-9 md:py-4 bg-white/90 backdrop-blur-md text-apple-blue border-2 border-apple-blue/30 rounded-full text-sm md:text-lg font-medium hover:bg-apple-blue hover:text-white hover:border-apple-blue transition-all flex items-center justify-center gap-1.5 md:gap-2"
+          >
+            <UserPlus :size="16" class="md:w-5 md:h-5" /> 报名上课
+          </button>
+        </div>
+      </div>
+    </section>
+
+    <section class="py-12 md:py-32 bg-white">
+      <div class="max-w-7xl mx-auto px-4 md:px-6">
+        <div class="mb-14 md:mb-20 text-center md:text-left">
+          <h2 class="text-3xl md:text-5xl font-semibold text-apple-dark mb-5 tracking-tight">核心产品生态</h2>
+          <p class="text-lg md:text-xl text-gray-500 font-normal max-w-2xl mx-auto md:mx-0 leading-relaxed">
+            科技与教育的完美融合。精心打磨的每一个细节，只为给你最高效的学习体验。
+          </p>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8 auto-rows-auto">
+          <a
+            href="/question-bank"
+            class="lg:col-span-7 relative group overflow-hidden rounded-[2.5rem] bg-[#000000] cursor-pointer shadow-2xl transition-transform duration-500 hover:scale-[1.01] flex flex-col md:flex-row"
+          >
+            <div class="absolute inset-0 bg-gradient-to-br from-[#1c1c1e] to-[#000000] z-0"></div>
+            <div class="absolute top-[-50%] right-[-20%] w-[600px] h-[600px] bg-blue-900/30 rounded-full blur-[100px] pointer-events-none mix-blend-screen"></div>
+
+            <div class="relative z-20 flex-1 p-10 md:p-12 flex flex-col justify-center items-start">
+              <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 border border-white/5 backdrop-blur-md mb-6">
+                <Sparkles :size="14" class="text-yellow-400 fill-current" />
+                <span class="text-xs font-bold text-gray-200 tracking-wide uppercase">AI Algorithm 4.0</span>
+              </div>
+
+              <h3 class="text-3xl md:text-5xl font-bold text-white mb-6 leading-tight">
+                恭学刷题<br />
+                <span class="text-blue-500">智能进化。</span>
+              </h3>
+
+              <p class="text-gray-400 text-base md:text-lg mb-8 max-w-sm leading-relaxed">
+                不只是刷题。大数据精准诊断，哪里不会练哪里，复习效率提升 300%。
+              </p>
+
+              <button class="group/btn relative px-6 py-3 bg-white text-black rounded-full font-bold text-sm flex items-center gap-2 overflow-hidden">
+                <span class="relative z-10 flex items-center gap-2">
+                  <Smartphone :size="18" />
+                  立即体验
+                </span>
+              </button>
+            </div>
+
+            <div class="relative z-10 flex-1 min-h-[300px] md:min-h-auto flex items-end justify-center md:justify-end md:pr-12 pb-0">
+              <div class="relative w-[240px] md:w-[260px] transform translate-y-[15%] group-hover:translate-y-[5%] transition-transform duration-700 ease-out">
+                <div class="absolute inset-0 bg-blue-500/40 blur-[50px] rounded-full transform translate-y-10"></div>
+                <PhoneMockup :imageSrc="siteConfig.questionBankMockup" className="relative z-20 drop-shadow-2xl" />
+              </div>
+            </div>
+          </a>
+
+          <div class="lg:col-span-5 flex flex-col gap-6 lg:gap-8">
+            <a
+              href="/online-school"
+              class="flex-1 relative group overflow-hidden rounded-[2rem] md:rounded-[2.5rem] bg-blue-50/50 border border-blue-100 cursor-pointer transition-all duration-500 hover:shadow-xl hover:bg-blue-50 p-8 flex flex-col sm:flex-row items-center gap-6"
+            >
+              <div class="relative z-10 flex-1 text-center sm:text-left">
+                <div class="flex items-center justify-center sm:justify-start gap-2 text-apple-blue font-medium mb-3">
+                  <GraduationCap :size="18" />
+                  <span class="uppercase tracking-widest text-xs">Online Class</span>
+                </div>
+                <h3 class="text-2xl md:text-3xl font-bold text-apple-dark mb-2">恭学网校</h3>
+                <p class="text-gray-500 text-sm mb-6">线上课 APP 随身学</p>
+                <span class="text-apple-blue text-sm font-semibold group-hover:underline flex items-center justify-center sm:justify-start gap-1">
+                  下载 APP <ChevronRight :size="14" />
+                </span>
+              </div>
+
+              <div class="relative w-[140px] h-[200px] flex-shrink-0 transform rotate-[-5deg] group-hover:rotate-0 transition-transform duration-500">
+                <PhoneMockup :imageSrc="siteConfig.onlineSchoolMockup" className="w-full shadow-lg" />
+              </div>
+            </a>
+
+            <a
+              href="/books"
+              class="flex-1 relative group overflow-hidden rounded-[2rem] md:rounded-[2.5rem] bg-[#F5F5F0] cursor-pointer transition-all duration-500 hover:shadow-xl flex flex-col sm:flex-row items-center justify-between p-8 md:p-10 gap-6"
+            >
+              <div class="absolute top-0 right-0 w-64 h-64 bg-orange-100/50 rounded-full blur-[80px]"></div>
+              <div class="relative z-10 flex flex-col justify-center w-full sm:w-1/2 text-center sm:text-left">
+                <div class="flex items-center justify-center sm:justify-start gap-2 text-orange-600 font-medium mb-3">
+                  <BookOpen :size="18" />
+                  <span class="uppercase tracking-widest text-xs">Publishing</span>
+                </div>
+                <h3 class="text-2xl md:text-3xl font-bold text-apple-dark mb-2">权威教材</h3>
+                <p class="text-gray-500 text-sm mb-6">年年迭代，紧扣大纲。</p>
+                <span class="inline-flex items-center justify-center sm:justify-start text-apple-dark font-semibold group-hover:translate-x-2 transition-transform text-sm md:text-base">
+                  浏览书店 <ArrowRight :size="16" class="ml-2" />
+                </span>
+              </div>
+              <div class="relative w-full sm:w-1/2 flex justify-center items-center">
+                <BookMockup 
+                  title="天津专升本数学" 
+                  imageSrc="https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/%E6%95%B0%E5%AD%A61-tuya.webp" 
+                  className="transform scale-90 sm:scale-100 max-w-[180px]" 
+                />
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="py-20 bg-white border-t border-gray-100">
+      <div class="max-w-7xl mx-auto px-6">
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+          <div class="text-center p-6 group cursor-default">
+            <CountUpNumber :end="siteConfig.statsYears" suffix="+" />
+            <div class="text-gray-500 text-sm tracking-wider uppercase">年专注专升本</div>
+          </div>
+          <div class="text-center p-6 group cursor-default">
+            <div class="text-4xl md:text-5xl font-bold text-apple-dark">{{ siteConfig.statsStudents }}</div>
+            <div class="text-gray-500 text-sm tracking-wider uppercase">累计服务学员</div>
+          </div>
+          <div class="text-center p-6 group cursor-default">
+            <div class="text-4xl md:text-5xl font-bold text-apple-dark">{{ siteConfig.statsCoverage }}</div>
+            <div class="text-gray-500 text-sm tracking-wider uppercase">真题覆盖率</div>
+          </div>
+          <div class="text-center p-6 group cursor-default">
+            <CountUpNumber :end="siteConfig.statsSchools" suffix="所" />
+            <div class="text-gray-500 text-sm tracking-wider uppercase">合作院校</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="py-24 bg-apple-grey">
+      <div class="max-w-7xl mx-auto px-6">
+        <div class="text-center mb-16">
+          <div class="inline-block px-3 py-1 rounded-full bg-white border border-gray-200 text-xs font-bold text-gray-500 mb-4 uppercase tracking-wider">
+            Corporate Culture
+          </div>
+          <h2 class="text-3xl md:text-4xl font-bold text-apple-dark">企业文化</h2>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          <div
+            v-for="(item, i) in cultureItems"
+            :key="i"
+            class="bg-white p-8 rounded-3xl shadow-sm hover:shadow-lg transition-all duration-300 flex flex-col items-center text-center group"
+          >
+            <div :class="['w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-gray-100 transition-colors', item.bgColor]">
+              <Award v-if="i === 0" :size="32" :class="item.iconColor" />
+              <Target v-else-if="i === 1" :size="32" :class="item.iconColor" />
+              <Users v-else-if="i === 2" :size="32" :class="item.iconColor" />
+              <Globe v-else :size="32" :class="item.iconColor" />
+            </div>
+            <h3 class="text-xl font-bold text-apple-dark mb-2">{{ item.title }}</h3>
+            <p class="text-gray-500 text-sm">{{ item.desc }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="relative py-10 md:py-16 bg-apple-grey">
+      <div class="max-w-7xl mx-auto px-4 md:px-6">
+        <div class="relative rounded-3xl overflow-hidden shadow-2xl">
+          <img
+            src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600&q=80"
+            alt="恭学愿景"
+            class="w-full h-[300px] md:h-[450px] object-cover"
+          />
+          <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
+          <div class="absolute inset-0 flex flex-col items-center justify-center text-center px-6">
+            <h2 class="text-white text-3xl md:text-5xl font-bold mb-4">种种用心，只为你能省心</h2>
+            <p class="text-gray-200 text-sm md:text-lg max-w-2xl">
+              不懈探索、勇于突破、脚踏实地、求真务实。我们追寻真理，不断探索以达到新的境界。
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="py-20 md:py-28 bg-[#F5F5F7]">
+      <div class="max-w-7xl mx-auto px-4 md:px-6">
+        <div class="text-center mb-14">
+          <div class="text-apple-blue font-semibold text-sm tracking-widest uppercase mb-3">
+            Dedicated Member
+          </div>
+          <h2 class="text-3xl md:text-4xl font-bold text-apple-dark">核心团队</h2>
+        </div>
+
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
+          <div
+            v-for="(member, i) in teamMembers"
+            :key="i"
+            class="bg-white rounded-2xl md:rounded-3xl p-6 md:p-8 flex flex-col items-center text-center shadow-sm hover:shadow-xl transition-all duration-300 group"
+          >
+            <div class="w-20 h-20 md:w-28 md:h-28 rounded-full overflow-hidden mb-4 md:mb-6 ring-4 ring-white shadow-lg group-hover:scale-105 transition-transform duration-300">
+              <img
+                :src="member.avatar"
+                :alt="member.name"
+                class="w-full h-full object-cover"
+                loading="lazy"
+              />
+            </div>
+            <h3 class="text-base md:text-xl font-bold text-apple-dark mb-1">{{ member.name }}</h3>
+            <p class="text-gray-500 text-xs md:text-sm">{{ member.role }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="py-20 md:py-28 bg-apple-grey">
+      <div class="max-w-4xl mx-auto px-4 md:px-6">
+        <div class="flex justify-between items-end mb-10 md:mb-14">
+          <h2 class="text-2xl md:text-3xl font-bold text-apple-dark">行业动态 & 咨询</h2>
+          <a href="/knowledge/" class="text-apple-blue font-medium hover:underline flex items-center text-sm md:text-base">
+            查看更多 <ChevronRight :size="16" />
+          </a>
+        </div>
+
+        <div class="space-y-4 md:space-y-6">
+          <div
+            v-for="news in newsData"
+            :key="news.id"
+            @click="() => { window.location.href = `/knowledge/${news.id}/` }"
+            class="bg-white p-5 md:p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow cursor-pointer flex flex-col md:flex-row gap-4 md:gap-6 items-start md:items-center group"
+          >
+            <div class="bg-blue-50 group-hover:bg-apple-blue group-hover:text-white transition-colors text-apple-blue px-4 py-2 rounded-lg font-bold text-center min-w-[80px] self-start md:self-center">
+              <div class="text-lg md:text-xl">{{ news.date.split('-')[2] }}</div>
+              <div class="text-xs uppercase">{{ news.date.split('-')[1] }}月</div>
+            </div>
+            <div class="flex-1">
+              <div class="flex items-center gap-3 mb-2">
+                <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">{{ news.category }}</span>
+              </div>
+              <h3 class="text-lg md:text-xl font-bold text-apple-dark mb-2 group-hover:text-apple-blue transition-colors">
+                {{ news.title }}
+              </h3>
+              <p class="text-apple-text-gray text-sm line-clamp-2 leading-relaxed">{{ news.description }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <EnrollModal :isOpen="enrollModalOpen" @close="enrollModalOpen = false" />
+  </div>
+</template>
--- a/docs/.vitepress/theme/pages/KnowledgeDetail.vue
+++ b/docs/.vitepress/theme/pages/KnowledgeDetail.vue
@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+import { ArrowLeft, Clock, Eye, Tag, Share2, BookOpen } from 'lucide-vue-next'
+import { categoryLabel, formatDate, formatViewCount } from '../../utils/knowledge'
+
+import articleIndex from '../../../knowledge/index.json'
+
+const { frontmatter, page } = useData()
+
+const currentFileName = computed(() => {
+  return page.value.relativePath?.split('/').pop()?.replace('.md', '') || ''
+})
+
+const article = computed(() => ({
+  id: frontmatter.value.id || currentFileName.value,
+  title: frontmatter.value.title || '',
+  summary: frontmatter.value.summary || '',
+  content: '',
+  category: frontmatter.value.category || '',
+  tags: frontmatter.value.tags || [],
+  coverImage: frontmatter.value.coverImage || '',
+  author: frontmatter.value.author || '',
+  isTop: frontmatter.value.isTop || false,
+  publishedAt: frontmatter.value.publishedAt || '',
+  updatedAt: '',
+  viewCount: frontmatter.value.viewCount || 0,
+}))
+
+const relatedArticles = computed(() => {
+  return (articleIndex as any[])
+    .filter(item =>
+      item.id !== currentFileName.value &&
+      item.category === article.value.category
+    )
+    .slice(0, 3)
+    .map(item => ({
+      path: `/knowledge/${item.id}`,
+      frontmatter: {
+        title: item.title,
+        category: item.category,
+        coverImage: item.coverImage || '',
+        viewCount: item.viewCount || 0,
+      }
+    }))
+})
+
+const handleShare = async () => {
+  const url = window.location.href
+  if (navigator.share) {
+    try {
+      await navigator.share({ title: article.value.title, url })
+    } catch {}
+  } else {
+    await navigator.clipboard.writeText(url).catch(() => {})
+    alert('链接已复制到剪贴板')
+  }
+}
+</script>
+
+<template>
+  <div class="pt-24 min-h-screen bg-apple-grey animate-fade-in">
+    <div class="max-w-4xl mx-auto px-4 md:px-6 pb-20">
+      <a
+        href="/knowledge/"
+        class="inline-flex items-center gap-2 text-gray-500 hover:text-apple-blue mb-8 transition-colors"
+      >
+        <ArrowLeft :size="18" /> 返回知识库
+      </a>
+
+      <article class="bg-white rounded-3xl shadow-sm overflow-hidden">
+        <div
+          v-if="article.coverImage"
+          class="w-full h-48 md:h-72 overflow-hidden"
+        >
+          <img
+            :src="article.coverImage"
+            :alt="article.title"
+            class="w-full h-full object-cover"
+          />
+        </div>
+
+        <div class="p-6 md:p-10 border-b border-gray-100">
+          <div class="flex flex-wrap items-center gap-2 mb-4">
+            <span class="bg-apple-blue/10 text-apple-blue text-xs font-medium px-3 py-1 rounded-full">
+              {{ categoryLabel[article.category] || article.category }}
+            </span>
+            <span
+              v-if="article.isTop"
+              class="bg-orange-100 text-orange-600 text-xs font-medium px-3 py-1 rounded-full"
+            >
+              置顶
+            </span>
+            <span
+              v-for="(tag, i) in article.tags.slice(0, 3)"
+              :key="i"
+              class="bg-gray-100 text-gray-600 text-xs px-2 py-0.5 rounded-full"
+            >
+              #{{ tag }}
+            </span>
+          </div>
+
+          <h1 class="text-2xl md:text-3xl font-bold text-gray-900 mb-6 leading-tight">
+            {{ article.title }}
+          </h1>
+
+          <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500">
+            <span v-if="article.author" class="flex items-center gap-1">
+              <span class="w-6 h-6 bg-apple-blue/10 rounded-full flex items-center justify-center text-xs text-apple-blue font-medium">
+                {{ article.author.charAt(0) }}
+              </span>
+              {{ article.author }}
+            </span>
+            <span class="flex items-center gap-1">
+              <Clock :size="14" /> {{ formatDate(article.publishedAt) }}
+            </span>
+            <span class="flex items-center gap-1">
+              <Eye :size="14" /> {{ formatViewCount(article.viewCount) }} 阅读
+            </span>
+            <span class="flex items-center gap-1">
+              <Tag :size="14" /> {{ categoryLabel[article.category] || article.category }}
+            </span>
+          </div>
+        </div>
+
+        <div v-if="article.summary" class="px-6 md:px-10 py-4 bg-blue-50/50 border-b border-blue-100">
+          <p class="text-sm text-blue-800 leading-relaxed italic">
+            {{ article.summary }}
+          </p>
+        </div>
+
+        <div class="p-6 md:p-10 knowledge-prose">
+          <slot />
+        </div>
+
+        <div class="p-6 md:p-10 bg-gray-50 border-t border-gray-100">
+          <div class="flex flex-col md:flex-row items-center justify-between gap-4">
+            <div class="flex items-center gap-2 text-gray-500">
+              <BookOpen :size="18" />
+              <span>知识库</span>
+            </div>
+            <button
+              @click="handleShare"
+              class="flex items-center gap-2 px-6 py-2 bg-white border border-gray-200 rounded-full text-gray-600 hover:bg-gray-50 transition-colors"
+            >
+              <Share2 :size="16" /> 分享文章
+            </button>
+          </div>
+        </div>
+      </article>
+
+      <div v-if="relatedArticles.length > 0" class="mt-10">
+        <h2 class="text-xl font-bold text-apple-dark mb-6">相关文章</h2>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <a
+            v-for="rel in relatedArticles"
+            :key="rel.path"
+            :href="rel.path"
+            class="bg-white p-5 rounded-2xl shadow-sm hover:shadow-md transition-all group"
+          >
+            <div
+              v-if="rel.frontmatter?.coverImage"
+              class="w-full h-28 rounded-lg overflow-hidden mb-3"
+            >
+              <img
+                :src="rel.frontmatter.coverImage"
+                :alt="rel.frontmatter.title"
+                class="w-full h-full object-cover"
+                loading="lazy"
+              />
+            </div>
+            <h3 class="font-semibold text-gray-900 group-hover:text-apple-blue transition-colors line-clamp-2 text-sm">
+              {{ rel.frontmatter.title }}
+            </h3>
+            <div class="flex items-center gap-3 mt-2 text-xs text-gray-400">
+              <span>{{ categoryLabel[rel.frontmatter.category] || rel.frontmatter.category }}</span>
+              <span>{{ formatViewCount(rel.frontmatter.viewCount || 0) }} 阅读</span>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.knowledge-prose :deep(h1) {
+  @apply text-3xl font-bold text-gray-900 mb-6;
+}
+.knowledge-prose :deep(h2) {
+  @apply text-xl font-bold text-gray-900 mb-4 mt-8 border-b border-gray-100 pb-2;
+}
+.knowledge-prose :deep(h3) {
+  @apply text-lg font-semibold text-gray-900 mb-3 mt-6;
+}
+.knowledge-prose :deep(p) {
+  @apply text-gray-600 leading-relaxed mb-4;
+}
+.knowledge-prose :deep(ul),
+.knowledge-prose :deep(ol) {
+  @apply mb-4 pl-6;
+}
+.knowledge-prose :deep(li) {
+  @apply text-gray-600 mb-2;
+}
+.knowledge-prose :deep(a) {
+  @apply text-apple-blue hover:underline;
+}
+.knowledge-prose :deep(img) {
+  @apply rounded-xl shadow-sm my-6;
+}
+.knowledge-prose :deep(blockquote) {
+  @apply border-l-4 border-apple-blue pl-4 italic text-gray-500 my-6;
+}
+.knowledge-prose :deep(table) {
+  @apply text-sm w-full;
+}
+.knowledge-prose :deep(th) {
+  @apply bg-gray-50 p-3 text-left;
+}
+.knowledge-prose :deep(td) {
+  @apply p-3 border-t;
+}
+</style>
--- a/docs/.vitepress/theme/pages/KnowledgeList.vue
+++ b/docs/.vitepress/theme/pages/KnowledgeList.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Library, BookOpen, TrendingUp, ChevronRight, Search, Loader2 } from 'lucide-vue-next'
+import { categories, categoryLabel, formatDate, formatViewCount } from '../../utils/knowledge'
+
+import articleIndex from '../../../knowledge/index.json'
+
+const loading = ref(false)
+const activeCategory = ref('')
+const search = ref('')
+const page = ref(1)
+const perPage = 10
+
+const allArticles = computed(() => {
+  return (articleIndex as any[])
+    .map((item) => ({
+      path: `/knowledge/${item.id}`,
+      title: item.title,
+      frontmatter: {
+        id: item.id,
+        title: item.title,
+        summary: item.summary || '',
+        category: item.category || '',
+        tags: item.tags || [],
+        coverImage: item.coverImage || '',
+        author: item.author || '',
+        isTop: item.isTop || false,
+        publishedAt: item.publishedAt || '',
+        viewCount: item.viewCount || 0,
+      }
+    }))
+    .sort((a, b) => {
+      if (a.frontmatter.isTop && !b.frontmatter.isTop) return -1
+      if (!a.frontmatter.isTop && b.frontmatter.isTop) return 1
+      return new Date(b.frontmatter.publishedAt || 0).getTime() - new Date(a.frontmatter.publishedAt || 0).getTime()
+    })
+})
+
+const filteredArticles = computed(() => {
+  let result = allArticles.value
+
+  if (activeCategory.value) {
+    result = result.filter(a => a.frontmatter.category === activeCategory.value)
+  }
+
+  if (search.value.trim()) {
+    const q = search.value.trim().toLowerCase()
+    result = result.filter(a =>
+      (a.frontmatter.title || '').toLowerCase().includes(q) ||
+      (a.frontmatter.summary || '').toLowerCase().includes(q)
+    )
+  }
+
+  return result
+})
+
+const totalPages = computed(() => Math.ceil(filteredArticles.value.length / perPage))
+
+const paginatedArticles = computed(() => {
+  const start = (page.value - 1) * perPage
+  return filteredArticles.value.slice(start, start + perPage)
+})
+
+const handleCategoryChange = (cat: string) => {
+  activeCategory.value = cat
+  page.value = 1
+}
+
+const onSearchInput = () => {
+  page.value = 1
+}
+</script>
+
+<template>
+  <div class="pt-24 min-h-screen bg-apple-grey animate-fade-in">
+    <div class="max-w-5xl mx-auto px-4 md:px-6 pb-20">
+      <div class="flex items-center gap-4 mb-10">
+        <div class="p-3 bg-apple-blue rounded-xl text-white">
+          <Library :size="32" />
+        </div>
+        <div class="flex-1">
+          <h1 class="text-3xl font-bold text-apple-dark">知识库</h1>
+          <p class="text-apple-text-gray">天津专升本百科全书</p>
+        </div>
+        <div class="hidden md:flex relative w-64">
+          <Search :size="16" class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+          <input
+            type="text"
+            placeholder="搜索文章..."
+            v-model="search"
+            @input="onSearchInput"
+            class="w-full pl-9 pr-4 py-2 bg-white border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-apple-blue/20 focus:border-apple-blue"
+          />
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div class="col-span-1 space-y-2">
+          <button
+            v-for="cat in categories"
+            :key="cat.key"
+            @click="handleCategoryChange(cat.key)"
+            :class="[
+              'w-full text-left p-4 rounded-xl cursor-pointer transition-colors',
+              activeCategory === cat.key
+                ? 'bg-white shadow-sm font-semibold text-apple-blue'
+                : 'hover:bg-white hover:text-apple-dark text-gray-500'
+            ]"
+          >
+            {{ cat.label }}
+          </button>
+        </div>
+
+        <div class="col-span-1 md:col-span-2 space-y-3 md:space-y-4">
+          <div v-if="loading" class="flex flex-col items-center justify-center py-20 text-gray-400">
+            <Loader2 :size="32" class="animate-spin mb-3" />
+            <p class="text-sm">加载文章中...</p>
+          </div>
+
+          <div v-else-if="paginatedArticles.length === 0" class="flex flex-col items-center justify-center py-20 text-gray-400">
+            <BookOpen :size="40" class="mb-3 opacity-30" />
+            <p class="text-sm">暂无文章</p>
+          </div>
+
+          <template v-else>
+            <a
+              v-for="article in paginatedArticles"
+              :key="article.path"
+              :href="article.path"
+              class="block bg-white p-4 md:p-6 rounded-xl md:rounded-2xl shadow-sm hover:shadow-md active:bg-gray-50 transition-all cursor-pointer group touch-manipulation"
+            >
+              <div class="flex gap-4">
+                <div
+                  v-if="article.frontmatter.coverImage"
+                  class="hidden sm:block w-28 h-20 rounded-lg overflow-hidden flex-shrink-0"
+                >
+                  <img
+                    :src="article.frontmatter.coverImage"
+                    :alt="article.frontmatter.title"
+                    class="w-full h-full object-cover"
+                    loading="lazy"
+                  />
+                </div>
+                <div class="flex-1 min-w-0">
+                  <div class="flex justify-between items-start gap-2 mb-2">
+                    <h3 class="font-bold text-base md:text-lg text-apple-dark group-hover:text-apple-blue transition-colors leading-snug line-clamp-2">
+                      <span
+                        v-if="article.frontmatter.isTop"
+                        class="inline-block bg-orange-100 text-orange-600 text-[10px] px-1.5 py-0.5 rounded mr-2 align-middle"
+                      >置顶</span>
+                      {{ article.frontmatter.title }}
+                    </h3>
+                  </div>
+                  <p
+                    v-if="article.frontmatter.summary"
+                    class="text-sm text-gray-500 line-clamp-2 mb-2 hidden md:block"
+                  >{{ article.frontmatter.summary }}</p>
+                  <div class="flex items-center justify-between mt-2 md:mt-3">
+                    <div class="flex items-center text-xs text-gray-400 gap-3 md:gap-4">
+                      <span class="flex items-center gap-1">
+                        <BookOpen :size="12" /> {{ categoryLabel[article.frontmatter.category || ''] || article.frontmatter.category }}
+                      </span>
+                      <span class="flex items-center gap-1">
+                        <TrendingUp :size="12" /> {{ formatViewCount(article.frontmatter.viewCount || 0) }} 阅读
+                      </span>
+                      <span class="hidden sm:inline">{{ formatDate(article.frontmatter.publishedAt) }}</span>
+                    </div>
+                    <ChevronRight :size="18" class="text-gray-300 group-hover:text-apple-blue transition-colors flex-shrink-0" />
+                  </div>
+                </div>
+              </div>
+            </a>
+
+            <div v-if="totalPages > 1" class="flex items-center justify-center gap-2 pt-6">
+              <button
+                v-for="p in totalPages"
+                :key="p"
+                @click="page = p"
+                :class="[
+                  'w-10 h-10 rounded-xl text-sm font-medium transition-colors',
+                  p === page
+                    ? 'bg-apple-blue text-white'
+                    : 'bg-white text-gray-600 hover:bg-gray-100'
+                ]"
+              >
+                {{ p }}
+              </button>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
--- a/docs/.vitepress/theme/pages/NotFound.vue
+++ b/docs/.vitepress/theme/pages/NotFound.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="min-h-screen flex flex-col items-center justify-center bg-apple-grey px-6">
+    <div class="text-center">
+      <h1 class="text-9xl font-bold text-apple-dark mb-4">404</h1>
+      <h2 class="text-2xl font-semibold text-apple-dark mb-4">页面未找到</h2>
+      <p class="text-apple-text-gray mb-8 max-w-md">
+        抱歉，您访问的页面不存在。可能已被移动或删除。
+      </p>
+      <a
+        href="/"
+        class="inline-flex items-center px-6 py-3 bg-apple-blue text-white rounded-full font-medium hover:bg-apple-blue-hover transition-colors"
+      >
+        返回首页
+      </a>
+    </div>
+  </div>
+</template>
--- a/docs/.vitepress/theme/pages/OnlineSchool.vue
+++ b/docs/.vitepress/theme/pages/OnlineSchool.vue
@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import { GraduationCap, Smartphone, BarChart3, ChevronRight, Download, MapPin } from 'lucide-vue-next'
+import PhoneMockup from '../components/PhoneMockup.vue'
+import { useSiteConfig } from '../../utils/siteConfig'
+
+const siteConfig = useSiteConfig()
+const containerRef = ref<HTMLDivElement | null>(null)
+
+onMounted(() => {
+  if (!containerRef.value) return
+
+  containerRef.value.innerHTML = `
+    <div class="loading-indicator" style="text-align: center; padding: 2rem;">
+      <div style="border: 4px solid #3b82f6; border-top: 4px solid transparent; border-radius: 50%; width: 48px; height: 48px; animation: spin 1s linear infinite; margin: 0 auto 1rem;"></div>
+      <p style="color: #6b7280;">表单加载中...</p>
+    </div>
+    <style>
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    </style>
+  `
+
+  const iframe = document.createElement('iframe')
+  iframe.id = 'goldendata_form_xFYow5_online'
+  iframe.src = 'https://baoming.gongxue100.com/f/xFYow5?background=white&banner=show&embedded=true&inner_redirect=false'
+  iframe.width = '100%'
+  iframe.height = '800'
+  iframe.frameBorder = '0'
+  iframe.style.border = 'none'
+  iframe.style.borderRadius = '1rem'
+
+  iframe.onload = () => {
+    const loader = containerRef.value?.querySelector('.loading-indicator') as HTMLElement | null
+    if (loader) loader.style.display = 'none'
+  }
+
+  iframe.onerror = () => {
+    const loader = containerRef.value?.querySelector('.loading-indicator') as HTMLElement | null
+    if (loader) {
+      loader.innerHTML = `
+        <div style="text-align: center; padding: 2rem;">
+          <div style="width: 48px; height: 48px; background: #fee2e2; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </div>
+          <p style="color: #6b7280; margin-bottom: 1rem;">表单加载失败</p>
+          <button onclick="window.location.reload()" style="background: #3b82f6; color: white; border: none; padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer;">重新加载</button>
+        </div>
+      `
+    }
+  }
+
+  containerRef.value.appendChild(iframe)
+})
+
+onUnmounted(() => {
+  if (containerRef.value) {
+    containerRef.value.innerHTML = ''
+  }
+})
+</script>
+
+<template>
+  <div class="pt-20 min-h-screen bg-slate-50 animate-fade-in pb-20">
+    <div class="relative bg-white border-b border-gray-100 overflow-hidden">
+      <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-blue-50 rounded-full blur-[100px] opacity-60 pointer-events-none"></div>
+      <div class="max-w-7xl mx-auto px-6 py-16 md:py-24 relative z-10 text-center">
+        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-100 text-apple-blue text-xs font-bold tracking-wider uppercase mb-6">
+          <GraduationCap :size="14" /> Gongxue Online
+        </span>
+        <h1 class="text-4xl md:text-6xl font-bold text-apple-dark mb-6 leading-tight">
+          线上好课，<span class="text-apple-blue">APP 随身学</span>
+        </h1>
+        <p class="text-lg md:text-xl text-gray-500 max-w-2xl mx-auto mb-10">
+          不论在宿舍还是图书馆，打开恭学网校 APP 即可开始学习。最新考纲课程同步更新。
+        </p>
+
+        <div class="flex flex-col md:flex-row justify-center items-center gap-6 mb-12">
+          <div class="flex gap-4 md:gap-8">
+            <div class="text-center bg-white px-6 py-4 rounded-2xl shadow-sm border border-gray-100 min-w-[120px]">
+              <div class="text-2xl md:text-3xl font-bold text-apple-dark">10W+</div>
+              <div class="text-xs text-gray-400">APP 下载量</div>
+            </div>
+            <div class="text-center bg-white px-6 py-4 rounded-2xl shadow-sm border border-gray-100 min-w-[120px]">
+              <div class="text-2xl md:text-3xl font-bold text-apple-dark">4.9</div>
+              <div class="text-xs text-gray-400">学员好评</div>
+            </div>
+          </div>
+          <a
+            href="https://www.gongxue100.com/mobile"
+            target="_blank"
+            rel="noreferrer"
+            class="px-8 py-4 bg-apple-blue hover:bg-apple-blue-hover text-white rounded-full font-bold shadow-lg shadow-blue-200 transition-all hover:scale-105 flex items-center gap-2"
+          >
+            <Download :size="20" /> 下载恭学网校 APP
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="max-w-7xl mx-auto px-6 mt-12 grid grid-cols-1 lg:grid-cols-12 gap-12">
+      <div class="lg:col-span-7 space-y-8">
+        <div class="bg-white p-8 rounded-[2rem] shadow-sm border border-gray-100 flex flex-col md:flex-row gap-8 items-center">
+          <div class="flex-1 order-1 md:order-1">
+            <div class="w-12 h-12 bg-blue-50 rounded-2xl flex items-center justify-center text-apple-blue mb-4">
+              <Smartphone :size="24" />
+            </div>
+            <h3 class="text-2xl font-bold text-apple-dark mb-2">移动端学习系统</h3>
+            <p class="text-gray-500 text-sm mb-6">
+              专为碎片化学习打造。支持倍速播放、离线缓存、后台播放。课程更新实时推送到手机。
+            </p>
+            <a
+              href="https://www.gongxue100.com/mobile"
+              target="_blank"
+              rel="noreferrer"
+              class="inline-flex items-center text-apple-blue font-semibold text-sm hover:underline"
+            >
+              前往下载 APP <ChevronRight :size="16" />
+            </a>
+          </div>
+          <div class="w-full md:w-48 order-2 md:order-2 flex justify-center">
+            <PhoneMockup :imageSrc="siteConfig.onlineSchoolAppMockup" className="scale-75 origin-center" />
+          </div>
+        </div>
+
+        <div class="bg-white p-8 rounded-[2rem] shadow-sm border border-gray-100 flex flex-col md:flex-row gap-8 items-center">
+          <div class="flex-1 order-1">
+            <div class="w-12 h-12 bg-purple-50 rounded-2xl flex items-center justify-center text-purple-600 mb-4">
+              <BarChart3 :size="24" />
+            </div>
+            <h3 class="text-2xl font-bold text-apple-dark mb-2">万人模考大赛</h3>
+            <p class="text-gray-500 text-sm mb-4">
+              APP 内定期举办大型模拟考试，全真模拟考场环境。考后自动生成六维能力分析报告。
+            </p>
+            <button class="text-purple-600 font-semibold text-sm hover:underline flex items-center gap-1">
+              查看模考安排 <ChevronRight :size="16" />
+            </button>
+          </div>
+          <div class="w-full md:w-48 h-32 bg-gray-50 rounded-xl flex items-end justify-center px-4 pb-4 gap-2 order-2">
+            <div class="w-3 h-[40%] bg-purple-200 rounded-t"></div>
+            <div class="w-3 h-[60%] bg-purple-300 rounded-t"></div>
+            <div class="w-3 h-[80%] bg-purple-500 rounded-t shadow-lg"></div>
+            <div class="w-3 h-[50%] bg-purple-200 rounded-t"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="lg:col-span-5">
+        <div class="bg-white p-8 rounded-[2rem] shadow-xl border border-blue-50 sticky top-24">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="p-2 bg-gradient-to-br from-orange-100 to-amber-100 text-orange-600 rounded-xl">
+              <MapPin :size="20" />
+            </div>
+            <div>
+              <h3 class="font-bold text-xl text-apple-dark">咨询课程顾问</h3>
+              <p class="text-xs text-gray-500">线上/线下班型 1对1 规划</p>
+            </div>
+          </div>
+
+          <div 
+            ref="containerRef"
+            class="w-full min-h-[800px]"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
--- a/docs/.vitepress/theme/pages/PrivacyPolicy.vue
+++ b/docs/.vitepress/theme/pages/PrivacyPolicy.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ArrowLeft } from 'lucide-vue-next'
+</script>
+
+<template>
+  <div class="pt-24 min-h-screen bg-apple-grey animate-fade-in">
+    <div class="max-w-4xl mx-auto px-4 md:px-6 py-12">
+      <a
+        href="javascript:history.back()"
+        class="inline-flex items-center gap-2 text-apple-blue hover:text-apple-blue-hover mb-8 transition-colors"
+      >
+        <ArrowLeft :size="20" />
+        <span>返回</span>
+      </a>
+
+      <div class="bg-white rounded-2xl shadow-sm p-8 md:p-12">
+        <h1 class="text-3xl font-bold text-apple-dark mb-8 text-center">
+          隐私政策
+        </h1>
+
+        <div class="prose-apple max-w-none">
+          <section class="mb-8">
+            <h2 class="text-xl font-semibold text-apple-dark mb-4">1. 信息收集</h2>
+            <p class="text-apple-text-gray mb-3">
+              我们收集的信息包括但不限于：姓名、联系方式、学习记录、设备信息等，仅用于为您提供更好的教育服务。
+            </p>
+          </section>
+
+          <section class="mb-8">
+            <h2 class="text-xl font-semibold text-apple-dark mb-4">2. 信息使用</h2>
+            <p class="text-apple-text-gray mb-3">
+              收集的信息将用于：改善服务质量、个性化学习推荐、安全保障、法律合规等目的。
+            </p>
+          </section>
+
+          <section class="mb-8">
+            <h2 class="text-xl font-semibold text-apple-dark mb-4">3. 信息安全</h2>
+            <p class="text-apple-text-gray mb-3">
+              我们采用行业标准的安全措施保护您的个人信息，防止未经授权的访问、使用或泄露。
+            </p>
+          </section>
+
+          <section class="mb-8">
+            <h2 class="text-xl font-semibold text-apple-dark mb-4">4. 第三方共享</h2>
+            <p class="text-apple-text-gray mb-3">
+              未经您同意，我们不会向第三方出售、交易或转让您的个人信息，除非法律法规要求或为提供服务所必需。
+            </p>
+          </section>
+
+          <section class="mb-8">
+            <h2 class="text-xl font-semibold text-apple-dark mb-4">5. Cookie政策</h2>
+            <p class="text-apple-text-gray mb-3">
+              我们使用Cookie来提升用户体验，您可以通过浏览器设置管理Cookie偏好。
+            </p>
+          </section>
+
+          <section class="mb-8">
+            <h2 class="text-xl font-semibold text-apple-dark mb-4">6. 权利保障</h2>
+            <p class="text-apple-text-gray mb-3">
+              您有权访问、更正、删除您的个人信息，或要求限制处理您的个人信息。
+            </p>
+          </section>
+
+          <section class="mb-8">
+            <h2 class="text-xl font-semibold text-apple-dark mb-4">7. 联系我们</h2>
+            <p class="text-apple-text-gray mb-3">
+              如对本隐私政策有任何疑问，请联系：<br/>
+              电话：18322616529<br/>
+              邮箱：gongxuejiaoyu@sina.cn<br/>
+              地址：天津市津南区咸水沽镇雅润路东侧金浩园17号楼底商3号
+            </p>
+          </section>
+
+          <div class="mt-12 pt-8 border-t border-gray-200 text-center text-sm text-apple-text-gray">
+            <p>最后更新：2026年1月</p>
+            <p>© {{ new Date().getFullYear() }} 恭学教育集团 版权所有</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
--- a/docs/.vitepress/theme/pages/QuestionBank.vue
+++ b/docs/.vitepress/theme/pages/QuestionBank.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Smartphone, Zap, X } from 'lucide-vue-next'
+import PhoneMockup from '../components/PhoneMockup.vue'
+import { useSiteConfig } from '../../utils/siteConfig'
+
+const siteConfig = useSiteConfig()
+const showQrModal = ref(false)
+
+const chartData = [30, 45, 25, 60, 75, 50, 80]
+</script>
+
+<template>
+  <div class="pt-24 min-h-screen bg-white animate-fade-in">
+    <div class="max-w-7xl mx-auto px-6 py-20">
+      <div class="flex flex-col lg:flex-row items-center gap-20 lg:gap-24 mb-32 md:mb-40">
+        <div class="flex-1 text-center lg:text-left">
+          <div class="inline-block px-4 py-1.5 border border-blue-100 rounded-full bg-blue-50 text-apple-blue font-bold text-xs tracking-wider uppercase mb-8">
+            Gongxue Question Bank V4.0
+          </div>
+          <h1 class="text-5xl md:text-7xl font-semibold text-apple-dark mb-8 leading-[1.1]">
+            刷题，<br />
+            <span class="text-apple-blue">从未如此智能。</span>
+          </h1>
+          <p class="text-lg md:text-2xl text-apple-text-gray mb-12 leading-relaxed max-w-lg mx-auto lg:mx-0 font-light">
+            极致窄边框设计，视野全开。双端数据实时同步。天津专升本历年真题超过 100,000 道，全都在这儿。
+          </p>
+
+          <div class="flex flex-col sm:flex-row gap-5 justify-center lg:justify-start">
+            <button 
+              @click="showQrModal = true"
+              class="bg-apple-dark text-white px-9 py-4 rounded-full font-bold hover:scale-105 transition-all shadow-xl flex items-center justify-center gap-3 text-lg"
+            >
+              <Smartphone :size="22" /> 立即扫码刷题
+            </button>
+            <button class="bg-gray-100 text-apple-dark px-9 py-4 rounded-full font-bold hover:bg-gray-200 transition-all text-lg">
+              了解 SVIP 权益
+            </button>
+          </div>
+        </div>
+
+        <div class="flex-1 w-full flex justify-center">
+          <div class="relative w-full max-w-[340px]">
+            <div class="absolute inset-0 bg-gradient-to-tr from-blue-200 to-purple-200 rounded-full blur-[100px] opacity-50 pointer-events-none"></div>
+            <PhoneMockup :imageSrc="siteConfig.questionBankHeroMockup" className="animate-float" />
+          </div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-10 lg:gap-12 mb-32 items-start">
+        <div class="bg-gray-50 rounded-[3rem] p-10 md:p-14 overflow-hidden relative group flex flex-col">
+          <div class="relative z-10 mb-8">
+            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white border border-gray-200 text-xs font-bold text-gray-500 mb-5 uppercase tracking-wider">
+              Focus Mode
+            </div>
+            <h3 class="text-4xl font-bold text-apple-dark mb-4">
+              沉浸刷题，<br />全屏专注。
+            </h3>
+            <p class="text-gray-500 text-lg">进入刷题模式，我们移除了干扰元素。让视野完全回归题目本身。</p>
+          </div>
+          <div class="mt-8 flex justify-center">
+            <div class="w-[85%] shadow-2xl rounded-[2.5rem] overflow-hidden border-[8px] border-white translate-y-10 group-hover:translate-y-5 transition-transform duration-500">
+              <img :src="siteConfig.questionBankFocusMockup" class="w-full h-auto" alt="Focus Mode UI" />
+            </div>
+          </div>
+        </div>
+
+        <div class="bg-black rounded-[3rem] p-10 md:p-14 overflow-hidden relative text-white group flex flex-col">
+          <div class="absolute top-0 right-0 w-[300px] h-[300px] bg-gradient-to-bl from-gray-800 to-transparent rounded-full blur-[60px] opacity-50"></div>
+
+          <div class="relative z-10 mb-12">
+            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 border border-white/20 text-xs font-bold text-gray-300 mb-5 uppercase tracking-wider">
+              Data Insight
+            </div>
+            <h3 class="text-4xl font-bold mb-4">
+              数据看板，<br />心中有数。
+            </h3>
+            <p class="text-gray-400 text-lg">直观展示你的刷题量、正确率趋势以及薄弱知识点。</p>
+          </div>
+
+          <div class="relative z-10">
+            <div class="grid grid-cols-2 gap-6 mb-8">
+              <div class="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/10 hover:bg-white/15 transition-colors">
+                <div class="text-3xl font-bold mb-1 flex items-baseline gap-1">
+                  100<span class="text-sm font-normal text-gray-400">%</span>
+                </div>
+                <div class="text-xs text-gray-400 font-bold uppercase tracking-wider">真题覆盖</div>
+              </div>
+              <div class="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/10 hover:bg-white/15 transition-colors">
+                <div class="text-3xl font-bold mb-1 flex items-center gap-2">
+                  <Zap :size="24" class="text-yellow-400 fill-current" />
+                </div>
+                <div class="text-xs text-gray-400 font-bold uppercase tracking-wider">智能错题本</div>
+              </div>
+            </div>
+
+            <div class="bg-white/5 rounded-2xl p-6 border border-white/5">
+              <div class="flex justify-between items-end h-24 gap-2">
+                <div
+                  v-for="(h, i) in chartData"
+                  :key="i"
+                  class="w-full bg-gray-700/50 rounded-t-sm relative group overflow-hidden"
+                >
+                  <div
+                    :style="{ height: `${h}%` }"
+                    class="absolute bottom-0 w-full bg-gradient-to-t from-apple-blue to-purple-500 opacity-80 group-hover:opacity-100 transition-all duration-500"
+                  ></div>
+                </div>
+              </div>
+              <div class="flex justify-between mt-3 text-[10px] text-gray-500 uppercase font-bold tracking-wider">
+                <span>Mon</span>
+                <span>Tue</span>
+                <span>Wed</span>
+                <span>Thu</span>
+                <span>Fri</span>
+                <span>Sat</span>
+                <span>Sun</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="showQrModal"
+      class="fixed inset-0 z-[9999] flex items-center justify-center p-4"
+    >
+      <div 
+        class="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        @click="showQrModal = false"
+      />
+      
+      <div class="relative bg-white rounded-3xl shadow-2xl w-full max-w-md animate-slide-up">
+        <button
+          @click="showQrModal = false"
+          class="absolute top-4 right-4 p-2 rounded-full hover:bg-gray-100 transition-colors z-10"
+        >
+          <X :size="24" class="text-gray-500" />
+        </button>
+
+        <div class="p-8 text-center">
+          <div class="mb-6">
+            <h3 class="text-2xl font-bold text-gray-900 mb-2">扫码添加客服</h3>
+            <p class="text-gray-500">添加微信客服，获取刷题小程序</p>
+          </div>
+
+          <div class="bg-gray-50 rounded-2xl p-6 inline-block">
+            <img 
+              :src="siteConfig.customerServiceQrcode"
+              alt="客服微信二维码"
+              class="w-64 h-64 mx-auto rounded-lg"
+            />
+          </div>
+
+          <p class="text-sm text-gray-400 mt-6">
+            工作时间：周一至周日 9:00-21:00
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
--- a/docs/.vitepress/theme/pages/TermsOfService.vue
+++ b/docs/.vitepress/theme/pages/TermsOfService.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { ArrowLeft } from 'lucide-vue-next'
+</script>
+
+<template>
+  <div class="pt-24 min-h-screen bg-apple-grey animate-fade-in">
+    <div class="max-w-4xl mx-auto px-4 md:px-6 py-12">
+      <a
+        href="javascript:history.back()"
+        class="inline-flex items-center gap-2 text-apple-blue hover:text-apple-blue-hover mb-8 transition-colors"
+      >
+        <ArrowLeft :size="20" />
+        <span>返回</span>
+      </a>
+
+      <div class="bg-white rounded-2xl shadow-sm p-8 md:p-12">
+        <h1 class="text-3xl font-bold text-apple-dark mb-8 text-center">
+          使用条款
+        </h1>
+
+        <div class="prose-apple max-w-none">
+          <section class="mb-8">
+            <h2 class="text-xl font-semibold text-apple-dark mb-4">1. 服务说明</h2>
+            <p class="text-apple-text-gray mb-3">
+              恭学教育集团（以下简称"我们"）通过gw.gongxue100.com网站及关联平台为用户提供天津专升本相关的教育服务。
+            </p>
+          </section>
+
+          <section class="mb-8">
+            <h2 class="text-xl font-semibold text-apple-dark mb-4">2. 用户义务</h2>
+            <p class="text-apple-text-gray mb-3">
+              用户应遵守相关法律法规，不得利用本服务从事任何违法活动；应提供真实、准确的注册信息；应妥善保管账户密码。
+            </p>
+          </section>
+
+          <section class="mb-8">
+            <h2 class="text-xl font-semibold text-apple-dark mb-4">3. 知识产权</h2>
+            <p class="text-apple-text-gray mb-3">
+              网站所有内容（包括但不限于文字、图片、音频、视频等）的知识产权归恭学教育集团所有，未经许可不得复制、传播或用于商业用途。
+            </p>
+          </section>
+
+          <section class="mb-8">
+            <h2 class="text-xl font-semibold text-apple-dark mb-4">4. 服务变更</h2>
+            <p class="text-apple-text-gray mb-3">
+              我们保留在任何时候修改、暂停或终止部分或全部服务的权利，恕不另行通知。对于因服务变更造成的损失，我们不承担赔偿责任。
+            </p>
+          </section>
+
+          <section class="mb-8">
+            <h2 class="text-xl font-semibold text-apple-dark mb-4">5. 免责声明</h2>
+            <p class="text-apple-text-gray mb-3">
+              我们尽力提供准确的信息和服务，但不对信息的准确性、完整性或时效性做任何保证。用户应自行判断并承担使用风险。
+            </p>
+          </section>
+
+          <section class="mb-8">
+            <h2 class="text-xl font-semibold text-apple-dark mb-4">6. 第三方链接</h2>
+            <p class="text-apple-text-gray mb-3">
+              网站可能包含第三方网站链接，仅为方便用户而提供。我们不对第三方网站的内容、隐私政策或行为负责。
+            </p>
+          </section>
+
+          <section class="mb-8">
+            <h2 class="text-xl font-semibold text-apple-dark mb-4">7. 法律适用</h2>
+            <p class="text-apple-text-gray mb-3">
+              本条款受中华人民共和国法律管辖。因本条款产生的争议，双方应友好协商解决；协商不成的，提交天津市有管辖权的人民法院诉讼解决。
+            </p>
+          </section>
+
+          <section class="mb-8">
+            <h2 class="text-xl font-semibold text-apple-dark mb-4">8. 联系方式</h2>
+            <p class="text-apple-text-gray mb-3">
+              如对本使用条款有任何疑问，请联系：<br/>
+              电话：18322616529<br/>
+              邮箱：gongxuejiaoyu@sina.cn<br/>
+              地址：天津市津南区咸水沽镇雅润路东侧金浩园17号楼底商3号
+            </p>
+          </section>
+
+          <div class="mt-12 pt-8 border-t border-gray-200 text-center text-sm text-apple-text-gray">
+            <p>最后更新：2026年1月</p>
+            <p>© {{ new Date().getFullYear() }} 恭学教育集团 版权所有</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -0,0 +1,238 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ============ 基础样式 ============ */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: "SF Pro Display", "SF Pro Text", "Inter", "Noto Sans SC", system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #ffffff;
+  color: #1D1D1F;
+  line-height: 1.5;
+}
+
+/* ============ 移动端触控优化 ============ */
+button, a, [role="button"] {
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* ============ 滚动条美化 ============ */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #d1d1d6;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a1a1a6;
+}
+
+/* 隐藏滚动条样式 */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+/* ============ 动画延迟工具类 ============ */
+.animation-delay-100 {
+  animation-delay: 0.1s;
+}
+
+.animation-delay-200 {
+  animation-delay: 0.2s;
+}
+
+.animation-delay-300 {
+  animation-delay: 0.3s;
+}
+
+.animation-delay-500 {
+  animation-delay: 0.5s;
+}
+
+/* ============ 毛玻璃效果 ============ */
+.glass {
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+.glass-dark {
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+/* ============ 渐变文字 ============ */
+.gradient-text {
+  background: linear-gradient(135deg, #0071E3 0%, #5E5CE6 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* ============ 卡片悬停效果 ============ */
+.card-hover {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card-hover:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
+}
+
+/* ============ 按钮基础样式 ============ */
+.btn-primary {
+  @apply px-6 py-3 bg-apple-blue hover:bg-apple-blue-hover text-white rounded-full font-medium transition-all transform hover:scale-105 shadow-lg;
+}
+
+.btn-secondary {
+  @apply px-6 py-3 bg-white/80 backdrop-blur-md text-apple-dark border border-gray-200 rounded-full font-medium hover:bg-white transition-all;
+}
+
+.btn-dark {
+  @apply px-6 py-3 bg-apple-dark hover:bg-black text-white rounded-full font-medium transition-all transform hover:scale-105 shadow-lg;
+}
+
+/* ============ 文本截断 ============ */
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* ============ 骨架屏动画 ============ */
+.skeleton {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* ============ 表单样式 ============ */
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  border-color: #0071E3;
+  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
+}
+
+/* ============ 富文本内容样式 ============ */
+.prose-apple {
+  max-width: none;
+}
+
+.prose-apple h1 {
+  @apply text-3xl font-bold text-apple-dark mb-6;
+}
+
+.prose-apple h2 {
+  @apply text-2xl font-bold text-apple-dark mb-4 mt-8;
+}
+
+.prose-apple h3 {
+  @apply text-xl font-semibold text-apple-dark mb-3 mt-6;
+}
+
+.prose-apple p {
+  @apply text-gray-600 leading-relaxed mb-4;
+}
+
+.prose-apple ul,
+.prose-apple ol {
+  @apply mb-4 pl-6;
+}
+
+.prose-apple li {
+  @apply text-gray-600 mb-2;
+}
+
+.prose-apple a {
+  @apply text-apple-blue hover:underline;
+}
+
+.prose-apple img {
+  @apply rounded-xl my-6;
+}
+
+.prose-apple blockquote {
+  @apply border-l-4 border-apple-blue pl-4 italic text-gray-500 my-6;
+}
+
+/* ============ 页面过渡 ============ */
+.page-enter {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.page-enter-active {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.page-exit {
+  opacity: 1;
+}
+
+.page-exit-active {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+/* ============ VitePress 默认覆盖 ============ */
+.VPDoc {
+  padding: 0 !important;
+}
+
+.VPDoc .container {
+  max-width: none !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.VPDoc .content {
+  max-width: none !important;
+  padding: 0 !important;
+}
--- a/docs/.vitepress/utils/knowledge.ts
+++ b/docs/.vitepress/utils/knowledge.ts
@@ -0,0 +1,58 @@
+export type KnowledgeCategory =
+  | 'exam_policy'
+  | 'school_intro'
+  | 'major_guide'
+  | 'study_method'
+  | 'experience'
+  | 'policy'
+  | 'company'
+  | 'guide'
+  | 'announcement'
+
+export interface KnowledgeArticle {
+  id: string
+  title: string
+  summary: string
+  content: string
+  category: KnowledgeCategory
+  tags: string[]
+  coverImage?: string
+  author?: string
+  isTop?: boolean
+  publishedAt?: string
+  createdAt?: string
+  updatedAt?: string
+  viewCount: number
+}
+
+export const categoryLabel: Record<string, string> = {
+  exam_policy: '考试政策',
+  school_intro: '院校介绍',
+  major_guide: '专业指南',
+  study_method: '复习规划',
+  experience: '学长经验',
+  policy: '政策解读',
+  company: '集团新闻',
+  guide: '备考指南',
+  announcement: '公告通知',
+}
+
+export const categories: { key: KnowledgeCategory | ''; label: string }[] = [
+  { key: '', label: '全部' },
+  { key: 'exam_policy', label: '考试政策' },
+  { key: 'school_intro', label: '院校专业' },
+  { key: 'major_guide', label: '专业指南' },
+  { key: 'study_method', label: '复习规划' },
+  { key: 'experience', label: '学长经验' },
+]
+
+export function formatDate(dateStr?: string) {
+  if (!dateStr) return ''
+  return new Date(dateStr).toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })
+}
+
+export function formatViewCount(count: number) {
+  if (count >= 10000) return `${(count / 10000).toFixed(1)}w+`
+  if (count >= 1000) return `${(count / 1000).toFixed(1)}k`
+  return String(count)
+}
--- a/docs/.vitepress/utils/siteConfig.ts
+++ b/docs/.vitepress/utils/siteConfig.ts
@@ -0,0 +1,101 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export interface BookConfig {
+  id: string
+  title: string
+  price: string
+  oldPrice: string
+  imageSrc: string
+  tag?: string
+}
+
+export interface SiteDisplayConfig {
+  heroVideoUrl: string
+  heroVideoCover: string
+  heroVideoTitle: string
+  heroVideoSubtitle: string
+  questionBankMockup: string
+  onlineSchoolMockup: string
+  questionBankHeroMockup: string
+  questionBankFocusMockup: string
+  onlineSchoolAppMockup: string
+  customerServiceQrcode: string
+  statsYears: number
+  statsStudents: string
+  statsCoverage: string
+  statsSchools: number
+  books: BookConfig[]
+}
+
+const defaultConfig: SiteDisplayConfig = {
+  heroVideoUrl: 'https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/%E6%81%AD%E5%AD%A6%E6%95%99%E8%82%B2%E5%93%81%E7%89%8C%E5%AE%A3%E4%BC%A0.mp4',
+  heroVideoCover: 'https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/%E5%B0%81%E9%9D%A2.png',
+  heroVideoTitle: '了解恭学教育',
+  heroVideoSubtitle: '观看 2025 年度品牌宣传片',
+
+  questionBankMockup: 'https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/tikudemo-tuya.webp',
+  onlineSchoolMockup: 'https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/wangkedemo-tuya.webp',
+
+  questionBankHeroMockup: 'https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/tikudemo-tuya.webp',
+  questionBankFocusMockup: 'https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/tikudemo-tuya.webp',
+
+  onlineSchoolAppMockup: 'https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/wangkedemo-tuya.webp',
+
+  customerServiceQrcode: 'https://duiwaifengxiang-1304851894.cos.ap-beijing.myqcloud.com/gwgongxue/code.jpg',
+
+  statsYears: 7,
+  statsStudents: '21W+',
+  statsCoverage: '100%',
+  statsSchools: 12,
+
+  books: [
+    { id: '1', title: '天津专升本数学自学参考书', price: '128.00', oldPrice: '168.00', imageSrc: 'https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/%E6%95%B0%E5%AD%A61-tuya.webp', tag: '畅销榜第一' },
+    { id: '2', title: '天津专升本语文自学参考书', price: '128.00', oldPrice: '168.00', imageSrc: 'https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/%E8%AF%AD%E6%96%871-tuya.webp', tag: '新书首发' },
+    { id: '3', title: '天津专升本英语自学参考书', price: '128.00', oldPrice: '168.00', imageSrc: 'https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/%E8%8B%B1%E8%AF%AD1-tuya.webp', tag: '热销' },
+    { id: '4', title: '天津专升本计算机自学参考书', price: '128.00', oldPrice: '168.00', imageSrc: 'https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%80%92%E5%BD%B1-tuya.webp', tag: '必刷' },
+    { id: '5', title: '三年模拟一年升本刷题系列套装', price: '128.00', oldPrice: '198.00', imageSrc: 'https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/%E4%B8%89%E4%B8%80-tuya.webp', tag: '限时优惠' },
+  ],
+}
+
+function getFromCache(): Partial<SiteDisplayConfig> {
+  if (typeof localStorage === 'undefined') return {}
+  try {
+    const cached = localStorage.getItem('site_display_config')
+    if (cached) return JSON.parse(cached)
+  } catch {}
+  return {}
+}
+
+function setCache(config: SiteDisplayConfig) {
+  if (typeof localStorage === 'undefined') return
+  try {
+    localStorage.setItem('site_display_config', JSON.stringify(config))
+  } catch {}
+}
+
+export function getSiteConfig(): SiteDisplayConfig {
+  const cached = getFromCache()
+  return { ...defaultConfig, ...cached }
+}
+
+export function useSiteConfig() {
+  const config = ref<SiteDisplayConfig>(getSiteConfig())
+
+  onMounted(() => {
+    const cached = getFromCache()
+    config.value = { ...defaultConfig, ...cached }
+
+    const handleStorage = (e: StorageEvent) => {
+      if (e.key === 'site_display_config') {
+        config.value = getSiteConfig()
+      }
+    }
+
+    window.addEventListener('storage', handleStorage)
+    onUnmounted(() => {
+      window.removeEventListener('storage', handleStorage)
+    })
+  })
+
+  return config
+}
--- a/docs/404.md
+++ b/docs/404.md
@@ -0,0 +1,9 @@
+---
+title: 页面未找到
+---
+
+<script setup>
+import NotFound from './.vitepress/theme/pages/NotFound.vue'
+</script>
+
+<NotFound />
--- a/docs/books.md
+++ b/docs/books.md
@@ -0,0 +1,20 @@
+---
+title: 天津专升本教材 - 权威出版物 | 数学语文英语计算机 | 恭学教育出品
+description: 恭学教育官方出版天津专升本权威教材，涵盖数学、语文、英语、计算机四大科目。年年迭代更新，紧扣最新考试大纲，配套刷题系统，是专升本备考必备资料。
+keywords:
+  - 天津专升本教材
+  - 专升本数学教材
+  - 专升本语文教材
+  - 专升本英语教材
+  - 专升本计算机教材
+  - 专升本参考书
+  - 恭学教材
+  - 专升本辅导书
+  - 权威教材
+---
+
+<script setup>
+import Books from './.vitepress/theme/pages/Books.vue'
+</script>
+
+<Books />
--- a/docs/contact.md
+++ b/docs/contact.md
@@ -0,0 +1,20 @@
+---
+title: 联系我们 - 恭学教育集团 | 天津专升本咨询 | 报名热线 | 校区地址
+description: 联系恭学教育集团获取天津专升本专业咨询服务。提供免费试听、一对一升学规划、课程咨询等服务。拨打报名热线或预约到校区实地考察，开启您的升本之路。
+keywords:
+  - 恭学教育联系方式
+  - 天津专升本报名
+  - 专升本咨询
+  - 校区地址
+  - 报名电话
+  - 免费试听
+  - 升学规划
+  - 客服咨询
+  - 教育咨询
+---
+
+<script setup>
+import Contact from './.vitepress/theme/pages/Contact.vue'
+</script>
+
+<Contact />
--- a/docs/data-center.md
+++ b/docs/data-center.md
@@ -0,0 +1,20 @@
+---
+title: 天津专升本大数据中心 - 录取数据 | 分数线 | 报考分析 | 统计报告
+description: 恭学教育大数据中心汇聚天津专升本历年录取数据、分数线统计、报考趋势分析等权威信息，通过数据可视化呈现，为您的升学决策提供科学依据。
+keywords:
+  - 天津专升本数据
+  - 录取分数线
+  - 报考数据
+  - 数据分析
+  - 统计报告
+  - 升学趋势
+  - 专业热度
+  - 院校排名
+  - 大数据分析
+---
+
+<script setup>
+import DataCenter from './.vitepress/theme/pages/DataCenter.vue'
+</script>
+
+<DataCenter />
--- a/docs/index.md
+++ b/docs/index.md
@@ -0,0 +1,10 @@
+---
+title: 恭学教育集团 - 天津专升本培训领军品牌
+layout: home
+---
+
+<script setup>
+import Home from './.vitepress/theme/pages/Home.vue'
+</script>
+
+<Home />
--- a/docs/knowledge/index.json
+++ b/docs/knowledge/index.json
@@ -0,0 +1,26 @@
+[
+  {
+    "id": "sample-article",
+    "title": "2026年天津高职升本科考试报名热点问答发布",
+    "summary": "最新报名政策详解：应届生、往届生报考条件，报名时间节点，平行志愿填报策略等重要信息。",
+    "category": "exam_policy",
+    "tags": ["天津专升本", "考试政策"],
+    "coverImage": "https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/%E5%B0%81%E9%9D%A2.png",
+    "author": "恭学教育",
+    "publishedAt": "2026-01-15",
+    "viewCount": 1256,
+    "isTop": true
+  },
+  {
+    "id": "study-time-plan",
+    "title": "天津专升本高效复习时间规划",
+    "summary": "科学安排备考时间，从基础巩固到冲刺提分，帮助考生制定清晰的专升本复习计划。",
+    "category": "study_method",
+    "tags": ["天津专升本", "学习方法", "备考规划"],
+    "coverImage": "https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/%E5%B0%81%E9%9D%A2.png",
+    "author": "恭学教育",
+    "publishedAt": "2026-06-15",
+    "viewCount": 0,
+    "isTop": false
+  }
+]
--- a/docs/knowledge/index.md
+++ b/docs/knowledge/index.md
@@ -0,0 +1,20 @@
+---
+title: 天津专升本知识中心 - 备考攻略 | 院校介绍 | 政策解读 | 学习方法
+description: 恭学教育知识中心为您提供全面的天津专升本资讯，包括最新政策解读、院校详细介绍、备考攻略、学习方法指导等，助您全面了解专升本考试，制定最优学习计划。
+keywords:
+  - 天津专升本知识
+  - 专升本政策
+  - 专升本院校
+  - 备考攻略
+  - 学习方法
+  - 专升本指南
+  - 考试大纲
+  - 招生简章
+  - 专业介绍
+---
+
+<script setup>
+import KnowledgeList from '../.vitepress/theme/pages/KnowledgeList.vue'
+</script>
+
+<KnowledgeList />
--- a/docs/knowledge/sample-article.md
+++ b/docs/knowledge/sample-article.md
@@ -0,0 +1,39 @@
+---
+id: sample-article
+title: 2026年天津高职升本科考试报名热点问答发布
+summary: 最新报名政策详解：应届生、往届生报考条件，报名时间节点，平行志愿填报策略等重要信息。
+category: exam_policy
+tags:
+  - 天津专升本
+  - 考试政策
+author: 恭学教育
+publishedAt: 2026-01-15
+coverImage: https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/%E5%B0%81%E9%9D%A2.png
+viewCount: 1256
+isTop: true
+---
+
+<script setup>
+import KnowledgeDetail from '../.vitepress/theme/pages/KnowledgeDetail.vue'
+</script>
+
+<KnowledgeDetail>
+
+<h2>一、报名条件</h2>
+<p>参加2026年天津高职升本科考试的考生，须符合以下条件：</p>
+<ul>
+  <li>具有天津市户籍或在本市就读的普通高校高职（专科）应届毕业生；</li>
+  <li>遵守中华人民共和国宪法和法律；</li>
+  <li>身体健康状况符合相关要求。</li>
+</ul>
+
+<h2>二、报名时间</h2>
+<p>2026年天津专升本报名预计于2025年12月开始，具体时间以天津市教育招生考试院官方通知为准。考生需在规定时间内完成网上报名、缴费及现场确认。</p>
+
+<h2>三、考试科目</h2>
+<p>天津专升本考试分为文化课和专业课两部分。文化课包括语文/数学、英语、计算机应用基础；专业课由各招生院校组织。</p>
+
+<h2>四、志愿填报</h2>
+<p>考生在成绩公布后，按照本人成绩和招生计划填报平行志愿。建议考生合理拉开梯度，兼顾理想院校与保底院校。</p>
+
+</KnowledgeDetail>
--- a/docs/knowledge/study-time-plan.md
+++ b/docs/knowledge/study-time-plan.md
@@ -0,0 +1,80 @@
+---
+id: study-time-plan
+title: 天津专升本高效复习时间规划
+summary: 科学安排备考时间，从基础巩固到冲刺提分，帮助考生制定清晰的专升本复习计划。
+category: study_method
+tags:
+  - 天津专升本
+  - 学习方法
+  - 备考规划
+author: 恭学教育
+publishedAt: 2026-06-15
+coverImage: https://fenxiang-1304851894.cos.ap-nanjing.myqcloud.com/%E5%B0%81%E9%9D%A2.png
+viewCount: 0
+isTop: false
+---
+
+<script setup>
+import KnowledgeDetail from '../.vitepress/theme/pages/KnowledgeDetail.vue'
+</script>
+
+<KnowledgeDetail>
+
+<h2>一、了解考试整体时间线</h2>
+<p>天津专升本考试通常包括文化课和专业课两部分。文化课由天津市教育招生考试院统一组织，专业课由各招生院校自行命题。科学规划复习时间，首先要明确报名、考试、成绩公布和志愿填报等关键节点，做到心中有数。</p>
+
+<h2>二、分阶段复习规划</h2>
+<h3>1. 基础阶段（考前6-4个月）</h3>
+<p>这一阶段的核心任务是夯实基础，全面梳理考试大纲要求的知识点。建议每天保持3-4小时学习时间，重点完成以下目标：</p>
+<ul>
+  <li>通读教材，建立知识框架；</li>
+  <li>整理笔记，标注重点和难点；</li>
+  <li>完成基础练习题，及时查漏补缺。</li>
+</ul>
+
+<h3>2. 强化阶段（考前3-2个月）</h3>
+<p>在打好基础的前提下，进入强化训练阶段。每天学习时间可适当增加到5-6小时，主要任务包括：</p>
+<ul>
+  <li>针对薄弱科目和知识点进行专项突破；</li>
+  <li>大量刷题，熟悉题型和解题思路；</li>
+  <li>定期做模拟测试，检验复习效果。</li>
+</ul>
+
+<h3>3. 冲刺阶段（考前1个月）</h3>
+<p>冲刺阶段以真题演练和错题复盘为主，保持良好的应试状态。建议：</p>
+<ul>
+  <li>严格按照考试时间做真题，培养时间观念；</li>
+  <li>整理错题本，反复温习易错点；</li>
+  <li>调整作息，保证充足睡眠和适度运动。</li>
+</ul>
+
+<h2>三、每日学习时间分配</h2>
+<p>合理分配每日学习时间，可以提高学习效率。以下是一个参考安排：</p>
+<ul>
+  <li><strong>上午（8:00-11:30）：</strong>适合学习需要高强度思考的科目，如数学、专业课；</li>
+  <li><strong>下午（14:00-17:00）：</strong>进行英语阅读、写作或文化课复习；</li>
+  <li><strong>晚上（19:00-21:00）：</strong>做题巩固、整理笔记和错题复盘。</li>
+</ul>
+<p>每学习45-60分钟，建议休息5-10分钟，避免长时间疲劳作战。</p>
+
+<h2>四、各科目复习建议</h2>
+<ul>
+  <li><strong>语文/数学：</strong>注重基础概念和公式的理解与运用，多做历年真题；</li>
+  <li><strong>英语：</strong>每天坚持背单词，培养语感，强化阅读和翻译能力；</li>
+  <li><strong>计算机应用基础：</strong>熟悉常考知识点，结合上机操作加深理解；</li>
+  <li><strong>专业课：</strong>根据目标院校的考试大纲和参考书目有针对性地复习。</li>
+</ul>
+
+<h2>五、保持良好状态的建议</h2>
+<p>备考是一场持久战，除了科学规划学习时间，还要注意以下几点：</p>
+<ul>
+  <li>制定切实可行的目标，避免盲目攀比；</li>
+  <li>保持规律作息，避免熬夜学习；</li>
+  <li>适当进行体育锻炼，缓解学习压力；</li>
+  <li>遇到瓶颈时及时调整计划，必要时寻求老师或同学帮助。</li>
+</ul>
+
+<h2>结语</h2>
+<p>天津专升本复习时间规划没有固定模板，关键是找到适合自己的节奏。希望考生们能够合理分配时间，稳扎稳打，最终在考试中取得理想成绩。</p>
+
+</KnowledgeDetail>
--- a/docs/online-school.md
+++ b/docs/online-school.md
@@ -0,0 +1,20 @@
+---
+title: 天津专升本网校 - 恭学网校APP | 在线课程 | 万人模考 | 随身学习
+description: 恭学网校APP专为天津专升本学员打造，支持倍速播放、离线缓存、后台播放。提供最新考纲课程、万人模考大赛、六维能力分析报告，随时随地开启高效学习模式。
+keywords:
+  - 天津专升本网校
+  - 恭学网校
+  - 专升本在线课程
+  - 专升本APP
+  - 万人模考
+  - 在线学习
+  - 专升本直播课
+  - 移动学习
+  - 专升本网络课堂
+---
+
+<script setup>
+import OnlineSchool from './.vitepress/theme/pages/OnlineSchool.vue'
+</script>
+
+<OnlineSchool />
--- a/docs/privacy-policy.md
+++ b/docs/privacy-policy.md
@@ -0,0 +1,9 @@
+---
+title: 隐私政策 - 恭学教育集团
+---
+
+<script setup>
+import PrivacyPolicy from './.vitepress/theme/pages/PrivacyPolicy.vue'
+</script>
+
+<PrivacyPolicy />
--- a/docs/public/logo.png
+++ b/docs/public/logo.png
--- a/docs/question-bank.md
+++ b/docs/question-bank.md
@@ -0,0 +1,20 @@
+---
+title: 天津专升本刷题系统 - 恭学刷题 | AI智能算法 | 真题100%覆盖
+description: 恭学刷题系统采用AI算法4.0，专为天津专升本打造。收录历年真题10万+道，智能诊断薄弱知识点，大数据精准推送，复习效率提升300%，助你轻松通过专升本考试！
+keywords:
+  - 天津专升本刷题
+  - 恭学刷题
+  - 专升本真题
+  - 刷题系统
+  - 天津专升本题库
+  - 专升本练习
+  - 智能刷题
+  - AI刷题
+  - 专升本模拟题
+---
+
+<script setup>
+import QuestionBank from './.vitepress/theme/pages/QuestionBank.vue'
+</script>
+
+<QuestionBank />
--- a/docs/terms-of-service.md
+++ b/docs/terms-of-service.md
@@ -0,0 +1,9 @@
+---
+title: 使用条款 - 恭学教育集团
+---
+
+<script setup>
+import TermsOfService from './.vitepress/theme/pages/TermsOfService.vue'
+</script>
+
+<TermsOfService />
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "gongxue-vitepress",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vitepress dev docs --host 0.0.0.0",
+    "build": "vitepress build docs",
+    "serve": "vitepress serve docs"
+  },
+  "dependencies": {
+    "dompurify": "^3.4.10",
+    "lucide-vue-next": "^0.468.0"
+  },
+  "devDependencies": {
+    "@types/dompurify": "^3.0.5",
+    "@types/node": "^22.10.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.16",
+    "tsx": "^4.22.4",
+    "typescript": "~5.7.0",
+    "vitepress": "1.0.0-alpha.28",
+    "vue": "3.2.44"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "@algolia/client-search"
+      ]
+    }
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,76 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./docs/**/*.md",
+    "./docs/.vitepress/**/*.{js,ts,vue}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['"SF Pro Display"', '"SF Pro Text"', '"Inter"', '"Noto Sans SC"', 'system-ui', 'sans-serif'],
+      },
+      colors: {
+        'apple-grey': '#F5F5F7',
+        'apple-dark': '#1D1D1F',
+        'apple-blue': '#0071E3',
+        'apple-blue-hover': '#0077ED',
+        'apple-text-gray': '#86868B',
+        'gongxue': {
+          primary: '#0071E3',
+          secondary: '#5E5CE6',
+          success: '#34C759',
+          warning: '#FF9500',
+          danger: '#FF3B30',
+          dark: '#1D1D1F',
+          gray: {
+            50: '#F5F5F7',
+            100: '#E8E8ED',
+            200: '#D2D2D7',
+            300: '#AEAEB2',
+            400: '#8E8E93',
+            500: '#636366',
+            600: '#48484A',
+            700: '#3A3A3C',
+            800: '#2C2C2E',
+            900: '#1C1C1E',
+          }
+        }
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.6s ease-out forwards',
+        'slide-up': 'slideUp 0.6s ease-out forwards',
+        'slide-down': 'slideDown 0.4s ease-out forwards',
+        'float': 'float 6s ease-in-out infinite',
+        'pulse-slow': 'pulse 3s ease-in-out infinite',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { opacity: '0', transform: 'translateY(20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        slideDown: {
+          '0%': { opacity: '0', transform: 'translateY(-10px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        float: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-10px)' },
+        },
+      },
+      boxShadow: {
+        'apple': '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
+        'apple-lg': '0 10px 40px -10px rgba(0, 0, 0, 0.1)',
+        'apple-xl': '0 20px 60px -15px rgba(0, 0, 0, 0.15)',
+      },
+      borderRadius: {
+        '4xl': '2rem',
+        '5xl': '2.5rem',
+      }
+    },
+  },
+  plugins: [],
+};