fix(mobile): remove inherited page padding gaps around chat layout
客户标注了四处间距问题:头部上方空隙、头部/切换条两侧内缩、 输入条两侧内缩、输入条与 tab 栏之间约 96px 灰色空档。 根因:全局 .page 类自带 padding: 22px 16px 96px 且 min-height:100vh, 会话页继承后四边都被垫开;页面高度 calc 与之叠加产生底部大空档。 修复: - .sop-chat-page 改为 fixed 铺满窗口区(--window-top 到 --window-bottom), padding 清零,头部/线程/输入条边到边,与微信布局一致 - ChatComposer 底部去掉 env(safe-area-inset-bottom) 叠加(tab 栏自行处理) 验证:本地与生产实测 headTop=0 headLeft=0 composer 与 tab 栏间距 ≤1px; 截图目检通过。发布备份 h5-before-20260718051038。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -223,7 +223,7 @@ defineExpose({ teardown });
|
||||
.chat-composer-wrap {
|
||||
border-top: 1px solid #ebedf0;
|
||||
background: #f7f8fa;
|
||||
padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
|
||||
padding: 8px 10px 10px;
|
||||
}
|
||||
|
||||
.chip-scroll {
|
||||
|
||||
@@ -1826,9 +1826,16 @@ onUnload(() => {
|
||||
|
||||
/* ===== chat layout (WeChat-style rebuild) ===== */
|
||||
.sop-chat-page {
|
||||
position: fixed;
|
||||
top: var(--window-top, 0px);
|
||||
right: 0;
|
||||
bottom: var(--window-bottom, 0px);
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - var(--window-top, 0px) - var(--window-bottom, 0px));
|
||||
min-height: 0;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
background: #f2f3f5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user