src/views/EquipmentManager/components/TechyTable.vue

@@ -6,7 +6,7 @@
  * @Description:
 -->
 <template>
-  <div class="visual-base-table-container el-table-wrapper">
+  <div class="visual-base-table-container">
     <el-table class="techy-el-table" v-loading="isLoading" :data="renderData" border>
       <el-table-column
         v-if="page && limit && showIndex"
@@ -110,109 +110,72 @@ export default {
   methods: {
     emitData(val) {
       this.$emit('emitFun', val)
-    },
-    setRowStyle(v) {
-      if (v.rowIndex % 2 === 0) {
-        return {
-          background: 'rgba(76,97,123,0.2)',
-          color: 'rgba(255,255,255,0.5)',
-          height: 'calc(16px * var(--beilv))',
-          lineHeight: 'calc(16px * var(--beilv))',
-          padding: 0,
-          fontSize: 'calc(16px * var(--beilv))'
-        }
-      } else {
-        return {
-          background: 'rgba(79,114,136,0.29)',
-          color: 'rgba(255,255,255,0.5)',
-          height: 'calc(16px * var(--beilv))',
-          lineHeight: 'calc(16px * var(--beilv))',
-          padding: 0,
-          fontSize: 'calc(14px * var(--beilv))'
-        }
-      }
-    },
-    setCellStyle(v) {
-      return {
-        lineHeight: 'calc(16px * var(--beilv))'
-      }
     }
   }
 }
 </script>
 
-<style>
+<style scoped>
-.fix-table >>> .el-table td .cell {
+.visual-base-table-container,
-  width: 60% !important;
+.visual-base-table-container >>> .el-table {
-  margin: auto;
+  min-width: 100%;
-  text-align: left;
 }
-
+/* 清除默认样式 */
-.left-content-equipment-check {
+.visual-base-table-container >>> table {
-  height: calc(100% - 32px);
-  display: flex;
-  gap: calc(100vmin / 1920 * 36);
-  overflow: hidden;
-}
-
-.el-table-wrapper {
-  flex: 1;
-}
-
-.left-content-equipment-check > div {
-  overflow: hidden;
-  /* overflow-x: scroll; */
-}
-
-.el-table-wrapper >>> * {
-  background: transparent;
-}
-.el-table-wrapper >>> .el-table::before,
-.el-table-wrapper >>> .el-table--group::after,
-.el-table-wrapper >>> .el-table--border::after {
   background: transparent;
 }
 
-.el-table-wrapper >>> .el-table {
+.visual-base-table-container >>> .el-table,
-  font-size: 8px;
+.visual-base-table-container >>> th,
-  background-color: transparent;
+.visual-base-table-container >>> tr {
-  color: #fff9;
-  border: 0;
-  height: 100%;
-  overflow-y: auto;
-}
-
-.el-table-wrapper >>> .el-table th.is-leaf,
-.el-table-wrapper >>> .el-table td {
-  border-color: #0d1728;
-  padding: 0;
-}
-
-.el-table__row--striped:hover > td,
-.el-table-wrapper >>> .el-table__row:hover > td {
-  background-color: rgba(79, 114, 136, 0.29) !important;
-}
-
-.el-table-wrapper >>> table {
-  border: unset;
-}
-
-.el-table-wrapper >>> thead {
-  color: #fff;
-}
-.el-table-wrapper >>> tr {
   background: unset;
 }
-.el-table-wrapper >>> tbody td > div,
+
-.el-table-wrapper >>> thead th > div {
+/* 设置设计稿样式 */
-  white-space: nowrap;
+.visual-base-table-container >>> .el-table::before,
+.visual-base-table-container >>> .el-table--group::after,
+.visual-base-table-container >>> .el-table--border::after,
+.visual-base-table-container >>> .el-table--border::after {
+  background: unset;
 }
-.el-table-wrapper >>> th,
+
-.el-table-wrapper >>> td {
+.visual-base-table-container >>> table * {
+  border-color: #0d1728;
+  border-width: calc(1px * var(--beilv));
+}
+
+.visual-base-table-container >>> td {
+  padding: calc(5px * var(--beilv));
+}
+
+.visual-base-table-container >>> td span {
+  color: #ffffff50;
+  font-size: calc(12px * var(--beilv));
+  line-height: calc(14px * var(--beilv));
+}
+
+.visual-base-table-container >>> thead th {
   padding: 0;
 }
 
-.el-table-wrapper >>> tbody > tr:nth-child(even) {
+.visual-base-table-container >>> thead th .cell {
-  background: rgba(76, 97, 123, 0.2);
+  color: #fff;
+  font-size: calc(14px * var(--beilv));
+  line-height: calc(14px * var(--beilv));
+  padding: calc(6px * var(--beilv));
+  white-space: nowrap;
+}
+
+.visual-base-table-container >>> .el-table__body tr:hover > td {
+  background-color: #42537130;
+}
+
+.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
+  background-color: #0e203e90;
+}
+
+.visual-base-table-container >>> .el-table tbody tr:nth-child(even),
+.visual-base-table-container >>> .el-table thead {
+  background-color: #20376090;
 }
 </style>