20 lines
1.3 KiB
HTML
20 lines
1.3 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
|
|
<title>Maintenance console design comparison</title>
|
||
|
|
<style>
|
||
|
|
*{box-sizing:border-box} body{margin:0;padding:18px;background:#111827;color:#fff;font:13px Inter,"PingFang SC",sans-serif}
|
||
|
|
h1{margin:0 0 14px;font-size:18px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.pane{overflow:hidden;border:1px solid #374151;border-radius:8px;background:#fff}.pane header{height:38px;padding:10px 12px;color:#cbd5e1;background:#1f2937}.pane img{display:block;width:100%;height:540px;object-fit:contain;object-position:top;background:#f6f7f9}.frame{height:540px;overflow:hidden;background:#f6f7f9}.frame iframe{width:1280px;height:900px;border:0;transform:scale(.497);transform-origin:top left}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>选定设计方向 / 浏览器实现对照</h1>
|
||
|
|
<div class="grid">
|
||
|
|
<section class="pane"><header>REFERENCE · 异常优先工作台</header><img src="./maintenance-console-reference.png" alt="选定设计参考" /></section>
|
||
|
|
<section class="pane"><header>IMPLEMENTATION · 当前管理端</header><div class="frame"><iframe src="http://127.0.0.1:5173/maintenance?designPreview=1" title="当前实现"></iframe></div></section>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|