style(customer-archive): 统一客户档案页及弹窗底部按钮样式与对齐规则
- 按新制定的项目模块按钮底栏标准调整 customer-archive 页面及相关弹窗的 footer 样式 - 修改按钮顺序及样式,确保返回/取消居左,保存按钮为蓝描边 plain,提交和主操作按钮为深蓝实心 - 将子弹窗按钮容器对齐方式由居中改为 flex-end,统一右对齐布局 - 删除底部按钮 success 绿样式,全部主操作使用深蓝实心 primary 样式 - 调整部分按钮显示逻辑及文本,增强阅读顺序和视觉层级感 - 更新 SCSS 样式以匹配新布局和对齐规则 - 调整全局输入框及下拉框 placeholder 颜色,加深至 #909399 保持视觉一致性 - 在 MEMORY.md
This commit is contained in:
@@ -146,3 +146,40 @@ vehicle/driver/ship 与 customer-archive 等本就是 14px(含 !important)
|
||||
- `settlement/components/transport-reconciliation-editor.vue` — 两个 plain 中间步骤 + 完成对账 实心,层级清晰。
|
||||
|
||||
**沉淀**: `MEMORY.md` 新增「弹窗 / 独立表单页底栏按钮统一规则」一节,作为新页面 footer 写法标准。
|
||||
|
||||
## customer-archive 全部 footer 同步按新增项目模块标准对齐
|
||||
|
||||
**问题**: 主人指出客户档案页面 `/vehicle/customer-archive/form?name=新增客商档案` 没有按统一规则调整,
|
||||
并明确要求「浮动页面底部、按钮区域靠右对齐,返回在第一个,中间的用浅蓝色,最后一个是 primary 深蓝色」,
|
||||
参考新增项目模块 `/business/project-apply/form?mode=add`。
|
||||
|
||||
### customer-archive.vue 共 5 处 footer 改动
|
||||
|
||||
- `archive-form__footer` (802-809) 原状「取消/返回 + 保存 primary + 提交 success 绿」混合 4 按钮。改为 `[返回/取消/关闭] + 保存 plain + 提交 primary`,并删掉「success 绿」换成 primary 深蓝。
|
||||
- `contact-dialog` (867-870) 原状 `[保存 primary][返回]`,容器居中。改为 `[返回][保存 plain]`,容器 flex-end。
|
||||
- `receipt-dialog` (965-969) 同上模式。
|
||||
- `invoice-dialog` (1085-1089) 同上模式。
|
||||
- `score-detail-dialog` (1343-1359) 原状 total 左 + `[保存 primary][复评确认 primary][返回]`。改为 total 左 + `[返回][保存 plain][复评确认 primary]`。
|
||||
|
||||
### customer-archive.vue SCSS 同步
|
||||
|
||||
- `.contact-dialog__footer-actions` `justify-content: center` 改 `flex-end`。
|
||||
- `.receipt-dialog__footer-actions` 同上。
|
||||
- `.invoice-dialog__footer-actions` 同上。
|
||||
- `.archive-form__footer` 维持 flex-end 不变(独立页 `.archive-page-form &` 下 `position: fixed` 浮动底部已经写好)。
|
||||
|
||||
### 顺序小结(标准模板)
|
||||
|
||||
```vue
|
||||
<div class="xxx-dialog__footer-actions">
|
||||
<!-- 最左:信息聚合(如总分合计、统计)用 flex:1 自己推 -->
|
||||
<!-- 次要:默认描边灰按钮 -->
|
||||
<el-button @click="close">返回</el-button>
|
||||
<!-- 中间:浅蓝实心 plain -->
|
||||
<el-button type="primary" plain @click="saveDraft">保存</el-button>
|
||||
<!-- 主操作:蓝实心 -->
|
||||
<el-button type="primary" @click="submit">提交</el-button>
|
||||
</div>
|
||||
```
|
||||
|
||||
左→右阅读顺序:辅助信息聚合 → 次要 → 中间步骤 → 主操作。视觉权重递增,颜色从「灰 → 蓝描边 → 蓝实心」。
|
||||
|
||||
Reference in New Issue
Block a user