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

增加背景图展示

Browse Source
This commit is contained in:
叮叮当
2023-08-03 18:23:44 +08:00
parent ed33968cb6
commit df883050ad
1 changed files with 15 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/views/discover/MediaDetailView.vue
View File

@@ -377,6 +377,12 @@ onBeforeMount(() => {
/>
</div>
<div v-if="mediaDetail.tmdb_id" class="max-w-8xl mx-auto px-4">
<template v-if="mediaDetail.backdrop_path">
<div class="vue-media-back absolute left-0 top-0 w-full h-96">
<VImg class="h-96" :src="mediaDetail.backdrop_path" cover />
</div>
<div class="vue-media-back absolute left-0 top-0 w-full h-96" />
</template>
<div class="media-page">
<div class="media-header">
<div class="media-poster">
@@ -604,6 +610,15 @@ onBeforeMount(() => {
</template>
<style lang="scss">
.vue-media-back {
background-image:
linear-gradient(180deg, rgba(var(--v-theme-background), 0) 50%, rgba(var(--v-theme-background), 1) 100%),
linear-gradient(90deg, rgba(var(--v-theme-background), 0) 50%, rgba(var(--v-theme-background), 1) 100%),
linear-gradient(270deg, rgba(var(--v-theme-background), 0) 50%, rgba(var(--v-theme-background), 1) 100%);
box-shadow: 0 0 0 2px rgb(var(--v-theme-background));
margin-block-start: calc(-70px - env(safe-area-inset-top));
}
.media-page {
position: relative;
background-position: 50%;