# 四大饮水方案对比 — 移动端轮播式重设计

## 背景

`web/articles/plastic-health.html` 的 `#compare` 区段包含一个 5 列 × 9 行的 HTML 表格，对比四种饮水方案。在手机屏幕上，5 列宽度不足，需横向滚动，体验不佳。

## 目标

移动端（< 768px）将表格改为**左右滑动轮播卡片**，桌面端（≥ 768px）保留现有表格。

## 设计方案

### 移动端：轮播卡片

- 4 张卡片，顺序：桶装水 → 自来水烧开 → RO纯水机 → 电解还原水机
- CSS `scroll-snap` 实现原生滑动，无需外部库
- 每张卡片显示全部 9 项对比指标
- 底部 4 个导航圆点 + 左右箭头按钮
- 少量 JavaScript（约 30 行）处理圆点/箭头交互

### 卡片颜色方案

| 卡片 | 顶部标签颜色 | 标签文字 |
|------|-------------|---------|
| 桶装水/瓶装水 | 红色 `#E53E3E` | ❌ 风险最高 |
| 自来水烧开 | 绿色 `#38A169` | ✅ 安全经济之选 |
| RO反渗透纯水机 | 橙色 `#DD6B20` | ⚠️ 缺矿物质 |
| 电解还原水机 | 蓝色 `#3182CE` | 🥇 综合最优解 |

### 桌面端

- 现有表格完全保留，通过 `@media (max-width: 767px)` 隐藏
- 轮播卡片在桌面端不显示

### 技术实现

- 纯 CSS `scroll-snap-type: x mandatory` + `scroll-snap-align: start`
- 轮播容器 `.compare-carousel`，内嵌 `.carousel-track` 包含 4 个 `.carousel-card`
- 底部圆点 `.carousel-dots` 通过 JS 监听 `scroll` 事件更新激活状态
- 箭头按钮通过 JS 调用 `scrollBy` / `scrollIntoView`

## 文件变更

- 仅修改 `web/articles/plastic-health.html`
- 新增样式（约 80 行 CSS）+ 轮播 HTML 结构（约 200 行）+ 交互 JS（约 40 行）
- 现有表格不变，仅添加 `d-none d-md-block` 类控制显示