fix discover

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"

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: '资源搜索',

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">
+    <RouterLink to="/browse/tmdb/trending" class="text-2xl font-weight-medium my-4">
-      TMDB流行趋势
+      流行趋势
-    </p>
+    </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>

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
-        <MediaCard
+        :media="data"
-          :media="data" 
+      />
-          @click="toggle"
-          class="mx-2 media-slide-card" 
-          :color="isSelected ? 'primary' : 'grey-lighten-1'"
-        >
-        </MediaCard>
-      </template>
     </VSlideGroupItem>
   </VSlideGroup>
 </template>
+
+<style type="scss">
+.v-slide-group .v-card {
+  block-size: 15rem;
+
+  @apply m-2;
+}
+</style>