feat: PLANNING体系首版（00路线图/02任务总表/03执行协议/I-03/I-04/registry42口径）+M1止血交付
This commit is contained in:
@@ -0,0 +1,345 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>可乐Web - Apple风格极简白</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
||||
|
||||
body{
|
||||
font-family:'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,sans-serif;
|
||||
background:#f5f5f7;
|
||||
display:flex;justify-content:center;align-items:center;
|
||||
min-height:100vh;padding:20px;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
}
|
||||
|
||||
/* 手机框架 */
|
||||
.phone{
|
||||
width:390px;min-height:844px;background:#fff;
|
||||
border-radius:50px;overflow:hidden;position:relative;
|
||||
box-shadow:0 50px 100px rgba(0,0,0,0.1),0 0 0 1px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
/* 灵动岛 */
|
||||
.dynamic-island{
|
||||
width:126px;height:36px;background:#000;border-radius:20px;
|
||||
position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:10;
|
||||
}
|
||||
|
||||
/* 状态栏 */
|
||||
.status-bar{
|
||||
display:flex;justify-content:space-between;align-items:center;
|
||||
padding:18px 30px 0;font-size:15px;font-weight:600;color:#000;
|
||||
position:relative;z-index:5;
|
||||
}
|
||||
.status-icons{display:flex;gap:5px;align-items:center}
|
||||
|
||||
/* 主内容 */
|
||||
.page{
|
||||
padding:80px 32px 40px;
|
||||
min-height:844px;
|
||||
display:flex;flex-direction:column;
|
||||
}
|
||||
.page.hidden{display:none}
|
||||
|
||||
/* 品牌 */
|
||||
.brand{
|
||||
display:flex;align-items:center;gap:12px;
|
||||
margin-bottom:48px;
|
||||
}
|
||||
.brand-logo{
|
||||
width:52px;height:52px;background:#000;border-radius:14px;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
font-size:26px;
|
||||
}
|
||||
.brand-name{font-size:20px;font-weight:700;color:#1d1d1f;letter-spacing:-0.3px}
|
||||
|
||||
/* 标题区 */
|
||||
.heading{margin-bottom:36px}
|
||||
.heading h1{
|
||||
font-size:34px;font-weight:800;color:#1d1d1f;
|
||||
line-height:1.15;letter-spacing:-0.8px;margin-bottom:8px;
|
||||
}
|
||||
.heading p{font-size:16px;color:#86868b;line-height:1.4}
|
||||
|
||||
/* 登录方式切换 */
|
||||
.method-toggle{
|
||||
display:flex;background:#f5f5f7;border-radius:12px;
|
||||
padding:4px;margin-bottom:32px;
|
||||
}
|
||||
.method-btn{
|
||||
flex:1;padding:11px 0;text-align:center;
|
||||
font-size:14px;font-weight:600;color:#86868b;
|
||||
border:none;background:transparent;border-radius:10px;
|
||||
cursor:pointer;transition:all 0.3s cubic-bezier(0.25,0.1,0.25,1);
|
||||
font-family:inherit;
|
||||
}
|
||||
.method-btn.active{
|
||||
background:#fff;color:#1d1d1f;
|
||||
box-shadow:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
/* 表单 */
|
||||
.form-section{display:none;animation:fadeSlideIn 0.35s ease}
|
||||
.form-section.active{display:block}
|
||||
|
||||
.input-field{margin-bottom:20px}
|
||||
.input-field label{
|
||||
display:block;font-size:13px;font-weight:600;color:#1d1d1f;
|
||||
margin-bottom:8px;letter-spacing:0.1px;
|
||||
}
|
||||
.input-field input{
|
||||
width:100%;padding:14px 16px;border:1.5px solid #e5e5ea;
|
||||
border-radius:12px;font-size:16px;font-family:inherit;
|
||||
background:#fff;color:#1d1d1f;outline:none;
|
||||
transition:all 0.25s ease;
|
||||
}
|
||||
.input-field input:focus{
|
||||
border-color:#667eea;
|
||||
box-shadow:0 0 0 3px rgba(102,126,234,0.12);
|
||||
}
|
||||
.input-field input::placeholder{color:#c7c7cc}
|
||||
|
||||
.code-row{display:flex;gap:10px;align-items:stretch}
|
||||
.code-row .input-field{flex:1;margin-bottom:0}
|
||||
.code-get{
|
||||
padding:0 20px;border:1.5px solid #e5e5ea;border-radius:12px;
|
||||
background:#fafafa;font-size:13px;font-weight:600;color:#667eea;
|
||||
cursor:pointer;white-space:nowrap;font-family:inherit;
|
||||
transition:all 0.2s ease;
|
||||
}
|
||||
.code-get:hover{border-color:#667eea;background:#f0f0ff}
|
||||
|
||||
/* 忘记密码 */
|
||||
.forgot{text-align:right;margin-bottom:28px}
|
||||
.forgot a{font-size:14px;color:#667eea;text-decoration:none;font-weight:500}
|
||||
|
||||
/* 主按钮 */
|
||||
.btn-main{
|
||||
width:100%;padding:16px;border:none;border-radius:14px;
|
||||
background:#1d1d1f;color:#fff;font-size:17px;font-weight:600;
|
||||
cursor:pointer;font-family:inherit;transition:all 0.3s ease;
|
||||
letter-spacing:0.2px;
|
||||
}
|
||||
.btn-main:active{transform:scale(0.97);opacity:0.9}
|
||||
|
||||
/* 分割线 */
|
||||
.divider{
|
||||
display:flex;align-items:center;gap:16px;
|
||||
margin:28px 0 24px;
|
||||
}
|
||||
.divider::before,.divider::after{content:'';flex:1;height:0.5px;background:#d2d2d7}
|
||||
.divider span{font-size:13px;color:#86868b;font-weight:500}
|
||||
|
||||
/* 社交登录 */
|
||||
.social-row{display:flex;justify-content:center;gap:16px;margin-bottom:32px}
|
||||
.social-btn{
|
||||
width:56px;height:56px;border-radius:16px;border:1.5px solid #e5e5ea;
|
||||
background:#fff;display:flex;align-items:center;justify-content:center;
|
||||
font-size:24px;cursor:pointer;transition:all 0.25s ease;
|
||||
}
|
||||
.social-btn:active{transform:scale(0.92);background:#f5f5f5}
|
||||
|
||||
/* 底部切换 */
|
||||
.switch-text{
|
||||
text-align:center;font-size:15px;color:#86868b;
|
||||
margin-top:auto;padding-top:20px;
|
||||
}
|
||||
.switch-text a{color:#667eea;text-decoration:none;font-weight:600}
|
||||
|
||||
/* 协议 */
|
||||
.agreement{
|
||||
text-align:center;font-size:12px;color:#aeaeb2;
|
||||
line-height:1.7;margin-top:16px;
|
||||
}
|
||||
.agreement a{color:#8e8e93;text-decoration:none;font-weight:500}
|
||||
|
||||
/* 返回按钮 */
|
||||
.back-btn{
|
||||
position:absolute;top:70px;left:32px;
|
||||
width:36px;height:36px;border-radius:50%;
|
||||
background:#f5f5f7;border:none;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
font-size:18px;cursor:pointer;z-index:6;
|
||||
transition:background 0.2s;
|
||||
}
|
||||
.back-btn:hover{background:#e8e8ed}
|
||||
|
||||
@keyframes fadeSlideIn{
|
||||
from{opacity:0;transform:translateY(12px)}
|
||||
to{opacity:1;transform:translateY(0)}
|
||||
}
|
||||
|
||||
@media(max-width:440px){
|
||||
body{padding:0;background:#fff}
|
||||
.phone{width:100%;border-radius:0;box-shadow:none;min-height:100vh}
|
||||
.dynamic-island{display:none}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<div class="dynamic-island"></div>
|
||||
<div class="status-bar">
|
||||
<span>9:41</span>
|
||||
<div class="status-icons">
|
||||
<svg width="17" height="12" viewBox="0 0 17 12" fill="currentColor"><path d="M1 8.5h1.5v3H1zM4 6h1.5v5.5H4zM7 3.5h1.5v8H7zM10 1.5h1.5v10H10zM13 0h1.5v11.5H13z"/></svg>
|
||||
<svg width="15" height="11" viewBox="0 0 15 11" fill="currentColor"><path d="M7.5 3.5c2 0 3.7.8 5 2.1l-1.4 1.4c-1-1-2.2-1.6-3.6-1.6s-2.6.6-3.6 1.6L2.5 5.6c1.3-1.3 3-2.1 5-2.1zM7.5 0c3.2 0 6 1.3 8.1 3.4L14.2 5.3C12.5 3.6 10.1 2.5 7.5 2.5S2.5 3.6.8 5.3L-.6 3.4C1.5 1.3 4.3 0 7.5 0zM7.5 7c1 0 2 .4 2.7 1.1L7.5 11 4.8 8.1C5.5 7.4 6.5 7 7.5 7z"/></svg>
|
||||
<svg width="27" height="13" viewBox="0 0 27 13" fill="currentColor"><rect x="0.5" y="0.5" width="22" height="12" rx="3.5" fill="none" stroke="currentColor" stroke-width="1"/><rect x="23.5" y="4" width="2" height="5" rx="1"/><rect x="2" y="2" width="18" height="9" rx="2"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="back-btn" onclick="history.back()">‹</button>
|
||||
|
||||
<div class="page" id="page-login">
|
||||
<div class="brand">
|
||||
<div class="brand-logo">🥤</div>
|
||||
<div class="brand-name">可乐Web</div>
|
||||
</div>
|
||||
|
||||
<div class="heading">
|
||||
<h1>欢迎回来</h1>
|
||||
<p>登录你的账户，继续探索</p>
|
||||
</div>
|
||||
|
||||
<div class="method-toggle">
|
||||
<button class="method-btn active" onclick="switchMethod('pwd',this)">密码登录</button>
|
||||
<button class="method-btn" onclick="switchMethod('code',this)">验证码登录</button>
|
||||
</div>
|
||||
|
||||
<!-- 密码登录 -->
|
||||
<div class="form-section active" id="login-pwd">
|
||||
<div class="input-field">
|
||||
<label>账号</label>
|
||||
<input type="text" placeholder="用户名 / 邮箱 / 手机号">
|
||||
</div>
|
||||
<div class="input-field">
|
||||
<label>密码</label>
|
||||
<input type="password" placeholder="请输入密码">
|
||||
</div>
|
||||
<div class="forgot"><a href="#">忘记密码?</a></div>
|
||||
<button class="btn-main" onclick="showPage('page-success')">登 录</button>
|
||||
</div>
|
||||
|
||||
<!-- 验证码登录 -->
|
||||
<div class="form-section" id="login-code">
|
||||
<div class="input-field">
|
||||
<label>邮箱</label>
|
||||
<input type="email" placeholder="your@email.com">
|
||||
</div>
|
||||
<div class="input-field">
|
||||
<label>验证码</label>
|
||||
<div class="code-row">
|
||||
<input type="text" placeholder="请输入验证码" maxlength="8">
|
||||
<button class="code-get" onclick="countdown(this)">发送验证码</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px"></div>
|
||||
<button class="btn-main">登录 / 注册</button>
|
||||
</div>
|
||||
|
||||
<div class="divider"><span>或</span></div>
|
||||
|
||||
<div class="social-row">
|
||||
<div class="social-btn">🐧</div>
|
||||
<div class="social-btn">💬</div>
|
||||
<div class="social-btn">📢</div>
|
||||
</div>
|
||||
|
||||
<div class="switch-text">
|
||||
还没有账户? <a href="#" onclick="showPage('page-register');return false">注册新账户</a>
|
||||
</div>
|
||||
|
||||
<div class="agreement">
|
||||
登录即代表同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 注册页 -->
|
||||
<div class="page hidden" id="page-register">
|
||||
<div class="brand">
|
||||
<div class="brand-logo">🥤</div>
|
||||
<div class="brand-name">可乐Web</div>
|
||||
</div>
|
||||
|
||||
<div class="heading">
|
||||
<h1>创建账户</h1>
|
||||
<p>加入可乐Web，开始你的探索之旅</p>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<label>邮箱地址</label>
|
||||
<input type="email" placeholder="your@email.com">
|
||||
</div>
|
||||
<div class="input-field">
|
||||
<label>验证码</label>
|
||||
<div class="code-row">
|
||||
<input type="text" placeholder="请输入验证码" maxlength="8">
|
||||
<button class="code-get" onclick="countdown(this)">发送验证码</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-field">
|
||||
<label>用户名</label>
|
||||
<input type="text" placeholder="给自己取个名字">
|
||||
</div>
|
||||
<div class="input-field">
|
||||
<label>密码</label>
|
||||
<input type="password" placeholder="至少 8 位字符">
|
||||
</div>
|
||||
<div style="height:8px"></div>
|
||||
<button class="btn-main">创建账户</button>
|
||||
|
||||
<div class="switch-text">
|
||||
已有账户? <a href="#" onclick="showPage('page-login');return false">立即登录</a>
|
||||
</div>
|
||||
|
||||
<div class="agreement">
|
||||
注册即代表同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 成功页 -->
|
||||
<div class="page hidden" id="page-success" style="justify-content:center;align-items:center;text-align:center">
|
||||
<div style="font-size:64px;margin-bottom:24px">🎉</div>
|
||||
<h1 style="font-size:28px;font-weight:800;color:#1d1d1f;margin-bottom:12px">登录成功!</h1>
|
||||
<p style="font-size:16px;color:#86868b">欢迎回到可乐Web</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchMethod(type, btn) {
|
||||
document.querySelectorAll('.method-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
document.querySelectorAll('#page-login .form-section').forEach(s => s.classList.remove('active'));
|
||||
document.getElementById('login-' + type).classList.add('active');
|
||||
}
|
||||
|
||||
function showPage(id) {
|
||||
document.querySelectorAll('.page').forEach(p => {
|
||||
p.classList.add('hidden');
|
||||
p.style.animation = 'none';
|
||||
});
|
||||
const target = document.getElementById(id);
|
||||
target.classList.remove('hidden');
|
||||
target.offsetHeight;
|
||||
target.style.animation = 'fadeSlideIn 0.35s ease';
|
||||
}
|
||||
|
||||
function countdown(btn) {
|
||||
if (btn._timer) return;
|
||||
let sec = 60;
|
||||
const orig = btn.textContent;
|
||||
btn.textContent = sec + 's';
|
||||
btn._timer = setInterval(() => {
|
||||
sec--;
|
||||
if (sec <= 0) { clearInterval(btn._timer); btn._timer = null; btn.textContent = orig; }
|
||||
else btn.textContent = sec + 's';
|
||||
}, 1000);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user