28 lines
1.7 KiB
HTML
28 lines
1.7 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|||
|
|
<title>设备管理设计对照</title>
|
|||
|
|
<style>
|
|||
|
|
* { box-sizing: border-box; }
|
|||
|
|
body { margin: 0; color: #101828; background: #edf1f6; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
|
|||
|
|
header { display: flex; height: 54px; padding: 0 24px; align-items: center; justify-content: space-between; border-bottom: 1px solid #d8dee8; background: #fff; }
|
|||
|
|
h1 { margin: 0; font-size: 17px; }
|
|||
|
|
header span { color: #667085; font-size: 12px; }
|
|||
|
|
main { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px; }
|
|||
|
|
figure { min-width: 0; margin: 0; overflow: hidden; border: 1px solid #d8dee8; border-radius: 8px; background: #fff; box-shadow: 0 4px 16px rgba(16,24,40,.06); }
|
|||
|
|
figcaption { display: flex; height: 42px; padding: 0 14px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e4e7ec; font-size: 13px; font-weight: 650; }
|
|||
|
|
figcaption small { color: #667085; font-size: 11px; font-weight: 400; }
|
|||
|
|
img { display: block; width: 100%; height: auto; }
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<header><h1>设备管理 · 设计还原对照</h1><span>同一页面状态 / 1490 × 1080</span></header>
|
|||
|
|
<main>
|
|||
|
|
<figure><figcaption>确认稿 <small>视觉目标</small></figcaption><img src="http://127.0.0.1:4175/source.png" alt="设备管理确认稿" /></figure>
|
|||
|
|
<figure><figcaption>本地实现 <small>浏览器实拍</small></figcaption><img src="/design/implementation-device-management.png" alt="设备管理实现截图" /></figure>
|
|||
|
|
</main>
|
|||
|
|
</body>
|
|||
|
|
</html>
|