แก้เพิ่ม rejected status

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

@@ -1,9 +1,13 @@
 <template>
   <q-card class="my-card" style="max-width: 1000px; width: 100%" bordered>
-    <q-card-actions class="q-pa-md text-center" :class="getClass(status)">
-      <div class="text-black text-bold">{{ message(status) }}</div>
-
-      <q-space />
+    <q-card-actions class="q-pa-md text-left row" :class="getClass(status)">
+      <div class="text-black text-bold col-12" style="font-size: 16px">
+        {{ message(status) }}
+      </div>
+      <div class="text-black col-12" v-if="status === 'rejected'">
+        <li>{{ rejectMessage }}</li>
+      </div>
+      <!-- <q-space /> -->
     </q-card-actions>
   </q-card>
 
@@ -51,7 +55,7 @@ import { defineComponent, ref, Ref } from 'vue'
 import { onMounted } from 'vue'
 import { ComponentRef } from '@vue/runtime-core'
 const status = ref<string>('')
-
+const rejectMessage = ref<string>('กรุณาจ่ายเงินให้ครบตามจำนวน')
 const img = ref<string>('https://cdn-icons-png.flaticon.com/512/2496/2496846.png')
 
 const uploadImg = (file: any) => {
@@ -71,11 +75,11 @@ const getClass = (val: string) => {
     case 'processing':
       return 'bg-lime-12'
     case 'rejected':
-      return 'bg-deep-orange-4'
+      return 'bg-deep-orange-11'
     case 'success':
       return 'bg-green-12'
     default:
-      return 'bg-blue-grey-2'
+      return 'bg-blue-4'
   }
 }
 const message = (val: string) => {