Hooke / mlaj-reading-club

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
9bae3231 1 parent 95ffe7a2

refactor(ActivityCard): 优化卡片布局和样式 

调整 ActivityCard 组件的布局和样式，使其更加美观和一致。移除了不必要的函数 getActivityImage，直接使用 activity.cover_image 作为图片源。
Inline Side-by-side
Showing 2 changed files with 23 additions and 21 deletions
<!--
* @Date: 2025-04-17 13:16:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-04-21 13:18:07
* @LastEditTime: 2025-04-21 14:56:50
* @FilePath: /mlaj-reading-club/src/components/shared/ActivityCard.vue
* @Description: 文件描述
-->
<template>
<div
class="block bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-200"
class="rounded-xl overflow-hidden shadow-md bg-white hover:shadow-lg transition-shadow duration-300 flex"
:class="isSmall ? 'flex-row h-32' : 'flex-col'">
<div :class="['relative', isSmall ? 'w-1/3' : 'w-full h-48']">
<img :src="activity.cover_image" :alt="activity.title" class="w-full h-full object-cover" />
<img
:src="activity.cover_image"
:alt="activity.title"
class="w-full h-full object-cover"
/>
<div class="absolute top-2 left-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium" :class="statusBadgeClass">
{{ statusText }}
......@@ -45,21 +49,23 @@
</div>
</div>
<div v-if="!isSmall" class="mt-3">
<div class="flex items-center justify-between text-sm">
<span class="text-gray-600">已报名: {{ activity.participant_count }}/{{ activity.max_participants }}</span>
<span class="text-blue-600">{{ Math.round(capacityPercentage) }}%</span>
<div v-if="!isSmall">
<div class="mt-3">
<div class="flex items-center justify-between text-sm">
<span class="text-gray-600">已报名: {{ activity.participant_count }}/{{ activity.max_participants }}</span>
<span class="text-blue-600">{{ Math.round(capacityPercentage) }}%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
<div class="bg-gradient-to-r from-green-400 to-blue-500 h-1.5 rounded-full"
:style="{ width: capacityPercentage + '%' }"></div>
</div>
</div>
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
<div class="bg-gradient-to-r from-green-400 to-blue-500 h-1.5 rounded-full"
:style="{ width: capacityPercentage + '%' }"></div>
</div>
</div>
<router-link :to="`/activity/${activity.id}`"
class="mt-4 inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600">
{{ isPast ? '查看详情' : isRegistrationOpen ? '立即报名' : '了解更多' }}
</router-link>
<router-link :to="`/activity/${activity.id}`"
class="mt-4 inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600">
{{ isPast ? '查看详情' : isRegistrationOpen ? '立即报名' : '了解更多' }}
</router-link>
</div>
</div>
</div>
</template>
......
......@@ -39,7 +39,7 @@
<template v-else>
<!-- Activity Cover -->
<div class="relative h-64 md:h-80 bg-gray-300 overflow-hidden">
<img :src="getActivityImage(activity.id)" :alt="activity.title" class="w-full h-full object-cover" />
<img :src="activity.cover_image" :alt="activity.title" class="w-full h-full object-cover" />
<div class="absolute inset-0 bg-black bg-opacity-40"></div>
<div class="absolute bottom-0 left-0 right-0 p-6">
<div class="container mx-auto">
......@@ -381,10 +381,6 @@ const goBack = () => {
router.back()
}
const getActivityImage = (activityId) => {
return `/assets/images/activities/${activityId}.jpg`
}
const formatDate = (dateString) => {
if (!dateString) return ''
const date = new Date(dateString.replace(' ', 'T'))
......