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

refactor(04): disable price color

Browse source
This commit is contained in:
puriphatt 2024-08-15 11:13:42 +07:00
parent a80279efb9
commit 0409bd4c4a
1 changed files with 53 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2994,13 +2994,18 @@ watch(
" "
> >
<div <div
class="row tags-color-green q-gutter-x-md no-wrap items-center text-right" class="row q-gutter-x-md no-wrap items-center text-right"
> >
<div <div
class="tags col-3 column ellipsis-2-lines" class="tags tags-color-orange col-3 column ellipsis-2-lines"
:class="{
disable: props.row.status === 'INACTIVE',
}"
style="min-width: 50px" style="min-width: 50px"
> >
<div class="col-4">{{ $t('salePrice') }}</div> <div class="col-4 app-text-muted-2">
{{ $t('salePrice') }}
</div>
<div class="col-4 text-weight-bold"> <div class="col-4 text-weight-bold">
{{ {{
formatNumberDecimal(props.row.price || 0, 2) formatNumberDecimal(props.row.price || 0, 2)
@ -3008,10 +3013,15 @@ watch(
</div> </div>
</div> </div>
<div <div
class="tags col-3 column ellipsis-2-lines" class="tags tags-color-purple col-3 column ellipsis-2-lines"
:class="{
disable: props.row.status === 'INACTIVE',
}"
style="min-width: 50px" style="min-width: 50px"
> >
<div class="col-4">{{ $t('agentPrice') }}</div> <div class="col-4 app-text-muted-2">
{{ $t('agentPrice') }}
</div>
<div class="col-4 text-weight-bold"> <div class="col-4 text-weight-bold">
{{ {{
formatNumberDecimal( formatNumberDecimal(
@ -3022,10 +3032,13 @@ watch(
</div> </div>
</div> </div>
<div <div
class="tags col-3 column ellipsis-2-lines" class="tags tags-color-pink col-3 column ellipsis-2-lines"
:class="{
disable: props.row.status === 'INACTIVE',
}"
style="min-width: 50px" style="min-width: 50px"
> >
<div class="col-4"> <div class="col-4 app-text-muted-2">
{{ $t('processingPrice') }} {{ $t('processingPrice') }}
</div> </div>
<div class="col-4 text-weight-bold"> <div class="col-4 text-weight-bold">
@ -4676,14 +4689,6 @@ watch(
--_color: var(--teal-10-hsl); --_color: var(--teal-10-hsl);
} }
.tags-color-green {
--_color-tag: var(--teal-10-hsl);
}
.dark .tags-color-green {
--_color-tag: var(--teal-8-hsl);
}
.dark .icon-color-purple { .dark .icon-color-purple {
--_color: var(--violet-10-hsl); --_color: var(--violet-10-hsl);
} }
@ -4696,6 +4701,34 @@ watch(
--_color: var(--orange-6-hsl); --_color: var(--orange-6-hsl);
} }
.tags-color-green {
--_color-tag: var(--teal-10-hsl);
}
.dark .tags-color-green {
--_color-tag: var(--teal-8-hsl);
}
.tags-color-orange {
--_color-tag: var(--orange-5-hsl);
}
.dark .tags-color-orange {
--_color-tag: var(--orange-6-hsl);
}
.tags-color-purple {
--_color-tag: var(--violet-11-hsl);
}
.dark .tags-color-purple {
--_color-tag: var(--violet-10-hsl);
}
.tags-color-pink {
--_color-tag: var(--pink-6-hsl);
}
.table__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);
@ -4737,6 +4770,11 @@ watch(
background: hsla(var(--_color-tag) / 0.15); background: hsla(var(--_color-tag) / 0.15);
border-radius: var(--radius-2); border-radius: var(--radius-2);
padding-inline: var(--size-2); padding-inline: var(--size-2);
&.disable {
filter: grayscale(100%);
opacity: 80%;
}
} }
* :deep(.q-icon.mdi-play) { * :deep(.q-icon.mdi-play) {