项目简介
GearO 是一款面向办公设备领域的静态电商 HTML 模板，基于 Bootstrap 构建，提供完整的商城页面组合。涵盖商品展示、购物车、结账、用户账户、博客等 40+ 页面，适合快速搭建办公用品或电子产品零售站点。
技术栈
- Bootstrap 5.x（CSS 框架）
- Swiper（轮播滑动）
- jQuery（交互逻辑）
- Animate.css（动画效果）
- Fancybox（图片灯箱）
- PhotoSwipe（相册）
- SCSS（样式预处理）
- PHP（联系表单后端）
项目结构
text
gearohtml-10/gearo-package/gearo/
├── index.html # 首页
├── shop-*.html # 商品列表页（多种布局）
├── product-*.html # 商品详情页（多种样式）
├── shopping-cart.html # 购物车
├── checkout.html # 结账
├── my-account-*.html # 用户中心
├── blog-*.html # 博客列表/详情
├── contact.html # 联系页
├── store-list.html # 门店列表
├── faqs.html # 常见问题
├── css/ # 样式文件（含 bootstrap.min.css）
├── js/
│ └── main.js # 核心交互逻辑
├── scss/
│ └── app.scss # SCSS 入口
└── contact/
└── contact-process.php # 联系表单处理脚本
核心文件说明
index.html— 首页，含顶部公告栏、导航、轮播 bannerjs/main.js— jQuery 插件封装，包含数量增减、变体选择、滚动置顶等 30+ 功能scss/app.scss— SCSS 总入口，按模块引入变量、组件和响应式样式css/bootstrap.min.css— Bootstrap 核心样式contact/contact-process.php— 联系表单邮件发送脚本（依赖服务器 mail 函数）shop-*.html/product-*.html— 商品列表与详情页模板合集，展示不同筛选方式与商品样式
快速开始
模板为纯静态页面，可直接在浏览器打开 index.html 预览。
如需本地服务：
bash
# Python 3
python -m http.server 8080
# Node.js (npx)
npx serve .
然后访问 http://localhost:8080/gearo/ 即可。
联系表单功能需部署至支持 PHP 的 Web 服务器并配置邮件服务。
使用建议
- 定制界面主要修改 SCSS 文件中的
abstracts变量和css/styles.css；页面内容直接在对应 HTML 中编辑。 - 所有 JavaScript 交互均依赖 jQuery，确保
js/main.js在 jQuery 之后加载。
