Pamar - Plumbing and Repair Services HTML Template

# 项目简介 Pamar 是一套面向水管维修服务行业的 HTML 网站模板，提供普通水管服务、紧急抢修、住宅水管三种首页变体，支持多页面和单页面两种模式，可快速搭建 plumber、水电维修公司的企业展示站点。 ## 技术栈 - Bootstrap 5（CSS 框架） - jQuery（DOM 操作与交互） - Font Awesome 6 Pro（图标库） - Magnific Popup（图集弹窗） - Swiper（轮播图） - GSAP / ScrollTrigger（滚动动画） - SplitText（文字拆解动画） - particles.js（粒子效果） - Satoshi + Inter（字体） ## 项目结构 ``` 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 自定义字体，支撑标题字体系统 ## 快速开始 1. 直接在浏览器中打开 `download-version/index.html` 即可预览。 2. 如需本地服务器（推荐），可在目录下运行： ```bash # Python 3 python -m http.server 8080 # Node.js (npx) npx serve . ``` 访问 `http://localhost:8080` 即可。 ## 使用建议 - 模板提供 6 种首页变体（三套业务场景 × 多页/单页），可根据实际服务类型选择对应页面作为入口。 - `style.css` 顶部定义了完整 CSS 变量体系，改主题色只需修改 `:root` 中的 `--theme-color` 等值，无需逐行修改。