From 0517a580add65e6b5259104c2ccc78b8c9349306 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Fri, 30 Jun 2023 10:17:17 +0800
Subject: [PATCH] fix card

---
 src/components/cards/MediaCard.vue |  8 +++++--
 src/pages/browse.vue               | 36 +++++++++++++++++++++++++++---
 src/pages/ranking.vue              | 17 +++++++-------
 3 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index 44a10cd6..349d00b5 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -6,6 +6,9 @@ const props = defineProps({
   media: Object as PropType<MediaInfo>
 });
 
+// 图片加载状态
+const isImageLoaded = ref(false);
+
 const getChipColor = (type: string) => {
   if (type === "电影") {
     return "border-blue-500 bg-blue-600";
@@ -23,8 +26,8 @@ const getChipColor = (type: string) => {
   <template #default="hover" >
     <VCard
       v-bind="hover.props"
-      class="outline-none ring-1 transition duration-300 shadow ring-gray-500"
-      :class="hover.isHovering ? 'scale-105 shadow-lg' : ''"
+      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"
@@ -32,6 +35,7 @@ const getChipColor = (type: string) => {
         class="h-full w-full object-cover"
         :class="hover.isHovering ? 'on-hover' : ''"
         cover
+        @load="isImageLoaded = true"
       >
         <template #placeholder>
           <div class="relative animate-pulse bg-gray-300 w-full"><div class="w-full" style="padding-bottom: 150%;"></div></div>
diff --git a/src/pages/browse.vue b/src/pages/browse.vue
index e5bd9525..ae9f3658 100644
--- a/src/pages/browse.vue
+++ b/src/pages/browse.vue
@@ -3,15 +3,45 @@ import MediaCardListView from '@/views/discover/MediaCardListView.vue';
 
 // 输入参数
 const props = defineProps({
-  type: Array as PropType<string[]>,
+  type: Array as PropType<string[]> | PropType<string>,
 });
 
-console.log(props.type);
+const titles: { [key: string]: any } = {
+  tmdb: {
+    trending: '流行趋势',
+    movies: '热门电影',
+    tvs: '热门电视剧',
+  },
+  douban: {
+    movies: '最新电影',
+    tvs: '最新电视剧',
+    tv_weekly_chinese: '国产剧集榜',
+    tv_weekly_global: '全球剧集榜',
+  },
+};
+
+const getApiPath = (types: string[] | string) => {
+  if (Array.isArray(types)) {
+    return types.join('/')
+  } else {
+    return types
+  }
+};
+
+const getTitle = (types: string[] | string) => {
+  if (Array.isArray(types)) {
+    return ['发现', titles[types[0]][types[1]]]
+  } else {
+    return ["发现"]
+  }
+};
+
 
 </script>
 
 <template>
   <div>
-    <MediaCardListView :apipath="props.type?.join('/')"/>
+    <VBreadcrumbs :items="getTitle(props.type||'')"></VBreadcrumbs>
+    <MediaCardListView :apipath="getApiPath(props.type||'')"/>
   </div>
 </template>
diff --git a/src/pages/ranking.vue b/src/pages/ranking.vue
index d7a4bb43..b844b81e 100644
--- a/src/pages/ranking.vue
+++ b/src/pages/ranking.vue
@@ -10,7 +10,7 @@ import MediaCardSlideView from "@/views/discover/MediaCardSlideView.vue";
         <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
       </RouterLink>
     </div>
-    <MediaCardSlideView apipath="tmdb/trending" />
+    <MediaCardSlideView apipath="tmdb/trending" class="mb-3" />
 
     <div class="slider-header">
       <RouterLink to="/browse/tmdb/movies" class="slider-title">
@@ -18,7 +18,7 @@ import MediaCardSlideView from "@/views/discover/MediaCardSlideView.vue";
         <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
       </RouterLink>
     </div>
-    <MediaCardSlideView apipath="tmdb/movies" />
+    <MediaCardSlideView apipath="tmdb/movies" class="mb-3" />
 
     <div class="slider-header">
       <RouterLink to="/browse/tmdb/tvs" class="slider-title">
@@ -26,7 +26,7 @@ import MediaCardSlideView from "@/views/discover/MediaCardSlideView.vue";
         <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
       </RouterLink>
     </div>
-    <MediaCardSlideView apipath="tmdb/tvs" />
+    <MediaCardSlideView apipath="tmdb/tvs" class="mb-3" />
 
     <div class="slider-header">
       <RouterLink to="/browse/douban/movies" class="slider-title">
@@ -34,7 +34,7 @@ import MediaCardSlideView from "@/views/discover/MediaCardSlideView.vue";
         <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
       </RouterLink>
     </div>
-    <MediaCardSlideView apipath="douban/movies" />
+    <MediaCardSlideView apipath="douban/movies" class="mb-3" />
 
     <div class="slider-header">
       <RouterLink to="/browse/douban/tvs" class="slider-title">
@@ -42,7 +42,7 @@ import MediaCardSlideView from "@/views/discover/MediaCardSlideView.vue";
         <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
       </RouterLink>
     </div>
-    <MediaCardSlideView apipath="douban/tvs" />
+    <MediaCardSlideView apipath="douban/tvs" class="mb-3" />
 
     <div class="slider-header">
       <RouterLink to="/browse/douban/tv_weekly_chinese" class="slider-title">
@@ -50,7 +50,7 @@ import MediaCardSlideView from "@/views/discover/MediaCardSlideView.vue";
         <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
       </RouterLink>
     </div>
-    <MediaCardSlideView apipath="douban/tv_weekly_chinese" />
+    <MediaCardSlideView apipath="douban/tv_weekly_chinese" class="mb-3" />
 
     <div class="slider-header">
       <RouterLink to="/browse/douban/tv_weekly_global" class="slider-title">
@@ -58,7 +58,7 @@ import MediaCardSlideView from "@/views/discover/MediaCardSlideView.vue";
         <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
       </RouterLink>
     </div>
-    <MediaCardSlideView apipath="douban/tv_weekly_global" />
+    <MediaCardSlideView apipath="douban/tv_weekly_global" class="mb-3" />
   </div>
 </template>
 
@@ -66,7 +66,8 @@ import MediaCardSlideView from "@/views/discover/MediaCardSlideView.vue";
 .slider-header {
   position: relative;
   display: flex;
-  margin-block: 1.5rem 1rem;
+
+  @apply mb-3;
 }
 
 .slider-title {