fix(workshop): 需求区展开挤出输入条——上限560回400/44vh+对话区让位+modal裁边 v21
- 根因: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,无需重启服务
This commit is contained in:
1 parent
6964efccba
commit
d5a83c48f6
1 file changed
+4
-3
@@ -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; }
|
||||
|
||||
Reference in new issue
Block a user