ปรับ css ชำระค่าธรรมเนียม, เสร็จสิ้น

This commit is contained in:
Tanyalak 2023-03-29 22:23:22 +07:00
parent 85eede7a85
commit ccc5efa421
3 changed files with 36 additions and 36 deletions

View file

@ -1,56 +1,57 @@
<template>
<div>
<div class="q-pa-md row items-center justify-center">
<q-card style="max-width: 40%; width: 100%" bordered>
<q-card-actions class="q-pa-md" :class="getClass(status)">
<div v-if="status != 'done'" class="text-black text-bold">
เจาหนาทกำลงตรวจสถานทสอบ
<div class="col-xs-12 col-sm-8 col-md-6">
<q-card flat class="q-pa-md q-mb-sm" :class="getClass(status)">
<div v-if="status != 'done'" class="text-orange-6 text-bold">
<q-icon name="mdi-timer-sand" size="22px" color="orange-5" class="q-mr-sm" />เจาหนาทกำลงตรวจสถานทสอบ
</div>
<div v-else class="text-black text-bold">สมครสอบสำเร</div>
<q-space />
<q-btn size="12px" flat round color="primary" @click="download" icon="mdi-download">
<q-tooltip>มพตรประจำตวผสอบ</q-tooltip>
</q-btn>
</q-card-actions>
<div v-else class="text-green-6 text-bold">
<q-icon name="mdi-checkbox-marked-circle-outline" size="22px" color="green" class="q-mr-sm" />สมครสอบสำเร
</div>
</q-card>
<q-separator />
<q-card-section horizontal>
<q-card-section class="col-8 q-pt-xs">
<div class="text-bold">ตรประจำตวผสอบ</div>
<q-card bordered flat class="col-12 row">
<div class="text-bold col-12 row q-px-md q-py-sm items-center bg-grey-2">
ตรประจำตวผสอบ
<q-space />
<q-btn dense size="12px" flat color="primary" @click="download" icon="mdi-download">
<q-tooltip>มพตรประจำตวผสอบ</q-tooltip>
</q-btn>
</div>
<div class="col-8 q-pa-md">
<div class="q-pt-xs row">
<div class=""> :</div>
<div class="text-black text-bold">{{ fullName }}</div>
<div class="text-black text-bold q-pl-sm">{{ fullName }}</div>
</div>
<div class="q-pt-xs row">
<div class="">เลขประจำตวสอบ :</div>
<div class="text-black text-bold">{{ examNumber }}</div>
<div class="text-black text-bold q-pl-sm">{{ examNumber }}</div>
</div>
<div class="q-pt-xs row">
<div class="">เลขประจำตวประชาชน :</div>
<div class="">{{ citizenId }}</div>
<div class="text-black q-pl-sm">{{ citizenId }}</div>
</div>
<div class="q-pt-xs row">
<div class="">เวลาสอบ :</div>
<div class="">{{ examTime }}</div>
<div class="text-black q-pl-sm">{{ examTime }}</div>
</div>
<div class="q-pt-xs row">
<div class="">สถานทสอบ :</div>
<div class="">{{ examLocation }}</div>
<div class="text-black q-pl-sm">{{ examLocation }}</div>
</div>
<div class="q-pt-xs row">
<div class="">นท :</div>
<div class="">{{ floor }}</div>
<div class="text-black q-pl-sm">{{ floor }}</div>
</div>
<div class="q-pt-xs row">
<div class="">องสอบ :</div>
<div class="">{{ examRoom }}</div>
<div class="text-black q-pl-sm">{{ examRoom }}</div>
</div>
<div class="q-pt-xs row">
<div class="">เลขท :</div>
<div class="">{{ seatNumber }}</div>
<div class="text-black q-pl-sm">{{ seatNumber }}</div>
</div>
</q-card-section>
</div>
<q-card-section class="col-4 flex flex-center">
<q-img
@ -60,8 +61,7 @@
style="max-width: 300px; max-height: 300px"
/>
</q-card-section>
</q-card-section>
</q-card>
</q-card>
</div>
<!-- <q-btn color="positive" @click="testChangeStatus">จัดที่นั่ง</q-btn> -->
</div>
@ -92,7 +92,7 @@ const seatNumber = ref<string>('75')
const download = () => {}
const getClass = (val: string) => {
return val == 'done' ? 'bg-green-4' : 'bg-yellow-3'
return val == 'done' ? 'bg-green-1' : 'bg-yellow-2'
}
</script>

View file

@ -2,14 +2,14 @@
<div class="col-12">
<div class="row justify-center q-pa-md">
<div class="col-4">
<q-card-actions class="q-pa-md text-left row" :class="getClass(status)">
<q-card flat class="q-pa-md text-left row q-mb-md" :class="getClass(status)">
<div class="text-bold col-12" :class="getFontColor(status)">
{{ message(status) }}
</div>
<div class="col-12" v-if="status === 'rejectPayment'" :class="getFontColor(status)">
<li>{{ rejectMessage }}</li>
</div>
</q-card-actions>
</q-card>
<q-file
borderless
v-model="fileData"
@ -23,16 +23,16 @@
</q-file>
</div>
</div>
<div class="q-pa-md text-center col-12">
<div class="q-pa-md text-center col-12" v-if="status == 'payment' || status == 'rejectPayment'">
<q-btn
v-if="status == 'payment' || status == 'rejectPayment'"
color="primary"
@click="clickPayment"
label="ส่งหลักฐานการชำระเงิน"
/>
</div>
<div class="text-black text-center q-pb-lg col-12">
***าตองการเเกไขหลกฐานการโอนเงนกรณาอปโหลดซ***
<div class="text-black text-center q-pb-lg q-pt-sm col-12 text-deep-orange">
<q-icon name="mdi-alert" size="18px" color="deep-orange" class="q-mr-sm" />าตองการเเกไขหลกฐานการโอนเงนกรณาอปโหลดซ
</div>
</div>
</template>

View file

@ -92,8 +92,8 @@ const status = ref<string>('register')
const modalConsend = ref<boolean>(false)
onMounted(async () => {
// stepRaw.value = 2
// step.value = 2
// stepRaw.value = 4
// step.value = 4
await fetchPeriodExam()
await candidateCheck()
})