style(footer): 统一多页面底栏按钮样式与排序规则
- 规范 master-order-editor.vue 底栏按钮类型及排序,按钮层级清晰 - 调整 payment-application-form.vue 底栏按钮样式为右对齐并浮动底部 - 统一 invoice-application/receipt-form 页底栏按钮顺序,返回按钮置首 - 所有相关表单页按钮底栏统一采用 sticky 浮动,背景及阴影样式一致 - 修复多个页面按钮缺少 plain 样式导致视觉层级不明 - 按钮间距统一为 12px,底栏内边距调整为 12px 24px - 调整多个表单页面按钮组从居中对齐改为右对齐,提升操作一致性 - 保留弹窗 footer 按钮布局,不影响各页面独立弹窗交互体验
This commit is contained in:
@@ -54,6 +54,10 @@
|
||||
- `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` 含总分合计)
|
||||
- `business/components/business-crud-page.vue` 的 PageAvueForm 独立表单页(`#menu-form-before` slot 新增 `关闭` 按钮,紧跟运费合计、置于保存草稿之前;shipping-template 模式验证通过)
|
||||
- `business/components/master-order-editor.vue` 主 `<footer>`(返回 default + 暂存/确认创建 plain + 创建并调度 primary;footer 用 `position:sticky; bottom:0` 浮动底部)
|
||||
- `payment/payment-application-form.vue` `.payment-form-page__actions`(返回 default + 保存 plain + 提交 primary;footer `justify-content:flex-end` + `position:sticky` 浮动底部)
|
||||
- `payment/invoice-application-form.vue` `.invoice-form-page__actions`(`[返回][同步][保存][提交]`,返回置首 + 提交深蓝;footer 右对齐浮动)
|
||||
- `payment/invoice-receipt-form.vue` `.receipt-form-page__actions`(同上,与发票申请同款结构)
|
||||
- **已合规未动**:`settlement/components/pre-settlement-editor.vue`、`settlement/components/transport-reconciliation-editor.vue`、`business/temporary-credit-limit.vue`。
|
||||
- **Avue-form footer 结构注意**:`#menu-form-before` slot 内容在 Avue 内置按钮之**左**;`#menu-form` slot 在 Avue 内置按钮之**右**。要实现 `[次要][Avue 主操作]` 顺序,把次要按钮放进 `#menu-form-before`,主操作保留 Avue 内置即可。
|
||||
- **复杂 footer 例外**:当 footer 需要在按钮组左侧展示「总分合计 / 数量统计」等聚合信息时,块用 `flex:1` 推自己到最左,按钮组按上述规则排在右半边(参考 `score-detail-dialog`)。
|
||||
|
||||
Reference in New Issue
Block a user