ทะเบียนประวัติ

src/modules/04_registryNew/views/detailView.vue

@@ -1,6 +1,100 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+import TabMain from "@/modules/04_registryNew/components/detail/TabMain.vue";
+
+const router = useRouter();
+</script>
 <template>
-  <div></div>
+  <div class="row items-center q-gutter-sm">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      ทะเบียนประวัติ
+    </div>
+    <q-space />
+    <q-btn-dropdown
+      size="16px"
+      rounded
+      unelevated
+      color="grey-4"
+      text-color="red"
+      icon="mdi-home-export-outline"
+      dropdown-icon="mdi-chevron-down"
+    >
+      <q-list>
+        <q-item clickable v-close-popup>
+          <q-item-section avatar>
+            <q-avatar icon="folder" color="primary" text-color="white" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Photos</q-item-label>
+            <q-item-label caption>February 22, 2016</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-icon name="info" color="amber" />
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable v-close-popup>
+          <q-item-section avatar>
+            <q-avatar icon="assignment" color="secondary" text-color="white" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Vacation</q-item-label>
+            <q-item-label caption>February 22, 2016</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-icon name="info" color="amber" />
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-btn-dropdown>
+    <q-btn
+      unelevated
+      round
+      color="grey-4"
+      text-color="primary"
+      icon="mdi-file-eye-outline"
+    />
+  </div>
+
+  <q-card>
+    <div class="column" style="height: 150px; position: relative">
+      <div class="col justify-center"></div>
+      <div class="absolute-center-left q-ml-lg">
+        <q-avatar size="130px">
+          <img src="https://cdn.quasar.dev/img/avatar2.jpg" />
+        </q-avatar>
+        <q-btn
+          round
+          color="white"
+          text-color="primary"
+          icon="mdi-pencil-outline"
+          style="position: absolute; bottom: 0; right: 0"
+        />
+      </div>
+      <div class="col bg-teal-2"></div>
+    </div>
+  </q-card>
+
+  <q-card class="q-mt-md">
+    <TabMain />
+  </q-card>
 </template>
 
-<style scoped></style>
+<style scoped>
+.absolute-center-left {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+</style>