31 lines
2.0 KiB
HTML
31 lines
2.0 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; gap: 14px; padding: 14px; }
|
||
|
|
figure { width: 100%; 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: 38px; 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; }
|
||
|
|
.crop { position: relative; width: 1280px; height: 205px; margin: 0 auto; overflow: hidden; }
|
||
|
|
.crop img { position: absolute; display: block; width: auto; max-width: none; }
|
||
|
|
.source img { top: -120px; left: -190px; }
|
||
|
|
.implementation img { top: -120px; left: -190px; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header><h1>筛选区与表头 · 聚焦对照</h1><span>搜索框 / 下拉框 / 表格密度</span></header>
|
||
|
|
<main>
|
||
|
|
<figure><figcaption>确认稿 <small>视觉目标</small></figcaption><div class="crop source"><img src="http://127.0.0.1:4175/source.png" alt="确认稿筛选区域" /></div></figure>
|
||
|
|
<figure><figcaption>本地实现 <small>浏览器实拍</small></figcaption><div class="crop implementation"><img src="/design/implementation-device-management.png" alt="实现筛选区域" /></div></figure>
|
||
|
|
</main>
|
||
|
|
</body>
|
||
|
|
</html>
|