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

responsived

Browse Source
This commit is contained in:
Mamalizz
2025-03-13 01:38:26 +03:30
parent b22346c2c4
commit c04f659b49
1 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/pages/products.vue
+22 -16
View File
@@ -59,33 +59,36 @@ watch(
<template>
<div class="w-full container flex flex-col">
<div class="w-full flex justify-end items-end py-[5rem]">
<div
class="flex flex-col items-start gap-[1.5rem] text-black w-full"
class="w-full flex flex-col lg:flex-row justify-end items-end py-[3.5rem] lg:py-[5rem] gap-10 lg:gap-5"
>
<div
class="flex flex-col items-center lg:items-start gap-[1rem] lg:gap-[1.5rem] text-black w-full"
>
<div class="flex-center gap-[.75rem]">
<span>خانه</span>
<span>/</span>
<span>محصولات</span>
<span>/</span>
<span>همه</span>
<span class="text-xs lg:text-sm">خانه</span>
<span class="text-xs lg:text-sm">/</span>
<span class="text-xs lg:text-sm">محصولات</span>
<span class="text-xs lg:text-sm">/</span>
<span class="text-xs lg:text-sm">همه</span>
</div>
<h1 class="typo-h-3">لیست محصولات</h1>
<h1 class="typo-h-5 lg:typo-h-4">لیست محصولات</h1>
</div>
<div class="w-full flex items-center justify-end gap-4">
<div
class="w-full flex items-center justify-between lg:justify-end gap-4"
>
<Input
placeholder="جست و جو محصول ..."
v-model="search"
variant="outlined"
class="rounded-full w-8/12"
class="rounded-full w-full lg:w-8/12"
>
<template #endItem>
<div class="flex items-center gap-1">
<Icon
class="translate-y-[-1px]"
class="translate-y-[-1px] text-[20px] lg:text-[24px]"
name="ci:search"
size="24"
/>
</div>
</template>
@@ -94,7 +97,7 @@ watch(
<FilterButton />
<template #fallback>
<Skeleton
class="!w-[10.35rem] !h-[3.35rem] !rounded-full"
class="!size-11 lg:!w-[10.35rem] lg:!h-[3.35rem] shrink-0 !rounded-full"
/>
</template>
</Suspense>
@@ -102,19 +105,22 @@ watch(
</div>
<ul
v-if="productsIsLoading"
class="w-full grid grid-cols-3 gap-[1.5rem]"
class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[1.5rem]"
>
<Skeleton
v-for="i in 9"
:key="i"
class="w-full !h-[31.25rem] !rounded-2xl"
class="w-full !h-[25rem] lg:!h-[22.5rem] !rounded-2xl"
/>
</ul>
<div v-else class="w-full h-max">
<div v-if="!products?.length" class="flex flex-grow w-full">
<Placeholder title="محصولی یافت نشد :(" icon="bi:search" />
</div>
<ul v-else class="w-full grid grid-cols-3 gap-[1.5rem]">
<ul
v-else
class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[1.5rem]"
>
<li v-for="(product, index) in products" :key="index">
<ProductCard
:id="product.id"