
Pyrion - Factory and Industrial HTML Template
# 项目简介
Pyrion 是一款面向工厂与工业领域的 Bootstrap 5 HTML 模板,包含首页、关于我们、服务、案例、团队博客、联系页面等完整页面模板,适合快速搭建工业制造类企业官网。模板采用响应式布局,集成 Swiper 轮播、Wow 动画、CounterUp 数字滚动等交互效果。
## 技术栈
- Bootstrap 5(响应式布局框架)
- jQuery 3.7.1(DOM 操作与交互)
- Swiper Slider(轮播组件)
- Font Awesome 6(图标库)
- Google Fonts(Lexend、Space Grotesk 字体)
- SCSS(源码样式管理)
## 项目结构
```
pyrion-package-file/
documentation/ # 官方文档入口
index.html
assets/css/ # 文档样式
assets/js/ # 文档脚本
assets/images/ # 文档配图
pyrion/ # 模板主目录
index.html # 首页
about.html # 关于我们
services.html # 服务列表
service-details.html # 服务详情
projects.html # 案例列表
project-details.html # 案例详情
team.html # 团队页
team-single.html # 成员详情
blog.html # 博客列表
blog-details.html # 博客详情
contact.html # 联系我们
index-two.html # 首页变体
assets/
css/main.css # 主样式
js/main.js # 主交互脚本
scss/main.scss # SCSS 源码
ajax-form.js # 表单异步提交
mail.php # 后端邮件接口
```
## 核心文件说明
- `pyrion/index.html` — 模板首页入口,包含 Header、Hero、Services、Projects 等完整区块
- `pyrion/assets/css/main.css` — 聚合后的主样式表,覆盖 43 个功能区块
- `pyrion/assets/js/main.js` — 核心交互逻辑,含移动端菜单、Sticky 头部、Swiper 初始化等
- `pyrion/assets/scss/main.scss` — SCSS 源码,适合深度定制主题色与布局
- `pyrion/assets/mail.php` — 简易 PHP 邮件接口,连接联系表单后端
- `documentation/index.html` — 官方文档导航页,含 HTML/CSS/JS 结构说明与二次开发指引
## 快速开始
1. 直接在浏览器打开 `pyrion/index.html` 即可预览完整效果
2. 编辑 `pyrion/assets/css/main.css` 中的 CSS 变量(`:root` 区块)可快速更换主题色
3. 如需发送邮件功能,将 `pyrion/assets/mail.php` 部署至支持 PHP 的服务器
## 使用建议
模板内置深色 Header(#241442)与橙色强调色(#F74F22)搭配,适合工业/制造业品牌调性;若用于其他行业,建议通过 SCSS 变量批量调整 `--theme`、`--header` 等配色方案。发布前请记得替换 Logo、图片及 `mail.php` 中的收件人地址。
help_outline
FAQ
Comments0
PublishedJan 20, 2026
Tech Stack
HTML