ui ใบสมัคร
This commit is contained in:
Kittapath
parent
dca0d28c92
commit
b03f5e21ae
1 changed files with 69 additions and 20 deletions
|
|
@ -1,43 +1,92 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="q-pa-md row items-center justify-center">
|
<div class="q-pa-md row items-center justify-center">
|
||||||
<q-card class="my-card" style="max-width: 480px; width: 100%" bordered>
|
<q-card class="my-card" style="max-width: 600px; width: 100%" bordered>
|
||||||
|
<q-card-actions class="q-pa-md" :class="getClass(status)">
|
||||||
|
<div v-if="status == false" class="text-black text-bold">
|
||||||
|
เจ้าหน้าที่กำลังตรวจเอกสารชำระเงิน
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
<q-card-section horizontal>
|
<q-card-section horizontal>
|
||||||
<q-card-section class="q-pt-xs">
|
<q-card-section class="col-8 q-pt-xs">
|
||||||
<div class="text-caption text-bold text-h5">บัตรประจำตัวผู้สอบ</div>
|
<div class="text-bold">บัตรประจำตัวผู้สอบ</div>
|
||||||
<div class="text-h5 q-mt-sm q-mb-xs">{{ candidateFullName }}</div>
|
<div class="q-pt-xs row">
|
||||||
<div class="text-caption text-black text-bold">ชื่อ : นางพิมพ์ภา วงศ์สวัสดิ์</div>
|
<div class="">ชื่อ :</div>
|
||||||
<div class="text-caption text-black text-bold">เลขประจำตัวสอบ : CDE-004</div>
|
<div class="text-black text-bold">{{ fullName }}</div>
|
||||||
<div class="text-caption text-black">เลขประจำตัวประชาชน : 1100700954521</div>
|
</div>
|
||||||
<div class="text-caption text-black">เวลาสอบ : 09:00-12:00</div>
|
<div class="q-pt-xs row">
|
||||||
<div class="text-caption text-black">สถานที่สอบ : ศูนย์สอบ 01 กรุงเทพฯและนนทบุรี</div>
|
<div class="">เลขประจำตัวสอบ :</div>
|
||||||
<div class="text-caption text-black">ชั้นที่ : 4</div>
|
<div class="text-black text-bold">{{ examNumber }}</div>
|
||||||
<div class="text-caption text-black">ห้องสอบ : CB-706</div>
|
</div>
|
||||||
<div class="text-caption text-black">เลขที่นั่ง : 75</div>
|
<div class="q-pt-xs row">
|
||||||
|
<div class="">เลขประจำตัวประชาชน :</div>
|
||||||
|
<div class="">{{ citizenId }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="q-pt-xs row">
|
||||||
|
<div class="">เวลาสอบ :</div>
|
||||||
|
<div class="">{{ examTime }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="q-pt-xs row">
|
||||||
|
<div class="">สถานที่สอบ :</div>
|
||||||
|
<div class="">{{ examLocation }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="q-pt-xs row">
|
||||||
|
<div class="">ชั้นที่ :</div>
|
||||||
|
<div class="">{{ floor }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="q-pt-xs row">
|
||||||
|
<div class="">ห้องสอบ :</div>
|
||||||
|
<div class="">{{ examRoom }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="q-pt-xs row">
|
||||||
|
<div class="">เลขที่นั่ง :</div>
|
||||||
|
<div class="">{{ seatNumber }}</div>
|
||||||
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
|
|
||||||
<q-card-section class="col-5 flex flex-center">
|
<q-card-section class="col-4 flex flex-center">
|
||||||
<q-img
|
<q-img
|
||||||
class="rounded-borders"
|
class="rounded-borders"
|
||||||
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fA%3D%3D&w=1000&q=80"
|
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fA%3D%3D&w=1000&q=80"
|
||||||
:ratio="1"
|
:ratio="1"
|
||||||
style="max-width: 100px; max-height: 100px"
|
style="max-width: 300px; max-height: 300px"
|
||||||
/>
|
/>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
|
|
||||||
<q-separator />
|
|
||||||
|
|
||||||
<q-card-actions class="row justify-end">
|
|
||||||
<q-btn flat color="white" class="bg-primary"> พิมพ์บัตรประจำตัวผู้สอบ </q-btn>
|
|
||||||
</q-card-actions>
|
|
||||||
</q-card>
|
</q-card>
|
||||||
|
<q-btn size="12px" flat round color="primary" @click="testChangeStatus" icon="mdi-download">
|
||||||
|
</q-btn>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
|
const fullName = ref<string>('นางพิมพ์ภา วงศ์สวัสดิ์')
|
||||||
|
const examNumber = ref<string>('CDE-004')
|
||||||
|
const citizenId = ref<string>('1100700954521')
|
||||||
|
const examTime = ref<string>('09:00-12:00')
|
||||||
|
const examLocation = ref<string>('ศูนย์สอบ 01 กรุงเทพฯและนนทบุรี')
|
||||||
|
const floor = ref<string>('4')
|
||||||
|
const examRoom = ref<string>('CB-706')
|
||||||
|
const seatNumber = ref<string>('75')
|
||||||
|
const status = ref<boolean>(false)
|
||||||
|
|
||||||
|
const download = () => {}
|
||||||
|
const testChangeStatus = () => {
|
||||||
|
status.value = true
|
||||||
|
}
|
||||||
|
const getClass = (val: boolean) => {
|
||||||
|
return val == true ? 'bg-green-4' : 'bg-yellow-3'
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue