fix safari card style

src/views/discover/MediaCardListView.vue

@@ -8,8 +8,6 @@ const props = defineProps({
   apipath: String,
 });
 
-console.log(props.apipath)
-
 // 当前页码
 const page = ref(1);
 // 是否加载中
@@ -22,8 +20,8 @@ const currData = ref<MediaInfo[]>([]);
 // 获取订阅列表数据
 const fetchData = async ({ done }) => {
   try {
-    if (!props.apipath){
-      return
+    if (!props.apipath) {
+      return;
     }
     // 如果正在加载中，直接返回
     if (loading.value) {
@@ -45,10 +43,9 @@ const fetchData = async ({ done }) => {
   } finally {
     // 取消加载中
     loading.value = false;
-    done('ok')
+    done("ok");
   }
 };
-
 </script>
 
 <template>
@@ -60,10 +57,13 @@ const fetchData = async ({ done }) => {
   >
     <template #loading />
     <div class="grid gap-4 grid-media-card mx-3">
-      <MediaCard v-for="data in dataList" 
-        :key="data.tmdb_id" 
-        :media="data">
-      </MediaCard>
+      <MediaCard v-for="data in dataList" :key="data.tmdb_id" :media="data"> </MediaCard>
     </div>
   </VInfiniteScroll>
 </template>
+
+<style type="scss">
+.grid-media-card {
+  grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
+}
+</style>

src/views/discover/MediaCardSlideView.vue

@@ -14,8 +14,8 @@ const dataList = ref<MediaInfo[]>([]);
 // 获取订阅列表数据
 const fetchData = async () => {
   try {
-    if (!props.apipath){
-      return
+    if (!props.apipath) {
+      return;
     }
     dataList.value = await api.get(props.apipath);
   } catch (error) {
@@ -25,41 +25,24 @@ const fetchData = async () => {
 
 // 加载时获取数据
 onMounted(fetchData);
-
 </script>
 
 <template>
-  <VSlideGroup
-  show-arrows=false
-  >
+  <VSlideGroup show-arrows="false">
     <template #prev>
-      <VBtn
-        class="rounded-circle shadow-none"
-        icon="mdi-chevron-left"
-        color="grey"
-      />
+      <VBtn class="rounded-circle shadow-none" icon="mdi-chevron-left" color="grey" />
     </template>
-    <VSlideGroupItem v-for="data in dataList" 
-      :key="data.tmdb_id"
-    >
-      <MediaCard
-        :media="data"
-      />
+    <VSlideGroupItem v-for="data in dataList" :key="data.tmdb_id">
+      <MediaCard :media="data" height="15rem" width="10rem" />
     </VSlideGroupItem>
     <template #next>
-      <VBtn
-        class="rounded-circle shadow-none"
-        icon="mdi-chevron-right"
-        color="grey"
-      />
+      <VBtn class="rounded-circle shadow-none" icon="mdi-chevron-right" color="grey" />
     </template>
   </VSlideGroup>
 </template>
 
 <style type="scss">
 .v-slide-group .v-card {
-  block-size: 15rem;
-
   @apply m-2;
 }
 

src/views/subscribe/SubscribeListView.vue

@@ -27,15 +27,16 @@ onMounted(fetchData);
 const filteredDataList = computed(() => {
   return dataList.value.filter((data) => data.type === props.type);
 });
-
 </script>
 
 <template>
   <div class="grid gap-3 grid-subscribe-card">
-    <SubscribeCard v-for="data in filteredDataList"
-      :key="data.id"
-      :media="data"
-    />
+    <SubscribeCard v-for="data in filteredDataList" :key="data.id" :media="data" />
   </div>
 </template>
 
+<style type="scss">
+.grid-subscribe-card {
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+}
+</style>