HAM!DREZA
128 lines
3.0 KiB
Vue
128 lines
3.0 KiB
Vue
<template>
|
|
<div
|
|
class="suggestions px-[1vw] md:px-[1.042vw] mt-[12vw] md:mt-[3.3vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
|
|
>
|
|
<div
|
|
class="ps-[1.5vw] border-b-[0.104vw] mt-[2vw] flex gap-x-[1vw] items-center text-[0.833vw] text-[#878787]"
|
|
>
|
|
<span
|
|
class="text-[0.741vw] text-[#383E43] flex items-center gap-[0.5vw] pb-[0.681vw]"
|
|
>
|
|
<svg
|
|
class="w-[6.154vw] md:w-[1.25vw] h-[6.154vw] md:h-[1.302vw]"
|
|
|
|
viewBox="0 0 24 25"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M3 7.5H21"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
/>
|
|
<path
|
|
d="M6 12.5H18"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
/>
|
|
<path
|
|
d="M10 17.5H14"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
/>
|
|
</svg>
|
|
<span class="hidden md:block"> مرتب سازی بر اساس: </span>
|
|
<span
|
|
class="block md:hidden text-[3.59vw] py-[2vw] ps-[1vw]"
|
|
@click="openSortOptions"
|
|
>مرتب سازی</span
|
|
>
|
|
</span>
|
|
<ul class="gap-x-[1vw] items-center hidden md:flex">
|
|
<li
|
|
class="relative pb-[0.681vw] text-primaryGreen active"
|
|
>
|
|
همه دوره ها
|
|
</li>
|
|
<li class="pb-[0.681vw]">دوره های رایگان</li>
|
|
<li class="pb-[0.681vw]">ارزان ترین</li>
|
|
<li class="pb-[0.681vw]">گران ترین</li>
|
|
</ul>
|
|
</div>
|
|
<div v-if="loading"
|
|
class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
|
|
>
|
|
<Card />
|
|
<Card />
|
|
<Card />
|
|
<Card />
|
|
<Card />
|
|
<Card />
|
|
<Card />
|
|
<Card />
|
|
<Card />
|
|
<Card />
|
|
<Card />
|
|
<Card />
|
|
<Card />
|
|
<Card />
|
|
<Card />
|
|
<Card />
|
|
</div>
|
|
<div v-else
|
|
class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
|
|
>
|
|
<Loading />
|
|
<Loading />
|
|
<Loading />
|
|
<Loading />
|
|
<Loading />
|
|
<Loading />
|
|
<Loading />
|
|
<Loading />
|
|
<Loading />
|
|
<Loading />
|
|
<Loading />
|
|
<Loading />
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const openSortOptions = () => {
|
|
if (process.client) {
|
|
document
|
|
.getElementById("filters")
|
|
.classList.remove("translate-y-[80.769vw]");
|
|
document.getElementsByTagName("html")[0].classList.add("overflow-hidden");
|
|
document.getElementById("brightnessFilter").style.filter =
|
|
"brightness(50%)";
|
|
document.getElementById("brightnessFilter").style.backdropFilter =
|
|
"brightness(90%)";
|
|
}
|
|
};
|
|
const loading = ref(false)
|
|
console.log(loading.value);
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
loading.value = true
|
|
console.log(loading.value);
|
|
}, 5000);
|
|
})
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.active::before{
|
|
content: '';
|
|
position: absolute;
|
|
background-color: #0D3F40;
|
|
width: 100%;
|
|
height: 0.01vw;
|
|
top: 2vw;
|
|
}
|
|
</style> |