From fc7cd7bc07050de25af3fd4e9960684b72ad3115 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 17 Jun 2026 17:46:56 -0700
Subject: [PATCH] =?UTF-8?q?fix(home):=20=E7=BB=9F=E4=B8=80=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E9=A1=B9=E7=9B=AE=E5=8D=A1=E7=89=87=E5=BA=95=E9=83=A8?=
 =?UTF-8?q?=E5=AF=B9=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用 UnoCSS 调整项目卡片等高布局
- 将项目描述和日期贴到底部，避免短内容卡片提前显示
- 限制长文本换行并保持日期不换行
---
 src/views/Home/Index.vue | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/views/Home/Index.vue b/src/views/Home/Index.vue
index 7d4c67373..2481d4bfa 100644
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -73,7 +73,7 @@
           </div>
         </template>
         <el-skeleton :loading="loading" animated>
-          <el-row>
+          <el-row :gutter="8" class="gap-y-8px">
             <el-col
               v-for="(item, index) in projects"
               :key="`card-${index}`"
@@ -82,25 +82,38 @@
               :md="8"
               :sm="24"
               :xs="24"
+              class="!flex"
             >
               <el-card
                 shadow="hover"
-                class="mr-5px mt-5px cursor-pointer"
+                class="flex-1 cursor-pointer"
+                body-class="flex h-full flex-col"
                 @click="handleProjectClick(item.message)"
               >
                 <div class="flex items-center">
                   <Icon
                     :icon="item.icon"
                     :size="25"
-                    class="mr-8px"
+                    class="mr-8px flex-none"
                     :style="{ color: item.color }"
                   />
-                  <span class="text-16px">{{ item.name }}</span>
+                  <span class="min-w-0 line-clamp-2 text-16px" :title="item.name">{{
+                    item.name
+                  }}</span>
                 </div>
-                <div class="mt-12px text-12px text-gray-400">{{ t(item.message) }}</div>
-                <div class="mt-12px flex justify-between text-12px text-gray-400">
-                  <span>{{ item.personal }}</span>
-                  <span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
+                <div
+                  class="mt-12px break-all line-clamp-2 text-12px text-gray-400"
+                  :title="t(item.message)"
+                >
+                  {{ t(item.message) }}
+                </div>
+                <div
+                  class="mt-auto flex items-center justify-between gap-8px pt-12px text-12px text-gray-400"
+                >
+                  <span class="min-w-0 truncate" :title="item.personal">{{ item.personal }}</span>
+                  <span class="shrink-0 whitespace-nowrap">
+                    {{ formatTime(item.time, 'yyyy-MM-dd') }}
+                  </span>
                 </div>
               </el-card>
             </el-col>