From b654aaa9b1aa912806639ca7c0fb6f153ac0007f Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Fri, 30 Jun 2023 09:25:03 +0800
Subject: [PATCH] fix rank title

---
 src/components/cards/MediaCard.vue |   4 +-
 src/pages/ranking.vue              | 101 ++++++++++++++++++++---------
 2 files changed, 74 insertions(+), 31 deletions(-)

diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index f8c08a71..44a10cd6 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -29,11 +29,13 @@ const getChipColor = (type: string) => {
       <VImg
         aspect-ratio="3/2"
         :src="props.media?.poster_path"
-        lazy-src="https://picsum.photos/seed/picsum/200/300"
         class="h-full w-full object-cover"
         :class="hover.isHovering ? 'on-hover' : ''"
         cover
       >
+        <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" 
diff --git a/src/pages/ranking.vue b/src/pages/ranking.vue
index 61864b4d..d7a4bb43 100644
--- a/src/pages/ranking.vue
+++ b/src/pages/ranking.vue
@@ -1,43 +1,84 @@
 <script setup lang="ts">
-import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue';
+import MediaCardSlideView from "@/views/discover/MediaCardSlideView.vue";
 </script>
 
 <template>
   <div>
-    <RouterLink to="/browse/tmdb/trending" class="text-2xl font-weight-medium my-4">
-      流行趋势
-    </RouterLink>
-    <MediaCardSlideView apipath="tmdb/trending"/>
+    <div class="slider-header">
+      <RouterLink to="/browse/tmdb/trending" class="slider-title">
+        <span>流行趋势</span>
+        <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
+      </RouterLink>
+    </div>
+    <MediaCardSlideView apipath="tmdb/trending" />
 
-    <RouterLink to="/browse/tmdb/movies" class="text-2xl font-weight-medium my-5">
-      热门电影
-    </RouterLink>
-    <MediaCardSlideView apipath="tmdb/movies"/>
+    <div class="slider-header">
+      <RouterLink to="/browse/tmdb/movies" class="slider-title">
+        <span>热门电影</span>
+        <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
+      </RouterLink>
+    </div>
+    <MediaCardSlideView apipath="tmdb/movies" />
 
-    <RouterLink to="/browse/tmdb/tvs" class="text-2xl font-weight-medium my-5">
-      热门电视剧
-    </RouterLink>
-    <MediaCardSlideView apipath="tmdb/tvs"/>
+    <div class="slider-header">
+      <RouterLink to="/browse/tmdb/tvs" class="slider-title">
+        <span>热门电视剧</span>
+        <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
+      </RouterLink>
+    </div>
+    <MediaCardSlideView apipath="tmdb/tvs" />
 
-    <RouterLink to="/browse/douban/movies" class="text-2xl font-weight-medium my-5">
-      最新电影
-    </RouterLink>
-    <MediaCardSlideView apipath="douban/movies"/>
+    <div class="slider-header">
+      <RouterLink to="/browse/douban/movies" class="slider-title">
+        <span>最新电影</span>
+        <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
+      </RouterLink>
+    </div>
+    <MediaCardSlideView apipath="douban/movies" />
 
-    <RouterLink to="/browse/douban/tvs" class="text-2xl font-weight-medium my-5">
-      最新电视剧
-    </RouterLink>
-    <MediaCardSlideView apipath="douban/tvs"/>
+    <div class="slider-header">
+      <RouterLink to="/browse/douban/tvs" class="slider-title">
+        <span>最新电视剧</span>
+        <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
+      </RouterLink>
+    </div>
+    <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 class="slider-header">
+      <RouterLink to="/browse/douban/tv_weekly_chinese" class="slider-title">
+        <span>国产剧集榜</span>
+        <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
+      </RouterLink>
+    </div>
+    <MediaCardSlideView apipath="douban/tv_weekly_chinese" />
 
+    <div class="slider-header">
+      <RouterLink to="/browse/douban/tv_weekly_global" class="slider-title">
+        <span>全球剧集榜</span>
+        <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
+      </RouterLink>
+    </div>
+    <MediaCardSlideView apipath="douban/tv_weekly_global" />
   </div>
 </template>
+
+<style type="text/css">
+.slider-header {
+  position: relative;
+  display: flex;
+  margin-block: 1.5rem 1rem;
+}
+
+.slider-title {
+  --tw-text-opacity: 1;
+
+  display: inline-flex;
+  align-items: center;
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1.75rem;
+  transition-duration: 0.3s;
+
+  @apply text-gray-600;
+}
+</style>