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

背景

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 类控制显示