From 4f28018f4f9dcf35278ea1c99836d858a6921613 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sun, 17 Nov 2024 16:54:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(MediaCard):=20=E6=B7=BB=E5=8A=A0=E5=AA=92?=
 =?UTF-8?q?=E4=BD=93=E5=8D=A1=E8=AF=A6=E6=83=85=E5=B1=95=E7=A4=BA=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=82=AC=E5=81=9C=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/cards/MediaCard.vue | 43 +++++++++++++-----------------
 1 file changed, 19 insertions(+), 24 deletions(-)

diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index ff6cd459..ecbfbbb3 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -422,7 +422,6 @@ function onRemoveSubscribe() {
           aspect-ratio="2/3"
           :src="getImgUrl"
           class="object-cover aspect-w-2 aspect-h-3"
-          :class="hover.isHovering ? 'on-hover' : ''"
           cover
           @load="isImageLoaded = true"
           @error="imageLoadError = true"
@@ -433,6 +432,24 @@ function onRemoveSubscribe() {
             </div>
           </template>
         </VImg>
+        <!-- 详情 -->
+        <VCardText
+          v-show="hover.isHovering || imageLoadError"
+          class="w-full h-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
+          style="background: linear-gradient(rgba(45, 55, 72, 40%) 0%, rgba(45, 55, 72, 90%) 100%)"
+        >
+          <span class="font-bold">{{ props.media?.year }}</span>
+          <h1 class="mb-1 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" @click.stop="handleSearch" />
+            <IconBtn icon="mdi-heart" :color="isSubscribed ? 'error' : 'white'" @click.stop="handleSubscribe" />
+          </div>
+        </VCardText>
         <!-- 类型角标 -->
         <VChip
           v-show="isImageLoaded"
@@ -455,23 +472,7 @@ function onRemoveSubscribe() {
         >
           {{ props.media?.vote_average }}
         </VChip>
-        <!-- 详情 -->
-        <VCardText
-          v-show="hover.isHovering || imageLoadError"
-          class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
-        >
-          <span class="font-bold">{{ props.media?.year }}</span>
-          <h1 class="mb-1 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" @click.stop="handleSearch" />
-            <IconBtn icon="mdi-heart" :color="isSubscribed ? 'error' : 'white'" @click.stop="handleSubscribe" />
-          </div>
-        </VCardText>
+        <!--来源图标-->
         <VAvatar
           size="24"
           density="compact"
@@ -551,9 +552,3 @@ function onRemoveSubscribe() {
     @remove="onRemoveSubscribe"
   />
 </template>
-
-<style lang="scss">
-.on-hover img {
-  @apply brightness-50;
-}
-</style>