92 lines
4.3 KiB
HTML
92 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
||
<!--
|
||
界面 01：主界面（根页）样机 — 160×160
|
||
状态：制作中
|
||
规则：160×160 设备像素 | 1bpp 纯黑白 | SimSun 12px（汉字 12px/字，ASCII 6px/字，行高 13）
|
||
本文件仅渲染页面本身；规格见 01_主界面_说明.md
|
||
布局依据：原图 01_主界面原始图片.png 实测（628×631 @ 3.925x 缩放）
|
||
-->
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>界面 01 | 主界面</title>
|
||
<style>
|
||
html, body { margin:0; }
|
||
body { padding:24px; background:#e8e8e8;
|
||
display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
|
||
|
||
/* ===== 屏体：1 设备像素 = var(--u) ===== */
|
||
.ui { --u:1px; position:relative;
|
||
width:calc(160*var(--u)); height:calc(160*var(--u));
|
||
background:#000; color:#fff; overflow:hidden;
|
||
font-family:SimSun,NSimSun,serif; }
|
||
.ui.z4 { --u:4px; }
|
||
|
||
/* 顶部装饰：开口浅 V（底边 y=17 x16~145；两腿外上翘至 y=7 x7/x158），线宽 2px
|
||
（注：MCU 实现中两腿加粗为 3px 以补偿 1bpp 斜线阈值损耗，见 ui_menu.c MENU_DECO_LEG_W） */
|
||
.deco { position:absolute; left:0; top:0;
|
||
width:calc(160*var(--u)); height:calc(160*var(--u)); display:block; }
|
||
|
||
/* 状态行：左对齐 x=17，y=20 */
|
||
.status { position:absolute; left:calc(17*var(--u)); top:calc(20*var(--u));
|
||
font-size:calc(12*var(--u)); line-height:calc(13*var(--u)); white-space:nowrap; }
|
||
|
||
/* 列表框：左对齐 x=0，宽 99，7 行 × 15px + 1px 边框 = 高 107 */
|
||
.list { position:absolute; left:0; top:calc(44*var(--u));
|
||
width:calc(99*var(--u)); height:calc(107*var(--u));
|
||
box-sizing:border-box; border:calc(1*var(--u)) solid #fff; }
|
||
|
||
/* 行：高 15；文字左对齐（左留白 8）；箭头紧跟文字（x=58） */
|
||
.row { position:absolute; left:0; width:100%; height:calc(15*var(--u));
|
||
font-size:calc(12*var(--u)); line-height:calc(15*var(--u)); }
|
||
.row .lb { position:absolute; left:calc(8*var(--u)); top:0; }
|
||
.row .ar { position:absolute; left:calc(58*var(--u)); top:0; }
|
||
.row.sel { background:#fff; color:#000; }
|
||
.r1 { top:calc(0*var(--u)); }
|
||
.r2 { top:calc(15*var(--u)); }
|
||
.r3 { top:calc(30*var(--u)); }
|
||
.r4 { top:calc(45*var(--u)); }
|
||
.r5 { top:calc(60*var(--u)); }
|
||
.r6 { top:calc(75*var(--u)); }
|
||
.r7 { top:calc(90*var(--u)); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ① 1:1 实际大小（160×160，所见即真机） -->
|
||
<div class="ui">
|
||
<svg class="deco" viewBox="0 0 160 160">
|
||
<path d="M 7 7 L 16 17 L 145 17 L 158 7" fill="none" stroke="#fff" stroke-width="2"/>
|
||
</svg>
|
||
<div class="status">当前模式 ： 无模式</div>
|
||
<div class="list">
|
||
<div class="row r1 sel"><span class="lb">装置信息</span></div>
|
||
<div class="row r2"><span class="lb">实时数据</span><span class="ar">▶</span></div>
|
||
<div class="row r3"><span class="lb">参数定值</span><span class="ar">▶</span></div>
|
||
<div class="row r4"><span class="lb">三遥设置</span><span class="ar">▶</span></div>
|
||
<div class="row r5"><span class="lb">装置维护</span><span class="ar">▶</span></div>
|
||
<div class="row r6"><span class="lb">通讯参数</span><span class="ar">▶</span></div>
|
||
<div class="row r7"><span class="lb">记录查询</span><span class="ar">▶</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ② 4x 放大（1 设备像素 = 4 屏幕像素，布局与 1:1 完全等价） -->
|
||
<div class="ui z4">
|
||
<svg class="deco" viewBox="0 0 160 160">
|
||
<path d="M 7 7 L 16 17 L 145 17 L 158 7" fill="none" stroke="#fff" stroke-width="2"/>
|
||
</svg>
|
||
<div class="status">当前模式 ： 无模式</div>
|
||
<div class="list">
|
||
<div class="row r1 sel"><span class="lb">装置信息</span></div>
|
||
<div class="row r2"><span class="lb">实时数据</span><span class="ar">▶</span></div>
|
||
<div class="row r3"><span class="lb">参数定值</span><span class="ar">▶</span></div>
|
||
<div class="row r4"><span class="lb">三遥设置</span><span class="ar">▶</span></div>
|
||
<div class="row r5"><span class="lb">装置维护</span><span class="ar">▶</span></div>
|
||
<div class="row r6"><span class="lb">通讯参数</span><span class="ar">▶</span></div>
|
||
<div class="row r7"><span class="lb">记录查询</span><span class="ar">▶</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|