ปรับ 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"> <div class="col-12">
<q-card bordered class="col-12 row caedNone"> <q-card bordered class="col-12 row caedNone">
<div class="col-xs-12 col-sm-3 row"> <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 q-py-md q-px-lg">
<div class="col-12 row items-center no-wrap"> <div class="col-12 row items-center no-wrap">
<div class="toptitle2"> <div class="toptitle2">

View file

@ -13,7 +13,7 @@ const props = defineProps({
<template> <template>
<div class="q-pa-sm row col-12"> <div class="q-pa-sm row col-12">
<q-table <d-table
ref="table" ref="table"
flat flat
bordered bordered
@ -23,9 +23,9 @@ const props = defineProps({
:rows-per-page-options="[10, 25, 50, 100]" :rows-per-page-options="[10, 25, 50, 100]"
virtual-scroll virtual-scroll
class="row col-12" 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> </div>
</template> </template>

View file

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

View file

@ -379,7 +379,7 @@ onMounted(async () => {
class="col-xs-12 col-sm-3 col-md-2" class="col-xs-12 col-sm-3 col-md-2"
/> />
</div> </div>
<q-table <d-table
flat flat
bordered bordered
dense dense
@ -436,7 +436,30 @@ onMounted(async () => {
</q-td> </q-td>
</q-tr> </q-tr>
</template> </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> </q-card>
</div> </div>
</div> </div>

View file

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