From df883050adeea163cdf3f6eda5a6dabf4d6197c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=AE=E5=8F=AE=E5=BD=93?= <604054726@qq.com>
Date: Thu, 3 Aug 2023 18:23:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=83=8C=E6=99=AF=E5=9B=BE?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/discover/MediaDetailView.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/views/discover/MediaDetailView.vue b/src/views/discover/MediaDetailView.vue
index 69d6a57a..1ce7b246 100644
--- a/src/views/discover/MediaDetailView.vue
+++ b/src/views/discover/MediaDetailView.vue
@@ -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%;