改版
This commit is contained in:
@@ -1,7 +1,20 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(git config:*)"
|
||||
"Bash(git config:*)",
|
||||
"Bash(node -c index.html)",
|
||||
"Bash(node -c)",
|
||||
"Bash(python3 -c ':*)",
|
||||
"Bash(python -c ':*)",
|
||||
"Bash(powershell -Command ':*)",
|
||||
"Bash(python -c \"import openpyxl; print\\(openpyxl.__version__\\)\")",
|
||||
"Bash(pip install:*)",
|
||||
"Bash(python -c \"import openpyxl; print\\('ok'\\)\")",
|
||||
"Bash(python generate_template.py)",
|
||||
"Bash(python -c \"import sys; sys.stdout.reconfigure\\(encoding='utf-8'\\); print\\(sys.stdin.read\\(\\)\\)\")",
|
||||
"Bash(python -u -c \"exec\\(open\\('_build_excel.py', encoding='utf-8'\\).read\\(\\) if __import__\\('os'\\).path.exists\\('_build_excel.py'\\) else print\\('need to write builder'\\)\\)\")",
|
||||
"Bash(ls -la *.html *.py *.xlsx *.md)",
|
||||
"Bash(ls -la *.png *.jpg *.jpeg)"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
Binary file not shown.
+117
@@ -0,0 +1,117 @@
|
||||
# -*- coding: utf-8 -*-
|
||||
# Data definitions for the Excel template generator
|
||||
# Imported by generate_template.py
|
||||
|
||||
slides = [
|
||||
(1, "product", "cat.png"),
|
||||
(2, "product", "dog.jpeg"),
|
||||
(3, "activity", None),
|
||||
(4, "product", "feeder.png"),
|
||||
(5, "notice", None),
|
||||
(6, "product", "water.png"),
|
||||
(7, "activity", None),
|
||||
(8, "product", "camera(1).jpg"),
|
||||
]
|
||||
|
||||
hp = [
|
||||
("1", "cat.png", "智能猫厕所"),
|
||||
("2", "dog.jpeg", "智能狗厕所"),
|
||||
("3", "feeder.png", "智能喂食器"),
|
||||
("4", "water.jpeg", "智能饮水机"),
|
||||
("5", "camera.jpeg", "AI宠物摄像头"),
|
||||
]
|
||||
|
||||
lp = [
|
||||
("cat-toilet-pro", "智能猫厕所 Pro", "cat.png", "猫用,热销"),
|
||||
("cat-toilet-lite", "智能猫厕所 Lite", "cat.png", "猫用,新品"),
|
||||
("dog-toilet", "智能狗厕所", "dog.jpeg", "狗用"),
|
||||
("smart-feeder", "智能喂食器", "feeder.png", "通用,热销"),
|
||||
("smart-fountain", "智能饮水机", "water.jpeg", "通用"),
|
||||
("cat-food-bucket", "智能猫粮桶", "cat.png", "猫用"),
|
||||
("dog-food-bucket", "智能狗粮桶", "dog.jpeg", "狗用"),
|
||||
("ai-camera", "AI宠物摄像头", "camera.jpeg", "通用,新品"),
|
||||
("health-tracker", "宠物健康追踪器", "cat.png", "通用"),
|
||||
("environment-monitor", "环境监测仪", "dog.jpeg", "通用"),
|
||||
("filter-set", "替换滤网套装", "cat.png", "配件"),
|
||||
("cleaning-kit", "清洁耗材包", "dog.jpeg", "配件"),
|
||||
("power-adapter", "备用电源适配器", "cat.png", "配件"),
|
||||
("extended-warranty", "延长保修服务", "dog.jpeg", "服务"),
|
||||
]
|
||||
|
||||
sd = [
|
||||
("story-1", "小橘的逆袭日记", "cat.png", "cat.png", "健康恢复", "橘猫", "小橘妈妈", "上海", "2024.03"),
|
||||
("story-2", "旺财的健身日记", "dog.jpeg", "dog.jpeg", "体重管理", "金毛", "旺财爸爸", "北京", "2024.02"),
|
||||
("story-3", "布丁的日常", "cat.png", "cat.png", "AI识别", "英短", "布丁姐姐", "深圳", "2024.01"),
|
||||
("story-4", "豆豆的饮水日记", "dog.jpeg", "dog.jpeg", "饮水健康", "柯基", "豆豆妈妈", "杭州", "2024.01"),
|
||||
("story-5", "咪咪的健康守护", "cat.png", "cat.png", "健康监测", "美短", "咪咪妈妈", "广州", "2023.12"),
|
||||
("story-6", "大黄的如厕训练", "dog.jpeg", "dog.jpeg", "训练养成", "田园犬", "大黄爸爸", "成都", "2023.11"),
|
||||
]
|
||||
|
||||
article_pages = [
|
||||
("五、文章-公司介绍", "8B5CF6", [
|
||||
("201", "关于Chookoo宠科", "公司简介需大幅扩充3-5段"),
|
||||
("202", "我们的使命", "企业使命2-3段"),
|
||||
("203", "热招职位", "真实职位/要求/待遇"),
|
||||
("204", "A轮融资", "真实新闻稿"),
|
||||
("205", "品牌起源", "品牌故事3-5段"),
|
||||
], "全是占位需大幅扩充"),
|
||||
("六、文章-合作伙伴", "F59E0B", [
|
||||
("301", "经销商入驻", "入驻资格/流程/标准"),
|
||||
("302", "经销商政策", "区域保护/价格/返利"),
|
||||
("303", "推广联盟", "佣金/结算/素材"),
|
||||
("304", "企业采购", "折扣/定制/流程"),
|
||||
("305", "技术合作", "API/模式/流程"),
|
||||
], "全是占位需大幅扩充"),
|
||||
("七、文章-法律条款", "DC2626", [
|
||||
("401", "隐私政策", "法务起草:数据收集/使用/存储/共享"),
|
||||
("402", "服务条款", "法务起草:使用规范/免责/争议"),
|
||||
("403", "Cookie说明", "类型/管理/第三方列表"),
|
||||
], "全是占位需法务起草"),
|
||||
]
|
||||
|
||||
app_fields = [
|
||||
("APP-1", "Badge标签", "顶部标签", "是", "全球独家", ""),
|
||||
("APP-2", "主标题", "", "是", "Chookoo App", ""),
|
||||
("APP-3", "副标题", "核心描述", "是", "AI宠物健康平台...", ""),
|
||||
("APP-4", "核心标题", "", "是", "AI宠物健康平台", ""),
|
||||
("APP-5", "核心描述", "", "是", "全球独家毫米波雷达...", ""),
|
||||
("APP-6", "特性1标题", "", "是", "毫米波雷达监测", ""),
|
||||
("APP-7", "特性1描述", "", "是", "24小时无感监测...", ""),
|
||||
("APP-8", "特性2标题", "", "是", "红外体温检测", ""),
|
||||
("APP-9", "特性2描述", "", "是", "精准红外测温...", ""),
|
||||
("APP-10", "特性3标题", "", "是", "AI健康预警", ""),
|
||||
("APP-11", "特性3描述", "", "是", "基于AI算法...", ""),
|
||||
("APP-12", "特性4标题", "", "是", "多设备生态联动", ""),
|
||||
("APP-13", "特性4描述", "", "是", "喂食器猫砂盆...", ""),
|
||||
("APP-14", "数据:用户数", "确认真实性", "审核", "100万+", ""),
|
||||
("APP-15", "数据:数据点", "确认真实性", "审核", "10亿+", ""),
|
||||
("APP-16", "数据:国家数", "确认真实性", "审核", "30+", ""),
|
||||
("APP-17", "数据:评分", "确认真实性", "审核", "4.9", ""),
|
||||
("APP-18", "App Store", "实际URL", "是", "(空)", ""),
|
||||
("APP-19", "Google Play", "实际URL", "是", "(空)", ""),
|
||||
("APP-20", "APK链接", "安卓URL", "否", "(空)", ""),
|
||||
]
|
||||
|
||||
help_articles = [
|
||||
("安装指导", "101|智能猫厕所安装指南"),
|
||||
("安装指导", "102|智能饮水机安装指南"),
|
||||
("安装指导", "103|智能喂食器安装指南"),
|
||||
("安装指导", "104|WiFi配网教程"),
|
||||
("安装指导", "105|指示灯状态说明"),
|
||||
("智能猫厕所", "1|支持哪些猫砂"),
|
||||
("智能猫厕所", "2|引导猫咪使用"),
|
||||
("智能猫厕所", "3|设备离线"),
|
||||
("智能猫厕所", "4|更换集便袋"),
|
||||
("智能饮水机", "5|更换滤芯"),
|
||||
("智能饮水机", "6|水泵噪音"),
|
||||
("智能饮水机", "7|清洗饮水机"),
|
||||
("智能喂食器", "8|出粮不准"),
|
||||
("智能喂食器", "9|断网工作"),
|
||||
("智能喂食器", "10|设置喂食计划"),
|
||||
("APP使用", "11|注册账号"),
|
||||
("APP使用", "12|添加设备"),
|
||||
("APP使用", "13|分享设备"),
|
||||
("其他问题", "14|保修政策"),
|
||||
("其他问题", "15|联系售后"),
|
||||
("其他问题", "16|购买渠道"),
|
||||
]
|
||||
@@ -0,0 +1,4 @@
|
||||
import json, sys
|
||||
sys.stdout.reconfigure(encoding="utf-8")
|
||||
# This script reads generate_template.py and runs it
|
||||
exec(open("generate_template.py", encoding="utf-8").read())
|
||||
@@ -0,0 +1,217 @@
|
||||
# -*- coding: utf-8 -*-
|
||||
"""
|
||||
Chookoo 产品网站内容填写模板 - Excel 生成器
|
||||
运行: python generate_template.py
|
||||
输出: 产品网站内容填写模板.xlsx
|
||||
"""
|
||||
import sys
|
||||
sys.stdout.reconfigure(encoding="utf-8")
|
||||
from openpyxl import Workbook
|
||||
from openpyxl.styles import Font, PatternFill, Alignment, Border, Side
|
||||
from openpyxl.utils import get_column_letter
|
||||
from _build_data import slides, hp, lp, sd, article_pages, app_fields, help_articles
|
||||
|
||||
wb = Workbook()
|
||||
thin = Side(style="thin", color="CCCCCC")
|
||||
bd = Border(left=thin, top=thin, right=thin, bottom=thin)
|
||||
hf = Font(name="Microsoft YaHei", size=11, bold=True, color="FFFFFF")
|
||||
hfl = PatternFill(start_color="2F6BFF", end_color="2F6BFF", fill_type="solid")
|
||||
sf = Font(name="Microsoft YaHei", size=10, bold=True, color="FFFFFF")
|
||||
sfl = PatternFill(start_color="4B5563", end_color="4B5563", fill_type="solid")
|
||||
nf = Font(name="Microsoft YaHei", size=10)
|
||||
bf = Font(name="Microsoft YaHei", size=10, bold=True)
|
||||
xf = Font(name="Microsoft YaHei", size=10, color="888888")
|
||||
rf = Font(name="Microsoft YaHei", size=10, color="DC2626", bold=True)
|
||||
inp = PatternFill(start_color="FEF3C7", end_color="FEF3C7", fill_type="solid")
|
||||
rev = PatternFill(start_color="DBEAFE", end_color="DBEAFE", fill_type="solid")
|
||||
wa = Alignment(wrap_text=True, vertical="center", horizontal="left")
|
||||
ca = Alignment(wrap_text=True, vertical="center", horizontal="center")
|
||||
|
||||
def hdr(ws, row, cols):
|
||||
for c in range(1, cols+1):
|
||||
cl = ws.cell(row=row, column=c); cl.font = hf; cl.fill = hfl; cl.alignment = ca; cl.border = bd
|
||||
|
||||
def sec(ws, row, cols, txt=""):
|
||||
ws.merge_cells(start_row=row, start_column=1, end_row=row, end_column=cols)
|
||||
cl = ws.cell(row=row, column=1, value=txt); cl.font = sf; cl.fill = sfl; cl.alignment = Alignment(vertical="center")
|
||||
for c in range(1, cols+1): ws.cell(row=row, column=c).border = bd
|
||||
|
||||
def rw(ws, r, vals, fill_cols=None, ft="inp"):
|
||||
for c, v in enumerate(vals, 1):
|
||||
cl = ws.cell(row=r, column=c, value=v); cl.font = nf; cl.alignment = wa; cl.border = bd
|
||||
if fill_cols and c in fill_cols: cl.fill = inp if ft == "inp" else rev
|
||||
|
||||
def sw(ws, widths):
|
||||
for i, w in enumerate(widths, 1): ws.column_dimensions[get_column_letter(i)].width = w
|
||||
|
||||
# ========== Sheet 0: 填写说明 ==========
|
||||
ws0 = wb.active; ws0.title = "填写说明"; ws0.sheet_properties.tabColor = "EF4444"
|
||||
sw(ws0, [90, 70])
|
||||
ws0.cell(row=1, column=1, value="Chookoo 产品网站 - 内容填写说明").font = Font(name="Microsoft YaHei", size=14, bold=True, color="2F6BFF")
|
||||
info = [("", ""), ("颜色含义", ""), ("深黄底色", "必填 - 空着会导致网页显示异常"), ("浅蓝底色", "仅审核 - 已有内容需确认"),
|
||||
("", ""), ("工作表说明", ""),
|
||||
("一、轮播图", "首页8张轮播幻灯片(产品/活动/公告)，中英文+图片"),
|
||||
("二、产品卡片", "首页5张+列表页14张卡片，中英文标题/描述+图片"),
|
||||
("三、产品详情", "14个产品详情页: 标签/亮点/特性/规格/图片"),
|
||||
("四、宠物故事", "6个故事: 卡片摘要+详情页5段正文+3亮点+图片"),
|
||||
("五、文章-公司介绍", "5篇(全是占位需大幅扩充)"),
|
||||
("六、文章-合作伙伴", "5篇(全是占位需大幅扩充)"),
|
||||
("七、文章-法律条款", "3篇(全是占位需法务起草)"),
|
||||
("八、文章-App页面", "基本完成需审核数据+补充下载链接"),
|
||||
("九、文章-帮助中心", "21篇已有详细文章仅审核确认"),
|
||||
("", ""), ("图片尺寸速查", "")]
|
||||
r = 3
|
||||
for a, b in info:
|
||||
ws0.cell(row=r, column=1, value=a).font = bf if a else nf
|
||||
ws0.cell(row=r, column=2, value=b).font = nf; r += 1
|
||||
iref = [("图片类型","建议源图尺寸","比例","格式","透明背景"),("轮播图主图","800x800px","1:1","PNG","是"),
|
||||
("轮播图角标","200x200px","1:1","PNG","是"),("产品卡片图","400x400px","1:1","PNG","是"),
|
||||
("展示区大图","800x1000px","4:5","PNG","是"),("详情页主图","800x800px","1:1","PNG","是"),
|
||||
("故事封面","800x450px","16:9","JPG","否"),("故事头像","80x80px","1:1","JPG/PNG","否(圆形)"),
|
||||
("二维码","240x240px","1:1","PNG","否")]
|
||||
for i, vals in enumerate(iref):
|
||||
for c, v in enumerate(vals, 1):
|
||||
cl = ws0.cell(row=r, column=c, value=v); cl.font = hf if i==0 else nf
|
||||
if i==0: cl.fill = hfl
|
||||
cl.border = bd; cl.alignment = wa
|
||||
r += 1
|
||||
|
||||
# ========== Sheet 1: 轮播图 ==========
|
||||
ws1 = wb.create_sheet("一、轮播图"); ws1.sheet_properties.tabColor = "06B6D4"
|
||||
sw(ws1, [10, 22, 50, 8, 35, 35])
|
||||
for c, h in enumerate(["编号","字段名","填写说明","必填","中文","英文"], 1): ws1.cell(row=1, column=c, value=h)
|
||||
hdr(ws1, 1, 6); r = 2
|
||||
for idx, stype, img in slides:
|
||||
sec(ws1, r, 6, f"幻灯片{idx}(类型:{stype})"); r += 1
|
||||
fields = [(f"S{idx}-1","类型","product/activity/notice","是",stype,stype),
|
||||
(f"S{idx}-2","中文主标题","产品名或活动标题","是","",""),
|
||||
(f"S{idx}-3","中文副标题","一句话卖点","是","",""),
|
||||
(f"S{idx}-4","英文主标题","English title","是","",""),
|
||||
(f"S{idx}-5","英文副标题","English subtitle","是","","")]
|
||||
if stype in ("activity","notice"):
|
||||
fields += [(f"S{idx}-6","中文详情","活动/公告内容","是","",""),(f"S{idx}-7","英文详情","English details","是","","")]
|
||||
for vals in fields: rw(ws1, r, vals, fill_cols={5,6}); r += 1
|
||||
rw(ws1, r, [f"S{idx}-IMG","主图","800x800px PNG透明","是","当前:",img or "(无)"])
|
||||
ws1.cell(row=r, column=5).font = xf; r += 1; r += 1
|
||||
|
||||
# ========== Sheet 2: 产品卡片 ==========
|
||||
ws2 = wb.create_sheet("二、产品卡片"); ws2.sheet_properties.tabColor = "10B981"
|
||||
sw(ws2, [10, 18, 48, 8, 35, 35])
|
||||
sec(ws2, 1, 6, "首页产品卡片(5张)"); r = 2
|
||||
for c, h in enumerate(["编号","字段名","填写说明","必填","中文","英文"], 1): ws2.cell(row=r, column=c, value=h)
|
||||
hdr(ws2, r, 6); r += 1
|
||||
for pid, img, name in hp:
|
||||
sec(ws2, r, 6, f"产品{pid}: {name}"); r += 1
|
||||
for vals in [(f"HP{pid}-1","名称","不超过8字","是",name,""),(f"HP{pid}-2","副标题","不超过20字","是","",""),
|
||||
(f"HP{pid}-3","特性1","不超过15字","是","",""),(f"HP{pid}-4","特性2","不超过15字","是","",""),
|
||||
(f"HP{pid}-5","特性3","不超过15字","是","",""),(f"HP{pid}-6","特性4","不超过15字","是","","")]:
|
||||
rw(ws2, r, vals, fill_cols={5,6}); r += 1
|
||||
rw(ws2, r, [f"HP{pid}-IMG","图片","400x400px PNG","是","当前:",img])
|
||||
ws2.cell(row=r, column=5).font = xf; r += 2
|
||||
sec(ws2, r, 6, "列表页卡片(14张)"); r += 1
|
||||
for c, h in enumerate(["编号","字段名","填写说明","必填","中文","英文"], 1): ws2.cell(row=r, column=c, value=h)
|
||||
hdr(ws2, r, 6); r += 1
|
||||
for pid, name, img, tags in lp:
|
||||
rw(ws2, r, [f"PL-{pid}","名称",pid,"是",name,""], fill_cols={5,6}); r += 1
|
||||
rw(ws2, r, [f"PL-{pid}D","描述","一句话","是","",""], fill_cols={5,6}); r += 1
|
||||
rw(ws2, r, [f"PL-{pid}T","标签","逗号分隔","是",tags,""], fill_cols={5,6}); r += 1
|
||||
rw(ws2, r, [f"PL-{pid}I","图片","400x400px PNG","是","当前:",img])
|
||||
ws2.cell(row=r, column=5).font = xf; r += 2
|
||||
|
||||
# ========== Sheet 3: 产品详情 ==========
|
||||
ws3 = wb.create_sheet("三、产品详情"); ws3.sheet_properties.tabColor = "7C3AED"
|
||||
sw(ws3, [10, 16, 42, 14, 28, 28])
|
||||
for c, h in enumerate(["编号","字段名","填写说明","图标颜色","中文","英文"], 1): ws3.cell(row=1, column=c, value=h)
|
||||
hdr(ws3, 1, 6); r = 2
|
||||
for pid, name, img, tags in lp:
|
||||
sec(ws3, r, 6, f"产品:{name}(ID:{pid})"); r += 1
|
||||
rw(ws3, r, ["","标签","逗号分隔","","",tags,""], fill_cols={5,6}); r += 1
|
||||
rw(ws3, r, ["","副标题","不超过25字","","",""], fill_cols={5,6}); r += 1
|
||||
sec(ws3, r, 6, "亮点(4条)"); r += 1
|
||||
for i in range(1,5): rw(ws3, r, [f"H{i}",f"亮点{i}","不超过15字","","",""], fill_cols={5,6}); r += 1
|
||||
sec(ws3, r, 6, "特性(4组 blue=技术 green=环保 purple=智能 orange=安全)"); r += 1
|
||||
for i in range(1,5):
|
||||
rw(ws3, r, [f"F{i}","标题","不超过8字","填颜色","",""], fill_cols={4,5,6}); r += 1
|
||||
rw(ws3, r, [f"F{i}d","描述","不超过25字","","",""], fill_cols={5,6}); r += 1
|
||||
sec(ws3, r, 6, "规格表(行数不限)"); r += 1
|
||||
for c, h in enumerate(["","参数名(中文)","参数名(英文)","","参数值",""], 1):
|
||||
cl = ws3.cell(row=r, column=c, value=h); cl.font = bf
|
||||
cl.fill = PatternFill(start_color="E5E7EB", end_color="E5E7EB", fill_type="solid"); cl.border = bd
|
||||
r += 1
|
||||
for _ in range(8): rw(ws3, r, ["","","","","",""], fill_cols={2,3,5}); r += 1
|
||||
rw(ws3, r, ["","主图","800x800px PNG","","当前:",img])
|
||||
ws3.cell(row=r, column=5).font = xf; r += 2
|
||||
|
||||
# ========== Sheet 4: 宠物故事 ==========
|
||||
ws4 = wb.create_sheet("四、宠物故事"); ws4.sheet_properties.tabColor = "EA580C"
|
||||
sw(ws4, [10, 18, 48, 8, 40, 40])
|
||||
sec(ws4, 1, 6, "故事卡片(6个,首页随机3个)"); r = 2
|
||||
for c, h in enumerate(["编号","字段名","填写说明","必填","中文","英文"], 1): ws4.cell(row=r, column=c, value=h)
|
||||
hdr(ws4, r, 6); r += 1
|
||||
for sid, title, img, av, cat, pet, auth, loc, date in sd:
|
||||
sec(ws4, r, 6, f"故事:{title}"); r += 1
|
||||
for vals in [(f"{sid}-1","标题","不超过12字","是",title,""),(f"{sid}-2","摘要","2-3句不超过60字","是","",""),
|
||||
(f"{sid}-3","标签1","分类","是",cat,""),(f"{sid}-4","标签2","可选","否","",""),
|
||||
(f"{sid}-5","作者","如:小橘妈妈","是",auth,""),(f"{sid}-6","宠物","品种年龄","是",pet+" · ","")]:
|
||||
rw(ws4, r, vals, fill_cols={5,6}); r += 1
|
||||
rw(ws4, r, [f"{sid}-IMG","封面图","800x450px JPG","是","当前:",img])
|
||||
ws4.cell(row=r, column=5).font = xf; r += 1
|
||||
rw(ws4, r, [f"{sid}-AV","头像","80x80px","是","当前:",av])
|
||||
ws4.cell(row=r, column=5).font = xf; r += 2
|
||||
sec(ws4, r, 6, "故事详情正文(每个5段+3亮点)"); r += 1
|
||||
for c, h in enumerate(["编号","字段名","填写说明","必填","中文","英文"], 1): ws4.cell(row=r, column=c, value=h)
|
||||
hdr(ws4, r, 6); r += 1
|
||||
for sid, title, img, av, cat, pet, auth, loc, date in sd:
|
||||
sec(ws4, r, 6, f"正文:{title}"); r += 1
|
||||
rw(ws4, r, [f"{sid}-CAT","分类","","是",cat,""], fill_cols={5,6}); r += 1
|
||||
rw(ws4, r, [f"{sid}-LOC","地点","城市","是",loc,""], fill_cols={5,6}); r += 1
|
||||
rw(ws4, r, [f"{sid}-DATE","日期","如2024.03","是",date,""], fill_cols={5,6}); r += 1
|
||||
for i in range(1,6):
|
||||
rw(ws4, r, [f"{sid}-P{i}",f"第{i}段","3-5句话","是","",""], fill_cols={5,6}); r += 1
|
||||
sec(ws4, r, 6, "核心亮点(3条)"); r += 1
|
||||
for i in range(1,4): rw(ws4, r, [f"{sid}-HL{i}",f"亮点{i}","一句话","是","",""], fill_cols={5,6}); r += 1
|
||||
r += 1
|
||||
|
||||
# ========== Sheet 5-7: 文章系统 ==========
|
||||
for st, color, articles, warn in article_pages:
|
||||
ws = wb.create_sheet(st); ws.sheet_properties.tabColor = color; sw(ws, [10, 20, 48, 8, 55, 55])
|
||||
for c, h in enumerate(["编号","字段名","填写说明","必填","中文","英文"], 1): ws.cell(row=1, column=c, value=h)
|
||||
hdr(ws, 1, 6)
|
||||
ws.merge_cells(start_row=2, start_column=1, end_row=2, end_column=6)
|
||||
ws.cell(row=2, column=1, value="注意: "+warn).font = rf; r = 3
|
||||
for aid, atitle, adesc in articles:
|
||||
sec(ws, r, 6, f"文章{aid}:{atitle}"); r += 1
|
||||
rw(ws, r, [f"A{aid}-1","标题","","是",atitle,""], fill_cols={5,6}); r += 1
|
||||
for i in range(1,6):
|
||||
rw(ws, r, [f"A{aid}-P{i}",f"第{i}段",adesc if i==1 else "3-5句话","是","",""], fill_cols={5,6}); r += 1
|
||||
r += 1
|
||||
|
||||
# ========== Sheet 8: App ==========
|
||||
ws8 = wb.create_sheet("八、文章-App页面"); ws8.sheet_properties.tabColor = "3B82F6"
|
||||
sw(ws8, [10, 22, 48, 8, 40, 40])
|
||||
for c, h in enumerate(["编号","字段名","填写说明","必填","当前内容","需确认"], 1): ws8.cell(row=1, column=c, value=h)
|
||||
hdr(ws8, 1, 6); r = 2
|
||||
sec(ws8, r, 6, "App文案(基本完成请审核)"); r += 1
|
||||
for vals in app_fields:
|
||||
ft = "rev" if "审核" in str(vals[3]) else "inp"
|
||||
fc = {6} if "审核" in str(vals[3]) else {6}
|
||||
rw(ws8, r, vals, fill_cols=fc, ft=ft); r += 1
|
||||
|
||||
# ========== Sheet 9: 帮助中心 ==========
|
||||
ws9 = wb.create_sheet("九、文章-帮助中心"); ws9.sheet_properties.tabColor = "64748B"
|
||||
sw(ws9, [10, 14, 42, 8, 55])
|
||||
for c, h in enumerate(["编号","分类","标题","状态","审核确认"], 1): ws9.cell(row=1, column=c, value=h)
|
||||
hdr(ws9, 1, 5); r = 2
|
||||
sec(ws9, r, 5, "21篇已有详细文章仅需审核确认"); r += 1
|
||||
for cat, info in help_articles:
|
||||
aid, atitle = info.split("|")
|
||||
rw(ws9, r, [aid, cat, atitle, "已有详细内容", ""], fill_cols={5}, ft="rev"); r += 1
|
||||
|
||||
# ========== 保存 ==========
|
||||
for ws in wb.worksheets:
|
||||
ws.freeze_panes = "A2"; ws.row_dimensions[1].height = 28
|
||||
wb.move_sheet("填写说明", offset=-(len(wb.sheetnames)-1))
|
||||
output = "产品网站内容填写模板.xlsx"
|
||||
wb.save(output)
|
||||
print(f"OK - {output}")
|
||||
print(f"Sheets ({len(wb.sheetnames)}): {', '.join(wb.sheetnames)}")
|
||||
+377
-226
@@ -1176,8 +1176,6 @@
|
||||
padding: 0;
|
||||
}
|
||||
.snap-section {
|
||||
min-height: 100vh;
|
||||
min-height: 100svh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -3114,10 +3112,10 @@
|
||||
<div class="carousel-slide" data-type="activity">
|
||||
<div class="slide-content activity-bg">
|
||||
<div class="activity-content">
|
||||
<span class="activity-badge">限时活动</span>
|
||||
<h3 class="activity-title">618年中大促</h3>
|
||||
<p class="activity-desc">全场产品低至5折起</p>
|
||||
<span class="activity-date">6月1日 - 6月18日</span>
|
||||
<span class="activity-badge" data-i18n="carousel_activity_badge_1">限时活动</span>
|
||||
<h3 class="activity-title" data-i18n="carousel_activity_title_1">618年中大促</h3>
|
||||
<p class="activity-desc" data-i18n="carousel_activity_desc_1">全场产品低至5折起</p>
|
||||
<span class="activity-date" data-i18n="carousel_activity_date_1">6月1日 - 6月18日</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -3132,8 +3130,8 @@
|
||||
<div class="slide-content notice-bg">
|
||||
<div class="notice-content">
|
||||
<span class="notice-icon">📢</span>
|
||||
<h3 class="notice-title">系统升级通知</h3>
|
||||
<p class="notice-desc">App 2.0版本全新上线<br/>新增健康报告、远程控制功能</p>
|
||||
<h3 class="notice-title" data-i18n="carousel_notice_title">系统升级通知</h3>
|
||||
<p class="notice-desc" data-i18n="carousel_notice_desc">App 2.0版本全新上线<br/>新增健康报告、远程控制功能</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -3148,9 +3146,9 @@
|
||||
<div class="slide-content activity-bg">
|
||||
<div class="activity-content">
|
||||
<span class="activity-badge hot">🔥 HOT</span>
|
||||
<h3 class="activity-title">新用户专享</h3>
|
||||
<p class="activity-desc">首单立减100元</p>
|
||||
<span class="activity-code">优惠码: NEW100</span>
|
||||
<h3 class="activity-title" data-i18n="carousel_activity_title_2">新用户专享</h3>
|
||||
<p class="activity-desc" data-i18n="carousel_activity_desc_2">首单立减100元</p>
|
||||
<span class="activity-code" data-i18n="carousel_activity_code">优惠码: NEW100</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -3187,9 +3185,9 @@
|
||||
<div class="brand-logo-box">
|
||||
<span class="pill" data-i18n="section_about_label">公司简介</span>
|
||||
<img src="logo.png" alt="Chookoo" style="height: 70px; width: auto;">
|
||||
<span class="brand-slogan">宠科智能科技</span>
|
||||
<span class="brand-slogan" data-i18n="about_brand_slogan">宠科智能科技</span>
|
||||
</div>
|
||||
<p class="brand-intro">
|
||||
<p class="brand-intro" data-i18n="about_brand_intro">
|
||||
宠科（Chookoo）成立于中国苏州，是一家专注于宠物智能健康管理的科技企业。我们秉承"让每一个生命都能被真正理解与守护"的理念，致力于通过技术创新重新定义宠物健康管理方式。
|
||||
</p>
|
||||
</div>
|
||||
@@ -3205,9 +3203,9 @@
|
||||
</div>
|
||||
<div class="highlight-content">
|
||||
<span class="highlight-number">60%+</span>
|
||||
<span class="highlight-label">研发人员占比</span>
|
||||
<span class="highlight-label" data-i18n="about_highlight_rd_label">研发人员占比</span>
|
||||
</div>
|
||||
<p class="highlight-desc">核心团队来自知名科技企业与科研院所</p>
|
||||
<p class="highlight-desc" data-i18n="about_highlight_rd_desc">核心团队来自知名科技企业与科研院所</p>
|
||||
</div>
|
||||
|
||||
<div class="highlight-card">
|
||||
@@ -3220,9 +3218,9 @@
|
||||
</div>
|
||||
<div class="highlight-content">
|
||||
<span class="highlight-number">ISO9001</span>
|
||||
<span class="highlight-label">质量认证</span>
|
||||
<span class="highlight-label" data-i18n="about_highlight_cert_label">质量认证</span>
|
||||
</div>
|
||||
<p class="highlight-desc">通过国际质量管理体系认证</p>
|
||||
<p class="highlight-desc" data-i18n="about_highlight_cert_desc">通过国际质量管理体系认证</p>
|
||||
</div>
|
||||
|
||||
<div class="highlight-card">
|
||||
@@ -3235,10 +3233,10 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div class="highlight-content">
|
||||
<span class="highlight-number">自研</span>
|
||||
<span class="highlight-label">AI实验室</span>
|
||||
<span class="highlight-number" data-i18n="about_highlight_lab_number">自研</span>
|
||||
<span class="highlight-label" data-i18n="about_highlight_lab_label">AI实验室</span>
|
||||
</div>
|
||||
<p class="highlight-desc">独立AI算法实验室持续迭代优化</p>
|
||||
<p class="highlight-desc" data-i18n="about_highlight_lab_desc">独立AI算法实验室持续迭代优化</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3248,7 +3246,7 @@
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
</svg>
|
||||
<span>中国苏州 · 苏州工业园区</span>
|
||||
<span data-i18n="about_location">中国苏州 · 苏州工业园区</span>
|
||||
</div>
|
||||
<div class="footer-year">
|
||||
<span>Founded 2023</span>
|
||||
@@ -3261,9 +3259,9 @@
|
||||
<section class="snap-section centered">
|
||||
<div class="container section company-section-new">
|
||||
<div class="company-hero">
|
||||
<div class="company-badge">AIoT 宠物健康管理</div>
|
||||
<h2 class="company-title">以科技重新定义<br/><span class="gradient-text">宠物健康管理</span></h2>
|
||||
<p class="company-desc">深度融合人工智能、物联网与生物传感技术，构建预防式健康生态</p>
|
||||
<div class="company-badge" data-i18n="company_badge">AIoT 宠物健康管理</div>
|
||||
<h2 class="company-title" data-i18n="company_title">以科技重新定义<br/><span class="gradient-text">宠物健康管理</span></h2>
|
||||
<p class="company-desc" data-i18n="company_desc">深度融合人工智能、物联网与生物传感技术，构建预防式健康生态</p>
|
||||
</div>
|
||||
|
||||
<div class="company-stats">
|
||||
@@ -3274,7 +3272,7 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-number" data-count="50">50+</div>
|
||||
<div class="stat-label">核心专利</div>
|
||||
<div class="stat-label" data-i18n="company_stat_patent_label">核心专利</div>
|
||||
<div class="stat-bar"></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
@@ -3287,7 +3285,7 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-number" data-count="10">10亿+</div>
|
||||
<div class="stat-label">AI健康数据点</div>
|
||||
<div class="stat-label" data-i18n="company_stat_ai_label">AI健康数据点</div>
|
||||
<div class="stat-bar"></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
@@ -3300,7 +3298,7 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-number" data-count="100">100万+</div>
|
||||
<div class="stat-label">宠物健康档案</div>
|
||||
<div class="stat-label" data-i18n="company_stat_records_label">宠物健康档案</div>
|
||||
<div class="stat-bar"></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
@@ -3312,7 +3310,7 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-number" data-count="30">30+</div>
|
||||
<div class="stat-label">国家和地区</div>
|
||||
<div class="stat-label" data-i18n="company_stat_global_label">国家和地区</div>
|
||||
<div class="stat-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -3323,7 +3321,7 @@
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
</svg>
|
||||
<span>中国苏州 · 智慧健康管理领域</span>
|
||||
<span data-i18n="company_location">中国苏州 · 智慧健康管理领域</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -3342,8 +3340,8 @@
|
||||
<img class="product-image" src="cat.png" alt="猫厕所" onerror="this.src='cat.png'" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<h3>智能猫厕所</h3>
|
||||
<p>智能监测·自动清洁</p>
|
||||
<h3 data-i18n="product_card_cat_title">智能猫厕所</h3>
|
||||
<p data-i18n="product_card_cat_desc">智能监测·自动清洁</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-card" data-product="2">
|
||||
@@ -3351,8 +3349,8 @@
|
||||
<img class="product-image" src="dog.jpeg" alt="狗厕所" onerror="this.src='dog.jpeg'" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<h3>智能狗厕所</h3>
|
||||
<p>科学训练·智能清洁</p>
|
||||
<h3 data-i18n="product_card_dog_title">智能狗厕所</h3>
|
||||
<p data-i18n="product_card_dog_desc">科学训练·智能清洁</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-card" data-product="3">
|
||||
@@ -3360,8 +3358,8 @@
|
||||
<img class="product-image" src="feeder.png" alt="喂食器" onerror="this.src='cat.png'" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<h3>智能喂食器</h3>
|
||||
<p>定时定量·科学喂养</p>
|
||||
<h3 data-i18n="product_card_feeder_title">智能喂食器</h3>
|
||||
<p data-i18n="product_card_feeder_desc">定时定量·科学喂养</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -3371,8 +3369,8 @@
|
||||
<img class="display-image" id="displayImage" src="" alt="产品展示" />
|
||||
</div>
|
||||
<div class="display-content">
|
||||
<h3 id="displayTitle">产品名称</h3>
|
||||
<p class="display-subtitle" id="displaySubtitle">产品描述</p>
|
||||
<h3 id="displayTitle" data-i18n="display_title_default">产品名称</h3>
|
||||
<p class="display-subtitle" id="displaySubtitle" data-i18n="display_subtitle_default">产品描述</p>
|
||||
<div class="display-body">
|
||||
<ul class="display-features" id="displayFeatures">
|
||||
</ul>
|
||||
@@ -3414,7 +3412,7 @@
|
||||
<span class="dot"></span>
|
||||
</div>
|
||||
<a href="products.html" class="footer-link">
|
||||
<span>了解更多</span>
|
||||
<span data-i18n="display_learn_more">了解更多</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
@@ -3429,8 +3427,8 @@
|
||||
<img class="product-image" src="water.jpeg" alt="饮水机" onerror="this.src='cat.png'" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<h3>智能饮水机</h3>
|
||||
<p>循环净化·饮水提醒</p>
|
||||
<h3 data-i18n="product_card_water_title">智能饮水机</h3>
|
||||
<p data-i18n="product_card_water_desc">循环净化·饮水提醒</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-card" data-product="5">
|
||||
@@ -3438,8 +3436,8 @@
|
||||
<img class="product-image" src="camera.jpeg" alt="AI摄像头" onerror="this.src='cat.png'" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<h3>AI宠物摄像头</h3>
|
||||
<p>远程守护·行为识别</p>
|
||||
<h3 data-i18n="product_card_camera_title">AI宠物摄像头</h3>
|
||||
<p data-i18n="product_card_camera_desc">远程守护·行为识别</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="products.html" class="product-card product-card-more">
|
||||
@@ -3450,8 +3448,8 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<h3>更多产品</h3>
|
||||
<p>探索全系列</p>
|
||||
<h3 data-i18n="product_card_more_title">更多产品</h3>
|
||||
<p data-i18n="product_card_more_desc">探索全系列</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -3464,61 +3462,8 @@
|
||||
<span class="pill" data-i18n="section_pet_stories_label">宠物故事</span>
|
||||
<h2 data-i18n="section_pet_stories_title">每一个毛孩子背后的温馨故事</h2>
|
||||
</div>
|
||||
<div class="pet-stories-grid">
|
||||
<a href="stories.html" class="pet-story-card">
|
||||
<img class="pet-story-image" src="cat.png" alt="宠物故事" />
|
||||
<div class="pet-story-content">
|
||||
<h3 data-i18n="pet_story_title_1">小橘的逆袭日记</h3>
|
||||
<p class="pet-story-excerpt" data-i18n="pet_story_excerpt_1">第一次发现Chookoo的智能猫厕所后，小橘终于康复了健康...</p>
|
||||
<div class="pet-story-meta">
|
||||
<span class="pet-story-tag">健康恢复</span>
|
||||
<span class="pet-story-tag">暖心故事</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pet-story-author">
|
||||
<img class="pet-story-avatar" src="cat.png" alt="小橘" />
|
||||
<div class="pet-story-author-info">
|
||||
<p class="pet-story-author-name">小橘妈妈</p>
|
||||
<p class="pet-story-pet">橘猫 · 3岁</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="stories.html" class="pet-story-card">
|
||||
<img class="pet-story-image" src="dog.jpeg" alt="宠物故事" />
|
||||
<div class="pet-story-content">
|
||||
<h3 data-i18n="pet_story_title_2">旺财的健身日记</h3>
|
||||
<p class="pet-story-excerpt" data-i18n="pet_story_excerpt_2">旺财以前很挑食，Chookoo的智能喂食器帮它养成了定点投喂的好习惯...</p>
|
||||
<div class="pet-story-meta">
|
||||
<span class="pet-story-tag">健康饮食</span>
|
||||
<span class="pet-story-tag">体重管理</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pet-story-author">
|
||||
<img class="pet-story-avatar" src="dog.jpeg" alt="旺财" />
|
||||
<div class="pet-story-author-info">
|
||||
<p class="pet-story-name">旺财爸爸</p>
|
||||
<p class="pet-story-pet">金毛 · 2岁</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="stories.html" class="pet-story-card">
|
||||
<img class="pet-story-image" src="cat.png" alt="宠物故事" />
|
||||
<div class="pet-story-content">
|
||||
<h3 data-i18n="pet_story_title_3">布丁的日常</h3>
|
||||
<p class="pet-story-excerpt" data-i18n="pet_story_excerpt_3">自从用了AI摄像头，可以自动识别布丁的状态，让我惊喜万分...</p>
|
||||
<div class="pet-story-meta">
|
||||
<span class="pet-story-tag">AI识别</span>
|
||||
<span class="pet-story-tag">行为分析</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pet-story-author">
|
||||
<img class="pet-story-avatar" src="cat.png" alt="布丁" />
|
||||
<div class="pet-story-author-info">
|
||||
<p class="pet-story-author-name">布丁姐姐</p>
|
||||
<p class="pet-story-pet">英短 · 2岁</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="pet-stories-grid" id="petStoriesGrid">
|
||||
<!-- 由 JavaScript 随机渲染 -->
|
||||
</div>
|
||||
<a href="stories.html" class="view-more-link" data-i18n="view_more_stories">查看更多故事 →</a>
|
||||
</div>
|
||||
@@ -3530,7 +3475,7 @@
|
||||
<div class="vmv-new-wrapper">
|
||||
<div class="vmv-header">
|
||||
<span class="vmv-badge" data-i18n="section_beliefs_label">核心理念</span>
|
||||
<h2 class="vmv-title">让每一个生命<br/>都能被<span class="highlight">真正理解</span>与守护</h2>
|
||||
<h2 class="vmv-title" data-i18n="vmv_title">让每一个生命<br/>都能被<span class="highlight">真正理解</span>与守护</h2>
|
||||
</div>
|
||||
|
||||
<div class="vmv-cards">
|
||||
@@ -3545,8 +3490,8 @@
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-label">Vision</span>
|
||||
<h3 class="card-title">愿景</h3>
|
||||
<p class="card-desc">成为全球宠物家庭最信赖的智能健康伙伴，定义主动健康管理新范式</p>
|
||||
<h3 class="card-title" data-i18n="vmv_vision_title">愿景</h3>
|
||||
<p class="card-desc" data-i18n="vmv_vision_desc">成为全球宠物家庭最信赖的智能健康伙伴，定义主动健康管理新范式</p>
|
||||
<div class="card-decoration">
|
||||
<span class="deco-line"></span>
|
||||
</div>
|
||||
@@ -3562,12 +3507,12 @@
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-label">Values</span>
|
||||
<h3 class="card-title">价值观</h3>
|
||||
<h3 class="card-title" data-i18n="vmv_values_title">价值观</h3>
|
||||
<div class="values-grid">
|
||||
<span class="value-item">科技向善</span>
|
||||
<span class="value-item">关爱为本</span>
|
||||
<span class="value-item">极致创新</span>
|
||||
<span class="value-item">长久相伴</span>
|
||||
<span class="value-item" data-i18n="vmv_value_1">科技向善</span>
|
||||
<span class="value-item" data-i18n="vmv_value_2">关爱为本</span>
|
||||
<span class="value-item" data-i18n="vmv_value_3">极致创新</span>
|
||||
<span class="value-item" data-i18n="vmv_value_4">长久相伴</span>
|
||||
</div>
|
||||
<div class="card-decoration">
|
||||
<span class="deco-line"></span>
|
||||
@@ -3586,8 +3531,8 @@
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-label">Mission</span>
|
||||
<h3 class="card-title">使命</h3>
|
||||
<p class="card-desc">让健康可见，让需求可解，让宠爱无间</p>
|
||||
<h3 class="card-title" data-i18n="vmv_mission_title">使命</h3>
|
||||
<p class="card-desc" data-i18n="vmv_mission_desc">让健康可见，让需求可解，让宠爱无间</p>
|
||||
<div class="card-decoration">
|
||||
<span class="deco-line"></span>
|
||||
</div>
|
||||
@@ -3612,7 +3557,7 @@
|
||||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="vmv-slogan">每一份陪伴，都值得被温柔以待</p>
|
||||
<p class="vmv-slogan" data-i18n="vmv_slogan">每一份陪伴，都值得被温柔以待</p>
|
||||
<div class="floating-icon icon-3">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
|
||||
@@ -3704,35 +3649,35 @@
|
||||
<img src="qr-wechat.png" alt="微信二维码" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
|
||||
<div class="qrcode-fallback">二维码</div>
|
||||
</div>
|
||||
<span class="qrcode-label">微信公众号</span>
|
||||
<span class="qrcode-label" data-i18n="footer_qr_wechat">微信公众号</span>
|
||||
</div>
|
||||
<div class="qrcode-item">
|
||||
<div class="qrcode-placeholder">
|
||||
<img src="qr-weibo.png" alt="微博二维码" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
|
||||
<div class="qrcode-fallback">二维码</div>
|
||||
</div>
|
||||
<span class="qrcode-label">微博</span>
|
||||
<span class="qrcode-label" data-i18n="footer_qr_weibo">微博</span>
|
||||
</div>
|
||||
<div class="qrcode-item">
|
||||
<div class="qrcode-placeholder">
|
||||
<img src="qr-xiaohongshu.png" alt="小红书二维码" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
|
||||
<div class="qrcode-fallback">二维码</div>
|
||||
</div>
|
||||
<span class="qrcode-label">小红书</span>
|
||||
<span class="qrcode-label" data-i18n="footer_qr_xiaohongshu">小红书</span>
|
||||
</div>
|
||||
<div class="qrcode-item">
|
||||
<div class="qrcode-placeholder">
|
||||
<img src="qr-tiktok.png" alt="抖音二维码" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
|
||||
<div class="qrcode-fallback">二维码</div>
|
||||
</div>
|
||||
<span class="qrcode-label">抖音</span>
|
||||
<span class="qrcode-label" data-i18n="footer_qr_tiktok">抖音</span>
|
||||
</div>
|
||||
<div class="qrcode-item">
|
||||
<div class="qrcode-placeholder">
|
||||
<img src="qr-shop.png" alt="商城二维码" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
|
||||
<div class="qrcode-fallback">二维码</div>
|
||||
</div>
|
||||
<span class="qrcode-label">线上商城</span>
|
||||
<span class="qrcode-label" data-i18n="footer_qr_shop">线上商城</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3760,6 +3705,7 @@
|
||||
</main>
|
||||
<script>
|
||||
// 视口缩放 - 基于1920px设计稿
|
||||
(() => {
|
||||
const designWidth = 1920;
|
||||
const minWidth = 1280;
|
||||
const maxWidth = 2560;
|
||||
@@ -3949,15 +3895,6 @@
|
||||
testimonial_3: "AI摄像头的行为识别功能让我惊喜，能自动识别猫咪的不同状态，随时查看它在家的情况。",
|
||||
testimonial_name_3: "布丁姐姐",
|
||||
testimonial_pet_3: "英短 · 深圳",
|
||||
section_pet_stories_label: "宠物故事",
|
||||
section_pet_stories_title: "每一个毛孩子背后的温馨故事",
|
||||
pet_story_title_1: "小橘的逆袭日记",
|
||||
pet_story_excerpt_1: "第一次发现Chookoo的智能猫厕所后，小橘终于康复了健康...",
|
||||
pet_story_title_2: "旺财的健身日记",
|
||||
pet_story_excerpt_2: "旺财以前很挑食，Chookoo的智能喂食器帮它养成了定点投喂的好习惯...",
|
||||
pet_story_title_3: "布丁的日常",
|
||||
pet_story_excerpt_3: "自从用了AI摄像头，可以自动识别布丁的状态，让我惊喜万分...",
|
||||
view_more_stories: "查看更多故事 →",
|
||||
section_story_label: "品牌故事",
|
||||
section_story_title: "共筑一个更懂爱的未来",
|
||||
story_p1: "宠科的故事，是一个关于进化的故事。我们因宠爱宠物而出发，理解了「宠爱」更广阔的内涵——它是对家庭中所有生命的细致体察与科学呵护。",
|
||||
@@ -3981,10 +3918,6 @@
|
||||
footer_product_fountain: "智能饮水机",
|
||||
footer_product_camera: "AI 摄像头",
|
||||
footer_product_all: "全部产品",
|
||||
footer_product_cat: "智能猫厕所",
|
||||
footer_product_feeder: "智能喂食器",
|
||||
footer_product_fountain: "智能饮水机",
|
||||
footer_product_camera: "AI 摄像头",
|
||||
footer_company_title: "公司",
|
||||
footer_about: "关于我们",
|
||||
footer_careers: "加入我们",
|
||||
@@ -4014,7 +3947,102 @@
|
||||
footer_address: "苏州市吴江区江陵街道<br>长安路2358号吴江科技创业园<br>2号楼5层",
|
||||
footer_icp_label: "ICP备案/许可证号：",
|
||||
footer_icp_value: "苏ICP备2025227635号",
|
||||
footer_psb_value: "苏公网安备32050902103112号"
|
||||
footer_psb_value: "苏公网安备32050902103112号",
|
||||
// Carousel
|
||||
carousel_activity_badge_1: "限时活动",
|
||||
carousel_activity_title_1: "618年中大促",
|
||||
carousel_activity_desc_1: "全场产品低至5折起",
|
||||
carousel_activity_date_1: "6月1日 - 6月18日",
|
||||
carousel_notice_title: "系统升级通知",
|
||||
carousel_notice_desc: "App 2.0版本全新上线<br/>新增健康报告、远程控制功能",
|
||||
carousel_activity_title_2: "新用户专享",
|
||||
carousel_activity_desc_2: "首单立减100元",
|
||||
carousel_activity_code: "优惠码: NEW100",
|
||||
// About
|
||||
about_brand_slogan: "宠科智能科技",
|
||||
about_brand_intro: "宠科（Chookoo）成立于中国苏州，是一家专注于宠物智能健康管理的科技企业。我们秉承「让每一个生命都能被真正理解与守护」的理念，致力于通过技术创新重新定义宠物健康管理方式。",
|
||||
about_highlight_rd_label: "研发人员占比",
|
||||
about_highlight_rd_desc: "核心团队来自知名科技企业与科研院所",
|
||||
about_highlight_cert_label: "质量认证",
|
||||
about_highlight_cert_desc: "通过国际质量管理体系认证",
|
||||
about_highlight_lab_number: "自研",
|
||||
about_highlight_lab_label: "AI实验室",
|
||||
about_highlight_lab_desc: "独立AI算法实验室持续迭代优化",
|
||||
about_location: "中国苏州 · 苏州工业园区",
|
||||
// Company
|
||||
company_badge: "AIoT 宠物健康管理",
|
||||
company_title: "以科技重新定义<br/><span class='gradient-text'>宠物健康管理</span>",
|
||||
company_desc: "深度融合人工智能、物联网与生物传感技术，构建预防式健康生态",
|
||||
company_stat_patent_label: "核心专利",
|
||||
company_stat_ai_label: "AI健康数据点",
|
||||
company_stat_records_label: "宠物健康档案",
|
||||
company_stat_global_label: "国家和地区",
|
||||
company_location: "中国苏州 · 智慧健康管理领域",
|
||||
// Product cards
|
||||
product_card_cat_title: "智能猫厕所",
|
||||
product_card_cat_desc: "智能监测·自动清洁",
|
||||
product_card_dog_title: "智能狗厕所",
|
||||
product_card_dog_desc: "科学训练·智能清洁",
|
||||
product_card_feeder_title: "智能喂食器",
|
||||
product_card_feeder_desc: "定时定量·科学喂养",
|
||||
product_card_water_title: "智能饮水机",
|
||||
product_card_water_desc: "循环净化·饮水提醒",
|
||||
product_card_camera_title: "AI宠物摄像头",
|
||||
product_card_camera_desc: "远程守护·行为识别",
|
||||
product_card_more_title: "更多产品",
|
||||
product_card_more_desc: "探索全系列",
|
||||
// Pet story meta
|
||||
pet_story_1_tag_1: "健康恢复",
|
||||
pet_story_1_tag_2: "暖心故事",
|
||||
pet_story_1_author: "小橘妈妈",
|
||||
pet_story_1_pet: "橘猫 · 3岁",
|
||||
pet_story_2_tag_1: "健康饮食",
|
||||
pet_story_2_tag_2: "体重管理",
|
||||
pet_story_2_author: "旺财爸爸",
|
||||
pet_story_2_pet: "金毛 · 2岁",
|
||||
pet_story_3_tag_1: "AI识别",
|
||||
pet_story_3_tag_2: "行为分析",
|
||||
pet_story_3_author: "布丁姐姐",
|
||||
pet_story_3_pet: "英短 · 2岁",
|
||||
// VMV
|
||||
vmv_title: "让每一个生命<br/>都能被真正理解与守护",
|
||||
vmv_vision_title: "愿景",
|
||||
vmv_vision_desc: "成为全球宠物家庭最信赖的智能健康伙伴，定义主动健康管理新范式",
|
||||
vmv_values_title: "价值观",
|
||||
vmv_value_1: "科技向善",
|
||||
vmv_value_2: "关爱为本",
|
||||
vmv_value_3: "极致创新",
|
||||
vmv_value_4: "长久相伴",
|
||||
vmv_mission_title: "使命",
|
||||
vmv_mission_desc: "让健康可见，让需求可解，让宠爱无间",
|
||||
vmv_slogan: "每一份陪伴，都值得被温柔以待",
|
||||
// Footer QR
|
||||
footer_qr_wechat: "微信公众号",
|
||||
footer_qr_weibo: "微博",
|
||||
footer_qr_xiaohongshu: "小红书",
|
||||
footer_qr_tiktok: "抖音",
|
||||
footer_qr_shop: "线上商城",
|
||||
// Modals
|
||||
modal_social_title: "关注我们",
|
||||
modal_social_desc: "扫描二维码，获取更多精彩内容",
|
||||
modal_social_qr_wechat: "微信公众号",
|
||||
modal_social_qr_wechat_desc: "获取最新资讯",
|
||||
modal_social_qr_weibo: "官方微博",
|
||||
modal_social_qr_weibo_desc: "互动交流",
|
||||
modal_social_qr_xiaohongshu: "小红书",
|
||||
modal_social_qr_xiaohongshu_desc: "种草分享",
|
||||
modal_social_qr_tiktok: "抖音",
|
||||
modal_social_qr_tiktok_desc: "精彩视频",
|
||||
modal_contact_title: "联系我们",
|
||||
modal_contact_desc: "扫描下方二维码，添加专属客服",
|
||||
modal_contact_scan: "微信扫码咨询",
|
||||
modal_shop_title: "官方旗舰店",
|
||||
modal_shop_desc: "扫描二维码，进入官方店铺选购",
|
||||
modal_shop_scan: "扫码进店",
|
||||
// Product display
|
||||
display_title_default: "产品名称",
|
||||
display_subtitle_default: "产品描述",
|
||||
display_learn_more: "了解更多"
|
||||
},
|
||||
en: {
|
||||
lang_label: "Language",
|
||||
@@ -4130,7 +4158,102 @@
|
||||
footer_address_full: "No. 2358 Chang'an Rd, Jiangling St., Wujiang Dist., Suzhou, China (Building 2, 5F, Wujiang Sci-Tech Incubator)",
|
||||
footer_icp_label: "ICP Filing No.: ",
|
||||
footer_icp_value: "Su ICP 2025227635",
|
||||
footer_psb_value: "Su Public Security 32050902103112"
|
||||
footer_psb_value: "Su Public Security 32050902103112",
|
||||
// Carousel
|
||||
carousel_activity_badge_1: "Limited Offer",
|
||||
carousel_activity_title_1: "618 Mid-Year Sale",
|
||||
carousel_activity_desc_1: "Up to 50% off all products",
|
||||
carousel_activity_date_1: "June 1 - June 18",
|
||||
carousel_notice_title: "System Update",
|
||||
carousel_notice_desc: "App 2.0 Now Available<br/>New health reports & remote control features",
|
||||
carousel_activity_title_2: "New User Exclusive",
|
||||
carousel_activity_desc_2: "100 yuan off your first order",
|
||||
carousel_activity_code: "Promo Code: NEW100",
|
||||
// About
|
||||
about_brand_slogan: "Chookoo Smart Tech",
|
||||
about_brand_intro: "Founded in Suzhou, China, Chookoo is a technology company focused on smart pet health management. We are dedicated to redefining pet health management through technological innovation, guided by the philosophy that every life deserves to be truly understood and protected.",
|
||||
about_highlight_rd_label: "R&D Staff Ratio",
|
||||
about_highlight_rd_desc: "Core team from leading tech companies and research institutes",
|
||||
about_highlight_cert_label: "Quality Certification",
|
||||
about_highlight_cert_desc: "ISO 9001 certified quality management system",
|
||||
about_highlight_lab_number: "In-house",
|
||||
about_highlight_lab_label: "AI Lab",
|
||||
about_highlight_lab_desc: "Independent AI algorithm lab with continuous optimization",
|
||||
about_location: "Suzhou, China · Suzhou Industrial Park",
|
||||
// Company
|
||||
company_badge: "AIoT Pet Health Management",
|
||||
company_title: "Redefining<br/><span class='gradient-text'>Pet Health Management</span> with Technology",
|
||||
company_desc: "Integrating AI, IoT, and biosensing technology to build a preventive health ecosystem",
|
||||
company_stat_patent_label: "Core Patents",
|
||||
company_stat_ai_label: "AI Health Data Points",
|
||||
company_stat_records_label: "Pet Health Records",
|
||||
company_stat_global_label: "Countries & Regions",
|
||||
company_location: "Suzhou, China · Smart Health Management",
|
||||
// Product cards
|
||||
product_card_cat_title: "Smart Cat Litter Box",
|
||||
product_card_cat_desc: "Smart Monitoring · Auto Cleaning",
|
||||
product_card_dog_title: "Smart Dog Toilet",
|
||||
product_card_dog_desc: "Smart Training · Auto Cleaning",
|
||||
product_card_feeder_title: "Smart Feeder",
|
||||
product_card_feeder_desc: "Scheduled Feeding · Scientific Nutrition",
|
||||
product_card_water_title: "Smart Fountain",
|
||||
product_card_water_desc: "Circulating Filter · Drink Reminders",
|
||||
product_card_camera_title: "AI Pet Camera",
|
||||
product_card_camera_desc: "Remote Monitor · Behavior Recognition",
|
||||
product_card_more_title: "More Products",
|
||||
product_card_more_desc: "Explore the Full Range",
|
||||
// Pet story meta
|
||||
pet_story_1_tag_1: "Health Recovery",
|
||||
pet_story_1_tag_2: "Heartwarming",
|
||||
pet_story_1_author: "Xiaoju's Mom",
|
||||
pet_story_1_pet: "Orange Cat · 3 yrs",
|
||||
pet_story_2_tag_1: "Healthy Diet",
|
||||
pet_story_2_tag_2: "Weight Management",
|
||||
pet_story_2_author: "Wangcai's Dad",
|
||||
pet_story_2_pet: "Golden Retriever · 2 yrs",
|
||||
pet_story_3_tag_1: "AI Recognition",
|
||||
pet_story_3_tag_2: "Behavior Analysis",
|
||||
pet_story_3_author: "Buding's Sister",
|
||||
pet_story_3_pet: "British Shorthair · 2 yrs",
|
||||
// VMV
|
||||
vmv_title: "Every Life Deserves to be<br/>Truly Understood and Protected",
|
||||
vmv_vision_title: "Vision",
|
||||
vmv_vision_desc: "Become the most trusted smart health partner for pet families worldwide, defining a new paradigm in proactive health management",
|
||||
vmv_values_title: "Values",
|
||||
vmv_value_1: "Tech for Good",
|
||||
vmv_value_2: "Care First",
|
||||
vmv_value_3: "Relentless Innovation",
|
||||
vmv_value_4: "Lasting Companionship",
|
||||
vmv_mission_title: "Mission",
|
||||
vmv_mission_desc: "Make health visible, needs understood, and care seamless",
|
||||
vmv_slogan: "Every moment of companionship deserves gentle care",
|
||||
// Footer QR
|
||||
footer_qr_wechat: "WeChat Official Account",
|
||||
footer_qr_weibo: "Weibo",
|
||||
footer_qr_xiaohongshu: "Xiaohongshu",
|
||||
footer_qr_tiktok: "Douyin",
|
||||
footer_qr_shop: "Online Store",
|
||||
// Modals
|
||||
modal_social_title: "Follow Us",
|
||||
modal_social_desc: "Scan QR code for more content",
|
||||
modal_social_qr_wechat: "WeChat Official Account",
|
||||
modal_social_qr_wechat_desc: "Latest updates",
|
||||
modal_social_qr_weibo: "Official Weibo",
|
||||
modal_social_qr_weibo_desc: "Interact with us",
|
||||
modal_social_qr_xiaohongshu: "Xiaohongshu",
|
||||
modal_social_qr_xiaohongshu_desc: "Tips & shares",
|
||||
modal_social_qr_tiktok: "Douyin",
|
||||
modal_social_qr_tiktok_desc: "Fun videos",
|
||||
modal_contact_title: "Contact Us",
|
||||
modal_contact_desc: "Scan QR code to add our customer service",
|
||||
modal_contact_scan: "Scan with WeChat",
|
||||
modal_shop_title: "Official Store",
|
||||
modal_shop_desc: "Scan QR code to visit our online store",
|
||||
modal_shop_scan: "Scan to Shop",
|
||||
// Product display
|
||||
display_title_default: "Product Name",
|
||||
display_subtitle_default: "Product Description",
|
||||
display_learn_more: "Learn More"
|
||||
},
|
||||
ja: {
|
||||
lang_label: "言語",
|
||||
@@ -4479,6 +4602,83 @@
|
||||
return "en";
|
||||
};
|
||||
|
||||
// 首页故事数据（随机展示3个）
|
||||
const homepageStories = [
|
||||
{
|
||||
id: 'story-1', image: 'cat.png', avatar: 'cat.png',
|
||||
zh: { title: '小橘的逆袭日记', excerpt: '第一次发现Chookoo的智能猫厕所后，小橘终于康复了健康...', tag1: '健康恢复', tag2: '暖心故事', author: '小橘妈妈', pet: '橘猫 · 3岁' },
|
||||
en: { title: "Little Orange's Recovery Diary", excerpt: "After discovering Chookoo's smart litter box, Little Orange finally regained health...", tag1: 'Health Recovery', tag2: 'Heartwarming', author: "Xiaoju's Mom", pet: 'Orange Cat · 3 yrs' }
|
||||
},
|
||||
{
|
||||
id: 'story-2', image: 'dog.jpeg', avatar: 'dog.jpeg',
|
||||
zh: { title: '旺财的健身日记', excerpt: '旺财以前很挑食，Chookoo的智能喂食器帮它养成了定点投喂的好习惯...', tag1: '健康饮食', tag2: '体重管理', author: '旺财爸爸', pet: '金毛 · 2岁' },
|
||||
en: { title: "Wangcai's Fitness Diary", excerpt: "Wangcai used to be a picky eater, Chookoo's smart feeder helped establish good feeding habits...", tag1: 'Healthy Diet', tag2: 'Weight Management', author: "Wangcai's Dad", pet: 'Golden Retriever · 2 yrs' }
|
||||
},
|
||||
{
|
||||
id: 'story-3', image: 'cat.png', avatar: 'cat.png',
|
||||
zh: { title: '布丁的日常', excerpt: '自从用了AI摄像头，可以自动识别布丁的状态，让我惊喜万分...', tag1: 'AI识别', tag2: '行为分析', author: '布丁姐姐', pet: '英短 · 2岁' },
|
||||
en: { title: "Pudding's Daily Life", excerpt: "Since using the AI camera, it can automatically recognize Pudding's states. What a surprise...", tag1: 'AI Recognition', tag2: 'Behavior Analysis', author: "Buding's Sister", pet: 'British Shorthair · 2 yrs' }
|
||||
},
|
||||
{
|
||||
id: 'story-4', image: 'dog.jpeg', avatar: 'dog.jpeg',
|
||||
zh: { title: '豆豆的饮水日记', excerpt: '豆豆以前不爱喝水，用了智能饮水机后，循环净化的水让它爱喝了...', tag1: '饮水健康', tag2: '循环净化', author: '豆豆妈妈', pet: '柯基 · 3岁' },
|
||||
en: { title: "Doudou's Drinking Diary", excerpt: "Doudou didn't like drinking water before. The smart fountain's circulating water changed that...", tag1: 'Hydration', tag2: 'Circulation', author: "Doudou's Mom", pet: 'Corgi · 3 yrs' }
|
||||
},
|
||||
{
|
||||
id: 'story-5', image: 'cat.png', avatar: 'cat.png',
|
||||
zh: { title: '咪咪的健康守护', excerpt: 'Chookoo的智能设备帮我实时监测咪咪的健康状况，每次数据报告都让我很安心...', tag1: '健康监测', tag2: '预防管理', author: '咪咪妈妈', pet: '美短 · 4岁' },
|
||||
en: { title: "Mimi's Health Guardian", excerpt: "Chookoo's smart devices help me monitor Mimi's health in real time. Every report gives me peace of mind...", tag1: 'Health Monitoring', tag2: 'Preventive Care', author: "Mimi's Mom", pet: 'American Shorthair · 4 yrs' }
|
||||
},
|
||||
{
|
||||
id: 'story-6', image: 'dog.jpeg', avatar: 'dog.jpeg',
|
||||
zh: { title: '大黄的如厕训练', excerpt: '大黄以前随地大小便，用了Chookoo的智能狗厕所，科学训练让它很快养成了好习惯...', tag1: '如厕训练', tag2: '清洁管理', author: '大黄爸爸', pet: '田园犬 · 2岁' },
|
||||
en: { title: "Dahuang's Toilet Training", excerpt: "Dahuang used to go anywhere. Chookoo's smart dog toilet helped him quickly learn good habits...", tag1: 'Toilet Training', tag2: 'Clean Management', author: "Dahuang's Dad", pet: 'Chinese Rural Dog · 2 yrs' }
|
||||
}
|
||||
];
|
||||
|
||||
// 首次加载时随机选3个故事的索引，存住不变（语言切换只更新文字不重新随机）
|
||||
let randomStoryIndices = null;
|
||||
function pickRandomStories() {
|
||||
const indices = [0,1,2,3,4,5];
|
||||
// Fisher-Yates shuffle
|
||||
for (let i = indices.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[indices[i], indices[j]] = [indices[j], indices[i]];
|
||||
}
|
||||
return indices.slice(0, 3);
|
||||
}
|
||||
|
||||
function renderRandomStories(lang) {
|
||||
const grid = document.getElementById('petStoriesGrid');
|
||||
if (!grid) return;
|
||||
if (!randomStoryIndices) randomStoryIndices = pickRandomStories();
|
||||
const l = (lang === 'zh') ? 'zh' : 'en';
|
||||
let html = '';
|
||||
randomStoryIndices.forEach(idx => {
|
||||
const s = homepageStories[idx];
|
||||
const d = s[l] || s.zh;
|
||||
html += '<a href="story-detail.html?id=' + s.id + '" class="pet-story-card">' +
|
||||
'<img class="pet-story-image" src="' + s.image + '" alt="' + d.title + '" />' +
|
||||
'<div class="pet-story-content">' +
|
||||
'<h3>' + d.title + '</h3>' +
|
||||
'<p class="pet-story-excerpt">' + d.excerpt + '</p>' +
|
||||
'<div class="pet-story-meta">' +
|
||||
'<span class="pet-story-tag">' + d.tag1 + '</span>' +
|
||||
'<span class="pet-story-tag">' + d.tag2 + '</span>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="pet-story-author">' +
|
||||
'<img class="pet-story-avatar" src="' + s.avatar + '" alt="" />' +
|
||||
'<div class="pet-story-author-info">' +
|
||||
'<p class="pet-story-author-name">' + d.author + '</p>' +
|
||||
'<p class="pet-story-pet">' + d.pet + '</p>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</a>';
|
||||
});
|
||||
grid.innerHTML = html;
|
||||
}
|
||||
|
||||
const applyLang = (lang) => {
|
||||
const dict = translations[lang] || translations.en;
|
||||
elements.forEach((el) => {
|
||||
@@ -4490,6 +4690,14 @@
|
||||
if (langSelect) langSelect.value = lang;
|
||||
document.documentElement.lang = lang === "zh" ? "zh-CN" : lang;
|
||||
document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
|
||||
// Refresh product display area with current language
|
||||
try {
|
||||
if (typeof showProduct === 'function') {
|
||||
showProduct(currentProductId);
|
||||
}
|
||||
} catch(e) {}
|
||||
// Refresh random stories with current language
|
||||
try { renderRandomStories(lang); } catch(e) {}
|
||||
};
|
||||
|
||||
const detected = normalizeLang(navigator.language || navigator.userLanguage || "en");
|
||||
@@ -4502,57 +4710,6 @@
|
||||
}
|
||||
|
||||
const sections = Array.from(document.querySelectorAll(".snap-section"));
|
||||
if (sections.length === 0) return;
|
||||
|
||||
let isScrolling = false;
|
||||
let lastScrollTime = 0;
|
||||
|
||||
const scrollToIndex = (index) => {
|
||||
const target = sections[index];
|
||||
if (!target) return;
|
||||
isScrolling = true;
|
||||
target.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
setTimeout(() => {
|
||||
isScrolling = false;
|
||||
}, 700);
|
||||
};
|
||||
|
||||
const currentIndex = () => {
|
||||
const y = window.scrollY + window.innerHeight / 2;
|
||||
let idx = 0;
|
||||
for (let i = 0; i < sections.length; i += 1) {
|
||||
if (sections[i].offsetTop <= y) idx = i;
|
||||
}
|
||||
return idx;
|
||||
};
|
||||
|
||||
window.addEventListener(
|
||||
"wheel",
|
||||
(event) => {
|
||||
const now = Date.now();
|
||||
if (isScrolling || now - lastScrollTime < 500) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
lastScrollTime = now;
|
||||
const dir = event.deltaY > 0 ? 1 : -1;
|
||||
const idx = currentIndex();
|
||||
scrollToIndex(idx + dir);
|
||||
event.preventDefault();
|
||||
},
|
||||
{ passive: false }
|
||||
);
|
||||
|
||||
window.addEventListener("keydown", (event) => {
|
||||
if (isScrolling) return;
|
||||
if (event.key === "ArrowDown" || event.key === "PageDown") {
|
||||
scrollToIndex(currentIndex() + 1);
|
||||
event.preventDefault();
|
||||
} else if (event.key === "ArrowUp" || event.key === "PageUp") {
|
||||
scrollToIndex(currentIndex() - 1);
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
// 滚动显示动画
|
||||
const observerOptions = {
|
||||
@@ -4629,42 +4786,32 @@
|
||||
const displayFeatures = document.getElementById('displayFeatures');
|
||||
const productGrid = document.getElementById('productGrid');
|
||||
|
||||
// 产品数据
|
||||
// 产品数据 - 支持多语言
|
||||
const productData = {
|
||||
1: {
|
||||
title: '智能猫厕所',
|
||||
subtitle: '守护猫咪如厕健康，AI分析排泄数据',
|
||||
image: 'cat.png',
|
||||
pets: ['cat'],
|
||||
features: ['实时监测如厕频率与时长', '排泄物状态AI分析', '自动清洁保持卫生', '健康趋势数据报告']
|
||||
zh: { title: '智能猫厕所', subtitle: '守护猫咪如厕健康，AI分析排泄数据', features: ['实时监测如厕频率与时长', '排泄物状态AI分析', '自动清洁保持卫生', '健康趋势数据报告'] },
|
||||
en: { title: 'Smart Cat Litter Box', subtitle: 'Protecting cat health with AI waste analysis', features: ['Real-time monitoring of frequency & duration', 'AI waste condition analysis', 'Auto cleaning keeps it fresh', 'Health trend data reports'] },
|
||||
image: 'cat.png', pets: ['cat']
|
||||
},
|
||||
2: {
|
||||
title: '智能狗厕所',
|
||||
subtitle: '科学如厕训练，培养良好习惯',
|
||||
image: 'dog.jpeg',
|
||||
pets: ['dog'],
|
||||
features: ['科学如厕训练引导', '智能感应自动清洁', 'APP远程监控', '培养良好如厕习惯']
|
||||
zh: { title: '智能狗厕所', subtitle: '科学如厕训练，培养良好习惯', features: ['科学如厕训练引导', '智能感应自动清洁', 'APP远程监控', '培养良好如厕习惯'] },
|
||||
en: { title: 'Smart Dog Toilet', subtitle: 'Scientific training for good habits', features: ['Scientific potty training guidance', 'Smart sensor auto cleaning', 'APP remote monitoring', 'Develop good toilet habits'] },
|
||||
image: 'dog.jpeg', pets: ['dog']
|
||||
},
|
||||
3: {
|
||||
title: '智能喂食器',
|
||||
subtitle: '精准投喂，养成健康饮食习惯',
|
||||
image: 'feeder.png',
|
||||
pets: ['cat', 'dog'],
|
||||
features: ['多格设计支持不同食材', '定时定量精准投喂', '进食数据实时同步APP', '养成健康饮食习惯']
|
||||
zh: { title: '智能喂食器', subtitle: '精准投喂，养成健康饮食习惯', features: ['多格设计支持不同食材', '定时定量精准投喂', '进食数据实时同步APP', '养成健康饮食习惯'] },
|
||||
en: { title: 'Smart Feeder', subtitle: 'Precise feeding for healthy eating habits', features: ['Multi-compartment for different foods', 'Scheduled precise portion control', 'Feeding data synced to APP', 'Build healthy eating habits'] },
|
||||
image: 'feeder.png', pets: ['cat', 'dog']
|
||||
},
|
||||
4: {
|
||||
title: '智能饮水机',
|
||||
subtitle: '活水吸引，提升饮水健康',
|
||||
image: 'water.jpeg',
|
||||
pets: ['cat', 'dog'],
|
||||
features: ['四重过滤循环净化', '活水吸引增加饮水兴趣', 'APP记录饮水量', '智能饮水提醒']
|
||||
zh: { title: '智能饮水机', subtitle: '活水吸引，提升饮水健康', features: ['四重过滤循环净化', '活水吸引增加饮水兴趣', 'APP记录饮水量', '智能饮水提醒'] },
|
||||
en: { title: 'Smart Fountain', subtitle: 'Flowing water for better hydration', features: ['4-stage filtration & circulation', 'Flowing water encourages drinking', 'APP tracks water intake', 'Smart hydration reminders'] },
|
||||
image: 'water.jpeg', pets: ['cat', 'dog']
|
||||
},
|
||||
5: {
|
||||
title: 'AI宠物摄像头',
|
||||
subtitle: '随时查看，远程守护宠物',
|
||||
image: 'camera.jpeg',
|
||||
pets: ['cat', 'dog', 'bird'],
|
||||
features: ['1080P高清夜视', 'AI行为识别捕捉精彩瞬间', '双向语音互动', '随时查看宠物状态']
|
||||
zh: { title: 'AI宠物摄像头', subtitle: '随时查看，远程守护宠物', features: ['1080P高清夜视', 'AI行为识别捕捉精彩瞬间', '双向语音互动', '随时查看宠物状态'] },
|
||||
en: { title: 'AI Pet Camera', subtitle: 'Check on your pet anytime, anywhere', features: ['1080P HD night vision', 'AI behavior recognition captures moments', 'Two-way voice interaction', 'Monitor your pet remotely'] },
|
||||
image: 'camera.jpeg', pets: ['cat', 'dog', 'bird']
|
||||
}
|
||||
};
|
||||
|
||||
@@ -4698,11 +4845,15 @@
|
||||
|
||||
currentProductId = parseInt(productId);
|
||||
|
||||
// Get current language
|
||||
const currentLang = document.documentElement.lang === 'zh-CN' ? 'zh' : 'en';
|
||||
const langData = data[currentLang] || data.zh;
|
||||
|
||||
// 更新内容
|
||||
displayImage.src = data.image;
|
||||
displayTitle.textContent = data.title;
|
||||
displaySubtitle.textContent = data.subtitle;
|
||||
displayFeatures.innerHTML = data.features.map(f => `<li>${f}</li>`).join('');
|
||||
displayTitle.textContent = langData.title;
|
||||
displaySubtitle.textContent = langData.subtitle;
|
||||
displayFeatures.innerHTML = langData.features.map(f => `<li>${f}</li>`).join('');
|
||||
|
||||
// 更新宠物图标
|
||||
const displayPets = document.getElementById('displayPets');
|
||||
@@ -4822,8 +4973,8 @@
|
||||
</svg>
|
||||
</button>
|
||||
<div class="social-modal-header">
|
||||
<h3>关注我们</h3>
|
||||
<p>扫描二维码，获取更多精彩内容</p>
|
||||
<h3 data-i18n="modal_social_title">关注我们</h3>
|
||||
<p data-i18n="modal_social_desc">扫描二维码，获取更多精彩内容</p>
|
||||
</div>
|
||||
<div class="social-qr-grid">
|
||||
<div class="social-qr-item wechat">
|
||||
@@ -4833,8 +4984,8 @@
|
||||
<div class="qr-image">
|
||||
<img src="qr-wechat.png" alt="微信二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
|
||||
</div>
|
||||
<div class="qr-name">微信公众号</div>
|
||||
<div class="qr-desc">获取最新资讯</div>
|
||||
<div class="qr-name" data-i18n="modal_social_qr_wechat">微信公众号</div>
|
||||
<div class="qr-desc" data-i18n="modal_social_qr_wechat_desc">获取最新资讯</div>
|
||||
</div>
|
||||
<div class="social-qr-item weibo">
|
||||
<div class="qr-icon">
|
||||
@@ -4843,8 +4994,8 @@
|
||||
<div class="qr-image">
|
||||
<img src="qr-weibo.png" alt="微博二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
|
||||
</div>
|
||||
<div class="qr-name">官方微博</div>
|
||||
<div class="qr-desc">互动交流</div>
|
||||
<div class="qr-name" data-i18n="modal_social_qr_weibo">官方微博</div>
|
||||
<div class="qr-desc" data-i18n="modal_social_qr_weibo_desc">互动交流</div>
|
||||
</div>
|
||||
<div class="social-qr-item xiaohongshu">
|
||||
<div class="qr-icon">
|
||||
@@ -4853,8 +5004,8 @@
|
||||
<div class="qr-image">
|
||||
<img src="qr-xiaohongshu.png" alt="小红书二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
|
||||
</div>
|
||||
<div class="qr-name">小红书</div>
|
||||
<div class="qr-desc">种草分享</div>
|
||||
<div class="qr-name" data-i18n="modal_social_qr_xiaohongshu">小红书</div>
|
||||
<div class="qr-desc" data-i18n="modal_social_qr_xiaohongshu_desc">种草分享</div>
|
||||
</div>
|
||||
<div class="social-qr-item tiktok">
|
||||
<div class="qr-icon">
|
||||
@@ -4863,8 +5014,8 @@
|
||||
<div class="qr-image">
|
||||
<img src="qr-tiktok.png" alt="抖音二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
|
||||
</div>
|
||||
<div class="qr-name">抖音</div>
|
||||
<div class="qr-desc">精彩视频</div>
|
||||
<div class="qr-name" data-i18n="modal_social_qr_tiktok">抖音</div>
|
||||
<div class="qr-desc" data-i18n="modal_social_qr_tiktok_desc">精彩视频</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -4884,8 +5035,8 @@
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>联系我们</h3>
|
||||
<p>扫描下方二维码，添加专属客服</p>
|
||||
<h3 data-i18n="modal_contact_title">联系我们</h3>
|
||||
<p data-i18n="modal_contact_desc">扫描下方二维码，添加专属客服</p>
|
||||
<div class="contact-qr-wrapper">
|
||||
<div class="contact-qr-box">
|
||||
<img src="qr-contact.png" alt="客服二维码" onerror="this.parentElement.innerHTML='<span style=\'color:#9ca3af;font-size:14px;\'>请替换客服二维码<br>qr-contact.png</span>'" />
|
||||
@@ -4900,7 +5051,7 @@
|
||||
<line x1="7" y1="17" x2="7" y2="17"></line>
|
||||
<line x1="17" y1="17" x2="17" y2="17"></line>
|
||||
</svg>
|
||||
<span>微信扫码咨询</span>
|
||||
<span data-i18n="modal_contact_scan">微信扫码咨询</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -4922,8 +5073,8 @@
|
||||
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>官方旗舰店</h3>
|
||||
<p>扫描二维码，进入官方店铺选购</p>
|
||||
<h3 data-i18n="modal_shop_title">官方旗舰店</h3>
|
||||
<p data-i18n="modal_shop_desc">扫描二维码，进入官方店铺选购</p>
|
||||
<div class="contact-qr-wrapper">
|
||||
<div class="contact-qr-box">
|
||||
<img src="qr-shop.png" alt="旗舰店二维码" onerror="this.parentElement.innerHTML='<span style=\'color:#9ca3af;font-size:14px;\'>请替换店铺二维码<br>qr-shop.png</span>'" />
|
||||
@@ -4938,7 +5089,7 @@
|
||||
<line x1="7" y1="17" x2="7" y2="17"></line>
|
||||
<line x1="17" y1="17" x2="17" y2="17"></line>
|
||||
</svg>
|
||||
<span>扫码进店</span>
|
||||
<span data-i18n="modal_shop_scan">扫码进店</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+12
-12
@@ -830,7 +830,7 @@
|
||||
<main class="container">
|
||||
<div class="stories-grid">
|
||||
<!-- 故事1 -->
|
||||
<div class="story-card">
|
||||
<a href="story-detail.html?id=story-1" class="story-card">
|
||||
<div class="story-image-wrapper">
|
||||
<img class="story-image" src="story-1.jpg" alt="小橘" onerror="this.src='cat.png'" />
|
||||
<span class="story-category">健康恢复</span>
|
||||
@@ -851,10 +851,10 @@
|
||||
<span class="story-tag">数据报告</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 故事2 -->
|
||||
<div class="story-card">
|
||||
<a href="story-detail.html?id=story-2" class="story-card">
|
||||
<div class="story-image-wrapper">
|
||||
<img class="story-image" src="story-2.jpg" alt="旺财" onerror="this.src='dog.jpeg'" />
|
||||
<span class="story-category">体重管理</span>
|
||||
@@ -875,10 +875,10 @@
|
||||
<span class="story-tag">定时定量</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 故事3 -->
|
||||
<div class="story-card">
|
||||
<a href="story-detail.html?id=story-3" class="story-card">
|
||||
<div class="story-image-wrapper">
|
||||
<img class="story-image" src="story-3.jpg" alt="布丁" onerror="this.src='cat.png'" />
|
||||
<span class="story-category">AI识别</span>
|
||||
@@ -899,10 +899,10 @@
|
||||
<span class="story-tag">远程守护</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 故事4 -->
|
||||
<div class="story-card">
|
||||
<a href="story-detail.html?id=story-4" class="story-card">
|
||||
<div class="story-image-wrapper">
|
||||
<img class="story-image" src="story-4.jpg" alt="豆豆" onerror="this.src='dog.jpeg'" />
|
||||
<span class="story-category">饮水健康</span>
|
||||
@@ -923,10 +923,10 @@
|
||||
<span class="story-tag">循环净化</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 故事5 -->
|
||||
<div class="story-card">
|
||||
<a href="story-detail.html?id=story-5" class="story-card">
|
||||
<div class="story-image-wrapper">
|
||||
<img class="story-image" src="story-5.jpg" alt="咪咪" onerror="this.src='cat.png'" />
|
||||
<span class="story-category">健康监测</span>
|
||||
@@ -947,10 +947,10 @@
|
||||
<span class="story-tag">数据报告</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 故事6 -->
|
||||
<div class="story-card">
|
||||
<a href="story-detail.html?id=story-6" class="story-card">
|
||||
<div class="story-image-wrapper">
|
||||
<img class="story-image" src="story-6.jpg" alt="大黄" onerror="this.src='dog.jpeg'" />
|
||||
<span class="story-category">训练养成</span>
|
||||
@@ -971,7 +971,7 @@
|
||||
<span class="story-tag">清洁管理</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 社交媒体区域 -->
|
||||
|
||||
@@ -0,0 +1,636 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>故事详情 - Chookoo 宠科智能科技</title>
|
||||
<style>
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bg: #f5f7fb;
|
||||
--text: #0f172a;
|
||||
--muted: #5b6472;
|
||||
--primary: #2f6bff;
|
||||
--primary-weak: #e8f1ff;
|
||||
--card: #ffffff;
|
||||
--line: #e5e7eb;
|
||||
--shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-width: 1280px;
|
||||
line-height: 1.6;
|
||||
transform-origin: top left;
|
||||
}
|
||||
a { color: inherit; text-decoration: none; }
|
||||
|
||||
/* 导航栏 */
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0;
|
||||
z-index: 1000;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.navbar-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
padding: 0 32px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
.navbar-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.navbar-logo img { height: 40px; width: auto; }
|
||||
.navbar-link {
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.navbar-link:hover { color: var(--text); background: rgba(0, 0, 0, 0.04); }
|
||||
.navbar-link.active { color: var(--primary); background: var(--primary-weak); }
|
||||
.navbar-actions { display: flex; align-items: center; gap: 12px; }
|
||||
.navbar-btn {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 40px; height: 40px; border-radius: 10px;
|
||||
background: transparent; border: none; cursor: pointer;
|
||||
color: var(--muted); transition: all 0.2s ease;
|
||||
}
|
||||
.navbar-btn:hover { background: rgba(0, 0, 0, 0.04); color: var(--text); }
|
||||
.navbar-btn svg { width: 20px; height: 20px; }
|
||||
.navbar-cta {
|
||||
padding: 10px 20px; font-size: 14px; font-weight: 600;
|
||||
color: #fff; background: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%);
|
||||
border: none; border-radius: 10px; transition: all 0.2s ease;
|
||||
}
|
||||
.navbar-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(47, 107, 255, 0.3); }
|
||||
.mobile-menu-btn { display: none; }
|
||||
|
||||
/* 主内容 */
|
||||
.main-content {
|
||||
padding-top: 100px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
/* 面包屑 */
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
color: var(--muted);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.breadcrumb a:hover { color: var(--primary); }
|
||||
.breadcrumb span { color: var(--text); font-weight: 500; }
|
||||
|
||||
/* 故事头部 */
|
||||
.story-hero {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.story-hero-image {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.story-hero-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.story-category-badge {
|
||||
display: inline-block;
|
||||
padding: 6px 16px;
|
||||
border-radius: 100px;
|
||||
background: var(--primary-weak);
|
||||
color: var(--primary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.story-hero h1 {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.story-author-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px 24px;
|
||||
background: var(--card);
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
.story-author-avatar {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 3px solid var(--primary-weak);
|
||||
}
|
||||
.story-author-info { flex: 1; }
|
||||
.story-author-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.story-author-meta {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.story-date-badge {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.story-date-badge svg { width: 16px; height: 16px; }
|
||||
|
||||
/* 故事正文 */
|
||||
.story-body {
|
||||
background: var(--card);
|
||||
border-radius: 24px;
|
||||
padding: 48px;
|
||||
border: 1px solid var(--line);
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.story-body p {
|
||||
font-size: 16px;
|
||||
line-height: 2;
|
||||
color: #374151;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.story-body p:last-child { margin-bottom: 0; }
|
||||
.story-body blockquote {
|
||||
margin: 24px 0;
|
||||
padding: 20px 24px;
|
||||
background: var(--primary-weak);
|
||||
border-left: 4px solid var(--primary);
|
||||
border-radius: 0 12px 12px 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
color: #1e40af;
|
||||
}
|
||||
.story-body h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
margin: 32px 0 16px;
|
||||
color: var(--text);
|
||||
}
|
||||
.story-body ul {
|
||||
margin: 16px 0;
|
||||
padding-left: 24px;
|
||||
}
|
||||
.story-body li {
|
||||
font-size: 16px;
|
||||
line-height: 2;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
/* 标签 */
|
||||
.story-tags-bar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.story-tag-item {
|
||||
padding: 6px 16px;
|
||||
border-radius: 100px;
|
||||
background: var(--primary-weak);
|
||||
color: var(--primary);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 分隔线 */
|
||||
.story-divider {
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--primary), #06b6d4);
|
||||
border-radius: 2px;
|
||||
margin: 0 auto 48px;
|
||||
}
|
||||
|
||||
/* 相关故事 */
|
||||
.related-stories h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.related-stories h2::before {
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background: linear-gradient(180deg, var(--primary) 0%, #06b6d4 100%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.related-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
.related-card {
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--line);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.related-card:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.related-card-image {
|
||||
height: 160px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.related-card-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
.related-card:hover .related-card-image img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
.related-card-content { padding: 20px; }
|
||||
.related-card-content h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.related-card:hover .related-card-content h3 { color: var(--primary); }
|
||||
.related-card-content p {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
line-height: 1.6;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 404 */
|
||||
.not-found {
|
||||
text-align: center;
|
||||
padding: 120px 24px;
|
||||
}
|
||||
.not-found h1 { font-size: 48px; margin-bottom: 16px; }
|
||||
.not-found p { color: var(--muted); margin-bottom: 24px; }
|
||||
.not-found a {
|
||||
display: inline-block;
|
||||
padding: 12px 24px;
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 页脚 */
|
||||
.footer {
|
||||
background: #0f172a;
|
||||
color: #94a3b8;
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.footer-text { font-size: 13px; }
|
||||
|
||||
/* 动画 */
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.story-hero { animation: fadeInUp 0.6s ease; }
|
||||
.story-body { animation: fadeInUp 0.6s ease 0.15s both; }
|
||||
.related-stories { animation: fadeInUp 0.6s ease 0.3s both; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<a href="index.html" class="navbar-logo">
|
||||
<img src="logo.png" alt="Chookoo" />
|
||||
</a>
|
||||
<div class="navbar-menu">
|
||||
<a href="index.html" class="navbar-link">首页</a>
|
||||
<a href="products.html" class="navbar-link">产品</a>
|
||||
<a href="stories.html" class="navbar-link active">故事</a>
|
||||
<a href="app.html" class="navbar-link">App</a>
|
||||
<a href="index.html#support" class="navbar-link">关于我们</a>
|
||||
</div>
|
||||
<div class="navbar-actions">
|
||||
<a href="help.html" class="navbar-btn" aria-label="Search">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
||||
</a>
|
||||
<a href="index.html#contact" class="navbar-cta">联系我们</a>
|
||||
<button class="navbar-btn mobile-menu-btn" aria-label="Menu">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main-content" id="mainContent">
|
||||
<!-- 由 JavaScript 动态渲染 -->
|
||||
</main>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="footer">
|
||||
<p class="footer-text">© 2025 Chookoo 宠科智能科技（苏州）有限公司 保留所有权利</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// 视口缩放
|
||||
(() => {
|
||||
const designWidth = 1920, minWidth = 1280, maxWidth = 2560;
|
||||
function scale() {
|
||||
const vw = window.innerWidth;
|
||||
let s = vw < minWidth ? vw / minWidth : vw > maxWidth ? vw / maxWidth : vw / designWidth;
|
||||
document.body.style.transform = 'scale(' + s + ')';
|
||||
document.body.style.width = designWidth + 'px';
|
||||
}
|
||||
scale();
|
||||
window.addEventListener('resize', scale);
|
||||
})();
|
||||
|
||||
// 故事数据库
|
||||
const stories = {
|
||||
'story-1': {
|
||||
id: 'story-1',
|
||||
image: 'cat.png',
|
||||
fallback: 'cat.png',
|
||||
avatar: 'cat.png',
|
||||
category: '健康恢复',
|
||||
date: '2024.03',
|
||||
location: '上海',
|
||||
pet: '橘猫',
|
||||
tags: ['健康监测', '智能猫厕所', '数据报告'],
|
||||
title: '小橘的逆袭日记',
|
||||
excerpt: '第一次发现Chookoo的智能猫厕所后，小橘终于康复了健康...',
|
||||
paragraphs: [
|
||||
'我家小橘今年三岁，是一只活泼好动的橘猫。去年冬天开始，我发现它如厕的频率明显增加了，有时候一天要去好几次猫砂盆。一开始我以为只是正常的饮食变化，并没有太在意。',
|
||||
'直到有一天，我在清理猫砂盆的时候发现了一些异常的痕迹。我立刻带小橘去了宠物医院，医生检查后告诉我，小橘可能存在泌尿系统的隐患，需要长期观察和定期检测。这让我非常担心。',
|
||||
'后来在朋友的推荐下，我入手了Chookoo的智能猫厕所Pro。一开始我只是抱着试试看的心态，没想到它给了我一个巨大的惊喜。设备内置的毫米波雷达可以监测小橘的心率和呼吸，红外测温功能还能实时检测体温。',
|
||||
'更让我安心的是，每次小橘如厕后，APP都会自动生成健康数据报告，包括如厕时长、频率、体重变化等关键指标。通过这些数据，我可以清楚地看到小橘的健康趋势，再也不用担心错过任何异常信号。',
|
||||
'经过三个月的持续监测和医生的配合治疗，小橘的各项指标都恢复了正常。现在它每天都活力满满，我也终于可以放心地工作了。感谢Chookoo，让我成为了一个更负责任的猫家长。'
|
||||
],
|
||||
highlights: [
|
||||
'通过智能猫厕所的持续监测，及时发现猫咪健康异常',
|
||||
'APP数据报告让宠物主人随时掌握健康趋势',
|
||||
'配合兽医治疗，帮助小橘恢复健康'
|
||||
]
|
||||
},
|
||||
'story-2': {
|
||||
id: 'story-2',
|
||||
image: 'dog.jpeg',
|
||||
fallback: 'dog.jpeg',
|
||||
avatar: 'dog.jpeg',
|
||||
category: '体重管理',
|
||||
date: '2024.02',
|
||||
location: '北京',
|
||||
pet: '金毛',
|
||||
tags: ['智能喂食', '体重管理', '定时定量'],
|
||||
title: '旺财的健身日记',
|
||||
excerpt: '旺财以前很挑食，Chookoo的智能喂食器帮它养成了定点投喂的好习惯...',
|
||||
paragraphs: [
|
||||
'旺财是一只两岁的金毛犬，活泼好动是它的天性。但它有一个让我头疼的问题——挑食。有时候一天不吃东西，有时候又暴饮暴食，体重一直不太稳定。',
|
||||
'最严重的时候，旺财的体重飙升到了38公斤，医生警告我必须控制它的饮食，否则会对关节和心脏造成很大的负担。我尝试过手动控制食量，但因为工作忙碌，经常忘记按时喂食。',
|
||||
'后来我购买了Chookoo的智能喂食器，这彻底改变了我们家的喂养方式。我可以在APP上设置每天固定的喂食时间和食量，喂食器会精准地投喂每一餐。旺财很快就养成了定时吃饭的好习惯。',
|
||||
'最让我惊喜的是，喂食器还会记录每次的进食量和时间，生成进食报告。通过三个月的数据追踪，配合适量的运动，旺财的体重已经稳定在了32公斤的理想范围。',
|
||||
'现在的旺财每天准时在喂食器前等候，吃完饭后还会开心地摇尾巴。科学喂养真的不是一句空话，感谢Chookoo让我们的养宠生活变得更轻松。'
|
||||
],
|
||||
highlights: [
|
||||
'智能喂食器帮助旺财养成定时定量进食的好习惯',
|
||||
'APP进食数据追踪让体重管理更有科学依据',
|
||||
'三个月减重6公斤，恢复健康体型'
|
||||
]
|
||||
},
|
||||
'story-3': {
|
||||
id: 'story-3',
|
||||
image: 'cat.png',
|
||||
fallback: 'cat.png',
|
||||
avatar: 'cat.png',
|
||||
category: 'AI识别',
|
||||
date: '2024.01',
|
||||
location: '深圳',
|
||||
pet: '英短',
|
||||
tags: ['AI摄像头', '行为识别', '远程守护'],
|
||||
title: '布丁的日常',
|
||||
excerpt: '自从用了AI摄像头，可以自动识别布丁的状态，让我惊喜万分...',
|
||||
paragraphs: [
|
||||
'布丁是一只一岁的英国短毛猫，因为工作原因我白天经常不在家。每次出门的时候，我都会担心它是不是安全，有没有好好吃饭，是不是又在偷偷啃我的拖鞋。',
|
||||
'朋友给我推荐了Chookoo的AI宠物摄像头，说它可以自动识别宠物的行为。我抱着试一试的心态入手了一台，没想到从此打开了新世界的大门。',
|
||||
'摄像头的1080P高清画质非常清晰，即使在夜晚，红外夜视功能也能清楚地看到布丁的一举一动。最让我惊喜的是它的AI行为识别功能，能自动判断布丁是在睡觉、玩耍、进食还是异常行为。',
|
||||
'有一天上班的时候，手机突然收到一条AI提醒：「检测到您的宠物出现频繁抓挠行为」。我赶紧打开APP查看回放，发现布丁一直在挠耳朵。下班后立刻带它去了医院，结果检查出耳螨，幸亏发现得早。',
|
||||
'从那以后，我更加信赖这个AI摄像头了。它不仅仅是一个监控设备，更像是一个24小时守护布丁的智能管家。感谢Chookoo让我可以安心工作，也能时刻关注布丁的状态。'
|
||||
],
|
||||
highlights: [
|
||||
'AI行为识别及时发现猫咪频繁抓挠的异常行为',
|
||||
'高清夜视功能让夜间监控同样清晰',
|
||||
'远程双向语音可以随时安抚宠物情绪'
|
||||
]
|
||||
},
|
||||
'story-4': {
|
||||
id: 'story-4',
|
||||
image: 'dog.jpeg',
|
||||
fallback: 'dog.jpeg',
|
||||
avatar: 'dog.jpeg',
|
||||
category: '饮水健康',
|
||||
date: '2024.01',
|
||||
location: '杭州',
|
||||
pet: '柯基',
|
||||
tags: ['智能饮水机', '饮水提醒', '循环净化'],
|
||||
title: '豆豆的饮水日记',
|
||||
excerpt: '豆豆以前不爱喝水，用了智能饮水机后，循环净化的水让它爱喝了...',
|
||||
paragraphs: [
|
||||
'豆豆是一只三岁的柯基犬，活泼可爱，但有一个让我非常头疼的问题——不爱喝水。每次给它倒的水，放一整天都不见少。医生说长期饮水不足会导致泌尿系统和肾脏问题，这让我非常焦虑。',
|
||||
'我试过各种方法：在水中加入鸡胸肉汤、更换不同材质的水碗、在多个位置放水碗……效果都不理想。直到我发现了Chookoo的智能饮水机。',
|
||||
'这款饮水机采用循环活水设计，模拟自然流动的泉水，这对狗狗来说比静止的水更有吸引力。四重过滤系统——活性炭、离子树脂、超滤膜和高密度棉——确保水质始终干净新鲜。',
|
||||
'豆豆第一次看到流动的水就好奇地凑过去闻了闻，然后开始舔着喝。从那以后，它喝水的频率明显增加了。APP上的饮水数据也证实了这一点，从每天不到200ml增加到了500ml以上。',
|
||||
'最让我安心的是，当水位过低或滤芯需要更换时，APP会自动推送提醒，再也不用担心忘记维护了。豆豆现在每天都精神满满，皮毛也更加光亮了。'
|
||||
],
|
||||
highlights: [
|
||||
'循环活水设计激发狗狗饮水兴趣',
|
||||
'四重过滤系统确保水质安全',
|
||||
'APP智能提醒帮助维护设备'
|
||||
]
|
||||
},
|
||||
'story-5': {
|
||||
id: 'story-5',
|
||||
image: 'cat.png',
|
||||
fallback: 'cat.png',
|
||||
avatar: 'cat.png',
|
||||
category: '健康监测',
|
||||
date: '2023.12',
|
||||
location: '广州',
|
||||
pet: '美短',
|
||||
tags: ['健康监测', '预防管理', '数据报告'],
|
||||
title: '咪咪的健康守护',
|
||||
excerpt: 'Chookoo的智能设备帮我实时监测咪咪的健康状况，每次数据报告都让我很安心...',
|
||||
paragraphs: [
|
||||
'咪咪是一只四岁的美国短毛猫，是我从小养到大的宝贝。随着年龄的增长，我越来越关注它的健康状况。去年体检的时候，医生说咪咪的各项指标都还不错，但建议我多关注它的日常健康数据。',
|
||||
'抱着试试看的心态，我入手了Chookoo的智能猫厕所和健康追踪器。这两个设备的组合使用，让我对咪咪的健康状况有了前所未有的了解。',
|
||||
'智能猫厕所每次都会记录咪咪的如厕时间、频率和体重变化。有一次，APP的数据分析提示咪咪的如厕频率出现异常上升趋势。虽然变化很轻微，但我还是决定带它去医院检查。',
|
||||
'结果发现咪咪有轻微的膀胱炎症，因为发现得早，只用了两周的药就完全康复了。如果等到症状明显再去，可能就需要更长的治疗周期。这让我深刻体会到了「预防胜于治疗」的含义。',
|
||||
'现在我已经养成了每天查看咪咪健康报告的习惯。Chookoo不仅给了我数据，更给了我安心。真正的健康管理，就是在日常中持续关注，把风险扼杀在摇篮里。'
|
||||
],
|
||||
highlights: [
|
||||
'智能设备帮助早期发现猫咪膀胱炎症',
|
||||
'日常健康数据持续追踪让预防成为可能',
|
||||
'APP健康报告让宠物主人更安心'
|
||||
]
|
||||
},
|
||||
'story-6': {
|
||||
id: 'story-6',
|
||||
image: 'dog.jpeg',
|
||||
fallback: 'dog.jpeg',
|
||||
avatar: 'dog.jpeg',
|
||||
category: '训练养成',
|
||||
date: '2023.11',
|
||||
location: '成都',
|
||||
pet: '田园犬',
|
||||
tags: ['智能狗厕所', '如厕训练', '清洁管理'],
|
||||
title: '大黄的如厕训练',
|
||||
excerpt: '大黄以前随地大小便，用了Chookoo的智能狗厕所，科学训练让它很快养成了好习惯...',
|
||||
paragraphs: [
|
||||
'大黄是我从救助站领养的一只中华田园犬，刚来的时候已经一岁多了。因为之前在外面流浪过，大黄完全没有室内如厕的概念，经常在家里随地大小便，让我非常苦恼。',
|
||||
'我尝试过传统的如厕训练方法——铺报纸、喷诱导剂、发现它要上厕所就赶紧抱到指定位置。但因为工作忙，不可能24小时盯着它，效果一直不理想。',
|
||||
'后来在网上看到了Chookoo的智能狗厕所，介绍说有科学诱导训练功能，我决定试一试。设备通过特殊的诱导气味和声音提示，引导大黄到指定位置如厕。',
|
||||
'让我没想到的是，仅仅用了两周时间，大黄就学会了在狗厕所上如厕。APP还会记录它每次成功如厕的次数，生成训练报告。看到进度一天天提升，我真的很有成就感。',
|
||||
'现在大黄已经完全适应了在智能狗厕所上如厕，自动冲水清洁功能也让我省心了不少。从一只随地大小便的流浪狗到如今的乖巧毛孩子，大黄的进步让我非常欣慰。'
|
||||
],
|
||||
highlights: [
|
||||
'科学诱导训练帮助领养犬快速学会定点如厕',
|
||||
'APP训练报告追踪进度，增强训练信心',
|
||||
'自动清洁功能减轻主人维护负担'
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染故事详情
|
||||
function renderStory(storyId) {
|
||||
var story = stories[storyId];
|
||||
var main = document.getElementById('mainContent');
|
||||
|
||||
if (!story) {
|
||||
main.innerHTML = '<div class="not-found"><h1>故事未找到</h1><p>抱歉，您访问的故事不存在</p><a href="stories.html">返回故事列表</a></div>';
|
||||
document.title = '故事未找到 - Chookoo';
|
||||
return;
|
||||
}
|
||||
|
||||
document.title = story.title + ' - Chookoo';
|
||||
|
||||
// 获取相关故事（同类型或其他）
|
||||
var relatedIds = Object.keys(stories).filter(function(id) { return id !== storyId; });
|
||||
relatedIds.sort(function() { return Math.random() - 0.5; });
|
||||
var related = relatedIds.slice(0, 3);
|
||||
|
||||
// 构建正文HTML
|
||||
var bodyHTML = '';
|
||||
story.paragraphs.forEach(function(p) {
|
||||
bodyHTML += '<p>' + p + '</p>';
|
||||
});
|
||||
|
||||
// 高亮块
|
||||
var highlightHTML = '';
|
||||
if (story.highlights && story.highlights.length > 0) {
|
||||
highlightHTML = '<blockquote>';
|
||||
story.highlights.forEach(function(h) {
|
||||
highlightHTML += h + '<br/>';
|
||||
});
|
||||
highlightHTML += '</blockquote>';
|
||||
}
|
||||
|
||||
// 相关故事
|
||||
var relatedHTML = '';
|
||||
related.forEach(function(rid) {
|
||||
var rs = stories[rid];
|
||||
relatedHTML += '<a href="story-detail.html?id=' + rs.id + '" class="related-card">' +
|
||||
'<div class="related-card-image"><img src="' + rs.image + '" alt="' + rs.title + '" onerror="this.src=\'' + rs.fallback + '\'" /></div>' +
|
||||
'<div class="related-card-content"><h3>' + rs.title + '</h3><p>' + rs.excerpt + '</p></div>' +
|
||||
'</a>';
|
||||
});
|
||||
|
||||
main.innerHTML =
|
||||
'<div class="breadcrumb">' +
|
||||
'<a href="index.html">首页</a><span>/</span>' +
|
||||
'<a href="stories.html">故事</a><span>/</span>' +
|
||||
'<span>' + story.title + '</span>' +
|
||||
'</div>' +
|
||||
|
||||
'<div class="story-hero">' +
|
||||
'<div class="story-hero-image"><img src="' + story.image + '" alt="' + story.title + '" onerror="this.src=\'' + story.fallback + '\'" /></div>' +
|
||||
'<span class="story-category-badge">' + story.category + '</span>' +
|
||||
'<h1>' + story.title + '</h1>' +
|
||||
'<div class="story-author-bar">' +
|
||||
'<img class="story-author-avatar" src="' + story.avatar + '" alt="' + story.pet + '" onerror="this.src=\'' + story.fallback + '\'" />' +
|
||||
'<div class="story-author-info">' +
|
||||
'<p class="story-author-name">' + story.pet + '家长</p>' +
|
||||
'<p class="story-author-meta">' + story.pet + ' · ' + story.location + '</p>' +
|
||||
'</div>' +
|
||||
'<div class="story-date-badge">' +
|
||||
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>' +
|
||||
'<span>' + story.date + '</span>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
|
||||
'<div class="story-body">' +
|
||||
bodyHTML +
|
||||
highlightHTML +
|
||||
'</div>' +
|
||||
|
||||
'<div class="story-tags-bar">' +
|
||||
story.tags.map(function(t) { return '<span class="story-tag-item">' + t + '</span>'; }).join('') +
|
||||
'</div>' +
|
||||
|
||||
'<div class="story-divider"></div>' +
|
||||
|
||||
'<div class="related-stories">' +
|
||||
'<h2>更多故事</h2>' +
|
||||
'<div class="related-grid">' + relatedHTML + '</div>' +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
// 初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var storyId = params.get('id') || 'story-1';
|
||||
renderStory(storyId);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+430
@@ -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）已准备（如暂无可后续补充）
|
||||
Binary file not shown.
Reference in New Issue
Block a user