From f51dfda0736fd91d0429d15cc187e8091ef38dfb Mon Sep 17 00:00:00 2001
From: chenghuan <chenghuanv587@qq.com>
Date: Tue, 17 Mar 2026 15:32:47 +0800
Subject: [PATCH] =?UTF-8?q?style(=E7=BB=9F=E8=AE=A1=E4=B8=9A=E5=8A=A1):=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96VIP=E7=BB=9F=E8=AE=A1=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为所有VIP统计页面的表格添加了统一的类名以便于样式管理
- 调整表格的最小高度，确保在不同数据情况下的显示效果
- 修改统计卡片的布局，采用flex布局以提高响应式表现
- 移除不必要的overflow属性，简化样式结构
---
 .../vipStatistics/allVip.vue                  | 20 +++++++++++----
 .../vipStatistics/expiresStatisticsBase.vue   | 20 +++++++++++----
 .../vipStatistics/monthVip.vue                | 25 ++++++++++++-------
 .../vipStatistics/yearVip.vue                 |  8 +++---
 4 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/src/views/modules/statisticsBusiness/vipStatistics/allVip.vue b/src/views/modules/statisticsBusiness/vipStatistics/allVip.vue
index 66b7463..478c426 100644
--- a/src/views/modules/statisticsBusiness/vipStatistics/allVip.vue
+++ b/src/views/modules/statisticsBusiness/vipStatistics/allVip.vue
@@ -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>
diff --git a/src/views/modules/statisticsBusiness/vipStatistics/expiresStatisticsBase.vue b/src/views/modules/statisticsBusiness/vipStatistics/expiresStatisticsBase.vue
index c0ede97..0ce0df3 100644
--- a/src/views/modules/statisticsBusiness/vipStatistics/expiresStatisticsBase.vue
+++ b/src/views/modules/statisticsBusiness/vipStatistics/expiresStatisticsBase.vue
@@ -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>
diff --git a/src/views/modules/statisticsBusiness/vipStatistics/monthVip.vue b/src/views/modules/statisticsBusiness/vipStatistics/monthVip.vue
index 923b0e4..20745fb 100644
--- a/src/views/modules/statisticsBusiness/vipStatistics/monthVip.vue
+++ b/src/views/modules/statisticsBusiness/vipStatistics/monthVip.vue
@@ -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;
   }
 }
 
diff --git a/src/views/modules/statisticsBusiness/vipStatistics/yearVip.vue b/src/views/modules/statisticsBusiness/vipStatistics/yearVip.vue
index a93c656..b3e6d1c 100644
--- a/src/views/modules/statisticsBusiness/vipStatistics/yearVip.vue
+++ b/src/views/modules/statisticsBusiness/vipStatistics/yearVip.vue
@@ -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 {