优化卡片组件样式

src/components/cards/BackdropCard.vue

@@ -53,11 +53,11 @@ const getImgUrl = computed(() => {
                 class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
               >
                 <h1
-                  class="mb-1 text-white text-shadow font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ..."
+                  class="mb-1 text-white text-shadow font-bold text-lg line-clamp-2 overflow-hidden text-ellipsis ..."
                 >
                   {{ props.media?.title }}
                 </h1>
-                <span class="text-shadow">{{ props.media?.subtitle }}</span>
+                <span class="text-shadow text-sm">{{ props.media?.subtitle }}</span>
               </VCardText>
             </template>
           </VImg>

src/components/cards/MediaCard.vue

@@ -468,11 +468,11 @@ onBeforeUnmount(() => {
             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 ...">
+            <span class="font-semibold text-sm">{{ props.media?.year }}</span>
+            <h1 class="mb-1 text-white font-bold text-lg line-clamp-1 overflow-hidden text-ellipsis ...">
               {{ props.media?.title }}
             </h1>
-            <p class="leading-4 line-clamp-4 overflow-hidden text-ellipsis ...">
+            <p class="line-clamp-3 overflow-hidden text-sm text-ellipsis ...">
               {{ props.media?.overview }}
             </p>
             <div v-if="props.media?.collection_id" class="mb-3" @click.stop=""></div>
@@ -481,10 +481,16 @@ onBeforeUnmount(() => {
                 v-if="hasPermission({ is_superuser: userStore.superUser, ...userStore.permissions }, 'search')"
                 icon="mdi-magnify"
                 color="white"
+                size="small"
                 @click.stop="clickSearch"
               />
               <VSpacer />
-              <IconBtn icon="mdi-heart" :color="isSubscribed ? 'error' : 'white'" @click.stop="handleSubscribe" />
+              <IconBtn
+                icon="mdi-heart"
+                :color="isSubscribed ? 'error' : 'white'"
+                size="small"
+                @click.stop="handleSubscribe"
+              />
             </div>
           </VCardText>
           <!-- 类型角标 -->

src/components/cards/PersonCard.vue

@@ -90,7 +90,7 @@ function goPersonDetail() {
             <div class="absolute inset-0 flex h-full w-full flex-col items-center p-2">
               <div class="relative mt-2 mb-4 flex h-1/2 w-full justify-center">
                 <VAvatar
-                  size="120"
+                  size="90"
                   :class="{
                     'ring-1 ring-gray-700': isImageLoaded,
                   }"

src/components/cards/PosterCard.vue

@@ -80,8 +80,8 @@ function goPlay(isHovering: boolean | null = false) {
           style="background: linear-gradient(rgba(45, 55, 72, 40%) 0%, rgba(45, 55, 72, 90%) 100%)"
           @click.stop="goPlay(hover.isHovering)"
         >
-          <span class="font-bold">{{ props.media?.subtitle }}</span>
-          <h1 class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
+          <span class="font-semibold text-sm">{{ props.media?.subtitle }}</span>
+          <h1 class="mb-1 text-white font-bold text-lg line-clamp-2 overflow-hidden text-ellipsis ...">
             {{ props.media?.title }}
           </h1>
         </VCardText>

src/components/cards/SubscribeCard.vue

@@ -445,6 +445,6 @@ function onSubscribeEditRemove() {
 </template>
 <style lang="scss" scoped>
 .subscribe-card-background {
-  background-image: linear-gradient(90deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
+  background-image: linear-gradient(180deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
 }
 </style>

src/components/cards/SubscribeShareCard.vue

@@ -189,6 +189,6 @@ function doDelete() {
 </template>
 <style lang="scss" scoped>
 .subscribe-card-background {
-  background-image: linear-gradient(90deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
+  background-image: linear-gradient(180deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
 }
 </style>