From 2557e65aceb4be44fcd80cf6ef9c22369ad74bbc Mon Sep 17 00:00:00 2001
From: Jeffrey Hsu <xfj12@outlook.com>
Date: Wed, 2 Oct 2024 11:11:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                       |  2 +-
 src/components/card/IntroCard.vue |  2 +-
 src/views/home/HomeView.vue       | 32 ++++++++++++++++---------------
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 53af3d5..8445bfd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <div class="min-h-screen w-screen bg-blue-50">
+  <div class="min-h-screen bg-blue-50">
     <router-view/>
   </div>
 </template>
diff --git a/src/components/card/IntroCard.vue b/src/components/card/IntroCard.vue
index 929e2a9..58e0f2d 100644
--- a/src/components/card/IntroCard.vue
+++ b/src/components/card/IntroCard.vue
@@ -38,7 +38,7 @@ const littleWidget: Widget[] = [
     </div>
 
     <!--  文字部分  -->
-    <div class="container flex-1 px-8 flex flex-col justify-between">
+    <div class="container flex-1 px-4 sm:px-8 flex flex-col justify-between">
       <div class="text-4xl">Jeffrey Hsu</div>
       <div class="text-2xl text-gray-400">你好👋，很高兴认识你！</div>
       <!--      <vue-typed-js :strings="['First text', 'Second Text']">-->
diff --git a/src/views/home/HomeView.vue b/src/views/home/HomeView.vue
index 3095969..32b9938 100644
--- a/src/views/home/HomeView.vue
+++ b/src/views/home/HomeView.vue
@@ -22,23 +22,25 @@ onMounted(async () => {
     <!--  个人介绍  -->
     <intro-card/>
 
-    <!-- 标题部分 -->
-    <div class="text-2xl mb-4 text-white font-bold flex justify-between">
-      <div class="bg-rose-500 w-max rounded-2xl overflow-hidden">
-        <div class="inline-block py-2 px-4 bg-rose-600 rounded-2xl">
-          <font-awesome-icon :icon="['fas', 'blog']"/>
+    <div class="px-4 sm:px-0 w-full">
+      <!-- 标题部分 -->
+      <div class="text-2xl mb-4 text-white font-bold flex justify-between">
+        <div class="bg-rose-500 w-max rounded-2xl overflow-hidden">
+          <div class="inline-block py-2 px-4 bg-rose-600 rounded-2xl">
+            <font-awesome-icon :icon="['fas', 'blog']"/>
+          </div>
+          <span class="px-4">最新博文</span>
         </div>
-        <span class="px-4">最新博文</span>
+        <a class="bg-rose-500 rounded-2xl py-2 px-4" href="/blog/">
+          <font-awesome-icon :icon="['fas', 'chevron-right']"/>
+        </a>
       </div>
-      <a class="bg-rose-500 rounded-2xl py-2 px-4" href="/blog/">
-        <font-awesome-icon :icon="['fas', 'chevron-right']"/>
-      </a>
-    </div>
-    <!-- 内容 -->
-    <div :class="{'justify-center': !hasPosts}" class="container flex">
-      <span v-if="!hasPosts" class="text-2xl font-bold">最近没有动态</span>
-      <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 w-full">
-        <article-card v-for="item in recentPosts" :key="item.cid" :post="item"/>
+      <!-- 内容 -->
+      <div :class="{'justify-center': !hasPosts}" class="container flex">
+        <span v-if="!hasPosts" class="text-2xl font-bold">最近没有动态</span>
+        <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 w-full">
+          <article-card v-for="item in recentPosts" :key="item.cid" :post="item"/>
+        </div>
       </div>
     </div>
   </div>