fix person card

This commit is contained in:
jxxghp
2023-07-29 21:17:09 +08:00
parent b3a2585053
commit 944c34ed6f
2 changed files with 35 additions and 4 deletions
+7 -3
View File
@@ -36,9 +36,13 @@ function getPersonImage() {
<div style="padding-bottom: 150%;"> <div style="padding-bottom: 150%;">
<div class="absolute inset-0 flex h-full w-full flex-col items-center p-2"> <div class="absolute inset-0 flex h-full w-full flex-col items-center p-2">
<div class="relative mt-2 mb-4 flex h-1/2 w-full justify-center"> <div class="relative mt-2 mb-4 flex h-1/2 w-full justify-center">
<div class="relative w-3/4 overflow-hidden rounded-full"> <VAvatar size="120" class="ring-1 ring-gray-700">
<VImg :src="getPersonImage()" cover /> <VImg
</div> v-img
:src="getPersonImage()"
cover
/>
</VAvatar>
</div> </div>
<div class="w-full truncate text-center font-bold"> <div class="w-full truncate text-center font-bold">
{{ personInfo?.name }} {{ personInfo?.name }}
+28 -1
View File
@@ -54,7 +54,6 @@ onMounted(() => {
</h1> </h1>
<span class="media-attributes"> <span class="media-attributes">
<span>{{ mediaDetail.runtime }}</span> <span>{{ mediaDetail.runtime }}</span>
<span>{{ mediaDetail.genres }}</span>
</span> </span>
</div> </div>
<div class="media-actions" /> <div class="media-actions" />
@@ -123,6 +122,7 @@ onMounted(() => {
} }
.media-page-bg-image { .media-page-bg-image {
// FIXME: 前景图看不到
position: absolute; position: absolute;
z-index: -10; z-index: -10;
block-size: 100%; block-size: 100%;
@@ -303,6 +303,33 @@ ul.media-crew {
} }
} }
.media-overview h2 {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 700;
}
@media (min-width: 640px) {
.media-overview h2 {
font-size: 1.5rem;
line-height: 2rem;
}
}
.tagline {
margin-bottom: 1rem;
font-size: 1.25rem;
line-height: 1.75rem;
font-style: italic;
}
@media (min-width: 1024px) {
.tagline {
font-size: 1.5rem;
line-height: 2rem;
}
}
.slider-title { .slider-title {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;