基于 jQuery + 原生 CSS 打造的房产平台账号模块模板（登录 / 注册 / 找回密码）。开箱即用，替换品牌素材即可上线。
登录、注册、找回密码是平台类产品最不起眼、却最考验细节的一组页面。表单状态多（明文切换、验证码、错误提示）、适配要求高（PC 与手机双端都要可用），自研往往要反复打磨数天。这套模板来自 susuti（速速提）房产平台的真实账号模块，三个页面覆盖完整的账号准入流程，交互与双端适配均已到位，接入后端接口即可直接投入使用。
模板亮点
1. 3 个页面，覆盖完整账号流程
login.html登录页：手机号 + 密码 + 短信验证码三要素登录register.html注册页：手机号、短信验证码、昵称、密码、确认密码、《用户使用协议》勾选一应俱全wjmm.html找回密码页：手机号验证 + 新密码设置，与登录页相互跳转闭环
2. 深度表单交互细节
- 密码明文切换：点击输入框右侧眼睛图标，在
password/text类型间切换，PC 与移动端两套逻辑均已实现 - 短信验证码按钮：登录、注册、找回密码三个场景均内置”获取验证码”按钮样式
- 错误提示位：登录页内置”密码错误 3 次，请用短信验证码登录”的错误提示样式，异常状态有处可放
- 微信扫码登录区：右侧二维码 + 微信登录引导，第三方登录入口即取即用
3. PC + 移动端双版式，一套代码自适应
每个页面同时内置 .ui-pc-cnb（PC 版）与 .ui-mobile-cnb（移动版）两套 DOM，通过 @media (max-width: 794px) 断点自动切换：PC 端左右分栏、侧栏二维码，移动端单列卡片、带投影的通栏输入框，无需另做 H5 站。
4. 房产平台品牌元素完整
顶部 Logo + 客服热线（400 电话位）、底部公司备案信息、微信图标、登录/注册双入口按钮图均已按真实平台规格排版，替换图片即可换成你的品牌。
5. 结构极简，二次开发成本低
无任何构建工具与框架依赖，仅 jQuery 1.10.0 + 两个 CSS 文件，任何后端语言（PHP / Java / Python / Node）的模板引擎都可以直接嵌入。
技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| jQuery | 1.10.0 | 密码明文切换等表单交互 |
| normalize.css | — | 浏览器默认样式归一化 |
| 原生 CSS | — | 页面样式与媒体查询双端适配 |
项目结构
susuti3/
├── login.html # 登录页（手机号 + 密码 + 短信验证码 + 微信扫码）
├── register.html # 注册页（验证码 / 昵称 / 密码确认 / 协议勾选）
├── wjmm.html # 找回密码页（手机号验证 + 新密码设置）
├── css/
│ ├── style.css # 全部页面样式（含 PC / 移动端双版式与断点）
│ └── normalize.css
└── img/ # Logo、二维码、客服电话、眼睛图标等品牌素材快速开始
纯静态模板，无需安装任何依赖：
# 方式一：浏览器直接打开
双击 login.html 即可预览
# 方式二：本地静态服务器（推荐，路径更接近真实环境）
cd susuti3
python3 -m http.server 8000
# 浏览器访问 http://localhost:8000/login.html也可使用 VS Code 的 Live Server 插件一键预览。缩小窗口至 794px 以下可查看移动端版式。
二次开发指南
| 需求 | 操作 |
|---|---|
| 更换品牌 | 替换 img/ 下 logo.png（PC）、logo2.png（移动端）、二维码等图片，同名覆盖 |
| 修改文案 / 链接 | 各 HTML 内电话号码、协议名称、href 直接修改 |
| 更换主题色 | 修改 css/style.css 中的主色 #f4a01c（品牌橙金色） |
| 接入后端 | 将 input 表单与”获取验证码”按钮对接你的登录 / 注册 / 找回密码接口 |
| 增删页面 | 复制任一页面，保留头部 / 底部结构替换中间表单区即可 |
适用场景
房产 / 租房平台账号模块，也可直接用于 O2O 平台、企业官网、小程序后台等任何需要”登录 + 注册 + 找回密码”三件套的项目，作为标准账号体系前端基底。
从零自研 vs 使用本模板
| 维度 | 从零自研 | 使用本模板 |
|---|---|---|
| 交付周期 | 3~5 天 | 半天接入后端即可上线 |
| 页面还原度 | 需自行设计打磨 | 真实平台上线规格，双端版式齐备 |
| 交互与动画 | 明文切换等细节需逐一开发 | 表单交互与错误提示开箱即用 |
| 双端适配 | 需另写一套 H5 或做响应式 | 794px 断点自动切换，已全部完成 |
| 维护成本 | 多页面多状态自行维护 | 仅 3 页 + 1 个样式文件，极低 |
在线预览
将整个 susuti3 目录部署至任意静态托管（GitHub Pages / 阿里云 OSS / Nginx）即可在线预览，无需构建步骤。
http://case.fedshare.cn/susuti3/login.html
评论0