基于 HTML + CSS + jQuery 打造的证照冲印自助设备运营管理移动端（WAP/H5）模板。开箱即用，替换品牌素材即可上线。
自助相馆、证照冲印设备的运营后台涉及运营管理、设备管理、营业报表、证照冲印、订单、助手服务六大模块，页面多、状态杂，从零设计至少数周。这套模板一次交付 36 个页面，把运营首页的环形营业额仪表盘、报表图表、设备参数设置、扫码冲印、支付结果等完整业务链路全部做好，且图表、时间滚轮、弹窗等组件均已接通可演示。
模板共 36 个页面（含 1 个演示导航首页），按模块分组清晰，既是成品底版，也是一套完整的交互规格说明。
模板亮点
1. 36 个页面，六大业务模块全覆盖
- 运营管理（7 页）：运营首页、设备故障、耗材预警、交易异常（3 种状态）、意见反馈
- 营业报表（3 页）：报表（月 / 年视图）、查找、查找结果
- 设备管理（3 页）：设备列表、详细设置 ×2 版
- 我的证照（10 页）：列表、查询相片、冲印、冲印中、扫码冲印、确认订单、收件地址、支付成功 / 失败等
- 我的订单（2 页）：订单列表、订单详情
- 我的助手（10 页）：新手指南、常见问题、建议反馈、我要加盟（含产品 / 案例介绍）、新增收货地址等
- 通用（1 页）：无数据空状态
index.html 为演示导航首页，汇总全部 35 个功能页入口，便于逐页预览与验收。
2. 数据可视化组件已接通
- radialIndicator 环形仪表盘：运营首页”本月营业额”进度环，按屏幕宽度自适应半径，带金额格式化
- Highcharts 面积曲线图：营业报表查找结果页的走势图表，禁用版权信息可直接商用演示
3. 设备管理场景组件
设备列表（编号 / 状态 / 纸张余量 / 异常标红）、详细设置（价格、关机时间、耗材报警数、标准肤色、倒计时秒数、地理位置选择），其中关机时间使用 mobiscroll 时间滚轮选择器，移动端操作体验完整。
4. 证照冲印全流程页面
列表查看大图（reveal 弹窗）→ 冲印（现场取照 / 快递双方式、详情展开）→ 扫码冲印（二维码扫描弹窗 + 机器编号输入）→ 确认订单 → 支付成功 / 失败（含邮寄方式）→ 冲印中状态，一整条业务流页面不缺。
5. 移动端 WAP 精细适配
320px ~ 640px 经典 WAP 视口布局，底部 tab 导航（首页 / 营业报表 / 设备管理 / 意见反馈）贯穿全站，橙红主色符合便民服务类产品调性。
6. 轻量技术栈，二次开发友好
无构建依赖、无框架，jQuery + 数个轻量插件即可运行；页面按模块命名（中文名一目了然），复制改内容即可扩展新页面。
技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| HTML / CSS | — | 页面结构与样式 |
| jQuery | 1.8.3 | DOM 操作与交互 |
| Highcharts | — | 营业报表面积曲线图 |
| radialIndicator | — | 运营首页环形营业额仪表盘 |
| mobiscroll | — | 时间滚轮选择器（设备设置） |
| jQuery Reveal | — | 模态弹窗（大图 / 扫码） |
| TouchSlide | 1.1 | 触摸滑动切换（可选） |
| 自研 alert 组件 | — | 弹窗 / 加载提示 |
项目结构
zyz/
├── index.html # 演示导航首页（模板入口，汇总全部页面链接）
├── 运营管理-首页.html # 运营首页（环形营业额仪表盘 + 异常入口 + 底部导航）
├── 运营管理-设备故障.html # 设备故障列表
├── 运营管理-耗材预警.html # 耗材预警列表
├── 运营管理-交易异常.html # 交易异常列表
├── 运营管理-交易异常2.html # 交易异常（状态二）
├── 运营管理-交易异常详细.html # 交易异常详情
├── 运营管理-意见反馈.html # 意见反馈表单
├── 营业报表.html # 营业报表（月 / 年视图 tab + 按类型统计表）
├── 营业报表-查找.html # 报表查找
├── 营业报表-查找结果.html # 查找结果（Highcharts 面积曲线图）
├── 设备管理.html # 设备列表（编号 / 状态 / 纸张余量）
├── 设备管理-详细设置.html # 设备参数设置（含 mobiscroll 时间滚轮）
├── 设备管理-详细设置__.html # 设备参数设置（另一版本）
├── 我的证照-列表.html # 证照列表（大图弹窗 / 冲印入口）
├── 我的证照-查询相片.html # 相片查询
├── 我的证照-冲印.html # 冲印（现场取照 / 快递方式）
├── 我的证照-冲印中.html # 冲印中状态
├── 我的证照-扫码冲印.html # 扫码冲印（二维码弹窗 + 编号输入）
├── 我的证照-确认订单.html # 确认订单
├── 我的证照-我的收件地址.html # 收件地址列表
├── 我的证照-支付成功页.html # 支付成功
├── 我的证照-支付成功页-邮寄方式.html # 支付成功（邮寄）
├── 我的证照-支付失败页.html # 支付失败
├── 我的订单-列表.html # 订单列表
├── 我的订单-订单详情.html # 订单详情
├── 我的助手-新手指南.html # 新手指南
├── 我的助手-常见问题.html # 常见问题
├── 我的助手-建议反馈.html # 建议反馈表单
├── 我的助手-审核通过.html # 审核通过提示页
├── 我的助手-我要加盟.html # 加盟入口
├── 我的助手-我要加盟-产品介绍.html # 加盟产品介绍
├── 我的助手-我要加盟-案例介绍.html # 加盟案例介绍
├── 我的助手-加盟.html # 加盟表单
├── 我的助手-新增收货地址.html # 新增收货地址表单
├── 无数据.html # 通用空状态页
├── css/
│ ├── style.css # 主样式（主题色在此修改）
│ └── normalize.css # 样式重置
├── js/ # jQuery、reveal 弹窗、TouchSlide
├── highcharts/ # Highcharts 图表库
├── mobiscroll/ # 时间滚轮选择器
├── radialIndicator/ # 环形进度指示器
├── alert/ # 自研弹窗组件
└── img/ # 图标、示意图片素材快速开始
纯静态模板，无需安装任何依赖：
# 方式一：浏览器直接打开
双击 index.html 即可通过导航页浏览全部 36 个页面
# 方式二：本地静态服务器（推荐）
cd zyz
python3 -m http.server 8080
# 浏览器访问 http://localhost:8080
# 方式三：VS Code Live Server 插件
右键 index.html → Open with Live Server二次开发指南
| 需求 | 操作 |
|---|---|
| 更换品牌 | 替换 img/ 中的图标与示意图片，修改页面内”证照易”等品牌文案 |
| 修改文案 / 链接 | 各 HTML 内文案与 href 直接修改 |
| 更换主题色 | 修改 css/style.css 中的 #ff4400（主色）与 #ff7e00 系列橙色 |
| 调整仪表盘 | 运营首页 radialObj1 的 minValue / maxValue / 数值参数 |
| 调整报表图表 | 查找结果页 Highcharts 的 xAxis / series 数据配置 |
| 增删页面 | 复制同模块页面 HTML 改内容即可，并在 index.html 导航页补链接 |
适用场景
自助证照冲印设备运营平台、自助相馆管理系统、照片打印设备后台的移动端 H5，也可作为共享设备运营管理（售卖机 / 打印机 / 自助终端）、O2O 便民服务、设备加盟体系的 WAP 管理端底版。
从零自研 vs 使用本模板
| 维度 | 从零自研 | 使用本模板 |
|---|---|---|
| 交付周期 | 4~6 周起 | 半天上线 |
| 页面还原度 | 需反复打磨 | 36 页六大模块直接交付 |
| 交互与动画 | 自行实现 | 仪表盘 / 图表 / 滚轮 / 弹窗已接通 |
| 适配 | 需额外调试 | 320~640px WAP 适配已完成 |
| 维护成本 | 自行承担 | 纯静态按模块命名，改即所用 |
在线预览
将整个目录部署至 GitHub Pages / Vercel / Netlify 或任意静态托管、服务器站点根目录即可，无需构建流程。
评论0