responsived filter products

This commit is contained in:
Mamalizz
2025-05-12 18:55:16 +03:30
parent 6b0355ae8e
commit c5658df39c
@@ -124,12 +124,12 @@ watch(
<template>
<div class="size-full flex flex-col gap-14 justify-between">
<div class="w-full flex flex-col gap-10">
<div class="w-full flex flex-col gap-8 lg:gap-10">
<div class="flex flex-col items-center w-full gap-5">
<div class="flex items-center justify-start gap-2 text-lg w-full">
<div class="flex items-center justify-start gap-2 max-lg:text-sm w-full">
<Icon
name="ci:filter-list"
size="24"
class="text-xl"
/>
ترتیب بر اساس
</div>
@@ -139,7 +139,7 @@ watch(
:key="index"
@click="params.sort = sort.value"
:class="params.sort == sort.value ? 'bg-black text-white' : 'bg-slate-100'"
class="py-1 px-3 cursor-pointer text-nowrap transition-all rounded-md text-sm"
class="py-1 px-3 cursor-pointer text-nowrap transition-all rounded-md text-xs lg:text-sm"
>
{{ sort.title }}
</button>
@@ -147,10 +147,10 @@ watch(
</div>
<div class="flex flex-col w-full gap-5">
<div class="flex items-center justify-start gap-2 text-lg w-full">
<div class="flex items-center justify-start gap-2 max-lg:text-sm w-full">
<Icon
name="ci:grid"
size="24"
class="text-xl"
/>
دسته بندی
</div>
@@ -161,10 +161,10 @@ watch(
</div>
<div class="flex flex-col w-full gap-5">
<div class="flex items-center justify-start gap-2 text-lg w-full">
<div class="flex items-center justify-start gap-2 max-lg:text-sm w-full">
<Icon
name="ci:scan-box"
size="24"
class="text-xl"
/>
محدوده قیمت
</div>
@@ -186,15 +186,15 @@ watch(
/>
</SliderRoot>
<div class="flex items-center justify-between">
<div class="flex-center gap-2">
<span class="text-sm text-black">حداقل</span>
<span class="text-sm text-black">
<div class="flex-center gap-2 text-xs lg:text-sm">
<span class="text-black">حداقل</span>
<span class="text-black">
{{ sliderValue[0].toLocaleString() }}
</span>
</div>
<div class="flex-center gap-2">
<span class="text-sm text-black">حداکثر</span>
<span class="text-sm text-black">
<div class="flex-center gap-2 text-xs lg:text-sm">
<span class="text-black">حداکثر</span>
<span class="text-black">
{{ sliderValue[1].toLocaleString() }}
</span>
</div>
@@ -202,13 +202,13 @@ watch(
</div>
<div class="flex items-center justify-between w-full gap-5">
<span class="text-black">فقط کالاهای تخفیف دار</span>
<span class="text-black max-lg:text-sm">فقط کالاهای تخفیف دار</span>
<Switch v-model="has_discount" />
</div>
<div class="flex items-center justify-between w-full gap-5">
<span class="text-black">فقط کالاهای موجود</span>
<span class="text-black max-lg:text-sm">فقط کالاهای موجود</span>
<Switch v-model="in_stock" />
</div>