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,7 +49,8 @@
         </div>
         </div>
       </div>
       </div>
 
 
-      <div v-if="!isSmall" class="mt-3">
+      <div v-if="!isSmall">
+        <div class="mt-3">
           <div class="flex items-center justify-between text-sm">
           <div class="flex items-center justify-between text-sm">
             <span class="text-gray-600">已报名: {{ activity.participant_count }}/{{ activity.max_participants }}</span>
             <span class="text-gray-600">已报名: {{ activity.participant_count }}/{{ activity.max_participants }}</span>
             <span class="text-blue-600">{{ Math.round(capacityPercentage) }}%</span>
             <span class="text-blue-600">{{ Math.round(capacityPercentage) }}%</span>
@@ -62,6 +67,7 @@
         </router-link>
         </router-link>
       </div>
       </div>
     </div>
     </div>
+  </div>
 </template>
 </template>
 
 
 <script setup>
 <script setup>

@@ -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'))