ui หน้ารายการสอบ

src/modules/01_exam/components/ExamCrad.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="q-pa-md shadow-4 rounded-borders cursor-pointer">
+    <label class="text-h6 row cursor-pointer">{{ items.title }}</label>
+    <label class="text-grey-7 row text-size cursor-pointer"
+      >ประกาศวันที่ {{ date2Thai(items.announcementDate) }}</label
+    >
+    <label class="text-grey-7 row q-my-md text-size cursor-pointer"
+      >ครั้งที่ {{ items.registerRound }}</label
+    >
+    <div class="row justify-between items-end cursor-pointer">
+      <label class="text-grey-7 text-size row cursor-pointer"
+        >เปิดรับสมัคร {{ date2Thai(items.registerDateStart) }} -
+        {{ date2Thai(items.registerDateEnd) }}</label
+      >
+      <div class="rounded-borders q-pa-sm bg-teal cursor-pointer shadow-2">
+        <label class="text-semi text-white text-size cursor-pointer">สมัครสอบ</label>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { ExamCard } from '../interface/index/Main'
+import { useCounterMixin } from '@/stores/mixin'
+
+const mixin = useCounterMixin()
+const { date2Thai } = mixin
+
+const props = defineProps({
+  items: {
+    type: Object as PropType<ExamCard>,
+    required: true
+  }
+})
+</script>
+<style lang="scss" scope>
+.text-size {
+  font-size: 1.2em;
+}
+</style>