65 lines
3.7 KiB
HTML
65 lines
3.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>可乐 - 忘记密码模板选择器</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>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{font-family:'Noto Sans SC',system-ui,sans-serif;background:#0f0f1a;color:#fff;min-height:100vh;padding:40px 20px}
|
|
h1{font-size:28px;text-align:center;margin-bottom:8px;background:linear-gradient(135deg,#ef4444,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
.subtitle{text-align:center;color:rgba(255,255,255,.5);margin-bottom:48px;font-size:14px}
|
|
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:1200px;margin:0 auto}
|
|
.card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:28px;transition:all .3s}
|
|
.card:hover{transform:translateY(-4px);border-color:rgba(239,68,68,.4);box-shadow:0 12px 40px rgba(239,68,68,.15)}
|
|
.card h3{font-size:18px;margin-bottom:6px;color:#fff}
|
|
.card p{font-size:13px;color:rgba(255,255,255,.45);margin-bottom:20px;line-height:1.6}
|
|
.card a{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:linear-gradient(135deg,#ef4444,#f97316);color:#fff;border-radius:10px;text-decoration:none;font-size:14px;font-weight:600;transition:all .25s}
|
|
.card a:hover{box-shadow:0 4px 16px rgba(239,68,68,.4);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}
|
|
.tag-dark{background:rgba(99,102,241,.2);color:#818cf8}
|
|
.tag-light{background:rgba(239,68,68,.15);color:#f87171}
|
|
.tag-gradient{background:rgba(16,185,129,.15);color:#34d399}
|
|
.tag-clean{background:rgba(245,158,11,.15);color:#fbbf24}
|
|
.tag-sheet{background:rgba(168,85,247,.15);color:#c084fc}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>可乐 - 忘记密码 移动端模板</h1>
|
|
<p class="subtitle">5 套移动端忘记密码页面模板 | 适配可乐项目品牌风格</p>
|
|
<div class="grid">
|
|
<div class="card">
|
|
<h3>1. 沉浸暗色全屏</h3>
|
|
<p>全屏暗色渐变背景 + 玻璃质感卡片，品牌感极强</p>
|
|
<span class="tag tag-dark">暗色</span><span class="tag tag-dark">沉浸</span>
|
|
<br><a href="template1-fullscreen-dark.html" target="_blank">预览模板 →</a>
|
|
</div>
|
|
<div class="card">
|
|
<h3>2. 渐变卡片呼吸灯</h3>
|
|
<p>渐变背景 + 白色圆角卡片 + 微妙光晕动画</p>
|
|
<span class="tag tag-gradient">渐变</span><span class="tag tag-gradient">清新</span>
|
|
<br><a href="template2-gradient-card.html" target="_blank">预览模板 →</a>
|
|
</div>
|
|
<div class="card">
|
|
<h3>3. 极简白底</h3>
|
|
<p>干净白色底板 + 细线框输入框 + 橙色点缀</p>
|
|
<span class="tag tag-clean">极简</span><span class="tag tag-light">明亮</span>
|
|
<br><a href="template3-clean-white.html" target="_blank">预览模板 →</a>
|
|
</div>
|
|
<div class="card">
|
|
<h3>4. 底部弹出式</h3>
|
|
<p>品牌背景 + 底部上滑表单面板，触手可及</p>
|
|
<span class="tag tag-sheet">弹出</span><span class="tag tag-dark">品牌</span>
|
|
<br><a href="template4-bottomsheet.html" target="_blank">预览模板 →</a>
|
|
</div>
|
|
<div class="card">
|
|
<h3>5. 活力彩色渐变</h3>
|
|
<p>多彩渐变背景 + 毛玻璃卡片，活泼俏皮</p>
|
|
<span class="tag tag-gradient">彩色</span><span class="tag tag-sheet">毛玻璃</span>
|
|
<br><a href="template5-colorful-glass.html" target="_blank">预览模板 →</a>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |