src/views/EquipmentManager/HomePage.vue

@@ -77,6 +77,7 @@
         <div class="row-3">
           <!-- 设备备件管理 -->
           <techy-container :title="'设备备件管理'" :icon="equipmentOrderSVG">
+            <div class="table-wrapper">
               <techy-table
                 :page="1"
                 :limit="7"
@@ -84,6 +85,7 @@
                 :table-config="sparepartsProps"
                 :table-data="sparepartsDatalist"
               />
+            </div>
           </techy-container>
         </div>
       </div>
@@ -292,26 +294,14 @@ export default {
       sparepartsProps,
       sparepartsDatalist,
       rightSideProps,
-      rightSideDatalist,
+      rightSideDatalist
       // refreshKey: 0
-      scale: 1
     }
   },
   computed: {
     ...mapGetters(['sidebar'])
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.scale = this.$refs['cockpit-container-equipment'].offsetWidth / 1920
-      this.$refs['cockpit-container-equipment'].style.setProperty('--scale', this.scale)
-
-      this.$watch(() => this.$refs['cockpit-container-equipment'].offsetWidth, function(v, o) {
-        console.log('resize ... ref..')
-        this.scale = this.$refs['cockpit-container-equipment'].offsetWidth / 1920
-        this.$refs['cockpit-container-equipment'].style.setProperty('--scale', this.scale)
-      })
-    })
-  },
+  mounted() {},
 
   methods: {
     changeFullScreen() {
@@ -342,8 +332,6 @@ export default {
 
 .visual-container {
   width: 100%;
-  min-width: 1280px;
-  /* height: calc(100vh - 128px); */
   background: url('./assets/bg.png') no-repeat;
   background-size: cover;
   overflow: hidden;
@@ -353,27 +341,28 @@ export default {
 .techy-body {
   height: calc(100vh - 64px);
   width: 100%;
-  /* overflow: hidden; */
-  /* padding: 24px; */
-  padding: calc(100vw / 1920 * 24);
-  /* display: grid;
-  grid-template-columns: 3fr 1fr; */
+  padding: calc(24px * var(--beilv));
   display: flex;
-  gap: calc(100vw / 1920 * 16);
+  gap: calc(16px * var(--beilv));
 }
 
 .tech-body__col-1 {
-  height: calc(100% - 28px);
-  flex: 1 3;
+  /* height: calc(100% - 28px); */
+  height: 100%;
+  flex: 1;
   display: flex;
   flex-direction: column;
-  gap: calc(100vw / 1920 * 16);
+  gap: calc(16px * var(--beilv));
+  width: 70%;
+  background-color: #aaaa;
 }
 
 .tech-body__col-2 {
-  flex: 1 1;
-  max-width: 25%;
-  height: calc(100% - 28px);
+  width: 25%;
+  flex: 0;
+  /* height: calc(100% - 28px); */
+  height: 100%;
+  background-color: #cccc;
 }
 
 .techy-container__inner {
@@ -388,18 +377,40 @@ export default {
   flex: 1 1;
 }
 
+.row-1,
+.row-2,
+.row-3 {
+  height: 30%;
+}
+
 .row-1 {
   flex: 1;
   display: flex;
   gap: calc(100vw / 1920 * 16);
 }
 
+.row-2 {
+  flex: 0;
+}
+
+.row-3 {
+  flex: 0;
+}
+
 .equipment-exception {
-  flex: 3 1;
+  min-width: 20%;
+  flex: 3;
 }
 
 .equipment-alarm {
-  flex: 2 1;
+  min-width: 20%;
+  flex: 2;
+}
+
+.table-wrapper {
+  height: calc(100% - 3vh);
+  overflow: scroll;
+  background-color: #f003;
 }
 
 .grid {