payment/finish update

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

@@ -1,6 +1,25 @@
 <template>
-  <div>
-    <h5 class="text-center">ชำระค่าธรรมเนียมการสอบ</h5>
+  <div class="d-flex justify-content-center align-items-center min-vh-100">
+    <div>
+      <div class="text-h5 text-center text-primary q-pb-lg">ชำระค่าธรรมเนียมการสอบ</div>
+      <div class="q-pa-nond text-center">
+        <div class="q-pa-md">
+          <q-img
+            src="https://www.bangkokbank.com/-/media/feature/page-content/bbl-corporate/image-carousel-slides/digital-banking/bualuang-mbanking/how-to-use/payment/others/7_en.png"
+            :ratio="1"
+            style="max-width: 500px; height: 750px"
+          />
+        </div>
+        <q-uploader
+          url="http://localhost:4444/upload"
+          class="q-mx-auto"
+          label="กรุณาอัพโหลดหลักฐานการชำระเงิน"
+          flat
+          color="blue"
+          bordered
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -8,4 +27,8 @@
 import { onMounted, ref } from 'vue'
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.q-img {
+  margin: 0 auto;
+}
+</style>