wangjia
a642bf16a2
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
23 lines
1.7 KiB
HTML
23 lines
1.7 KiB
HTML
<!doctype html>
|
|
<!-- @dsCard group="Components" name="状态徽章" subtitle="连接态 / 套餐 / 节点属性胶囊" viewport="700x150" --><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:22px;display:flex;gap:12px;flex-wrap:wrap}
|
|
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);width:100%;margin-bottom:8px}
|
|
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:6px 12px;border-radius:var(--radius-full)}
|
|
.dot{width:7px;height:7px;border-radius:50%}
|
|
.ok{background:var(--success-subtle);color:var(--green-600)} .ok .dot{background:var(--success)}
|
|
.warn{background:var(--warning-subtle);color:var(--amber-600)} .warn .dot{background:var(--warning)}
|
|
.err{background:var(--danger-subtle);color:var(--red-600)} .err .dot{background:var(--danger)}
|
|
.neu{background:var(--sand-100);color:var(--fg2)} .neu .dot{background:var(--sand-400)}
|
|
.pro{background:var(--accent);color:var(--fg-on-accent)}
|
|
.cnt{background:var(--accent-subtle);color:var(--accent);border:1px solid var(--accent-border)}</style></head><body>
|
|
<div class="lab">BADGES / STATUS · 状态胶囊 — 连接态 · 套餐 · 节点属性</div>
|
|
<span class="pill ok"><span class="dot"></span>已连接 Connected</span>
|
|
<span class="pill warn"><span class="dot"></span>连接中 Connecting</span>
|
|
<span class="pill err"><span class="dot"></span>已断开 Disconnected</span>
|
|
<span class="pill neu"><span class="dot"></span>未登录</span>
|
|
<span class="pill pro">PRO 会员</span>
|
|
<span class="pill cnt">流媒体优化</span>
|
|
<span class="pill cnt">P2P</span>
|
|
<span class="pill neu">延迟 24ms</span>
|
|
</body></html>
|