mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-08-28 11:37:29 +08:00
重写SlideView组件
This commit is contained in:
叮叮当
+40
-173
@@ -4,185 +4,52 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<MediaCardSlideView apipath="tmdb/trending">
|
||||
<template #title="{ loaded }">
|
||||
<div
|
||||
v-if="loaded"
|
||||
class="slider-header ms-1"
|
||||
>
|
||||
<RouterLink
|
||||
to="/browse/tmdb/trending?title=流行趋势"
|
||||
class="slider-title"
|
||||
>
|
||||
<span>流行趋势</span>
|
||||
<VIcon
|
||||
icon="mdi-arrow-right-circle-outline"
|
||||
class="ms-1"
|
||||
/>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
</MediaCardSlideView>
|
||||
<MediaCardSlideView
|
||||
apipath="tmdb/trending"
|
||||
linkurl="/browse/tmdb/trending?title=流行趋势"
|
||||
title="流行趋势"
|
||||
/>
|
||||
|
||||
<MediaCardSlideView apipath="tmdb/movies">
|
||||
<template #title="{ loaded }">
|
||||
<div
|
||||
v-if="loaded"
|
||||
class="slider-header mt-3 ms-1"
|
||||
>
|
||||
<RouterLink
|
||||
to="/browse/tmdb/movies?title=热门电影"
|
||||
class="slider-title"
|
||||
>
|
||||
<span>热门电影</span>
|
||||
<VIcon
|
||||
icon="mdi-arrow-right-circle-outline"
|
||||
class="ms-1"
|
||||
/>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
</MediaCardSlideView>
|
||||
<MediaCardSlideView
|
||||
apipath="tmdb/movies"
|
||||
linkurl="/browse/tmdb/movies?title=热门电影"
|
||||
title="热门电影"
|
||||
/>
|
||||
|
||||
<MediaCardSlideView apipath="tmdb/tvs">
|
||||
<template #title="{ loaded }">
|
||||
<div
|
||||
v-if="loaded"
|
||||
class="slider-header mt-3 ms-1"
|
||||
>
|
||||
<RouterLink
|
||||
to="/browse/tmdb/tvs?title=热门电视剧"
|
||||
class="slider-title"
|
||||
>
|
||||
<span>热门电视剧</span>
|
||||
<VIcon
|
||||
icon="mdi-arrow-right-circle-outline"
|
||||
class="ms-1"
|
||||
/>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
</MediaCardSlideView>
|
||||
<MediaCardSlideView
|
||||
apipath="tmdb/tvs"
|
||||
linkurl="/browse/tmdb/tvs?title=热门电视剧"
|
||||
title="热门电视剧"
|
||||
/>
|
||||
|
||||
<MediaCardSlideView apipath="douban/movies">
|
||||
<template #title="{ loaded }">
|
||||
<div
|
||||
v-if="loaded"
|
||||
class="slider-header mt-3 ms-1"
|
||||
>
|
||||
<RouterLink
|
||||
to="/browse/douban/movies?title=最新电影"
|
||||
class="slider-title"
|
||||
>
|
||||
<span>最新电影</span>
|
||||
<VIcon
|
||||
icon="mdi-arrow-right-circle-outline"
|
||||
class="ms-1"
|
||||
/>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
</MediaCardSlideView>
|
||||
<MediaCardSlideView
|
||||
apipath="douban/movies"
|
||||
linkurl="/browse/douban/movies?title=最新电影"
|
||||
title="最新电影"
|
||||
/>
|
||||
|
||||
<MediaCardSlideView apipath="douban/tvs">
|
||||
<template #title="{ loaded }">
|
||||
<div
|
||||
v-if="loaded"
|
||||
class="slider-header mt-3 ms-1"
|
||||
>
|
||||
<RouterLink
|
||||
to="/browse/douban/tvs?title=最新电视剧"
|
||||
class="slider-title"
|
||||
>
|
||||
<span>最新电视剧</span>
|
||||
<VIcon
|
||||
icon="mdi-arrow-right-circle-outline"
|
||||
class="ms-1"
|
||||
/>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
</MediaCardSlideView>
|
||||
<MediaCardSlideView
|
||||
apipath="douban/tvs"
|
||||
linkurl="/browse/douban/tvs?title=最新电视剧"
|
||||
title="最新电视剧"
|
||||
/>
|
||||
|
||||
<MediaCardSlideView apipath="douban/movie_top250">
|
||||
<template #title="{ loaded }">
|
||||
<div
|
||||
v-if="loaded"
|
||||
class="slider-header mt-3 ms-1"
|
||||
>
|
||||
<RouterLink
|
||||
to="/browse/douban/movie_top250?title=电影TOP250"
|
||||
class="slider-title"
|
||||
>
|
||||
<span>电影TOP250</span>
|
||||
<VIcon
|
||||
icon="mdi-arrow-right-circle-outline"
|
||||
class="ms-1"
|
||||
/>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
</MediaCardSlideView>
|
||||
<MediaCardSlideView
|
||||
apipath="douban/movie_top250"
|
||||
linkurl="/browse/douban/movie_top250?title=电影TOP250"
|
||||
title="电影TOP250"
|
||||
/>
|
||||
|
||||
<MediaCardSlideView apipath="douban/tv_weekly_chinese">
|
||||
<template #title="{ loaded }">
|
||||
<div
|
||||
v-if="loaded"
|
||||
class="slider-header mt-3 ms-1"
|
||||
>
|
||||
<RouterLink
|
||||
to="/browse/douban/tv_weekly_chinese?title=国产剧集榜"
|
||||
class="slider-title"
|
||||
>
|
||||
<span>国产剧集榜</span>
|
||||
<VIcon
|
||||
icon="mdi-arrow-right-circle-outline"
|
||||
class="ms-1"
|
||||
/>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
</MediaCardSlideView>
|
||||
<MediaCardSlideView
|
||||
apipath="douban/tv_weekly_chinese"
|
||||
linkurl="/browse/douban/tv_weekly_chinese?title=国产剧集榜"
|
||||
title="国产剧集榜"
|
||||
/>
|
||||
|
||||
<MediaCardSlideView apipath="douban/tv_weekly_global">
|
||||
<template #title="{ loaded }">
|
||||
<div
|
||||
v-if="loaded"
|
||||
class="slider-header mt-3 ms-1"
|
||||
>
|
||||
<RouterLink
|
||||
to="/browse/douban/tv_weekly_global?title=全球剧集榜"
|
||||
class="slider-title"
|
||||
>
|
||||
<span>全球剧集榜</span>
|
||||
<VIcon
|
||||
icon="mdi-arrow-right-circle-outline"
|
||||
class="ms-1"
|
||||
/>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
</MediaCardSlideView>
|
||||
<MediaCardSlideView
|
||||
apipath="douban/tv_weekly_global"
|
||||
linkurl="/browse/douban/tv_weekly_global?title=全球剧集榜"
|
||||
title="全球剧集榜"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="css">
|
||||
.slider-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
@apply mb-1;
|
||||
}
|
||||
|
||||
.slider-title {
|
||||
--tw-text-opacity: 1;
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.75rem;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user