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

feat: responsive card + fix height card

Browse source
This commit is contained in:
oat_dev 2024-06-11 09:38:05 +07:00
parent 43d0caca67
commit 6add0cc327
2 changed files with 10 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/04_product-service/NewProductCardComponent.vue
View file

@ -18,7 +18,7 @@ withDefaults(
<template> <template>
<div <div
class="q-pa-lg full-width rounded column items-center hover-card" class="q-pa-lg full-width rounded column items-center hover-card"
:style="`border:2px dashed ${isType ? 'var(--purple-11)' : 'var(--pink-6)'}`" :style="`border:2px dashed ${isType ? 'var(--purple-11)' : 'var(--pink-6)'};flex-grow:1`"
@click="console.log('clicked!')" @click="console.log('clicked!')"
> >
<q-img <q-img
@ -30,7 +30,7 @@ withDefaults(
class="items-center rounded q-px-lg q-mt-md" class="items-center rounded q-px-lg q-mt-md"
:style="`border:1px solid ${isType ? 'var(--purple-11)' : 'var(--pink-6)'};background-color: ${isType ? 'var(--purple-11)' : 'var(--pink-6)'}`" :style="`border:1px solid ${isType ? 'var(--purple-11)' : 'var(--pink-6)'};background-color: ${isType ? 'var(--purple-11)' : 'var(--pink-6)'}`"
> >
<div class="text-white">+ {{ $t(label) }}</div> <div class="text-white text-no-wrap">+ {{ $t(label) }}</div>
</div> </div>
</div> </div>
</template> </template>

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

@ -86,7 +86,11 @@ const inputSearch = ref<string>('');
</div> </div>
</div> </div>
<div class="row q-col-gutter-lg"> <div class="row q-col-gutter-lg">
<div class="col-3" v-for="i in 6" :key="i"> <div
:class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
v-for="i in 6"
:key="i"
>
<ProductCardComponent <ProductCardComponent
:title="cardData.title" :title="cardData.title"
:subtitle="cardData.subtitle" :subtitle="cardData.subtitle"
@ -95,7 +99,9 @@ const inputSearch = ref<string>('');
:color="cardData.color" :color="cardData.color"
/> />
</div> </div>
<div class="col-3"> <div
:class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
>
<NewProductCardCompoent <NewProductCardCompoent
:label="'กลุ่มสินค้าและบริการ'" :label="'กลุ่มสินค้าและบริการ'"
:isType="false" :isType="false"