项目简介
Pamar 是一套面向水管维修服务行业的 HTML 网站模板，提供普通水管服务、紧急抢修、住宅水管三种首页变体，支持多页面和单页面两种模式，可快速搭建 plumber、水电维修公司的企业展示站点。
技术栈
- Bootstrap 5（CSS 框架）
- jQuery（DOM 操作与交互）
- Font Awesome 6 Pro（图标库）
- Magnific Popup（图集弹窗）
- Swiper（轮播图）
- GSAP / ScrollTrigger（滚动动画）
- SplitText（文字拆解动画）
- particles.js（粒子效果）
- Satoshi + Inter（字体）
项目结构
text
pamarhtml-10/
└── download-version/
├── index.html # 首页（普通管道服务）
├── home-2.html # 首页变体（紧急维修）
├── home-3.html # 首页变体（住宅服务）
├── home-1-op.html # 单页版首页 1
├── home-2-op.html # 单页版首页 2
├── home-3-op.html # 单页版首页 3
├── about.html, contact.html, service.html, shop.html # 业务页面
├── blog.html, team.html, testimonial.html # 内容页面
├── cart.html, checkout.html, wishlist.html # 电商页面
├── mail.php # 邮件发送后端
└── assets/
├── css/
│ ├── bootstrap.min.css # Bootstrap 框架
│ ├── fontawesome.min.css # 图标库
│ ├── magnific-popup.min.css
│ ├── swiper-bundle.min.css
│ └── style.css # 主题主样式（含 CSS 变量）
├── js/
│ ├── bootstrap.min.js
│ ├── main.js # 核心交互逻辑
│ ├── particles-config.js # 粒子效果配置
│ ├── ScrollTrigger.min.js
│ └── SplitText.min.js
└── fonts/ # Satoshi 字体文件
核心文件说明
download-version/index.html— 首页入口，包含导航、幻灯片、服务展示区块assets/css/style.css— 主题核心样式，定义了颜色变量（--theme-color等）、布局与组件样式assets/js/main.js— jQuery 插件实现移动端菜单、滚动置顶、滚动返回顶部、一页式导航等功能assets/js/particles-config.js— 粒子动画配置，用于首页背景装饰mail.php— 联系表单的后端处理器，接收 POST 请求并发送邮件assets/fonts/Satoshi-*.woff— Satoshi 自定义字体，支撑标题字体系统
快速开始
- 直接在浏览器中打开
download-version/index.html即可预览。 - 如需本地服务器（推荐），可在目录下运行：
bash
# Python 3
python -m http.server 8080
# Node.js (npx)
npx serve .
访问 http://localhost:8080 即可。
使用建议
- 模板提供 6 种首页变体（三套业务场景 × 多页/单页），可根据实际服务类型选择对应页面作为入口。
style.css顶部定义了完整 CSS 变量体系，改主题色只需修改:root中的--theme-color等值，无需逐行修改。
