responsived filter products
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user