DeXun/chuanggao-website
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3772c90eec4b77a9d0e701528f080bceca0cd914
chuanggao-website/design/前端页面框架.md

568 lines
36 KiB
Markdown
Raw Normal View History

创高项目初始化
2026-05-12 16:53:18 +08:00
# 创高家具官网 - 前端页面框架设计
## 一、页面结构总览
```
┌─────────────────────────────────────────────────────────────┐
│ AppHeader │
│ Logo │ 首页 产品中心 案例展示 关于创高 联系我们 │ 语言 热线 │
├─────────────────────────────────────────────────────────────┤
│ │
│ RouterView │
│ │
├─────────────────────────────────────────────────────────────┤
│ AppFooter │
│ Logo/简介 │ 快速导航 │ 产品分类 │ 联系方式 │ 二维码 │
│ ©2024 创高家具 版权所有 │
└─────────────────────────────────────────────────────────────┘
```
---
## 二、首页（HomeView.vue）
### 2.1 页面结构
```
┌─────────────────────────────────────────────────────────────┐
│ Section 1: HeroBanner（全屏首屏） │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 全屋定制 匠心之作 │ │
│ │ 专注高端家具定制，为品质生活而生 │ │
│ │ │ │
│ │ [立即咨询] [查看产品] │ │
│ │ │ │
│ │ ← 轮播指示器 → │ │
│ └─────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ Section 2: ServiceSection（核心业务） │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 核心业务 │ │
│ │ 三大业务板块，全方位满足您的需求 │ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │
│ │ │ 全屋定制 │ │ 成品家具 │ │ 工程项目 │ │ │
│ │ │ 图标 │ │ 图标 │ │ 图标 │ │ │
│ │ │ 描述... │ │ 描述... │ │ 描述... │ │ │
│ │ └──────────┘ └──────────┘ └──────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ Section 3: ProductSection（热门产品） │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 热门产品 │ │
│ │ 精选系列，品质之选 │ │
│ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │
│ │ │图1 │ │图2 │ │图3 │ │图4 │ ← 产品卡片网格 │ │
│ │ │名称│ │名称│ │名称│ │名称│ │ │
│ │ └────┘ └────┘ └────┘ └────┘ │ │
│ │ │ │
│ │ [查看全部产品] │ │
│ └─────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ Section 4: CaseSection（经典案例） │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 经典案例 │ │
│ │ 实景呈现，见证品质 │ │
│ │ ┌────────────┐ ┌────────────┐ │ │
│ │ │ │ │ │ ← 案例大图+悬停效果 │ │
│ │ │ 案例1 │ │ 案例2 │ │ │
│ │ │ 标题/地点 │ │ 标题/地点 │ │ │
│ │ └────────────┘ └────────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ Section 5: StrengthSection（品牌实力） │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 深色背景 + 金属质感数字 │ │
│ │ │ │
│ │ 20+ 50000+ 1000+ 50+ │ │
│ │ 年经验 ㎡基地 家客户 项专利 │ │
│ │ │ │
│ │ [了解更多品牌实力] │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
```
### 2.2 组件结构
```vue
<template>
<div class="home-view">
<!-- 全屏首屏轮播 -->
<HeroBanner :banners="homeData.banners" />
<!-- 核心业务板块 -->
<ServiceSection
:title="pageBlocks.services_title"
:subtitle="pageBlocks.services_subtitle"
:services="serviceList"
/>
<!-- 热门产品 -->
<ProductSection
:title="pageBlocks.products_title"
:products="homeData.hotProducts"
/>
<!-- 经典案例 -->
<CaseSection
:title="pageBlocks.cases_title"
:cases="homeData.recommendCases"
/>
<!-- 品牌实力 -->
<StrengthSection
:title="pageBlocks.strength_title"
:data="pageBlocks.strength_data"
/>
</div>
</template>
```
---
## 三、产品中心（ProductView.vue）
### 3.1 页面结构
```
┌─────────────────────────────────────────────────────────────┐
│ Banner（产品页头图） │
├─────────────────────────────────────────────────────────────┤
│ 左侧分类导航 │ 右侧产品列表 │
│ ┌─────────────────────┐ │ ┌─────────────────────────┐ │
│ │ 产品中心 │ │ │ 筛选：分类 ▼ 风格 ▼ │ │
│ │ │ │ └─────────────────────────┘ │
│ │ ▼ 全屋定制 │ │ │
│ │ ├ 衣柜 │ │ ┌────┐ ┌────┐ ┌────┐ │ │
│ │ ├ 橱柜 │ │ │图1 │ │图2 │ │图3 │ │ │
│ │ └ 书柜 │ │ │名称│ │名称│ │名称│ │ │
│ │ │ │ │价格│ │价格│ │价格│ │ │
│ │ ▶ 客厅家具 │ │ └────┘ └────┘ └────┘ │ │
│ │ ▶ 卧室家具 │ │ │ │
│ │ │ │ ┌────┐ ┌────┐ ┌────┐ │ │
│ │ ▶ 餐厅家具 │ │ │图4 │ │图5 │ │图6 │ │ │
│ │ │ │ └────┘ └────┘ └────┘ │ │
│ │ │ │ │ │
│ │ │ │ ┌─────────────────────┐ │ │
│ │ │ │ │ 分页组件 │ │ │
│ │ │ │ │ < 1 2 3 4 5 > │ │ │
│ │ │ │ └─────────────────────┘ │ │
│ └─────────────────────┘ └──────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
```
### 3.2 交互说明
| 交互 | 行为 |
|------|------|
| 分类点击 | 右侧列表筛选，URL 更新（`/products?category=1`） |
| 产品卡片悬停 | 图片放大，显示"查看详情"遮罩 |
| 产品点击 | 进入详情页 `/products/{id}` |
| 分页 | 保持筛选状态，滚动到顶部 |
| 面包屑 | 首页 > 产品中心 > 分类名 |
---
## 四、产品详情页（ProductDetailView.vue）
### 4.1 页面结构
```
┌─────────────────────────────────────────────────────────────┐
│ 面包屑：首页 > 产品中心 > 全屋定制 > 产品名称 │
├─────────────────────────────────────────────────────────────┤
│ 左侧图片区（60%） │ 右侧信息区（40%） │
│ ┌─────────────────────────┐ │ ┌──────────────────────┐ │
│ │ │ │ │ 产品名称 │ │
│ │ 主图展示 │ │ │ Product Name │ │
│ │ │ │ │ │ │
│ │ ┌────┐ ┌────┐ ┌────┐ │ │ │ ★★★★★ (5.0) │ │
│ │ │图1 │ │图2 │ │图3 │ │ │ │ │ │
│ │ └────┘ └────┘ └────┘ │ │ │ 简介描述... │ │
│ │ │ │ │ │ │
│ │ ← 缩略图可点击切换主图 → │ │ │ 产品参数（表格） │ │
│ │ │ │ │ ├ 材质：真皮 │ │
│ │ │ │ │ ├ 尺寸：200*90cm │ │
│ └─────────────────────────┘ │ │ └ 风格：意式极简 │ │
│ │ │ │ │
│ ┌─────────────────────────┐ │ │ [立即咨询] │ │
│ │ 场景展示图 │ │ │ [加入对比] │ │
│ │ （产品在实际场景中） │ │ └──────────────────────┘ │
│ └─────────────────────────┘ └──────────────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ Tab切换：产品详情 │ 规格参数 │ 场景展示 │ 售后服务 │
├─────────────────────────────────────────────────────────────┤
│ 详细内容区（富文本/HTML） │
│ ... │
├─────────────────────────────────────────────────────────────┤
│ 相关产品推荐 │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │图1 │ │图2 │ │图3 │ │图4 │ │
│ └────┘ └────┘ └────┘ └────┘ │
└─────────────────────────────────────────────────────────────┘
```
---
## 五、案例展示（CaseView.vue）
### 5.1 页面结构
```
┌─────────────────────────────────────────────────────────────┐
│ Banner（案例页头图） │
├─────────────────────────────────────────────────────────────┤
│ 分类筛选栏 │
│ [全部] [全屋定制案例] [客厅空间] [卧室空间] [工程案例...] │
├─────────────────────────────────────────────────────────────┤
│ 案例网格（瀑布流/等高分栏） │
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ │
│ │ │ │ │ │ │ │
│ │ 案例图 │ │ 案例图 │ │ 案例图 │ │
│ │ ┌────────┐│ │ ┌────────┐│ │ ┌────────┐│ │
│ │ │悬停显示││ │ │悬停显示││ │ │悬停显示││ │
│ │ │标题/地 ││ │ │标题/地 ││ │ │标题/地 ││ │
│ │ └────────┘│ │ └────────┘│ │ └────────┘│ │
│ └────────────┘ └────────────┘ └────────────┘ │
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ │
│ │ │ │ │ │ │ │
│ └────────────┘ └────────────┘ └────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ 分页组件 │
└─────────────────────────────────────────────────────────────┘
```
---
## 六、案例详情（CaseDetailView.vue）
### 6.1 页面结构
```
┌─────────────────────────────────────────────────────────────┐
│ 面包屑：首页 > 案例展示 > 全屋定制案例 │
├─────────────────────────────────────────────────────────────┤
│ 案例标题 │
│ Case Subtitle / Project Location │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 大图轮播展示 │ │
│ │ │ │
│ │ ← Swiper → │ │
│ │ │ │
│ └─────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ 项目信息卡片 │
│ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │项目类型│ │项目面积│ │项目地点│ │完工时间│ │
│ │全屋定制│ │ 180㎡ │ │ 深圳 │ │2024.03 │ │
│ └────────┘ └────────┘ └────────┘ └────────┘ │
├─────────────────────────────────────────────────────────────┤
│ 案例描述（富文本内容） │
│ ... │
├─────────────────────────────────────────────────────────────┤
│ 使用产品 │
│ ┌────┐ ┌────┐ ┌────┐ │
│ │产品1│ │产品2│ │产品3│ ← 点击跳转产品详情 │
│ └────┘ └────┘ └────┘ │
├─────────────────────────────────────────────────────────────┤
│ 上一篇 / 下一篇 导航 │
│ [← 某某别墅全屋定制案例] [某某酒店工程项目 →] │
└─────────────────────────────────────────────────────────────┘
```
---
## 七、关于创高（AboutView.vue）
### 7.1 页面结构
```
┌─────────────────────────────────────────────────────────────┐
│ Banner（关于页头图） │
│ About ChuangGao / 关于创高 │
├─────────────────────────────────────────────────────────────┤
│ Tab导航：品牌故事 │ 工厂实力 │ 荣誉资质 │ 新闻资讯 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Tab 内容区 │ │
│ │ │ │
│ │ 【品牌故事】 │ │
│ │ 左图右文 或 上图下文 │ │
│ │ 公司发展历程时间线 │ │
│ │ │ │
│ │ 【工厂实力】 │ │
│ │ 工厂图片展示 + 设备介绍 + 生产流程 │ │
│ │ │ │
│ │ 【荣誉资质】 │ │
│ │ 证书/奖项/专利 网格展示 │ │
│ │ │ │
│ │ 【新闻资讯】 │ │
│ │ 新闻列表（标题+摘要+日期+封面图） │ │
│ │ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
```
---
## 八、联系我们（ContactView.vue）
### 8.1 页面结构
```
┌─────────────────────────────────────────────────────────────┐
│ Banner（联系页头图） │
│ Contact Us / 联系我们 │
├─────────────────────────────────────────────────────────────┤
│ 加盟政策预览 │
│ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │品牌支持│ │培训支持│ │营销支持│ │区域保护│ │
│ │ 图标 │ │ 图标 │ │ 图标 │ │ 图标 │ │
│ └────────┘ └────────┘ └────────┘ └────────┘ │
├─────────────────────────────────────────────────────────────┤
│ 左侧信息区（40%） │ 右侧表单区（60%） │
│ ┌─────────────────────────────┐ │ ┌────────────────────────┐│
│ │ │ │ │ 在线留言表单 ││
│ │ 联系信息 │ │ │ ││
│ │ │ │ │ 咨询类型 * ││
│ │ 咨询热线 │ │ │ ○ 加盟咨询 ││
│ │ 400-xxx-xxxx │ │ │ ○ 工程合作 ││
│ │ │ │ │ ○ 客户反馈 ││
│ │ 电子邮箱 │ │ │ ○ 其他 ││
│ │ contact@chuanggao.com │ │ │ ││
│ │ │ │ │ 您的姓名 * ││
│ │ 公司地址 │ │ │ [________________] ││
│ │ 广东省佛山市... │ │ │ ││
│ │ │ │ │ 联系电话 * ││
│ │ [查看地图位置] │ │ │ [________________] ││
│ │ │ │ │ ││
│ │ 关注我们 │ │ │ 电子邮箱 ││
│ │ [微信] [微博] [抖音] │ │ │ [________________] ││
│ │ │ │ │ ││
│ │ │ │ │ 公司名称 ││
│ └─────────────────────────────┘ │ │ [________________] ││
│ │ │ ││
│ │ │ 留言内容 * ││
│ │ │ [ ] ││
│ │ │ [ ] ││
│ │ │ ││
│ │ │ [ 提 交 ] ││
│ │ └────────────────────────┘│
├─────────────────────────────────────────────────────────────┤
│ 加盟流程图示 │
│ 咨询了解 → 实地考察 → 提交申请 → 签订合同 → 店面装修 → 开业 │
└─────────────────────────────────────────────────────────────┘
```
---
## 九、后台管理页面
### 9.1 后台布局（Layout.vue）
```
┌─────────────────────────────────────────────────────────────┐
│ ┌─────────┐ 创高家具管理系统 管理员 │ 退出 │
│ │ Logo │ │
├──────────┴──────────────────────────────────────────────────┤
│ ┌──────────┐ ┌─────────────────────────────────────────────┐│
│ │ │ │ ││
│ │ 控制台 │ │ ││
│ │ │ │ ││
│ ├──────────┤ │ ││
│ │ 内容管理 │ │ RouterView ││
│ │ ·轮播图 │ │ (后台页面内容) ││
│ │ ·页面区块│ │ ││
│ │ ·媒体库 │ │ ││
│ ├──────────┤ │ ││
│ │ 产品管理 │ │ ││
│ │ ·分类 │ │ ││
│ │ ·产品 │ └─────────────────────────────────────────────┘│
│ ├──────────┤ │
│ │ 案例管理 │ │
│ ├──────────┤ │
│ │ 新闻管理 │ │
│ ├──────────┤ │
│ │ 留言管理 │ │
│ ├──────────┤ │
│ │ 系统设置 │ │
│ │ ·公司信息│ │
│ │ ·管理员 │ │
│ │ ·操作日志│ │
│ └──────────┘ │
└─────────────────────────────────────────────────────────────┘
```
### 9.2 核心后台页面清单
| 页面 | 功能描述 |
|------|----------|
| **Dashboard** | 数据统计概览：今日访问、新增留言、待办事项 |
| **轮播图管理** | 增删改查轮播图，支持拖拽排序，预览效果 |
| **页面区块管理** | 可视化编辑首页各板块文本/图片，实时预览 |
| **媒体库** | 上传/查看/删除图片，显示MinIO直链，支持批量上传 |
| **产品分类** | 多级分类管理，图标上传，排序调整 |
| **产品管理** | 产品增删改查，富文本编辑，多图上传，参数配置 |
| **案例管理** | 案例增删改查，图片轮播排序，关联产品 |
| **新闻管理** | 新闻增删改查，发布/下线，置顶设置 |
| **留言管理** | 留言列表，状态筛选，回复功能 |
| **公司信息** | 编辑所有公司配置，SEO设置，上传logo/二维码 |
---
## 十、关键组件设计细节
### 10.1 HeroBanner（首屏轮播）
```vue
<!-- 特性 -->
- 全屏高度（100vh）
- 支持视频背景或图片背景
- 深色渐变遮罩（保证文字可读）
- 金属质感标题动画（GSAP）
- 响应式：移动端显示简化文案
- 支持手势滑动（移动端）
- 自动轮播 + 手动控制
```
### 10.2 ProductCard（产品卡片）
```vue
<!-- 悬停效果 -->
- 图片缩放 1.05
- 显示"查看详情"按钮（金色）
- 产品名称高亮
- 阴影加深
<!-- 布局 -->
- 图片区：宽高比 4:3
- 信息区：名称 + 价格（如显示）
- 移动端：单列布局
```
### 10.3 CaseCard（案例卡片）
```vue
<!-- 悬停效果 -->
- 图片轻微变暗
- 从底部滑入信息层
- 显示标题 + 地点/面积
- "查看案例"按钮
<!-- 布局 -->
- 瀑布流或等高分栏
- PC端：3列
- 平板：2列
- 手机：1列
```
### 10.4 LangSwitch（语言切换）
```vue
<!-- 设计 -->
- 简洁的下拉或按钮组
- 中文 / EN 切换
- 切换后刷新页面获取对应语言数据
- 记住选择（localStorage）
```
---
## 十一、响应式断点适配
### 11.1 首页响应式
| 元素 | PC (≥1200px) | 平板 (768-1199px) | 手机 (<768px) |
|------|--------------|-------------------|---------------|
| HeroBanner | 全屏高度 | 80vh高度 | 70vh高度 |
| 服务卡片 | 3列并排 | 2列+1列 | 单列堆叠 |
| 产品网格 | 4列 | 3列 | 2列 |
| 案例网格 | 3列 | 2列 | 1列 |
| 品牌实力数字 | 4列并排 | 2×2网格 | 2×2网格 |
### 11.2 导航响应式
| 设备 | 导航形式 |
|------|----------|
| PC | 水平导航，完整菜单 |
| 平板 | 水平导航，部分折叠 |
| 手机 | 汉堡菜单，全屏抽屉 |
---
## 十二、动画效果规划
### 12.1 入场动画
| 元素 | 动画 | 触发条件 |
|------|------|----------|
| Hero标题 | 从下向上滑入+淡入 | 页面加载 |
| 服务卡片 | 依次从下方弹入 | 滚动到视口 |
| 产品卡片 | 缩放淡入 | 滚动到视口 |
| 案例图片 | 从左/右滑入 | 滚动到视口 |
| 数字统计 | 数字递增动画 | 滚动到视口 |
### 12.2 交互动画
| 交互 | 动画效果 |
|------|----------|
| 导航悬停 | 下划线从左到右展开 |
| 按钮悬停 | 背景色渐变+轻微上移 |
| 卡片悬停 | 图片放大+阴影加深 |
| 页面切换 | 淡入淡出 |
| 图片加载 | 骨架屏→渐显 |
---
## 十三、SEO 结构
### 13.1 页面SEO配置
```typescript
// useSEO.ts 组合式函数
interface SEOConfig {
title: string
titleEn: string
keywords: string
keywordsEn: string
description: string
descriptionEn: string
ogImage?: string
}
// 每个页面调用
useSEO({
title: '产品中心',
titleEn: 'Products',
keywords: '全屋定制,家具,沙发,床',
keywordsEn: 'custom furniture,sofa,bed',
description: '创高家具产品中心...',
descriptionEn: 'ChuangGao Furniture products...',
})
```
### 13.2 路由元信息
```typescript
// router/portal.ts
meta: {
title: '产品中心',
titleEn: 'Products',
seo: {
keywords: '...',
description: '...',
}
}
```
### 13.3 SSR/预渲染建议
- 产品详情页：预渲染（重要SEO页面）
- 案例详情页：预渲染
- 新闻详情页：预渲染
- 列表页：客户端渲染 + 动态Meta
Reference in New Issue Copy Permalink