改版

产品网站内容填写模板.md

@@ -0,0 +1,430 @@
+# Chookoo 产品网站 — 内容填写模板
+
+> **使用说明**
+> 1. 本文档列出网站上所有需要填写的内容字段，请逐项填写。
+> 2. 所有文字内容需要 **中文** 和 **英文** 两个版本。
+> 3. 图片请提供源文件，并按要求的尺寸和命名规范提交。
+> 4. 填写完成后，将本文档和所有图片一起交给开发人员，我们会直接替换到网站上。
+> 5. 标有 **必填** 的字段为空则网页会显示异常，请务必填写。
+
+---
+
+## 一、品牌基础信息
+
+| 编号 | 字段名 | 填写说明 | 必填 | 填写内容（中文） | 填写内容（英文） |
+|------|--------|----------|------|------------------|------------------|
+| B1 | 品牌Slogan | 首页顶部标语，不超过15个字 | 是 | | |
+| B2 | 品牌介绍第1段 | "关于我们"区域的品牌故事第1段，3-5句话 | 是 | | |
+| B3 | 品牌介绍第2段 | 品牌故事第2段，3-5句话 | 否 | | |
+| B4 | 品牌介绍第3段 | 品牌故事第3段，1-2句总结性语句 | 否 | | |
+| B5 | 品牌理念关键词 | 3-4个关键词，用逗号分隔，如：科技,关爱,智能,守护 | 是 | | |
+| B6 | 联系电话 | 客服电话号码 | 是 | | |
+| B7 | 联系邮箱 | 客服邮箱地址 | 是 | | |
+| B8 | 公司地址 | 公司详细地址 | 是 | | |
+| B9 | 公司名称 | 用于页脚版权声明 | 是 | | |
+
+### 品牌相关图片
+
+| 编号 | 图片用途 | 尺寸要求 | 格式 | 说明 | 文件名（请使用此命名） |
+|------|----------|----------|------|------|------------------------|
+| BI1 | 网站Logo（导航栏） | **高度不低于 100px**，宽度自适应，背景透明 | PNG | 用于顶部导航栏和关于我们区域，深色背景上要清晰可见 | `logo.png` |
+| BI2 | 网站Logo（白色版） | **高度不低于 100px**，宽度自适应，背景透明 | PNG | 白色文字版本，用于深色页脚区域 | `白字logo.png` |
+| BI3 | 首页Hero背景图 | **3640 × 2048 px** 或同比例（16:9 横向） | JPG | 首页顶部全屏背景图，图片会铺满整个屏幕，重要内容请放在中间区域 | `hero.jpeg` |
+
+---
+
+## 二、轮播图（首页主展示区）
+
+> 网站首页主展示区有 **5张** 轮播幻灯片，每张展示一个产品或活动。
+> 请为每张幻灯片填写以下信息。
+
+### 幻灯片 1
+
+| 编号 | 字段名 | 填写说明 | 必填 | 填写内容（中文） | 填写内容（英文） |
+|------|--------|----------|------|------------------|------------------|
+| S1-1 | 幻灯片类型 | 填 `product`（产品展示）或 `activity`（活动）或 `notice`（公告） | 是 | | |
+| S1-2 | 产品主标题 | 如果类型是product，填产品名称；如果是activity/notice，填活动/公告标题 | 是 | | |
+| S1-3 | 产品副标题 | 一句话描述产品核心卖点，不超过20字 | 是 | | |
+| S1-4 | 活动公告内容 | 仅当类型为activity/notice时填写，1-2句详情 | 否 | | |
+
+**幻灯片1图片：**
+
+| 图片用途 | 尺寸要求 | 格式 | 说明 | 文件名 |
+|----------|----------|------|------|--------|
+| 产品主图 | **800 × 800 px**（正方形）或 **800 × 1000 px**（竖版），背景透明 | PNG | 产品主体图片，会居中显示在卡片中 | `slide-1-product.png` |
+| 角标小图（可选） | **200 × 200 px**（正方形），背景透明 | PNG | 右上角圆形小图标，如关联产品缩略图 | `slide-1-badge.png` |
+
+---
+
+### 幻灯片 2
+
+| 编号 | 字段名 | 填写说明 | 必填 | 填写内容（中文） | 填写内容（英文） |
+|------|--------|----------|------|------------------|------------------|
+| S2-1 | 幻灯片类型 | 同上 | 是 | | |
+| S2-2 | 产品主标题 | 同上 | 是 | | |
+| S2-3 | 产品副标题 | 同上 | 是 | | |
+| S2-4 | 活动公告内容 | 同上 | 否 | | |
+
+**幻灯片2图片：**
+
+| 图片用途 | 尺寸要求 | 格式 | 说明 | 文件名 |
+|----------|----------|------|------|--------|
+| 产品主图 | 同上 | PNG | | `slide-2-product.png` |
+| 角标小图（可选） | 同上 | PNG | | `slide-2-badge.png` |
+
+---
+
+### 幻灯片 3
+
+| 编号 | 字段名 | 填写说明 | 必填 | 填写内容（中文） | 填写内容（英文） |
+|------|--------|----------|------|------------------|------------------|
+| S3-1 | 幻灯片类型 | 同上 | 是 | | |
+| S3-2 | 产品主标题 | 同上 | 是 | | |
+| S3-3 | 产品副标题 | 同上 | 是 | | |
+| S3-4 | 活动公告内容 | 同上 | 否 | | |
+
+**幻灯片3图片：**
+
+| 图片用途 | 尺寸要求 | 格式 | 说明 | 文件名 |
+|----------|----------|------|------|--------|
+| 产品主图 | 同上 | PNG | | `slide-3-product.png` |
+| 角标小图（可选） | 同上 | PNG | | `slide-3-badge.png` |
+
+---
+
+### 幻灯片 4
+
+| 编号 | 字段名 | 填写说明 | 必填 | 填写内容（中文） | 填写内容（英文） |
+|------|--------|----------|------|------------------|------------------|
+| S4-1 | 幻灯片类型 | 同上 | 是 | | |
+| S4-2 | 产品主标题 | 同上 | 是 | | |
+| S4-3 | 产品副标题 | 同上 | 是 | | |
+| S4-4 | 活动公告内容 | 同上 | 否 | | |
+
+**幻灯片4图片：**
+
+| 图片用途 | 尺寸要求 | 格式 | 说明 | 文件名 |
+|----------|----------|------|------|--------|
+| 产品主图 | 同上 | PNG | | `slide-4-product.png` |
+| 角标小图（可选） | 同上 | PNG | | `slide-4-badge.png` |
+
+---
+
+### 幻灯片 5
+
+| 编号 | 字段名 | 填写说明 | 必填 | 填写内容（中文） | 填写内容（英文） |
+|------|--------|----------|------|------------------|------------------|
+| S5-1 | 幻灯片类型 | 同上 | 是 | | |
+| S5-2 | 产品主标题 | 同上 | 是 | | |
+| S5-3 | 产品副标题 | 同上 | 是 | | |
+| S5-4 | 活动公告内容 | 同上 | 否 | | |
+
+**幻灯片5图片：**
+
+| 图片用途 | 尺寸要求 | 格式 | 说明 | 文件名 |
+|----------|----------|------|------|--------|
+| 产品主图 | 同上 | PNG | | `slide-5-product.png` |
+| 角标小图（可选） | 同上 | PNG | | `slide-5-badge.png` |
+
+---
+
+## 三、产品卡片（首页底部产品列表）
+
+> 首页底部展示 **5张** 产品卡片，横向排列，可滚动。点击卡片后上方展示区会显示该产品的详细信息。
+
+### 产品卡片公共图片要求
+
+| 图片用途 | 尺寸要求 | 格式 | 说明 |
+|----------|----------|------|------|
+| 产品卡片缩略图 | **400 × 400 px**（正方形），背景透明 | PNG | 用于卡片上的小缩略图，会被裁剪显示在 **175 × 90 px** 的区域内 |
+| 产品展示区大图 | **800 × 1000 px**（竖版）或 **800 × 800 px**（正方形），背景透明 | PNG | 用于点击卡片后在上方展示区显示的大图，会被显示在 **400 × 220 px** 的区域内 |
+
+---
+
+### 产品卡片 1
+
+| 编号 | 字段名 | 填写说明 | 必填 | 填写内容（中文） | 填写内容（英文） |
+|------|--------|----------|------|------------------|------------------|
+| C1-1 | 产品ID | 英文唯一标识符，只能用小写字母、数字和连字符，如 `cat-toilet-pro` | 是 | | — |
+| C1-2 | 适用宠物 | 填 `cat`（猫）、`dog`（狗）或 `both`（通用） | 是 | | — |
+| C1-3 | 产品名称 | 卡片上显示的产品名称，不超过8个字 | 是 | | |
+| C1-4 | 产品副标题 | 卡片上一句话描述，不超过15个字 | 是 | | |
+| C1-5 | 展示区副标题 | 点击后上方展示区的详细描述，2-3句话 | 是 | | |
+| C1-6 | 特性1 | 展示区产品特性，每条不超过15字 | 是 | | |
+| C1-7 | 特性2 | 同上 | 是 | | |
+| C1-8 | 特性3 | 同上 | 是 | | |
+| C1-9 | 特性4 | 同上 | 是 | | |
+
+| 图片 | 文件名 |
+|------|--------|
+| 卡片缩略图 | `product-1-thumb.png` |
+| 展示区大图 | `product-1-display.png` |
+
+---
+
+### 产品卡片 2
+
+| 编号 | 字段名 | 填写说明 | 必填 | 填写内容（中文） | 填写内容（英文） |
+|------|--------|----------|------|------------------|------------------|
+| C2-1 | 产品ID | 同上 | 是 | | — |
+| C2-2 | 适用宠物 | 同上 | 是 | | — |
+| C2-3 | 产品名称 | 同上 | 是 | | |
+| C2-4 | 产品副标题 | 同上 | 是 | | |
+| C2-5 | 展示区副标题 | 同上 | 是 | | |
+| C2-6 | 特性1 | 同上 | 是 | | |
+| C2-7 | 特性2 | 同上 | 是 | | |
+| C2-8 | 特性3 | 同上 | 是 | | |
+| C2-9 | 特性4 | 同上 | 是 | | |
+
+| 图片 | 文件名 |
+|------|--------|
+| 卡片缩略图 | `product-2-thumb.png` |
+| 展示区大图 | `product-2-display.png` |
+
+---
+
+### 产品卡片 3
+
+| 编号 | 字段名 | 填写说明 | 必填 | 填写内容（中文） | 填写内容（英文） |
+|------|--------|----------|------|------------------|------------------|
+| C3-1 | 产品ID | 同上 | 是 | | — |
+| C3-2 | 适用宠物 | 同上 | 是 | | — |
+| C3-3 | 产品名称 | 同上 | 是 | | |
+| C3-4 | 产品副标题 | 同上 | 是 | | |
+| C3-5 | 展示区副标题 | 同上 | 是 | | |
+| C3-6 | 特性1 | 同上 | 是 | | |
+| C3-7 | 特性2 | 同上 | 是 | | |
+| C3-8 | 特性3 | 同上 | 是 | | |
+| C3-9 | 特性4 | 同上 | 是 | | |
+
+| 图片 | 文件名 |
+|------|--------|
+| 卡片缩略图 | `product-3-thumb.png` |
+| 展示区大图 | `product-3-display.png` |
+
+---
+
+### 产品卡片 4
+
+| 编号 | 字段名 | 填写说明 | 必填 | 填写内容（中文） | 填写内容（英文） |
+|------|--------|----------|------|------------------|------------------|
+| C4-1 | 产品ID | 同上 | 是 | | — |
+| C4-2 | 适用宠物 | 同上 | 是 | | — |
+| C4-3 | 产品名称 | 同上 | 是 | | |
+| C4-4 | 产品副标题 | 同上 | 是 | | |
+| C4-5 | 展示区副标题 | 同上 | 是 | | |
+| C4-6 | 特性1 | 同上 | 是 | | |
+| C4-7 | 特性2 | 同上 | 是 | | |
+| C4-8 | 特性3 | 同上 | 是 | | |
+| C4-9 | 特性4 | 同上 | 是 | | |
+
+| 图片 | 文件名 |
+|------|--------|
+| 卡片缩略图 | `product-4-thumb.png` |
+| 展示区大图 | `product-4-display.png` |
+
+---
+
+### 产品卡片 5
+
+| 编号 | 字段名 | 填写说明 | 必填 | 填写内容（中文） | 填写内容（英文） |
+|------|--------|----------|------|------------------|------------------|
+| C5-1 | 产品ID | 同上 | 是 | | — |
+| C5-2 | 适用宠物 | 同上 | 是 | | — |
+| C5-3 | 产品名称 | 同上 | 是 | | |
+| C5-4 | 产品副标题 | 同上 | 是 | | |
+| C5-5 | 展示区副标题 | 同上 | 是 | | |
+| C5-6 | 特性1 | 同上 | 是 | | |
+| C5-7 | 特性2 | 同上 | 是 | | |
+| C5-8 | 特性3 | 同上 | 是 | | |
+| C5-9 | 特性4 | 同上 | 是 | | |
+
+| 图片 | 文件名 |
+|------|--------|
+| 卡片缩略图 | `product-5-thumb.png` |
+| 展示区大图 | `product-5-display.png` |
+
+---
+
+## 四、产品详情页
+
+> 以下信息会显示在点击"了解更多"后跳转的产品详情页。
+> 产品ID必须与上面"产品卡片"中的ID一致。
+> 目前网站支持最多 **14个** 产品详情页。
+
+### 每个产品需要填写的内容模板
+
+> 请复制以下模板，每个产品填一份。
+
+#### 产品：___________（产品ID：___________）
+
+**基本信息：**
+
+| 编号 | 字段名 | 填写说明 | 必填 | 填写内容（中文） | 填写内容（英文） |
+|------|--------|----------|------|------------------|------------------|
+| D-1 | 产品标签 | 1-3个标签，用逗号分隔。可选标签类型：猫用/狗用/通用/热销/新品/配件/服务。英文对应：For Cats / For Dogs / Universal / Bestseller / New / Accessory / Service | 是 | | |
+| D-2 | 产品副标题 | 详情页顶部的一句产品描述，不超过25字 | 是 | | |
+
+**产品亮点（4条）：**
+
+| 编号 | 填写说明 | 必填 | 中文内容 | 英文内容 |
+|------|----------|------|----------|----------|
+| D-H1 | 第1个亮点，如"毫米波雷达监测心率呼吸"，不超过15字 | 是 | | |
+| D-H2 | 第2个亮点 | 是 | | |
+| D-H3 | 第3个亮点 | 是 | | |
+| D-H4 | 第4个亮点 | 是 | | |
+
+**产品特性（4组）：**
+
+> 每组特性包含：图标颜色、标题、描述文字。图标颜色只能从以下4种中选择一种：
+> - `blue`（蓝色 — 适合技术/监测类特性）
+> - `green`（绿色 — 适合环保/清洁类特性）
+> - `purple`（紫色 — 适合智能/APP类特性）
+> - `orange`（橙色 — 适合安全/保障类特性）
+
+| 编号 | 图标颜色 | 标题（中文） | 标题（英文） | 描述（中文，不超过25字） | 描述（英文） |
+|------|----------|-------------|-------------|-------------------------|-------------|
+| D-F1 | blue/green/purple/orange | | | | |
+| D-F2 | blue/green/purple/orange | | | | |
+| D-F3 | blue/green/purple/orange | | | | |
+| D-F4 | blue/green/purple/orange | | | | |
+
+**产品规格表：**
+
+> 规格行数不限，按实际产品参数填写。每行包含：参数名称（中英文）、参数值。
+
+| 参数名称（中文） | 参数名称（英文） | 参数值 |
+|-----------------|-----------------|--------|
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+
+**产品图片：**
+
+| 图片用途 | 尺寸要求 | 格式 | 说明 | 文件名 |
+|----------|----------|------|------|--------|
+| 产品主图 | **800 × 800 px**（正方形），背景透明 | PNG | 详情页左侧大图展示，区域为正方形 | `detail-{产品ID}-main.png` |
+| 缩略图（可选） | **160 × 160 px**（正方形），背景透明 | PNG | 主图下方的小缩略图，如有多角度视图可提供多张 | `detail-{产品ID}-thumb-1.png` |
+
+---
+
+## 五、宠物故事（首页故事卡片）
+
+> 首页底部展示 **3条** 宠物故事卡片。
+
+### 故事卡片图片要求
+
+| 图片用途 | 尺寸要求 | 格式 | 说明 |
+|----------|----------|------|------|
+| 故事封面图 | **600 × 400 px**（3:2 横向），或 **800 × 450 px**（16:9 横向） | JPG | 故事卡片的封面图片，显示在 **宽度自适应 × 220px** 高的区域内 |
+| 作者头像 | **80 × 80 px**（正方形） | JPG/PNG | 圆形头像，显示为 **36 × 36 px** 的圆形 |
+
+---
+
+### 故事 1
+
+| 编号 | 字段名 | 填写说明 | 必填 | 填写内容（中文） | 填写内容（英文） |
+|------|--------|----------|------|------------------|------------------|
+| ST1-1 | 故事标题 | 不超过12个字 | 是 | | |
+| ST1-2 | 故事摘要 | 2-3句话的简介，不超过50字 | 是 | | |
+| ST1-3 | 标签1 | 故事分类标签，如：健康恢复、AI识别、暖心故事 | 是 | | |
+| ST1-4 | 标签2 | 同上 | 否 | | |
+| ST1-5 | 作者昵称 | 如"小橘妈妈" | 是 | | |
+| ST1-6 | 宠物信息 | 品种和年龄，如"橘猫 · 3岁" | 是 | | |
+
+| 图片 | 文件名 |
+|------|--------|
+| 故事封面图 | `story-1-cover.jpg` |
+| 作者头像 | `story-1-avatar.jpg` |
+
+---
+
+### 故事 2
+
+| 编号 | 字段名 | 填写说明 | 必填 | 填写内容（中文） | 填写内容（英文） |
+|------|--------|----------|------|------------------|------------------|
+| ST2-1 | 故事标题 | 不超过12个字 | 是 | | |
+| ST2-2 | 故事摘要 | 2-3句话，不超过50字 | 是 | | |
+| ST2-3 | 标签1 | 同上 | 是 | | |
+| ST2-4 | 标签2 | 同上 | 否 | | |
+| ST2-5 | 作者昵称 | 同上 | 是 | | |
+| ST2-6 | 宠物信息 | 同上 | 是 | | |
+
+| 图片 | 文件名 |
+|------|--------|
+| 故事封面图 | `story-2-cover.jpg` |
+| 作者头像 | `story-2-avatar.jpg` |
+
+---
+
+### 故事 3
+
+| 编号 | 字段名 | 填写说明 | 必填 | 填写内容（中文） | 填写内容（英文） |
+|------|--------|----------|------|------------------|------------------|
+| ST3-1 | 故事标题 | 不超过12个字 | 是 | | |
+| ST3-2 | 故事摘要 | 2-3句话，不超过50字 | 是 | | |
+| ST3-3 | 标签1 | 同上 | 是 | | |
+| ST3-4 | 标签2 | 同上 | 否 | | |
+| ST3-5 | 作者昵称 | 同上 | 是 | | |
+| ST3-6 | 宠物信息 | 同上 | 是 | | |
+
+| 图片 | 文件名 |
+|------|--------|
+| 故事封面图 | `story-3-cover.jpg` |
+| 作者头像 | `story-3-avatar.jpg` |
+
+---
+
+## 六、二维码图片
+
+> 以下二维码图片用于页脚和弹窗中展示。
+
+| 编号 | 二维码用途 | 显示尺寸 | 建议源图尺寸 | 格式 | 说明 | 文件名 |
+|------|-----------|----------|-------------|------|------|--------|
+| QR1 | 微信公众号 | 80×80px（页脚）/ 120×120px（弹窗） | **240 × 240 px** | PNG | 微信公众号二维码 | `qr-wechat.png` |
+| QR2 | 微博 | 同上 | **240 × 240 px** | PNG | 微博二维码 | `qr-weibo.png` |
+| QR3 | 小红书 | 同上 | **240 × 240 px** | PNG | 小红书二维码 | `qr-xiaohongshu.png` |
+| QR4 | 抖音/TikTok | 同上 | **240 × 240 px** | PNG | 抖音二维码 | `qr-tiktok.png` |
+| QR5 | 在线商城 | 160×160px（弹窗） | **320 × 320 px** | PNG | 在线商城/店铺二维码 | `qr-shop.png` |
+| QR6 | 联系咨询 | 160×160px（弹窗） | **320 × 320 px** | PNG | 客服/咨询二维码 | `qr-contact.png` |
+| QR7 | 视频号 | 120×120px（弹窗） | **240 × 240 px** | PNG | 视频号二维码 | `qr-video.png` |
+| QR8 | 抖音（故事页） | 120×120px（弹窗） | **240 × 240 px** | PNG | 抖音二维码（故事页专用） | `qr-douyin.png` |
+
+---
+
+## 七、图片尺寸汇总速查表
+
+| 图片类型 | 建议源图尺寸 | 比例 | 格式 | 是否需要透明背景 |
+|----------|-------------|------|------|----------------|
+| 导航栏Logo | 高度 ≥ 100px，宽度自适应 | 自由 | PNG | **是** |
+| 白色版Logo | 高度 ≥ 100px，宽度自适应 | 自由 | PNG | **是**（白色文字） |
+| Hero背景图 | **3640 × 2048 px** | 16:9 | JPG | 否 |
+| 轮播图产品主图 | **800 × 800 px** | 1:1 | PNG | **是** |
+| 轮播图角标小图 | **200 × 200 px** | 1:1 | PNG | **是** |
+| 产品卡片缩略图 | **400 × 400 px** | 1:1 | PNG | **是** |
+| 产品展示区大图 | **800 × 1000 px** | 4:5 | PNG | **是** |
+| 详情页产品主图 | **800 × 800 px** | 1:1 | PNG | **是** |
+| 详情页缩略图 | **160 × 160 px** | 1:1 | PNG | **是** |
+| 故事封面图 | **800 × 450 px** | 16:9 | JPG | 否 |
+| 故事作者头像 | **80 × 80 px** | 1:1 | JPG/PNG | 否（圆形裁剪） |
+| 二维码（页脚） | **240 × 240 px** | 1:1 | PNG | 否 |
+| 二维码（弹窗大图） | **320 × 320 px** | 1:1 | PNG | 否 |
+
+---
+
+## 八、填写检查清单
+
+填写完成后，请对照以下清单自查：
+
+- [ ] 品牌基础信息（B1-B9）全部已填写
+- [ ] 5张轮播幻灯片（S1-S5）内容已填写
+- [ ] 5张产品卡片（C1-C5）内容已填写
+- [ ] 每个产品的详情页信息（D系列）已填写
+- [ ] 3条宠物故事（ST1-ST3）内容已填写
+- [ ] 所有需要的中英文双语内容都已填写
+- [ ] 所有图片已按要求的尺寸和格式准备好
+- [ ] 图片文件名与模板中指定的文件名一致
+- [ ] 二维码图片（QR1-QR8）已准备（如暂无可后续补充）