style(customer-archive): 统一客户档案页及弹窗底部按钮样式与对齐规则
- 按新制定的项目模块按钮底栏标准调整 customer-archive 页面及相关弹窗的 footer 样式 - 修改按钮顺序及样式,确保返回/取消居左,保存按钮为蓝描边 plain,提交和主操作按钮为深蓝实心 - 将子弹窗按钮容器对齐方式由居中改为 flex-end,统一右对齐布局 - 删除底部按钮 success 绿样式,全部主操作使用深蓝实心 primary 样式 - 调整部分按钮显示逻辑及文本,增强阅读顺序和视觉层级感 - 更新 SCSS 样式以匹配新布局和对齐规则 - 调整全局输入框及下拉框 placeholder 颜色,加深至 #909399 保持视觉一致性 - 在 MEMORY.md
This commit is contained in:
@@ -39,15 +39,22 @@
|
||||
### 弹窗 / 独立表单页底栏按钮统一规则
|
||||
- **排序**:从左到右按次→主排(次要居左、主操作居右),主操作永远放最后。
|
||||
- 顺序模板:`[可选辅助工具(如同步/导入)][返回/取消][保存草稿][提交/确认]`
|
||||
- **容器布局**:`display:flex; justify-content:flex-end; gap:12px;`。弹窗关闭按钮继承 Element Plus 自带 `.el-dialog__footer` 全局规则(见上条),独立页用 `.archive-form__footer` 配 `.archive-page-form & { position:fixed; right:0; left:230px; bottom:0; z-index:10; margin:0; padding:12px 24px; border-top:1px solid #eff1f7; background:#fff; box-shadow:0 -2px 8px rgba(0,0,0,.06); }`。
|
||||
- **颜色层级 3 档**:
|
||||
| 语义 | type | 备注 |
|
||||
| --- | --- | --- |
|
||||
| 次要(返回 / 取消) | 不写 type(默认) | 灰描边 |
|
||||
| 中间步骤(保存草稿 / 按匹配结果更新等) | `type="primary" plain` | 蓝描边 |
|
||||
| 主操作(提交 / 完成对账 / 确认) | `type="primary"` | 蓝实心 |
|
||||
- **禁区**:保存草稿和主操作不允许同为 `type="primary"`,否则两个蓝实心按钮无视觉层级。
|
||||
- **生效页面**:`business/project-apply.vue`(footer + 变更 footer)、`payment/invoice-receipt-form.vue`、`payment/invoice-application-form.vue`。
|
||||
- **已合规不需要改**:`settlement/components/pre-settlement-editor.vue`(保存 default + 提交 primary)、`settlement/components/transport-reconciliation-editor.vue`(两个 plain 中间步骤 + 完成对账 实心)。
|
||||
| 次要(返回 / 取消 / 关闭) | 不写 type(默认) | 灰描边 |
|
||||
| 中间步骤(保存草稿 / 按匹配结果更新) | `type="primary" plain` | 蓝描边 |
|
||||
| 主操作(提交 / 完成对账 / 复评确认) | `type="primary"` | 蓝实心 |
|
||||
- **禁区**:
|
||||
- 保存草稿和主操作不允许同为 `type="primary"`,否则两个蓝实心无视觉层级。
|
||||
- 主操作禁止用 `type="success"`(绿)。全站统一深蓝实心。
|
||||
- **生效页面**:
|
||||
- `business/project-apply.vue`(footer + 变更 footer)
|
||||
- `payment/invoice-receipt-form.vue`、`payment/invoice-application-form.vue`
|
||||
- `vehicle/customer-archive.vue` 全部 5 处 footer(`archive-form__footer` 主表单页 + `contact-dialog`/`receipt-dialog`/`invoice-dialog` 子弹窗 + `score-detail-dialog` 含总分合计)
|
||||
- **已合规未动**:`settlement/components/pre-settlement-editor.vue`、`settlement/components/transport-reconciliation-editor.vue`、`business/components/business-crud-page.vue`(保存 plain)、`business/temporary-credit-limit.vue`。
|
||||
- **复杂 footer 例外**:当 footer 需要在按钮组左侧展示「总分合计 / 数量统计」等聚合信息时,块用 `flex:1` 推自己到最左,按钮组按上述规则排在右半边(参考 `score-detail-dialog`)。
|
||||
|
||||
## 关键文件
|
||||
- `src/components/section-card/main.vue`
|
||||
|
||||
Reference in New Issue
Block a user