From eec65a74525835292e80f9a42870e26ae463fd6c Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Wed, 29 Oct 2025 16:20:18 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A3=85=E5=A4=87=E9=80=80=E5=BD=B9=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/EquipmentRetire/index.vue | 159 ++++++++++++++++++++++++++--
 1 file changed, 153 insertions(+), 6 deletions(-)

diff --git a/src/views/EquipmentRetire/index.vue b/src/views/EquipmentRetire/index.vue
index 3ed59557..a300c44a 100644
--- a/src/views/EquipmentRetire/index.vue
+++ b/src/views/EquipmentRetire/index.vue
@@ -3,6 +3,7 @@
   <div class="app-container">
     <el-row>
       <el-form ref="queryForm" size="small" label-width="auto" :model="queryParams">
+        <el-card class="search-box">
         <el-row :gutter="10" style="display: flex; justify-content: space-between">
           <el-col>
             <el-form-item prop="name">
@@ -77,20 +78,27 @@
         </el-row>
 
         <el-row>
-          <el-col style="text-align: left">
+          <el-col style="text-align: right;">
             <el-button type="primary" icon="el-icon-search" size="mini" @click="onHandleQuery">
               查询
             </el-button>
-            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="onHandleReset">重置</el-button>
-            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="onHandleBatchRetire" style="float: right;margin-right: 25px">批量退役</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="onHandleReset">重置</el-button>
 
           </el-col>
 
 
         </el-row>
+        </el-card>
       </el-form>
 
-      <el-table :data="tableData" style="width: 100%">
+      <el-card class="content-box">
+        <el-row>
+          <el-col :span="24" style="text-align: right;">
+            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="onHandleBatchRetire">批量退役</el-button>
+          </el-col>
+        </el-row>
+        <div class="table-container">
+      <el-table :data="tableData" style="width: 100%" border stripe height="100%">
         <el-table-column align="center" show-overflow-tooltip type="index" label="序号" width="50"/>
         <el-table-column align="center" show-overflow-tooltip prop="propertyUnit" label="单位名称"/>
         <el-table-column align="center" show-overflow-tooltip prop="name" label="装备名称"/>
@@ -135,13 +143,16 @@
           </template>
         </el-table-column>
       </el-table>
-
+      </div>
+      <div class="pagination-wrapper">
       <pagination
         :total="total"
         :page.sync="queryParams.pageNum"
         :limit.sync="queryParams.pageSize"
         @pagination="getRetireList"
       />
+      </div>
+    </el-card>
     </el-row>
   </div>
 </template>
@@ -277,9 +288,145 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
 
 .red {
   color: red;
 }
+
+.search-box {
+  margin-bottom: 20px;
+  border-radius: 8px;
+  padding: 0;
+}
+
+.content-box {
+  border-radius: 8px;
+  height: calc(100vh - 260px);
+  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;
+    }
+  }
+}
+.dialog-table {
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  
+  ::v-deep .el-table {
+    border-radius: 6px;
+    overflow: hidden;
+    
+    // 启用斑马纹
+    &.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: 45px;
+        font-size: 14px;
+        border-bottom: 2px solid #e4e7ed;
+      }
+    }
+
+    .el-table__body {
+      tr {
+        transition: all 0.2s ease;
+        
+        &:hover {
+          background-color: #f8f9fa;
+        }
+        
+        td {
+          padding: 12px 8px;
+          font-size: 13px;
+          border-bottom: 1px solid #f0f2f5;
+        }
+      }
+    }
+
+    &.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
+      background-color: #CCF1E9 !important;
+    }
+    
+    // 表格边框优化
+    &::before {
+      display: none;
+    }
+    
+    &::after {
+      display: none;
+    }
+  }
+}
 </style>