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

feat: add hover + on click (emit)

Browse source
This commit is contained in:
oat_dev 2024-06-11 12:00:53 +07:00
parent 87615a1e2e
commit 0a845e6d4e
1 changed files with 16 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,7 +18,11 @@ withDefaults(
</script> </script>
<template> <template>
<div class="full-width rounded" :style="`border:1px solid ${color}`"> <div
class="full-width rounded hover-card"
:style="`border:1px solid ${color}`"
@click="$emit('onClick')"
>
<div class="q-pa-md row justify-between items-center"> <div class="q-pa-md row justify-between items-center">
<q-btn <q-btn
round round
@ -27,7 +31,11 @@ withDefaults(
flat flat
:style="`color:${color};background-color:var(--surface-0)`" :style="`color:${color};background-color:var(--surface-0)`"
/> />
<AllAroundBtn :label="'viewDetail'" :color="color" /> <AllAroundBtn
:label="'viewDetail'"
:color="color"
@view-detail="$emit('viewDetail')"
/>
</div> </div>
<div class="q-px-md"> <div class="q-px-md">
<div class="text-subtitle1 text-bold">{{ title }}</div> <div class="text-subtitle1 text-bold">{{ title }}</div>
@ -70,4 +78,10 @@ withDefaults(
border-radius: 0 0 var(--radius-2) var(--radius-2); border-radius: 0 0 var(--radius-2) var(--radius-2);
font-size: 16px; font-size: 16px;
} }
.hover-card:hover {
cursor: pointer;
opacity: 0.8;
box-shadow: var(--shadow-3);
}
</style> </style>