88 lines
3.9 KiB
Markdown
88 lines
3.9 KiB
Markdown
# 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 页面重点展示以下差异化技术：
|
||
|
||
1. **毫米波雷达监测** — 24 小时无感监测宠物心率与呼吸频率，无需穿戴设备
|
||
2. **红外体温检测** — 精准测温（±0.1°C），每次如厕自动测量，发烧即时预警
|
||
3. **AI 健康预警** — 基于多维度数据（饮食、排泄、活动）AI 综合分析，异常主动干预
|
||
4. **多设备生态联动** — 喂食器、猫砂盆、饮水机数据互通，构建完整健康管理生态
|
||
|
||
---
|
||
|
||
## 六、设计规范
|
||
|
||
- **配色方案：** 主色 `#2f6bff`（蓝），辅色 `#06b6d4`（青），渐变贯穿全站
|
||
- **字体：** Inter + 系统字体回退链
|
||
- **卡片风格：** 16px–20px 圆角、悬浮阴影动效、1px 边框
|
||
- **最小设计宽度：** 1280px，确保桌面端体验一致
|