# 创高家具官网 - 前端页面框架设计 ## 一、页面结构总览 ``` ┌─────────────────────────────────────────────────────────────┐ │ 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 ``` --- ## 三、产品中心（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