259 lines
11 KiB
Vue
259 lines
11 KiB
Vue
<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>
|