response card top

src/modules/05_placement/components/pass/Detail.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import { reactive, ref } from "vue";
-
+import { useQuasar } from "quasar";
 import { defineAsyncComponent } from "@vue/runtime-core";
 import { useRouter } from "vue-router";
-
+const $q = useQuasar();
 const router = useRouter();
 const year = ref<string>("2566");
 const round = ref<string>("1");
 const title = ref<string>("การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ");
-
+  const sizeCard = (val: number) => {
+  if (val === 5) {
+    return "width:15%;";
+  } 
+};
 const itemTop = reactive([
   {
     id: 1,
@@ -54,13 +58,11 @@ const AddTablePosition = defineAsyncComponent(
     </div>
     <q-space />
 
-    <div class="q-py-md row col-12 no-wrap">
-      <hr class="q-separator q-separator--vertical gt-sm" aria-orientation="vertical" style="width: 2px" />
-
+    <div class="q-py-md row col-12">  
       <div class="col-12 row bg-white">
         <div class="fit q-pa-md">
           <div class="row col-12 q-col-gutter-md fit">
-            <div class="" v-for="item in itemTop" :key="item.id" style="width: 15%">
+            <div class="" v-for="item in itemTop" :key="item.id" :style="$q.screen.lt.md ? '' : sizeCard(5)" :class="$q.screen.lt.sm ? 'col-4' : ''">
               <div class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-pa-sm">
                 <div class="col-12 row items-center q-pa-sm">
                   <div class="col-12 text-h5 text-weight-bold" :style="{ color: item.color }">