panhuixia/xunchiProduct

Fork 0

Files

T

小潘 0cf72dc47f 首页已完成

2026-05-28 09:01:30 +08:00

5.6 KiB

Raw Blame History

产品营销网站设计文档

概述

为广西职业院校提供教育信息化产品的营销推广网站。纯前端静态站点，部署到 EdgeOne，域名 https://products.2009xc.com/。

技术栈

构建工具：Vite
框架：React 18 + React Router v6
样式：Tailwind CSS v3 + CSS 变量（主题色切换）
部署：静态文件，EdgeOne CDN

页面结构

路由设计

路由	页面	说明
`/`	首页	Hero区 + 产品概览 + 信任背书 + 新闻动态
`/product/:slug`	产品详情页	通用模板，根据slug加载产品数据
`/contact`	联系我们/成为代理商	代理优势 + 申请表单 + 联系方式

目录结构

website
/
├── public/              # 静态资源
├── src/
│   ├── components/
│   │   ├── Navbar.jsx       # 顶部导航栏（固定、响应式汉堡菜单）
│   │   ├── Footer.jsx       # 页脚
│   │   ├── HeroSection.jsx  # 首页Hero大图区
│   │   ├── ProductCard.jsx  # 产品概览卡片
│   │   ├── TrustSection.jsx # 信任背书区（Logo墙+评价+数据）
│   │   ├── NewsSection.jsx  # 新闻动态区
│   │   ├── DemoSection.jsx  # 演示体验模块（网址+二维码+账号密码）
│   │   ├── ContactForm.jsx  # 代理商申请表单
│   │   └── ThemeProvider.jsx# 主题色上下文（CSS变量切换）
│   ├── pages/
│   │   ├── Home.jsx
│   │   ├── ProductPage.jsx  # 通用产品详情页模板
│   │   └── Contact.jsx
│   ├── data/
│   │   └── products.js      # 产品数据配置
│   ├── App.jsx
│   └── main.jsx
├── index.html
├── tailwind.config.js
├── vite.config.js
└── package.json

首页设计

1. 导航栏

公司Logo（左）+ 产品菜单（下拉展示所有产品）+ "联系我们"按钮（右）
滚动后固定顶部，添加阴影
移动端折叠为汉堡菜单

2. Hero 大图区

全屏渐变背景（深蓝→蓝紫渐变）
公司标语："智慧教育，赋能未来"（示例）
副标题：一句话描述公司使命
CTA按钮："了解我们的产品"

3. 产品概览区

2×3 网格卡片布局
每张卡片：SVG图标 + 产品名称 + 一句话简介 + "了解更多"按钮
hover效果：上浮+阴影增强

4. 信任背书区

合作院校Logo墙（示例占位）
关键数据统计："服务100+所院校"、"覆盖50万+师生"（示例）
客户评价轮播

5. 新闻动态区

3-4条最新动态卡片（标题+摘要+日期）
示例占位内容

6. 页脚

公司信息 + 联系方式 + 版权 + 备案号

产品详情页设计

通过URL参数 /product/:slug 从 products.js 加载数据，所有产品共享同一模板。

页面结构（从上到下）

产品头部 — 全宽渐变背景（产品主题色），产品名称 + Slogan + 产品截图/插画
核心价值 — 3-4个价值点（图标+标题+描述），营销化文案
功能亮点 — 左右交替布局，图文并茂，每个功能一个区块
应用场景 — 针对职业院校的实际使用场景
演示体验模块 — 演示网址（可点击）+ 二维码（SVG占位）+ 体验账号密码（卡片）
其他产品推荐 — "您可能还感兴趣"卡片
CTA — "立即联系我们"按钮

主题色系统

通过 CSS 变量 + ThemeProvider 上下文实现每个产品页面的主题色切换。

产品	slug	主题色	色值
智慧校园管理平台	smart-campus	蓝色	#2563EB
实习实训管理平台	internship	绿色	#059669
教学资源管理平台	teaching-resource	紫色	#7C3AED
考试测评系统	exam-system	橙色	#EA580C
就业服务平台	career-service	青色	#0891B2

导航栏和页脚使用公司统一配色（深色），不受产品主题色影响。

联系我们/成为代理商页面

代理优势区 — 4-6个加盟优势卡片（政策支持、培训赋能、丰厚回报、品牌背书等）
代理流程 — 横向步骤条：咨询 → 签约 → 培训 → 开业
在线申请表单 — 姓名、公司名称、联系电话、邮箱、所在地区、代理意向产品（下拉）、备注
联系方式区 — 电话、邮箱、地址、微信公众号二维码

表单仅做前端验证，展示提交成功提示（无后端处理）。

响应式断点

桌面端 ≥1024px：完整布局，双栏图文交替
平板端 768-1023px：间距调整，卡片2列
移动端 <768px：单栏，汉堡菜单

设计风格

科技感/现代风，参考阿里云/腾讯云产品页风格
大色块渐变、圆角卡片、适当的阴影和动效
中文排版，适合中国用户习惯
SVG图标和装饰元素增加美观
文案以营销宣传为主，不深入技术细节

产品数据结构

// src/data/products.js
{
  slug: 'smart-campus',
  name: '校企益邦',
  slogan: '数字化管理，让校园更智慧',
  themeColor: '#2563EB',
  icon: '...',           // SVG图标组件名
  brief: '...',          // 一句话简介（首页卡片用）
  values: [...],         // 核心价值点
  features: [...],       // 功能亮点
  scenarios: [...],      // 应用场景
  demo: {
    url: '...',
    qrCode: '...',       // 二维码图片路径
    account: '...',
    password: '...'
  }
}

部署

vite build 输出到 website/dist/
上传到 EdgeOne，绑定域名 products.2009xc.com
Vite 配置 base: '/'

5.6 KiB Raw Blame History Unescape Escape