From 4eacc7187d1689f4506280ad60d762079e0c869a Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Fri, 30 Jun 2023 07:14:58 +0800
Subject: [PATCH] fix discover

---
 src/components/cards/MediaCard.vue            |  6 ++-
 .../DefaultLayoutWithVerticalNav.vue          | 29 ---------------
 src/pages/ranking.vue                         | 37 +++++++++++++++++--
 src/views/discover/MediaCardSlideView.vue     | 22 ++++++-----
 4 files changed, 50 insertions(+), 44 deletions(-)

diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index 6ae27333..00c56ab8 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -33,6 +33,7 @@ const getChipColor = (type: string) => {
         :class="hover.isHovering ? 'on-hover' : ''"
         cover
       >
+        <!-- 类型角标 -->
         <VChip
           variant="elevated" 
           size="small" 
@@ -40,13 +41,16 @@ const getChipColor = (type: string) => {
           class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold">
             {{ props.media?.type }}
         </VChip>
+        <!-- 评分角标 -->
         <VChip
           variant="elevated" 
-          size="small" 
+          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"
diff --git a/src/layouts/components/DefaultLayoutWithVerticalNav.vue b/src/layouts/components/DefaultLayoutWithVerticalNav.vue
index f30600c0..1fd457ba 100644
--- a/src/layouts/components/DefaultLayoutWithVerticalNav.vue
+++ b/src/layouts/components/DefaultLayoutWithVerticalNav.vue
@@ -83,35 +83,6 @@ import UserProfile from '@/layouts/components/UserProfile.vue'
           to: '/ranking',
         }"
       />
-      <VerticalNavLink
-        :item="{
-          title: 'TMDB电影',
-          icon: 'mdi-movie-outline',
-          to: '/browse/tmdb/movies',
-        }"
-      />
-      <VerticalNavLink
-        :item="{
-          title: 'TMDB电视剧',
-          icon: 'mdi-television-classic',
-          to: '/browse/tmdb/tvs',
-        }"
-      />
-      <VerticalNavLink
-        :item="{
-          title: '豆瓣电影',
-          icon: 'mdi-movie-outline',
-          to: '/browse/douban/movies',
-        }"
-      />
-      <VerticalNavLink
-        :item="{
-          title: '豆瓣电视剧',
-          icon: 'mdi-television-classic',
-          to: '/browse/douban/tvs',
-        }"
-      />
-
       <VerticalNavLink
         :item="{
           title: '资源搜索',
diff --git a/src/pages/ranking.vue b/src/pages/ranking.vue
index b2909d3b..61864b4d 100644
--- a/src/pages/ranking.vue
+++ b/src/pages/ranking.vue
@@ -4,11 +4,40 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue';
 
 <template>
   <div>
-    <p class="text-2xl font-weight-medium my-5">
-      TMDB流行趋势
-    </p>
-
+    <RouterLink to="/browse/tmdb/trending" class="text-2xl font-weight-medium my-4">
+      流行趋势
+    </RouterLink>
     <MediaCardSlideView apipath="tmdb/trending"/>
 
+    <RouterLink to="/browse/tmdb/movies" class="text-2xl font-weight-medium my-5">
+      热门电影
+    </RouterLink>
+    <MediaCardSlideView apipath="tmdb/movies"/>
+
+    <RouterLink to="/browse/tmdb/tvs" class="text-2xl font-weight-medium my-5">
+      热门电视剧
+    </RouterLink>
+    <MediaCardSlideView apipath="tmdb/tvs"/>
+
+    <RouterLink to="/browse/douban/movies" class="text-2xl font-weight-medium my-5">
+      最新电影
+    </RouterLink>
+    <MediaCardSlideView apipath="douban/movies"/>
+
+    <RouterLink to="/browse/douban/tvs" class="text-2xl font-weight-medium my-5">
+      最新电视剧
+    </RouterLink>
+    <MediaCardSlideView apipath="douban/tvs"/>
+
+    <RouterLink to="/browse/douban/tv_weekly_chinese" class="text-2xl font-weight-medium my-5">
+      国产剧集榜
+    </RouterLink>
+    <MediaCardSlideView apipath="douban/tv_weekly_chinese"/>
+
+    <RouterLink to="/browse/douban/tv_weekly_global" class="text-2xl font-weight-medium my-5">
+      全球剧集榜
+    </RouterLink>
+    <MediaCardSlideView apipath="douban/tv_weekly_global"/>
+
   </div>
 </template>
diff --git a/src/views/discover/MediaCardSlideView.vue b/src/views/discover/MediaCardSlideView.vue
index 1067c4be..98b237ab 100644
--- a/src/views/discover/MediaCardSlideView.vue
+++ b/src/views/discover/MediaCardSlideView.vue
@@ -30,20 +30,22 @@ onMounted(fetchData);
 
 <template>
   <VSlideGroup
-    show-arrows
+  show-arrows=false
   >
     <VSlideGroupItem v-for="data in dataList" 
       :key="data.tmdb_id"
     >
-      <template v-slot="{ isSelected, toggle }" >
-        <MediaCard
-          :media="data" 
-          @click="toggle"
-          class="mx-2 media-slide-card" 
-          :color="isSelected ? 'primary' : 'grey-lighten-1'"
-        >
-        </MediaCard>
-      </template>
+      <MediaCard
+        :media="data"
+      />
     </VSlideGroupItem>
   </VSlideGroup>
 </template>
+
+<style type="scss">
+.v-slide-group .v-card {
+  block-size: 15rem;
+
+  @apply m-2;
+}
+</style>