fix mediacard

src/components/cards/MediaCard.vue

@@ -6,49 +6,65 @@ const props = defineProps({
   media: Object as PropType<MediaInfo>
 });
 
+const getChipColor = (type: string) => {
+  if (type === "电影") {
+    return "border-blue-500 bg-blue-600";
+  } else if (type === "电视剧") {
+    return "border-purple-600 bg-purple-600";
+  } else {
+    return "gray";
+  }
+};
+
 </script>
 
 <template>
-  <VCard
+  <VHover v-bind="props">
-    class="card-img-overlay"
+  <template #default="hover" >
-  >
+    <VCard
-    <VImg
+      v-bind="hover.props"
-      aspect-ratio="2/1"
+      class="outline-none ring-1 transition duration-300 shadow ring-gray-500"
-      :src="props.media?.poster_path"
+      :class="hover.isHovering ? 'scale-105 shadow-lg' : ''"
-      cover
     >
-      <VChip
+      <VImg
-        color="success"
+        aspect-ratio="2/1"
-        variant="elevated" 
+        :src="props.media?.poster_path"
-        size="small" 
+        cover
-        class="absolute left-2 top-2">
-          {{ props.media?.type }}
-      </VChip>
-      <VChip
-        color="primary"
-        variant="elevated" 
-        size="small" 
-        class="absolute right-2 top-2">
-          {{ props.media?.vote_average }}
-      </VChip>
-      <VCardText
-        class="flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer"
       >
-        <span class="text-white font-bold">{{ props.media?.year }}</span>
+        <VChip
-        <h1 class="text-white font-bold text-lg line-clamp-2 overflow-hidden text-ellipsis ...">
+          variant="elevated" 
-          {{ props.media?.title }}
+          size="small" 
-        </h1>
+          :class="getChipColor(props.media?.type||'')"
-        <p class="text-white line-clamp-3 overflow-hidden text-ellipsis ...">
+          class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold">
-          {{ props.media?.overview }}
+            {{ props.media?.type }}
-        </p>
+        </VChip>
-        <div class="flex align-center justify-between">
+        <VChip
-          <IconBtn icon="mdi-magnify" color="white"
+          variant="elevated" 
-          />
+          size="small" 
-          <IconBtn icon="mdi-heart" color="white" />
+          class="absolute right-2 top-2 bg-opacity-80 shadow-md bg-green-500 border-green-600 text-white font-bold">
-        </div>
+            {{ props.media?.vote_average }}
-      </VCardText>
+        </VChip>
-    </VImg>
+        <VCardText
-  </VCard>
+          class="flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
+          v-show="hover.isHovering"
+        >
+          <span class="font-bold">{{ props.media?.year }}</span>
+          <h1 class="text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
+            {{ props.media?.title }}
+          </h1>
+          <p class="leading-4 line-clamp-4 overflow-hidden text-ellipsis ...">
+            {{ props.media?.overview }}
+          </p>
+          <div class="flex align-center justify-between">
+            <IconBtn icon="mdi-magnify" color="white"
+            />
+            <IconBtn icon="mdi-heart" color="white" />
+          </div>
+        </VCardText>
+      </VImg>
+    </VCard>
+  </template>
+</VHover>
 </template>
 
 <style type="scss">