ปรับ ui Responensive
This commit is contained in:
parent
8d0ac4eb7c
commit
93bdc791dc
9 changed files with 266 additions and 80 deletions
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue