Watermark EPS — 工业水务工程网站模板
一套面向水务处理、污水、雨水工程企业的 B2B 工业级网站模板，采用工程蓝图美学风格设计。免费用于个人和商业项目。
快速开始
bash
git clone https://github.com/tookit/watermark-redesign.git
cd watermark-redesign
# 直接用浏览器打开 index.html，或用本地服务器：
npx serve .
无需构建、无需 npm install，打开即用。
页面
| 页面 | 说明 |
|---|---|
| 首页 | SVG 泵站剖面蓝图插画 + 流动动效、市场带、价值主张、信赖客户、产品线 Line Card、精选案例、覆盖区域地图、CTA |
| 产品线 | 29 个厂商徽标网格 + Line Card 下载 |
| 厂商详情 | 按市场分类的厂商介绍 |
| 项目类型 | 6 大项目类别（泵站、水务基建、化粪池、CSO/湿地、管道、灌溉） |
| 案例 | 真实市政项目案例（地点/工程类型/成果） |
| 销售区域 | 服务范围地图 + 总部/仓库位置 |
| 联系我们 | 分栏布局：联系表单 + 办公室信息 + 地图占位 |
技术栈
- HTML5 — 语义化标签
- CSS3 — 自定义属性、Grid、Flexbox、响应式
- Vanilla JavaScript — 移动菜单、滚动渐显动画、IntersectionObserver
- Google Fonts — Big Shoulders Display, IBM Plex Sans, IBM Plex Mono
特性
- 全响应式 — 桌面 Grid 布局（≥1080px），移动端单列堆叠
- 粘性导航 + 毛玻璃效果
- 移动端汉堡菜单
- 滚动触发渐显动画
- SVG 泵站插画 + CSS 流动线动效
- 29 个厂商徽标网格（首字母徽章统一设计）
- 真实市政项目案例卡片
- 服务区域指示器
- 联系表单验证
- prefers-reduced-motion 支持
- 键盘焦点环可访问性
- WCAG AA 色彩对比度合规
设计规范
完整设计规范见 design.md — 包含色彩体系、字体层级、工程蓝图视觉语法、组件行为及反模式约束。
开源协议
MIT — 免费用于个人和商业项目。
