9 lines
2.4 KiB
HTML
9 lines
2.4 KiB
HTML
|
<!doctype html><html lang="zh-CN"><head><meta charset="UTF-8"><title>管理端设计验收对照</title><style>body{margin:0;background:#e8ece8;font:14px system-ui;color:#244f40}header{padding:12px 20px;display:flex;gap:18px;align-items:center}select{padding:8px}main{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 14px}section{min-width:0}h2{font-size:14px;margin:12px 0}.frame{overflow:hidden;background:white;position:relative}iframe{border:0;transform-origin:top left;position:absolute;top:0;left:0}img{width:100%;display:block}body.mobile main{grid-template-columns:400px 1fr}body.mobile iframe{position:static;transform:none!important}body.mobile #source{display:none}</style></head><body><header><strong>同尺寸设计对照 · 本地示例数据</strong><select id="page"><option value="devices">设备管理</option><option value="firmware">固件管理</option><option value="models">大模型管理</option><option value="config">验证码配置</option><option value="billing">用量与费用</option></select><button id="mobile">切换手机验收</button></header><main><section id="source"><h2>设计参考（用户要求精简导航）</h2><img id="reference"></section><section><h2 id="size">实际实现 · 1487 × 1058</h2><div class="frame"><iframe title="管理端实现"></iframe></div></section></main><script type="module">
|
|||
|
|
if (!import.meta.env.DEV) throw new Error('QA is development only');
|
|||
|
|
const refs={devices:'02-devices',firmware:'03-firmware',models:'05-models',config:'14-config-captcha',billing:'07-billing'};
|
|||
|
|
const select=document.querySelector('select'), frame=document.querySelector('iframe'), box=document.querySelector('.frame');let mobile=false;
|
|||
|
|
function size(){const width=mobile?390:1487,height=mobile?844:1058;frame.style.width=width+'px';frame.style.height=height+'px';const scale=mobile?1:box.clientWidth/1487;frame.style.transform='scale('+scale+')';box.style.height=(height*scale)+'px';document.querySelector('#size').textContent='实际实现 · '+width+' × '+height;}
|
|||
|
|
function show(){document.querySelector('#reference').src='/design/admin-qa-reference/'+refs[select.value]+'.png';frame.src='/portal-preview.html?screen=maintenance&area='+select.value;size();}
|
|||
|
|
select.onchange=show;document.querySelector('button').onclick=()=>{mobile=!mobile;document.body.classList.toggle('mobile',mobile);size();};new ResizeObserver(size).observe(box);show();
|
|||
|
|
</script></body></html>
|