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

fix ui

Browse Source
This commit is contained in:
jxxghp
2024-04-26 23:58:06 +08:00
parent db0d5133e8
commit 7949505104
1 changed files with 10 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/discover/PersonDetailView.vue
+10 -22
View File
@@ -30,15 +30,13 @@ async function getPersonDetail() {
// 人物图片地址 // 人物图片地址
function getPersonImage() { function getPersonImage() {
if (!personDetail.value?.profile_path) if (!personDetail.value?.profile_path) return personIcon
return personIcon
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() { function getAlsoKnownAs() {
if (!personDetail.value?.also_known_as) if (!personDetail.value?.also_known_as) return ''
return ''
return personDetail.value.also_known_as.join('、') return personDetail.value.also_known_as.join('、')
} }
@@ -48,44 +46,34 @@ onBeforeMount(() => {
</script> </script>
<template> <template>
<LoadingBanner <LoadingBanner v-if="!isRefreshed" class="mt-12" />
v-if="!isRefreshed"
class="mt-12"
/>
<div v-if="personDetail.id" class="max-w-8xl mx-auto px-4"> <div v-if="personDetail.id" class="max-w-8xl mx-auto px-4">
<div class="relative z-10 mt-4 mb-8 flex flex-col items-center lg:flex-row "> <div class="relative z-10 mt-4 mb-8 flex flex-col items-center flex-md-row">
<VAvatar <VAvatar
size="200" size="200"
:class="{ :class="{
'ring-1 ring-gray-700': isImageLoaded, 'ring-1 ring-gray-700': isImageLoaded,
}" }"
> >
<VImg <VImg v-img :src="getPersonImage()" cover @load="isImageLoaded = true" />
v-img
:src="getPersonImage()"
cover
@load="isImageLoaded = true"
/>
</VAvatar> </VAvatar>
<div class="text-start ms-3 md:text-center"> <div class="ms-3">
<h1 class="text-3xl lg:text-4xl"> <h1 class="text-3xl lg:text-4xl text-center text-lg-left">
{{ personDetail.name }} {{ personDetail.name }}
</h1> </h1>
<div class="mt-1 mb-2 space-y-1 text-xs sm:text-sm lg:text-base"> <div class="mt-1 mb-2 space-y-1 text-xs sm:text-sm lg:text-base text-center text-lg-left">
<div> <div>
<span v-if="personDetail.birthday">{{ personDetail.birthday }}</span> <span v-if="personDetail.birthday">{{ personDetail.birthday }}</span>
<span v-if="personDetail.place_of_birth"> | </span> <span v-if="personDetail.place_of_birth"> | </span>
<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">别名：{{ getAlsoKnownAs() }}</div>
别名：{{ getAlsoKnownAs() }}
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="relative text-left"> <div class="relative text-left">
<div class="group outline-none ring-0" role="button" tabindex="-1"> <div class="group outline-none ring-0" role="button" tabindex="-1">
<p class="pt-2 text-sm lg:text-base" style="overflow-wrap: break-word;"> <p class="pt-2 text-sm lg:text-base" style="overflow-wrap: break-word">
{{ personDetail.biography }} {{ personDetail.biography }}
</p> </p>
</div> </div>