From d91c04049cc190694ef747919bf8787f9a776a32 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Tue, 8 Jul 2025 18:45:25 +0800
Subject: [PATCH] Revert "fix: ui"

This reverts commit a749f3641124a15818fbc2b3d5603f84e828f3a6.
---
 src/views/home/index.vue | 93 ++++++++++++++++++++----------------------------
 1 file changed, 39 insertions(+), 54 deletions(-)

diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index beba100..00a6d8f 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -90,25 +90,19 @@ 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">
-            <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 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="home-grid-item home-right">
         <!-- 正在进行的配方 -->
@@ -173,44 +167,35 @@ $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; // 子元素之间的间距（可选）
-    .card {
-      flex: 0 0 auto;
-      width: calc(100% / 3 - 10px);
-      height: 100%;
-      min-width: 200px;
-      border: 1px solid rgb(225, 225, 225);
-      border-radius: 10px;
-      background: rgba(147, 203, 255, 0.1);
-      box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+  gap: 10px;
 
-      .title-line {
-        height: 1vw;
-        background-color: #b3d9ff;
-        position: absolute;
-        width: 100%;
-        border-radius: 10px 10px 0 0;
-        margin: -2.12rem;
-      }
+  .card {
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    border: 1px solid rgb(225, 225, 225);
+    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);
 
-      .card-title-name {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        font-size: 20px;
-        padding: 1rem;
-      }
+    .title-line {
+      height: 1vw;
+      background-color: #b3d9ff;
+      position: absolute;
+      width: 100%;
+      border-radius: 10px 10px 0 0;
+      margin: -2.12rem;
+    }
+
+    .card-title-name {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 20px;
+      padding: 1rem;
     }
   }
 }