装备维保记录表格修改

src/views/EquipmentServicing/index.vue

@@ -9,6 +9,7 @@
       :inline="true"
       label-width="auto" size="small"
     >
+      <el-card class="search-box">
       <el-row :gutter="20" type="flex">
         <el-col :span="6">
           <el-form-item label="装备编码" prop="deviceCode">
@@ -64,19 +65,23 @@
           </el-form-item>
         </el-col>
       </el-row>
+      <el-row>
+        <el-col :span="24" style="text-align: right;">
+          <el-button type="primary" icon="el-icon-search" size="mini" class="primary-lease" @click="onSearch">查询</el-button>
+          <el-button icon="el-icon-refresh" size="mini" class="primary-lease" @click="onReset">重置</el-button>
+        </el-col>
+      </el-row>
       
-      <el-form-item>
+      </el-card>
-        <el-button type="primary" class="primary-lease" @click="onSearch">查询</el-button>
-        <el-button type="primary" class="primary-lease" @click="onReset">重置</el-button>
-      </el-form-item>
     </el-form>
-
+    <el-card class="content-box">
+      <div class="table-container">
     <!-- 维保列表表格 -->
     <el-table
       :data="qualityLis"
       border
+      stripe
       show-overflow-tooltip
-      :header-cell-style="{ color: '#fff', background: '#00a288' }"
     >
       <el-table-column label="序号" type="index" align="center" width="80"/>
       <el-table-column prop="deviceCode" label="装备编码" align="center"/>
@@ -106,7 +111,8 @@
         </template>
       </el-table-column>
     </el-table>
-
+  </div>
+    <div class="pagination-wrapper">
     <!-- 分页组件 -->
     <pagination
       :total="total"
@@ -114,7 +120,9 @@
       :limit.sync="searchParams.pageSize"
       @pagination="getLeaseListData"
     />
+  </div>
     
+  </el-card>
     <!-- 新增/详情对话框 -->
     <el-dialog
       :title="dialogTitle"
@@ -264,8 +272,8 @@
             </el-col>
             <el-col :span="6">
               <el-form-item>
-                <el-button type="primary" class="primary-lease" @click="getLeaseListDataInDialog">查询</el-button>
+                <el-button type="primary" icon="el-icon-search" class="primary-lease" @click="getLeaseListDataInDialog">查询</el-button>
-                <el-button type="primary" class="primary-lease" @click="onResetInDialog">重置</el-button>
+                <el-button icon="el-icon-refresh" class="primary-lease" @click="onResetInDialog">重置</el-button>
               </el-form-item>
             </el-col>
           </el-row>
@@ -275,8 +283,8 @@
         <el-table
           :data="qualityDetailsList"
           border
+          stripe
           show-overflow-tooltip
-          :header-cell-style="{ color: '#fff', background: '#00a288' }"
         >
           <el-table-column label="序号" type="index" align="center" width="80"/>
           <el-table-column prop="qcCode" label="质检编码" align="center"/>
@@ -866,5 +874,165 @@ export default {
     visibility: visible;
   }
 }
+
+.search-box {
+  margin-bottom: 20px;
+  border-radius: 8px;
+  padding: 0;
+}
+
+.content-box {
+  border-radius: 8px;
+  height: calc(100vh - 280px);
+  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;
+    }
+  }
+}
+
+::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>