fix ui

src/views/discover/PersonDetailView.vue

@@ -30,15 +30,13 @@ async function getPersonDetail() {
 
 // 人物图片地址
 function getPersonImage() {
-  if (!personDetail.value?.profile_path)
-    return personIcon
+  if (!personDetail.value?.profile_path) return personIcon
   return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personDetail.value?.profile_path}`
 }
 
 // 将别名数组拆分为、分隔的字符串
 function getAlsoKnownAs() {
-  if (!personDetail.value?.also_known_as)
-    return ''
+  if (!personDetail.value?.also_known_as) return ''
   return personDetail.value.also_known_as.join('、')
 }
 
@@ -48,44 +46,34 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <LoadingBanner
-    v-if="!isRefreshed"
-    class="mt-12"
-  />
+  <LoadingBanner v-if="!isRefreshed" class="mt-12" />
   <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
         size="200"
         :class="{
           'ring-1 ring-gray-700': isImageLoaded,
         }"
       >
-        <VImg
-          v-img
-          :src="getPersonImage()"
-          cover
-          @load="isImageLoaded = true"
-        />
+        <VImg v-img :src="getPersonImage()" cover @load="isImageLoaded = true" />
       </VAvatar>
-      <div class="text-start ms-3 md:text-center">
-        <h1 class="text-3xl lg:text-4xl">
+      <div class="ms-3">
+        <h1 class="text-3xl lg:text-4xl text-center text-lg-left">
           {{ personDetail.name }}
         </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>
             <span v-if="personDetail.birthday">{{ personDetail.birthday }}</span>
             <span v-if="personDetail.place_of_birth"> | </span>
             <span v-if="personDetail.place_of_birth">{{ personDetail.place_of_birth }}</span>
           </div>
-          <div v-if="personDetail.also_known_as">
-            别名：{{ getAlsoKnownAs() }}
-          </div>
+          <div v-if="personDetail.also_known_as">别名：{{ getAlsoKnownAs() }}</div>
         </div>
       </div>
     </div>
     <div class="relative text-left">
       <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 }}
         </p>
       </div>