dmg/xuexiaole-officialWebsite
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化

Browse Source
This commit is contained in:
阿梦 2026-04-10 16:10:07 +08:00
parent 1cfbc4f60b
commit b3bec5f09d
21 changed files with 1549 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.cursor/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-38.pyc Normal file
View File

Binary file not shown.

BIN
.cursor/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-38.pyc Normal file
View File

Binary file not shown.

BIN
dist.zip Normal file
View File

Binary file not shown.

6
index.html
View File

@ -4,12 +4,12 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="灵犀学 - AI驱动的智慧教育生态平台，游戏化激发学习兴趣，AI智能批改提升教学效率" />
<meta name="keywords" content="灵犀学,AI教育,智慧学习,游戏化学习,AI批改,智能教育" />
<meta name="description" content="灵犀学 - 一站式互动内容服务平台，趣味化互动体验，智能工具提升管理效率" />
<meta name="keywords" content="灵犀学,互动平台,内容服务,趣味闯关,数据分析,智能工具" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
<title>灵犀学 - AI驱动的智慧教育生态平台</title>
<title>灵犀学 - 一站式互动内容服务平台</title>
</head>
<body class="antialiased">
<div id="app"></div>

5
src/App.vue
View File

@ -1,4 +1,9 @@
<script setup lang="ts">
import { onMounted } from 'vue'
onMounted(() => {
window.scrollTo(0, 0)
})
</script>
<template>

157
src/components/new/AdminSectionNew.vue Normal file
View File

@ -0,0 +1,157 @@
<script setup lang="ts">
import {
FileCheck2, LayoutDashboard, Library, Users,
Clock, CheckCircle2, TrendingUp, Eye
} from 'lucide-vue-next'
import { useScrollReveal } from '@/composables/useScrollReveal'
import DashboardMockup from '@/components/new/illustrations/DashboardMockup.vue'
const { target, isVisible } = useScrollReveal()
const features = [
{
icon: FileCheck2,
title: '内容分发',
desc: '海量资源一键组合，支持按类型、难度、标签灵活筛选',
},
{
icon: LayoutDashboard,
title: '数据看板',
desc: '全局/分组/分类多维度数据，运营效果一目了然',
tag: '管理者最爱',
},
{
icon: Library,
title: '自建资源库',
desc: '支持自建专属资源库，积累沉淀数字化资产',
},
{
icon: Users,
title: '团队管理',
desc: '成员分组、任务分配、进度追踪，高效管理每个团队',
},
{
icon: Clock,
title: '任务管理',
desc: '一键发布任务，实时追踪完成进度和处理状态',
},
{
icon: Eye,
title: '人工复核',
desc: '智能处理后人工复核，双重保障内容质量',
},
{
icon: TrendingUp,
title: '数据分析',
desc: '每位用户的数据可视化，精准识别运营薄弱点',
},
{
icon: CheckCircle2,
title: '流程管理',
desc: '批次管理、数据批量导入，工作流程一站式搞定',
},
]
</script>
<template>
<section id="admin" class="relative py-24 lg:py-32 bg-bg-soft overflow-hidden">
<div class="absolute top-20 -left-40 w-[500px] h-[500px] rounded-full bg-accent/5 blur-3xl" />
<div class="absolute bottom-40 -right-60 w-[600px] h-[600px] rounded-full bg-primary/5 blur-3xl" />
<div class="absolute bottom-20 left-10 lg:left-20 opacity-[0.03]">
<svg width="200" height="200" viewBox="0 0 200 200">
<pattern id="crosses-new" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse">
<line x1="10" y1="15" x2="20" y2="15" stroke="#22C55E" stroke-width="1.5" />
<line x1="15" y1="10" x2="15" y2="20" stroke="#22C55E" stroke-width="1.5" />
</pattern>
<rect width="200" height="200" fill="url(#crosses-new)" />
</svg>
</div>
<div ref="target" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div
class="text-center max-w-3xl mx-auto mb-12 transition-all duration-700"
:class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
>
<p class="text-sm font-semibold text-accent tracking-wider uppercase mb-3">管理端</p>
<h2 class="text-3xl sm:text-4xl lg:text-[2.75rem] font-extrabold text-text-heading leading-tight">
高效管理，<span class="bg-gradient-to-r from-accent to-emerald-400 bg-clip-text text-transparent">数据驱动运营</span>
</h2>
<p class="text-lg text-text-muted mt-5 leading-relaxed">
从内容分发到数据分析，智能工具接管重复性工作，管理者把宝贵时间留给真正需要关注的事务
</p>
</div>
<div
class="mb-14 transition-all duration-700"
:class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
:style="{ transitionDelay: isVisible ? '200ms' : '0ms' }"
>
<div class="max-w-3xl mx-auto relative">
<DashboardMockup />
<div class="absolute -top-4 -right-4 lg:right-8 glass-card-strong rounded-xl px-3.5 py-2.5 shadow-lg animate-float-slow">
<div class="flex items-center gap-2">
<div class="w-7 h-7 rounded-lg bg-accent/15 flex items-center justify-center">
<CheckCircle2 class="w-4 h-4 text-accent" />
</div>
<div>
<p class="text-xs font-semibold text-text-heading">全部处理完成</p>
<p class="text-xs text-accent font-medium">节省 2.5 小时</p>
</div>
</div>
</div>
<div class="absolute bottom-8 -left-4 lg:left-0 glass-card-strong rounded-xl px-3.5 py-2.5 shadow-lg animate-float-medium hidden sm:block">
<div class="flex items-center gap-2">
<div class="w-7 h-7 rounded-lg bg-primary/15 flex items-center justify-center">
<TrendingUp class="w-4 h-4 text-primary" />
</div>
<div>
<p class="text-xs font-semibold text-text-heading">本周效率</p>
<p class="text-xs text-primary font-medium">提升 35%</p>
</div>
</div>
</div>
</div>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div
v-for="(feat, i) in features"
:key="feat.title"
class="group relative p-5 rounded-2xl bg-white/90 backdrop-blur-sm border border-gray-100 hover:border-accent/20 hover:shadow-lg hover:shadow-accent/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 ? `${400 + i * 80}ms` : '0ms', transitionDuration: '600ms' }"
>
<div class="absolute -bottom-4 -right-4 w-16 h-16 rounded-full bg-accent/[0.03] group-hover:bg-accent/[0.08] 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-accent to-accent-light text-white shadow-sm z-10"
>
{{ feat.tag }}
</span>
<div class="relative">
<div class="w-10 h-10 rounded-xl bg-accent/8 flex items-center justify-center mb-3 group-hover:bg-accent/12 group-hover:scale-110 transition-all duration-300">
<component :is="feat.icon" class="w-5 h-5 text-accent" />
</div>
<h4 class="text-base font-bold text-text-heading mb-1">{{ feat.title }}</h4>
<p class="text-sm text-text-muted leading-relaxed">{{ feat.desc }}</p>
</div>
</div>
</div>
</div>
</section>
</template>
<style scoped>
@keyframes float-slow {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes float-medium {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
.animate-float-slow { animation: float-slow 5s ease-in-out infinite; }
.animate-float-medium { animation: float-medium 4s ease-in-out infinite 0.5s; }
</style>

132
src/components/new/AppSectionNew.vue Normal file
View File

@ -0,0 +1,132 @@
<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>

136
src/components/new/CtaSectionNew.vue Normal file
View File

@ -0,0 +1,136 @@
<script setup lang="ts">
import { ref } from 'vue'
import { ArrowRight, Sparkles, Layers, Zap, Star, X, Phone } from 'lucide-vue-next'
import { useScrollReveal } from '@/composables/useScrollReveal'
const { target, isVisible } = useScrollReveal()
const showDemoModal = ref(false)
</script>
<template>
<section id="cta" class="relative py-24 lg:py-32 bg-white overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5" />
<div class="absolute top-20 left-1/4 w-[400px] h-[400px] rounded-full bg-primary/8 blur-3xl" />
<div class="absolute bottom-10 right-1/4 w-[300px] h-[300px] rounded-full bg-accent/8 blur-3xl" />
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-16 left-[10%] animate-float-1">
<div class="w-12 h-12 rounded-2xl bg-primary/8 flex items-center justify-center">
<Layers class="w-6 h-6 text-primary/40" />
</div>
</div>
<div class="absolute top-24 right-[12%] animate-float-2">
<div class="w-10 h-10 rounded-xl bg-accent/8 flex items-center justify-center">
<Star class="w-5 h-5 text-accent/40" />
</div>
</div>
<div class="absolute bottom-20 left-[8%] animate-float-3">
<div class="w-11 h-11 rounded-2xl bg-amber-500/8 flex items-center justify-center">
<Zap class="w-5 h-5 text-amber-500/40" />
</div>
</div>
<div class="absolute bottom-28 right-[10%] animate-float-1">
<div class="w-10 h-10 rounded-xl bg-primary-light/10 flex items-center justify-center">
<Sparkles class="w-5 h-5 text-primary-light/40" />
</div>
</div>
<div class="absolute top-1/2 left-[5%] animate-float-2 hidden lg:block">
<div class="w-8 h-8 rounded-lg bg-rose-500/8 flex items-center justify-center">
<Star class="w-4 h-4 text-rose-400/40" />
</div>
</div>
<div class="absolute top-1/3 right-[6%] animate-float-3 hidden lg:block">
<div class="w-9 h-9 rounded-xl bg-cyan-500/8 flex items-center justify-center">
<Layers class="w-4 h-4 text-cyan-500/40" />
</div>
</div>
</div>
<div
ref="target"
class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center transition-all duration-700"
:class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/8 border border-primary/15 mb-6">
<Sparkles class="w-4 h-4 text-primary" />
<span class="text-sm font-medium text-primary">免费开始使用</span>
</div>
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-text-heading leading-tight">
准备好开启<span class="gradient-text">新体验</span>了吗？
</h2>
<p class="text-lg text-text-muted mt-5 leading-relaxed max-w-2xl mx-auto">
无论您是想提升团队效率的管理者，还是希望获得更好体验的用户，灵犀学都能为您提供最佳方案。
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mt-10">
<a
href="https://ai.xuexiaole.com/"
target="_blank"
rel="noopener noreferrer"
class="w-full sm:w-auto inline-flex items-center justify-center gap-2.5 px-8 py-4 text-base font-semibold text-white bg-gradient-to-r from-primary to-primary-light rounded-2xl hover:shadow-xl hover:shadow-primary/25 hover:-translate-y-0.5 transition-all duration-300 cursor-pointer group"
>
<span>立即免费体验</span>
<ArrowRight class="w-5 h-5 group-hover:translate-x-0.5 transition-transform duration-200" />
</a>
<button
@click="showDemoModal = true"
class="w-full sm:w-auto inline-flex items-center justify-center gap-2.5 px-8 py-4 text-base font-semibold text-primary bg-white border-2 border-primary/20 rounded-2xl hover:border-primary/40 hover:bg-primary/5 transition-all duration-300 cursor-pointer"
>
预约产品演示
</button>
</div>
<p class="text-sm text-text-muted mt-6">
无需信用卡 · 即刻开始 · 专属客服支持
</p>
</div>
<!-- Demo modal -->
<Teleport to="body">
<Transition
enter-active-class="transition-all duration-300 ease-out"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition-all duration-200 ease-in"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-if="showDemoModal" class="fixed inset-0 z-[100] flex items-center justify-center p-4" @click.self="showDemoModal = false">
<div class="absolute inset-0 bg-black/50 backdrop-blur-sm" />
<div class="relative bg-white rounded-3xl shadow-2xl max-w-sm w-full p-8 text-center">
<button
@click="showDemoModal = false"
class="absolute top-4 right-4 w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors duration-200 cursor-pointer"
>
<X class="w-4 h-4 text-gray-500" />
</button>
<div class="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mx-auto mb-5">
<Phone class="w-8 h-8 text-primary" />
</div>
<h3 class="text-xl font-bold text-text-heading mb-2">预约产品演示</h3>
<p class="text-sm text-text-muted mb-6">请拨打以下电话联系我们，专属顾问将为您安排演示</p>
<a
href="tel:17670000000"
class="inline-flex items-center gap-2.5 px-6 py-3.5 text-lg font-bold text-primary bg-primary/8 rounded-2xl hover:bg-primary/12 transition-colors duration-200"
>
<Phone class="w-5 h-5" />
176 7000 0000
</a>
<p class="text-xs text-text-muted mt-4">工作时间：周一至周五 9:00 - 18:00</p>
</div>
</div>
</Transition>
</Teleport>
</section>
</template>
<style scoped>
@keyframes float-1 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-15px) rotate(5deg)} }
@keyframes float-2 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-12px) rotate(-4deg)} }
@keyframes float-3 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-18px) rotate(3deg)} }
.animate-float-1 { animation: float-1 6s ease-in-out infinite; }
.animate-float-2 { animation: float-2 5s ease-in-out infinite 0.8s; }
.animate-float-3 { animation: float-3 7s ease-in-out infinite 1.5s; }
</style>

