From 022ed35d372ae7ba699fd0a6ebcb2ff4cf67a063 Mon Sep 17 00:00:00 2001 From: maogeigei Date: Wed, 2 Sep 2026 18:56:04 +0800 Subject: [PATCH] =?UTF-8?q?fix(workshop):=20=E9=9C=80=E6=B1=82=E5=8C=BA?= =?UTF-8?q?=E5=B1=95=E5=BC=80=E6=8C=A4=E5=87=BA=E8=BE=93=E5=85=A5=E6=9D=A1?= =?UTF-8?q?=E2=80=94=E2=80=94=E4=B8=8A=E9=99=90560=E5=9B=9E400/44vh+?= =?UTF-8?q?=E5=AF=B9=E8=AF=9D=E5=8C=BA=E8=AE=A9=E4=BD=8D+modal=E8=A3=81?= =?UTF-8?q?=E8=BE=B9=20v21?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 根因：v17 为 8 卡把展开上限提到 560px，v20 已回 5 卡未回缩；窗口 92vh 较矮时 560+对话区(130)+输入条超出弹窗总高，输入条 flex:none 固定底被挤出 - .req-sheet / .req-sheet-box.open 展开上限 560→min(44vh,400px)（5 卡空卡约 330 全显，内容超高内部滚动，矮窗口自动让位） - .req-dialog min-height 130→60 腾出弹性空间 - .req-modal 加 overflow:hidden 防残余溢出弹窗框 - 纯 CSS，无需重启服务 --- project/短视频脚本创作/V1.0/mcn-work-shop/public/style.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/project/短视频脚本创作/V1.0/mcn-work-shop/public/style.css b/project/短视频脚本创作/V1.0/mcn-work-shop/public/style.css index 9b78490..c4ecdef 100644 --- a/project/短视频脚本创作/V1.0/mcn-work-shop/public/style.css +++ b/project/短视频脚本创作/V1.0/mcn-work-shop/public/style.css @@ -210,12 +210,13 @@ main { height: calc(100vh - 54px); } .req-modal { width: 760px; max-width: 96vw; height: min(840px, 92vh); box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; + overflow: hidden; /* v21：内容超高时裁在弹窗内，防止输入条被挤出弹窗视觉外 */ } .req-modal .modal-title-row { flex: none; margin-bottom: 0; } /* 需求区：一个维度一张卡片（09-02 v12 改：维度名=卡片内小标题置左上角，内容在其下；卡片 padding 10px），超高内部滚动 */ .req-sheet { flex: none; display: grid; grid-template-columns: 1fr; gap: 6px 0; - max-height: 560px; overflow: auto; align-content: start; padding: 2px; + max-height: min(44vh, 400px); overflow: auto; align-content: start; padding: 2px; /* v21：5 卡上限回 400，矮窗口按 44vh 让位给输入条 */ } .req-field { display: flex; flex-direction: column; gap: 4px; @@ -247,7 +248,7 @@ main { height: calc(100vh - 54px); } .req-sheet-toggle .rst-caret svg { transition: transform .2s ease; transform: rotate(180deg); } /* 收起（默认）：箭头朝下提示可展开 */ .req-sheet-box.open .rst-caret svg { transform: rotate(0deg); } .req-sheet-box .req-sheet { max-height: 0; overflow: hidden; padding: 0; transition: max-height .2s ease; } -.req-sheet-box.open .req-sheet { max-height: 560px; overflow: auto; padding: 2px; } /* v17：8 张卡（含落点三字段）展开高度 400→560 */ +.req-sheet-box.open .req-sheet { max-height: min(44vh, 400px); overflow: auto; padding: 2px; } /* v21：5 卡展开上限 400/44vh（v17 曾 560 配 8 卡，现 5 卡回缩防挤出输入条） */ /* 需求栏下方功能选项条（09-02 v11）：时长目标下拉（30/60/120/240/自定义），与需求栏同宽同视觉层级 */ .req-opts { flex: none; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; } .req-opts .opts-label { flex: none; font-size: 13px; font-weight: 600; color: var(--text); } @@ -264,7 +265,7 @@ main { height: calc(100vh - 54px); } } .req-confirm-attach { font-size: 13px; color: var(--primary); margin-top: 8px; } .req-dialog { - flex: 1 1 auto; min-height: 130px; overflow: auto; + flex: 1 1 auto; min-height: 60px; overflow: auto; /* v21：min-height 130→60，需求区展开时给输入条让位 */ display: flex; flex-direction: column; gap: 6px; padding: 2px; } .req-dialog-empty { color: var(--dim); font-size: 13px; line-height: 1.7; padding: 2px; }