298 lines
15 KiB
Vue
298 lines
15 KiB
Vue
<template>
|
||
<div class="page">
|
||
<!-- Hero -->
|
||
<section class="relative overflow-hidden bg-gradient-to-br from-slate-900 via-green-950 to-emerald-900 text-white">
|
||
<!-- 背景装饰 -->
|
||
<div class="absolute inset-0 overflow-hidden">
|
||
<div class="absolute -top-1/2 -right-1/4 w-[700px] h-[700px] rounded-full bg-emerald-500/20 blur-3xl"></div>
|
||
<div class="absolute -bottom-1/2 -left-1/4 w-[600px] h-[600px] rounded-full bg-green-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-16 w-2 h-2 rounded-full bg-white/40 animate-pulse"></div>
|
||
<div class="absolute top-36 right-32 w-3 h-3 rounded-full bg-emerald-300/40 animate-pulse" style="animation-delay: 0.7s"></div>
|
||
<div class="absolute bottom-24 left-1/3 w-2 h-2 rounded-full bg-green-300/40 animate-pulse" style="animation-delay: 1.2s"></div>
|
||
<div class="absolute top-1/2 right-1/5 w-1.5 h-1.5 rounded-full bg-white/30 animate-pulse" style="animation-delay: 1.8s"></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="green" class="text-white border-white/30 bg-white/20">智能小程序</a-tag>
|
||
<a-tag color="cyan" class="text-white border-white/30 bg-white/15">多端一码</a-tag>
|
||
</div>
|
||
<h1 class="mb-4 text-3xl font-bold md:text-5xl">
|
||
小程序开发
|
||
</h1>
|
||
<p class="mb-6 text-lg text-slate-300">
|
||
一键生成微信、抖音、支付宝等多平台小程序，无需代码基础，可视化搭建，快速上线运营。
|
||
</p>
|
||
<!-- 统计 -->
|
||
<div class="mb-6 grid grid-cols-3 gap-4 rounded-2xl border border-white/10 bg-white/5 p-4 backdrop-blur">
|
||
<div class="text-center">
|
||
<div class="text-2xl font-bold text-white">10亿+</div>
|
||
<div class="text-xs text-slate-400 mt-1">微信月活用户</div>
|
||
</div>
|
||
<div class="text-center border-x border-white/10">
|
||
<div class="text-2xl font-bold text-white">4+</div>
|
||
<div class="text-xs text-slate-400 mt-1">主流平台</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-2xl font-bold text-white">3分钟</div>
|
||
<div class="text-xs text-slate-400 mt-1">快速上线</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-wrap gap-3">
|
||
<a-button type="primary" size="large" class="bg-emerald-500 border-emerald-500 hover:bg-emerald-400" @click="navigateTo('/flow')">立即开通</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/10 bg-white/5 p-6 backdrop-blur space-y-4">
|
||
<div class="flex items-center gap-3 rounded-xl bg-white/8 px-4 py-3 hover:bg-white/12 transition-colors">
|
||
<div class="h-10 w-10 rounded-xl bg-green-500/20 flex items-center justify-center">
|
||
<WechatOutlined class="text-xl text-green-400" />
|
||
</div>
|
||
<div class="flex-1">
|
||
<div class="font-medium">微信小程序</div>
|
||
<div class="text-sm text-slate-400">10亿+用户触达</div>
|
||
</div>
|
||
<CheckCircleOutlined class="text-green-400 text-lg" />
|
||
</div>
|
||
<div class="flex items-center gap-3 rounded-xl bg-white/8 px-4 py-3 hover:bg-white/12 transition-colors">
|
||
<div class="h-10 w-10 rounded-xl bg-pink-500/20 flex items-center justify-center">
|
||
<VideoCameraOutlined class="text-xl text-pink-400" />
|
||
</div>
|
||
<div class="flex-1">
|
||
<div class="font-medium">抖音小程序</div>
|
||
<div class="text-sm text-slate-400">短视频流量入口</div>
|
||
</div>
|
||
<CheckCircleOutlined class="text-green-400 text-lg" />
|
||
</div>
|
||
<div class="flex items-center gap-3 rounded-xl bg-white/8 px-4 py-3 hover:bg-white/12 transition-colors">
|
||
<div class="h-10 w-10 rounded-xl bg-blue-500/20 flex items-center justify-center">
|
||
<AlipayCircleOutlined class="text-xl text-blue-400" />
|
||
</div>
|
||
<div class="flex-1">
|
||
<div class="font-medium">支付宝小程序</div>
|
||
<div class="text-sm text-slate-400">生活服务场景</div>
|
||
</div>
|
||
<CheckCircleOutlined class="text-green-400 text-lg" />
|
||
</div>
|
||
<div class="flex items-center gap-3 rounded-xl bg-white/8 px-4 py-3 hover:bg-white/12 transition-colors">
|
||
<div class="h-10 w-10 rounded-xl bg-orange-500/20 flex items-center justify-center">
|
||
<FireOutlined class="text-xl text-orange-400" />
|
||
</div>
|
||
<div class="flex-1">
|
||
<div class="font-medium">百度小程序</div>
|
||
<div class="text-sm text-slate-400">搜索流量直达</div>
|
||
</div>
|
||
<CheckCircleOutlined class="text-green-400 text-lg" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- AI 赋能 Banner -->
|
||
<section class="bg-gradient-to-r from-green-600 via-emerald-600 to-teal-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 自动生成页面结构与交互逻辑，效率提升 10 倍</div>
|
||
</div>
|
||
</div>
|
||
<a-button size="large" class="bg-white text-green-700 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-6 md:grid-cols-3">
|
||
<a-card v-for="f in features" :key="f.title" class="h-full hover:shadow-lg transition-shadow">
|
||
<div class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-green-50 text-green-600">
|
||
<component :is="f.icon" class="text-xl" />
|
||
</div>
|
||
<h3 class="mb-2 text-lg font-semibold">{{ f.title }}</h3>
|
||
<p class="text-slate-500">{{ f.desc }}</p>
|
||
</a-card>
|
||
</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">最快 3 分钟，从零到上线</p>
|
||
</div>
|
||
<div class="grid gap-6 md:grid-cols-4">
|
||
<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-green-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-green-500 to-emerald-600 text-white text-xl font-bold shadow-lg">
|
||
{{ step.num }}
|
||
</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="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-slate-100 p-6 text-center shadow-sm hover:shadow-md transition-shadow hover:-translate-y-1 duration-200">
|
||
<div class="mb-4 flex justify-center">
|
||
<div class="flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-green-500 to-emerald-600 text-white text-2xl shadow-md">
|
||
{{ s.emoji }}
|
||
</div>
|
||
</div>
|
||
<h3 class="mb-2 font-semibold">{{ s.title }}</h3>
|
||
<p class="text-sm text-slate-500">{{ 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" :class="p.recommended ? 'border-2 border-green-500 shadow-lg' : ''">
|
||
<div v-if="p.recommended" class="absolute -top-3 left-1/2 -translate-x-1/2">
|
||
<a-tag color="green">推荐</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-green-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" />
|
||
<span class="text-sm text-slate-600">{{ feat }}</span>
|
||
</li>
|
||
</ul>
|
||
<a-button :type="p.recommended ? 'primary' : 'default'" block class="mt-6" @click="navigateTo('/flow')">
|
||
立即开通
|
||
</a-button>
|
||
</a-card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="bg-gradient-to-r from-green-600 to-emerald-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-green-100">3 分钟创建，1 小时上线，触达亿万用户</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-green-700 border-white hover:bg-white/90" @click="navigateTo('/flow')">立即开通</a-button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import {
|
||
WechatOutlined,
|
||
VideoCameraOutlined,
|
||
AlipayCircleOutlined,
|
||
FireOutlined,
|
||
AppstoreOutlined,
|
||
ToolOutlined,
|
||
DatabaseOutlined,
|
||
SafetyOutlined,
|
||
LineChartOutlined,
|
||
CustomerServiceOutlined,
|
||
CheckOutlined,
|
||
CheckCircleOutlined
|
||
} from '@ant-design/icons-vue'
|
||
|
||
useHead({ title: '小程序开发 - 多平台一键生成' })
|
||
|
||
definePageMeta({ layout: 'default' })
|
||
|
||
const features = [
|
||
{ icon: AppstoreOutlined, title: '多平台适配', desc: '一套代码，同时发布微信、抖音、支付宝、百度等多平台小程序，维护成本降低 80%' },
|
||
{ icon: ToolOutlined, title: '可视化搭建', desc: '拖拽式组件编辑器，无需代码，像搭积木一样快速构建小程序页面，所见即所得' },
|
||
{ icon: DatabaseOutlined, title: '云端数据', desc: '内置云数据库和云函数，轻松实现数据存储和业务逻辑，零运维压力' },
|
||
{ icon: SafetyOutlined, title: '安全合规', desc: '自动适配各平台审核规范，提供隐私协议模板，快速过审，无需担心违规' },
|
||
{ icon: LineChartOutlined, title: '数据分析', desc: '实时统计访问量、用户行为、转化漏斗，助力精细化运营，数据驱动决策' },
|
||
{ icon: CustomerServiceOutlined, title: '客服系统', desc: '集成在线客服、消息推送、用户反馈，提升服务体验，留住每一位用户' }
|
||
]
|
||
|
||
const steps = [
|
||
{ num: '01', title: '选择模板', desc: '从行业模板库选择合适的起点，一键应用' },
|
||
{ num: '02', title: '可视化编辑', desc: '拖拽组件，调整内容，配置业务逻辑' },
|
||
{ num: '03', title: '提交审核', desc: '一键提交至各平台审核，自动填写资料' },
|
||
{ num: '04', title: '正式上线', desc: '审核通过即上线，开始接受用户访问' }
|
||
]
|
||
|
||
const scenarios = [
|
||
{ emoji: '🛒', title: '电商零售', desc: '商品展示、在线下单、会员管理' },
|
||
{ emoji: '☕', title: '餐饮外卖', desc: '点餐排队、外卖配送、预约订座' },
|
||
{ emoji: '🏥', title: '医疗健康', desc: '预约挂号、健康档案、在线问诊' },
|
||
{ emoji: '🚗', title: '生活服务', desc: '家政服务、美容美发、汽车养护' },
|
||
{ emoji: '📚', title: '在线教育', desc: '课程报名、视频学习、作业提交' },
|
||
{ emoji: '🏋️', title: '健身运动', desc: '课程预约、会员管理、打卡签到' },
|
||
{ emoji: '🏠', title: '房产中介', desc: '房源展示、在线看房、预约带看' },
|
||
{ emoji: '🎮', title: '娱乐休闲', desc: '活动报名、票务预定、积分玩法' }
|
||
]
|
||
|
||
const plans = [
|
||
{
|
||
name: '基础版',
|
||
price: '¥599',
|
||
period: '/年',
|
||
recommended: false,
|
||
features: ['1 个小程序', '微信 / 支付宝双平台', '基础组件库', '云存储 5GB', '标准客服支持']
|
||
},
|
||
{
|
||
name: '专业版',
|
||
price: '¥1,299',
|
||
period: '/年',
|
||
recommended: true,
|
||
features: ['3 个小程序', '全平台支持', '高级组件 + 模板库', '云存储 50GB', '数据分析报表', 'AI 智能生成', '优先技术支持']
|
||
},
|
||
{
|
||
name: '企业版',
|
||
price: '¥3,999',
|
||
period: '/年',
|
||
recommended: false,
|
||
features: ['10 个小程序', '全平台 + 独立部署', '定制开发支持', '云存储 200GB', '专属客户经理', 'SLA 保障']
|
||
}
|
||
]
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page {
|
||
min-height: 100vh;
|
||
}
|
||
</style>
|