mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-07-10 23:13:20 +08:00
fix
This commit is contained in:
@@ -319,6 +319,9 @@ export interface TmdbPerson {
|
|||||||
|
|
||||||
// 热度
|
// 热度
|
||||||
popularity?: number
|
popularity?: number
|
||||||
|
|
||||||
|
// 图片
|
||||||
|
images?: Object
|
||||||
}
|
}
|
||||||
|
|
||||||
// 站点
|
// 站点
|
||||||
|
|||||||
@@ -48,24 +48,15 @@ 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">
|
||||||
<div class="media-page">
|
<div class="media-page">
|
||||||
<div class="media-page-bg-image">
|
|
||||||
<VImg cover :src="mediaDetail.backdrop_path" class="absolute inset-0 w-full h-full object-cover object-center" />
|
|
||||||
<div
|
|
||||||
class="absolute inset-0"
|
|
||||||
style="background-image: linear-gradient(180deg, rgba(17, 24, 39, 47%) 0%, rgba(17, 24, 39, 100%) 100%);"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="media-header">
|
<div class="media-header">
|
||||||
<div class="media-poster">
|
<div class="media-poster">
|
||||||
<VImg :src="mediaDetail.poster_path" cover />
|
<VImg :src="mediaDetail.poster_path" cover />
|
||||||
</div>
|
</div>
|
||||||
<div class="media-title">
|
<div class="media-title">
|
||||||
<div class="media-status" />
|
<div class="media-status" />
|
||||||
<h1 class="media-title">
|
<h1 class="flex flex-col items-baseline md:flex-row">
|
||||||
{{ mediaDetail.title }}
|
<span>{{ mediaDetail.title }}</span>
|
||||||
<span class="media-year">
|
<span v-if="mediaDetail.year" class="text-lg">({{ mediaDetail.year }})</span>
|
||||||
({{ mediaDetail.year }})
|
|
||||||
</span>
|
|
||||||
</h1>
|
</h1>
|
||||||
<span class="media-attributes">
|
<span class="media-attributes">
|
||||||
<span>{{ mediaDetail.runtime }}</span>
|
<span>{{ mediaDetail.runtime }}</span>
|
||||||
@@ -142,15 +133,6 @@ onBeforeMount(() => {
|
|||||||
padding-inline: 1rem;
|
padding-inline: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-page-bg-image {
|
|
||||||
// FIXME: 前景图看不到
|
|
||||||
position: absolute;
|
|
||||||
z-index: -10;
|
|
||||||
block-size: 100%;
|
|
||||||
inline-size: 100%;
|
|
||||||
inset: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-header {
|
.media-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -233,11 +215,6 @@ onBeforeMount(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 .media-year {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
line-height: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.media-crew {
|
ul.media-crew {
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|||||||
@@ -35,6 +35,13 @@ function getPersonImage() {
|
|||||||
return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personDetail.value?.profile_path}`
|
return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personDetail.value?.profile_path}`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 将别名数组拆分为、分隔的字符串
|
||||||
|
function getAlsoKnownAs() {
|
||||||
|
if (!personDetail.value?.also_known_as)
|
||||||
|
return ''
|
||||||
|
return personDetail.value.also_known_as.join('、')
|
||||||
|
}
|
||||||
|
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
getPersonDetail()
|
getPersonDetail()
|
||||||
})
|
})
|
||||||
@@ -77,7 +84,7 @@ onBeforeMount(() => {
|
|||||||
<span v-if="personDetail.place_of_birth">{{ personDetail.place_of_birth }}</span>
|
<span v-if="personDetail.place_of_birth">{{ personDetail.place_of_birth }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="personDetail.also_known_as">
|
<div v-if="personDetail.also_known_as">
|
||||||
别名:{{ personDetail.also_known_as }}
|
别名:{{ getAlsoKnownAs() }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user