From 179a6e25a8ca495d526a17aed56fb85b11de300b Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Fri, 30 Jun 2023 18:14:04 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=9A=E0=B8=B1=E0=B8=95=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=AD=E0=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/01_exam/components/ExamCard.vue | 187 ++++++++++----------
 1 file changed, 94 insertions(+), 93 deletions(-)

diff --git a/src/modules/01_exam/components/ExamCard.vue b/src/modules/01_exam/components/ExamCard.vue
index 394011c..1f9f01a 100644
--- a/src/modules/01_exam/components/ExamCard.vue
+++ b/src/modules/01_exam/components/ExamCard.vue
@@ -7,108 +7,109 @@
         <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 q-pl-sm">{{ fullName }}</div>
-      </div>
-      <div class="q-pt-xs row">
-        <div class="">เลขประจำตัวประชาชน :</div>
-        <div class="text-black text-bold q-pl-sm">{{ citizenId }}</div>
-      </div>
-      <div class="q-pt-xs row">
-        <div class="">เลขประจำตัวสอบ :</div>
-        <div class="text-black text-bold q-pl-sm">{{ examNumber }}</div>
-      </div>
-      <div class="q-pt-xs row">
-        <div class="">เลขที่นั่งสอบ :</div>
-        <div class="text-black text-bold q-pl-sm">{{ examSeat }}</div>
-      </div>
-      <div class="row">
-        <div class="">วันสอบ :</div>
-        <div class="text-black text-bold q-pl-sm">25 มิ.ย. 2568</div>
-      </div>
-      <div class="row">
-        <div class="">ครั้งที่สอบ :</div>
-        <div class="text-black text-bold q-pl-sm">1</div>
-      </div>
-      <div class="row">
-        <div class="">ชุดข้อสอบ :</div>
-        <div class="text-black text-bold q-pl-sm">ทดสอบ</div>
-      </div>
-      <div class="q-pt-xs row">
-        <div class="col-12 text-weight-bold">ผลคะแนนสอบ</div>
-        <div class="row items-center q-gutter-y-sm col-12">
-          <div class="col-xs-4 col-sm-5 text-weight-medium text-grey-7">ประเภท</div>
-          <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">คะแนนเต็ม</div>
-          <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">คะแนนที่ได้</div>
-          <div class="col-xs-2 col-sm-2 text-primary text-weight-bold"></div>
-
-          <div class="col-xs-4 col-sm-5 text-grey-7">ภาค ข</div>
-          <div class="col-xs-3 col-sm-2 q-pr-xs">
-            {{ scoreBFull }}
+    <div class="col-12 row q-pa-md">
+        <div class="col-xs-12 col-sm-8">
+          <div class="q-pt-xs row">
+            <div class="">ชื่อ :</div>
+            <div class="text-black text-bold q-pl-sm">{{ fullName }}</div>
           </div>
-          <div class="col-xs-3 col-sm-2 q-pr-xs">
-            {{ scoreB }}
+          <div class="q-pt-xs row">
+            <div class="">เลขประจำตัวประชาชน :</div>
+            <div class="text-black text-bold q-pl-sm">{{ citizenId }}</div>
           </div>
-          <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
-
-          <div class="col-xs-4 col-sm-5 text-grey-7">ภาค ค</div>
-          <div class="col-xs-3 col-sm-2 q-pr-xs">
-            {{ scoreCFull }}
+          <div class="q-pt-xs row">
+            <div class="">เลขประจำตัวสอบ :</div>
+            <div class="text-black text-bold q-pl-sm">{{ examNumber }}</div>
           </div>
-          <div class="col-xs-3 col-sm-2 q-pr-xs">
-            {{ scoreC }}
+          <div class="q-pt-xs row">
+            <div class="">เลขที่นั่งสอบ :</div>
+            <div class="text-black text-bold q-pl-sm">{{ examSeat }}</div>
           </div>
-          <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
-
-          <div class="col-xs-4 col-sm-5 text-grey-7">รวมทั้งหมด</div>
-          <div class="col-xs-3 col-sm-2 q-pr-xs">
-            {{ scoreSumFull }}
+          <div class="row">
+            <div class="">วันสอบ :</div>
+            <div class="text-black text-bold q-pl-sm">25 มิ.ย. 2568</div>
           </div>
-          <div class="col-xs-3 col-sm-2 q-pr-xs">
-            {{ scoreSum }}
+          <div class="row">
+            <div class="">ครั้งที่สอบ :</div>
+            <div class="text-black text-bold q-pl-sm">1</div>
           </div>
