fix:拉杆箱首页样式定制

src/views/home/index.vue

@@ -99,8 +99,13 @@ const deviceType = computed(() => {
 <template>
   <div class="home">
     <div v-if="route.path === '/home'" class="home-grid-container">
-      <div class="home-left">
-        <div class="left-box">
+      <div
+        class="home-left"
+        :style="{
+          'grid-template-rows': deviceType === deviceStore.deviceTypeMap.DrawBarDM ? 'repeat(1, 1fr)' : 'repeat(2, 1fr)',
+        }"
+      >
+        <div class="left-box" :class="{ 'left-box-1': [deviceStore.deviceTypeMap.DrawBarDM].includes(deviceType) }">
           <el-card
             v-for="item in homeStore.h2O2SensorData.filter(item => item.type !== 'WirelessExtSensor')"
             :key="item.sensorId"
@@ -141,7 +146,7 @@ const deviceType = computed(() => {
             </div>
           </el-card>
         </div>
-        <div class="left-box">
+        <div v-if="deviceType !== deviceStore.deviceTypeMap.DrawBarDM" class="left-box">
           <el-card
             v-for="item in homeStore.h2O2SensorData.filter(item => item.type === 'WirelessExtSensor')"
             :key="item.sensorId"
@@ -206,6 +211,13 @@ $input-height: 3rem;
   width: 100%;
   height: 100%;
 }
+.home-grid-container .home-left .left-box-1 {
+  flex-direction: column !important;
+  .card {
+    height: calc(50% - 5px) !important;
+    width: 100% !important;
+  }
+}
 
 .home-grid-container {
   height: 100%;
@@ -219,7 +231,7 @@ $input-height: 3rem;
   height: 100%;
   width: 100%;
   display: grid;
-  grid-template-rows: repeat(2, 1fr);
+  //grid-template-rows: repeat(2, 1fr);
   grid-template-columns: repeat(1, 1fr);
   gap: 20px;
   .left-box {
@@ -233,11 +245,10 @@ $input-height: 3rem;
       width: 100% !important;
     }
     .card-two {
-      width: calc((100% / 3)*2 - 10px)  !important;
+      width: calc((100% / 3) * 2 - 10px) !important;
     }
     .card-three {
-
-      width: calc(100% / 3 - 10px)  !important;
+      width: calc(100% / 3 - 10px) !important;
     }
     .card {
       flex: 0 0 auto;