wangjia
a642bf16a2
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
25 lines
2.2 KiB
HTML
25 lines
2.2 KiB
HTML
<!doctype html>
|
|
<!-- @dsCard group="Components" name="套餐卡" subtitle="免费版与 PRO 渐变卡" viewport="700x300" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
|
<style>body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:20px;color:var(--fg1);display:flex;gap:16px}
|
|
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);position:absolute;top:6px;left:20px}
|
|
.card{flex:1;background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:20px;border:1px solid var(--border)}
|
|
.card.pro{background:linear-gradient(160deg,var(--clay-600),var(--clay-800));color:#fff;border:none}
|
|
.pname{font-size:13px;font-weight:600;opacity:.8;margin-bottom:6px}
|
|
.price{font-family:var(--font-display);font-size:30px;font-weight:700;letter-spacing:-0.02em}
|
|
.price small{font-size:13px;font-weight:500;opacity:.7}
|
|
.feat{font-size:12px;margin-top:14px;display:flex;flex-direction:column;gap:7px}
|
|
.feat div{display:flex;align-items:center;gap:7px}
|
|
.feat svg{width:14px;height:14px;flex-shrink:0}
|
|
.cta{margin-top:18px;width:100%;border:none;border-radius:var(--radius-full);padding:11px;font-weight:600;font-size:13px;cursor:pointer}
|
|
.cta.b{background:var(--accent);color:#fff}.cta.w{background:#fff;color:var(--clay-700)}</style>
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script></head><body>
|
|
<div class="lab">PLAN CARD · 套餐卡 — 普通 / PRO(clay 渐变)</div>
|
|
<div class="card"><div class="pname" style="color:var(--fg2)">免费版 Free</div><div class="price" style="color:var(--fg1)">¥0<small>/月</small></div>
|
|
<div class="feat" style="color:var(--fg2)"><div><i data-lucide="check"></i>3 个基础节点</div><div><i data-lucide="check"></i>每日 1GB 流量</div></div>
|
|
<button class="cta b">当前方案</button></div>
|
|
<div class="card pro"><div class="pname">PRO 会员</div><div class="price">¥25<small>/月</small></div>
|
|
<div class="feat"><div><i data-lucide="check"></i>80+ 全球节点</div><div><i data-lucide="check"></i>无限流量 · 极速</div><div><i data-lucide="check"></i>5 台设备同时在线</div></div>
|
|
<button class="cta w">立即升级</button></div>
|
|
<script>lucide.createIcons()</script>
|
|
</body></html>
|