42 lines
2.7 KiB
HTML
42 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>可乐 - Apple 极简白 忘记密码模板</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{font-family:'Inter',-apple-system,'Noto Sans SC',sans-serif;background:#f5f5f7;color:#1d1d1f;min-height:100vh;padding:40px 20px}
|
|
h1{font-size:28px;text-align:center;margin-bottom:8px;font-weight:800;letter-spacing:-.5px}
|
|
.subtitle{text-align:center;color:#86868b;margin-bottom:48px;font-size:15px}
|
|
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;max-width:800px;margin:0 auto}
|
|
.card{background:#fff;border-radius:16px;padding:28px;border:1px solid #e5e5ea;transition:all .3s}
|
|
.card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.08);border-color:#d2d2d7}
|
|
.card h3{font-size:18px;font-weight:700;margin-bottom:6px}
|
|
.card p{font-size:13px;color:#86868b;margin-bottom:20px;line-height:1.6}
|
|
.card a{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:#1d1d1f;color:#fff;border-radius:10px;text-decoration:none;font-size:14px;font-weight:600;transition:all .25s}
|
|
.card a:hover{opacity:.85;transform:scale(1.02)}
|
|
.tag{display:inline-block;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:600;margin-right:6px;margin-bottom:8px;background:#f0f0f2;color:#86868b}
|
|
.tag.active{background:#1d1d1f;color:#fff}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>可乐 - Apple 极简白 忘记密码模板</h1>
|
|
<p class="subtitle">与登录注册页面风格统一 | 支持浅色/深色切换 | 带步骤栏</p>
|
|
<div class="grid">
|
|
<div class="card">
|
|
<h3>V1 - 标准步骤栏</h3>
|
|
<p>与当前登录页完全一致的 Apple 极简风格。步骤栏使用数字+文字设计，浅色/深色双主题切换，密码输入框、验证码按钮、按钮样式全部对齐登录页规范。</p>
|
|
<span class="tag active">Apple 风格</span><span class="tag">双主题</span><span class="tag">步骤栏</span>
|
|
<br><a href="template1-light-dark.html">预览模板 →</a>
|
|
</div>
|
|
<div class="card">
|
|
<h3>V2 - 滑块式步骤栏 + 密码强度</h3>
|
|
<p>在 V1 基础上升级：步骤栏改为 Apple 风格的 Segmented Control 滑块动画，新增实时密码强度指示器（弱/中/强），交互更丰富。</p>
|
|
<span class="tag active">滑块步骤</span><span class="tag">密码强度</span><span class="tag">双主题</span>
|
|
<br><a href="template2-segmented-steps.html">预览模板 →</a>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |