ปรับ css หน้าหลักข้อมูลทะเบียนประวัติ
This commit is contained in:
Tanyalak
parent
2c75ca60cc
commit
eac8b1a0ac
4 changed files with 300 additions and 242 deletions
|
|
@ -188,67 +188,79 @@ onMounted(async () => {
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<!-- <div class="toptitle text-dark col-12 row items-center">
|
||||
ข้อมูลทะเบียนประวัติ
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<q-card>
|
||||
<q-card-section class="card-img">
|
||||
<div class="text-h5 text-center q-pa-md">ค้นหาข้อมูลทะเบียนประวัติ</div>
|
||||
<q-card class="q-mt-md">
|
||||
<q-card-section class="card-img q-pb-lg">
|
||||
<div class="text-h5 text-center q-py-md text-weight-medium">ค้นหาข้อมูลทะเบียนประวัติ</div>
|
||||
<div class="row justify-center">
|
||||
<div class="col-12 q-pa-md">
|
||||
<div class="col-xs-12 col-sm-12 col-md-11 q-pa-md bg-Search rounded-borders">
|
||||
<q-form @submit="onclickSearch">
|
||||
<q-toolbar style="padding: 0px">
|
||||
<q-select
|
||||
outlined
|
||||
bg-color="white"
|
||||
v-model="searchType"
|
||||
:options="store.searchTypeOption"
|
||||
emit-value
|
||||
dense
|
||||
emit-option
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
map-options
|
||||
/>
|
||||
<q-toolbar-title>
|
||||
<div class="bg-white row col-12 q-pa-none rounded-borders">
|
||||
<div class="row col-11">
|
||||
<div class="col-3 row wrap">
|
||||
<q-select
|
||||
borderless
|
||||
bg-color="white"
|
||||
v-model="searchType"
|
||||
:options="store.searchTypeOption"
|
||||
emit-value
|
||||
dense
|
||||
emit-option
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
map-options
|
||||
class="selectS col-11 q-px-md "
|
||||
color="deep-orange"
|
||||
dropdown-icon="mdi-chevron-down"
|
||||
|
||||
/>
|
||||
<q-separator vertical />
|
||||
</div>
|
||||
<q-input
|
||||
outlined
|
||||
borderless
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="formFilter.keyword"
|
||||
clearable
|
||||
placeholder="ค้นหา"
|
||||
class="col-9 q-pr-md"
|
||||
>
|
||||
<template v-slot:before>
|
||||
<q-icon name="search" color="deep-orange" />
|
||||
</template>
|
||||
</q-input>
|
||||
</q-toolbar-title>
|
||||
<q-btn color="blue" label="ค้นหา" type="submit" />
|
||||
</q-toolbar>
|
||||
</div>
|
||||
<div class="row col-1">
|
||||
<q-btn class="fit btnSearch" unelevated color="deep-orange" label="ค้นหา" type="submit" />
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
<q-toolbar
|
||||
inset
|
||||
align="right"
|
||||
style="padding: 0px"
|
||||
v-if="isShowBtnFilter"
|
||||
>
|
||||
<q-toolbar-title>
|
||||
<q-btn
|
||||
flat
|
||||
label="ตัวเลือกเพิ่มเติม"
|
||||
icon-right="tune"
|
||||
@click="onClickShowFilter"
|
||||
/></q-toolbar-title>
|
||||
</q-toolbar>
|
||||
<div v-if="isShowBtnFilter" class="col-12 row q-mt-sm">
|
||||
<q-space/>
|
||||
<q-btn
|
||||
flat
|
||||
label="ตัวเลือกเพิ่มเติม"
|
||||
icon-right="mdi-tune"
|
||||
@click="onClickShowFilter"
|
||||
dense
|
||||
class="q-px-sm"
|
||||
></q-btn>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="row q-mt-md q-gutter-sm justify-center"
|
||||
class="row q-mt-sm q-gutter-sm justify-center"
|
||||
v-if="isShowFilter"
|
||||
>
|
||||
<q-btn-dropdown
|
||||
flat
|
||||
rounded
|
||||
outline
|
||||
class="custom-btn"
|
||||
dense
|
||||
label-color="white"
|
||||
dropdown-icon="mdi-chevron-down"
|
||||
class="q-px-sm"
|
||||
>
|
||||
<template v-slot:label>
|
||||
{{ `${labelOption.type}` }}
|
||||
|
|
@ -278,12 +290,17 @@ onMounted(async () => {
|
|||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
|
||||
<q-separator inset vertical class="lineFil" />
|
||||
|
||||
<q-btn-dropdown
|
||||
rounded
|
||||
outline
|
||||
flat
|
||||
dense
|
||||
label-color="white"
|
||||
class="custom-btn"
|
||||
>
|
||||
dropdown-icon="mdi-chevron-down"
|
||||
class="q-px-sm"
|
||||
|
||||
><!-- class="custom-btn" -->
|
||||
<template v-slot:label>
|
||||
{{
|
||||
labelOption.posType !== "ทั้งหมด"
|
||||
|
|
@ -315,12 +332,16 @@ onMounted(async () => {
|
|||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
|
||||
<q-separator inset vertical class="lineFil" />
|
||||
|
||||
<q-btn-dropdown
|
||||
flat
|
||||
dense
|
||||
rounded
|
||||
outline
|
||||
class="custom-btn"
|
||||
label-color="white"
|
||||
>
|
||||
dropdown-icon="mdi-chevron-down"
|
||||
class="q-px-sm"
|
||||
><!-- class="custom-btn" -->
|
||||
<template v-slot:label>
|
||||
{{
|
||||
labelOption.posLevel !== "ทั้งหมด"
|
||||
|
|
@ -352,12 +373,16 @@ onMounted(async () => {
|
|||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
|
||||
<q-separator inset vertical class="lineFil" />
|
||||
|
||||
<q-btn-dropdown
|
||||
flat
|
||||
dense
|
||||
rounded
|
||||
outline
|
||||
class="custom-btn"
|
||||
label-color="white"
|
||||
>
|
||||
dropdown-icon="mdi-chevron-down"
|
||||
class="q-px-sm"
|
||||
><!-- class="custom-btn" -->
|
||||
<template v-slot:label>
|
||||
{{ `ปีเกษียณ${labelOption.retireYear}` }}
|
||||
<q-btn
|
||||
|
|
@ -385,6 +410,8 @@ onMounted(async () => {
|
|||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
|
||||
<q-separator inset vertical class="lineFil" />
|
||||
|
||||
<!-- <datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formFilter.retireYear"
|
||||
|
|
@ -431,11 +458,13 @@ onMounted(async () => {
|
|||
</datepicker> -->
|
||||
|
||||
<q-btn-dropdown
|
||||
flat
|
||||
dense
|
||||
rounded
|
||||
outline
|
||||
class="custom-btn"
|
||||
label-color="white"
|
||||
>
|
||||
dropdown-icon="mdi-chevron-down"
|
||||
class="q-px-sm"
|
||||
><!-- class="custom-btn" -->
|
||||
<template v-slot:label>
|
||||
{{
|
||||
`อายุราชการ (${formFilter.rangeYear.min} - ${formFilter.rangeYear.max} ปี)`
|
||||
|
|
@ -481,13 +510,17 @@ onMounted(async () => {
|
|||
</div>
|
||||
</q-btn-dropdown>
|
||||
|
||||
<q-separator inset vertical class="lineFil" />
|
||||
|
||||
<q-btn-dropdown
|
||||
flat
|
||||
dense
|
||||
rounded
|
||||
outline
|
||||
class="custom-btn"
|
||||
color="white"
|
||||
label-color="white"
|
||||
dropdown-icon="mdi-chevron-down"
|
||||
:label="`เงื่อนไขอื่นๆ ${conditionTotal}`"
|
||||
>
|
||||
class="q-px-sm"
|
||||
><!-- class="custom-btn" -->
|
||||
<q-list>
|
||||
<q-item clickable v-close-popup>
|
||||
<q-item-section>
|
||||
|
|
@ -529,7 +562,7 @@ onMounted(async () => {
|
|||
</q-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<style >
|
||||
.card-img {
|
||||
background: url("@/assets/registry-banner.png");
|
||||
background-size: cover;
|
||||
|
|
@ -547,4 +580,20 @@ onMounted(async () => {
|
|||
:deep(.custom-btn.q-btn--outline::before) {
|
||||
background-color: #36969f;
|
||||
}
|
||||
|
||||
.btnSearch{
|
||||
border-radius: 0px 4px 4px 0px;
|
||||
}
|
||||
.bg-Search{
|
||||
background: #00000015;
|
||||
}
|
||||
.lineFil{
|
||||
transform:rotate(30deg);
|
||||
height: 20px;
|
||||
margin-top: 15px;
|
||||
background: #ffffff7b !important;
|
||||
}
|
||||
.selectS .q-field__control .q-field__append .q-icon{
|
||||
color: #ff5722 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue