Revert "fix: ui"

This reverts commit a749f36411.

src/views/home/index.vue

@@ -90,26 +90,20 @@ 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">
-          <el-card v-for="item in homeStore.h2O2SensorData" :key="item.sensorId" class="card">
+      <div class="home-left" :style="styles">
+        <el-card
+          v-for="(item, index) in homeStore.h2O2SensorData"
+          :key="item.sensorId"
+          class="card"
+          :class="{
+            'card-center-1':
+              index === 0
+              && (deviceType === deviceStore.deviceTypeMap.PipeDM || deviceType === deviceStore.deviceTypeMap.DrawBarDM),
+          }"
+        >
           <Environment :env-params="item" />
         </el-card>
       </div>
-        <div class="left-box" />
-        <!--        <el-card -->
-        <!--          v-for="(item, index) in homeStore.h2O2SensorData" -->
-        <!--          :key="item.sensorId" -->
-        <!--          class="card" -->
-        <!--          :class="{ -->
-        <!--            'card-center-1': -->
-        <!--              index === 0 -->
-        <!--              && (deviceType === deviceStore.deviceTypeMap.PipeDM || deviceType === deviceStore.deviceTypeMap.DrawBarDM), -->
-        <!--          }" -->
-        <!--        > -->
-        <!--          <Environment :env-params="item" /> -->
-        <!--        </el-card> -->
-      </div>
       <div class="home-grid-item home-right">
         <!-- 正在进行的配方 -->
         <div class="top">
@@ -173,27 +167,19 @@ $input-height: 3rem;
 
 .home-left {
   height: 100%;
-  width: 100%;
   display: grid;
-  grid-template-rows: repeat(2, 1fr);
-  grid-template-columns: repeat(1, 1fr);
-  gap: 20px;
-  .left-box {
-    display: flex; // 使用 Flexbox 布局
-    flex-direction: row; // 子元素水平排列（默认值）
-    align-items: flex-start; // 子元素顶部对齐
-    overflow-x: auto; // 横向滚动支持
-    width: 100%; // 父容器宽度占满
-    gap: 10px; // 子元素之间的间距（可选）
+  gap: 10px;
+
   .card {
-      flex: 0 0 auto;
-      width: calc(100% / 3 - 10px);
+    text-align: center;
+    width: 100%;
     height: 100%;
-      min-width: 200px;
     border: 1px solid rgb(225, 225, 225);
-      border-radius: 10px;
+    position: relative;
+    border-radius: 10px 10px 10px 10px;
+    background: #ffffff;
+    background: linear-gradient(180deg, rgba(147, 203, 255, 1) -190%, #ffffff 24%);
     background: rgba(147, 203, 255, 0.1);
-      box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
 
     .title-line {
       height: 1vw;
@@ -213,7 +199,6 @@ $input-height: 3rem;
     }
   }
 }
-}
 
 .home-right {
   padding: 10px;