装备类型配置

src/views/EquipmentTypeConfig/index.vue

@@ -32,17 +32,21 @@
       </el-col>
 
       <!-- 右侧内容区域 -->
-      <el-col :span="collapsed ? 23 : 19">
+      <el-col :span="collapsed ? 23 : 19" style="padding-left: 0;">
+        <el-card class="content-box">
         <!-- 新增按钮区域 -->
         <el-row style="margin-bottom: 10px;">
           <el-col :span="24" style="text-align: right;">
             <el-button type="primary" @click="handleAdd">新增</el-button>
           </el-col>
         </el-row>
-
+        <div class="table-container">
         <el-table
           :data="tableData"
           style="width: 100%"
+          border
+          stripe
+          height="100%"
           :loading="tableLoading"
         >
           <el-table-column align="center" show-overflow-tooltip type="index" label="序号" width="50" />
@@ -75,7 +79,8 @@
             </template>
           </el-table-column>
         </el-table>
-
+        </div>
+        <div class="pagination-wrapper">
         <pagination
           :total="total"
           :page.sync="queryParams.pageNum"
@@ -83,6 +88,8 @@
           @pagination="getDeviceList"
           layout="total, sizes, prev, pager, next, jumper"
         />
+        </div>
+      </el-card>
       </el-col>
     </el-row>
 
@@ -1808,7 +1815,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .app-container {
   padding: 20px;
   background-color: #f5f7fa;
@@ -2168,6 +2175,77 @@ export default {
   background-color: #f0f9ff;
   border-radius: 4px;
 }
+
+.content-box {
+  border-radius: 8px;
+  height: calc(100vh - 120px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  ::v-deep .el-card__body {
+    display: flex !important;
+    flex-direction: column !important;
+    height: 100% !important;
+    padding: 20px;
+  }
+
+  .el-row:first-child {
+    margin-bottom: 16px;
+    flex-shrink: 0;
+
+    .el-col {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 12px;
+    }
+  }
+
+  .table-container {
+    flex: 1;
+    overflow: hidden;
+    margin-bottom: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .pagination-wrapper {
+    flex-shrink: 0;
+    padding-top: 6px;
+    margin-top: auto;
+
+    ::v-deep  .pagination-container {
+      padding: 0px 20px !important;
+      margin-bottom: 30px;
+    }
+  }
+
+  ::v-deep .el-table {
+    // 启用斑马纹
+    &.el-table--striped .el-table__body {
+      tr.el-table__row--striped td {
+        background-color: #F6FBFA !important; // 浅紫色
+      }
+    }
+
+    .el-table__header {
+      background: #E9F0EE;
+
+      th {
+        background: #E9F0EE !important;
+        color: #606266;
+        font-weight: 600;
+        height: 50px;
+      }
+    }
+
+    &.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
+      background-color: #CCF1E9 !important;
+    }
+  }
+}
 </style>
 
 <style>