ทะเบียนประวัติ: ปรับCardView

This commit is contained in:
oat_dev 2024-03-14 11:49:18 +07:00
parent 31739639d9
commit 9662fbedd8
4 changed files with 139 additions and 72 deletions

View file

@ -434,7 +434,7 @@ watch(
class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
>
<q-card bordered>
<q-card-actions align="right">
<q-card-actions align="right" class="bg-grey-3">
<q-btn
flat
round
@ -456,28 +456,29 @@ watch(
</q-card-actions>
<q-separator />
<q-list>
<q-item
v-for="col in props.cols.filter((col) => col.name !== 'desc')"
<div
v-for="(col, index) in props.cols"
:key="col.name"
:style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
>
<q-item-section>
<q-item-label>{{ col.label }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-item-label
caption
v-if="
col.name === 'startDate' ||
col.name === 'endDate' ||
col.name === 'graduateDate'
"
>
{{ col.value ? date2Thai(col.value) : "-" }}
</q-item-label>
<q-item-label caption v-else>{{ col.value }}</q-item-label>
</q-item-section>
</q-item>
<div class="row q-pa-sm">
<div class="col-7 label-color">
<div>{{ col.label }}</div>
</div>
<div class="col">
<div
v-if="
col.name === 'startDate' ||
col.name === 'endDate' ||
col.name === 'dateOrder'
"
>
{{ col.value ? date2Thai(col.value) : "-" }}
</div>
<div v-else>{{ col.value }}</div>
</div>
</div>
</div>
</q-list>
</q-card>
</div>
@ -928,4 +929,12 @@ watch(
.borderCard {
border: 1px solid #d0d0d0;
}
.label-color {
color: #747474cc;
}
.bg-color {
background-color: #fafafa;
}
</style>