121
src/components/new/FeaturesSectionNew.vue Normal file
View File

@ -0,0 +1,121 @@
<script setup lang="ts">
import {
Gamepad2, BrainCircuit, BookOpen, Trophy,
Target, BarChart3,
} from 'lucide-vue-next'
import { useScrollReveal } from '@/composables/useScrollReveal'
const { target, isVisible } = useScrollReveal()
const features = [
{
icon: Gamepad2,
title: '趣味闯关体验',
desc: '将内容变成闯关冒险，激发用户内在驱动力，互动体验越用越想用。',
color: 'primary',
},
{
icon: BrainCircuit,
title: '智能分析引擎',
desc: '主观内容秒级处理，关键信息高亮解析，效率媲美专业团队。',
color: 'accent',
},
{
icon: BookOpen,
title: '沉浸式内容体系',
desc: '从入门到进阶，科学分级内容路径，培养持续探索的动力。',
color: 'amber',
},
{
icon: Trophy,
title: '成就激励系统',
desc: '积分奖励、排行榜、成就勋章，让每一步进步都被看见和鼓励。',
color: 'rose',
},
{
icon: Target,
title: '精准内容推荐',
desc: '智能分析薄弱环节，定向推送相关内容，告别盲目操作。',
color: 'cyan',
},
{
icon: BarChart3,
title: '可视化数据报告',
desc: '多维度数据看板，团队/分类/个人一目了然，数据驱动精细化运营。',
color: 'violet',
},
]
const colorMap: Record<string, { bg: string; iconBg: string; text: string; border: string; gradFrom: string; gradTo: string }> = {
primary: { bg: 'bg-primary/5', iconBg: 'bg-primary/12', text: 'text-primary', border: 'border-primary/10', gradFrom: '#4F46E5', gradTo: '#818CF8' },
accent: { bg: 'bg-accent/5', iconBg: 'bg-accent/12', text: 'text-accent', border: 'border-accent/10', gradFrom: '#22C55E', gradTo: '#4ADE80' },
amber: { bg: 'bg-amber-500/5', iconBg: 'bg-amber-500/12', text: 'text-amber-600', border: 'border-amber-500/10', gradFrom: '#F59E0B', gradTo: '#FBBF24' },
rose: { bg: 'bg-rose-500/5', iconBg: 'bg-rose-500/12', text: 'text-rose-600', border: 'border-rose-500/10', gradFrom: '#F43F5E', gradTo: '#FB7185' },
cyan: { bg: 'bg-cyan-500/5', iconBg: 'bg-cyan-500/12', text: 'text-cyan-600', border: 'border-cyan-500/10', gradFrom: '#06B6D4', gradTo: '#22D3EE' },
violet: { bg: 'bg-violet-500/5', iconBg: 'bg-violet-500/12', text: 'text-violet-600', border: 'border-violet-500/10', gradFrom: '#8B5CF6', gradTo: '#A78BFA' },
}
</script>
<template>
<section id="features" class="relative py-24 lg:py-32 bg-white overflow-hidden">
<div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent" />
<div class="absolute top-32 -right-20 w-64 h-64 rounded-full bg-primary/3 blur-3xl" />
<div class="absolute bottom-20 -left-20 w-48 h-48 rounded-full bg-accent/3 blur-3xl" />
<div ref="target" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div
class="text-center max-w-3xl mx-auto mb-16 lg:mb-20 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-5xl font-extrabold text-text-heading leading-tight">
一个平台，<span class="gradient-text">覆盖全场景</span>
</h2>
<p class="text-lg text-text-muted mt-5 leading-relaxed">
从内容分发到数据分析，从任务管理到智能处理，灵犀学为服务的每个环节注入智慧力量
</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-6">
<div
v-for="(feat, i) in features"
:key="feat.title"
class="group relative p-6 lg:p-8 rounded-2xl border bg-white transition-all duration-500 cursor-pointer hover:-translate-y-1 hover:shadow-xl hover:shadow-gray-200/50 overflow-hidden"
:class="[
colorMap[feat.color].border,
isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8',
]"
:style="{ transitionDelay: isVisible ? `${i * 100}ms` : '0ms' }"
>
<div class="absolute -bottom-6 -right-6 w-32 h-32 rounded-full opacity-[0.06] group-hover:opacity-[0.12] transition-opacity duration-500">
<svg viewBox="0 0 100 100" class="w-full h-full">
<circle cx="50" cy="50" r="50" :fill="colorMap[feat.color].gradFrom" />
</svg>
</div>
<div class="absolute -top-3 -right-3 w-16 h-16 rounded-full opacity-[0.04] group-hover:opacity-[0.08] transition-opacity duration-500">
<svg viewBox="0 0 100 100" class="w-full h-full">
<circle cx="50" cy="50" r="50" :fill="colorMap[feat.color].gradTo" />
</svg>
</div>
<div class="relative">
<div
class="w-14 h-14 rounded-2xl flex items-center justify-center mb-5 transition-transform duration-300 group-hover:scale-110 shadow-sm"
:class="colorMap[feat.color].iconBg"
>
<component :is="feat.icon" class="w-7 h-7" :class="colorMap[feat.color].text" />
</div>
<h3 class="text-lg font-bold text-text-heading mb-2.5">{{ feat.title }}</h3>
<p class="text-sm text-text-muted leading-relaxed">{{ feat.desc }}</p>
<div class="mt-5 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div class="h-0.5 w-8 rounded-full" :class="colorMap[feat.color].iconBg" />
<span class="text-xs font-medium" :class="colorMap[feat.color].text">了解更多</span>
</div>
</div>
</div>
</div>
</div>
</section>
</template>

