319 lines
16 KiB
Vue
319 lines
16 KiB
Vue
<template>
|
||
<div class="page">
|
||
<!-- Hero -->
|
||
<section class="relative overflow-hidden bg-gradient-to-br from-blue-900 via-indigo-800 to-blue-900 text-white">
|
||
<!-- 背景装饰 -->
|
||
<div class="absolute inset-0 overflow-hidden">
|
||
<div class="absolute -top-1/2 -right-1/4 w-[800px] h-[800px] rounded-full bg-blue-500/20 blur-3xl"></div>
|
||
<div class="absolute -bottom-1/2 -left-1/4 w-[600px] h-[600px] rounded-full bg-indigo-500/20 blur-3xl"></div>
|
||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1000px] h-[1000px] rounded-full bg-cyan-500/10 blur-3xl"></div>
|
||
<!-- 网格线 -->
|
||
<div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:60px_60px]"></div>
|
||
<!-- 浮动光点 -->
|
||
<div class="absolute top-20 left-20 w-2 h-2 rounded-full bg-white/40 animate-pulse"></div>
|
||
<div class="absolute top-40 right-40 w-3 h-3 rounded-full bg-blue-300/30 animate-pulse" style="animation-delay: 0.5s"></div>
|
||
<div class="absolute bottom-32 left-1/3 w-2 h-2 rounded-full bg-cyan-300/40 animate-pulse" style="animation-delay: 1s"></div>
|
||
<div class="absolute top-1/3 right-1/4 w-1.5 h-1.5 rounded-full bg-white/30 animate-pulse" style="animation-delay: 1.5s"></div>
|
||
</div>
|
||
<div class="relative mx-auto max-w-screen-xl px-4 py-20 md:py-28">
|
||
<div class="grid items-center gap-10 md:grid-cols-2">
|
||
<div>
|
||
<div class="mb-4 flex flex-wrap gap-2">
|
||
<a-tag color="blue" class="text-white border-white/30 bg-white/20">AI 驱动</a-tag>
|
||
<a-tag color="cyan" class="border-cyan-300/50 bg-cyan-400/20 text-cyan-100">🏠 企业一站式管理</a-tag>
|
||
</div>
|
||
<h1 class="mb-4 text-3xl font-bold md:text-5xl">
|
||
葳管家
|
||
</h1>
|
||
<p class="mb-6 text-lg text-white/90">
|
||
集服务器管理、项目协作、审批、考勤、文档于一体的企业一站式管理平台。AI 智能运维、自动告警、任务协同，让企业日常管理更轻松、更高效。
|
||
</p>
|
||
<div class="flex flex-wrap gap-3">
|
||
<a-button type="primary" size="large" class="bg-white text-blue-700 border-white hover:bg-white/90" @click="navigateTo('/console')">免费使用</a-button>
|
||
<a-button ghost size="large" class="border-white text-white hover:bg-white/10" @click="navigateTo('/contact')">预约演示</a-button>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧：审批流程示意 -->
|
||
<div class="relative">
|
||
<div class="rounded-2xl border border-white/20 bg-white/10 p-6 backdrop-blur">
|
||
<div class="mb-3 text-sm text-white/60 font-medium">📋 待处理审批</div>
|
||
<div v-for="item in heroApprovals" :key="item.title"
|
||
class="mb-3 flex items-center gap-3 rounded-xl bg-white/10 px-4 py-3 last:mb-0">
|
||
<span class="text-xl">{{ item.emoji }}</span>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="text-sm font-medium truncate">{{ item.title }}</div>
|
||
<div class="text-xs text-white/50">{{ item.from }} · {{ item.time }}</div>
|
||
</div>
|
||
<a-tag :color="item.color" class="text-xs flex-shrink-0">{{ item.status }}</a-tag>
|
||
</div>
|
||
<div class="mt-4 rounded-xl bg-blue-500/30 px-4 py-3 flex items-center gap-2">
|
||
<span class="text-xl">🤖</span>
|
||
<span class="text-sm text-white/90">AI 已帮您整理今日 3 条待办，优先处理报销审批</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 数据亮点 -->
|
||
<section class="bg-white py-10 border-b border-gray-100">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="grid grid-cols-2 gap-6 md:grid-cols-4">
|
||
<div v-for="stat in stats" :key="stat.label" class="text-center">
|
||
<div class="text-3xl font-bold text-blue-600 md:text-4xl">{{ stat.value }}</div>
|
||
<div class="mt-1 text-sm text-gray-500">{{ stat.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 核心模块 -->
|
||
<section class="py-16 md:py-24">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="mb-12 text-center">
|
||
<h2 class="mb-3 text-2xl font-bold md:text-3xl">核心功能模块</h2>
|
||
<p class="text-slate-500">覆盖企业日常运营全场景，开箱即用</p>
|
||
</div>
|
||
<div class="grid gap-6 md:grid-cols-3">
|
||
<a-card v-for="f in coreModules" :key="f.title" class="h-full hover:shadow-lg transition-shadow group">
|
||
<div class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 text-2xl group-hover:bg-blue-100 transition-colors">
|
||
{{ f.emoji }}
|
||
</div>
|
||
<h3 class="mb-2 text-lg font-semibold">{{ f.title }}</h3>
|
||
<p class="mb-4 text-slate-500 text-sm leading-relaxed">{{ f.desc }}</p>
|
||
<div class="flex flex-wrap gap-1.5">
|
||
<span v-for="tag in f.tags" :key="tag"
|
||
class="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs text-blue-600">{{ tag }}</span>
|
||
</div>
|
||
</a-card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- AI 智能化亮点 -->
|
||
<section class="bg-gradient-to-br from-blue-50 via-indigo-50 to-white py-16 md:py-24 overflow-hidden">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="grid items-center gap-12 md:grid-cols-2">
|
||
<!-- 左侧文字 -->
|
||
<div>
|
||
<div class="mb-3 flex items-center gap-2">
|
||
<span class="text-4xl">🤖</span>
|
||
<a-tag color="blue" class="text-sm font-medium">AI 深度集成</a-tag>
|
||
</div>
|
||
<h2 class="mb-4 text-2xl font-bold md:text-3xl">
|
||
不只是管理工具<br/>更是你的智能工作助理
|
||
</h2>
|
||
<p class="mb-4 text-slate-600 leading-relaxed">
|
||
系统内置 AI 大模型能力，覆盖从会议记录到报告生成的全流程，让 AI 承担繁琐的重复工作，让员工专注于真正有价值的事。
|
||
</p>
|
||
<p class="mb-6 text-slate-600 leading-relaxed">
|
||
支持接入 GPT-4、Claude、DeepSeek 等主流大模型，也可对接企业私有化模型，<strong class="text-blue-600">数据不出企业，安全完全可控</strong>。
|
||
</p>
|
||
<div class="flex flex-wrap gap-3">
|
||
<div v-for="tag in aiTags" :key="tag"
|
||
class="rounded-full bg-blue-100 px-4 py-1.5 text-sm font-medium text-blue-700">
|
||
{{ tag }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧特性卡片 -->
|
||
<div class="grid gap-4 grid-cols-2">
|
||
<div v-for="item in aiFeatures" :key="item.title"
|
||
class="rounded-2xl border border-blue-100 bg-white p-5 shadow-sm hover:shadow-md transition-shadow">
|
||
<div class="mb-3 text-2xl">{{ item.emoji }}</div>
|
||
<h4 class="mb-1 font-semibold text-slate-800">{{ item.title }}</h4>
|
||
<p class="text-xs text-slate-500 leading-relaxed">{{ item.desc }}</p>
|
||
</div>
|
||
<!-- 底部 banner -->
|
||
<div class="col-span-2 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 p-5 text-white flex items-center justify-between">
|
||
<div>
|
||
<div class="font-bold text-lg">接入企业专属 AI 大模型</div>
|
||
<div class="text-sm text-white/80 mt-1">私有化部署，数据安全，完全可控</div>
|
||
</div>
|
||
<span class="text-4xl">🔐</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 应用场景 -->
|
||
<section class="py-16 md:py-24">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="mb-12 text-center">
|
||
<h2 class="mb-3 text-2xl font-bold md:text-3xl">适用场景</h2>
|
||
<p class="text-slate-500">各类型企业团队的协同效率解决方案</p>
|
||
</div>
|
||
<div class="grid gap-6 md:grid-cols-4">
|
||
<div v-for="s in scenarios" :key="s.title" class="rounded-xl bg-white border border-gray-100 p-6 shadow-sm hover:shadow-md hover:border-blue-200 transition-all">
|
||
<div class="mb-4 text-3xl">{{ s.emoji }}</div>
|
||
<h3 class="mb-2 font-semibold">{{ s.title }}</h3>
|
||
<p class="text-sm text-slate-500 leading-relaxed">{{ s.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 套餐 -->
|
||
<section class="bg-slate-50 py-16 md:py-24">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="mb-12 text-center">
|
||
<h2 class="mb-3 text-2xl font-bold md:text-3xl">套餐与价格</h2>
|
||
<p class="text-slate-500">按人数计费，按需选择，随时升级</p>
|
||
</div>
|
||
<div class="grid gap-6 md:grid-cols-3">
|
||
<a-card v-for="p in plans" :key="p.name" class="relative h-full">
|
||
<div v-if="p.recommended" class="absolute -top-3 left-1/2 -translate-x-1/2">
|
||
<a-tag color="blue">推荐</a-tag>
|
||
</div>
|
||
<div class="mb-4 text-center">
|
||
<h3 class="text-lg font-semibold">{{ p.name }}</h3>
|
||
<div class="mt-2 text-3xl font-bold text-blue-600">{{ p.price }}</div>
|
||
<div class="text-sm text-slate-400">{{ p.period }}</div>
|
||
</div>
|
||
<a-divider />
|
||
<ul class="space-y-3">
|
||
<li v-for="feat in p.features" :key="feat" class="flex items-start gap-2">
|
||
<CheckOutlined class="mt-0.5 text-green-500 flex-shrink-0" />
|
||
<span class="text-sm text-slate-600">{{ feat }}</span>
|
||
</li>
|
||
</ul>
|
||
<a-button :type="p.recommended ? 'primary' : 'default'" block class="mt-6" @click="navigateTo('/contact')">
|
||
立即咨询
|
||
</a-button>
|
||
</a-card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="bg-gradient-to-r from-blue-600 to-indigo-600 py-16 text-white">
|
||
<div class="mx-auto max-w-screen-xl px-4 text-center">
|
||
<h2 class="mb-4 text-2xl font-bold md:text-3xl">准备好提升团队效率了吗？</h2>
|
||
<p class="mb-6 text-white/90">现在联系我们，获取专属方案和 14 天免费试用账号</p>
|
||
<div class="flex justify-center gap-3">
|
||
<a-button type="primary" size="large" ghost @click="navigateTo('/contact')">预约演示</a-button>
|
||
<a-button size="large" class="bg-white text-blue-700 border-white hover:bg-white/90" @click="navigateTo('/contact')">立即咨询</a-button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { CheckOutlined } from '@ant-design/icons-vue'
|
||
|
||
useHead({ title: '葳管家 - 企业一站式管理平台 · 葳溯科技' })
|
||
definePageMeta({ layout: 'default' })
|
||
|
||
// Hero 审批示意数据
|
||
const heroApprovals = [
|
||
{ emoji: '💰', title: '差旅费报销申请 ¥3,200', from: '张三', time: '10分钟前', status: '待审批', color: 'orange' },
|
||
{ emoji: '📅', title: '年假申请 3天', from: '李四', time: '1小时前', status: '审批中', color: 'blue' },
|
||
{ emoji: '📦', title: '办公设备采购申请', from: '王五', time: '昨天', status: '已通过', color: 'green' },
|
||
]
|
||
|
||
// 数据亮点
|
||
const stats = [
|
||
{ value: '80%', label: '审批效率提升' },
|
||
{ value: '3x', label: '团队协作速度' },
|
||
{ value: '60%', label: '会议时长缩短' },
|
||
{ value: '99.9%', label: '系统可用率' },
|
||
]
|
||
|
||
// AI 标签
|
||
const aiTags = ['AI 会议纪要', '智能周报', '自动任务拆解', '语义搜索', '流程自动化']
|
||
|
||
// AI 特性
|
||
const aiFeatures = [
|
||
{ emoji: '🎙️', title: 'AI 会议助理', desc: '自动录音转写，提炼决议和待办事项，会后即时同步给全员' },
|
||
{ emoji: '📝', title: 'AI 周报生成', desc: '根据本周任务完成情况，一键生成图文并茂的个人周报' },
|
||
{ emoji: '🔍', title: '智能语义搜索', desc: '全局跨模块搜索，理解意图而非仅匹配关键词' },
|
||
{ emoji: '⚡', title: '流程自动化', desc: '条件触发自动执行，申请提交→通知→审批→归档一键完成' },
|
||
]
|
||
|
||
// 核心模块
|
||
const coreModules = [
|
||
{
|
||
emoji: '🖥️',
|
||
title: '服务器管理',
|
||
desc: '统一纳管企业服务器与云主机，实时监控 CPU/内存/磁盘，AI 自动巡检告警，一键远程运维，再也不担心半夜宕机。',
|
||
tags: ['实时监控', 'AI 告警', '远程运维', '多云接入'],
|
||
},
|
||
{
|
||
emoji: '📋',
|
||
title: '项目管理',
|
||
desc: '看板 / 甘特 / 列表三视图自由切换。AI 智能拆解目标、预测工期风险、自动分配任务给合适成员。',
|
||
tags: ['看板视图', '甘特图', 'AI 拆解', '里程碑'],
|
||
},
|
||
{
|
||
emoji: '✅',
|
||
title: '智能审批流',
|
||
desc: '可视化流程设计器，支持条件分支、多级审批、代理审批。AI 自动识别异常单据并高亮提醒，一键查看审批历史。',
|
||
tags: ['多级审批', '条件分支', '移动端', 'AI 风控'],
|
||
},
|
||
{
|
||
emoji: '⏰',
|
||
title: '考勤打卡',
|
||
desc: '支持 GPS 定位、Wi-Fi 围栏、人脸识别多种打卡方式。自动生成月度考勤报表，异常记录一目了然。',
|
||
tags: ['GPS 定位', 'Wi-Fi 围栏', '人脸识别', '报表导出'],
|
||
},
|
||
{
|
||
emoji: '📁',
|
||
title: '云端文档协作',
|
||
desc: '多人实时共编，支持富文本、表格、思维导图。AI 一键生成摘要、会议纪要、周报，历史版本随时回溯。',
|
||
tags: ['实时协作', 'AI 摘要', '版本管理', '权限控制'],
|
||
},
|
||
{
|
||
emoji: '📊',
|
||
title: '数据报表中心',
|
||
desc: '拖拽搭建自定义仪表盘，关键经营指标实时可视化。支持 AI 问答式数据分析，用自然语言查询业务数据。',
|
||
tags: ['自定义看板', 'AI 问答', '实时数据', '多维分析'],
|
||
},
|
||
]
|
||
|
||
// 应用场景
|
||
const scenarios = [
|
||
{ emoji: '🏢', title: '中小企业', desc: '快速部署，低成本实现数字化办公，告别 Excel + 微信群的混乱管理' },
|
||
{ emoji: '🏭', title: '制造业', desc: '生产排班、设备报修、质量追溯、供应链协同全流程数字化' },
|
||
{ emoji: '🏥', title: '医疗机构', desc: '人员排班、科室协作、物资申请，合规审批留痕，满足监管要求' },
|
||
{ emoji: '🏫', title: '教育机构', desc: '教职工考勤、学生管理、课程排期、家校沟通一体化' },
|
||
{ emoji: '🛒', title: '零售连锁', desc: '门店考勤、货品盘点、促销审批、区域协同统一管控' },
|
||
{ emoji: '💼', title: '咨询服务', desc: '项目进度追踪、客户文档协作、工时统计、账单管理' },
|
||
{ emoji: '🏗️', title: '工程建筑', desc: '现场打卡定位、施工日志、材料采购审批、安全巡检记录' },
|
||
{ emoji: '🚀', title: '互联网团队', desc: '敏捷开发看板、跨部门协同、OKR 追踪、研发效能数据分析' },
|
||
]
|
||
|
||
// 套餐
|
||
const plans = [
|
||
{
|
||
name: '基础版',
|
||
price: '¥0',
|
||
period: '永久免费',
|
||
recommended: false,
|
||
features: ['10 人以内团队', '核心审批 & 考勤', '5GB 云端存储', '基础任务管理', '社区技术支持'],
|
||
},
|
||
{
|
||
name: '专业版',
|
||
price: '¥599',
|
||
period: '/月（50人）',
|
||
recommended: true,
|
||
features: ['50 人团队', '全模块功能解锁', '50GB 云端存储', 'AI 会议纪要 & 周报', 'API 集成接口', '专属客服支持'],
|
||
},
|
||
{
|
||
name: '企业版',
|
||
price: '¥2,999',
|
||
period: '/月（无限人数）',
|
||
recommended: false,
|
||
features: ['无限人数', '私有化部署可选', '无限存储空间', '企业专属 AI 模型接入', 'SLA 99.9% 保障', '专属客户成功经理'],
|
||
},
|
||
]
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page {
|
||
min-height: 100vh;
|
||
}
|
||
</style>
|