src/views/EquipmentManager/HomePage.vue

@@ -354,15 +354,12 @@ export default {
   flex-direction: column;
   gap: calc(16px * var(--beilv));
   width: 70%;
-  background-color: #aaaa;
 }
 
 .tech-body__col-2 {
   width: 25%;
   flex: 0;
-  /* height: calc(100% - 28px); */
   height: 100%;
-  background-color: #cccc;
 }
 
 .techy-container__inner {
@@ -386,7 +383,7 @@ export default {
 .row-1 {
   flex: 1;
   display: flex;
-  gap: calc(100vw / 1920 * 16);
+  gap: calc(16px * var(--beilv));
 }
 
 .row-2 {
@@ -410,7 +407,6 @@ export default {
 .table-wrapper {
   height: calc(100% - 3vh);
   overflow: scroll;
-  background-color: #f003;
 }
 
 .grid {

src/views/EquipmentManager/components/TechyTable.vue

@@ -6,28 +6,8 @@
  * @Description:
 -->
 <template>
-  <div class="visual-base-table-container">
+  <div class="visual-base-table-container el-table-wrapper">
-    <el-table
+    <el-table class="techy-el-table" v-loading="isLoading" :data="renderData" border>
-      v-loading="isLoading"
-      :header-cell-style="{
-        background: 'rgba(79,114,136,0.29)',
-        color: '#fff',
-        height: 'calc(100vh / 1920 * 48)',
-        lineHeight: 'calc(100vh / 1920 * 48)',
-        padding: 0,
-        fontSize: 'calc(100vh / 1920 * 20)'
-      }"
-      :row-style="setRowStyle"
-      :data="renderData"
-      border
-      style="width: 100%; background: transparent"
-      :cell-style="{
-        height: 'calc(100vh / 1920 * 48)',
-        lineHeight: 'calc(100vh / 1920 * 48)',
-        padding: 0,
-        fontSize: 'calc(100vh / 1920 * 20)'
-      }"
-    >
       <el-table-column
         v-if="page && limit && showIndex"
         prop="_pageIndex"
@@ -136,78 +116,103 @@ export default {
         return {
           background: 'rgba(76,97,123,0.2)',
           color: 'rgba(255,255,255,0.5)',
-          height: 26 * this.beilv + 'px',
+          height: 'calc(16px * var(--beilv))',
-          lineHeight: 26 * this.beilv + 'px',
+          lineHeight: 'calc(16px * var(--beilv))',
           padding: 0,
-          fontSize: 12 * this.beilv + 'px'
+          fontSize: 'calc(16px * var(--beilv))'
         }
       } else {
         return {
           background: 'rgba(79,114,136,0.29)',
           color: 'rgba(255,255,255,0.5)',
-          height: 26 * this.beilv + 'px',
+          height: 'calc(16px * var(--beilv))',
-          lineHeight: 26 * this.beilv + 'px',
+          lineHeight: 'calc(16px * var(--beilv))',
           padding: 0,
-          fontSize: 12 * this.beilv + 'px'
+          fontSize: 'calc(14px * var(--beilv))'
         }
       }
     },
     setCellStyle(v) {
       return {
-        lineHeight: 23 * this.beilv + 'px'
+        lineHeight: 'calc(16px * var(--beilv))'
       }
     }
   }
 }
 </script>
-<style lang="scss">
+
-@import '~@/styles/index.scss';
+<style>
-.visual-base-table-container {
+.fix-table >>> .el-table td .cell {
-  .el-table {
+  width: 60% !important;
-    border: 0;
+  margin: auto;
+  text-align: left;
 }
-  .el-table::before,
+
-  .el-table--border::after {
+.left-content-equipment-check {
-    background-color: transparent;
+  height: calc(100% - 32px);
+  display: flex;
+  gap: calc(100vmin / 1920 * 36);
+  overflow: hidden;
 }
-  .el-table th,
+
-  td {
+.el-table-wrapper {
-    border-color: #0d1728 !important;
+  flex: 1;
-    padding: 0;
 }
-  .el-table tr {
+
+.left-content-equipment-check > div {
+  overflow: hidden;
+  /* overflow-x: scroll; */
+}
+
+.el-table-wrapper >>> * {
   background: transparent;
 }
-  .el-table__row:hover > td {
+.el-table-wrapper >>> .el-table::before,
-    background-color: rgba(79, 114, 136, 0.29) !important;
+.el-table-wrapper >>> .el-table--group::after,
+.el-table-wrapper >>> .el-table--border::after {
+  background: transparent;
 }
 
-  .el-table__row--striped:hover > td {
+.el-table-wrapper >>> .el-table {
-    background-color: rgba(79, 114, 136, 0.29) !important;
+  font-size: 8px;
-  }
+  background-color: transparent;
-}
+  color: #fff9;
-.setting {
+  border: 0;
-  text-align: right;
-  padding: 15px;
-  .setting-box {
-    width: 100px;
-  }
-  i {
-    color: #aaa;
-    @extend .pointer;
-  }
-}
-.p-0 {
-  padding: 0;
-}
-
-.p-0 >>> .cell {
   height: 100%;
-  margin: 0;
+  overflow-y: auto;
+}
+
+.el-table-wrapper >>> .el-table th.is-leaf,
+.el-table-wrapper >>> .el-table td {
+  border-color: #0d1728;
   padding: 0;
 }
 
-.font-and-height {
+.el-table__row--striped:hover > td,
-  font-size: calc(100vh / 1920 * 32);
+.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;
+}
+.el-table-wrapper >>> th,
+.el-table-wrapper >>> td {
+  padding: 0;
+}
+
+.el-table-wrapper >>> tbody > tr:nth-child(even) {
+  background: rgba(76, 97, 123, 0.2);
 }
 </style>