gxwebsoft/jczxw-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始版本

Browse Source
This commit is contained in:
赵忠林
2026-04-23 16:30:57 +08:00
commit 0d0683a6e6
538 changed files with 113042 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

332
app/pages/website.vue Normal file
View File

@@ -0,0 +1,332 @@
<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 color="blue" class="text-white border-white/30 bg-white/20">云官网</a-tag>
<a-tag color="cyan" class="text-white border-white/30 bg-white/15">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 type="primary" size="large" class="bg-blue-500 border-blue-500 hover:bg-blue-400" @click="go('https://site.websoft.top/register')">立即开通</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="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 size="large" class="bg-white text-blue-600 border-white font-semibold hover:bg-white/90" @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="h-full text-center"
:class="plan.recommend ? 'border-2 border-blue-500 shadow-xl' : ''"
>
<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 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="go('https://site.websoft.top/register')">
立即开通
</a-button>
</div>
</div>
</section>
</div>
</template>
<script setup lang="ts">
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>