fix

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 }}

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>
 

src/components/cards/SubscribeCard.vue

@@ -8,10 +8,10 @@ const props = defineProps({
 });
 
 // 根据 type 返回不同的图标
-const getIcon = (type: string) => {
+const getIcon = () => {
-  if (type === "电影") {
+  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) => {
+const getPercentage = () => {
-  if (total === 0) {
+  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
+  <VCard :key="props.media?.id">
-    :key="props.media?.id"
+    <template #image>
-    :image="props.media?.backdrop || props.media?.poster"
+      <VImg :src="props.media?.backdrop || props.media?.poster" aspect-ratio="2/3" cover class="brightness-50" />
-    class="card-with-overlay"
+    </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
+        <IconBtn icon="mdi-progress-clock" color="white" class="me-1" v-if="props.media?.total_episode" />
-          icon="mdi-progress-clock"
+        <span class="text-subtitle-2 text-white" v-if="props.media?.season">{{ (props.media?.total_episode || 0) -
-          color="white"
+          (props.media?.lack_episode || 0) }} /
-          class="me-1"
+          {{ props.media?.total_episode }}</span>
-          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
+    <VProgressLinear v-if="getPercentage() > 0" :model-value="getPercentage()" bg-color="success" color="success" />
-      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"
-    />
   </VCard>
 </template>
-
-<style lang="scss">
-.card-with-overlay img {
-  @apply brightness-50;
-}
-</style>

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>

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>