From e4f3bf699a018fc245cb399c0c2c2a16eefef99b Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 29 Jun 2023 08:25:49 +0800
Subject: [PATCH] fix cards

---
 src/styles/styles.scss                    |   4 +
 src/views/discover/MediaCardListView.vue  |   4 +-
 src/views/subscribe/SubscribeListView.vue | 113 +++++++++++-----------
 3 files changed, 64 insertions(+), 57 deletions(-)

diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 39dd4777..5f0a065f 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -12,3 +12,7 @@
   flex: 0 0 auto;
   max-width: 11rem;
 }
+
+.grid-subscribe-card {
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+}
diff --git a/src/views/discover/MediaCardListView.vue b/src/views/discover/MediaCardListView.vue
index dbc01a19..bd378421 100644
--- a/src/views/discover/MediaCardListView.vue
+++ b/src/views/discover/MediaCardListView.vue
@@ -30,7 +30,9 @@ onMounted(fetchData);
 
 <template>
   <div class="grid gap-3 grid-media-card">
-    <MediaCard v-for="data in dataList" :key="data.tmdb_id" :media="data">
+    <MediaCard v-for="data in dataList" 
+      :key="data.tmdb_id" 
+      :media="data">
     </MediaCard>
   </div>
 </template>
diff --git a/src/views/subscribe/SubscribeListView.vue b/src/views/subscribe/SubscribeListView.vue
index 14a2f9bf..1fcb6039 100644
--- a/src/views/subscribe/SubscribeListView.vue
+++ b/src/views/subscribe/SubscribeListView.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import api from "@/api";
-import { formatSeason } from "@core/utils/formatters";
 import type { Subscribe } from "@/api/types";
+import { formatSeason } from "@core/utils/formatters";
 
 // 输入参数
 const props = defineProps({
@@ -49,63 +49,64 @@ const getPercentage = (total: number, lack: number) => {
 </script>
 
 <template>
-  <VRow>
-    <VCol v-for="data in filteredDataList" :key="data.id" cols="12" md="6" lg="4">
-      <VCard :image="data.backdrop || data.poster" class="card-with-overlay">
-        <VCardItem>
-          <template #prepend>
-            <VIcon
-              size="1.9rem"
-              color="white"
-              :icon="getIcon(data.type)"
-              class="overlay-text"
-            />
-          </template>
-          <VCardTitle class="text-white overlay-text">
-            {{ data.name }} {{ formatSeason(data.season ? data.season.toString() : "") }}
-          </VCardTitle>
-          <template #append>
-            <div class="me-n3">
-              <MoreBtn color="white" class="overlay-text"/>
-            </div>
-          </template>
-        </VCardItem>
-
-        <VCardText class="overlay-text">
-          <p class="clamp-text text-white mb-0">
-            {{ data.description }}
-          </p>
-        </VCardText>
-
-        <VCardText
-          class="d-flex justify-space-between align-center flex-wrap overlay-text"
-        >
-          <div class="d-flex align-center">
-            <IconBtn icon="mdi-star" color="white" class="me-1" />
-            <span class="text-subtitle-2 text-white me-4">{{ data.vote }}</span>
-
-            <IconBtn
-              icon="mdi-progress-clock"
-              color="white"
-              class="me-1"
-              v-if="data.total_episode"
-            />
-            <span class="text-subtitle-2 text-white" v-if="data.season"
-              >{{ (data.total_episode || 0) - (data.lack_episode || 0) }} /
-              {{ data.total_episode }}</span
-            >
+  <div class="grid gap-3 grid-subscribe-card">
+    <VCard v-for="data in filteredDataList" 
+      :key="data.id" 
+      :image="data.backdrop || data.poster" 
+      class="card-with-overlay">
+      <VCardItem>
+        <template #prepend>
+          <VIcon
+            size="1.9rem"
+            color="white"
+            :icon="getIcon(data.type)"
+            class="overlay-text"
+          />
+        </template>
+        <VCardTitle class="text-white overlay-text">
+          {{ data.name }} {{ formatSeason(data.season ? data.season.toString() : "") }}
+        </VCardTitle>
+        <template #append>
+          <div class="me-n3">
+            <MoreBtn color="white" class="overlay-text"/>
           </div>
-        </VCardText>
+        </template>
+      </VCardItem>
 
-        <VProgressLinear
-          v-if="data.total_episode || 0 > 0"
-          :model-value="getPercentage(data.total_episode || 0, data.lack_episode || 0)"
-          bg-color="success"
-          color="success"
-        />
-      </VCard>
-    </VCol>
-  </VRow>
+      <VCardText class="overlay-text">
+        <p class="clamp-text text-white mb-0">
+          {{ data.description }}
+        </p>
+      </VCardText>
+
+      <VCardText
+        class="d-flex justify-space-between align-center flex-wrap overlay-text"
+      >
+        <div class="d-flex align-center">
+          <IconBtn icon="mdi-star" color="white" class="me-1" />
+          <span class="text-subtitle-2 text-white me-4">{{ data.vote }}</span>
+
+          <IconBtn
+            icon="mdi-progress-clock"
+            color="white"
+            class="me-1"
+            v-if="data.total_episode"
+          />
+          <span class="text-subtitle-2 text-white" v-if="data.season"
+            >{{ (data.total_episode || 0) - (data.lack_episode || 0) }} /
+            {{ data.total_episode }}</span
+          >
+        </div>
+      </VCardText>
+
+      <VProgressLinear
+        v-if="data.total_episode || 0 > 0"
+        :model-value="getPercentage(data.total_episode || 0, data.lack_episode || 0)"
+        bg-color="success"
+        color="success"
+      />
+    </VCard>
+  </div>
 </template>
 
 <style lang="scss">