b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(ui): 统一 payment 和 settlement 模块浮动底栏为 fixed 定位

Browse Source 
- payment 模块所有表单页底栏按钮顺序及布局全量对齐，取消居中改为右对齐浮动
- settlement 模块弹窗及独立页 footer 添加 sticky 浮动，主操作按钮样式调整为 plain
- 彻底修复浮动底栏不吸底问题，所有相关 footer 由 position: sticky 改为 position: fixed
- 统一 fixed 底栏样式模板，包含左偏移支持侧栏折叠和横向布局切换
- 更新项目文档，明确浮动底栏必须用 fixed 定位，避免 overflow:hidden 祖先导致 sticky 失效
- 清理所有残留 sticky 样式，确保底栏始终固定在视口底部，提升用户体验
This commit is contained in:
赵忠林
2026-08-26 18:49:13 +08:00
parent 84c46b9312
commit 7f70052afd
12 changed files with 176 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/payment/bill-ledger-form.vue
+10 -1
View File
@@ -594,13 +594,22 @@ export default {
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: sticky;
position: fixed;
right: 0;
left: 230px;
bottom: 0;
margin: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
:global(.avue--collapse .bill-ledger-form-page__actions) {
left: 60px;
}
:global(.avue-layout--horizontal .bill-ledger-form-page__actions) {
left: 0;
}
.bill-ledger-form-page :deep(.el-table) {
--el-table-border-color: #eff1f7;
}
src/views/payment/bill-payment-form.vue
+10 -1
View File
@@ -401,13 +401,22 @@ export default {
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: sticky;
position: fixed;
right: 0;
left: 230px;
bottom: 0;
margin: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
:global(.avue--collapse .bill-payment-form-page__actions) {
left: 60px;
}
:global(.avue-layout--horizontal .bill-payment-form-page__actions) {
left: 0;
}
.bill-payment-form-page__dialog-search {
display: flex;
justify-content: flex-end;
src/views/payment/invoice-application-form.vue
+10 -1
View File
@@ -982,13 +982,22 @@ export default {
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: sticky;
position: fixed;
right: 0;
left: 230px;
bottom: 0;
margin: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
:global(.avue--collapse .invoice-form-page__actions) {
left: 60px;
}
:global(.avue-layout--horizontal .invoice-form-page__actions) {
left: 0;
}
.invoice-form-page__attachment-upload {
display: flex;
justify-content: flex-start;
src/views/payment/invoice-receipt-form.vue
+10 -1
View File
@@ -779,13 +779,22 @@ export default {
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: sticky;
position: fixed;
right: 0;
left: 230px;
bottom: 0;
margin: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
:global(.avue--collapse .receipt-form-page__actions) {
left: 60px;
}
:global(.avue-layout--horizontal .receipt-form-page__actions) {
left: 0;
}
.receipt-form-page__dialog-search {
display: flex;
justify-content: flex-end;
src/views/payment/payment-application-form.vue
+10 -1
View File
@@ -1285,13 +1285,22 @@ export default {
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: sticky;
position: fixed;
right: 0;
left: 230px;
bottom: 0;
margin: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
:global(.avue--collapse .payment-form-page__actions) {
left: 60px;
}
:global(.avue-layout--horizontal .payment-form-page__actions) {
left: 0;
}
.payment-form-page__section-actions {
display: flex;
justify-content: flex-end;
src/views/payment/receipt-claim-record-form.vue
+10 -1
View File
@@ -315,13 +315,22 @@ export default {
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: sticky;
position: fixed;
right: 0;
left: 230px;
bottom: 0;
margin: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
:global(.avue--collapse .claim-record-form-page__actions) {
left: 60px;
}
:global(.avue-layout--horizontal .claim-record-form-page__actions) {
left: 0;
}
.claim-record-form-page__links {
display: flex;
justify-content: center;
src/views/payment/receipt-flow-form.vue
+10 -1
View File
@@ -474,13 +474,22 @@ export default {
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: sticky;
position: fixed;
right: 0;
left: 230px;
bottom: 0;
margin: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
:global(.avue--collapse .receipt-claim-form-page__actions) {
left: 60px;
}
:global(.avue-layout--horizontal .receipt-claim-form-page__actions) {
left: 0;
}
.receipt-claim-form-page__dialog-search {
display: flex;
justify-content: flex-end;