mirror of
https://gitee.com/xmz7891/ykxmz.git
synced 2026-10-19 16:30:43 +00:00
修管理页顶栏被切掉(标题看不见、徽章压在字上)
用户截图圈出顶栏:主标题「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:
@@ -0,0 +1,23 @@
|
||||
修管理页顶栏被切掉(标题看不见、徽章压在字上)
|
||||
|
||||
用户截图圈出顶栏:主标题「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 两档宽度下顶栏都正常,
|
||||
标题、副标题、徽章、右侧信息全部各就各位。
|
||||
Reference in New Issue
Block a user