style: 表格底部按钮边距统一调整

This commit is contained in:
zhuoqinglian
2026-03-17 10:30:43 +08:00
parent 2ac7e5be9c
commit 818ac1eefb
9 changed files with 110 additions and 73 deletions
@@ -587,7 +587,7 @@ export default {
justify-content: space-between !important; justify-content: space-between !important;
align-items: center; align-items: center;
margin-top: auto; margin-top: auto;
padding: 0 20px 15px !important; padding: 0 20px !important;
width: 100% !important; width: 100% !important;
box-sizing: border-box !important; box-sizing: border-box !important;
} }
+41 -23
View File
@@ -48,7 +48,7 @@
<el-table ref="dictDataTable" :data="dictDataList" style="width: 100%" <el-table ref="dictDataTable" :data="dictDataList" style="width: 100%"
v-loading="dictDataLoading" element-loading-text="拼命加载中" v-loading="dictDataLoading" element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading" element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.7)" class="data-table" element-loading-background="rgba(255, 255, 255, 0.7)" class="transparent-table"
header-row-class-name="table-header"> header-row-class-name="table-header">
<el-table-column :label="$t('modelConfig.select')" align="center" width="70"> <el-table-column :label="$t('modelConfig.select')" align="center" width="70">
<template slot-scope="scope"> <template slot-scope="scope">
@@ -463,9 +463,7 @@ export default {
.main-wrapper { .main-wrapper {
margin: 5px 22px; margin: 5px 22px;
border-radius: 15px; border-radius: 15px;
min-height: calc(100vh - 24vh); height: 80vh;
height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);
@@ -555,13 +553,14 @@ export default {
.content-area { .content-area {
flex: 1; flex: 1;
padding: 24px; padding: 24px 24px 0;
height: 100%; height: 100%;
min-width: 600px; min-width: 600px;
overflow: hidden; overflow: hidden;
background-color: white; background-color: white;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-sizing: border-box;
} }
.dict-data-card { .dict-data-card {
@@ -574,31 +573,51 @@ export default {
overflow: hidden; overflow: hidden;
} }
.data-table { :deep(.transparent-table) {
border-radius: 6px; background: white;
overflow-y: hidden; flex: 1;
background-color: transparent !important; width: 100%;
--table-max-height: calc(100vh - 40vh); display: flex;
max-height: var(--table-max-height); flex-direction: column;
:deep(.el-table__body-wrapper) { .el-table__body-wrapper {
max-height: calc(var(--table-max-height) - 40px); flex: 1;
overflow-y: auto; overflow-y: auto;
max-height: none !important;
} }
:deep(.el-table__body) { .el-table__header-wrapper {
tr:last-child td { flex-shrink: 0;
border-bottom: none; }
.el-table__header th {
background: white !important;
color: black;
font-weight: 600;
height: 40px;
padding: 8px 0;
font-size: 14px;
border-bottom: 1px solid #e4e7ed;
}
.el-table__body tr {
background-color: white;
td {
border-top: 1px solid rgba(0, 0, 0, 0.04);
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
padding: 8px 0;
height: 40px;
color: #606266;
font-size: 14px;
} }
} }
}
:deep(.el-table) { .el-table__row:hover>td {
&::before { background-color: #f5f7fa !important;
display: none;
} }
&::after { &::before {
display: none; display: none;
} }
} }
@@ -607,7 +626,6 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 16px 0;
width: 100%; width: 100%;
flex-shrink: 0; flex-shrink: 0;
min-height: 60px; min-height: 60px;
@@ -889,7 +907,7 @@ export default {
} }
:deep(.el-card__body) { :deep(.el-card__body) {
padding: 15px; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
@@ -555,7 +555,6 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: auto; margin-top: auto;
padding-bottom: 10px;
width: 100%; width: 100%;
} }
+61 -38
View File
@@ -69,7 +69,7 @@
element-loading-background="rgba(255, 255, 255, 0.7)" element-loading-background="rgba(255, 255, 255, 0.7)"
:header-cell-style="{ background: 'transparent' }" :header-cell-style="{ background: 'transparent' }"
:data="modelList" :data="modelList"
class="data-table" class="transparent-table"
header-row-class-name="table-header" header-row-class-name="table-header"
:header-cell-class-name="headerCellClassName" :header-cell-class-name="headerCellClassName"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
@@ -637,7 +637,7 @@ export default {
}; };
</script> </script>
<style scoped> <style lang="scss" scoped>
.el-switch { .el-switch {
height: 23px; height: 23px;
} }
@@ -662,9 +662,7 @@ export default {
.main-wrapper { .main-wrapper {
margin: 5px 22px; margin: 5px 22px;
border-radius: 15px; border-radius: 15px;
min-height: calc(100vh - 26vh); height: 80vh;
height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
background: rgba(237, 242, 255, 0.5); background: rgba(237, 242, 255, 0.5);
@@ -752,13 +750,14 @@ export default {
.content-area { .content-area {
flex: 1; flex: 1;
padding: 24px; padding: 24px 24px 0;
height: 100%; height: 100%;
min-width: 600px; min-width: 600px;
overflow: hidden; overflow: hidden;
background-color: white; background-color: white;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-sizing: border-box;
} }
.action-group { .action-group {
@@ -843,15 +842,15 @@ export default {
outline: none; outline: none;
} }
.data-table { // .data-table {
border-radius: 6px; // border-radius: 6px;
overflow: hidden; // overflow: hidden;
background-color: transparent !important; // background-color: transparent !important;
} // }
.data-table /deep/ .el-table__row { // .data-table ::v-deep .el-table__row {
background-color: transparent !important; // background-color: transparent !important;
} // }
.table-header th { .table-header th {
background-color: transparent !important; background-color: transparent !important;
@@ -863,7 +862,7 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 16px 0; // padding: 16px 0;
width: 100%; width: 100%;
flex-shrink: 0; flex-shrink: 0;
min-height: 60px; min-height: 60px;
@@ -918,7 +917,7 @@ export default {
background: linear-gradient(135deg, #3a8ee6, #5a7cff); background: linear-gradient(135deg, #3a8ee6, #5a7cff);
} }
.el-table th /deep/ .el-table__cell { .el-table th ::v-deep .el-table__cell {
overflow: hidden; overflow: hidden;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
@@ -966,21 +965,6 @@ export default {
color: #fff !important; color: #fff !important;
} }
::v-deep .data-table {
&.el-table::before,
&.el-table::after,
&.el-table__inner-wrapper::before {
display: none !important;
}
}
::v-deep .data-table .el-table__header-wrapper {
border-bottom: 1px solid rgb(224, 227, 237);
}
::v-deep .data-table .el-table__body td {
border-bottom: 1px solid rgb(224, 227, 237) !important;
}
.el-button img { .el-button img {
height: 1em; height: 1em;
@@ -1118,16 +1102,55 @@ export default {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
} }
:deep(.transparent-table) {
background: white;
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
.data-table { .el-table__body-wrapper {
--table-max-height: calc(100vh - 45vh); flex: 1;
max-height: var(--table-max-height); overflow-y: auto;
max-height: none !important;
}
.el-table__header-wrapper {
flex-shrink: 0;
}
.el-table__header th {
background: white !important;
color: black;
font-weight: 600;
height: 40px;
padding: 8px 0;
font-size: 14px;
border-bottom: 1px solid #e4e7ed;
}
.el-table__body tr {
background-color: white;
td {
border-top: 1px solid rgba(0, 0, 0, 0.04);
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
padding: 8px 0;
height: 40px;
color: #606266;
font-size: 14px;
}
}
.el-table__row:hover>td {
background-color: #f5f7fa !important;
}
&::before {
display: none;
}
} }
.data-table ::v-deep .el-table__body-wrapper {
max-height: calc(var(--table-max-height) - 80px);
overflow-y: auto;
}
::v-deep .el-loading-mask { ::v-deep .el-loading-mask {
background-color: rgba(255, 255, 255, 0.6) !important; background-color: rgba(255, 255, 255, 0.6) !important;
+1 -2
View File
@@ -505,7 +505,6 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 10px; margin-top: 10px;
padding-bottom: 10px;
} }
.ctrl_btn { .ctrl_btn {
@@ -735,7 +734,7 @@ export default {
} }
.el-table { .el-table {
--table-max-height: calc(100vh - 40vh); // --table-max-height: calc(100vh - 40vh);
max-height: var(--table-max-height); max-height: var(--table-max-height);
.el-table__body-wrapper { .el-table__body-wrapper {
@@ -464,7 +464,7 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 10px; margin-top: 10px;
padding-bottom: 10px; // padding-bottom: 10px;
} }
.ctrl_btn { .ctrl_btn {
@@ -712,7 +712,7 @@ export default {
} }
.el-table { .el-table {
--table-max-height: calc(100vh - 40vh); // --table-max-height: calc(100vh - 40vh);
max-height: var(--table-max-height); max-height: var(--table-max-height);
.el-table__body-wrapper { .el-table__body-wrapper {
@@ -721,7 +721,7 @@ export default {
} }
.el-table { .el-table {
--table-max-height: calc(100vh - 40vh); // --table-max-height: calc(100vh - 40vh);
max-height: var(--table-max-height); max-height: var(--table-max-height);
.el-table__body-wrapper { .el-table__body-wrapper {
@@ -594,7 +594,6 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 10px; margin-top: 10px;
padding-bottom: 10px;
} }
.ctrl_btn { .ctrl_btn {
@@ -852,7 +851,7 @@ export default {
.el-table { .el-table {
--table-max-height: calc(100vh - 40vh); --table-max-height: calc(100vh - 40vh);
max-height: var(--table-max-height); // max-height: var(--table-max-height);
.el-table__body-wrapper { .el-table__body-wrapper {
max-height: calc(var(--table-max-height) - 40px); max-height: calc(var(--table-max-height) - 40px);
@@ -864,7 +863,6 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 40px;
} }
:deep(.transparent-table) { :deep(.transparent-table) {
@@ -433,7 +433,7 @@ export default {
overflow: hidden; overflow: hidden;
::v-deep .el-card__body { ::v-deep .el-card__body {
padding: 15px; padding: 15px 15px 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
@@ -676,7 +676,7 @@ export default {
} }
.el-table { .el-table {
--table-max-height: calc(100vh - 40vh); // --table-max-height: calc(100vh - 40vh);
max-height: var(--table-max-height); max-height: var(--table-max-height);
.el-table__body-wrapper { .el-table__body-wrapper {