项目简介link

Roofie 是一款面向屋顶维修/安装服务商的企业展示 HTML 模板，提供首页、关于页、服务详情页、案例展示、博客、联系表单等完整页面，内置两种首页布局方案，适合直接修改部署为服务公司官网。

技术栈link

• Bootstrap 3.3.4（CSS 框架与栅格系统）
• Font Awesome 4.x（图标库）
• IcoMoon（自定义 icon font，封装在 roofie-icons/ 中）
• jQuery（交互脚本）
• Fancybox（图片灯箱）
• Owl Carousel（轮播组件）
• Google Fonts（DM Sans、Catamaran、Kumbh Sans 三种字体）

项目结构link

roofie-html-package/
├── roofie-documentations/     # 官方帮助文档
│   ├── index.html
│   ├── css/                   # 文档样式（含 bootstrap.css）
│   └── images/
├── roofie-html-files/         # 核心模板文件
│   ├── index.html             # 首页 01
│   ├── index-2.html            # 首页 02
│   ├── about.html / team.html / faq.html
│   ├── services.html / services-2.html
│   ├── roof-repair.html / roof-renovation.html / roof-instalaltion.html
│   ├── projects.html / projects-2.html / project-detail.html
│   ├── blog*.html              # 博客列表 + 详情
│   ├── contact.html
│   └── assets/                 # 业务 CSS/JS/图片资源
└── roofie-icons/              # 自定义图标字体
    ├── style.css              # icon class 定义
    ├── selection.json         # IcoMoon 导出配置
    └── demo.html               # 图标预览与编码对照

核心文件说明link

• roofie-html-files/index.html — 首页入口，含服务介绍、案例展示、用户评价区块
• roofie-html-files/contact.html — 联系页面，含表单与地图占位
• roofie-html-files/assets/css/roofie.css — 主样式文件，整合所有业务样式
• roofie-icons/style.css — IcoMoon icon font 的 class 定义，包含屋顶、太阳能板、箭头等业务图标
• roofie-documentations/index.html — 官方文档，描述 HTML 结构、CSS 组织、第三方配置方式
• roofie-html-files/assets/vendors/ — 第三方依赖（Bootstrap、jQuery UI、Fancybox、Owl 等）

快速开始link

1. 直接在浏览器打开 roofie-html-files/index.html 即可预览。
2. 如需本地服务器环境（推荐）：
   bashcontent_copyCopy

   # 使用任意静态服务器
   npx serve roofie-html-files
   # 或 python
   python -m http.server 8080
   

3. 图标替换：编辑 roofie-icons/selection.json 导入 IcoMoon App 可重新生成图标集。

使用建议link

• 模板预设了大量占位图片和联系方式，需替换为真实数据；表单部分（contact.html）不含后端逻辑，需接入邮件服务或自建接口。
• roofie-icons 为独立 icon font，整体替换为 Font Awesome 同名 class 不会自动生效，建议保留现有图标或通过 IcoMoon 扩展。