From 6691f40c496c6f384ac061c66e6b3e1a77188345 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 10 Jul 2025 22:00:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8D=A1=E7=89=87=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/cards/BackdropCard.vue       |  4 ++--
 src/components/cards/MediaCard.vue          | 14 ++++++++++----
 src/components/cards/PersonCard.vue         |  2 +-
 src/components/cards/PosterCard.vue         |  4 ++--
 src/components/cards/SubscribeCard.vue      |  2 +-
 src/components/cards/SubscribeShareCard.vue |  2 +-
 src/components/slide/SlideView.vue          |  6 +++---
 src/pages/recommend.vue                     |  9 +++++++--
 src/styles/custom.scss                      |  3 +--
 src/views/discover/MediaCardSlideView.vue   |  2 +-
 src/views/discover/PersonCardSlideView.vue  |  2 +-
 11 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/src/components/cards/BackdropCard.vue b/src/components/cards/BackdropCard.vue
index 8fbe4a20..ba62b633 100644
--- a/src/components/cards/BackdropCard.vue
+++ b/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>
diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index 1dfa72cb..26e66ad5 100644
--- a/src/components/cards/MediaCard.vue
+++ b/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>
           <!-- 类型角标 -->
diff --git a/src/components/cards/PersonCard.vue b/src/components/cards/PersonCard.vue
index 1e1bb607..71931416 100644
--- a/src/components/cards/PersonCard.vue
+++ b/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,
                   }"
diff --git a/src/components/cards/PosterCard.vue b/src/components/cards/PosterCard.vue
index fd500767..bbb1ad91 100644
--- a/src/components/cards/PosterCard.vue
+++ b/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>
diff --git a/src/components/cards/SubscribeCard.vue b/src/components/cards/SubscribeCard.vue
index 01a40462..836901d0 100644
--- a/src/components/cards/SubscribeCard.vue
+++ b/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>
diff --git a/src/components/cards/SubscribeShareCard.vue b/src/components/cards/SubscribeShareCard.vue
index 5aecc870..8db20044 100644
--- a/src/components/cards/SubscribeShareCard.vue
+++ b/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>
diff --git a/src/components/slide/SlideView.vue b/src/components/slide/SlideView.vue
index 71e57258..aad2e7a6 100644
--- a/src/components/slide/SlideView.vue
+++ b/src/components/slide/SlideView.vue
@@ -179,15 +179,15 @@ onActivated(() => {
 <style lang="scss" scoped>
 .slider-container {
   position: relative;
-  margin-block-end: 24px;
+  margin-block-end: 8px;
 }
 
 .slider-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
-  margin-block-end: 12px;
+  gap: 8px;
+  margin-block-end: 8px;
   padding-block: 0;
   padding-inline: 8px;
 
diff --git a/src/pages/recommend.vue b/src/pages/recommend.vue
index 7927d3aa..e37946d3 100644
--- a/src/pages/recommend.vue
+++ b/src/pages/recommend.vue
@@ -248,7 +248,13 @@ onActivated(async () => {
     </div>
 
     <!-- 设置面板 -->
-    <DialogWrapper v-model="dialog" width="35rem" class="settings-dialog" scrollable :fullscreen="!display.mdAndUp.value">
+    <DialogWrapper
+      v-model="dialog"
+      width="35rem"
+      class="settings-dialog"
+      scrollable
+      :fullscreen="!display.mdAndUp.value"
+    >
       <VCard class="settings-card">
         <VCardItem class="settings-card-header">
           <VCardTitle>
@@ -332,7 +338,6 @@ onActivated(async () => {
 }
 
 .content-group {
-  margin-block-end: 24px;
   transition: opacity 0.3s ease;
 }
 
diff --git a/src/styles/custom.scss b/src/styles/custom.scss
index 7d3866e3..50f51c02 100644
--- a/src/styles/custom.scss
+++ b/src/styles/custom.scss
@@ -102,7 +102,6 @@ body {
 .slider-header {
   position: relative;
   display: flex;
-  margin-block: 1.5rem 1rem;
 }
 
 .slider-title {
@@ -183,7 +182,7 @@ body {
 }
 
 .grid-media-card {
-  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
 }
 
 .grid-backdrop-card {
diff --git a/src/views/discover/MediaCardSlideView.vue b/src/views/discover/MediaCardSlideView.vue
index ea7e9ccf..ce074700 100644
--- a/src/views/discover/MediaCardSlideView.vue
+++ b/src/views/discover/MediaCardSlideView.vue
@@ -49,7 +49,7 @@ onActivated(() => {
   <SlideView v-if="componentLoaded">
     <template #content>
       <template v-for="data in dataList" :key="data.tmdb_id || data.douban_id || data.bangumi_id">
-        <MediaCard :media="data" height="15rem" width="10rem" />
+        <MediaCard :media="data" width="8rem" />
       </template>
     </template>
   </SlideView>
diff --git a/src/views/discover/PersonCardSlideView.vue b/src/views/discover/PersonCardSlideView.vue
index 3d969df6..f55691df 100644
--- a/src/views/discover/PersonCardSlideView.vue
+++ b/src/views/discover/PersonCardSlideView.vue
@@ -39,7 +39,7 @@ onMounted(fetchData)
   <SlideView v-if="componentLoaded">
     <template #content>
       <template v-for="data in dataList" :key="data.id">
-        <PersonCard :person="data" height="15rem" width="10rem" />
+        <PersonCard :person="data" width="8rem" />
       </template>
     </template>
   </SlideView>