gongxue-new/docs/.vitepress/theme/pages/QuestionBank.vue

<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>