“用户管理”页面，响应式调整

main/manager-web/src/views/UserManagement.vue

@@ -16,7 +16,7 @@
         <div class="content-area">
           <el-card class="user-card" shadow="never">
             <el-table ref="userTable" :data="userList" class="transparent-table"
-              :header-cell-class-name="headerCellClassName" :max-height="tableMaxHeight">
+              :header-cell-class-name="headerCellClassName">
               <el-table-column label="选择" type="selection" align="center" width="120"></el-table-column>
               <el-table-column label="用户Id" prop="userid" align="center"></el-table-column>
               <el-table-column label="手机号码" prop="mobile" align="center"></el-table-column>
@@ -101,7 +101,6 @@ export default {
       currentPage: 1,
       pageSize: 5,
       total: 0,
-      tableMaxHeight: 410,
       isAllSelected: false
     };
   },
@@ -361,6 +360,7 @@ export default {
   background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd) center;
   -webkit-background-size: cover;
   -o-background-size: cover;
+  overflow: hidden;
 }
 
 .main-wrapper {
@@ -368,6 +368,7 @@ export default {
   border-radius: 15px;
   min-height: calc(100vh - 350px);
   height: auto;
+  max-height: 80vh;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
   background: rgba(237, 242, 255, 0.5);
@@ -419,12 +420,18 @@ export default {
   min-width: 600px;
   overflow-x: auto;
   background-color: white;
+  display: flex;
+  flex-direction: column;
 }
 
 .user-card {
   background: white;
   border: none;
   box-shadow: none;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
 }
 
 .table_bottom {
@@ -556,6 +563,19 @@ export default {
 
 :deep(.transparent-table) {
   background: white;
+  flex: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .el-table__body-wrapper {
+    flex: 1;
+    overflow: auto;
+    max-height: none !important;
+  }
+
+  .el-table__header-wrapper {
+    flex-shrink: 0;
+  }
 
   .el-table__header th {
     background: white !important;
@@ -653,4 +673,14 @@ export default {
   }
 }
 
+.el-table {
+  --table-max-height: calc(100vh - 400px);
+  max-height: var(--table-max-height);
+
+  .el-table__body-wrapper {
+    max-height: calc(var(--table-max-height) - 40px);
+  }
+}
+
+
 </style>