113 lines
3 KiB
Vue
113 lines
3 KiB
Vue
<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 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: 170px">
|
|
<div class="col row items-center justify-end">
|
|
<div class="col-12 col-md-10">
|
|
<div class="col-12 text-primary" style="font-size: 20px">
|
|
นายณัฐพงศ์ ดิษยบุตร
|
|
</div>
|
|
<div class="col-12">นักบริหาร</div>
|
|
</div>
|
|
</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 row items-center justify-around bg-teal-1">
|
|
<div class="col-8 row text-weight-bold">
|
|
<div class="row"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
|
|
<q-card class="q-mt-md">
|
|
<TabMain />
|
|
</q-card>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.absolute-center-left {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
</style>
|