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

Updated

Browse Source
This commit is contained in:
marzban-dev
2025-03-04 20:40:48 +03:30
parent 5aff85c6a8
commit 47a3e10980
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/product/ProductCard.vue
+9 -7
View File
@@ -1,4 +1,5 @@
<script lang="ts" setup>
// import
import Tag from "~/components/global/Tag.vue";
@@ -34,7 +35,7 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
<template>
<NuxtLink :to="'/product/' + id">
<div
class="group relative size-full min-h-[31.25rem] rounded-2xl bg-white brightness-[98%] overflow-hidden p-6"
class="group relative size-full aspect-square rounded-2xl bg-white brightness-[98%] overflow-hidden p-6"
>
<img
:id="`product-image-${id}`"
@@ -45,7 +46,7 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
<div
v-if="darkLayer"
class="bg-linear-to-t inset-0 from-black/50 to-transparent to-40% absolute z-10 size-full"
class="bg-linear-to-t inset-0 from-black/50 to-transparent to-55% absolute z-10 size-full"
/>
<div
@@ -62,25 +63,26 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
? 'text-black'
: 'text-white'
"
class="absolute inset-x-0 bottom-0 pb-6 px-6 flex flex-row-reverse justify-between items-end z-10"
class="absolute inset-x-0 bottom-0 pb-4 md:pb-6 px-4 md:px-6 flex flex-row-reverse justify-between items-end z-10"
>
<div class="flex flex-col gap-2 items-start w-full">
<span class="typo-p-md font-medium">
<span class="typo-p-sm md:typo-p-md !font-medium">
{{ brand }}
</span>
<span class="typo-sub-h-lg">
<span class="typo-sub-h-md md:typo-sub-h-lg">
{{ title }}
</span>
<div class="flex items-center justify-between w-full mt-1">
<div class="flex items-center gap-2 mt-1">
<div class="flex items-center gap-2 md:mt-1">
<ColorCircle
v-for="color in colors"
:key="color"
:style="{ backgroundColor: color }"
class="!size-5 md:!size-6"
/>
</div>
<span class="typo-p-md font-medium whitespace-nowrap">
<span class="typo-p-sm md:typo-p-md font-medium whitespace-nowrap">
{{ price }}
</span>
</div>