feat(HomePage): 添加热门搜索按钮和活动列表样式优化

在主页添加了热门搜索按钮，方便用户快速搜索相关内容。同时优化了活动列表的样式，包括背景颜色、图标和布局，提升用户体验。

feat(HomePage): 添加热门搜索按钮和活动列表样式优化
在主页添加了热门搜索按钮，方便用户快速搜索相关内容。同时优化了活动列表的样式，包括背景颜色、图标和布局，提升用户体验。
hookehuyr
Commit b3727bc18e6a4dd469303b2c167a7d39c4ff0a3f b3727bc1 1 parent be4bf272
Showing 2 changed files with 114 additions and 18 deletions
src/data/activities.json
src/pages/HomePage.vue
--- a/src/data/activities.json
View file @b3727bc
+++ b/src/data/activities.json
View file @b3727bc
@@ -665,7 +665,7 @@
             "organizer_name": "百草园读书会",
             "description": "诚挚邀请书友们参加《了不起的盖茨比》读书分享会。\n\n【活动内容】\n我们将共同探讨书中的核心思想，分享阅读感悟，碰撞思维火花。\n\n【活动安排】\n1. 开场与活动介绍（15分钟）2. 作品导读（30分钟）3. 分组讨论（45分钟）4. 交流分享（30分钟）5. 问答与总结（15分钟）\n\n【参与须知】\n参与者将通过视频会议软件连接，链接将在活动开始前发送。\n\n每一次阅读都是新的开始，每一次讨论都是思想的盛宴。",
             "cover_image": "https://picsum.photos/seed/A0021/1600/900",
-            "start_time": "2025-05-04 07:13:57",
+            "start_time": "2025-04-04 07:13:57",
             "end_time": "2025-05-04 09:13:57",
             "registration_start": "2025-04-16 21:13:57",
             "registration_end": "2025-05-03 21:13:57",
--- a/src/pages/HomePage.vue
View file @b3727bc
+++ b/src/pages/HomePage.vue
View file @b3727bc
@@ -29,6 +29,20 @@
                 </button>
               </div>
             </form>
+
+            <div class="flex flex-wrap justify-center gap-2 text-sm">
+              <span class="text-gray-500">热门搜索：</span>
+              <button @click="searchTerm = '小说'"
+                class="bg-white px-3 py-1 rounded-full shadow-sm hover:shadow-md transition text-gray-700">小说</button>
+              <button @click="searchTerm = '科普'"
+                class="bg-white px-3 py-1 rounded-full shadow-sm hover:shadow-md transition text-gray-700">科普</button>
+              <button @click="searchTerm = '心理学'"
+                class="bg-white px-3 py-1 rounded-full shadow-sm hover:shadow-md transition text-gray-700">心理学</button>
+              <button @click="searchTerm = '历史'"
+                class="bg-white px-3 py-1 rounded-full shadow-sm hover:shadow-md transition text-gray-700">历史</button>
+              <button @click="searchTerm = '线上'"
+                class="bg-white px-3 py-1 rounded-full shadow-sm hover:shadow-md transition text-gray-700">线上</button>
+            </div>
           </div>
         </div>
       </section>
@@ -52,33 +66,114 @@
       <!-- 活动列表 -->
       <template v-else>
         <!-- 进行中的活动 -->
-        <section v-if="ongoingActivities.length > 0" class="container mx-auto px-4 py-12">
+        <section v-if="ongoingActivities.length > 0" class="py-12 bg-white">
-          <h2 class="text-2xl font-bold text-gray-800 mb-8">正在进行的活动</h2>
+          <div class="container mx-auto px-4">
+            <div class="flex justify-between items-center mb-6">
+              <h2 class="text-2xl font-bold text-gray-800">
+                <span className="inline-block w-3 h-3 bg-green-500 rounded-full mr-2"></span>
+                正在进行的活动
+              </h2>
+              <router-link to="/activities"
+                class="text-green-500 hover:text-green-600 font-medium flex items-center whitespace-nowrap min-w-[80px]">查看全部
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 ml-1" viewBox="0 0 20 20"
+                  fill="currentColor">
+                  <path fillRule="evenodd"
+                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                    clipRule="evenodd" />
+                </svg>
+              </router-link>
+            </div>
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
               <ActivityCard v-for="activity in ongoingActivities" :key="activity.id" :activity="activity" />
             </div>
+          </div>
         </section>
         <!-- 即将开始的活动 -->
