From b7cdd5e58b21f7f124e4dec46849bda9d85a4d8c Mon Sep 17 00:00:00 2001 From: yueli Date: Mon, 14 Sep 2026 11:04:06 +0800 Subject: [PATCH] =?UTF-8?q?fix(stocktake):=20=E8=A1=A5=20min-height:0?= =?UTF-8?q?=EF=BC=8C=E7=9C=9F=E6=AD=A3=E8=A7=A3=E5=86=B3=E6=AC=A2=E8=BF=8E?= =?UTF-8?q?=E9=A1=B5=E6=8C=89=E9=92=AE=E8=A2=AB=E8=A3=81=E4=B8=8D=E5=8F=AF?= =?UTF-8?q?=E8=BE=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 上一轮只加了 overflow-y: auto 和 padding-bottom，没有生效。完整根因链： html,body { height:100%; overflow:hidden } ← src/style.css:61 全局裁剪 #app { height:100% } .app-container { height:100vh; flex column } ← 自身无 overflow .idle-card { flex:1; overflow-y:auto } ← 缺 min-height:0 flex 子项默认 min-height: auto，会**拒绝收缩到内容高度以下**。于是卡片被内容 撑破 100vh 容器，向上冒泡到 body 的 overflow:hidden 被裁掉 —— 卡片自己的 overflow-y 永远不会触发（它从没比内容矮过），所以按钮既看不见也滚不到。 补上 min-height: 0 后，卡片被约束为「容器剩余高度」，内部滚动才真正生效； 配合子元素的 margin:auto，内容不高时仍居中，超高时从顶部排下且保留 40px 底部安全边距。另加 -webkit-overflow-scrolling: touch 让平板惯性滚动。 注意：没有采用「把 .app-container 改成 overflow-y: auto」的方案 —— 该容器与扫码页的 .active-card 共用，改动会波及扫码态的整屏布局。 本次把修复严格限制在 .idle-card 内。 校验: style 块编译通过；min-height:0 / padding-bottom:40px / margin:auto 四条关键规则均已进入产物。 --- .../src/views/stock/stocktake/index.vue | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/inventory-web/src/views/stock/stocktake/index.vue b/inventory-web/src/views/stock/stocktake/index.vue index 41c4eb6..6c0eba5 100644 --- a/inventory-web/src/views/stock/stocktake/index.vue +++ b/inventory-web/src/views/stock/stocktake/index.vue @@ -1854,18 +1854,25 @@ const goToVarianceReview = () => { .idle-card { flex: 1; + /* ★★ min-height: 0 是整套布局的关键，缺了它前面几轮都白改 ★★ + flex 子项默认 min-height: auto —— 拒绝收缩到内容高度以下。于是卡片会 + 撑破 .app-container 的 100vh，自己的 overflow-y 永远不会触发，最终被 + body 上的全局 overflow: hidden（src/style.css）裁掉：按钮既看不见、 + 也滚不到。 + 加上它，卡片被约束成「容器剩余高度」，内部滚动才真正生效。 */ + min-height: 0; display: flex; flex-direction: column; - /* ★ 刻意不用 justify-content: center —— flex 居中在内容超出容器时会把 - 上下两端**同时裁掉**（经典陷阱），这就是小屏上「开始新盘点」按钮被 - 截掉一半的原因。改由子元素的 margin:auto 居中：内容不超高时正常居中， - 超高时 auto 塌缩为 0，配合 overflow-y 可完整滚动到顶与底。 */ + /* 刻意不用 justify-content: center —— flex 居中在内容超出时会把上下两端 + **同时裁掉**，居中改由子元素的 margin:auto 承担：内容不高时正常居中， + 超高时 auto 塌缩为 0，从顶部开始排布并保留底部安全边距。 */ align-items: center; text-align: center; border: none; border-radius: 0; overflow-y: auto; - padding-bottom: 40px; /* 底部留白，避免按钮贴着屏幕边缘 */ + -webkit-overflow-scrolling: touch; /* 平板/iOS 惯性滚动 */ + padding-bottom: 40px; /* 底部留白，按钮不贴屏幕边缘 */ } .idle-content { width: 100%; max-width: 400px; padding: 20px; margin: auto; } /* 抽盘配置区是双栏，窄容器装不下，此时放宽欢迎页 */