三网融谊会员中心模板 | 分销积分实名认证 11 页套装，含四步找回密码流程

基于 jQuery + SuperSlide 打造的会员中心模板，覆盖注册、找回密码、实名认证、会员分销、积分流水等完整会员资产链路。开箱即用，替换品牌素材即可上线。

一个带分销与积分体系的会员中心，页面多、状态杂：注册要带推荐人，找回密码要走四步流程，钱包要分充值提现，实名认证要有完成态。这些页面单独看不难，凑齐一套完整、状态齐全的原型，从零画起至少两周。这套模板来自”三网融谊”物联网平台的会员中心，11 个页面把会员资产体系的前端原型一次配齐，产品评审、后端对接、二次开发都能直接在其上展开。

模板亮点

1. 11 个页面，会员资产链路一次配齐

• 账号准入：zc.html 注册（含推荐账号位）、password.html ~ password4.html 找回密码四步流程
• 资料完善：index.html 个人中心基本信息、index_wc.html 保存完成态
• 资产体系：hyfx.html 会员分销、jfls.html 积分流水
• 信任体系：smrz.html 实名认证、smrz_wc.html 认证完成态

2. 完整的分销与积分数据版面

• 会员分销页：二级 / 三级会员、本月新增会员三格统计，下方按级别展示会员 ID、会员名称、充值金额、积分、联系方式、充值时间的分销明细表
• 积分流水页：可用提现积分、消费积分余额展示，含提现日期说明，收支明细按来源 / 积分 / 日期 / 备注逐条列示

3. 找回密码四步流程原型

验证账号 → 已验证手机发送校验码（含重发倒计时文案）→ 设置新密码（6-20 字符规则提示）→ 重置成功，四页串联成完整状态机，异常分支均有文案示例，是难得的流程级原型。

4. 个人中心全状态覆盖

左侧菜单聚合订单管理、关注中心、我的资产、客户服务、积分管理、消息中心、会员分销、个人资料、实名认证九大分组（手风琴展开），右侧内容区含基本信息表单、粉丝/关注/赞/评论等社交状态的入口结构，本人态与完成态均有对应页面。

5. 交互细节到位

顶部导航悬停下拉（slideDown/slideUp 平滑展开）、左侧菜单手风琴、城市切换、消息红点、生日与居住地址四级联动下拉占位，均为 jQuery 实现，直接可用。

技术栈

技术	版本	用途
jQuery	1.7.2	下拉菜单、手风琴等交互
SuperSlide	2.1.1	页面切换特效库（随包附带）
原生 CSS	—	1200px PC 端版面样式

项目结构

swry/
├── index.html       # 个人中心（基本信息表单：昵称/性别/手机/生日/地址）
├── index_wc.html    # 个人中心-保存完成态（含我的积分/余额/提现入口）
├── zc.html          # 注册页（用户名/密码/手机号/验证码/推荐账号/协议）
├── password.html    # 找回密码-第1步（账号 + 图形验证码，可"换一张"）
├── password2.html   # 找回密码-第2步（已验证手机 + 短信校验码倒计时）
├── password3.html   # 找回密码-第3步（设置新密码 + 确认密码）
├── password4.html   # 找回密码-第4步（重置成功提示页）
├── hyfx.html        # 会员分销（二级/三级会员统计 + 分销明细表）
├── jfls.html        # 积分流水（可用提现积分/消费积分 + 收支明细表）
├── smrz.html        # 实名认证（姓名/手机号码/身份证号码）
├── smrz_wc.html     # 实名认证完成态（认证成功信息回显）
├── css/style.css    # 全部页面样式
├── js/              # jquery.js、SuperSlide 2.1.1
└── img/             # Logo、头像、认证图标等素材

快速开始

纯静态模板，无需安装任何依赖：

# 方式一：浏览器直接打开
双击 index.html 即可预览个人中心

# 方式二：本地静态服务器（推荐）
cd swry
python3 -m http.server 8000
# 浏览器访问 http://localhost:8000/index.html

也可使用 VS Code 的 Live Server 插件一键预览。本模板为 1200px 定宽 PC 端版式，建议在桌面浏览器中查看。

二次开发指南

需求	操作
更换品牌	替换 img/ 下 logo.png（头部）、ft_logo.png（底部）同名覆盖
修改文案 / 链接	各 HTML 内公司名、备案号、菜单 href 直接修改
更换主题色	修改 css/style.css 中的主色 #823f0a（棕金主题色）
调整页面组合	左侧菜单为通用组件，复制右侧内容区即可扩展新页面
接入后端	将表单与明细表对接注册 / 认证 / 分销 / 积分接口即可上线

适用场景

会员制电商平台、分销商城、物联网平台、O2O 会员体系、积分商城的会员中心原型，也可作为”注册-认证-资产”标准会员链路的需求演示稿。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	2 周起	1~2 天接入后端即可上线
页面还原度	分销/积分版面需自行设计	真实平台规格，数据版面齐备
流程完整性	四步找回密码等流程需逐个梳理	全状态页面串联成现成流程原型
交互细节	菜单手风琴/下拉需另行开发	jQuery 交互已全部实现
维护成本	11 页 × 多状态自行维护	统一头尾与菜单结构，改动集中

在线预览

将整个 swry 目录部署至任意静态托管（GitHub Pages / 阿里云 OSS / Nginx）即可在线预览，无需构建步骤。

http://case.fedshare.cn/swry/