282 lines
14 KiB
Vue
282 lines
14 KiB
Vue
<template>
|
||
<div class="page">
|
||
<!-- Hero -->
|
||
<section class="relative overflow-hidden bg-gradient-to-br from-orange-600 via-red-500 to-pink-600 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-orange-300/20 blur-3xl"></div>
|
||
<div class="absolute -bottom-1/3 -left-1/4 w-[600px] h-[600px] rounded-full bg-red-300/20 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-16 left-16 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-orange-200/50 animate-pulse" style="animation-delay: 0.5s"></div>
|
||
<div class="absolute bottom-32 left-1/3 w-2 h-2 rounded-full bg-pink-200/50 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="orange" class="text-white border-white/30 bg-white/20">电商解决方案</a-tag>
|
||
<a-tag color="red" class="text-white border-white/30 bg-white/15">AI 智能导购</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-orange-600 border-white hover:bg-white/90" @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/20 bg-white/10 p-6 backdrop-blur">
|
||
<div class="mb-4 flex items-center justify-between">
|
||
<span class="text-sm text-white/70">今日订单</span>
|
||
<span class="text-2xl font-bold">1,286</span>
|
||
</div>
|
||
<div class="mb-1 h-2 w-full rounded-full bg-white/20">
|
||
<div class="h-2 rounded-full bg-white/70 w-[72%]"></div>
|
||
</div>
|
||
<div class="mb-4 text-xs text-white/50">日目标完成率 72%</div>
|
||
<div class="mb-4 flex items-center justify-between">
|
||
<span class="text-sm text-white/70">今日销售额</span>
|
||
<span class="text-2xl font-bold">¥28,560</span>
|
||
</div>
|
||
<div class="mb-4 flex items-center justify-between">
|
||
<span class="text-sm text-white/70">会员数量</span>
|
||
<span class="text-2xl font-bold">5,832</span>
|
||
</div>
|
||
<a-divider class="border-white/20 !my-3" />
|
||
<div class="flex flex-wrap gap-2">
|
||
<a-tag class="bg-white/20 text-white border-0">满减优惠</a-tag>
|
||
<a-tag class="bg-white/20 text-white border-0">积分抵扣</a-tag>
|
||
<a-tag class="bg-white/20 text-white border-0">分销返利</a-tag>
|
||
<a-tag class="bg-white/20 text-white border-0">AI 推荐</a-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- AI 智能导购 section -->
|
||
<section class="py-16 md:py-20 bg-gradient-to-br from-rose-50 via-orange-50 to-white overflow-hidden">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="grid items-center gap-12 md:grid-cols-2">
|
||
<!-- 左侧：特性卡片 -->
|
||
<div class="grid gap-4 grid-cols-2">
|
||
<div v-for="item in aiShopFeatures" :key="item.title"
|
||
class="rounded-2xl border border-orange-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>
|
||
<!-- 底部数据条 -->
|
||
<div class="col-span-2 rounded-2xl bg-gradient-to-r from-orange-500 to-red-500 p-5 text-white">
|
||
<div class="flex items-center justify-between flex-wrap gap-4">
|
||
<div v-for="stat in aiShopStats" :key="stat.label" class="text-center">
|
||
<div class="text-2xl font-bold">{{ stat.value }}</div>
|
||
<div class="text-xs text-white/80 mt-1">{{ stat.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧：文字介绍 -->
|
||
<div>
|
||
<div class="mb-3 flex items-center gap-2">
|
||
<span class="text-3xl">🤖</span>
|
||
<a-tag color="red" class="text-sm font-medium">AI 驱动商城新体验</a-tag>
|
||
</div>
|
||
<h2 class="mb-4 text-2xl font-bold md:text-3xl">
|
||
AI 智能导购，让每次推荐都精准
|
||
</h2>
|
||
<p class="mb-4 text-slate-600 leading-relaxed">
|
||
借助大语言模型，商城内置 AI 导购助手，能理解用户自然语言需求，精准匹配商品，像真人导购一样主动沟通。
|
||
</p>
|
||
<p class="mb-4 text-slate-600 leading-relaxed">
|
||
AI 实时分析用户浏览行为、购买偏好，自动生成个性化首页推荐流，让每位用户看到最感兴趣的商品，转化率显著提升。
|
||
</p>
|
||
<p class="mb-6 text-slate-600 leading-relaxed">
|
||
售后环节，AI 客服 7×24 小时自动处理退换货、物流查询等常见问题，释放人工客服压力。
|
||
</p>
|
||
<div class="flex flex-wrap gap-3">
|
||
<div v-for="tag in aiShopTags" :key="tag" class="rounded-full bg-orange-100 px-4 py-1.5 text-sm font-medium text-orange-700">
|
||
{{ tag }}
|
||
</div>
|
||
</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 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-orange-50 text-orange-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-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-4 md:grid-cols-4">
|
||
<div v-for="m in marketing" :key="m.title" class="rounded-xl bg-white p-5 shadow-sm hover:shadow-md transition-shadow hover:-translate-y-1 duration-200">
|
||
<div class="mb-3 text-2xl">{{ m.emoji }}</div>
|
||
<h3 class="mb-1 font-semibold">{{ m.title }}</h3>
|
||
<p class="text-sm text-slate-500">{{ m.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-3">
|
||
<a-card v-for="p in plans" :key="p.name" class="relative h-full" :class="p.recommended ? 'border-2 border-orange-500 shadow-lg' : ''">
|
||
<div v-if="p.recommended" class="absolute -top-3 left-1/2 -translate-x-1/2">
|
||
<a-tag color="orange">推荐</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-orange-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-orange-500 to-red-500 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">0 佣金、0 抽成，所有利润归您所有</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-orange-600 border-white hover:bg-white/90" @click="navigateTo('/flow')">立即开通</a-button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import {
|
||
ShoppingOutlined,
|
||
ShoppingCartOutlined,
|
||
PayCircleOutlined,
|
||
TeamOutlined,
|
||
GiftOutlined,
|
||
BarChartOutlined,
|
||
CarOutlined,
|
||
MessageOutlined,
|
||
CheckOutlined
|
||
} from '@ant-design/icons-vue'
|
||
|
||
useHead({ title: '小程序商城 - 私域电商解决方案' })
|
||
|
||
definePageMeta({ layout: 'default' })
|
||
|
||
// AI 智能导购特性
|
||
const aiShopFeatures = [
|
||
{ emoji: '💬', title: 'AI 导购对话', desc: '自然语言沟通，理解用户意图，精准推荐商品' },
|
||
{ emoji: '🎯', title: '个性化推荐', desc: '实时分析行为数据，首页千人千面，提升点击率' },
|
||
{ emoji: '🤖', title: 'AI 客服', desc: '7×24 小时自动回复，智能处理退换货与售后' },
|
||
{ emoji: '📈', title: '智能定价', desc: '竞品价格监控，动态调价建议，最大化利润' },
|
||
]
|
||
|
||
const aiShopStats = [
|
||
{ value: '↑35%', label: '转化率提升' },
|
||
{ value: '↑28%', label: '客单价提升' },
|
||
{ value: '↓60%', label: '客服成本降低' },
|
||
{ value: '7×24h', label: '全天候服务' },
|
||
]
|
||
|
||
const aiShopTags = ['AI 导购', '个性推荐', '智能定价', '自动客服', '行为分析']
|
||
|
||
const features = [
|
||
{ icon: ShoppingOutlined, title: '商品管理', desc: '支持多规格、多分类、库存预警、批量导入，轻松管理上万 SKU' },
|
||
{ icon: ShoppingCartOutlined, title: '订单系统', desc: '订单自动处理、物流跟踪、售后管理，全流程自动化' },
|
||
{ icon: PayCircleOutlined, title: '支付结算', desc: '微信支付、支付宝、银行卡，T+1 自动结算到对公账户' },
|
||
{ icon: TeamOutlined, title: '会员体系', desc: '等级会员、积分系统、储值卡、付费会员，提升用户 LTV' },
|
||
{ icon: GiftOutlined, title: '营销工具', desc: '优惠券、满减、秒杀、拼团、分销，多种玩法促进转化' },
|
||
{ icon: BarChartOutlined, title: '经营报表', desc: '销售分析、用户画像、商品热度，数据驱动决策' },
|
||
{ icon: CarOutlined, title: '物流对接', desc: '对接主流快递公司，电子面单、运费模板一键配置' },
|
||
{ icon: MessageOutlined, title: '客服系统', desc: '智能客服、工单系统、评价管理，提升服务效率' }
|
||
]
|
||
|
||
const marketing = [
|
||
{ 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: '¥999',
|
||
period: '/年',
|
||
recommended: false,
|
||
features: ['1,000 个商品', '基础营销工具', '微信支付', '标准模板', '邮件客服支持']
|
||
},
|
||
{
|
||
name: '成长版',
|
||
price: '¥2,999',
|
||
period: '/年',
|
||
recommended: true,
|
||
features: ['10,000 个商品', '全功能营销', '多渠道支付', '高级模板', 'AI 智能导购', '分销系统', '专属客服']
|
||
},
|
||
{
|
||
name: '旗舰版',
|
||
price: '¥9,999',
|
||
period: '/年',
|
||
recommended: false,
|
||
features: ['无限商品', 'AI 全功能', '定制开发', '独立部署', '私有化数据', 'API 开放', '1 对 1 技术顾问']
|
||
}
|
||
]
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page {
|
||
min-height: 100vh;
|
||
}
|
||
</style>
|