基于 HTML + CSS + jQuery + TouchSlide 打造的金融理财类移动端（WAP/H5）Web APP 模板。开箱即用，替换品牌素材即可上线。
一套金融理财产品的移动端 H5，远不止一个首页：登录注册、账户体系、资金流水、订单状态、消息中心、新闻资讯……这些页面按图逐个开发，一个月都未必能收尾。这套模板一次性提供 28 个页面，从登录注册到个人中心、从数据中心到订单详情、从站内信到系统设置，构成一个完整的移动金融产品骨架，跳转关系全部打通。替换品牌名称与配色后，即可作为混合 APP 的 H5 外壳或微信端 WAP 站点直接使用。
模板面向移动端设计（viewport 锁定缩放），浅蓝金融配色，底部导航 + 顶部标题栏的原生 APP 式交互体验。
模板亮点
1. 28 页完整产品骨架，页面关系全部打通
覆盖金融 WAP 端全流程：登录 / 注册 / 注册会员表单 → 首页 → 个人中心（个人信息 / 账户管理 / 我的团队 / 激活码转账）→ 数据中心（舍 / 得双列表 + 详情）→ 我的订单（全部 / 等待中 / 已完成 + 详情）→ 信息管理（撰写 / 发件箱 / 收件箱）→ 新闻资讯（列表 + 详情）→ 设置 / 关于我们。页面间 href 跳转已按真实产品逻辑互联，演示即成品。
2. 首页 APP 化信息架构
顶部品牌栏 + TouchSlide 自动轮播 Banner + 功能区九宫格 + 基金管理区（总金额 / 经理奖 / 激活码 / 管理奖 / 级别徽章）+ 四 Tab 底部导航（首页 / 数据中心 / 新闻资讯 / 我的订单），标准的移动金融 APP 布局范式，用户零学习成本。
3. 资金操作弹窗交互
首页内置”舍 / 得”两类资金操作模态弹窗（jquery.reveal 实现）：金额输入（带上下限校验文案）→ 支付宝 / 微信 / 银行快捷三种支付方式单选切换（选中态即时高亮）→ 风险确认声明 → 提交 / 取消双按钮。资金类产品最核心的操作流已完整演示。
4. 订单与消息双中心
- 订单中心：等待中 / 已完成多状态列表，含汇款时间、配对时间、订单编号、付款方式等字段，详情页结构齐备，一键留言入口
- 消息中心：站内信撰写表单（收件人 / 主题 / 内容）+ 发件箱 + 收件箱（全部已读操作），仿邮箱的信息管理体系
5. 移动端触控优化
TouchSlide 触屏滑动轮播（3 秒自动播放 + 自动分页）；user-scalable=0 禁缩放防误触；登录页脚本自动补齐视口高度，输入框聚焦体验贴近原生。
6. 轻蓝金融视觉与原生化 UI
浅蓝主背景（#ebf8ff）搭配白底圆角卡片列表，星星状态图标、徽章式会员级别、图标化底部导航，整体观感接近原生 iOS / Android 应用，适合直接套壳（WebView）或微信内嵌使用。
技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| HTML5 | – | 页面结构 |
| CSS | – | 全站样式（单文件 style.css） |
| normalize.css | – | 样式归一化 |
| jQuery | 1.7.1 | DOM / 事件 / 弹窗交互 |
| TouchSlide | 1.1 | 触屏轮播（移动端焦点图） |
| Masonry | 3.3.1 | 瀑布流布局 |
| jquery.reveal.js | – | 模态弹窗 |
项目结构
bsd/
├── index.html # 首页（轮播 / 功能区 / 基金管理区 / 舍得弹窗 / 底部导航）
├── 登录.html # 登录页（邮箱 / 手机号 + 密码）
├── 注册.html # 注册页
├── 个人中心注册会员.html # 注册会员中心（申请人信息表单）
├── 我.html # 个人中心（级别 / 提供帮助 / 帮助交易记录）
├── 我个人信息.html # 个人信息（头像 / 手机 / 邮箱 / 支付宝 / 银行 / 密码修改）
├── 我账户管理.html # 账户管理（激活码转账 / 我的团队入口）
├── 我帐号管理激活码.html # 激活码转账（转账对象 + 数量）
├── 我帐号管理舍.html # 我的团队：团队（舍）列表
├── 我帐号管理得.html # 我的团队：团队（得）列表
├── 我我的团队.html # 团队总览（团队舍与得）
├── 我信息管理.html # 信息管理：撰写站内信
├── 我信息管理发.html # 信息管理：发件箱
├── 我信息管理收.html # 信息管理：收件箱（全部已读）
├── 数据中心.html # 数据中心：舍（提供帮助）订单列表
├── 数据中心得.html # 数据中心：得（获得收益）订单列表
├── 数据中心内容页.html # 舍订单详情（交易时间 / 付款方式）
├── 数据中心得内容页.html # 得订单详情
├── 我的订单.html # 订单列表（汇款 / 配对时间 / 编号 / 一键留言）
├── 我的订单等待中.html # 等待中订单列表
├── 我的订单等待中详情.html # 等待中订单详情
├── 我的订单等待中详情得.html # 等待中订单详情（得）
├── 我的订单已完成.html # 已完成订单列表
├── 我的订单已完成详情.html # 已完成订单详情
├── 新闻资讯.html # 新闻列表（阅读 / 评论数）
├── 新闻资讯_内容页.html # 新闻详情页
├── 设置.html # 设置（中英文切换 / 意见反馈 / 检查更新）
├── 关于我们.html # 关于介绍
├── css/ # normalize.css + style.css（浅蓝主题）
├── js/ # jQuery / TouchSlide / Masonry / reveal
└── img/ # 图标与页面素材快速开始
纯静态模板，无需安装依赖：
# 方式一：浏览器直接打开
双击 index.html 进入首页（建议开发者工具切换移动设备模式浏览）
# 方式二：本地静态服务器（推荐，可手机同局域网访问）
python3 -m http.server 8000
# 手机访问 http://<电脑IP>:8000 体验移动端效果
# 方式三：VS Code Live Server 插件打开二次开发指南
| 需求 | 操作 |
|---|---|
| 更换品牌 | 替换 img/ 下 logo、图标、banner 图，同名覆盖 |
| 修改文案 / 链接 | 各 HTML 内中文文案与页面间 href 跳转直接修改 |
| 更换主题色 | 修改 css/style.css 中 ui_background_blue 的 #ebf8ff 及配套蓝色值 |
| 调整导航结构 | 底部四 Tab 在各页 ui_nav 区块统一修改链接与图标 |
| 增删页面 | 复制任一结构相近页面改名，补充进对应导航 / 列表入口 |
适用场景
金融理财类 WAP 端 / 微信端 Web APP、投资平台移动端 H5、会员制平台个人中心、电商订单中心、含资金展示的会员管理系统，也可作为任何需要”登录 + 个人中心 + 列表 + 详情”结构的移动端多页模板底稿。
从零自研 vs 使用本模板
| 维度 | 从零自研 | 使用本模板 |
|---|---|---|
| 交付周期 | 20 | 替换素材数天上线 |
| 页面还原度 | 逐页依赖设计稿 | 28 页 APP 式布局已成体系 |
| 交互与动画 | 轮播 / 弹窗需自研 | 触屏轮播 / 模态弹窗已内置 |
| 页面完整性 | 易漏页漏跳转 | 登录到设置全链路跳转已打通 |
| 维护成本 | 自行承担 | 页面按功能命名，按图索骥即可迭代 |
在线预览
将项目目录部署至任意静态托管，手机浏览器或微信访问 index.html 即可预览（建议移动端模式查看）。
评论0