ปรับ css และดีไซน์หน้า กรอกข้อมูลสมัครสอบ
This commit is contained in:
Tanyalak
parent
dcad2fcb07
commit
c299af578f
14 changed files with 1261 additions and 1378 deletions
|
|
@ -1,68 +1,65 @@
|
|||
<!-- page:detail page รายการสอบทั้งหมด -->
|
||||
<template>
|
||||
<q-toolbar class="q-py-sm q-px-md bg-grey-2">
|
||||
<q-toolbar-title class="toptitle text-dark col-12 row items-center">
|
||||
<q-toolbar class="q-pa-sm text-center">
|
||||
<q-toolbar-title class="text-dark text-weight-medium">
|
||||
{{ tittle }}
|
||||
<q-space />
|
||||
<q-btn color="primary" label="ออกจากระบบ" push size="sm" v-close-popup @click="doLogout" />
|
||||
<!-- <q-btn color="primary" label="ออกจากระบบ" push size="sm" v-close-popup @click="doLogout" /> -->
|
||||
</q-toolbar-title>
|
||||
</q-toolbar>
|
||||
<q-card flat class="">
|
||||
<div class="justify-center">
|
||||
<q-stepper
|
||||
class="col-2"
|
||||
v-model="step"
|
||||
ref="stepper"
|
||||
header-nav
|
||||
animated
|
||||
done-color="positive"
|
||||
active-color="blue-7"
|
||||
inactive-color="positive"
|
||||
done-icon="mdi-check-bold"
|
||||
alternative-labels
|
||||
:active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil' : 'mdi-eye-outline'"
|
||||
>
|
||||
<!-- <q-step
|
||||
:done="step > 1"
|
||||
:disable="stepRaw < 1"
|
||||
:name="1"
|
||||
title="อ่านคำชี้แจง"
|
||||
:icon="
|
||||
stepRaw >= 1 ? (stepRaw == 1 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'
|
||||
"
|
||||
>
|
||||
<ExamDetail :fetchStep="fetchStep" :status="status" />
|
||||
</q-step> -->
|
||||
<q-step
|
||||
:done="step > 2"
|
||||
:disable="stepRaw < 2"
|
||||
:name="2"
|
||||
title="ข้อมูลสมัครสอบ"
|
||||
:icon="stepRaw >= 2 ? (stepRaw == 2 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'"
|
||||
>
|
||||
<ExamForm :fetchStep="fetchStep" :status="status" />
|
||||
</q-step>
|
||||
<q-step
|
||||
:done="step > 3"
|
||||
:disable="stepRaw < 3"
|
||||
:name="3"
|
||||
title="ชำระค่าธรรมเนียมการสอบ"
|
||||
:icon="stepRaw >= 3 ? (stepRaw == 3 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'"
|
||||
>
|
||||
<ExamPayment :fetchStep="fetchStep" :status="status" />
|
||||
</q-step>
|
||||
<q-step
|
||||
:done="step > 4"
|
||||
:disable="stepRaw < 4"
|
||||
:name="4"
|
||||
title="สำเร็จ"
|
||||
:icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-pencil'"
|
||||
>
|
||||
<ExamFinished :fetchStep="fetchStep" :status="status" />
|
||||
</q-step>
|
||||
</q-stepper>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-stepper
|
||||
v-model="step"
|
||||
ref="stepper"
|
||||
alternative-labels
|
||||
header-nav
|
||||
animated
|
||||
done-icon="check"
|
||||
:active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil' : 'mdi-eye'"
|
||||
>
|
||||
<!-- <q-step
|
||||
:done="step > 1"
|
||||
:disable="stepRaw < 1"
|
||||
:name="1"
|
||||
title="อ่านคำชี้แจง"
|
||||
:icon="
|
||||
stepRaw >= 1 ? (stepRaw == 1 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'
|
||||
"
|
||||
>
|
||||
<ExamDetail :fetchStep="fetchStep" :status="status" />
|
||||
</q-step> -->
|
||||
<q-step
|
||||
:done="step > 2"
|
||||
:disable="stepRaw < 2"
|
||||
:name="2"
|
||||
title="ข้อมูลสมัครสอบ"
|
||||
:icon="stepRaw >= 2 ? (stepRaw == 2 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-account'"
|
||||
>
|
||||
<q-card bordered class="q-pa-lg">
|
||||
<ExamForm :fetchStep="fetchStep" :status="status" />
|
||||
</q-card>
|
||||
</q-step>
|
||||
<q-step
|
||||
:done="step > 3"
|
||||
:disable="stepRaw < 3"
|
||||
:name="3"
|
||||
title="ชำระค่าธรรมเนียม"
|
||||
:icon="stepRaw >= 3 ? (stepRaw == 3 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-receipt'"
|
||||
>
|
||||
<q-card bordered class="q-pa-lg">
|
||||
<ExamPayment :fetchStep="fetchStep" :status="status" />
|
||||
</q-card>
|
||||
</q-step>
|
||||
<q-step
|
||||
:done="step > 4"
|
||||
:disable="stepRaw < 4"
|
||||
:name="4"
|
||||
title="สำเร็จ"
|
||||
:icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'"
|
||||
>
|
||||
<q-card bordered class="q-pa-lg">
|
||||
<ExamFinished :fetchStep="fetchStep" :status="status" />
|
||||
</q-card>
|
||||
</q-step>
|
||||
</q-stepper>
|
||||
<q-dialog :model-value="modalConsend" persistent>
|
||||
<q-card style="min-width: 800px">
|
||||
<Conference :ok="consendOk" :close="consenClose" />
|
||||
|
|
@ -95,6 +92,8 @@ const status = ref<string>('register')
|
|||
const modalConsend = ref<boolean>(false)
|
||||
|
||||
onMounted(async () => {
|
||||
stepRaw.value = 2
|
||||
step.value = 2
|
||||
await fetchPeriodExam()
|
||||
await candidateCheck()
|
||||
})
|
||||
|
|
@ -199,3 +198,59 @@ const doLogout = () => {
|
|||
})
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.q-stepper {
|
||||
box-shadow: none;
|
||||
background: transparent !important;
|
||||
}
|
||||
.q-stepper--horizontal .q-stepper__step-inner {
|
||||
padding: 0px;
|
||||
}
|
||||
.q-stepper__header--alternative-labels .q-stepper__tab {
|
||||
min-height: 0px;
|
||||
padding: 1.5% 0% 1.5% 0%;
|
||||
}
|
||||
.q-stepper__header--border {
|
||||
border-bottom: none;
|
||||
}
|
||||
.q-stepper__dot {
|
||||
min-width: 35px;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.q-stepper__title{
|
||||
width: 100px;
|
||||
}
|
||||
.q-stepper__tab--done .q-stepper__title{
|
||||
color: #62a00b;
|
||||
}
|
||||
.q-stepper__tab--done .q-stepper__dot{
|
||||
color: #95D710;
|
||||
border: 1px solid #62a00b;
|
||||
}
|
||||
|
||||
.q-stepper__tab--active .q-stepper__title{
|
||||
color: #318BAE;
|
||||
}
|
||||
.q-stepper__tab--active .q-stepper__dot{
|
||||
color: #1CB4EA;
|
||||
border: 1px solid #218ab393;
|
||||
}
|
||||
|
||||
.q-stepper__tab--disabled .q-stepper__title{
|
||||
color: #92B4C8;
|
||||
}
|
||||
.q-stepper__tab--disabled .q-stepper__dot{
|
||||
background: #DEF2FC !important;
|
||||
border: 1px solid #92b4c876;
|
||||
}
|
||||
|
||||
.q-stepper__tab--disabled .q-stepper__dot .q-icon{
|
||||
color: #7692a3d0;
|
||||
}
|
||||
.q-stepper--horizontal .q-stepper__line:before, .q-stepper--horizontal .q-stepper__line:after{
|
||||
background: #92b4c847;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue