装备配置样式修改

src/views/address-manage/index.vue

@@ -7,25 +7,28 @@
       ref="searchFormRef"
       :model="searchParams"
     >
-      <el-form-item>
+    </el-form>
-        <el-button
+
+    <el-card class="content-box">
+      <el-row>
+        <el-col :span="24" style="text-align: right;">
+          <el-button
           @click="handleAddAddress"
           type="primary"
           class="primary-lease"
         >
           新建收货地址
         </el-button>
-      </el-form-item>
+        </el-col>
-    </el-form>
+      </el-row>
-
+      <div class="table-container">
     <!-- 表格 -->
     <el-table
       :data="leaseList"
       show-overflow-tooltip
-      :header-cell-style="{
+      border
-                color: '#fff',
+      stripe
-                background: '#00a288',
+      height="100%"
-            }"
     >
       <el-table-column align="center" label="序号" type="index" width="80" />
       <el-table-column align="center" label="收货地址">
@@ -46,15 +49,17 @@
         </template>
       </el-table-column>
     </el-table>
+    </div>
     
-
+    <div class="pagination-wrapper">
     <pagination
       :total="total"
       @pagination="getLeaseListData"
       :page.sync="searchParams.pageNum"
       :limit.sync="searchParams.pageSize"
     />
-
+    </div>
+  </el-card>
     <!-- 新增修改对话框 -->
     <el-dialog
       width="40%"
@@ -432,5 +437,100 @@ export default {
     }
   }
 }
+
+::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;
+    }
+  }
+
+  .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>
 

src/views/rent-facility/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="equipment-table">
     <h2 class="title">机械化机械化施工装备配置率</h2>
-
+    <el-card class="content-box">
     <div v-if="!showSecondPage">
       <el-table
         :data="tableData"
@@ -41,6 +41,7 @@
         </el-table-column>
       </el-table>
     </div>
+    </el-card>
 
 <!--    <Line
       v-if="showSecondPage"
@@ -195,6 +196,7 @@ export default {
   text-align: center;
 }
 
+
 ::v-deep .el-table {
     // 启用斑马纹
     &.el-table--striped .el-table__body {