response card top

This commit is contained in:
setthawutttty 2023-06-12 11:02:43 +07:00
parent c098fdd976
commit b926bd27d6

View file

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