From 14cca119a9de763d2924f7dc19177aa0f162b1db Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Tue, 20 May 2025 11:57:17 +0800
Subject: [PATCH] =?UTF-8?q?refactor(welcome):=20=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80=E5=92=8C=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BB=A5=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重新组织待办事项、数据统计、智能设备和商品信息的布局，优化页面结构，使其更直观和易于使用。同时调整样式细节，确保各模块在不同屏幕尺寸下显示一致。
---
 src/views/welcome/index.vue | 207 ++++++++++++++++++++----------------
 1 file changed, 113 insertions(+), 94 deletions(-)

diff --git a/src/views/welcome/index.vue b/src/views/welcome/index.vue
index ac6ae49..19cf7c9 100644
--- a/src/views/welcome/index.vue
+++ b/src/views/welcome/index.vue
@@ -59,74 +59,105 @@ onMounted(async () => {
 
 <template>
   <div class="welcome-container">
-    <!-- 待办事项 -->
-    <div class="section-container todo-container">
-      <div class="section-title">
-        <div class="title-bar"></div>
-        <div class="title-text">待办事项</div>
-      </div>
-      <el-row :gutter="12" class="todo-section">
-        <el-col :span="4" v-for="item in todoItems" :key="item.name">
-          <el-card shadow="never" class="todo-card">
-            <div class="todo-content">
-              <el-icon :size="30" class="todo-icon">
-                <component :is="item.icon" />
-              </el-icon>
-              <div class="todo-count">{{ item.count }}</div>
-              <div class="todo-name">{{ item.name }}</div>
+    <el-row :gutter="12">
+      <el-col :span="17">
+        <!-- 待办事项 -->
+        <div class="section-container todo-container">
+          <div class="section-title">
+            <div class="title-bar"></div>
+            <div class="title-text">待办事项</div>
+          </div>
+          <el-row :gutter="12" class="todo-section">
+            <el-col :span="4" v-for="item in todoItems" :key="item.name">
+              <el-card shadow="never" class="todo-card">
+                <div class="todo-content">
+                  <el-icon :size="30" class="todo-icon">
+                    <component :is="item.icon" />
+                  </el-icon>
+                  <div class="todo-count">{{ item.count }}</div>
+                  <div class="todo-name">{{ item.name }}</div>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+        </div>
+
+        <el-row :gutter="12">
+          <!-- 数据统计 -->
+          <el-col :span="12">
+            <div class="section-container shop-container">
+              <div class="section-title">
+                <div class="title-bar"></div>
+                <div class="title-text">数据统计</div>
+              </div>
+              <el-row :gutter="12" class="data-section">
+                <!-- 商店数据 -->
+                <el-col :span="4" v-for="item in shopData" :key="item.name">
+                  <el-card shadow="never" class="todo-card">
+                    <div class="todo-content">
+                      <div class="todo-count">{{ item.value }}</div>
+                      <div class="todo-name">{{ item.name }}</div>
+                    </div>
+                  </el-card>
+                </el-col>
+              </el-row>
             </div>
-          </el-card>
-        </el-col>
-      </el-row>
-    </div>
+          </el-col>
 
-    <el-row :gutter="12">
-      <!-- 数据统计 -->
-      <el-col :span="12">
-        <div class="section-container shop-container">
-          <div class="section-title">
-            <div class="title-bar"></div>
-            <div class="title-text">数据统计</div>
-          </div>
-          <el-row :gutter="12" class="data-section">
-            <!-- 商店数据 -->
-            <el-col :span="4" v-for="item in shopData" :key="item.name">
-              <el-card shadow="never" class="todo-card">
-                <div class="todo-content">
-                  <div class="todo-count">{{ item.value }}</div>
-                  <div class="todo-name">{{ item.name }}</div>
-                </div>
-              </el-card>
-            </el-col>
-          </el-row>
-        </div>
+          <!-- 智能设备 -->
+          <el-col :span="12">
+            <div class="section-container device-container">
+              <div class="section-title">
+                <div class="title-bar"></div>
+                <div class="title-text">智能设备</div>
+              </div>
+              <el-row :gutter="12" class="data-section">
+                <el-col :span="4" v-for="item in deviceData" :key="item.name">
+                  <el-card shadow="never" class="todo-card">
+                    <div class="todo-content">
+                      <div class="todo-count">{{ item.value }}</div>
+                      <div class="todo-name">{{ item.name }}</div>
+                    </div>
+                  </el-card>
+                </el-col>
+              </el-row>
+            </div>
+          </el-col>
+        </el-row>
+
+        <!-- 商品信息 -->
+        <el-row :gutter="12">
+
+          <!-- 今日最新订单 -->
+          <el-col :span="12">
+            <div class="section-container order-container">
+              <div class="section-title">
+                <div class="title-bar"></div>
+                <div class="title-text">今日数据</div>
+              </div>
+              <div class="goods-list">
+                <el-card shadow="never" class="goods-item" v-for="item in todayLatestOrderGoods"
+                  :key="item.orderGoodsId" :body-style="{ padding: '0' }">
+                  <div class="goods-item-content">
+                    <div class="goods-left">
+                      <el-image :src="item.coverImg" fit="contain" class="goods-image" />
+                      <div class="goods-name">{{ item.goodsName }}</div>
+                    </div>
+                    <div class="goods-right">
+                      <div class="goods-count">数量：{{ item.quantity }}</div>
+                      <div class="goods-count">{{ item.totalAmount }}元</div>
+                      <div class="goods-count buyer-name">{{ item.buyerName }}</div>
+                      <div class="goods-count">{{ item.createTimeStr }}</div>
+                    </div>
+                  </div>
+                </el-card>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
       </el-col>
-
-      <!-- 智能设备 -->
-      <el-col :span="12">
-        <div class="section-container device-container">
-          <div class="section-title">
-            <div class="title-bar"></div>
-            <div class="title-text">智能设备</div>
-          </div>
-          <el-row :gutter="12" class="data-section">
-            <el-col :span="4" v-for="item in deviceData" :key="item.name">
-              <el-card shadow="never" class="todo-card">
-                <div class="todo-content">
-                  <div class="todo-count">{{ item.value }}</div>
-                  <div class="todo-name">{{ item.name }}</div>
-                </div>
-              </el-card>
-            </el-col>
-          </el-row>
-        </div>
-      </el-col>
-    </el-row>
-
-    <!-- 商品信息 -->
-    <el-row :gutter="12">
       <!-- 热门商品 -->
-      <el-col :span="12">
+      <el-col :span="7">
         <div class="section-container goods-container">
           <div class="section-title">
             <div class="title-bar"></div>
@@ -150,33 +181,6 @@ onMounted(async () => {
           </div>
         </div>
       </el-col>
-
-      <!-- 今日最新订单 -->
-      <el-col :span="12">
-        <div class="section-container order-container">
-          <div class="section-title">
-            <div class="title-bar"></div>
-            <div class="title-text">今日数据</div>
-          </div>
-          <div class="goods-list">
-            <el-card shadow="never" class="goods-item" v-for="item in todayLatestOrderGoods" :key="item.orderGoodsId"
-              :body-style="{ padding: '0' }">
-              <div class="goods-item-content">
-                <div class="goods-left">
-                  <el-image :src="item.coverImg" fit="contain" class="goods-image" />
-                  <div class="goods-name">{{ item.goodsName }}</div>
-                </div>
-                <div class="goods-right">
-                  <div class="goods-count">数量：{{ item.quantity }}</div>
-                  <div class="goods-count">{{ item.totalAmount }}元</div>
-                  <div class="goods-count buyer-name">{{ item.buyerName }}</div>
-                  <div class="goods-count">{{ item.createTimeStr }}</div>
-                </div>
-              </div>
-            </el-card>
-          </div>
-        </div>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -321,15 +325,13 @@ onMounted(async () => {
         .goods-right {
           display: flex;
           align-items: center;
-          width: 450px;
 
           .goods-progress {
             flex: 1;
-            margin-right: 12px;
+            margin-right: 2px;
           }
 
           .goods-count {
-            width: 60px;
             text-align: right;
             font-size: 14px;
             color: var(--el-text-color-primary);
@@ -344,5 +346,22 @@ onMounted(async () => {
       }
     }
   }
+
+  .goods-container {
+    .goods-right {
+      width: 150px;
+    }
+    .goods-count {
+        width: 45px;
+    }
+  }
+  .order-container {
+    .goods-right {
+      width: 250px;
+    }
+    .goods-count {
+      width: 60px;
+    }
+  }
 }
 </style>
\ No newline at end of file