diff --git a/module/templates/index.html b/module/templates/index.html index 48f8e11..b27085f 100644 --- a/module/templates/index.html +++ b/module/templates/index.html @@ -582,18 +582,41 @@ /* 响应式:手机适配(≤ 768px) */ @media (max-width: 768px) { + /* 顶部导航变两行,把 --hdr-h 调大供 formbar margin 跟随 */ + :root { --hdr-h: 88px; } + /* 页面滚动交给整页而非固定容器,避免 fixed 高度硬编码 bug */ html, body { height: auto; } - /* 顶部导航压缩 */ - .hdr { padding: 0 10px; gap: 8px; } - .hdr-brand { font-size: 13px; } + /* 顶部导航:允许换行,分两行显示,防止文字被挤压竖排 */ + .hdr { + height: auto; + min-height: var(--hdr-h); + flex-wrap: wrap; + padding: 6px 10px; + gap: 8px; + align-items: center; + } + .hdr-brand { font-size: 13px; flex-shrink: 0; } .hdr-brand small { display: none; } - .hdr-stats { gap: 10px; } - .hstat-v { font-size: 12px; } - .hstat-l { font-size: 9px; } - .btn-pause { padding: 4px 10px; font-size: 11px; } - .state-pill { padding: 2px 6px; font-size: 11px; } + .hdr-divider { display: none; } + .hdr-right { margin-left: auto; gap: 6px; flex-shrink: 0; } + .state-pill { padding: 3px 8px; font-size: 11px; white-space: nowrap; flex-shrink: 0; } + .btn-pause { padding: 5px 12px; font-size: 11px; white-space: nowrap; flex-shrink: 0; } + + /* 统计数字独占第二行(order: 5 让它换到 brand/right 之后) */ + .hdr-stats { + order: 5; + flex-basis: 100%; + width: 100%; + gap: 0; + padding-top: 6px; + border-top: 1px solid var(--border); + justify-content: space-around; + } + .hstat { text-align: center; white-space: nowrap; } + .hstat-v { font-size: 13px; white-space: nowrap; } + .hstat-l { font-size: 10px; white-space: nowrap; margin-top: 1px; } /* 表单栏:取消固定定位,改为跟内容一起滚;字段全占满宽度 */ .formbar { @@ -655,8 +678,8 @@ .wiz-title { font-size: 15px; } .ws-num { width: 22px; height: 22px; font-size: 10px; } - /* Toast 通知全宽居中 */ - .toasts { top: 56px; right: 8px; left: 8px; } + /* Toast 通知全宽居中(避开变高的 hdr) */ + .toasts { top: calc(var(--hdr-h) + 6px); right: 8px; left: 8px; } .toast { font-size: 12px; } }