fix cards

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));
+}

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>

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,9 +49,11 @@ const getPercentage = (total: number, lack: number) => {
 </script>
 
 <template>
-  <VRow>
+  <div class="grid gap-3 grid-subscribe-card">
-    <VCol v-for="data in filteredDataList" :key="data.id" cols="12" md="6" lg="4">
+    <VCard v-for="data in filteredDataList" 
-      <VCard :image="data.backdrop || data.poster" class="card-with-overlay">
+      :key="data.id" 
+      :image="data.backdrop || data.poster" 
+      class="card-with-overlay">
       <VCardItem>
         <template #prepend>
           <VIcon
@@ -104,8 +106,7 @@ const getPercentage = (total: number, lack: number) => {
         color="success"
       />
     </VCard>
-    </VCol>
+  </div>
-  </VRow>
 </template>
 
 <style lang="scss">