基于 jQuery + TouchSlide + Masonry 打造的商场 / 购物中心 O2O WAP 端模板，19 个页面覆盖完整业务闭环。开箱即用，替换品牌素材即可上线。
商场做 O2O，最难的不是缺少想法，而是缺少一套完整的移动端页面底子：登录注册、逛商场、领优惠券、看商品、管收藏，这条用户动线零零散散做下来，至少一个月工期。
这套模板以「春熙汇」为原型，把购物中心 WAP 端的 19 个页面全部做完，从两步注册到每日优惠券、从商场楼层业态到商品详情一应俱全，且页面间跳转链路已经打通。接入你的品牌与数据，即可快速拥有一个可运营的商场移动端。
模板亮点
1. 19 个页面，覆盖 O2O 全动线
账户体系（登录、两步注册、忘记密码验证、修改密码）、逛逛体系（首页、发现、商场主页、店铺主页、优惠）、交易体系（商品详情 ×2、每日优惠券）、个人中心（我的、消息、优惠券未使用 / 历史、收藏商品 / 店铺），四大模块一次配齐。
2. 商场场景组件齐全
- 楼层业态 Tab：商场主页按服装 / 美食 / 休闲 / 住宿切换店铺列表
- 每日优惠券：满减券、折扣券、电影券三种券型卡片，「立即领取」转化按钮
- 优惠券瀑布流：优惠频道基于 Masonry 瀑布流布局，参差排序更接近真实运营形态
- WIFI 连接弹窗：商场到店场景专属的「WIFI 自动连接」进度弹窗
- 营业信息栏：商场主页展示营业时间与咨询电话
3. 触屏轮播与交互细节
首页焦点图基于 TouchSlide 实现自动播放 + 自动分页，支持触屏滑动切换；顶栏固定 + 底部四 Tab 固定导航（春熙汇 / 发现 / 优惠 / 我的），选中态高亮，符合主流商城 APP 操作习惯。
4. 经典黑白红视觉
黑色顶栏（#000）搭配洋红高亮（#ff2b6a），灰白内容区分层清晰，是购物中心类产品久经验证的配色方案，信息密度高而不乱。
5. WAP 端适配
viewport 锁定缩放，320~640px 流式布局，字号使用 rem 级流式方案，主流手机与微信内置浏览器均可直接投放。
6. 页面可拆可组
每个页面独立成文件，既能整套用作商场 WAP 站，也可单独抽取「优惠券」「商品详情」等模块拼装进已有项目。
技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| jQuery | 1.7.2 | DOM 操作与交互（文件名 jquery-1.11.0.min.js） |
| Zepto | 1.0 | 移动端轻量 DOM 库（js 目录随包附赠） |
| TouchSlide | 1.1 | 触屏焦点图轮播、自动分页 |
| Masonry | 3.3.1 | 优惠券频道瀑布流布局 |
| jQuery Reveal | — | WIFI 连接等模态弹窗 |
| normalize.css | — | 样式重置 |
项目结构
cxh/
├── index.html # 首页：焦点图轮播 + 热门活动 + 今日推荐
├── 登录.html # 登录（手机号 + 密码 + 社交账号登录）
├── 注册第一步.html # 注册第一步：手机号 + 短信验证码
├── 注册第二步.html # 注册第二步：完善资料
├── 忘记密码验证.html # 忘记密码：身份验证
├── 修改密码.html # 修改密码
├── 发现.html # 发现：商场搜索 + 商场卡片列表
├── 商场主页.html # 商场主页：营业信息 + 楼层业态 Tab + 店铺活动
├── 店铺主页.html # 店铺主页：店铺标识 + 关注数 + 店铺内容
├── 优惠.html # 优惠频道：Tab 切换 + 优惠券瀑布流
├── 每日优惠劵.html # 每日优惠券：满减 / 折扣 / 电影券领取
├── 商品详情1.html # 商品详情（版式一）：焦点图 + 价格 + 店铺入口
├── 商品详情2.html # 商品详情（版式二）：加入收藏操作栏
├── 我的.html # 个人中心：收藏 / 优惠券 / 春熙币 / 消息 / 服务
├── 我的消息.html # 消息中心：系统消息 + 活动通知
├── 我的优惠劵未使用.html # 我的优惠券（未使用）
├── 我的优惠劵历史.html # 我的优惠券（历史）
├── 我的收藏商品.html # 收藏的商品列表
├── 我的收藏店铺.html # 收藏的店铺列表
├── css/
│ ├── style.css # 全站样式（黑顶栏 + 洋红高亮）
│ └── normalize.css # 样式重置
├── js/ # jQuery / Zepto / TouchSlide / Masonry / Reveal
└── img/ # 全部页面图标与图片素材快速开始
纯静态模板，无需构建：
# 方式一：浏览器直接打开 index.html 即可预览
# 其余页面通过底部导航或页面间链接跳转访问
# 方式二：本地静态服务器（推荐，链接跳转更接近真实环境）
python3 -m http.server 8080
# 访问 http://localhost:8080也可使用 VS Code Live Server 插件一键启动预览。
二次开发指南
| 需求 | 操作 |
|---|---|
| 更换品牌 | 修改各页面顶栏「春熙汇」文案，替换 img/ 下 logo 与图标 |
| 修改文案 / 链接 | 各页面 HTML 内文案与 href 直接修改 |
| 更换主题色 | 修改 css/style.css 中 .ui_topbar 的 #000 与 .li_hov p 的 #ff2b6a |
| 调整轮播 | 修改各页 TouchSlide({...}) 参数（自动播放间隔 / 切换效果） |
| 增删页面 | 复制任一页面为模板，改内容后在底部导航加入链接即可 |
| 对接真实数据 | 将页面内的静态商品 / 优惠券列表替换为后端接口渲染 |
适用场景
购物中心 / 商场 WAP 端、商业综合体 O2O 平台、百货商城移动站、商圈导购类产品、优惠券聚合平台，也可拆分模块用于连锁门店、生活服务类移动端项目。
从零自研 vs 使用本模板
| 维度 | 从零自研 | 使用本模板 |
|---|---|---|
| 交付周期 | 4~6 周 | 2~3 天完成品牌化改造 |
| 页面还原度 | 需逐页与设计稿对齐 | 19 页成品直接可用 |
| 交互与动画 | 轮播 / Tab 需单独开发 | 触屏轮播 / 瀑布流已内置 |
| 移动端适配 | 需逐机型调试 | 320~640px WAP 适配已完成 |
| 维护成本 | 页面零散、规范难统一 | 统一样式表，改一处全局生效 |
在线预览
部署至任意静态托管（GitHub Pages / Vercel / 阿里云 OSS / 腾讯云 COS）即可获得在线访问地址，手机浏览器打开即为真实 WAP 体
评论0