refactor(meeting-new): 恢复 2 列布局, 保留 el-form 项目标准
之前把 grid 改成单列 el-form-item 序列, 偏离原型 2 列布局。
现在用 .form-grid (CSS Grid 2 列 + grid-auto-flow: column 让左 6 右 5 对齐)
包住 11 个 el-form-item, 同时保留:
- el-form + :rules (项目标准)
- el-button type=primary (项目标准, 不覆盖 CSS)
- label-width 110px (跟原型一致, 不是 skill 的 120px — 因为原型是设计真源)
- :deep(.el-form-item) { margin-bottom: 0 } 让 grid 控制间距
按钮用 el-form-item 包裹 (skill 标准), 通过 CSS 隐藏 label 列避免空白。
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -6,8 +6,10 @@
|
|||||||
<!-- 红字提示 (业务规则) -->
|
<!-- 红字提示 (业务规则) -->
|
||||||
<p class="hint-text">*会议名称默认为项目名称,不可修改</p>
|
<p class="hint-text">*会议名称默认为项目名称,不可修改</p>
|
||||||
|
|
||||||
<!-- 整张 el-form (skill form 页标准: el-form 包裹所有 el-form-item, 不另起 form-actions) -->
|
<!-- el-form 包裹 + label-width 110px (跟原型一致) -->
|
||||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
|
||||||
|
<!-- 2 列布局 (跟原型 .form-grid 一致: grid-auto-flow: column 让左 6 右 5 对齐) -->
|
||||||
|
<div class="form-grid">
|
||||||
<!-- 左列 6 项只读快照 (来自 biz_project 派生) -->
|
<!-- 左列 6 项只读快照 (来自 biz_project 派生) -->
|
||||||
<el-form-item label="项目编号">
|
<el-form-item label="项目编号">
|
||||||
<span class="form-value code">{{ snap.projectNo }}</span>
|
<span class="form-value code">{{ snap.projectNo }}</span>
|
||||||
@@ -44,9 +46,10 @@
|
|||||||
<el-form-item label="备注">
|
<el-form-item label="备注">
|
||||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 底部按钮 (skill: 直接用 el-form-item 包裹, 不另起 div.form-actions) -->
|
<!-- 底部按钮 (skill: 用 el-form-item 包裹, 不另起 div.form-actions) -->
|
||||||
<el-form-item>
|
<el-form-item class="form-actions">
|
||||||
<el-button type="primary" @click="onSave">保存</el-button>
|
<el-button type="primary" @click="onSave">保存</el-button>
|
||||||
<el-button @click="goBack">取消</el-button>
|
<el-button @click="goBack">取消</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@@ -161,7 +164,21 @@ onMounted(async () => {
|
|||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 只读值样式 (跟 el-form-item 的 input 同高, 让布局对齐) */
|
/* === 2 列布局 (跟原型 .form-grid 一致, grid-auto-flow: column 让左 6 右 5 对齐) === */
|
||||||
|
.form-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
grid-template-rows: repeat(6, auto);
|
||||||
|
gap: 20px 32px;
|
||||||
|
max-width: 900px;
|
||||||
|
}
|
||||||
|
/* grid 内的 el-form-item 不再加默认 margin-bottom (由 grid 控制间距) */
|
||||||
|
.form-grid :deep(.el-form-item) {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 只读值样式 */
|
||||||
.form-value {
|
.form-value {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #333;
|
color: #333;
|
||||||
@@ -171,4 +188,20 @@ onMounted(async () => {
|
|||||||
font-family: ui-monospace, "Courier New", monospace;
|
font-family: ui-monospace, "Courier New", monospace;
|
||||||
color: var(--brand-primary);
|
color: var(--brand-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 底部按钮 (skill: 用 el-form-item 包裹, 不用 div.form-actions) */
|
||||||
|
.form-actions {
|
||||||
|
margin-top: 24px;
|
||||||
|
padding-top: 24px;
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
/* 按钮所在 form-item 不显示 label 列 (skill form-actions 包裹的标准做法) */
|
||||||
|
.form-actions :deep(.el-form-item__label) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.form-actions :deep(.el-form-item__content) {
|
||||||
|
margin-left: 0 !important;
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user