133 lines
5.6 KiB
Vue
133 lines
5.6 KiB
Vue
<script setup lang="ts">
|
||
import {
|
||
Swords, BookOpenCheck, Star, Zap,
|
||
MessageCircle, Target, Smile, ShieldCheck,
|
||
} from 'lucide-vue-next'
|
||
import { useScrollReveal } from '@/composables/useScrollReveal'
|
||
import tabletImg from '@/assets/xuesheng.png'
|
||
|
||
const { target, isVisible } = useScrollReveal()
|
||
|
||
const features = [
|
||
{
|
||
icon: Swords,
|
||
title: '内容闯关',
|
||
desc: '关卡式互动体验，普通/困难双模式，每通一关都有满满成就感',
|
||
tag: '最受欢迎',
|
||
},
|
||
{
|
||
icon: BookOpenCheck,
|
||
title: '精品内容体系',
|
||
desc: '从入门到进阶，科学分级内容路径，持续提升核心能力',
|
||
},
|
||
{
|
||
icon: Star,
|
||
title: '积分激励',
|
||
desc: '完成任务赚积分和钻石，兑换奖励，参与变成收获的过程',
|
||
},
|
||
{
|
||
icon: Zap,
|
||
title: '自由探索模式',
|
||
desc: '按分类自主选择内容，灵活掌握节奏和方向',
|
||
},
|
||
{
|
||
icon: MessageCircle,
|
||
title: '智能助手',
|
||
desc: '智能陪伴，随时答疑解惑，像拥有一位24小时私人顾问',
|
||
},
|
||
{
|
||
icon: Target,
|
||
title: '精准推荐',
|
||
desc: '智能分析薄弱环节，定向推送相关内容，告别无效重复',
|
||
},
|
||
{
|
||
icon: Smile,
|
||
title: '积极心态',
|
||
desc: '「3 件好事」与微笑打卡，关注心理健康，培养积极心态',
|
||
},
|
||
{
|
||
icon: ShieldCheck,
|
||
title: '进度助手',
|
||
desc: '个性化计划 + 进度追踪，帮助养成自律好习惯',
|
||
},
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<section id="app" class="relative py-24 lg:py-32 bg-gradient-to-b from-white to-bg-soft overflow-hidden">
|
||
<div class="absolute top-40 -right-60 w-[500px] h-[500px] rounded-full bg-primary/5 blur-3xl" />
|
||
<div class="absolute bottom-20 -left-40 w-[400px] h-[400px] rounded-full bg-accent/5 blur-3xl" />
|
||
|
||
<div class="absolute top-20 right-10 lg:right-20 opacity-[0.04]" style="background-image: radial-gradient(circle, #4F46E5 1.5px, transparent 1.5px); background-size: 24px 24px; width: 200px; height: 200px;" />
|
||
|
||
<div ref="target" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid lg:grid-cols-12 gap-12 lg:gap-8 items-start">
|
||
|
||
<div
|
||
class="lg:col-span-5 lg:sticky lg:top-28 transition-all duration-700"
|
||
:class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
|
||
>
|
||
<p class="text-sm font-semibold text-primary tracking-wider uppercase mb-3">体验端</p>
|
||
<h2 class="text-3xl sm:text-4xl lg:text-[2.75rem] font-extrabold text-text-heading leading-tight">
|
||
趣味互动，<br />
|
||
<span class="gradient-text">探索不止</span>
|
||
</h2>
|
||
<p class="text-lg text-text-muted mt-5 leading-relaxed">
|
||
告别枯燥模式，灵犀学用趣味化机制点燃参与热情。排行榜、成就徽章、虚拟奖励——让用户主动投入其中。
|
||
</p>
|
||
|
||
<div class="mt-10 flex justify-center">
|
||
<div class="relative w-full max-w-md">
|
||
<div class="rounded-2xl bg-gradient-to-br from-[#1E1B4B] to-[#312E81] p-2.5 shadow-2xl">
|
||
<div class="rounded-xl overflow-hidden bg-[#0F0D2E] aspect-[16/10]">
|
||
<img :src="tabletImg" alt="灵犀学体验端界面" class="w-full h-full object-cover" />
|
||
</div>
|
||
</div>
|
||
<div class="absolute -right-6 top-6 glass-card rounded-xl px-3 py-2 shadow-lg animate-float-slow hidden sm:block">
|
||
<div class="flex items-center gap-1.5">
|
||
<svg class="w-4 h-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||
<span class="text-xs font-bold text-amber-600">+100 积分</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lg:col-span-7 grid sm:grid-cols-2 gap-4">
|
||
<div
|
||
v-for="(feat, i) in features"
|
||
:key="feat.title"
|
||
class="group relative p-5 rounded-2xl bg-white border border-gray-100 hover:border-primary/20 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5 transition-all duration-300 cursor-pointer"
|
||
:class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'"
|
||
:style="{ transitionDelay: isVisible ? `${200 + i * 80}ms` : '0ms', transitionDuration: '600ms' }"
|
||
>
|
||
<div class="absolute -bottom-4 -right-4 w-20 h-20 rounded-full bg-primary/[0.03] group-hover:bg-primary/[0.06] transition-colors duration-500" />
|
||
|
||
<span
|
||
v-if="feat.tag"
|
||
class="absolute -top-3 right-4 text-xs font-semibold px-2.5 py-0.5 rounded-full bg-gradient-to-r from-primary to-primary-light text-white shadow-sm z-10"
|
||
>
|
||
{{ feat.tag }}
|
||
</span>
|
||
<div class="relative">
|
||
<div class="w-11 h-11 rounded-xl bg-primary/8 flex items-center justify-center mb-3.5 group-hover:bg-primary/12 group-hover:scale-110 transition-all duration-300">
|
||
<component :is="feat.icon" class="w-5.5 h-5.5 text-primary" />
|
||
</div>
|
||
<h4 class="text-base font-bold text-text-heading mb-1.5">{{ feat.title }}</h4>
|
||
<p class="text-sm text-text-muted leading-relaxed">{{ feat.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
@keyframes float-slow {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-10px); }
|
||
}
|
||
.animate-float-slow { animation: float-slow 5s ease-in-out infinite; }
|
||
</style>
|