Hooke / mlaj-reading-club

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b3727bc1 1 parent be4bf272

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

在主页添加了热门搜索按钮，方便用户快速搜索相关内容。同时优化了活动列表的样式，包括背景颜色、图标和布局，提升用户体验。
Inline Side-by-side
Showing 2 changed files with 114 additions and 18 deletions
......@@ -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",
......
......@@ -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">
<h2 class="text-2xl font-bold text-gray-800 mb-8">正在进行的活动</h2>
<section v-if="ongoingActivities.length > 0" class="py-12 bg-white">
<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">
<div class="flex justify-between items-center mb-8">
<h2 class="text-2xl font-bold text-gray-800">即将开始的活动</h2>
<section class="py-12 bg-gray-50">
<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 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">
<h2 class="text-2xl font-bold text-gray-800 mb-8">往期活动</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<section v-if="pastActivities.length > 0" class="py-12 bg-white">
<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-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 endTime = new Date(activity.end_time.replace(' ', 'T'))
const startTime = new Date(activity.start_time)
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)
}
......