From 8ee6b0900f900ef927db1bd592daa113371c946f Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sun, 2 Jul 2023 11:18:34 +0800
Subject: [PATCH] fix

---
 src/components/cards/MediaCard.vue        |  2 +-
 src/components/cards/SiteCard.vue         |  6 +--
 src/components/cards/SubscribeCard.vue    | 52 +++++++----------------
 src/views/site/SiteCardListView.vue       |  1 +
 src/views/subscribe/SubscribeListView.vue |  1 +
 5 files changed, 22 insertions(+), 40 deletions(-)

diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index 397fd5f3..6927d3e0 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -151,7 +151,7 @@ onMounted(checkSubscribe);
             variant="elevated"
             size="small"
             v-if="props.media?.vote_average"
-            :class="getChipColor('')"
+            :class="getChipColor('rating')"
             class="absolute right-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
           >
             {{ props.media?.vote_average }}
diff --git a/src/components/cards/SiteCard.vue b/src/components/cards/SiteCard.vue
index cd4a5036..c1873ca0 100644
--- a/src/components/cards/SiteCard.vue
+++ b/src/components/cards/SiteCard.vue
@@ -12,16 +12,16 @@ const props = defineProps({
 const siteIcon = ref<string>("");
 
 // 查询站点图标
-const getSiteIcon = async (siteid: number) => {
+const getSiteIcon = async () => {
   try {
-    siteIcon.value = (await api.get("site/icon/" + siteid)).data.icon;
+    siteIcon.value = (await api.get("site/icon/" + props.site?.id)).data.icon;
   } catch (error) {
     console.error(error);
   }
 };
 
 onMounted(() => {
-  getSiteIcon(props.site?.id ?? 0);
+  getSiteIcon();
 });
 </script>
 
diff --git a/src/components/cards/SubscribeCard.vue b/src/components/cards/SubscribeCard.vue
index 503d37bd..06c8a869 100644
--- a/src/components/cards/SubscribeCard.vue
+++ b/src/components/cards/SubscribeCard.vue
@@ -8,10 +8,10 @@ const props = defineProps({
 });
 
 // 根据 type 返回不同的图标
-const getIcon = (type: string) => {
-  if (type === "电影") {
+const getIcon = () => {
+  if (props.media?.type === "电影") {
     return "mdi-movie";
-  } else if (type === "电视剧") {
+  } else if (props.media?.type === "电视剧") {
     return "mdi-television-classic";
   } else {
     return "mdi-help-circle";
@@ -19,23 +19,22 @@ const getIcon = (type: string) => {
 };
 
 // 计算百分比
-const getPercentage = (total: number, lack: number) => {
-  if (total === 0) {
+const getPercentage = () => {
+  if (props.media?.total_episode === 0) {
     return 0;
   }
-  return Math.round(((total - lack) / total) * 100);
+  return Math.round((((props.media?.total_episode || 0) - (props.media?.lack_episode || 0)) / (props.media?.total_episode || 1)) * 100);
 };
 </script>
 
 <template>
-  <VCard
-    :key="props.media?.id"
-    :image="props.media?.backdrop || props.media?.poster"
-    class="card-with-overlay"
-  >
+  <VCard :key="props.media?.id">
+    <template #image>
+      <VImg :src="props.media?.backdrop || props.media?.poster" aspect-ratio="2/3" cover class="brightness-50" />
+    </template>
     <VCardItem>
       <template #prepend>
-        <VIcon size="1.9rem" color="white" :icon="getIcon(props.media?.type || '')" />
+        <VIcon size="1.9rem" color="white" :icon="getIcon()" />
       </template>
       <VCardTitle class="text-white">
         {{ props.media?.name }}
@@ -59,32 +58,13 @@ const getPercentage = (total: number, lack: number) => {
         <IconBtn icon="mdi-star" color="white" class="me-1" />
         <span class="text-subtitle-2 text-white me-4">{{ props.media?.vote }}</span>
 
-        <IconBtn
-          icon="mdi-progress-clock"
-          color="white"
-          class="me-1"
-          v-if="props.media?.total_episode"
-        />
-        <span class="text-subtitle-2 text-white" v-if="props.media?.season"
-          >{{ (props.media?.total_episode || 0) - (props.media?.lack_episode || 0) }} /
-          {{ props.media?.total_episode }}</span
-        >
+        <IconBtn icon="mdi-progress-clock" color="white" class="me-1" v-if="props.media?.total_episode" />
+        <span class="text-subtitle-2 text-white" v-if="props.media?.season">{{ (props.media?.total_episode || 0) -
+          (props.media?.lack_episode || 0) }} /
+          {{ props.media?.total_episode }}</span>
       </div>
     </VCardText>
 
-    <VProgressLinear
-      v-if="props.media?.lack_episode || 0 > 0"
-      :model-value="
-        getPercentage(props.media?.total_episode || 0, props.media?.lack_episode || 0)
-      "
-      bg-color="success"
-      color="success"
-    />
+    <VProgressLinear v-if="getPercentage() > 0" :model-value="getPercentage()" bg-color="success" color="success" />
   </VCard>
 </template>
-
-<style lang="scss">
-.card-with-overlay img {
-  @apply brightness-50;
-}
-</style>
diff --git a/src/views/site/SiteCardListView.vue b/src/views/site/SiteCardListView.vue
index d0f21867..d4d7d2ff 100644
--- a/src/views/site/SiteCardListView.vue
+++ b/src/views/site/SiteCardListView.vue
@@ -28,5 +28,6 @@ onMounted(fetchData);
 <style type="scss">
 .grid-site-card {
   grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  padding-block-end: 1rem;
 }
 </style>
diff --git a/src/views/subscribe/SubscribeListView.vue b/src/views/subscribe/SubscribeListView.vue
index afbf2420..36c03fa3 100644
--- a/src/views/subscribe/SubscribeListView.vue
+++ b/src/views/subscribe/SubscribeListView.vue
@@ -51,5 +51,6 @@ const filteredDataList = computed(() => {
 <style type="scss">
 .grid-subscribe-card {
   grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  padding-block-end: 1rem;
 }
 </style>