GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-11 18:10:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix rank title

Browse Source
This commit is contained in:
jxxghp
2023-06-30 09:25:03 +08:00
parent 8c5dfd1681
commit b654aaa9b1
2 changed files with 74 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/cards/MediaCard.vue
View File

@@ -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"

101
src/pages/ranking.vue
View File

@@ -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>