index.html · 约 2296 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
6<title>悦享账号 · 登录</title>
7<link rel="stylesheet" href="css/style.css">
8</head>
9<body>
10<div class="phone">
11<div class="auth">
12<div class="auth-top"><div class="logo">🔐</div><h1>悦享账号</h1><p>欢迎使用悦享，登录即享专属服务</p></div>
13<div class="auth-card"><form id="loginForm">
14<div class="auth-tabs"><button type="button" class="on" data-panel="p_code">验证码登录</button><button type="button" data-panel="p_pwd">密码登录</button></div>
15<div class="auth-panel on" id="p_code">
16<div class="field"><span class="lab">手机号</span><input data-k="phone" type="tel" inputmode="numeric" maxlength="11" placeholder="请输入手机号"></div>
17<div class="field"><span class="lab">验证码</span><input data-k="code" type="tel" inputmode="numeric" maxlength="6" placeholder="请输入验证码"><button type="button" class="codebtn">获取验证码</button></div>
18<label class="agree"><input type="checkbox">我已阅读并同意<a href="javascript:void(0)">《用户服务协议》</a>与<a href="javascript:void(0)">《隐私政策》</a></label>
19<button class="btn-auth" type="submit">登录</button>
20</div>
21<div class="auth-panel" id="p_pwd">
22<div class="field"><span class="lab">手机号</span><input data-k="phone" type="tel" inputmode="numeric" maxlength="11" placeholder="请输入手机号"></div>
23<div class="field"><span class="lab">密码</span><input data-k="pwd" type="password" placeholder="请输入密码（≥6位）"></div>
24<label class="agree"><input type="checkbox">我已阅读并同意<a href="javascript:void(0)">《用户服务协议》</a>与<a href="javascript:void(0)">《隐私政策》</a></label>
25<button class="btn-auth" type="submit">登录</button>
26</div>
27<div class="oauth"><div class="ob">💬</div><div class="ob">💚</div><div class="ob">🔵</div></div><div class="hint">第三方快捷登录（微信 / QQ / 支付宝，接口已预留）</div>
28<div class="switch-line">还没有账号？<a href="register.html">立即注册 ›</a></div>
29</form></div></div>
30</div>
31<script src="js/main.js"></script>
32</body>
33</html>