ปรับ ui Responensive

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-05-27 15:29:13 +07:00
parent 8d0ac4eb7c
commit 93bdc791dc
9 changed files with 266 additions and 80 deletions

View file

@ -462,7 +462,7 @@ const title = computed(() => {
<q-card-section class="q-pa-none scroll" style="max-height: 75vh">
<div class="col-12 row">
<div class="bg-grey-1 q-pa-md col-3 row lineRight">
<div class="bg-grey-1 q-pa-md col-xs-12 col-md-3 row lineRight">
<div class="col-12 fit">
<div class="row col-12" v-if="numpage !== 3">
<q-checkbox
@ -617,14 +617,14 @@ const title = computed(() => {
</div>
</div>
<div class="col-9">
<div class="col-xs-12 col-md-9">
<div class="row q-pa-md q-col-gutter-sm">
<div class="col-12">
<span class="text-body2 text-weight-medium"
>รายละเอยดตวช</span
>
</div>
<div class="col-6">
<div class="col-xs-12 col-6">
<q-card bordered class="full-height q-pa-sm">
<div class="q-pa-sm q-col-gutter-lg">
<div class="col-12 row" v-if="numpage !== 3">
@ -733,7 +733,7 @@ const title = computed(() => {
</div>
</q-card>
</div>
<div class="col-6 row">
<div class="col-xs-12 col-6 row">
<div class="row col-12 card-box">
<div
class="col-12 bg-grey-2 row items-center text-weight-medium"

View file

@ -282,7 +282,7 @@ watch(
<q-card-section class="q-pa-none scroll" style="max-height: 80vh">
<div class="row">
<div class="bg-grey-1 q-pa-md col-3 row lineRight">
<div class="bg-grey-1 q-pa-md col-xs-12 col-md-3 row lineRight">
<div class="col-12 q-col-gutter-sm fit">
<div class="col-12">
<q-select
@ -362,13 +362,13 @@ watch(
</div>
</div>
<div class="col-9 q-pa-md q-col-gutter-sm">
<div class="col-xs-12 col-md-9 q-pa-md q-col-gutter-sm">
<span class="text-body2 text-weight-medium"
>รายละเอยดสมรรถนะ</span
>
<div class="row q-col-gutter-sm">
<div class="col-5 row">
<div class="col-xs-12 col-md-5 row">
<q-card bordered class="fit q-pa-sm no-shadow">
<div
v-for="(field, index) in Object.keys(fieldDetailLabels)"
@ -442,14 +442,13 @@ watch(
</div>
</q-card>
</div>
<div class="col-7">
<q-table
<div class="col-xs-12 col-md-7">
<d-table
flat
bordered
dense
:paging="true"
row-key="level"
class="custom-table2"
virtual-scroll
:rows="dataListCapacityDetails"
hide-pagination
@ -486,6 +485,32 @@ watch(
</q-td>
</q-tr>
</template>
<template #item="props">
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list>
<q-item
v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
:key="col.name"
>
<q-item-section>
<q-item-label caption>{{
col.label
}}</q-item-label>
<q-item-label v-if="(col.name = 'description')">
<span v-html="col.value"></span
></q-item-label>
<q-item-label v-else>{{
col.value ?? "-"
}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
<template v-slot:no-data="{ icon, message }">
<div
class="q-pa-md text-weight-bold full-width text-center"
@ -493,7 +518,7 @@ watch(
<span style="font-size: 16px">ไมพบขอมลสมรรถนะ</span>
</div>
</template>
</q-table>
</d-table>
<!-- <q-card bordered class="col-12 no-shadow">
<div class="bg-grey-2 row q-py-sm text-weight-bold col-12">

View file

@ -1,4 +1,3 @@
divdiv
<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
@ -79,7 +78,10 @@ watch(
<template>
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 45%">
<q-card
class="col-12"
:style="!$q.screen.gt.xs ? 'width: 100%' : 'width: 45%'"
>
<DialogHeader :tittle="'คำอธิบายผลสำเร็จของงาน'" :close="closeDialog" />
<q-separator />
<q-card-section>