style(统计业务): 优化VIP统计页面表格样式和布局
- 为所有VIP统计页面的表格添加了统一的类名以便于样式管理 - 调整表格的最小高度,确保在不同数据情况下的显示效果 - 修改统计卡片的布局,采用flex布局以提高响应式表现 - 移除不必要的overflow属性,简化样式结构
This commit is contained in:
@@ -43,6 +43,7 @@
|
||||
|
||||
<div ref="tableContainer" class="table-container">
|
||||
<el-table
|
||||
class="statistics-table"
|
||||
:data="dataList"
|
||||
border
|
||||
:header-cell-style="{ textAlign: 'center', padding: '6px 0' }"
|
||||
@@ -245,11 +246,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;
|
||||
}
|
||||
|
||||
.all-vip-statistics {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
height: calc(100vh - 220px);
|
||||
}
|
||||
|
||||
.summary-section,
|
||||
@@ -273,12 +282,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;
|
||||
@@ -309,7 +321,6 @@ export default {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
@@ -327,6 +338,5 @@ export default {
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -61,6 +61,7 @@
|
||||
|
||||
<div ref="tableContainer" class="table-container">
|
||||
<el-table
|
||||
class="statistics-table"
|
||||
:data="dataList"
|
||||
border
|
||||
:header-cell-style="{ textAlign: 'center', padding: '6px 0' }"
|
||||
@@ -225,11 +226,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;
|
||||
}
|
||||
|
||||
.month-vip-statistics {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
height: calc(100vh - 220px);
|
||||
}
|
||||
|
||||
.query-section,
|
||||
@@ -249,8 +258,8 @@ export default {
|
||||
.summary-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 260px;
|
||||
width: 260px;
|
||||
flex: 1 1 180px;
|
||||
width: 180px;
|
||||
min-height: 190px;
|
||||
padding: 16px;
|
||||
border: 1px solid #ebeef5;
|
||||
@@ -260,8 +269,8 @@ export default {
|
||||
}
|
||||
|
||||
.summary-card--two-columns {
|
||||
flex-basis: 360px;
|
||||
width: 360px;
|
||||
flex-basis: 280px;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.summary-card__title {
|
||||
@@ -306,7 +315,6 @@ export default {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
@@ -324,13 +332,12 @@ export default {
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 1680px) {
|
||||
.summary-card {
|
||||
flex-basis: 240px;
|
||||
width: 240px;
|
||||
flex-basis: 170px;
|
||||
width: 170px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -265,8 +265,8 @@ export default {
|
||||
|
||||
.summary-card {
|
||||
display: flex;
|
||||
flex: 1 1 260px;
|
||||
width: 260px;
|
||||
flex: 1 1 180px;
|
||||
width: 180px;
|
||||
flex-direction: column;
|
||||
min-height: 180px;
|
||||
padding: 16px;
|
||||
@@ -277,8 +277,8 @@ export default {
|
||||
}
|
||||
|
||||
.summary-card--two-columns {
|
||||
flex-basis: 360px;
|
||||
width: 360px;
|
||||
flex-basis: 280px;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.summary-card__title {
|
||||
|
||||
Reference in New Issue
Block a user