85
src/components/new/FooterSectionNew.vue Normal file
View File

@ -0,0 +1,85 @@
<script setup lang="ts">
import logoImg from '@/assets/logo.png'
const currentYear = new Date().getFullYear()
const footerLinks = [
{
title: '产品',
links: [
{ label: '体验端', href: '#app' },
{ label: '管理端', href: '#admin' },
{ label: '核心技术', href: '#tech' },
{ label: '功能介绍', href: '#features' },
],
},
{
title: '支持',
links: [
{ label: '帮助中心', href: '#' },
{ label: '使用教程', href: '#' },
{ label: '常见问题', href: '#' },
{ label: '联系我们', href: '#' },
],
},
{
title: '公司',
links: [
{ label: '关于我们', href: '#about' },
{ label: '合作伙伴', href: '#' },
{ label: '加入我们', href: '#' },
{ label: '新闻动态', href: '#' },
],
},
]
</script>
<template>
<footer class="bg-[#0F0D2E] text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-8">
<div class="grid grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-12">
<div class="col-span-2">
<div class="flex items-center mb-4">
<img :src="logoImg" alt="灵犀学" class="h-9 w-auto brightness-0 invert" />
</div>
<p class="text-sm text-indigo-200/50 leading-relaxed max-w-xs mb-6">
一站式互动内容服务平台，让管理更高效，让体验更精彩。
</p>
<div class="flex gap-3">
<a
v-for="platform in ['微信', '微博', '抖音']"
:key="platform"
href="#"
class="w-9 h-9 rounded-lg bg-white/8 border border-white/8 flex items-center justify-center text-xs font-medium text-indigo-200/60 hover:bg-white/15 hover:text-white transition-all duration-200 cursor-pointer"
>
{{ platform[0] }}
</a>
</div>
</div>
<div v-for="group in footerLinks" :key="group.title">
<h4 class="text-sm font-semibold text-white mb-4">{{ group.title }}</h4>
<ul class="space-y-2.5">
<li v-for="link in group.links" :key="link.label">
<a
:href="link.href"
class="text-sm text-indigo-200/50 hover:text-white transition-colors duration-200 cursor-pointer"
>
{{ link.label }}
</a>
</li>
</ul>
</div>
</div>
<div class="mt-12 pt-8 border-t border-white/8 flex flex-col sm:flex-row items-center justify-between gap-4">
<p class="text-xs text-indigo-200/40">&copy; {{ currentYear }} 灵犀学. All rights reserved.</p>
<div class="flex items-center gap-6">
<a href="#" class="text-xs text-indigo-200/40 hover:text-indigo-200/70 transition-colors duration-200 cursor-pointer">隐私政策</a>
<a href="#" class="text-xs text-indigo-200/40 hover:text-indigo-200/70 transition-colors duration-200 cursor-pointer">服务条款</a>
<a href="#" class="text-xs text-indigo-200/40 hover:text-indigo-200/70 transition-colors duration-200 cursor-pointer">ICP 备案</a>
</div>
</div>
</div>
</footer>
</template>

128
src/components/new/HeroSectionNew.vue Normal file
View File

