chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor(01): table image

Browse source
This commit is contained in:
puriphatt 2024-09-03 13:23:52 +07:00
parent 5adf80142a
commit f2f8edbd68
1 changed files with 21 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/pages/01_branch-management/MainPage.vue
View file

@ -1165,27 +1165,21 @@ watch(currentHq, () => {
'branch-card__hq': props.row.isHeadOffice, 'branch-card__hq': props.row.isHeadOffice,
'branch-card__br': !props.row.isHeadOffice, 'branch-card__br': !props.row.isHeadOffice,
}" }"
style=" style="display: flex"
display: flex;
margin-bottom: var(--size-2);
"
> >
<div class=""> <q-avatar size="md">
<q-img <q-img
class="text-center"
:ratio="1"
:src=" :src="
baseUrl + baseUrl +
`/branch/${props.row.id}/branch-image?ts=${Date.now()}` `/branch/${props.row.id}/branch-image?ts=${Date.now()}`
" "
style="
height: 3rem;
width: 3rem;
border-radius: 50%;
aspect-ratio: 1;
overflow: visible;
"
> >
<template #error> <template #error>
<div class="branch-card__icon"> <div
class="branch-card__icon no-padding full-width full-height items-center justify-center"
>
<q-icon <q-icon
size="sm" size="sm"
name="mdi-office-building-outline" name="mdi-office-building-outline"
@ -1194,12 +1188,18 @@ watch(currentHq, () => {
</template> </template>
</q-img> </q-img>
<!-- <q-icon <q-badge
size="md" class="absolute-bottom-right no-padding"
style="scale: 0.8" style="
name="mdi-office-building-outline" border-radius: 50%;
/> --> min-width: 8px;
</div> min-height: 8px;
"
:style="{
background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
}"
></q-badge>
</q-avatar>
</div> </div>
<div class="col"> <div class="col">
<div class="col">{{ props.row.name }}</div> <div class="col">{{ props.row.name }}</div>
@ -2074,7 +2074,7 @@ watch(currentHq, () => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&::after { /* &::after {
content: ' '; content: ' ';
display: block; display: block;
block-size: 0.5rem; block-size: 0.5rem;
@ -2085,7 +2085,7 @@ watch(currentHq, () => {
top: calc(50% - 0.25rem); top: calc(50% - 0.25rem);
bottom: calc(50% - 0.25rem); bottom: calc(50% - 0.25rem);
background-color: hsla(var(--_branch-status-color) / 1); background-color: hsla(var(--_branch-status-color) / 1);
} } */
& :deep(.q-icon) { & :deep(.q-icon) {
transform: rotate(-45deg); transform: rotate(-45deg);