From 65f1eda0f4fb9c38cb13c75208410c4934f32d69 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 29 Jun 2023 16:59:54 +0800
Subject: [PATCH] fix mediacard

---
 src/components/cards/MediaCard.vue | 92 ++++++++++++++++++------------
 1 file changed, 54 insertions(+), 38 deletions(-)

diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index dc5398fb..4c2d409a 100644
--- a/src/components/cards/MediaCard.vue
+++ b/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
-    class="card-img-overlay"
-  >
-    <VImg
-      aspect-ratio="2/1"
-      :src="props.media?.poster_path"
-      cover
+  <VHover v-bind="props">
+  <template #default="hover" >
+    <VCard
+      v-bind="hover.props"
+      class="outline-none ring-1 transition duration-300 shadow ring-gray-500"
+      :class="hover.isHovering ? 'scale-105 shadow-lg' : ''"
     >
-      <VChip
-        color="success"
-        variant="elevated" 
-        size="small" 
-        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"
+      <VImg
+        aspect-ratio="2/1"
+        :src="props.media?.poster_path"
+        cover
       >
-        <span class="text-white font-bold">{{ props.media?.year }}</span>
-        <h1 class="text-white font-bold text-lg line-clamp-2 overflow-hidden text-ellipsis ...">
-          {{ props.media?.title }}
-        </h1>
-        <p class="text-white line-clamp-3 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>
+        <VChip
+          variant="elevated" 
+          size="small" 
+          :class="getChipColor(props.media?.type||'')"
+          class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold">
+            {{ props.media?.type }}
+        </VChip>
+        <VChip
+          variant="elevated" 
+          size="small" 
+          class="absolute right-2 top-2 bg-opacity-80 shadow-md bg-green-500 border-green-600 text-white font-bold">
+            {{ props.media?.vote_average }}
+        </VChip>
+        <VCardText
+          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">