fix safari card style

.vscode/settings.json

@@ -24,7 +24,7 @@
     },
     // Vue
     "[vue]": {
-        "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+        "editor.defaultFormatter": "Wscats.vue",
     },
     // Extension: Volar
     "volar.preview.port": 3000,

package.json

@@ -54,6 +54,7 @@
     "@iconify/tools": "^2.2.0",
     "@iconify/vue": "4.1.1",
     "@intlify/unplugin-vue-i18n": "^0.10.0",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
     "@types/node": "^20.1.4",
     "@types/webfontloader": "^1.6.34",
     "@typescript-eslint/eslint-plugin": "^5.59.5",

src/components/cards/MediaCard.vue

@@ -3,7 +3,9 @@ import { MediaInfo } from "@/api/types";
 
 // 输入参数
 const props = defineProps({
-  media: Object as PropType<MediaInfo>
+  media: Object as PropType<MediaInfo>,
+  width: String,
+  height: String,
 });
 
 // 图片加载状态
@@ -18,71 +20,86 @@ const getChipColor = (type: string) => {
     return "border-purple-600 bg-purple-600";
   }
 };
-
 </script>
 
 <template>
   <VHover v-bind="props">
-  <template #default="hover" >
-    <VCard
-      v-bind="hover.props"
-      class="outline-none shadow ring-gray-500"
-      :class="{ 'scale-105 shadow-lg': hover.isHovering, 'ring-1 transition duration-300 ': isImageLoaded }"
-    >
-      <VImg
-        aspect-ratio="3/2"
-        :src="props.media?.poster_path"
-        class="h-full w-full object-cover"
-        :class="hover.isHovering ? 'on-hover' : ''"
-        cover
-        @load="isImageLoaded = true"
+    <template #default="hover">
+      <VCard
+        v-bind="hover.props"
+        :height="props.height"
+        :width="props.width"
+        class="outline-none shadow ring-gray-500"
+        :class="{
+          'scale-105 shadow-lg': hover.isHovering,
+          'ring-1 transition duration-300 ': isImageLoaded,
+        }"
       >
-        <template #placeholder>
-          <div class="relative animate-pulse bg-gray-300 w-full"><div class="w-full" style="padding-bottom: 150%;"></div></div>
-        </template>
-        <!-- 类型角标 -->
-        <VChip
-          variant="elevated" 
-          size="small" 
-          :class="getChipColor(props.media?.type||'')"
-          class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold">
-            {{ props.media?.type }}
-        </VChip>
-        <!-- 评分角标 -->
-        <VChip
-          variant="elevated" 
-          size="small"
-          v-if="props.media?.vote_average"
-          :class="getChipColor('')"
-          class="absolute right-2 top-2 bg-opacity-80 shadow-md text-white font-bold">
-            {{ props.media?.vote_average }}
-        </VChip>
-        <!-- 详情 -->
-        <VCardText
-          class="flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
-          v-show="hover.isHovering"
+        <VImg
+          aspect-ratio="2/3"
+          :src="props.media?.poster_path"
+          class="object-cover aspect-w-2 aspect-h-3"
+          :class="hover.isHovering ? 'on-hover' : ''"
+          @load="isImageLoaded = true"
+          cover
         >
-          <span class="font-bold">{{ props.media?.year }}</span>
-          <h1 class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
-            {{ props.media?.title }}
-          </h1>
-          <p class="leading-4 line-clamp-4 overflow-hidden text-ellipsis ...">
-            {{ props.media?.overview }}
-          </p>
-          <div class="flex align-center justify-between">
-            <IconBtn icon="mdi-magnify" color="white"
-            />
-            <IconBtn icon="mdi-heart" color="white" />
-          </div>
-        </VCardText>
-      </VImg>
-    </VCard>
-  </template>
-</VHover>
+          <template #placeholder>
+            <div class="relative animate-pulse bg-gray-300 w-full">
+              <div class="w-full h-full"></div>
+            </div>
+          </template>
+          <!-- 类型角标 -->
+          <VChip
+            variant="elevated"
+            size="small"
+            :class="getChipColor(props.media?.type || '')"
+            class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
+          >
+            {{ props.media?.type }}
+          </VChip>
+          <!-- 评分角标 -->
+          <VChip
+            variant="elevated"
+            size="small"
+            v-if="props.media?.vote_average"
+            :class="getChipColor('')"
+            class="absolute right-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
+          >
+            {{ props.media?.vote_average }}
+          </VChip>
+          <!-- 详情 -->
+          <VCardText
+            class="flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
+            v-show="hover.isHovering"
+          >
+            <span class="font-bold">{{ props.media?.year }}</span>
+            <h1
+              class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ..."
+            >
+              {{ props.media?.title }}
+            </h1>
+            <p class="leading-4 line-clamp-4 overflow-hidden text-ellipsis ...">
+              {{ props.media?.overview }}
+            </p>
+            <div class="flex align-center justify-between">
+              <IconBtn icon="mdi-magnify" color="white" />
+              <IconBtn icon="mdi-heart" color="white" />
+            </div>
+          </VCardText>
+        </VImg>
+      </VCard>
+    </template>
+  </VHover>
 </template>
 
 <style type="scss">
 .on-hover img {
   @apply brightness-50;
 }
+
+.media-slide-card {
+  position: relative;
+  flex: 0 0 auto;
+  max-inline-size: 11rem;
+}
 </style>

src/styles/styles.scss

@@ -2,17 +2,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-.grid-media-card {
-  grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
-}
-
-.media-slide-card {
-  position: relative;
-  flex: 0 0 auto;
-  max-width: 11rem;
-}
-
-.grid-subscribe-card {
-  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-}

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>

tailwind.config.js

@@ -4,6 +4,12 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  corePlugins: {
+    aspectRatio: false,
+  },
+  plugins: [
+    require('@tailwindcss/aspect-ratio'),
+    // ...
+  ],
 }
 

yarn.lock

@@ -1792,6 +1792,11 @@
     magic-string "^0.25.0"
     string.prototype.matchall "^4.0.6"
 
+"@tailwindcss/aspect-ratio@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz#9ffd52fee8e3c8b20623ff0dcb29e5c21fb0a9ba"
+  integrity sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==
+
 "@trysound/sax@0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"