333 lines
14 KiB
Vue
333 lines
14 KiB
Vue
<template>
|
||
<div class="page">
|
||
<!-- Hero -->
|
||
<section class="relative overflow-hidden bg-gradient-to-br from-gray-950 via-slate-900 to-blue-950 text-white">
|
||
<!-- 背景装饰 -->
|
||
<div class="absolute inset-0 overflow-hidden">
|
||
<div class="absolute -top-1/2 left-1/2 -translate-x-1/2 w-[800px] h-[400px] rounded-full bg-blue-500/20 blur-3xl"></div>
|
||
<div class="absolute -bottom-1/3 -right-1/4 w-[600px] h-[600px] rounded-full bg-indigo-500/15 blur-3xl"></div>
|
||
<div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:60px_60px]"></div>
|
||
<div class="absolute top-16 left-20 w-2 h-2 rounded-full bg-white/40 animate-pulse"></div>
|
||
<div class="absolute top-40 right-32 w-3 h-3 rounded-full bg-blue-300/40 animate-pulse" style="animation-delay: 0.5s"></div>
|
||
<div class="absolute bottom-28 left-1/3 w-2 h-2 rounded-full bg-indigo-300/40 animate-pulse" style="animation-delay: 1s"></div>
|
||
<div class="absolute top-1/3 right-1/5 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 class="text-white border-white/30 bg-white/20" color="blue">云官网</a-tag>
|
||
<a-tag class="text-white border-white/30 bg-white/15" color="cyan">AI 建站</a-tag>
|
||
</div>
|
||
<h1 class="mb-4 text-3xl font-bold md:text-5xl leading-tight">
|
||
企业云官网<br />
|
||
<span class="text-blue-400">品牌展示 · 获客转化</span>
|
||
</h1>
|
||
<p class="mb-6 text-lg text-gray-300">
|
||
专为中小企业设计的 SaaS 官网系统，支持多模板、多语言、SEO 优化与可视化内容管理；下单即开通，快速搭建品牌展示与在线获客阵地。
|
||
</p>
|
||
<div class="flex flex-wrap gap-3">
|
||
<a-button class="bg-blue-500 border-blue-500 hover:bg-blue-400" size="large" type="primary" @click="go('https://site.websoft.top/register')">立即开通</a-button>
|
||
<a-button class="border-white text-white hover:bg-white/10" ghost size="large" @click="navigateTo('/contact')">预约演示</a-button>
|
||
</div>
|
||
</div>
|
||
<!-- 数据亮点 -->
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div v-for="stat in stats" :key="stat.label"
|
||
class="rounded-2xl border border-white/10 bg-white/5 p-5 backdrop-blur text-center hover:bg-white/10 transition-colors">
|
||
<div class="text-3xl font-bold text-white mb-1">{{ stat.value }}</div>
|
||
<div class="text-sm text-gray-400">{{ stat.label }}</div>
|
||
<div v-if="stat.sub" class="text-xs text-blue-400 mt-1">{{ stat.sub }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- AI 建站 Banner -->
|
||
<section class="bg-gradient-to-r from-blue-600 via-indigo-600 to-violet-600 py-8">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="flex flex-wrap items-center justify-between gap-4">
|
||
<div class="flex items-center gap-4">
|
||
<span class="text-3xl">✨</span>
|
||
<div class="text-white">
|
||
<div class="font-bold text-lg">AI 一句话生成官网</div>
|
||
<div class="text-white/80 text-sm">描述您的业务，AI 自动生成页面结构、文案与配色，5 分钟搭建专业官网</div>
|
||
</div>
|
||
</div>
|
||
<a-button class="bg-white text-blue-600 border-white font-semibold hover:bg-white/90" size="large" @click="navigateTo('/ai-agent')">
|
||
体验 AI 建站
|
||
</a-button>
|
||
</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-5 md:grid-cols-3">
|
||
<div v-for="feat in features" :key="feat.title"
|
||
class="rounded-2xl border border-slate-100 bg-white p-6 shadow-sm hover:shadow-md transition-shadow hover:-translate-y-1 duration-200">
|
||
<div class="flex items-start gap-4">
|
||
<span class="text-3xl">{{ feat.icon }}</span>
|
||
<div>
|
||
<div class="font-semibold text-base mb-1">{{ feat.title }}</div>
|
||
<div class="text-slate-500 text-sm leading-relaxed">{{ feat.desc }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 适用场景 -->
|
||
<section class="bg-slate-50 py-16 md:py-20">
|
||
<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="scene in scenes" :key="scene.title"
|
||
class="rounded-xl bg-white p-6 text-center shadow-sm hover:shadow-md transition-shadow hover:-translate-y-1 duration-200 cursor-default">
|
||
<div class="text-4xl mb-4">{{ scene.icon }}</div>
|
||
<div class="font-semibold mb-2">{{ scene.title }}</div>
|
||
<div class="text-slate-500 text-sm">{{ scene.desc }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 开通流程 -->
|
||
<section class="py-16 md:py-20">
|
||
<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">3 步完成开通</h2>
|
||
<p class="text-slate-500">支付即开通，无需等待，极速上线</p>
|
||
</div>
|
||
<div class="grid gap-6 md:grid-cols-3">
|
||
<div v-for="(step, i) in steps" :key="step.title" class="relative text-center">
|
||
<div v-if="i < steps.length - 1" class="absolute top-7 left-[calc(50%+28px)] right-0 h-0.5 bg-gradient-to-r from-blue-300 to-transparent hidden md:block"></div>
|
||
<div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 text-white text-xl font-bold shadow-lg">
|
||
{{ i + 1 }}
|
||
</div>
|
||
<h4 class="mb-2 font-semibold">{{ step.title }}</h4>
|
||
<p class="text-sm text-slate-500">{{ step.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="plan in plans"
|
||
:key="plan.name"
|
||
:class="plan.recommend ? 'border-2 border-blue-500 shadow-xl' : ''"
|
||
class="h-full text-center"
|
||
>
|
||
<template v-if="plan.recommend" #extra>
|
||
<a-tag color="blue">推荐</a-tag>
|
||
</template>
|
||
<div class="text-lg font-bold mb-1">{{ plan.name }}</div>
|
||
<div class="text-3xl font-bold text-blue-600 my-3">
|
||
{{ plan.price }}
|
||
<span class="text-sm text-slate-400 font-normal">{{ plan.period }}</span>
|
||
</div>
|
||
<div class="text-slate-500 text-sm mb-4">{{ plan.desc }}</div>
|
||
<a-divider />
|
||
<ul class="text-left text-sm space-y-2 mb-6">
|
||
<li v-for="item in plan.features" :key="item" class="flex items-center gap-2">
|
||
<span class="text-green-500 font-bold">✓</span>
|
||
<span class="text-slate-600">{{ item }}</span>
|
||
</li>
|
||
</ul>
|
||
<a-button
|
||
:type="plan.recommend ? 'primary' : 'default'"
|
||
block
|
||
size="large"
|
||
@click="go('https://site.websoft.top/register')"
|
||
>
|
||
立即开通
|
||
</a-button>
|
||
</a-card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="bg-gradient-to-r from-blue-600 to-indigo-700 py-16 text-white">
|
||
<div class="mx-auto max-w-screen-xl px-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||
<div>
|
||
<div class="text-2xl font-bold mb-2">立即搭建你的企业云官网</div>
|
||
<div class="text-blue-200">下单支付即开通，数分钟完成部署与初始化</div>
|
||
</div>
|
||
<div class="flex gap-3">
|
||
<a-button ghost size="large" @click="navigateTo('/contact')">预约演示</a-button>
|
||
<a-button class="bg-white text-blue-700 border-white hover:bg-white/90" size="large" @click="go('https://site.websoft.top/register')">
|
||
立即开通
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { usePageSeo } from '@/composables/usePageSeo'
|
||
|
||
usePageSeo({
|
||
title: '云官网 - 企业品牌展示与在线获客一体化解决方案',
|
||
description:
|
||
'专为中小企业设计的 SaaS 云官网系统，支持多模板、多语言、SEO 优化与可视化内容管理，下单即开通，快速搭建品牌展示与在线获客阵地。',
|
||
path: '/website'
|
||
})
|
||
|
||
definePageMeta({ layout: 'default' })
|
||
|
||
const go = (url: string) => {
|
||
if (/^https?:\/\//i.test(url)) {
|
||
if (import.meta.client) window.open(url, '_blank', 'noopener,noreferrer')
|
||
return
|
||
}
|
||
return navigateTo(url)
|
||
}
|
||
|
||
const stats = [
|
||
{ value: '10+', label: '行业精品模板', sub: '持续更新' },
|
||
{ value: '多语言', label: '国际化支持', sub: '覆盖海外市场' },
|
||
{ value: '99.9%', label: 'SLA 可用性', sub: '全年稳定运行' },
|
||
{ value: '5分钟', label: '极速开通', sub: '支付即用' }
|
||
]
|
||
|
||
const features = [
|
||
{
|
||
icon: '✨',
|
||
title: 'AI 一句话建站',
|
||
desc: '描述您的业务，AI 自动生成页面结构、文案与配色，告别空白页面焦虑。'
|
||
},
|
||
{
|
||
icon: '🎨',
|
||
title: '多模板一键套用',
|
||
desc: '覆盖企业、品牌、服务等多种行业风格，可视化编辑，无需代码即可上线。'
|
||
},
|
||
{
|
||
icon: '🔍',
|
||
title: 'SEO 深度优化',
|
||
desc: '内置 TDK 配置、结构化数据、Sitemap 自动生成，助力搜索引擎收录与排名提升。'
|
||
},
|
||
{
|
||
icon: '🌐',
|
||
title: '多语言国际化',
|
||
desc: '支持中英文及多语言站点，自动切换，轻松拓展海外市场。'
|
||
},
|
||
{
|
||
icon: '📝',
|
||
title: '内容管理系统',
|
||
desc: '文章、案例、产品、团队等内容板块灵活配置，支持富文本与 Markdown。'
|
||
},
|
||
{
|
||
icon: '📊',
|
||
title: '访客数据分析',
|
||
desc: '集成 PV/UV 统计、来源分析与转化漏斗，量化营销效果。'
|
||
},
|
||
{
|
||
icon: '📱',
|
||
title: '全端响应式适配',
|
||
desc: '桌面、平板、手机全端适配，保证任意设备下的品牌一致性。'
|
||
},
|
||
{
|
||
icon: '🔗',
|
||
title: '自定义域名绑定',
|
||
desc: '支持绑定企业专属域名，一键配置 HTTPS，品牌形象更专业。'
|
||
},
|
||
{
|
||
icon: '📬',
|
||
title: '在线表单与获客',
|
||
desc: '内置联系表单、询盘收集与线索管理，帮助企业高效跟进客户。'
|
||
}
|
||
]
|
||
|
||
const scenes = [
|
||
{ icon: '🏢', title: '企业品牌官网', desc: '展示公司实力、产品与团队，提升品牌信任度。' },
|
||
{ icon: '🛍️', title: '产品与服务展示', desc: '清晰呈现产品特性与优势，驱动在线询盘转化。' },
|
||
{ icon: '📣', title: '营销落地页', desc: '快速搭建活动、推广专题页，配合广告投放高效获客。' },
|
||
{ icon: '🌍', title: '跨境外贸官网', desc: '多语言站点支持，帮助企业开拓海外市场与客户。' }
|
||
]
|
||
|
||
const steps = [
|
||
{
|
||
title: '选择套餐',
|
||
desc: '按业务需求选择合适的套餐，支持随时升级。'
|
||
},
|
||
{
|
||
title: '完成支付',
|
||
desc: '支付成功后系统自动触发开通流程，无需人工干预。'
|
||
},
|
||
{
|
||
title: '即刻上线',
|
||
desc: '自动完成站点初始化与模板安装，登录管理后台开始运营。'
|
||
}
|
||
]
|
||
|
||
const plans = [
|
||
{
|
||
name: '基础版',
|
||
price: '¥399',
|
||
period: '/年',
|
||
recommend: false,
|
||
desc: '适合初创企业快速建站',
|
||
features: ['5 个内容页面', '3 套基础模板', 'SSL + 自定义域名', '访客统计', '在线表单']
|
||
},
|
||
{
|
||
name: '专业版',
|
||
price: '¥999',
|
||
period: '/年',
|
||
recommend: true,
|
||
desc: '适合品牌塑造与持续运营',
|
||
features: [
|
||
'不限页面数量',
|
||
'全部模板解锁',
|
||
'AI 一句话建站',
|
||
'SEO 深度优化',
|
||
'多语言支持',
|
||
'数据分析报表',
|
||
'插件市场加购',
|
||
'优先客服支持'
|
||
]
|
||
},
|
||
{
|
||
name: '私有化版',
|
||
price: '面议',
|
||
period: '',
|
||
recommend: false,
|
||
desc: '适合有私有化需求的企业',
|
||
features: [
|
||
'专业版全部功能',
|
||
'AI 建站全功能',
|
||
'源码交付',
|
||
'私有化部署',
|
||
'二次开发支持',
|
||
'专属售后服务',
|
||
'定制功能开发'
|
||
]
|
||
}
|
||
]
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page {
|
||
min-height: 100vh;
|
||
}
|
||
</style>
|