装备退库记录表格样式修改

src/views/EquipmentRoamRecord/outboundRecord/index.vue

@@ -121,13 +121,15 @@
       </el-row>
 
       <vue-easy-print ref="recordPrintRef" tableShow style="width: 100%">
-        <el-table :data="outRecordData" style="width: 100%">
+        <div class="dialog-table">
-          <el-table-column align="center" show-overflow-tooltip type="index" label="序号"/>
+        <el-table :data="outRecordData" style="width: 100%" border stripe>
+          <el-table-column align="center" show-overflow-tooltip type="index" width="100px" label="序号"/>
           <el-table-column align="center" show-overflow-tooltip prop="devName" label="装备名称"/>
           <!-- <el-table-column align="center" show-overflow-tooltip prop="createUser" label="装备系列" /> -->
           <el-table-column align="center" show-overflow-tooltip prop="devModel" label="规格型号"/>
           <el-table-column align="center" show-overflow-tooltip prop="devCode" label="装备编码"/>
         </el-table>
+        </div>
       </vue-easy-print>
 
       <el-row class="record-row" style="margin-top: 10px">
@@ -351,4 +353,63 @@ export default {
     }
   }
 }
+.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>

src/views/EquipmentRoamRecord/returnRecord/index.vue

@@ -107,13 +107,15 @@
       </el-row>
 
       <vue-easy-print ref="recordPrintRef" tableShow style="width: 100%">
+        <div class="dialog-table">
         <el-table :data="outRecordData" style="width: 100%">
-          <el-table-column align="center" show-overflow-tooltip type="index" label="序号" />
+          <el-table-column align="center" show-overflow-tooltip type="index" width="100px" label="序号" />
           <el-table-column align="center" show-overflow-tooltip prop="devName" label="装备名称" />
           <!-- <el-table-column align="center" show-overflow-tooltip prop="createUser" label="装备系列" /> -->
           <el-table-column align="center" show-overflow-tooltip prop="devModel" label="规格型号" />
           <el-table-column align="center" show-overflow-tooltip prop="devCode" label="装备编码" />
         </el-table>
+        </div>
       </vue-easy-print>
 
       <el-row class="record-row" style="margin-top: 10px">
@@ -339,4 +341,64 @@ export default {
     }
   }
 }
+
+.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>