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

调整 ActivityCard 组件的布局和样式，使其更加美观和一致。移除了不必要的函数 getActivityImage，直接使用 activity.cover_image 作为图片源。

 <!--
 <!--
  * @Date: 2025-04-17 13:16:20
  * @Date: 2025-04-17 13:16:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @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
  * @FilePath: /mlaj-reading-club/src/components/shared/ActivityCard.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
 <template>
 <template>
   <div
   <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'">
     :class="isSmall ? 'flex-row h-32' : 'flex-col'">
     <div :class="['relative', isSmall ? 'w-1/3' : 'w-full h-48']">
     <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">
       <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">
         <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium" :class="statusBadgeClass">
           {{ statusText }}
           {{ statusText }}
@@ -45,21 +49,23 @@
         </div>
         </div>
       </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>
-        <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>
   </div>
   </div>
 </template>
 </template>

@@ -39,7 +39,7 @@
         <template v-else>
         <template v-else>
             <!-- Activity Cover -->
             <!-- Activity Cover -->
             <div class="relative h-64 md:h-80 bg-gray-300 overflow-hidden">
             <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 inset-0 bg-black bg-opacity-40"></div>
                 <div class="absolute bottom-0 left-0 right-0 p-6">
                 <div class="absolute bottom-0 left-0 right-0 p-6">
                     <div class="container mx-auto">
                     <div class="container mx-auto">
@@ -381,10 +381,6 @@ const goBack = () => {
     router.back()
     router.back()
 }
 }
 
 
-const getActivityImage = (activityId) => {
-    return `/assets/images/activities/${activityId}.jpg`
-}
-
 const formatDate = (dateString) => {
 const formatDate = (dateString) => {
     if (!dateString) return ''
     if (!dateString) return ''
     const date = new Date(dateString.replace(' ', 'T'))
     const date = new Date(dateString.replace(' ', 'T'))