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

refactor: เพิ่ม สี icon ให้ บริการ และ สินค้า

Browse source
This commit is contained in:
Net 2024-07-09 15:23:42 +07:00
parent 41a833418e
commit 6426b0868d
1 changed files with 18 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/pages/04_product-service/MainPage.vue
View file

@ -102,12 +102,12 @@ const stat = ref<
>([ >([
{ icon: 'mdi-folder', count: 0, label: 'productAndService', color: 'pink' }, { icon: 'mdi-folder', count: 0, label: 'productAndService', color: 'pink' },
{ {
icon: 'mdi-folder', icon: 'mdi-folder-table',
count: 0, count: 0,
label: 'productAndServiceType', label: 'productAndServiceType',
color: 'purple', color: 'purple',
}, },
{ icon: 'mdi-folder', count: 0, label: 'service', color: 'orange' }, { icon: 'mdi-server-network', count: 0, label: 'service', color: 'orange' },
{ icon: 'mdi-folder', count: 0, label: 'product', color: 'green' }, { icon: 'mdi-folder', count: 0, label: 'product', color: 'green' },
]); ]);
@ -1410,8 +1410,8 @@ watch(inputSearchProductAndService, async () => {
</div> </div>
</div> </div>
<div style="height: 100%" class="scroll"> <div class="col flex scroll full-height q-pa-md surface-1 ">
<div class="row col full-width full-height"> <div class="full-width">
<q-table <q-table
flat flat
bordered bordered
@ -1420,7 +1420,7 @@ watch(inputSearchProductAndService, async () => {
(productMode === 'type' ? productType : productGroup) || [] (productMode === 'type' ? productType : productGroup) || []
" "
:columns="tbColumn.groupAndType" :columns="tbColumn.groupAndType"
class="full-width" class=" full-width "
card-container-class="q-gutter-md " card-container-class="q-gutter-md "
row-key="name" row-key="name"
:rows-per-page-options="[0]" :rows-per-page-options="[0]"
@ -1475,14 +1475,17 @@ watch(inputSearchProductAndService, async () => {
margin-bottom: var(--size-2); margin-bottom: var(--size-2);
" "
> >
<div :class="`icon-color-${productMode ==='group' ? 'pink' : 'purple'}`" class="branch-card__icon"> <div :class="`icon-color-${productMode ==='group' ? 'pink' : 'purple'}`" class="table__icon">
<q-icon
size="md"
style="scale: 0.8"
:name="productMode === 'group' ? 'mdi-folder' : 'mdi-folder-table'"
/>
<q-avatar size="md" icon="mdi-folder">
</q-avatar>
</div> </div>
</div> </div>
<div class="col"> <div class="col">
@ -2317,11 +2320,11 @@ watch(inputSearchProductAndService, async () => {
margin-bottom: var(--size-2); margin-bottom: var(--size-2);
" "
> >
<div class="table__icon"> <div class="table__icon" :class="`icon-color-${productAndServiceTab ==='product' ? 'orange' : 'green'}`">
<q-icon <q-icon
size="md" size="md"
style="scale: 0.8" style="scale: 0.8"
name="mdi-office-building-outline" :name="productAndServiceTab === 'product' ? 'mdi-folder' : 'mdi-server-network'"
/> />
</div> </div>
</div> </div>
@ -3293,7 +3296,7 @@ watch(inputSearchProductAndService, async () => {
--_color: var(--orange-6-hsl); --_color: var(--orange-6-hsl);
} }
.branch-card__icon { .table__icon {
background-color: hsla(var(--_color) / 0.15); background-color: hsla(var(--_color) / 0.15);
color: hsla(var(--_color) / 1); color: hsla(var(--_color) / 1);
@ -3316,10 +3319,12 @@ watch(inputSearchProductAndService, async () => {
background-color: hsla(var(--_branch-status-color) / 1); background-color: hsla(var(--_branch-status-color) / 1);
} }
& :deep(.q-avatar) { &:deep(.q-icon) {
transform: rotate(-45deg); transform: rotate(-45deg);
color: hsla(var(--_branch-card-bg) / 1); color: hsla(var(--_branch-card-bg) / 1);
} }
} }
</style> </style>