Roofie - 屋顶服务 HTML 模板

# 项目简介 Roofie 是一款面向屋顶维修/安装服务商的企业展示 HTML 模板，提供首页、关于页、服务详情页、案例展示、博客、联系表单等完整页面，内置两种首页布局方案，适合直接修改部署为服务公司官网。 ## 技术栈 - 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 三种字体） ## 项目结构 ``` 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 # 图标预览与编码对照 ``` ## 核心文件说明 - `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 等） ## 快速开始 1. 直接在浏览器打开 `roofie-html-files/index.html` 即可预览。 2. 如需本地服务器环境（推荐）： ```bash # 使用任意静态服务器 npx serve roofie-html-files # 或 python python -m http.server 8080 ``` 3. 图标替换：编辑 `roofie-icons/selection.json` 导入 IcoMoon App 可重新生成图标集。 ## 使用建议 - 模板预设了大量占位图片和联系方式，需替换为真实数据；表单部分（contact.html）不含后端逻辑，需接入邮件服务或自建接口。 - roofie-icons 为独立 icon font，整体替换为 Font Awesome 同名 class 不会自动生效，建议保留现有图标或通过 IcoMoon 扩展。