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:
2026-08-26 18:43:03 +08:00
parent 88c5f58548
commit 84c46b9312
13 changed files with 162 additions and 40 deletions
+11 -5
View File
@@ -165,8 +165,8 @@
/></el-form-item>
</section-card>
<div class="receipt-claim-form-page__actions">
<el-button type="primary" :loading="submitting" @click="submitClaim">确认</el-button
><el-button :disabled="submitting" @click="goBack">取消</el-button>
<el-button :disabled="submitting" @click="goBack">取消</el-button>
<el-button type="primary" :loading="submitting" @click="submitClaim">确认</el-button>
</div>
</el-form>
@@ -471,9 +471,15 @@ export default {
}
.receipt-claim-form-page__actions {
display: flex;
justify-content: center;
gap: 8px;
padding: 16px 0 8px;
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.receipt-claim-form-page__dialog-search {
display: flex;