This commit is contained in:
jxxghp
2023-07-30 13:12:27 +08:00
parent a6c5091182
commit 65a87b64f9
3 changed files with 14 additions and 27 deletions

View File

@@ -319,6 +319,9 @@ export interface TmdbPerson {
// 热度
popularity?: number
// 图片
images?: Object
}
// 站点

View File

@@ -48,24 +48,15 @@ onBeforeMount(() => {
</div>
<div v-if="mediaDetail.tmdb_id" class="max-w-8xl mx-auto px-4">
<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-poster">
<VImg :src="mediaDetail.poster_path" cover />
</div>
<div class="media-title">
<div class="media-status" />
<h1 class="media-title">
{{ mediaDetail.title }}
<span class="media-year">
({{ mediaDetail.year }})
</span>
<h1 class="flex flex-col items-baseline md:flex-row">
<span>{{ mediaDetail.title }}</span>
<span v-if="mediaDetail.year" class="text-lg">{{ mediaDetail.year }}</span>
</h1>
<span class="media-attributes">
<span>{{ mediaDetail.runtime }}</span>
@@ -142,15 +133,6 @@ onBeforeMount(() => {
padding-inline: 1rem;
}
.media-page-bg-image {
// FIXME: 前景图看不到
position: absolute;
z-index: -10;
block-size: 100%;
inline-size: 100%;
inset: 0;
}
.media-header {
display: flex;
flex-direction: column;
@@ -233,11 +215,6 @@ onBeforeMount(() => {
}
}
h1 .media-year {
font-size: 1.5rem;
line-height: 2rem;
}
ul.media-crew {
margin-top: 1.5rem;
display: grid;

View File

@@ -35,6 +35,13 @@ function getPersonImage() {
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(() => {
getPersonDetail()
})
@@ -77,7 +84,7 @@ onBeforeMount(() => {
<span v-if="personDetail.place_of_birth">{{ personDetail.place_of_birth }}</span>
</div>
<div v-if="personDetail.also_known_as">
别名{{ personDetail.also_known_as }}
别名{{ getAlsoKnownAs() }}
</div>
</div>
</div>