基于 jQuery + SuperSlide 打造的美妆品牌电商 PC 官网模板。开箱即用，替换品牌素材即可上线。
美妆与女性消费品牌做电商官网，难点不在「有页面」，而在「像一个大牌商城」：多级分类导航、搜索筛选、购物车、放大镜详情、评价与推荐……这些京东式的重交互组件，每一个都要专门的开发周期。品牌方预算有限时，往往只能砍功能、降质感。
这套「伊莎莱曼」模板把一个成熟美妆商城的三张核心页面做到成品级：首页、搜索结果页、商品详情页。红黑电商配色、五角星评分、满减促销角标、放大镜看图——女性用户熟悉的商城质感全部就位。替换品牌 Logo 与商品图，即可获得一个专业品牌商城前端。
模板亮点
1. 三张核心页面，构成完整购物动线
首页（逛）→ 搜索结果页（选）→ 商品详情页（买），PC 电商最关键的转化路径一步到位，三页间导航、分类、购物车组件风格完全统一。
2. 首页电商组件密度极高
- 顶部会员区：登录 / 免费注册 / 个人中心下拉（订单管理 / 分佣管理 / 收藏管理）/ 微商城 / 客服热线
- 搜索区：关键词搜索 + 热门搜索词 + 二维码 + 购物车悬浮下拉（最新加入商品、合计金额、空车状态）
- 多级分类导航：「全部商品分类」悬停展开衣服 / 鞋子 / 男友 / 包包 / 家配 / 美妆七大类，含三级推荐菜单
- 营销楼层：明星产品卡（现价 / 五角星评分 / 已购人数 / 人气爆款角标）、爆款列表（现价原价 / 销量 / 立即抢购 / 促销角标）
- 品牌墙：国际大牌 / 知名大牌 / 大众名品 Tab 切换，三组各 18 个品牌位
- 右侧悬浮工具栏：我的账户 / 购物车 / 我的资产 / 我的关注 / 我的收藏 / 我看过的 / 二维码 / 客服中心 / 返回顶部
3. 搜索页：真商城级筛选体验
功效标签筛选（控油 / 抗衰老 / 遮瑕 / 抗皱 / 护理 / 装扮）、价格区间多选勾选 + 自定义区间 + 多选确定 / 取消、已选条件回显、综合 / 自营 / 销量 / 价格排序、分页翻页——整套筛选交互无需重写。
4. 详情页：大牌质感的关键组件全齐
- MagicZoom 放大镜：主图悬停放大 + 缩略图 Tab 切换，看细节体验与一线商城一致
- 购买信息区：原价现价、累计评价、满赠满减标签、赠品展示、SKU 个性选择、数量加减、立即购买 / 加入购物车
- 搭配购买 / 最佳组合 Tab：套餐组合价、节省金额、组合加购
- 商品介绍 / 评价 Tab：参数表格 + 图文详情
- 最近浏览：横向滚动商品推荐（SuperSlide 驱动）
5. 交互细节为商城而生
搜索框聚焦 / 失焦占位文案切换、购物车悬停展开与清空状态、品牌墙 Tab 淡入切换、登录态显示切换——style.js 与 global.js 已写好常见交互，直接复用。
技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| jQuery | 1.9.1 | DOM 操作 / 交互 |
| SuperSlide | 2.1.1 | 轮播 / Tab 切换 / 图片滚动 |
| MagicZoomPlus | — | 商品主图放大镜 |
| global.js | — | Tab 选项卡切换 |
| style.js | — | 搜索 / 购物车下拉等交互 |
| normalize 类样式 | — | 样式归一（css/style.css） |
项目结构
yslm/
├── index.html # 商城首页（分类导航/营销楼层/品牌墙/悬浮工具栏）
├── 搜索结果页.html # 搜索列表页（功效价格筛选/排序/分页/商品卡）
├── 详情页面.html # 商品详情页（放大镜/SKU/搭配套餐/评价Tab/推荐）
├── css/
│ ├── style.css # 全站主样式（主题色在此修改）
│ └── all.css # 首页补充样式
├── js/
│ ├── jquery.js # jQuery 1.9.1
│ ├── jquery.SuperSlide.2.1.1.js # 轮播/Tab/滚动组件
│ ├── style.js # 页面交互脚本
│ └── global.js # Tab 选项卡函数
├── magiczoomplus/ # 主图放大镜组件（js + css）
├── img/ # 首页与公共素材
└── img2/ # 搜索页与详情页素材快速开始
纯静态模板，无需构建：
# 方式一：浏览器直接打开
双击 index.html 即可预览（放大镜等交互建议走本地服务器）
# 方式二：本地静态服务器（推荐）
cd yslm
python3 -m http.server 8000
# 浏览器访问 http://localhost:8000/index.html也可使用 VS Code 的 Live Server 插件一键预览。模板为 PC 端固定宽度布局，请在 1280px 及以上视口查看。
二次开发指南
| 需求 | 操作 |
|---|---|
| 更换品牌 | 同名替换 img/logo.png 及各页商品图、品牌墙图 |
| 修改文案 / 链接 | 各 HTML 内中文文案与 href 直接修改 |
| 修改主题色 | 修改 css/style.css 中的 #e4393c（商城红）、#0d1748（深蓝） |
| 调整分类导航 | 修改首页「全部商品分类」下的分类行与三级菜单节点 |
| 增删楼层 / 筛选项 | 首页楼层、搜索页筛选均为独立节点，复制或删除即可 |
适用场景
美妆 / 护肤品牌商城官网、女性消费品品牌旗舰店、化妆品垂直电商平台、品牌特卖 / 闪购站点，也可作为通用品牌电商 PC 端模板进行二次改版。
从零自研 vs 使用本模板
| 维度 | 从零自研 | 使用本模板 |
|---|---|---|
| 交付周期 | 3~4 周起 | 1~2 天替换素材上线 |
| 页面还原度 | 逐组件设计 | 商城级页面成品直接用 |
| 交互与动画 | 逐个开发 | 放大镜/筛选/Tab/轮播内置 |
| PC 端适配 | 自行规划栅格 | 1200px 商城栅格已成型 |
| 维护成本 | 自行承担 | 纯静态结构，改图即迭代 |
在线预览
模板为纯静态页面，将整个目录上传至任意静态托管（Nginx / 宝塔 / 阿里云 OSS / GitHub Pages）即可在线访问，入口为 index.html。
评论0