hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

แสดงรูปโปรไฟล์หน้ารายการทะเบียนประวัติ

Browse source
This commit is contained in:
Warunee Tamkoo 2024-04-29 17:31:02 +07:00
parent 4232c5d4e8
commit 81fd3a3ac8
5 changed files with 117 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

96
src/modules/04_registryNew/components/detail/TabMain.vue
View file

@ -43,59 +43,53 @@ const splitterModel = ref<number>(12);
</script>
<template>
<q-splitter
v-model="splitterModel"
disable
class="split"
>
<template v-slot:before>
<div class=""><!-- bg-tab-regi -->
<q-tabs
v-model="store.tabMain"
vertical
class="text-grey-6 text-weight-light"
active-class="bg-white text-blue-8 text-weight-bold bg-blue-1"
><!-- indicator-color="transparent" -->
<q-tab
class="q-py-sm"
v-for="(tab, index) in itemsTab"
:key="index"
:name="tab.name"
:icon="tab.icon"
:label="tab.label"
/><!-- hover-tab -->
</q-tabs>
</div>
</template>
<template v-slot:after>
<q-tab-panels
<q-splitter v-model="splitterModel" disable class="split">
<template v-slot:before>
<div class="">
<!-- bg-tab-regi -->
<q-tabs
v-model="store.tabMain"
animated
swipeable
vertical
transition-prev="jump-up"
transition-next="jump-up"
class="q-pa-none"
><!-- split -->
<q-tab-panel
class="text-grey-6 text-weight-light"
active-class="bg-white text-blue-8 text-weight-bold bg-blue-1"
><!-- indicator-color="transparent" -->
<q-tab
class="q-py-sm"
v-for="(tab, index) in itemsTab"
:key="index"
:name="tab.name"
class="q-pa-none"
>
<PersonalInformationMain v-if="store.tabMain === '1'" />
<GovernmentInformationMain v-if="store.tabMain === '2'" />
<salaryMain v-if="store.tabMain === '3'" />
<AchievementMain v-if="store.tabMain === '4'" />
<OtherMaim v-if="store.tabMain === '5'" />
</q-tab-panel>
</q-tab-panels>
</template>
</q-splitter>
:icon="tab.icon"
:label="tab.label"
/><!-- hover-tab -->
</q-tabs>
</div>
</template>
<template v-slot:after>
<q-tab-panels
v-model="store.tabMain"
animated
swipeable
vertical
transition-prev="jump-up"
transition-next="jump-up"
class="q-pa-none"
><!-- split -->
<q-tab-panel
v-for="(tab, index) in itemsTab"
:key="index"
:name="tab.name"
class="q-pa-none"
>
<PersonalInformationMain v-if="store.tabMain === '1'" />
<GovernmentInformationMain v-if="store.tabMain === '2'" />
<salaryMain v-if="store.tabMain === '3'" />
<AchievementMain v-if="store.tabMain === '4'" />
<OtherMaim v-if="store.tabMain === '5'" />
</q-tab-panel>
</q-tab-panels>
</template>
</q-splitter>
</template>
<style scoped>
@ -104,10 +98,10 @@ const splitterModel = ref<number>(12);
color: white !important;
opacity: 1 !important;
}
.bg-tab-regi{
.bg-tab-regi {
background-color: #273238;
}
.split{
}
.split {
border-radius: 10px !important;
}
</style>