GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-07-10 23:13:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #10 from cikezhu/main

Browse Source 
增加背景图展示
This commit is contained in:
jxxghp
2023-08-03 18:34:53 +08:00
committed by GitHub
parent 440dd52dd1 df883050ad
commit 9b3b9bd1e9
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>
<div v-if="mediaDetail.tmdb_id" class="max-w-8xl mx-auto px-4"> <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-page">
<div class="media-header"> <div class="media-header">
<div class="media-poster"> <div class="media-poster">
@@ -604,6 +610,15 @@ onBeforeMount(() => {
</template> </template>
<style lang="scss"> <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 { .media-page {
position: relative; position: relative;
background-position: 50%; background-position: 50%;