382 lines
20 KiB
Vue
382 lines
20 KiB
Vue
<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>
|