wangjia
a642bf16a2
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
26 lines
2.8 KiB
HTML
26 lines
2.8 KiB
HTML
<!doctype html>
|
||
<!-- @dsCard group="Components" name="服务器列表行" subtitle="国家码 · 延迟 · 信号 · 选中态" 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)}
|
||
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);margin-bottom:12px}
|
||
.list{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
|
||
.row{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--border);cursor:pointer}
|
||
.row:last-child{border:0}
|
||
.row.sel{background:var(--accent-subtle)}
|
||
.cc{width:34px;height:34px;border-radius:var(--radius-md);background:var(--sand-100);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--fg2);flex-shrink:0}
|
||
.row.sel .cc{background:var(--accent);color:#fff}
|
||
.name{flex:1}.n1{font-size:14px;font-weight:600}.n2{font-size:11px;color:var(--fg3)}
|
||
.sig{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;color:var(--fg2)}
|
||
.bars{display:flex;gap:2px;align-items:flex-end;height:14px}
|
||
.bars i{width:3px;border-radius:1px;background:var(--success)}
|
||
.check{color:var(--accent)} .check svg{width:18px;height:18px}</style>
|
||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script></head><body>
|
||
<div class="lab">SERVER ROW · 服务器列表 — 国家码 · 延迟 · 信号 · 选中态</div>
|
||
<div class="list">
|
||
<div class="row sel"><div class="cc">HK</div><div class="name"><div class="n1">香港 · 流媒体</div><div class="n2">Hong Kong · 1.2× 倍率</div></div><span class="sig">18ms</span><span class="check"><i data-lucide="check"></i></span></div>
|
||
<div class="row"><div class="cc">JP</div><div class="name"><div class="n1">日本 东京</div><div class="n2">Tokyo</div></div><span class="sig"><span class="bars"><i style="height:5px"></i><i style="height:9px"></i><i style="height:14px"></i></span>32ms</span></div>
|
||
<div class="row"><div class="cc">SG</div><div class="name"><div class="n1">新加坡</div><div class="n2">Singapore · P2P</div></div><span class="sig"><span class="bars"><i style="height:5px"></i><i style="height:9px"></i><i style="height:14px;background:var(--sand-300)"></i></span>54ms</span></div>
|
||
<div class="row"><div class="cc">US</div><div class="name"><div class="n1">美国 洛杉矶</div><div class="n2">Los Angeles</div></div><span class="sig"><span class="bars"><i style="height:5px"></i><i style="height:9px;background:var(--sand-300)"></i><i style="height:14px;background:var(--sand-300)"></i></span>146ms</span></div>
|
||
</div>
|
||
<script>lucide.createIcons()</script>
|
||
</body></html>
|