3.9 KiB
3.9 KiB
Chookoo 官网项目功能总结报告
项目名称：chookoo.net 官网 技术方案：纯静态多页 HTML 站点（原生 HTML / CSS / JS，无框架依赖）
一、项目定位
Chookoo（宠科智能科技）企业官网，面向 AIoT 智能宠物健康管理品牌，承载品牌展示、产品推广、App 下载引导及用户服务等核心职能。
二、页面结构
全站共 10 个页面，覆盖以下模块：
| 模块 | 页面文件 | 说明 |
|---|---|---|
| 首页 | index.html |
轮播图 Hero 区、产品概览、联系表单；导航栏滚动时由透明切换为白底毛玻璃效果 |
| 产品列表 | pages/products.html |
全部产品展示，支持按类别筛选（猫用 / 狗用 / 智能厕所 / 喂养 / 监控） |
| 产品详情 | pages/product-detail.html |
单品详情页，通过 URL 参数 ?id= 区分不同产品 |
| App 介绍 | pages/app.html |
Chookoo App 核心卖点展示（毫米波雷达、红外测温、AI 健康预警、多设备联动），提供 iOS / Android / APK 三端下载入口 |
| 宠物故事 | pages/stories.html |
用户故事 / 博客内容列表 |
| 故事详情 | pages/story-detail.html |
单篇故事详情页 |
| 公司介绍 | pages/company.html |
企业信息、团队介绍、发展历程 |
| 合作伙伴 | pages/partner.html |
商务合作与渠道信息 |
| 法律条款 | pages/legal.html |
隐私政策、服务条款等法律文本 |
| 帮助中心 | pages/help.html |
常见问题、使用指南、售后支持 |
三、产品线展示
网站覆盖 4 大产品线，共 13+ 款产品：
3.1 智能厕所系列
- 智能猫厕所 Pro（AkiWell 主动健康猫砂盆）
- 智能猫厕所 Lite（泌尿健康守护）
- 智能狗厕所
3.2 喂养系列
- 智能喂食器（定时定量精准投喂）
- 智能饮水机（四重过滤循环净化）
- 智能猫粮桶 / 狗粮桶（真空保鲜、智能控湿）
3.3 监控系列
- AI 宠物摄像头（1080P 高清夜视、AI 行为识别）
- 宠物健康追踪器（实时监测活动量与睡眠）
- 环境监测仪（温湿度、空气质量）
3.4 配件系列
- 替换滤网套装、清洁耗材包、备用电源适配器、延长保修服务
四、核心交互功能
| 功能 | 实现方式 | 说明 |
|---|---|---|
| 视口自适应 | transform: scale() |
基于 1920px 设计稿，自动缩放适配 1280px–2560px 屏幕 |
| 产品分类筛选 | JS DOM 操作 | 点击分类按钮过滤产品卡片，支持跨分类联合筛选 |
| 社交媒体弹窗 | Modal 组件 | 展示微信 / 微博 / 小红书 / 抖音二维码，支持 ESC 关闭 |
| 旗舰店弹窗 | Modal 组件 | 购物车图标触发，展示店铺二维码引导购买 |
| 多语言切换 | <select> 控件 |
中文 / English / 日本語 三语切换 UI 已就绪 |
| 响应式布局 | CSS Media Query | 1024px、768px 两个断点，适配平板与移动端 |
| 导航栏滚动效果 | scroll 监听 + class 切换 | 首页导航初始透明覆盖在轮播图上，滚动后变为白底毛玻璃 |
五、App 核心技术亮点
Chookoo App 页面重点展示以下差异化技术：
- 毫米波雷达监测 — 24 小时无感监测宠物心率与呼吸频率，无需穿戴设备
- 红外体温检测 — 精准测温（±0.1°C），每次如厕自动测量，发烧即时预警
- AI 健康预警 — 基于多维度数据（饮食、排泄、活动）AI 综合分析，异常主动干预
- 多设备生态联动 — 喂食器、猫砂盆、饮水机数据互通，构建完整健康管理生态
六、设计规范
- 配色方案： 主色
#2f6bff（蓝），辅色#06b6d4（青），渐变贯穿全站 - 字体： Inter + 系统字体回退链
- 卡片风格： 16px–20px 圆角、悬浮阴影动效、1px 边框
- 最小设计宽度： 1280px，确保桌面端体验一致