三个版本各自是一份独立的单文件 HTML,共用同一套素材 assets/(32 个文件)与同一段首屏视频 hero.mp4。下面把三页整页展开、并排成一行,同一屏从上到下逐段对照;点任意一列打开该版本。
深色段与白段交替,技术与产品都是「图左 / 参数右」分屏卡,偏工业设备气质。
圆点标题语言贯穿全站;首屏视频先钉住,圆弧升起后再随页面上滑。
--reveal:330px混合版:导航 / 首屏 / 数据 / 关键技术 / 产品五块用清蓝版式,模块架构之后保留原版的整图切片与交互。
① 三页共用 assets/,改图直接替换同名文件,三个版本同步生效;要单独给某一版换图,把图片改成新名字再引用。
② 每个页面样式都内联在文件内 <style>,不依赖构建工具,保存后刷新即生效。
③ 版本 02 / 03 的色彩集中在 :root 变量:--blue #0D2D8A、--deep #07377C、--accent #2F6FE4、--tint #F4F8FD,改一处全局换色。
④ 产品图为透明底 webp,产品卡使用 object-fit:contain,改成 cover 会裁掉机器本体。
④·补 首屏视频放在 assets/hero.mp4,三页共用;现为 32 秒无字幕版本(三段素材拼接),改完视频记得同步换 hero_poster.jpg。
⑤ 模块顺序三版一致:导航 → 首屏 → 数据 → 关键技术 → 产品 → 模块组装 → 应用场景 → 转化 → 页脚。
⑥ 本页三张整页长图存于 previews/full-*.jpg,改了页面后重新生成即可(同一宽度截取,保证三列可比)。