ปรับ responesive

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-06-05 11:36:57 +07:00
parent 78bd5c0f7b
commit ff10fb0ee1
5 changed files with 56 additions and 34 deletions

View file

@ -596,7 +596,7 @@ onMounted(async () => {
<div class="col-12">
<q-card bordered class="col-12 row caedNone">
<div class="col-xs-12 col-sm-3 row">
<div class="col-12 row no-wrap">
<div class="col-12 row ">
<div class="col-12 q-py-md q-px-lg">
<div class="col-12 row items-center no-wrap">
<div class="toptitle2">

View file

@ -13,7 +13,7 @@ const props = defineProps({
<template>
<div class="q-pa-sm row col-12">
<q-table
<d-table
ref="table"
flat
bordered
@ -23,9 +23,9 @@ const props = defineProps({
:rows-per-page-options="[10, 25, 50, 100]"
virtual-scroll
class="row col-12"
:style="$q.screen.lt.sm ? 'width: 70vw' : 'width: 50vw;'"
:style="$q.screen.lt.sm ? 'width: 80vw' : 'width: 50vw;'"
>
</q-table>
</d-table>
</div>
</template>

View file

@ -1,4 +1,3 @@
div
<script setup lang="ts">
import { ref, reactive, defineProps, watch } from "vue";
import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
@ -206,7 +205,7 @@ function onSubmit(data: any) {
</div>
</q-banner>
</div>
<div class="row q-gutter-x-sm">
<div class="row q-col-gutter-sm ">
<div class="col-xs-12 col-md-3">
<q-select
:class="inputEdit(isReadOnly)"

View file

@ -379,7 +379,7 @@ onMounted(async () => {
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<q-table
<d-table
flat
bordered
dense
@ -436,7 +436,30 @@ onMounted(async () => {
</q-td>
</q-tr>
</template>
</q-table>
<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 @click="editPage(props.row.id)">
<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 === 'no'">
{{ props.rowIndex + 1 }}
</q-item-label>
<q-item-label v-else>{{ col.value }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
</d-table>
</q-card>
</div>
</div>

View file

@ -394,7 +394,7 @@ onMounted(async () => {
>*ำหน(อยละ) ผลสมฤทธของงานไมกตอง</span
>
<br v-if="!$q.screen.gt.xs" />
<q-btn
v-if="
store.rolePerson == 'USER' &&
@ -502,51 +502,51 @@ onMounted(async () => {
$q.screen.gt.xs ? 'padding-left: 12%' : 'padding-left:5%'
"
>
<div class="row no-wrap">
<div class="col-2">
<div class="column">
<span class="text-grey-6">ตำแหนงในสายงาน</span>
<span class="text-weight-medium text-dark">{{
<div class="row">
<div class="col-xs-12 col-md-2">
<div :class="$q.screen.gt.sm ? 'column' : 'row'">
<span class="text-grey-6 col">ตำแหนงในสายงาน</span>
<span class="text-weight-medium text-dark col">{{
store.dataEvaluation.position
}}</span>
</div>
</div>
<div class="col-2">
<div class="column">
<span class="text-grey-6">ประเภทตำแหน</span>
<span class="text-weight-medium text-dark">{{
<div class="col-xs-12 col-md-2">
<div :class="$q.screen.gt.sm ? 'column' : 'row'">
<span class="text-grey-6 col">ประเภทตำแหน</span>
<span class="text-weight-medium text-dark col">{{
store.dataEvaluation.posTypeName
}}</span>
</div>
</div>
<div class="col-2">
<div class="column">
<span class="text-grey-6">ระดบตำแหน</span>
<span class="text-weight-medium text-dark">{{
<div class="col-xs-12 col-md-2">
<div :class="$q.screen.gt.sm ? 'column' : 'row'">
<span class="text-grey-6 col">ระดบตำแหน</span>
<span class="text-weight-medium text-dark col">{{
store.dataEvaluation.posLevelName
}}</span>
</div>
</div>
<div class="col-2">
<div class="column">
<span class="text-grey-6">สถานะการประเม</span>
<span class="text-weight-medium text-dark">{{
<div class="col-xs-12 col-md-2">
<div :class="$q.screen.gt.sm ? 'column' : 'row'">
<span class="text-grey-6 col">สถานะการประเม</span>
<span class="text-weight-medium text-dark col">{{
formProfile.status
}}</span>
</div>
</div>
<div class="col-2">
<div class="column">
<span class="text-grey-6">ผลการประเม</span>
<span class="text-weight-medium text-dark">{{
<div class="col-xs-12 col-md-2">
<div :class="$q.screen.gt.sm ? 'column' : 'row'">
<span class="text-grey-6 col">ผลการประเม</span>
<span class="text-weight-medium text-dark col">{{
formProfile.result
}}</span>
</div>
</div>
<div class="col-2">
<div class="column">
<span class="text-grey-6">คะแนนประเม</span>
<span class="text-weight-medium text-primary">
<div class="col-xs-12 col-md-2">
<div :class="$q.screen.gt.sm ? 'column' : 'row'">
<span class="text-grey-6 col">คะแนนประเม</span>
<span class="text-weight-medium text-primary col">
{{
store.dataEvaluation.posExecutiveName == null
? (