feat: use api fn to fetch person

src/components/app/AppBox.vue

@@ -1,9 +1,16 @@
 <script lang="ts" setup>
-defineProps<{ dark?: boolean; bordered?: boolean }>();
+defineProps<{ dark?: boolean; bordered?: boolean; shadowed?: boolean }>();
 </script>
 
 <template>
-  <div class="app-box" :class="{ dark, 'app-box__bordered': bordered }">
+  <div
+    class="app-box"
+    :class="{
+      dark,
+      'app-box__bordered': bordered,
+      'app-box__shadowed': shadowed,
+    }"
+  >
     <slot />
   </div>
 </template>
@@ -14,6 +21,9 @@ defineProps<{ dark?: boolean; bordered?: boolean }>();
   background-color: var(--surface-1);
   border-radius: var(--radius-3);
   padding: var(--size-4);
+}
+
+.app-box__shadowed {
   box-shadow: var(--shadow-1);
 }
 

src/components/home/PersonCard.vue

@@ -14,6 +14,7 @@ defineProps<{
     disabled?: boolean;
     img?: string;
   }[];
+  detailColumnCount?: number;
 }>();
 
 const status = ref(false);
@@ -131,7 +132,7 @@ const status = ref(false);
       <!-- detail -->
       <q-separator />
       <div
-        class="q-pt-sm q-pb-md q-px-lg q-gutter-x-xl person-detail rounded-b"
+        class="q-pt-sm q-px-sm q-pb-md person-detail rounded-b full-width"
         :class="{
           'bg-gender': v.male || v.female,
           'bg-gender__light':
@@ -140,6 +141,11 @@ const status = ref(false);
           'bg-gender__female': !v.disabled && v.female,
           'bg-gender__disable': v.disabled,
         }"
+        :style="
+          (detailColumnCount &&
+            `grid-template-columns: repeat(${detailColumnCount}, 1fr);`) ||
+          ''
+        "
       >
         <div v-for="(d, j) in v.detail" :key="j">
           <span
@@ -219,6 +225,7 @@ const status = ref(false);
     flex-grow: 1;
     grid-template-columns: repeat(2, 1fr);
     gap: var(--size-2);
+    overflow-x: scroll;
 
     & > * {
       display: flex;