@ -0,0 +1,128 @@
<script setup lang="ts">
import { Sparkles, ArrowRight, Play } from 'lucide-vue-next'
import HeroIllustrationNew from '@/components/new/illustrations/HeroIllustrationNew.vue'
</script>
<template>
<section id="hero" class="relative min-h-screen flex items-center overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-bg-soft via-white to-indigo-50/80" />
<div class="absolute top-20 -left-32 w-[500px] h-[500px] rounded-full bg-primary/8 blur-3xl" />
<div class="absolute bottom-10 -right-40 w-[600px] h-[600px] rounded-full bg-accent/6 blur-3xl" />
<div class="absolute top-1/3 right-1/4 w-[300px] h-[300px] rounded-full bg-primary-light/10 blur-3xl" />
<div class="absolute inset-0 opacity-[0.03]" style="background-image: radial-gradient(circle, #4F46E5 1px, transparent 1px); background-size: 40px 40px;" />
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-28 pb-20 lg:pt-40 lg:pb-32">
<div class="grid lg:grid-cols-2 gap-16 lg:gap-12 items-center">
<div class="space-y-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/8 border border-primary/15">
<Sparkles class="w-4 h-4 text-primary" />
<span class="text-sm font-medium text-primary">一站式互动内容服务平台</span>
</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight tracking-tight">
<span class="gradient-text-hero">让每一步成长</span>
<br />
<span class="gradient-text">都被看见</span>
</h1>
<p class="text-lg sm:text-xl text-text-muted leading-relaxed max-w-lg">
趣味化互动体验激发内驱力，智能工具提升管理效率。
<span class="text-text-body font-medium">一个平台，连接服务的每一个环节。</span>
</p>
<div class="flex flex-wrap gap-5">
<a
href="https://ai.xuexiaole.com/"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center gap-2.5 px-8 py-4 text-base font-semibold text-white bg-gradient-to-r from-primary to-primary-light rounded-2xl hover:shadow-xl hover:shadow-primary/25 hover:-translate-y-0.5 transition-all duration-300 cursor-pointer group"
>
<span>体验入口</span>
<ArrowRight class="w-4.5 h-4.5 group-hover:translate-x-0.5 transition-transform duration-200" />
</a>
<a
href="https://admin.xuexiaole.com/"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center gap-2.5 px-8 py-4 text-base font-semibold text-primary bg-white border-2 border-primary/20 rounded-2xl hover:border-primary/40 hover:bg-primary/5 hover:-translate-y-0.5 transition-all duration-300 cursor-pointer group"
>
<Play class="w-4.5 h-4.5" />
<span>管理入口</span>
</a>
</div>
<div class="flex items-center gap-6 pt-2">
<div class="flex -space-x-2">
<div v-for="i in 4" :key="i" class="w-9 h-9 rounded-full border-2 border-white bg-gradient-to-br from-primary/60 to-primary-light/80 flex items-center justify-center text-xs font-bold text-white shadow-sm">
{{ ['张', '李', '王', '陈'][i - 1] }}
</div>
</div>
<div>
<p class="text-sm font-semibold text-text-heading">10,000+ 用户已加入</p>
<p class="text-xs text-text-muted">来自全国 200+ 机构</p>
</div>
</div>
</div>
<div class="relative lg:pl-4">
<HeroIllustrationNew class="w-full max-w-[520px] mx-auto" />
<div class="absolute top-6 right-0 lg:-right-2 glass-card rounded-2xl px-4 py-3 shadow-lg animate-float-slow">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-accent/15 flex items-center justify-center">
<Sparkles class="w-4 h-4 text-accent" />
</div>
<div>
<p class="text-xs font-semibold text-text-heading">连续打卡 7 天</p>
<p class="text-xs text-accent font-medium">+50 积分奖励</p>
</div>
</div>
</div>
<div class="absolute bottom-16 left-0 lg:-left-2 glass-card rounded-2xl px-4 py-3 shadow-lg animate-float-medium">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-primary/15 flex items-center justify-center">
<Play class="w-4 h-4 text-primary" />
</div>
<div>
<p class="text-xs font-semibold text-text-heading">智能处理完成</p>
<p class="text-xs text-primary font-medium">准确率 92%</p>
</div>
</div>
</div>
<div class="absolute top-1/2 -right-4 lg:right-2 glass-card rounded-2xl px-3 py-2.5 shadow-lg animate-float-fast hidden sm:block">
<div class="flex items-center gap-2">
<div class="w-7 h-7 rounded-lg bg-amber-500/15 flex items-center justify-center">
<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>
</div>
<div>
<p class="text-xs font-semibold text-text-heading">排行榜 #3</p>
<p class="text-xs text-amber-600 font-medium">超越 89%</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<style scoped>
@keyframes float-slow {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
@keyframes float-medium {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes float-fast {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
.animate-float-slow { animation: float-slow 6s ease-in-out infinite; }
.animate-float-medium { animation: float-medium 4s ease-in-out infinite 0.5s; }
.animate-float-fast { animation: float-fast 5s ease-in-out infinite 1s; }
</style>

111
src/components/new/NavBarNew.vue Normal file
View File

@ -0,0 +1,111 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { Menu, X } from 'lucide-vue-next'
import logoImg from '@/assets/logo.png'
const scrolled = ref(false)
const mobileOpen = ref(false)
const navLinks = [
{ label: '产品功能', href: '#features' },
{ label: '体验端', href: '#app' },
{ label: '管理端', href: '#admin' },
{ label: '关于我们', href: '#about' },
]
function onScroll() {
scrolled.value = window.scrollY > 20
}
function scrollTo(href: string) {
mobileOpen.value = false
const el = document.querySelector(href)
el?.scrollIntoView({ behavior: 'smooth' })
}
onMounted(() => window.addEventListener('scroll', onScroll, { passive: true }))
onUnmounted(() => window.removeEventListener('scroll', onScroll))
</script>
<template>
<nav
class="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
:class="scrolled
? 'bg-white/80 backdrop-blur-xl shadow-lg shadow-indigo-100/40 border-b border-white/40'
: 'bg-transparent'"
>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16 lg:h-18">
<a href="#" class="flex items-center cursor-pointer group" @click.prevent="scrollTo('#hero')">
<img :src="logoImg" alt="灵犀学" class="h-9 w-auto" />
</a>
<div class="hidden lg:flex items-center gap-1">
<a
v-for="link in navLinks"
:key="link.href"
:href="link.href"
class="px-4 py-2 text-sm font-medium text-text-body hover:text-primary rounded-lg hover:bg-primary/5 transition-colors duration-200 cursor-pointer"
@click.prevent="scrollTo(link.href)"
>
{{ link.label }}
</a>
</div>
<div class="hidden lg:flex items-center gap-3">
<a
href="#cta"
class="px-5 py-2.5 text-sm font-semibold text-white bg-gradient-to-r from-primary to-primary-light rounded-xl hover:shadow-lg hover:shadow-primary/30 transition-all duration-300 cursor-pointer"
@click.prevent="scrollTo('#cta')"
>
免费体验
</a>
</div>
<button
class="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors duration-200 cursor-pointer"
@click="mobileOpen = !mobileOpen"
:aria-label="mobileOpen ? '关闭菜单' : '打开菜单'"
>
<X v-if="mobileOpen" class="w-5 h-5 text-text-body" />
<Menu v-else class="w-5 h-5 text-text-body" />
</button>
</div>
</div>
<Transition
enter-active-class="transition-all duration-300 ease-out"
enter-from-class="opacity-0 -translate-y-2"
enter-to-class="opacity-100 translate-y-0"
leave-active-class="transition-all duration-200 ease-in"
leave-from-class="opacity-100 translate-y-0"
leave-to-class="opacity-0 -translate-y-2"
>
<div
v-if="mobileOpen"
class="lg:hidden bg-white/95 backdrop-blur-xl border-b border-gray-200/50 shadow-xl"
>
<div class="px-4 py-3 space-y-1">
<a
v-for="link in navLinks"
:key="link.href"
:href="link.href"
class="block px-4 py-3 text-sm font-medium text-text-body hover:text-primary hover:bg-primary/5 rounded-xl transition-colors duration-200 cursor-pointer"
@click.prevent="scrollTo(link.href)"
>
{{ link.label }}
</a>
<div class="pt-2 pb-1">
<a
href="#cta"
class="block w-full text-center px-4 py-3 text-sm font-semibold text-white bg-gradient-to-r from-primary to-primary-light rounded-xl cursor-pointer"
@click.prevent="scrollTo('#cta')"
>
免费体验
</a>
</div>
</div>
</div>
</Transition>
</nav>
</template>

64
src/components/new/StatsSectionNew.vue Normal file
View File

@ -0,0 +1,64 @@
<script setup lang="ts">
import { ref, watch } from 'vue'
import { useScrollReveal } from '@/composables/useScrollReveal'
const { target, isVisible } = useScrollReveal()
const stats = [
{ value: 10000, suffix: '+', label: '活跃用户', desc: '每天在灵犀学上使用' },
{ value: 200, suffix: '+', label: '合作机构', desc: '覆盖全国多个城市' },
{ value: 500, suffix: '万+', label: '内容处理', desc: '累计处理内容数量' },
{ value: 96.8, suffix: '%', label: '用户满意度', desc: '获得用户高度认可' },
]
const counters = ref(stats.map(() => 0))
function animateCounter(index: number, target: number, duration = 2000) {
const start = performance.now()
const isFloat = !Number.isInteger(target)
function update(now: number) {
const elapsed = now - start
const progress = Math.min(elapsed / duration, 1)
const eased = 1 - Math.pow(1 - progress, 3)
counters.value[index] = isFloat
? Math.round(target * eased * 10) / 10
: Math.round(target * eased)
if (progress < 1) requestAnimationFrame(update)
}
requestAnimationFrame(update)
}
watch(isVisible, (val) => {
if (val) {
stats.forEach((s, i) => {
setTimeout(() => animateCounter(i, s.value), i * 150)
})
}
})
</script>
<template>
<section class="relative py-20 lg:py-28 bg-white overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-primary/3 via-transparent to-accent/3" />
<div ref="target" class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
<div
v-for="(stat, i) in stats"
:key="stat.label"
class="text-center p-6 lg:p-8 rounded-2xl bg-white border border-gray-100 shadow-sm hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-1 transition-all duration-300 cursor-default"
:class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
:style="{ transitionDelay: isVisible ? `${i * 100}ms` : '0ms', transitionDuration: '600ms' }"
>
<p class="text-3xl sm:text-4xl lg:text-5xl font-extrabold gradient-text leading-none">
{{ Number.isInteger(stat.value) ? counters[i].toLocaleString() : counters[i].toFixed(1) }}{{ stat.suffix }}
</p>
<p class="text-base font-bold text-text-heading mt-3">{{ stat.label }}</p>
<p class="text-sm text-text-muted mt-1">{{ stat.desc }}</p>
</div>
</div>
</div>
</section>
</template>

122
src/components/new/TechSectionNew.vue Normal file
View File

@ -0,0 +1,122 @@
<script setup lang="ts">
import {
Cpu, Workflow, ShieldCheck, Layers,
Sparkles, ArrowRight,
} from 'lucide-vue-next'
import { useScrollReveal } from '@/composables/useScrollReveal'
const { target, isVisible } = useScrollReveal()
const techPoints = [
{
icon: Layers,
title: '深度内容理解',
desc: '强大的内容处理能力，准确理解各类内容的核心信息与逻辑结构。',
},
{
icon: Cpu,
title: '多维分析引擎',
desc: '关键信息提取、逻辑分析、完整度评估，多维度综合智能评判。',
},
{
icon: Workflow,
title: '个性化推荐',
desc: '动态规划内容路径，精准推荐每位用户的最优内容组合。',
},
{
icon: ShieldCheck,
title: '双重保障机制',
desc: '系统处理 + 人工复核双保险模式，确保结果的准确性与可靠性。',
},
]
const flow = [
{ step: '01', label: '发布任务', desc: '一键组合发布' },
{ step: '02', label: '用户参与', desc: '在线完成互动' },
{ step: '03', label: '智能处理', desc: '秒级自动处理' },
{ step: '04', label: '人工复核', desc: '关键内容审查' },
{ step: '05', label: '数据报告', desc: '多维报告生成' },
]
</script>
<template>
<section id="tech" class="relative py-24 lg:py-32 bg-gradient-to-b from-[#0F0D2E] to-[#1A1744] text-white overflow-hidden">
<div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary-light/30 to-transparent" />
<div class="absolute top-20 -right-40 w-[600px] h-[600px] rounded-full bg-primary/10 blur-3xl" />
<div class="absolute bottom-20 -left-40 w-[500px] h-[500px] rounded-full bg-accent/8 blur-3xl" />
<div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(129,140,248,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(129,140,248,0.3) 1px, transparent 1px); background-size: 60px 60px;" />
<div ref="target" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Header -->
<div
class="text-center max-w-3xl mx-auto mb-16 lg:mb-20 transition-all duration-700"
:class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/8 border border-white/10 mb-6">
<Sparkles class="w-4 h-4 text-primary-light" />
<span class="text-sm font-medium text-primary-light">核心技术</span>
</div>
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold leading-tight">
不止是工具，
<span class="bg-gradient-to-r from-primary-light via-indigo-300 to-accent bg-clip-text text-transparent">
更是智慧服务的引擎
</span>
</h2>
<p class="text-lg text-indigo-200/70 mt-5 leading-relaxed">
融合先进算法与自适应技术，灵犀学为每一位用户提供个性化的智能服务体验
</p>
</div>
<!-- Tech points -->
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5 mb-16 lg:mb-20">
<div
v-for="(tech, i) in techPoints"
:key="tech.title"
class="group p-6 rounded-2xl bg-white/5 border border-white/8 hover:bg-white/8 hover:border-white/15 transition-all duration-300 cursor-pointer overflow-hidden relative"
:class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
:style="{ transitionDelay: isVisible ? `${400 + i * 100}ms` : '0ms', transitionDuration: '600ms' }"
>
<div class="absolute -top-10 -right-10 w-24 h-24 rounded-full bg-primary-light/0 group-hover:bg-primary-light/10 transition-all duration-500 blur-2xl" />
<div class="relative">
<div class="w-12 h-12 rounded-xl bg-primary-light/15 flex items-center justify-center mb-4 group-hover:bg-primary-light/20 group-hover:scale-110 transition-all duration-300">
<component :is="tech.icon" class="w-6 h-6 text-primary-light" />
</div>
<h4 class="text-base font-bold text-white mb-2">{{ tech.title }}</h4>
<p class="text-sm text-indigo-200/60 leading-relaxed">{{ tech.desc }}</p>
</div>
</div>
</div>
<!-- Flow -->
<div
class="transition-all duration-700"
:class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
:style="{ transitionDelay: isVisible ? '800ms' : '0ms' }"
>
<h3 class="text-xl font-bold text-center text-white mb-10">服务全流程</h3>
<div class="flex flex-col lg:flex-row items-center lg:items-start gap-3 lg:gap-0">
<template v-for="(item, i) in flow" :key="item.step">
<div class="flex-1 text-center group">
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary/30 to-primary-light/20 border border-primary-light/20 flex items-center justify-center mx-auto mb-3 group-hover:from-primary/50 group-hover:to-primary-light/30 group-hover:scale-110 transition-all duration-300">
<span class="text-lg font-bold text-primary-light">{{ item.step }}</span>
</div>
<p class="text-sm font-semibold text-white">{{ item.label }}</p>
<p class="text-xs text-indigo-200/50 mt-1">{{ item.desc }}</p>
</div>
<div
v-if="i < flow.length - 1"
class="hidden lg:flex items-center pt-6"
>
<div class="w-12 flex items-center">
<div class="flex-1 h-px bg-gradient-to-r from-primary-light/30 to-primary-light/10" />
<ArrowRight class="w-4 h-4 text-primary-light/30 -ml-1" />
</div>
</div>
</template>
</div>
</div>
</div>
</section>
</template>

141
src/components/new/TestimonialSectionNew.vue Normal file
View File

@ -0,0 +1,141 @@
<script setup lang="ts">
import { ref } from 'vue'
import { Star, ChevronLeft, ChevronRight } from 'lucide-vue-next'
import { useScrollReveal } from '@/composables/useScrollReveal'
const { target, isVisible } = useScrollReveal()
const testimonials = [
{
name: '刘女士',
role: '运营主管 · 杭州',
content: '以前每次处理数据至少花 3 个小时，现在工具 10 分钟就搞定了，而且质量非常高。我终于有时间专注于更重要的事务了。',
rating: 5,
initials: '刘',
},
{
name: '王先生',
role: '资深用户 · 南京',
content: '以前一提到任务就头疼，现在每天抢着玩闯关挑战，不知不觉已经连续打卡 30 多天了。积分奖励机制真的太棒了！',
rating: 5,
initials: '王',
},
{
name: '张先生',
role: '机构负责人 · 成都',
content: '引入灵犀学半年后，团队整体效率提升了 70%。数据看板让运营管理变得透明高效，强烈推荐给同行。',
rating: 5,
initials: '张',
},
{
name: '陈女士',
role: '核心用户 · 上海',
content: '我最喜欢闯关的困难模式，拿到满星特别有成就感！排行榜上我已经是第二名了，马上就要超过第一名。',
rating: 5,
initials: '陈',
},
]
const current = ref(0)
function next() {
current.value = (current.value + 1) % testimonials.length
}
function prev() {
current.value = (current.value - 1 + testimonials.length) % testimonials.length
}
</script>
<template>
<section id="about" class="relative py-24 lg:py-32 bg-gradient-to-b from-white to-bg-soft overflow-hidden">
<div ref="target" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div
class="text-center max-w-3xl mx-auto mb-14 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-5xl font-extrabold text-text-heading leading-tight">
他们都在用<span class="gradient-text">灵犀学</span>
</h2>
</div>
<div class="hidden lg:grid grid-cols-2 gap-6">
<div
v-for="(t, i) in testimonials"
:key="t.name"
class="p-7 rounded-2xl bg-white border border-gray-100 shadow-sm hover:shadow-lg hover:shadow-primary/5 transition-all duration-300"
:class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'"
:style="{ transitionDelay: isVisible ? `${200 + i * 100}ms` : '0ms', transitionDuration: '600ms' }"
>
<div class="flex gap-0.5 mb-4">
<Star v-for="s in t.rating" :key="s" class="w-4 h-4 text-amber-400 fill-amber-400" />
</div>
<p class="text-text-body leading-relaxed mb-5">{{ t.content }}</p>
<div class="flex items-center gap-3 pt-4 border-t border-gray-100">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-primary-light flex items-center justify-center text-sm font-bold text-white">
{{ t.initials }}
</div>
<div>
<p class="text-sm font-semibold text-text-heading">{{ t.name }}</p>
<p class="text-xs text-text-muted">{{ t.role }}</p>
</div>
</div>
</div>
</div>
<div class="lg:hidden">
<div class="relative overflow-hidden rounded-2xl bg-white border border-gray-100 shadow-lg p-7">
<TransitionGroup
enter-active-class="transition-all duration-400"
enter-from-class="opacity-0 translate-x-8"
enter-to-class="opacity-100 translate-x-0"
leave-active-class="transition-all duration-200 absolute"
leave-from-class="opacity-100"
leave-to-class="opacity-0 -translate-x-8"
>
<div :key="current">
<div class="flex gap-0.5 mb-4">
<Star v-for="s in testimonials[current].rating" :key="s" class="w-4 h-4 text-amber-400 fill-amber-400" />
</div>
<p class="text-text-body leading-relaxed mb-5">{{ testimonials[current].content }}</p>
<div class="flex items-center gap-3 pt-4 border-t border-gray-100">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-primary-light flex items-center justify-center text-sm font-bold text-white">
{{ testimonials[current].initials }}
</div>
<div>
<p class="text-sm font-semibold text-text-heading">{{ testimonials[current].name }}</p>
<p class="text-xs text-text-muted">{{ testimonials[current].role }}</p>
</div>
</div>
</div>
</TransitionGroup>
</div>
<div class="flex items-center justify-center gap-4 mt-6">
<button
class="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center hover:border-primary/30 hover:bg-primary/5 transition-colors duration-200 cursor-pointer"
@click="prev"
aria-label="上一条"
>
<ChevronLeft class="w-5 h-5 text-text-body" />
</button>
<div class="flex gap-2">
<div
v-for="(_, i) in testimonials"
:key="i"
class="w-2 h-2 rounded-full transition-colors duration-300 cursor-pointer"
:class="i === current ? 'bg-primary' : 'bg-gray-300'"
@click="current = i"
/>
</div>
<button
class="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center hover:border-primary/30 hover:bg-primary/5 transition-colors duration-200 cursor-pointer"
@click="next"
aria-label="下一条"
>
<ChevronRight class="w-5 h-5 text-text-body" />
</button>
</div>
</div>
</div>
</section>
</template>

142
src/components/new/illustrations/DashboardMockup.vue Normal file
View File

@ -0,0 +1,142 @@
<template>
<svg viewBox="0 0 600 400" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto drop-shadow-2xl">
<defs>
<linearGradient id="dm-frame" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#1E1B4B" />
<stop offset="100%" stop-color="#312E81" />
</linearGradient>
<linearGradient id="dm-bar" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#22C55E" />
<stop offset="100%" stop-color="#4ADE80" />
</linearGradient>
<linearGradient id="dm-chart" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#4F46E5" />
<stop offset="100%" stop-color="#818CF8" />
</linearGradient>
<clipPath id="dm-screen-clip">
<rect x="60" y="20" width="480" height="290" rx="4" />
</clipPath>
</defs>
<!-- Laptop lid -->
<rect x="40" y="8" width="520" height="310" rx="16" fill="url(#dm-frame)" />
<rect x="50" y="16" width="500" height="294" rx="8" fill="#0F0D2E" />
<!-- Screen -->
<rect x="60" y="20" width="480" height="286" rx="4" fill="#F8FAFC" />
<!-- Camera -->
<circle cx="300" cy="12" r="3" fill="#312E81" />
<!-- Laptop base -->
<path d="M20 318 L580 318 L600 345 Q600 360 585 360 L15 360 Q0 360 0 345 Z" fill="url(#dm-frame)" />
<rect x="250" y="323" width="100" height="6" rx="3" fill="#312E81" />
<ellipse cx="300" cy="368" rx="80" ry="6" fill="#1E1B4B" opacity="0.2" />
<!-- Screen content -->
<g clip-path="url(#dm-screen-clip)">
<!-- Sidebar -->
<rect x="60" y="20" width="110" height="290" fill="white" />
<line x1="170" y1="20" x2="170" y2="310" stroke="#E2E8F0" stroke-width="1" />
<!-- Logo in sidebar -->
<circle cx="95" cy="48" r="14" fill="#4F46E5" />
<text x="95" y="53" text-anchor="middle" font-size="12" font-weight="bold" fill="white">灵</text>
<text x="120" y="48" font-size="8" font-weight="bold" fill="#1E1B4B">灵犀学</text>
<text x="120" y="58" font-size="6" fill="#64748B">管理控制台</text>
<!-- Sidebar menu items -->
<rect x="68" y="80" width="94" height="24" rx="6" fill="#EEF2FF" />
<rect x="76" y="87" width="8" height="8" rx="2" fill="#4F46E5" />
<text x="90" y="95" font-size="8" fill="#4F46E5" font-weight="600">数据看板</text>
<rect x="76" y="117" width="8" height="8" rx="2" fill="#CBD5E1" />
<text x="90" y="125" font-size="8" fill="#64748B">任务管理</text>
<rect x="76" y="142" width="8" height="8" rx="2" fill="#CBD5E1" />
<text x="90" y="150" font-size="8" fill="#64748B">资源中心</text>
<rect x="76" y="167" width="8" height="8" rx="2" fill="#CBD5E1" />
<text x="90" y="175" font-size="8" fill="#64748B">智能处理</text>
<rect x="76" y="192" width="8" height="8" rx="2" fill="#CBD5E1" />
<text x="90" y="200" font-size="8" fill="#64748B">数据分析</text>
<rect x="76" y="217" width="8" height="8" rx="2" fill="#CBD5E1" />
<text x="90" y="225" font-size="8" fill="#64748B">团队管理</text>
<!-- Main content area -->
<!-- Header -->
<text x="186" y="44" font-size="12" font-weight="bold" fill="#1E1B4B">运营数据总览</text>
<rect x="460" y="30" width="68" height="22" rx="6" fill="#4F46E5" />
<text x="494" y="45" text-anchor="middle" font-size="8" font-weight="600" fill="white">导出报告</text>
<!-- Stats row -->
<rect x="182" y="58" width="84" height="52" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1" />
<text x="194" y="76" font-size="7" fill="#64748B">处理总量</text>
<text x="194" y="96" font-size="16" font-weight="bold" fill="#1E1B4B">5,847</text>
<text x="250" y="96" font-size="7" fill="#22C55E" font-weight="600">↑12%</text>
<rect x="274" y="58" width="84" height="52" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1" />
<text x="286" y="76" font-size="7" fill="#64748B">准确率</text>
<text x="286" y="96" font-size="16" font-weight="bold" fill="#22C55E">96.8%</text>
<rect x="366" y="58" width="84" height="52" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1" />
<text x="378" y="76" font-size="7" fill="#64748B">节省时间</text>
<text x="378" y="96" font-size="16" font-weight="bold" fill="#4F46E5">482h</text>
<rect x="458" y="58" width="72" height="52" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1" />
<text x="468" y="76" font-size="7" fill="#64748B">响应时间</text>
<text x="468" y="96" font-size="16" font-weight="bold" fill="#F59E0B">2.1s</text>
<!-- Chart area -->
<rect x="182" y="120" width="190" height="130" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1" />
<text x="196" y="140" font-size="8" font-weight="bold" fill="#1E1B4B">本周处理趋势</text>
<!-- Bar chart -->
<rect x="200" y="210" width="20" height="28" rx="3" fill="url(#dm-chart)" opacity="0.6" />
<rect x="226" y="195" width="20" height="43" rx="3" fill="url(#dm-chart)" opacity="0.7" />
<rect x="252" y="180" width="20" height="58" rx="3" fill="url(#dm-chart)" opacity="0.8" />
<rect x="278" y="170" width="20" height="68" rx="3" fill="url(#dm-chart)" opacity="0.9" />
<rect x="304" y="160" width="20" height="78" rx="3" fill="url(#dm-chart)" />
<rect x="330" y="175" width="20" height="63" rx="3" fill="url(#dm-chart)" opacity="0.85" />
<text x="210" y="244" text-anchor="middle" font-size="6" fill="#94A3B8">周一</text>
<text x="236" y="244" text-anchor="middle" font-size="6" fill="#94A3B8">周二</text>
<text x="262" y="244" text-anchor="middle" font-size="6" fill="#94A3B8">周三</text>
<text x="288" y="244" text-anchor="middle" font-size="6" fill="#94A3B8">周四</text>
<text x="314" y="244" text-anchor="middle" font-size="6" fill="#94A3B8">周五</text>
<text x="340" y="244" text-anchor="middle" font-size="6" fill="#94A3B8">周六</text>
<!-- Donut chart area -->
<rect x="380" y="120" width="148" height="130" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1" />
<text x="394" y="140" font-size="8" font-weight="bold" fill="#1E1B4B">分类分布</text>
<!-- Donut chart -->
<circle cx="430" cy="195" r="32" fill="none" stroke="#EEF2FF" stroke-width="10" />
<circle cx="430" cy="195" r="32" fill="none" stroke="#4F46E5" stroke-width="10" stroke-dasharray="80 120" stroke-dashoffset="0" stroke-linecap="round" />
<circle cx="430" cy="195" r="32" fill="none" stroke="#22C55E" stroke-width="10" stroke-dasharray="50 150" stroke-dashoffset="-80" stroke-linecap="round" />
<circle cx="430" cy="195" r="32" fill="none" stroke="#F59E0B" stroke-width="10" stroke-dasharray="35 165" stroke-dashoffset="-130" stroke-linecap="round" />
<text x="430" y="193" text-anchor="middle" font-size="10" font-weight="bold" fill="#1E1B4B">5,847</text>
<text x="430" y="203" text-anchor="middle" font-size="6" fill="#64748B">总处理</text>
<!-- Legend -->
<circle cx="483" cy="170" r="3" fill="#4F46E5" />
<text x="490" y="173" font-size="6" fill="#64748B">类型 A 40%</text>
<circle cx="483" cy="186" r="3" fill="#22C55E" />
<text x="490" y="189" font-size="6" fill="#64748B">类型 B 25%</text>
<circle cx="483" cy="202" r="3" fill="#F59E0B" />
<text x="490" y="205" font-size="6" fill="#64748B">类型 C 18%</text>
<circle cx="483" cy="218" r="3" fill="#E2E8F0" />
<text x="490" y="221" font-size="6" fill="#64748B">其他 17%</text>
<!-- Recent tasks -->
<rect x="182" y="260" width="346" height="44" rx="8" fill="white" stroke="#E2E8F0" stroke-width="1" />
<circle cx="202" cy="282" r="10" fill="#DCFCE7" />
<text x="202" y="286" text-anchor="middle" font-size="10" fill="#22C55E">✓</text>
<text x="220" y="278" font-size="8" font-weight="600" fill="#1E1B4B">A 组 · 内容处理批次</text>
<text x="220" y="292" font-size="6" fill="#64748B">42/42 已完成 · 准确率 97.2%</text>
<rect x="440" y="273" width="52" height="18" rx="9" fill="#DCFCE7" />
<text x="466" y="286" text-anchor="middle" font-size="7" font-weight="600" fill="#22C55E">已完成</text>
</g>
</svg>
</template>

156
src/components/new/illustrations/HeroIllustrationNew.vue Normal file
View File

@ -0,0 +1,156 @@
<template>
<svg viewBox="0 0 500 480" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto">
<defs>
<linearGradient id="hn-grad1" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#4F46E5" />
<stop offset="100%" stop-color="#818CF8" />
</linearGradient>
<linearGradient id="hn-grad2" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#22C55E" />
<stop offset="100%" stop-color="#4ADE80" />
</linearGradient>
<linearGradient id="hn-grad3" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#F59E0B" />
<stop offset="100%" stop-color="#FBBF24" />
</linearGradient>
<linearGradient id="hn-screen" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#EEF2FF" />
<stop offset="100%" stop-color="#F8FAFC" />
</linearGradient>
<filter id="hn-shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#4F46E5" flood-opacity="0.15" />
</filter>
</defs>
<!-- Central device (tablet/phone) -->
<g class="animate-device" filter="url(#hn-shadow)">
<rect x="130" y="100" width="240" height="320" rx="20" fill="#1E1B4B" />
<rect x="140" y="115" width="220" height="280" rx="10" fill="url(#hn-screen)" />
<circle cx="250" cy="108" r="3" fill="#312E81" />
<!-- Screen content: mini dashboard -->
<rect x="155" y="130" width="90" height="40" rx="8" fill="white" />
<rect x="163" y="140" width="30" height="6" rx="3" fill="#4F46E5" opacity="0.3" />
<rect x="163" y="152" width="50" height="8" rx="3" fill="#4F46E5" />
<rect x="255" y="130" width="90" height="40" rx="8" fill="white" />
<rect x="263" y="140" width="30" height="6" rx="3" fill="#22C55E" opacity="0.3" />
<rect x="263" y="152" width="45" height="8" rx="3" fill="#22C55E" />
<!-- Mini chart bars -->
<rect x="155" y="180" width="190" height="80" rx="8" fill="white" />
<rect x="170" y="232" width="18" height="18" rx="3" fill="url(#hn-grad1)" opacity="0.5" />
<rect x="196" y="222" width="18" height="28" rx="3" fill="url(#hn-grad1)" opacity="0.65" />
<rect x="222" y="212" width="18" height="38" rx="3" fill="url(#hn-grad1)" opacity="0.8" />
<rect x="248" y="205" width="18" height="45" rx="3" fill="url(#hn-grad1)" />
<rect x="274" y="215" width="18" height="35" rx="3" fill="url(#hn-grad1)" opacity="0.7" />
<rect x="300" y="225" width="18" height="25" rx="3" fill="url(#hn-grad1)" opacity="0.55" />
<!-- Mini list items -->
<rect x="155" y="270" width="190" height="24" rx="6" fill="white" />
<circle cx="170" cy="282" r="5" fill="#DCFCE7" />
<rect x="182" y="278" width="60" height="5" rx="2" fill="#334155" opacity="0.3" />
<rect x="320" y="278" width="16" height="5" rx="2" fill="#22C55E" />
<rect x="155" y="300" width="190" height="24" rx="6" fill="white" />
<circle cx="170" cy="312" r="5" fill="#EEF2FF" />
<rect x="182" y="308" width="50" height="5" rx="2" fill="#334155" opacity="0.3" />
<rect x="320" y="308" width="16" height="5" rx="2" fill="#818CF8" />
<rect x="155" y="330" width="190" height="24" rx="6" fill="white" />
<circle cx="170" cy="342" r="5" fill="#FEF3C7" />
<rect x="182" y="338" width="55" height="5" rx="2" fill="#334155" opacity="0.3" />
<rect x="320" y="338" width="16" height="5" rx="2" fill="#F59E0B" />
<!-- Home indicator -->
<rect x="220" y="400" width="60" height="4" rx="2" fill="#312E81" />
</g>
<!-- Floating card: top right -->
<g class="animate-card1" filter="url(#hn-shadow)">
<rect x="380" y="80" width="110" height="60" rx="14" fill="white" />
<circle cx="400" cy="105" r="12" fill="#EEF2FF" />
<rect x="392" y="101" width="16" height="8" rx="2" fill="url(#hn-grad1)" />
<rect x="420" y="97" width="55" height="5" rx="2" fill="#334155" opacity="0.4" />
<rect x="420" y="108" width="40" height="5" rx="2" fill="#4F46E5" opacity="0.6" />
</g>
<!-- Floating card: left side -->
<g class="animate-card2" filter="url(#hn-shadow)">
<rect x="10" y="200" width="110" height="60" rx="14" fill="white" />
<circle cx="30" cy="225" r="12" fill="#DCFCE7" />
<rect x="22" y="221" width="16" height="8" rx="2" fill="url(#hn-grad2)" />
<rect x="50" y="217" width="55" height="5" rx="2" fill="#334155" opacity="0.4" />
<rect x="50" y="228" width="40" height="5" rx="2" fill="#22C55E" opacity="0.6" />
</g>
<!-- Floating badge: bottom right -->
<g class="animate-card3">
<circle cx="420" cy="350" r="28" fill="url(#hn-grad3)" opacity="0.15" />
<circle cx="420" cy="350" r="18" fill="url(#hn-grad3)" />
<text x="420" y="355" text-anchor="middle" font-size="14" font-weight="bold" fill="white">★</text>
</g>
<!-- Decorative hexagons -->
<g class="animate-hex1" opacity="0.15">
<polygon points="70,80 90,70 110,80 110,100 90,110 70,100" fill="none" stroke="#4F46E5" stroke-width="1.5" />
</g>
<g class="animate-hex2" opacity="0.12">
<polygon points="400,250 415,242 430,250 430,266 415,274 400,266" fill="none" stroke="#22C55E" stroke-width="1.5" />
</g>
<!-- Floating dots / nodes network -->
<circle cx="60" cy="160" r="4" fill="#818CF8" opacity="0.4" class="animate-dot1" />
<circle cx="440" cy="180" r="3" fill="#22C55E" opacity="0.3" class="animate-dot2" />
<circle cx="50" cy="350" r="3.5" fill="#F59E0B" opacity="0.35" class="animate-dot3" />
<circle cx="460" cy="420" r="3" fill="#818CF8" opacity="0.3" class="animate-dot1" />
<circle cx="80" cy="440" r="2.5" fill="#22C55E" opacity="0.25" class="animate-dot2" />
<!-- Connection lines -->
<line x1="60" y1="160" x2="130" y2="200" stroke="#818CF8" stroke-width="0.8" opacity="0.15" class="animate-line1" />
<line x1="370" y1="200" x2="440" y2="180" stroke="#22C55E" stroke-width="0.8" opacity="0.15" class="animate-line2" />
<line x1="370" y1="350" x2="420" y2="350" stroke="#F59E0B" stroke-width="0.8" opacity="0.15" class="animate-line1" />
<!-- Abstract ring -->
<circle cx="460" cy="100" r="20" fill="none" stroke="#818CF8" stroke-width="1" opacity="0.1" class="animate-ring" />
<circle cx="460" cy="100" r="12" fill="none" stroke="#818CF8" stroke-width="1.5" opacity="0.15" class="animate-ring" />
<!-- Small plus signs -->
<g opacity="0.2" class="animate-dot3">
<line x1="30" y1="120" x2="30" y2="132" stroke="#4F46E5" stroke-width="1.5" stroke-linecap="round" />
<line x1="24" y1="126" x2="36" y2="126" stroke="#4F46E5" stroke-width="1.5" stroke-linecap="round" />
</g>
<g opacity="0.15" class="animate-dot1">
<line x1="470" y1="300" x2="470" y2="312" stroke="#22C55E" stroke-width="1.5" stroke-linecap="round" />
<line x1="464" y1="306" x2="476" y2="306" stroke="#22C55E" stroke-width="1.5" stroke-linecap="round" />
</g>
</svg>
</template>
<style scoped>
@keyframes device-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes card1-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes card2-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes card3-float { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-10px) scale(1.05)} }
@keyframes hex1-rotate { 0%,100%{transform:rotate(0)} 50%{transform:rotate(15deg)} }
@keyframes hex2-rotate { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-10deg)} }
@keyframes dot-drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(5px,-8px)} }
@keyframes dot-drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-6px,5px)} }
@keyframes dot-drift3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(4px,7px)} }
@keyframes line-pulse1 { 0%,100%{opacity:.15} 50%{opacity:.3} }
@keyframes line-pulse2 { 0%,100%{opacity:.15} 50%{opacity:.25} }
@keyframes ring-pulse { 0%,100%{transform:scale(1);opacity:.1} 50%{transform:scale(1.1);opacity:.2} }
.animate-device { animation: device-float 6s ease-in-out infinite; }
.animate-card1 { animation: card1-float 5s ease-in-out infinite 0.5s; }
.animate-card2 { animation: card2-float 4.5s ease-in-out infinite 1s; }
.animate-card3 { animation: card3-float 5.5s ease-in-out infinite 0.8s; }
.animate-hex1 { animation: hex1-rotate 8s ease-in-out infinite; transform-origin: 90px 90px; }
.animate-hex2 { animation: hex2-rotate 7s ease-in-out infinite 1s; transform-origin: 415px 258px; }
.animate-dot1 { animation: dot-drift1 6s ease-in-out infinite; }
.animate-dot2 { animation: dot-drift2 5s ease-in-out infinite 1s; }
.animate-dot3 { animation: dot-drift3 7s ease-in-out infinite 0.5s; }
.animate-line1 { animation: line-pulse1 4s ease-in-out infinite; }
.animate-line2 { animation: line-pulse2 5s ease-in-out infinite 1s; }
.animate-ring { animation: ring-pulse 4s ease-in-out infinite; transform-origin: 460px 100px; }
</style>

