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

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