From a749f3641124a15818fbc2b3d5603f84e828f3a6 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Tue, 8 Jul 2025 18:23:30 +0800
Subject: [PATCH] fix: ui

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

diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 00a6d8f..beba100 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -90,19 +90,25 @@ const deviceType = computed(() => {
 <template>
   <div class="home">
     <div v-if="route.path === '/home'" class="home-grid-container">
-      <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 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>
       <div class="home-grid-item home-right">
         <!-- 正在进行的配方 -->
@@ -167,35 +173,44 @@ $input-height: 3rem;
 
 .home-left {
   height: 100%;
+  width: 100%;
   display: grid;
-  gap: 10px;
+  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);
 
-  .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);
-
-    .title-line {
-      height: 1vw;
-      background-color: #b3d9ff;
-      position: absolute;
-      width: 100%;
-      border-radius: 10px 10px 0 0;
-      margin: -2.12rem;
-    }
+      .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;
+      .card-title-name {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        font-size: 20px;
+        padding: 1rem;
+      }
     }
   }
 }