first commit

src/components/home/PersonCard.vue

@@ -0,0 +1,112 @@
+<script lang="ts" setup>
+import AppBox from 'components/app/AppBox.vue';
+import AppCircle from '../app/AppCircle.vue';
+
+defineProps<{
+  list: {
+    name: string;
+    badge: string;
+    detail: { label: string; value: string }[];
+    male?: boolean;
+    female?: boolean;
+    disabled?: boolean;
+  }[];
+}>();
+</script>
+
+<template>
+  <div class="person-container">
+    <AppBox
+      :bordered="$q.dark.isActive"
+      class="column"
+      style="padding: 0"
+      v-for="(v, i) in list"
+      :key="i"
+    >
+      <div class="q-pa-md column items-center">
+        <AppCircle class="surface-2 avatar q-mb-md" bordered>Avatar</AppCircle>
+
+        <span>{{ v.name }}</span>
+        <span
+          class="badge"
+          :class="{
+            'bg-gender': v.male || v.female,
+            'bg-gender__male': v.male,
+            'bg-gender__female': v.female,
+          }"
+        >
+          {{ v.badge }}
+        </span>
+      </div>
+      <q-separator />
+      <div
+        class="q-py-sm q-px-xl person-detail rounded-b"
+        :class="{
+          'bg-gender': v.male || v.female,
+          'bg-gender__light': v.male || v.female,
+          'bg-gender__male': v.male,
+          'bg-gender__female': v.female,
+        }"
+      >
+        <div v-for="(d, j) in v.detail" :key="j">
+          <span>{{ d.label }}</span>
+          <span>{{ d.value }}</span>
+        </div>
+      </div>
+    </AppBox>
+  </div>
+</template>
+
+<style scoped>
+.person-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--size-6);
+}
+
+.avatar {
+  block-size: 7rem;
+}
+
+.badge {
+  display: inline-block;
+  border-radius: var(--radius-6);
+  background-color: var(--surface-2);
+  padding: 0 var(--size-6);
+}
+
+.person-detail {
+  display: grid;
+  flex-grow: 1;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--size-2);
+
+  & > * {
+    display: flex;
+    flex-direction: column;
+
+    & > :first-child {
+      font-size: var(--font-size-0);
+    }
+  }
+}
+.bg-gender {
+  color: hsla(var(--_fg));
+  background-color: hsl(var(--_bg));
+
+  &.bg-gender__light {
+    color: unset;
+    background-color: hsla(var(--_bg) / 0.1);
+  }
+
+  &.bg-gender__male {
+    --_fg: 0 100 100%;
+    --_bg: var(--blue-5-hsl);
+  }
+
+  &.bg-gender__female {
+    --_fg: 0 100 100%;
+    --_bg: var(--pink-7-hsl);
+  }
+}
+</style>