机械化施工装备配置率

src/views/rent-facility/index.vue

@@ -5,8 +5,9 @@
     <div v-if="!showSecondPage">
       <el-table
         :data="tableData"
+        border
+        stripe
         show-overflow-tooltip
-        :header-cell-style="headerCellStyle"
         :cell-style="{ textAlign: 'center' }"
         class="custom-table"
       >
@@ -124,7 +125,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .equipment-table {
   padding: 20px;
   background: #fff;
@@ -142,8 +143,8 @@ export default {
 
 .diagonal-header {
   width: 100%;
-  background-color: #00a288;
+  // background-color: #00a288;
-  color: white;
+  // color: white;
   position: relative;
   height: 40px;
   font-size: 12px;
@@ -193,5 +194,29 @@ export default {
   border: 1px solid #ebeef5;
   text-align: center;
 }
+
+::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>