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

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