-          <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
-
-          <div class="col-xs-4 col-sm-5 text-weight-bold q-pt-sm">ผลการสอบ</div>
-          <div class="col-xs-8 col-sm-6 q-pr-xs text-weight-bold text-subtitle1">
-            <span :class="examResultinscore != 'ผ่าน' ? 'text-red' : 'text-positive'">{{
-              examResultinscore
-            }}</span>
-          </div>
-          <div class="col-xs-6 col-sm-5 text-grey-7">ตำแหน่ง</div>
-          <div class="col-xs-6 col-sm-7 q-pr-xs">
-            {{ position }}
-          </div>
-          <div class="col-xs-6 col-sm-5 text-grey-7">ลำดับที่สอบได้</div>
-          <div class="col-xs-6 col-sm-7 q-pr-xs">
-            {{ number }}
-          </div>
-          <div class="col-xs-6 col-sm-5 text-grey-7">วันหมดอายุบัญชีคัดเลือก</div>
-          <div class="col-xs-6 col-sm-7 q-pr-xs">
-            {{ score_expired == null ? '' : date2Thai(score_expired) }}
+          <div class="row">
+            <div class="">ชุดข้อสอบ :</div>
+            <div class="text-black text-bold q-pl-sm">ทดสอบ</div>
           </div>
         </div>
-      </div>
-    </div>
+        <div class="col-xs-12 col-sm-4 row justify-center">
+          <q-img
+          v-if="avatar == ''"
+          class="rounded-borders"
+          src="@/assets/avatar_user.jpg"
+          :ratio="1"
+          style="width: 150px; height: 600px"
+          />
+          <q-img
+            v-else
+            class="rounded-borders"
+            :src="avatar"
+            :ratio="1"
+            style="width: 150px; height: 600px"
+          />
+        </div>
+        </div>
+  </q-card>
+  <q-card bordered flat class="q-pa-md q-mt-sm">
+      <div class="col-12 text-weight-bold">ผลคะแนนสอบ</div>
+      <div class="row items-center q-gutter-y-sm col-12">
+        <div class="col-xs-4 col-sm-5 text-weight-medium text-grey-7">ประเภท</div>
+        <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">คะแนนเต็ม</div>
+        <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">คะแนนที่ได้</div>
+        <div class="col-xs-2 col-sm-2 text-primary text-weight-bold"></div>
 
-    <q-card-section class="col-4 flex flex-center">
-      <q-img
-        v-if="avatar == ''"
-        class="rounded-borders"
-        src="@/assets/avatar_user.jpg"
-        :ratio="1"
-        style="width: 150px; height: 600px"
-      />
-      <q-img
-        v-else
-        class="rounded-borders"
-        :src="avatar"
-        :ratio="1"
-        style="width: 150px; height: 600px"
-      />
-    </q-card-section>
+        <div class="col-xs-4 col-sm-5 text-grey-7">ภาค ข</div>
+        <div class="col-xs-3 col-sm-2 q-pr-xs">
+          {{ scoreBFull }}
+        </div>
+        <div class="col-xs-3 col-sm-2 q-pr-xs">
+          {{ scoreB }}
+        </div>
+        <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
+
+        <div class="col-xs-4 col-sm-5 text-grey-7">ภาค ค</div>
+        <div class="col-xs-3 col-sm-2 q-pr-xs">
+          {{ scoreCFull }}
+        </div>
+        <div class="col-xs-3 col-sm-2 q-pr-xs">
+          {{ scoreC }}
+        </div>
+        <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
+
+        <div class="col-xs-4 col-sm-5 text-grey-7">รวมทั้งหมด</div>
+        <div class="col-xs-3 col-sm-2 q-pr-xs">
+          {{ scoreSumFull }}
+        </div>
+        <div class="col-xs-3 col-sm-2 q-pr-xs">
+          {{ scoreSum }}
+        </div>
+        <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
+
+        <div class="col-xs-4 col-sm-5 text-weight-bold q-pt-sm">ผลการสอบ</div>
+        <div class="col-xs-8 col-sm-6 q-pr-xs text-weight-bold text-subtitle1">
+          <span :class="examResultinscore != 'ผ่าน' ? 'text-red' : 'text-positive'">{{
+            examResultinscore
+          }}</span>
+        </div>
+        <div class="col-xs-6 col-sm-5 text-grey-7">ตำแหน่ง</div>
+        <div class="col-xs-6 col-sm-7 q-pr-xs">
+          {{ position }}
+        </div>
+        <div class="col-xs-6 col-sm-5 text-grey-7">ลำดับที่สอบได้</div>
+        <div class="col-xs-6 col-sm-7 q-pr-xs">
+          {{ number }}
+        </div>
+        <div class="col-xs-6 col-sm-5 text-grey-7">วันหมดอายุบัญชีคัดเลือก</div>
+        <div class="col-xs-6 col-sm-7 q-pr-xs">
+          {{ score_expired == null ? '' : date2Thai(score_expired) }}
+        </div>
+      </div>
   </q-card>
 </template>