# 草肤荟 CAOFUHUI · 品牌宣传网站（演示）
纯静态 HTML 品牌站演示，包含产品宣传栏、植物草本科普栏、品牌故事、批次溯源查询与响应式布局。
## 1. 技术栈
| 项目 | 说明 |
| --- | --- |
| 页面 | 原生 HTML5（4 个独立页面，语义化标签） |
| 样式 | 原生 CSS3（自定义属性、Grid、Flexbox、clamp() 流式排版） |
| 交互 | 原生 JavaScript（ES5 语法兼容写法，无依赖） |
| 图形 | 手写 SVG 矢量插画（无位图、无第三方图库） |
| 字体 | 系统字体栈（Noto Serif SC / 思源宋体 / 苹方等），不分发字体文件 |
| 构建 | 无。无 npm、无打包、无框架、无后端 |
| 部署 | 任意静态服务器（Nginx / Apache / Python http.server / OSS / GitHub Pages） |
设计取向：内容优先、低依赖、可离线打开、移动端优先。
## 2. 目录结构
```
caofuhui/
├── index.html 首页（Hero、数据条、产品宣传、溯源、草本科普、工艺、手记、评价、CTA）
├── products.html 产品系列（6 款单品、分类筛选、详情弹窗）
├── herbs.html 草本志（6 味草本档案、配伍思路、速查表）
├── about.html 关于品牌（故事、原则、品控、批次溯源、FAQ、联系、声明）
├── assets/
│ ├── css/main.css 全站样式（含响应式与减少动效适配）
│ ├── js/main.js 导航 / 筛选 / 弹窗 / 溯源查询 / 淡入
│ └── img/ 15 个原创 SVG（Logo、Hero、6 产品、6 草本、产地插画）
├── screenshots/ 桌面端与移动端验收截图
└── docs/ 技术说明、开发日志、素材授权、AI 使用声明
```
## 3. 在线演示（外网）
- 正式地址：**https://caofuhui.qudong.com/**
- HTTP 自动 301 跳转 HTTPS，证书由 Let's Encrypt 签发并自动续期。
- 部署位置（126 生产机）：`/www/wwwroot/caofuhui`
- OpenResty vhost：`/usr/local/server/openresty/nginx/conf/vhosts/caofuhui.qudong.com.conf`
- 访问日志：`/www/wwwlogs/caofuhui.qudong.com.log`
更新方式：本地修改后重新打包上传到该目录即可（纯静态，无需重启服务）。
## 4. 本地部署
```bash
cd /data/dev/brand/caofuhui
python3 -m http.server 8081 --bind 0.0.0.0
# 访问 http://127.0.0.1:8081/
```
Nginx 示例：
```nginx
server {
listen 80;
server_name demo.example.com;
root /data/dev/brand/caofuhui;
index index.html;
location / { try_files $uri $uri/ =404; }
}
```
> 说明：页面中的相对链接可直接用浏览器打开 `index.html`；使用本地 HTTP 服务可获得更接近线上的行为。
## 5. 验收路径
1. 首页 → 导航「产品系列 / 草本志 / 关于品牌」均可到达，当前页高亮。
2. 产品页 → 分类筛选（全部 / 清洁 / 精华 / 面霜 / 身体）即时生效；「查看详情」打开弹窗，Esc 或点击遮罩关闭。
3. 草本志 → 六张草本卡片含学名、科属、使用部位、配方角色；页尾速查表可横向滚动。
4. 关于页 → 输入 `CFH-2026-0412`、`CFH-2026-0518`、`CFH-2026-0603` 查询演示批次；错误批次有提示。
5. 移动端（≤860px）→ 汉堡菜单展开/收起，导航点击后自动收起；单列布局无横向溢出。
6. 键盘 → Tab 可遍历导航与按钮，跳转链接、焦点样式可见；弹窗可用 Esc 关闭。
## 6. 响应式断点
| 断点 | 布局变化 |
| --- | --- |
| > 1024px | 三列产品/草本、双列 Hero、四列页脚 |
| ≤ 1024px | 产品与草本两列，Hero 单列，工艺两列 |
| ≤ 860px | 汉堡导航、分栏上下堆叠、弹窗单列 |
| ≤ 640px | 全部单列、按钮满宽、页脚两列 |
| ≤ 420px | 页脚单列、数据卡收紧 |
## 7. 可访问性与性能
- 语义化结构：`header/nav/main/section/article/footer`、`aria-current`、`aria-expanded`、`aria-live`。
- 跳过导航链接、可见焦点环、图片 `alt`、装饰图形 `alt=""`。
- `prefers-reduced-motion` 下关闭滚动动效。
- 无外部请求、无字体下载、无追踪脚本；全部图形为 SVG，总体积小。
- 图片设置宽高，减少布局偏移；首屏外的图片使用 `loading="lazy"`。
## 8. 浏览器支持
Chrome / Edge / Firefox / Safari 近两年版本；`