-        <section class="container mx-auto px-4 py-12">
+        <section class="py-12 bg-gray-50">
-          <div class="flex justify-between items-center mb-8">
+          <div class="container mx-auto px-4">
-            <h2 class="text-2xl font-bold text-gray-800">即将开始的活动</h2>
+            <div class="flex justify-between items-center mb-6">
+              <h2 class="text-2xl font-bold text-gray-800">
+                <span class="inline-block w-3 h-3 bg-blue-500 rounded-full mr-2"></span>
+                即将开始的活动
+              </h2>
+              <router-link to="/activities"
+                class="text-green-500 hover:text-green-600 font-medium flex items-center whitespace-nowrap min-w-[80px]">查看全部
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 ml-1" viewBox="0 0 20 20"
+                  fill="currentColor">
+                  <path fillRule="evenodd"
+                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                    clipRule="evenodd" />
+                </svg>
+              </router-link>
+            </div>
+
+            <div v-if="upcomingActivities.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              <ActivityCard v-for="activity in upcomingActivities" :key="activity.id" :activity="activity" />
+            </div>
+
+            <div v-else class="text-center py-12">
+              <p class="text-gray-600 mb-5">目前没有即将开始的活动</p>
               <router-link to="/create-activity"
                 class="px-6 py-2 bg-green-500 text-white rounded-full font-semibold hover:bg-green-600 transition duration-200">
-              创建活动
+                创建一个活动
               </router-link>
             </div>
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            <ActivityCard v-for="activity in upcomingActivities" :key="activity.id" :activity="activity" />
           </div>
         </section>
         <!-- 往期活动 -->
-        <section class="container mx-auto px-4 py-12">
+        <section v-if="pastActivities.length > 0" class="py-12 bg-white">
-          <h2 class="text-2xl font-bold text-gray-800 mb-8">往期活动</h2>
+          <div class="container mx-auto px-4">
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div class="flex justify-between items-center mb-6">
+              <h2 class="text-2xl font-bold text-gray-800">
+                <span className="inline-block w-3 h-3 bg-gray-400 rounded-full mr-2"></span>
+                精彩回顾
+              </h2>
+
+              <router-link to="/activities"
+                class="text-green-500 hover:text-green-600 font-medium flex items-center whitespace-nowrap min-w-[80px]">查看全部
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 ml-1" viewBox="0 0 20 20"
+                  fill="currentColor">
+                  <path fillRule="evenodd"
+                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                    clipRule="evenodd" />
+                </svg>
+              </router-link>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
               <ActivityCard v-for="activity in pastActivities" :key="activity.id" :activity="activity" />
             </div>
+          </div>
+        </section>
+
+        <!-- Join Us CTA -->
+        <section class="py-16 bg-gradient-to-br from-green-500 to-blue-500 text-white">
+          <div class="container mx-auto px-4 text-center">
+            <h2 class="text-3xl font-bold mb-4">加入我们的读书社区</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto">
+              无论您是爱书之人还是读书会组织者，都可以在这里找到志同道合的朋友
+            </p>
+            <div class="flex flex-wrap justify-center gap-4">
+              <Button
+                variant="secondary"
+                size="lg"
+                class="font-bold"
+                @click="$router.push('/register')"
+              >
+                注册账号
+              </Button>
+              <Button
+                variant="primary"
+                size="lg"
+                class="bg-white text-green-500 hover:bg-gray-100 hover:text-green-600 font-bold"
+                @click="$router.push('/create-activity')"
+              >
+                创建活动
+              </Button>
+            </div>
+          </div>
         </section>
       </template>
     </template>
@@ -89,6 +184,7 @@
 import { ref, watchEffect } from 'vue'
 import activitiesData from '../data/activities.json'
 import ActivityCard from '../components/shared/ActivityCard.vue'
+import Button from '../components/shared/Button.vue'
 const activities = ref(activitiesData.activities)
 const loading = ref(false)
@@ -108,30 +204,30 @@ watchEffect(() => {
     // 筛选即将开始的活动
     upcomingActivities.value = activities.value
       .filter(activity => {
-        const startTime = new Date(activity.start_time.replace(' ', 'T'))
+        const startTime = new Date(activity.start_time)
         return startTime > now
       })
       .sort((a, b) => {
-        return new Date(a.start_time.replace(' ', 'T')) - new Date(b.start_time.replace(' ', 'T'))
+        return new Date(a.start_time) - new Date(b.start_time)
       })
       .slice(0, 6)
     // 筛选进行中的活动
     ongoingActivities.value = activities.value
       .filter(activity => {
-        const startTime = new Date(activity.start_time.replace(' ', 'T'))
+        const startTime = new Date(activity.start_time)
-        const endTime = new Date(activity.end_time.replace(' ', 'T'))
+        const endTime = new Date(activity.end_time)
         return startTime <= now && endTime >= now
       })
     // 筛选往期活动
     pastActivities.value = activities.value
       .filter(activity => {
-        const endTime = new Date(activity.end_time.replace(' ', 'T'))
+        const endTime = new Date(activity.end_time)
         return endTime < now
       })
       .sort((a, b) => {
-        return new Date(b.end_time.replace(' ', 'T')) - new Date(a.end_time.replace(' ', 'T'))
+        return new Date(b.end_time) - new Date(a.end_time)
       })
       .slice(0, 6)
   }