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

updated style

Browse Source
This commit is contained in:
Mamalizz
2025-03-18 16:22:33 +03:30
parent 0a499fc281
commit c706b9d580
1 changed files with 72 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/product/ProductCard.vue
+72 -61
View File
@@ -1,5 +1,4 @@
<script lang="ts" setup>
// import
import Tag from "~/components/global/Tag.vue";
@@ -10,7 +9,7 @@ import { useImageColor } from "~/composables/global/useImageColor";
// types
type Props = {
id: number,
id: number;
title: string;
colors: string[];
price: string;
@@ -28,77 +27,89 @@ const { id } = toRefs(props);
// state
const { colorObject } = useImageColor(`#product-image-${id.value}`);
</script>
<template>
<NuxtLink :to="'/product/' + id">
<div class="@container">
<div
class="group relative size-full aspect-square rounded-xl @[280px]:rounded-2xl bg-white brightness-[98%] overflow-hidden p-6"
>
<img
: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"
/>
<li class="w-full">
<NuxtLink :to="'/product/' + id">
<div class="@container">
<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="
colorObject?.isLight && !darkLayer
? 'text-black'
: 'text-white'
"
class="absolute 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"
class="group relative size-full aspect-square rounded-xl @[280px]:rounded-2xl bg-white brightness-[98%] overflow-hidden p-6"
>
<img
: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 class="flex flex-col gap-2 items-start w-full">
<span class="@max-[280px]:hidden typo-sub-h-md @[280px]:typo-sub-h-lg truncate w-full">
{{ title }}
</span>
<div class="flex items-center justify-between w-full mt-1">
<div class="flex items-center gap-2 @[280px]:mt-1">
<ColorCircle
v-for="color in colors"
:key="color"
:style="{ backgroundColor: color }"
class="!size-5 @[280px]:!size-6"
/>
</div>
<span class="@max-[280px]:hidden typo-p-xs @[280px]:typo-p-md !font-semibold whitespace-nowrap">
{{ price }}
<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="
colorObject?.isLight && !darkLayer
? 'text-black'
: 'text-white'
"
class="absolute 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="flex flex-col gap-2 items-start w-full">
<span
class="@max-[280px]:hidden typo-sub-h-md @[280px]:typo-sub-h-lg truncate w-full"
>
{{ title }}
</span>
<div
class="flex items-center justify-between w-full mt-1"
>
<div
class="flex items-center gap-2 @[280px]:mt-1"
>
<ColorCircle
v-for="color in colors"
:key="color"
:style="{ backgroundColor: color }"
class="!size-5 @[280px]:!size-6"
/>
</div>
<span
class="@max-[280px]:hidden typo-p-xs @[280px]:typo-p-md !font-semibold whitespace-nowrap"
>
{{ price }}
</span>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-1 px-2 items-start w-full text-black mt-4 @[280px]:hidden">
<span class="typo-sub-h-sm w-full truncate">
{{ title }}
</span>
<div class="@[280px]:hidden flex items-center justify-between w-full mt-1">
<span class="typo-p-xs !font-semibold whitespace-nowrap">
{{ price }}
<div
class="flex flex-col gap-1 px-2 items-start w-full text-black mt-4 @[280px]:hidden"
>
<span class="typo-sub-h-sm w-full truncate">
{{ title }}
</span>
<div
class="@[280px]:hidden flex items-center justify-between w-full mt-1"
>
<span
class="typo-p-xs !font-semibold whitespace-nowrap"
>
{{ price }}
</span>
</div>
</div>
</div>
</div>
</NuxtLink>
</NuxtLink>
</li>
</template>