heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed product card structure

Browse Source
This commit is contained in:
Mamalizz
2025-06-04 19:12:11 +03:30
parent fac7af51ae
commit 6f4d380cce
1 changed files with 53 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/product/ProductCard.vue
+53 -55
View File
@@ -54,68 +54,66 @@ const parallaxStyle = computed(() => {
</script>
<template>
<li class="w-full">
<NuxtLink :to="'/product/' + slug">
<div
class="@container group"
ref="containerEl"
>
<div class="perspective-midrange">
<div
:style="parallaxStyle"
class="group relative size-full aspect-square rounded-2xl bg-white brightness-[95%] overflow-hidden p-6"
>
<NuxtImg
:id="`product-image-${id}`"
:src="picture"
class="group-hover:scale-105 transition-transform duration-200 size-full object-contain absolute inset-0"
alt="product-background"
/>
<NuxtLink :to="{ name: 'product-id', params: { id: slug } }">
<div
class="@container group"
ref="containerEl"
>
<div class="perspective-midrange">
<div
:style="parallaxStyle"
class="group relative size-full aspect-square rounded-2xl bg-white brightness-[95%] overflow-hidden p-6"
>
<NuxtImg
:id="`product-image-${id}`"
:src="picture"
class="group-hover:scale-105 transition-transform duration-200 size-full object-contain absolute inset-0"
alt="product-background"
/>
<!-- <div
<!-- <div
v-if="darkLayer"
class="bg-linear-to-t inset-0 from-black/50 to-transparent to-55% absolute z-10 size-full"
/> -->
<div
class="flex justify-between items-center absolute px-4 @[280px]:px-6 pt-4 @[280px]:pt-6 top-0 w-full inset-x-0"
>
<Rate
v-if="rate"
:rate="rate"
/>
<Tag v-if="tag">
{{ tag }}
</Tag>
</div>
<div
class="absolute opacity-0 group-hover:opacity-100 bg-gradient-to-t transition-all group-hover:from-black/30 to-transparent inset-x-0 bottom-0 pb-4 @[280px]:pb-6 px-4 @[280px]:px-6 flex flex-row-reverse justify-between items-end z-10"
>
<div
class="items-center flex gap-2 @[280px]:mt-1 transition-all translate-y-1 group-hover:translate-y-0"
>
<ColorCircle
v-for="color in limitedColors"
:key="color"
:style="{ backgroundColor: color }"
class="!size-5 @[280px]:!size-6"
/>
</div>
</div>
<div
class="flex justify-between items-center absolute px-4 @[280px]:px-6 pt-4 @[280px]:pt-6 top-0 w-full inset-x-0"
>
<Rate
v-if="rate"
:rate="rate"
/>
<Tag v-if="tag">
{{ tag }}
</Tag>
</div>
</div>
<div class="flex flex-col gap-1 px-2 items-start w-full text-black mt-4">
<span class="typo-sub-h-sm font-normal w-full truncate">
{{ title }}
</span>
<div class="flex items-center justify-between w-full mt-1">
<span class="typo-p-xs !font-bold whitespace-nowrap">
{{ price }}
</span>
<div
class="absolute opacity-0 group-hover:opacity-100 bg-gradient-to-t transition-all group-hover:from-black/30 to-transparent inset-x-0 bottom-0 pb-4 @[280px]:pb-6 px-4 @[280px]:px-6 flex flex-row-reverse justify-between items-end z-10"
>
<div
class="items-center flex gap-2 @[280px]:mt-1 transition-all translate-y-1 group-hover:translate-y-0"
>
<ColorCircle
v-for="color in limitedColors"
:key="color"
:style="{ backgroundColor: color }"
class="!size-5 @[280px]:!size-6"
/>
</div>
</div>
</div>
</div>
</NuxtLink>
</li>
<div class="flex flex-col gap-1 px-2 items-start w-full text-black mt-4">
<span class="typo-sub-h-sm font-normal w-full truncate">
{{ title }}
</span>
<div class="flex items-center justify-between w-full mt-1">
<span class="typo-p-xs !font-bold whitespace-nowrap">
{{ price }}
</span>
</div>
</div>
</div>
</NuxtLink>
</template>