# ZOOM 静音舱网页图片替换说明

网页入口：

- 英文版：`index.html`
- 中文版：`index-cn.html`
- 样式：`style.css`
- 交互动效：`script.js`
- 网页图片：`assets/img/`
- PPT 原始抽图备份：`assets/ppt/`

## 建议优先替换的图片

这些图片目前来自 PPT 或为临时组合图，后续如果有更高清、同一视觉风格的正式图片，建议优先替换：

| 文件 | 当前用途 | 建议替换为 |
| --- | --- | --- |
| `assets/img/hero-zoom.jpg` | 首屏大图 | 高清产品主视觉，最好横向 2400px 以上 |
| `assets/img/product-s-crop.png` | S1 型号展示 | 透明底或干净白底的单人舱正面图 |
| `assets/img/product-m.png` | M2 型号展示 | 透明底或干净白底的双人舱图 |
| `assets/img/product-l.png` | L4 型号展示 | 透明底或干净白底的四人舱图 |
| `assets/img/product-xl.png` | XL6 型号展示 | 透明底或干净白底的六人舱图 |
| `assets/img/config-default.jpg` | 配置器默认图 | 配置器不同角度/颜色图，建议至少 3 张同角度系列图 |
| `assets/img/config-dark.jpg` | 配置器黑色图 | 黑色/深色正式渲染图 |
| `assets/img/config-white.jpg` | 配置器白色图 | 白色正式渲染图 |
| `assets/img/app-*.jpg/png` | 应用场景 | 真实案例照片或统一风格的空间渲染图 |
| `assets/img/feature-*.jpg/png` | 功能卡片 | 统一近景细节图，如灯、插座、风口、面料、组装 |
| `assets/img/material-fabric.png` | 材料弹层 | 正式色卡或高清面料拼图 |

## 如何替换

最简单的方式：保持文件名不变，直接把新图片覆盖到 `assets/img/` 对应文件即可。

如果要改文件名，需要同步改：

- `index.html` 和 `index-cn.html` 里的 `<img src="...">`
- `script.js` 里的 `image`、`spin` 和弹层 `details` 图片路径

## 动效说明

当前页面已经加入：

- 鼠标滚轮惯性滚动
- 元素滚动进入动效
- 首屏图片视差
- 顶部进度条
- 卡片鼠标悬浮轻微 3D 倾斜
- 功能、技术、应用场景详情弹层
- 配置器尺寸/颜色/配件联动
- 配置器图片拖拽旋转的模拟效果
- 规格型号 tabs 与横向滚动联动

如果后续要做到与参考站完全一致的产品旋转或 3D 展示，需要提供：

- 每个型号的 3D 模型文件，常见格式如 `.glb` / `.gltf`
- 或每个型号一组同角度序列帧图片，建议每组 24-60 张
- 或官方产品视频/动图素材