ปรับ css และดีไซน์หน้า กรอกข้อมูลสมัครสอบ

src/modules/01_exam/components/Form/Document.vue

@@ -1,78 +1,70 @@
 <!-- card อัปโหลดเอกสาร -->
 <template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
-    <div class="col-12">
-      <HeaderTop
-        v-model:edit="edit"
-        header="อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
-        icon="mdi-file-document"
-        :addData="true"
-        :editOnly="true"
-        :cancel="cancelData"
-        :editData="status == 'register' || status == 'rejectRegister'"
-      />
-    </div>
-    <div class="col-12">
-      <div v-if="edit" class="row justify-center q-pa-md">
-        <div class="col-4">
-          <q-input
-            class="q-my-sm"
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="name"
-            :rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
-            :label="`${'ชื่อเอกสาร'}`"
-          />
-          <q-uploader
-            color="blue"
-            type="file"
-            flat
-            auto-upload
-            :factory="fileUpload"
-            class="full-width"
-            :max-size="10000000"
-            accept=".jpg,.png,.pdf,.csv,.doc"
-            bordered
-            label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
-          />
-        </div>
-      </div>
-      <q-separator class="q-mt-sm" />
-      <q-card bordered flat class="full-width">
-        <q-list separator>
-          <q-item v-for="file in files" :key="file.key" class="q-my-xs">
-            <q-item-section>
-              <q-item-label class="full-width ellipsis">
-                {{ file.name }}
-              </q-item-label>
+  <HeaderTop
+    v-model:edit="edit"
+    header="อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
+    icon="mdi-file-document"
+    :addData="true"
+    :editOnly="true"
+    :cancel="cancelData"
+    :editData="status == 'register' || status == 'rejectRegister'"
+  />
 
-              <q-item-label caption> สถานะ: {{ file.status }} / {{ file.sizeLabel }} </q-item-label>
-            </q-item-section>
-            <q-item-section top side>
-              <div class="q-gutter-sm">
-                <q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline">
-                  <q-tooltip>ดาวน์โหลด</q-tooltip>
-                </q-btn>
-                <q-btn
-                  size="12px"
-                  flat
-                  dense
-                  round
-                  color="red"
-                  icon="mdi-delete-outline"
-                  v-if="edit"
-                >
-                  <q-tooltip>ลบไฟล์</q-tooltip>
-                </q-btn>
-              </div>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-    </div>
+  <div v-if="edit" class="row justify-center row col-12">
+    <q-input
+      class="q-mt-sm col-12"
+      :outlined="edit"
+      dense
+      lazy-rules
+      :readonly="!edit"
+      :borderless="!edit"
+      v-model="name"
+      :rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
+      :label="`${'ชื่อเอกสาร'}`"
+    />
+    <q-uploader
+      color="blue"
+      type="file"
+      flat
+      auto-upload
+      :factory="fileUpload"
+      class="full-width"
+      :max-size="10000000"
+      accept=".jpg,.png,.pdf,.csv,.doc"
+      bordered
+      label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
+    />
+  </div>
+  <q-card bordered flat class="full-width q-my-md">
+    <q-list separator>
+      <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+        <q-item-section>
+          <q-item-label class="full-width ellipsis">
+            {{ file.name }}
+          </q-item-label>
+
+          <q-item-label caption> สถานะ: {{ file.status }} / {{ file.sizeLabel }} </q-item-label>
+        </q-item-section>
+        <q-item-section top side>
+          <div class="q-gutter-sm">
+            <q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline">
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+            </q-btn>
+            <q-btn
+              size="12px"
+              flat
+              dense
+              round
+              color="red"
+              icon="mdi-delete-outline"
+              v-if="edit"
+            >
+              <q-tooltip>ลบไฟล์</q-tooltip>
+            </q-btn>
+          </div>
+        </q-item-section>
+      </q-item>
+    </q-list>
   </q-card>
 </template>
 <script setup lang="ts">