修管理页顶栏被切掉(标题看不见、徽章压在字上)

用户截图圈出顶栏:主标题「ykxmz 中转站」被切掉看不见,
「运行中」徽章压在副标题上。

根因:
  .top-in 用了固定 height:62px。
  但顶栏内容比 62px 高:
    左边品牌是「标题 + 副标题」两行
    右边是「版本信息 + 累计请求」两行
  flex 容器固定高度装不下,内容就被往上顶出去了 ——
  于是标题被切在容器外,徽章挤到文字上。

修法:
  * height:62px 改成 padding:13px 0 + min-height:36px
    (内容多高就是多高,别再写死)
  * 给 logo / brand / state 都加 flex:none,别被压缩
  * 标题副标题加 white-space:nowrap,避免换行错位
  * 右上的版本信息允许收缩(min-width:0)
  * 窄屏(<640px)时状态徽章换行,不跟标题挤

实测:1200px 和 700px 两档宽度下顶栏都正常,
标题、副标题、徽章、右侧信息全部各就各位。
This commit is contained in:
xmz7891
2026-10-07 10:48:28 +08:00
parent 2b204cae07
commit 5bf108f1f8
4 changed files with 535 additions and 13 deletions
+25 -7
View File
@@ -55,25 +55,43 @@ a{color:inherit}
/* ---------- 吸顶顶栏 ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.88);
backdrop-filter:saturate(180%%) blur(12px);border-bottom:1px solid var(--border)}
.top-in{display:flex;align-items:center;gap:12px;height:62px}
/*
* ⚠ 别用固定 height。
* 原来写的是 .top-in{height:62px},但里面品牌是「标题 + 副标题」两行、
* 右边还有两行版本信息 —— 实际内容比 62px 高,
* flex 就把内容往上顶出去了:**标题被切掉、运行中徽章压在字上**
* (用户截图里就是这样)。
* 改成 padding 撑开,内容多高就是多高。
*/
.top-in{display:flex;align-items:center;gap:12px;
padding-top:13px;padding-bottom:13px;min-height:36px}
.logo{width:32px;height:32px;border-radius:9px;flex:none;
background:linear-gradient(140deg,#2563eb,#1d4ed8);
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:12px;letter-spacing:-.3px}
.brand b{display:block;font-size:15px;font-weight:650;letter-spacing:-.2px}
.brand span{display:block;color:var(--faint);font-size:11px}
.state{margin-left:14px;display:inline-flex;align-items:center;gap:6px;
.brand{flex:none;min-width:0}
.brand b{display:block;font-size:15px;font-weight:650;letter-spacing:-.2px;
line-height:1.35;white-space:nowrap}
.brand span{display:block;color:var(--faint);font-size:11px;
line-height:1.4;white-space:nowrap}
.state{margin-left:8px;flex:none;display:inline-flex;align-items:center;gap:6px;
padding:3px 10px;border-radius:999px;background:#f0fdf4;
color:#15803d;font-size:11px;font-weight:600}
color:#15803d;font-size:11px;font-weight:600;white-space:nowrap}
.state i{width:6px;height:6px;border-radius:50%%;background:#22c55e;
display:block}
display:block;flex:none}
.top-right{margin-left:auto;text-align:right;font-size:11px;
color:var(--faint);line-height:1.7}
color:var(--faint);line-height:1.65;min-width:0}
.top-right b{color:var(--muted);font-weight:500}
.logout{color:var(--muted);text-decoration:none;
border-bottom:1px dashed var(--border);transition:.15s}
.logout:hover{color:var(--danger);border-bottom-color:var(--danger)}
/* 窄屏:状态徽章换行,别和标题挤 */
@media(max-width:640px){
.top-in{flex-wrap:wrap;gap:8px}
.state{margin-left:auto}
}
/* ---------- 公网地址(最重要,给最大权重)---------- */
.hero{padding:30px 0 26px}
.hero h2{font-size:13px;font-weight:600;color:var(--muted);