style(统计业务): 优化VIP统计页面表格样式和布局

- 为所有VIP统计页面的表格添加了统一的类名以便于样式管理
- 调整表格的最小高度,确保在不同数据情况下的显示效果
- 修改统计卡片的布局,采用flex布局以提高响应式表现
- 移除不必要的overflow属性,简化样式结构
This commit is contained in:
2026-03-17 15:32:47 +08:00
parent 6d5bea10a4
commit f51dfda073
4 changed files with 50 additions and 23 deletions

View File

@@ -27,6 +27,7 @@
<div ref="tableContainer" class="table-container">
<el-table
class="statistics-table"
:data="dataList"
border
:header-cell-style="{ textAlign: 'center', padding: '6px 0' }"
@@ -209,11 +210,19 @@ export default {
line-height: 20px;
}
/deep/ .statistics-table {
min-height: 500px;
}
/deep/ .statistics-table .el-table__body-wrapper,
/deep/ .statistics-table .el-table__empty-block {
min-height: 452px;
}
.vip-expires-statistics {
display: flex;
flex-direction: column;
gap: 8px;
height: calc(100vh - 220px);
}
.summary-section,
@@ -227,7 +236,6 @@ export default {
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
}
.section-title {
@@ -238,12 +246,15 @@ export default {
}
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.summary-card {
flex: 1 1 120px;
width: 120px;
min-width: 120px;
padding: 16px;
border: 1px solid #ebeef5;
border-radius: 8px;
@@ -278,6 +289,5 @@ export default {
.table-container {
flex: 1;
overflow: hidden;
}
</style>