From 223aa5998b1685478a869507fc6421ce14fd165c Mon Sep 17 00:00:00 2001
From: Kisechan <kisechan_@outlook.com>
Date: Thu, 6 Mar 2025 15:40:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8D=9A=E5=AE=A2=E6=96=87?=
 =?UTF-8?q?=E7=AB=A0=E5=B1=95=E7=A4=BA=EF=BC=8C=E6=9B=BF=E6=8D=A2=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E4=B8=BA=20Font=20Awesome=EF=BC=8C=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E2=80=9C=E5=89=8D=E5=BE=80=E5=8D=9A=E5=AE=A2=E2=80=9D=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA=EF=BC=8C=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F=E5=92=8C?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/HomeView.vue | 59 +++++++++++++++++++++++-------------------
 1 file changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index a78d84a..7e3ba4c 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -23,27 +23,18 @@
                 <el-col v-for="item in feedItems" :key="item.link" :span="24">
                   <el-card class="blog-card" shadow="hover">
                     <div class="blog-header">
-                      <font-awesome-icon
-                        :icon="['fas', 'file-lines']"
-                        class="icon"
-                      />
+                      <i class="fa-solid fa-newspaper"></i>
                       <a :href="item.link" target="_blank" class="blog-title">{{
                         item.title
                       }}</a>
                     </div>
                     <div class="blog-meta">
+                      <i class="fa-solid fa-clock-rotate-left"></i>
                       <span class="update-time">
-                        <font-awesome-icon
-                          :icon="['fas', 'clock']"
-                          class="icon"
-                        />
                         {{ formatDate(item.pubDate) }}
                       </span>
                       <span class="tags">
-                        <font-awesome-icon
-                          :icon="['fas', 'tags']"
-                          class="icon"
-                        />
+                        <i class="fa-solid fa-tags"></i>
                         <el-tag
                           v-for="(tag, index) in item.tags"
                           :key="index"
@@ -60,12 +51,22 @@
               </el-row>
             </div>
             <div class="read-more-container">
-              <el-card class="read-more-card" shadow="hover" @click="goToBlog">
-                <div class="read-more-content">
-                  <span>Read More</span>
-                  <i class="fa-brands fa-readme"></i>
-                </div>
-              </el-card>
+              <el-tooltip
+                content="前往博客查看更多文章"
+                placement="top"
+                class="read-more-tooltip"
+              >
+                <el-card
+                  class="read-more-card"
+                  shadow="hover"
+                  @click="goToBlog"
+                >
+                  <div class="read-more-content">
+                    <span>Read More</span>
+                    <i class="fa-brands fa-readme"></i>
+                  </div>
+                </el-card>
+              </el-tooltip>
             </div>
           </el-card>
         </el-col>
@@ -313,28 +314,32 @@ onUnmounted(() => {
 .read-more-container {
   display: flex;
   justify-content: flex-end; /* 靠右排版 */
-  margin-top: 10px; /* 调整上边距 */
 }
 
 .read-more-card {
+  display: flex; /* 使用 flexbox */
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中 */
   cursor: pointer;
-  width: 150px; /* 调整宽度 */
-  padding: 10px; /* 调整内边距 */
+  width: 135px; /* 调整宽度 */
+  height: 35px; /* 调整高度 */
+  padding: 6px; /* 调整内边距 */
   text-align: center;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
-.read-more-card:hover {
+.read-more-card:hover,
+.read-more-tooltip {
   transform: translateY(-5px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .read-more-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  font-size: 1em; /* 调整字体大小 */
+  display: flex; /* 使用 flexbox */
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中 */
+  gap: 2px;
+  font-size: 0.85em; /* 调整字体大小 */
   color: #409eff;
 }