diff --git a/src/components/navbar/index.module.scss b/src/components/navbar/index.module.scss index cede87d..6546978 100644 --- a/src/components/navbar/index.module.scss +++ b/src/components/navbar/index.module.scss @@ -1,10 +1,18 @@ +// 外层只负责状态栏留白与白底:高度不能写死——reset 的 border-box 下 +// 固定 height 会把 paddingTop(状态栏 44px+)一起算进去,内容区被压成 +// 0 甚至负值,标题被挤出导航栏(与页面内容重叠) .navbar { + position: relative; + background: #ffffff; +} + +// 内容栏:88px(→rpx) = 44 逻辑 px,标准导航高度 +.bar { position: relative; display: flex; align-items: center; height: 88px; padding: 0 32px; - background: #ffffff; } .back { @@ -27,17 +35,21 @@ margin-left: 8px; } -// 绝对定位居中:与 back 按钮是否存在无关,免手动平衡宽度 -// 外层必须是 View(block 元素):text 标签在 absolute 下宽度收缩、 -// left+right 无法撑开宽度,text-align:center 会失效 +// 绝对定位四边拉伸 + flex 居中:不依赖 absolute 静态位置(各内核行为不一), +// 与 back 按钮是否存在无关,免手动平衡宽度 .titleWrap { position: absolute; left: 120px; right: 120px; - text-align: center; + top: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; } .title { + max-width: 100%; font-size: 32px; font-weight: 600; color: $color-text; diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx index a8ab47e..d900709 100644 --- a/src/components/navbar/index.tsx +++ b/src/components/navbar/index.tsx @@ -37,14 +37,15 @@ export function Navbar({ borderBottom: border ? '1px solid #f0f1f3' : 'none' }} > - {autoBack && ( - - + + {autoBack && ( + + + + )} + + {title} - )} - {/* title 用 View 包裹:text 标签 absolute 定位下宽度收缩导致居中失效 */} - - {title} )