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

fix: แก้ การแสดงผล ตอน INACTIVE

Browse source
This commit is contained in:
Net 2024-06-24 09:43:13 +07:00
parent 2a88eac660
commit 1324c1fca3
1 changed files with 14 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/04_product-service/ProductCardComponent.vue
View file

@ -21,7 +21,7 @@ withDefaults(
<template> <template>
<div <div
class="full-width rounded bordered q-pa-sm" class="full-width rounded q-pa-sm"
@click=" @click="
() => { () => {
$emit('onClick'); $emit('onClick');
@ -29,8 +29,8 @@ withDefaults(
" "
:class="{ :class="{
'hover-card': !isDisabled, 'hover-card': !isDisabled,
'disabled-card': isDisabled,
}" }"
:style="`border: 1px solid hsla(var(--gray-7-hsl) / ${isDisabled ? 0.1 : 0.3})`"
> >
<div <div
class="relative-position rounded q-pb-lg" class="relative-position rounded q-pb-lg"
@ -42,6 +42,7 @@ withDefaults(
icon="mdi-folder" icon="mdi-folder"
size="48px" size="48px"
class="q-my-md q-ml-md" class="q-my-md q-ml-md"
:class="{ 'disabled-card': isDisabled }"
:style="`color:hsl(${color});background-color:var(--surface-1) `" :style="`color:hsl(${color});background-color:var(--surface-1) `"
/> />
@ -51,7 +52,7 @@ withDefaults(
padding="sm" padding="sm"
class="absolute-top-right dots-btn" class="absolute-top-right dots-btn"
icon="mdi-dots-vertical" icon="mdi-dots-vertical"
style="z-index: 99" style="z-index: 99; position: absolute; opacity: 1"
size="sm" size="sm"
@click.stop="" @click.stop=""
> >
@ -79,6 +80,7 @@ withDefaults(
</span> </span>
</q-item> </q-item>
<q-item <q-item
v-if="!isDisabled"
dense dense
clickable clickable
class="row q-py-sm" class="row q-py-sm"
@ -101,6 +103,7 @@ withDefaults(
</span> </span>
</q-item> </q-item>
<q-item <q-item
v-if="!isDisabled"
dense dense
clickable clickable
@click=" @click="
@ -146,7 +149,7 @@ withDefaults(
</q-btn> </q-btn>
</div> </div>
<div class="q-px-md"> <div class="q-px-md" :class="{ 'disabled-card': isDisabled }">
<div class="text-subtitle1 text-bold">{{ title }}</div> <div class="text-subtitle1 text-bold">{{ title }}</div>
<div class="text-subtitle3 app-text-muted">{{ subtitle }}</div> <div class="text-subtitle3 app-text-muted">{{ subtitle }}</div>
<div class="row q-gutter-md q-mt-sm"> <div class="row q-gutter-md q-mt-sm">
@ -175,7 +178,10 @@ withDefaults(
</div> </div>
</div> </div>
</div> </div>
<div class="q-pt-lg q-pb-sm row justify-between"> <div
class="q-pt-lg q-pb-sm row justify-between"
:class="{ 'disabled-card': isDisabled }"
>
<div class="flex items-center"> <div class="flex items-center">
<q-icon <q-icon
size="xs" size="xs"
@ -221,7 +227,8 @@ withDefaults(
} }
.disabled-card { .disabled-card {
opacity: 0.5; opacity: 0.4;
cursor: pointer; cursor: pointer;
} }
</style> </style>