feat: PLANNING体系首版（00路线图/02任务总表/03执行协议/I-03/I-04/registry42口径）+M1止血交付
This commit is contained in:
@@ -0,0 +1,215 @@
|
||||
<!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>可乐 - 底部弹出式登录</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?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:'Noto Sans SC',system-ui,sans-serif;
|
||||
height:100vh;overflow:hidden;position:relative;
|
||||
background:#0a0a0f;
|
||||
}
|
||||
/* 沉浸式全屏背景 */
|
||||
.hero-bg{
|
||||
position:absolute;inset:0;
|
||||
background:linear-gradient(170deg,#1a0505 0%,#2d0a0a 30%,#0a0a1a 70%,#050510 100%);
|
||||
}
|
||||
.hero-bg::after{
|
||||
content:'';position:absolute;bottom:0;left:0;right:0;height:50%;
|
||||
background:linear-gradient(to top,rgba(0,0,0,0.95),transparent);
|
||||
}
|
||||
.hero-content{
|
||||
position:absolute;top:0;left:0;right:0;
|
||||
display:flex;flex-direction:column;align-items:center;justify-content:center;
|
||||
height:55vh;padding:40px 30px;z-index:1;
|
||||
}
|
||||
.hero-icon{font-size:72px;margin-bottom:20px;filter:drop-shadow(0 4px 20px rgba(239,68,68,0.3))}
|
||||
.hero-content h1{
|
||||
font-size:32px;font-weight:700;color:#fff;text-align:center;
|
||||
letter-spacing:1px;margin-bottom:8px;
|
||||
}
|
||||
.hero-content p{font-size:14px;color:rgba(255,255,255,0.5);text-align:center}
|
||||
/* 底部弹出卡片 */
|
||||
.bottom-sheet{
|
||||
position:fixed;bottom:0;left:0;right:0;z-index:10;
|
||||
background:#fff;
|
||||
border-radius:28px 28px 0 0;
|
||||
padding:12px 28px 40px;
|
||||
box-shadow:0 -10px 40px rgba(0,0,0,0.5);
|
||||
animation:slideUp .5s cubic-bezier(.22,1,.36,1) both;
|
||||
}
|
||||
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
|
||||
.handle{
|
||||
width:36px;height:4px;border-radius:2px;
|
||||
background:#e5e5e5;margin:0 auto 20px;
|
||||
}
|
||||
/* Tabs */
|
||||
.tabs{
|
||||
display:flex;margin-bottom:22px;
|
||||
background:#f5f5f5;border-radius:14px;padding:4px;
|
||||
}
|
||||
.tab{
|
||||
flex:1;padding:11px 0;text-align:center;font-size:14px;font-weight:600;
|
||||
color:#999;background:none;border:none;cursor:pointer;
|
||||
border-radius:11px;transition:all .25s;font-family:inherit;
|
||||
}
|
||||
.tab.active{background:#fff;color:#111;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
|
||||
/* 表单 */
|
||||
.form{display:none}
|
||||
.form.active{display:block;animation:fadeUp .3s ease}
|
||||
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
|
||||
.input-group{margin-bottom:16px}
|
||||
.field{
|
||||
display:flex;align-items:center;gap:12px;
|
||||
padding:14px 16px;border-radius:14px;
|
||||
background:#f7f7f7;border:1.5px solid transparent;
|
||||
transition:all .2s;
|
||||
}
|
||||
.field:focus-within{border-color:#ef4444;background:#fff}
|
||||
.field .icon{font-size:18px;flex-shrink:0}
|
||||
.field input{
|
||||
flex:1;background:none;border:none;outline:none;
|
||||
font-size:15px;color:#111;font-family:inherit;
|
||||
}
|
||||
.field input::placeholder{color:#bbb}
|
||||
.field .toggle-pwd{
|
||||
background:none;border:none;color:#ccc;cursor:pointer;font-size:16px;padding:2px;
|
||||
}
|
||||
.code-btn{
|
||||
padding:8px 16px;border-radius:10px;border:none;
|
||||
background:linear-gradient(135deg,#ef4444,#f97316);color:#fff;
|
||||
font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;
|
||||
font-family:inherit;transition:all .2s;flex-shrink:0;
|
||||
}
|
||||
.code-btn:disabled{opacity:.4;cursor:not-allowed}
|
||||
.forgot{display:flex;justify-content:flex-end;margin:-4px 0 18px}
|
||||
.forgot a{font-size:13px;color:#ef4444;text-decoration:none;font-weight:500}
|
||||
.btn-primary{
|
||||
width:100%;padding:15px;border:none;border-radius:14px;
|
||||
background:linear-gradient(135deg,#ef4444 0%,#f97316 100%);
|
||||
color:#fff;font-size:16px;font-weight:700;cursor:pointer;
|
||||
font-family:inherit;letter-spacing:.3px;
|
||||
box-shadow:0 6px 20px rgba(239,68,68,0.3);
|
||||
transition:all .25s;
|
||||
}
|
||||
.btn-primary:active{transform:scale(.98)}
|
||||
.divider{display:flex;align-items:center;gap:16px;margin:22px 0}
|
||||
.divider::before,.divider::after{content:'';flex:1;height:1px;background:#eee}
|
||||
.divider span{font-size:12px;color:#ccc}
|
||||
.social{display:flex;justify-content:center;gap:14px}
|
||||
.social-btn{
|
||||
width:52px;height:52px;border-radius:16px;border:1.5px solid #eee;
|
||||
background:#fff;display:flex;align-items:center;justify-content:center;
|
||||
cursor:pointer;transition:all .25s;font-size:22px;
|
||||
}
|
||||
.social-btn:active{transform:scale(.95)}
|
||||
.footer{text-align:center;margin-top:20px}
|
||||
.footer a{font-size:13px;color:#999;text-decoration:none}
|
||||
.footer a:hover{color:#ef4444}
|
||||
.agreement{
|
||||
text-align:center;margin-top:14px;font-size:11px;color:#bbb;line-height:1.6;
|
||||
}
|
||||
.agreement a{color:#999;text-decoration:none}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-icon">🥤</div>
|
||||
<h1>可乐</h1>
|
||||
<p>ChunYu · 发现更多精彩</p>
|
||||
</div>
|
||||
|
||||
<div class="bottom-sheet">
|
||||
<div class="handle"></div>
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab active" onclick="switchTab('login')">登录</button>
|
||||
<button class="tab" onclick="switchTab('register')">注册</button>
|
||||
</div>
|
||||
|
||||
<!-- 登录 -->
|
||||
<form class="form active" id="loginForm" onsubmit="return false">
|
||||
<div class="input-group">
|
||||
<div class="field">
|
||||
<span class="icon">👤</span>
|
||||
<input type="text" placeholder="手机号 / 邮箱" autofocus>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="field">
|
||||
<span class="icon">🔒</span>
|
||||
<input type="password" id="loginPwd" placeholder="密码">
|
||||
<button type="button" class="toggle-pwd" onclick="togglePwd('loginPwd',this)">👁</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="forgot"><a href="#">忘记密码？</a></div>
|
||||
<button class="btn-primary" type="submit">登录</button>
|
||||
</form>
|
||||
|
||||
<!-- 注册 -->
|
||||
<form class="form" id="registerForm" onsubmit="return false">
|
||||
<div class="input-group">
|
||||
<div class="field">
|
||||
<span class="icon">📱</span>
|
||||
<input type="tel" placeholder="手机号">
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="field">
|
||||
<span class="icon">🔑</span>
|
||||
<input type="text" placeholder="验证码" maxlength="6">
|
||||
<button type="button" class="code-btn" onclick="sendCode(this)">获取验证码</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="field">
|
||||
<span class="icon">🔒</span>
|
||||
<input type="password" id="regPwd" placeholder="设置密码（至少6位）">
|
||||
<button type="button" class="toggle-pwd" onclick="togglePwd('regPwd',this)">👁</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="agreement">
|
||||
<input type="checkbox" checked style="accent-color:#ef4444;width:13px;height:13px;vertical-align:middle;margin-right:4px">
|
||||
注册即同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a>
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" style="margin-top:16px">注册</button>
|
||||
</form>
|
||||
|
||||
<div class="divider"><span>其他登录方式</span></div>
|
||||
<div class="social">
|
||||
<div class="social-btn" title="微信">💬</div>
|
||||
<div class="social-btn" title="QQ">🐧</div>
|
||||
<div class="social-btn" title="微博">🔴</div>
|
||||
<div class="social-btn" title="Apple">🍎</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<a href="#">遇到问题？联系我们</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchTab(type){
|
||||
document.querySelectorAll('.tab').forEach((t,i)=>{
|
||||
t.classList.toggle('active',(type==='login'?i===0:i===1))
|
||||
})
|
||||
document.getElementById('loginForm').classList.toggle('active',type==='login')
|
||||
document.getElementById('registerForm').classList.toggle('active',type==='register')
|
||||
}
|
||||
function togglePwd(id,btn){
|
||||
const inp=document.getElementById(id)
|
||||
if(inp.type==='password'){inp.type='text';btn.textContent='🙈'}
|
||||
else{inp.type='password';btn.textContent='👁'}
|
||||
}
|
||||
function sendCode(btn){
|
||||
let sec=60;btn.disabled=true;
|
||||
const tick=()=>{btn.textContent=sec+'s';if(--sec<0){btn.disabled=false;btn.textContent='获取验证码'}}
|
||||
tick();const t=setInterval(tick,1000)
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user