5
src/main.ts
View File

@ -3,6 +3,11 @@ import App from './App.vue'
import router from './router'
import './style.css'
// 由路由统一控制滚动，避免浏览器 scroll restoration 与 SPA 抢滚动
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual'
}
const app = createApp(App)
app.use(router)
app.mount('#app')

13
src/router/index.ts
View File

@ -6,12 +6,21 @@ const router = createRouter({
{
path: '/',
name: 'Home',
component: () => import('@/views/HomeViewNew.vue'),
},
{
path: '/legacy',
name: 'HomeLegacy',
component: () => import('@/views/HomeView.vue'),
},
],
scrollBehavior(_to, _from, savedPosition) {
scrollBehavior(to, _from, savedPosition) {
if (savedPosition) return savedPosition
return { top: 0, behavior: 'smooth' }
if (to.hash) {
return { el: to.hash, behavior: 'smooth', top: 80 }
}
// 用 instant 避免与浏览器默认行为、异步挂载 DOM 抢滚动，出现「先顶再被拉到锚点/底部」
return { top: 0, left: 0, behavior: 'auto' }
},
})

2
src/style.css
View File

@ -16,7 +16,7 @@
}
html {
scroll-behavior: smooth;
/* scroll-behavior 由 JS 按需控制，全局 smooth 会导致刷新后滚回顶部被拦截 */
}
body {

29
src/views/HomeViewNew.vue Normal file
View File

@ -0,0 +1,29 @@
<script setup lang="ts">
import NavBarNew from '@/components/new/NavBarNew.vue'
import HeroSectionNew from '@/components/new/HeroSectionNew.vue'
import FeaturesSectionNew from '@/components/new/FeaturesSectionNew.vue'
import AppSectionNew from '@/components/new/AppSectionNew.vue'
import AdminSectionNew from '@/components/new/AdminSectionNew.vue'
import TechSectionNew from '@/components/new/TechSectionNew.vue'
import StatsSectionNew from '@/components/new/StatsSectionNew.vue'
import TestimonialSectionNew from '@/components/new/TestimonialSectionNew.vue'
import CtaSectionNew from '@/components/new/CtaSectionNew.vue'
import FooterSectionNew from '@/components/new/FooterSectionNew.vue'
</script>
<template>
<div class="min-h-screen bg-white">
<NavBarNew />
<main>
<HeroSectionNew />
<FeaturesSectionNew />
<AppSectionNew />
<AdminSectionNew />
<TechSectionNew />
<StatsSectionNew />
<TestimonialSectionNew />
<CtaSectionNew />
</main>
<FooterSectionNew />
</div>
</template>