wangjia
a642bf16a2
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
18 lines
1.4 KiB
HTML
18 lines
1.4 KiB
HTML
<!doctype html>
|
|
<!-- @dsCard group="Spacing" name="间距网格" subtitle="4px 基准间距标尺" viewport="700x290" --><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:24px}
|
|
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);margin-bottom:16px}
|
|
.row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
|
|
.bar{height:18px;background:var(--accent);border-radius:3px}
|
|
.n{font-family:var(--font-mono);font-size:10px;color:var(--fg2);width:78px}</style></head><body>
|
|
<div class="lab">SPACING · 4px 基准网格</div>
|
|
<div class="row"><span class="n">1 · 4px</span><div class="bar" style="width:4px"></div></div>
|
|
<div class="row"><span class="n">2 · 8px</span><div class="bar" style="width:8px"></div></div>
|
|
<div class="row"><span class="n">3 · 12px</span><div class="bar" style="width:12px"></div></div>
|
|
<div class="row"><span class="n">4 · 16px</span><div class="bar" style="width:16px"></div></div>
|
|
<div class="row"><span class="n">6 · 24px</span><div class="bar" style="width:24px"></div></div>
|
|
<div class="row"><span class="n">8 · 32px</span><div class="bar" style="width:32px"></div></div>
|
|
<div class="row"><span class="n">12 · 48px</span><div class="bar" style="width:48px"></div></div>
|
|
<div class="row"><span class="n">16 · 64px</span><div class="bar" style="width:64px"></div></div>
|
|
</body></html>
|