wangjia
a642bf16a2
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
26 lines
1.5 KiB
HTML
26 lines
1.5 KiB
HTML
<!doctype html>
|
|
<!-- @dsCard group="Colors" name="语义状态色" subtitle="success / warning / danger 及 subtle 变体" viewport="700x175" --><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:14px}
|
|
.col{flex:1;display:flex;flex-direction:column;gap:8px}
|
|
.chip{height:56px;border-radius:var(--radius-md);display:flex;align-items:center;padding:0 14px;color:#fff;font-weight:600;font-size:13px;box-shadow:var(--shadow-sm)}
|
|
.sub{height:30px;border-radius:var(--radius-sm);display:flex;align-items:center;padding:0 14px;font-size:11px;font-weight:600}
|
|
.name{font-family:var(--font-mono);font-size:10px;color:var(--fg3);text-align:center}
|
|
</style></head><body>
|
|
<div class="col">
|
|
<div class="chip" style="background:var(--success)">已连接 Connected</div>
|
|
<div class="sub" style="background:var(--success-subtle);color:var(--green-600)">subtle</div>
|
|
<div class="name">success · #5B8C5A</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="chip" style="background:var(--warning)">连接中 Connecting</div>
|
|
<div class="sub" style="background:var(--warning-subtle);color:var(--amber-600)">subtle</div>
|
|
<div class="name">warning · #D69A3C</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="chip" style="background:var(--danger)">已断开 Error</div>
|
|
<div class="sub" style="background:var(--danger-subtle);color:var(--red-600)">subtle</div>
|
|
<div class="name">danger · #C0533B</div>
|
|
</div>
|
|
</body></html>
|