danak/dlearn-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pagination / category / sort

Browse Source
This commit is contained in:
HAM!DREZA
2024-06-01 23:02:18 +03:30
parent 2242ed022f
commit 69ad899b35
11 changed files with 520 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/courses-page/Courses-list.vue
-97
View File
@@ -1,97 +0,0 @@
<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 class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
>
<div v-for="(course, index) in data.data.courses"
:key="index">
<Card :course="course" />
</div>
</div>
</div>
</template>
<script setup>
// const pages = 17 / 16
// console.log(Math.ceil(pages));
//const data = await useFetch("/api/course");
const data = defineProps(['data']);
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);
onMounted(() => {
setTimeout(() => {
loading.value = true;
}, 2000);
});
</script>
<style>
.active::before {
content: "";
position: absolute;
background-color: #0d3f40;
width: 100%;
height: 0.01vw;
top: 2vw;
}
</style>
components/courses-page/Pagination.vue
-51
View File
@@ -1,51 +0,0 @@
<template>
<div class="flexBox py-[5vw] md:py-[2vw]">
<ul class="flexBox gap-[6vw] md:gap-[2vw] text-[4.038vw] md:text-[1.055vw] text-[#383E43]">
<li>
<svg
class="w-[4.103vw] md:w-[1.25vw] h-[4.103vw] md:h-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.91016 19.9201L15.4302 13.4001C16.2002 12.6301 16.2002 11.3701 15.4302 10.6001L8.91016 4.08008"
stroke="#292D32"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</li>
<li>53</li>
<li>...</li>
<li>3</li>
<li>2</li>
<li class="flexBox bg-primaryGreen text-white w-[7.692vw] md:w-[2.292vw] h-[7.692vw] md:h-[2.292vw] rounded-[50%]">1</li>
<li>
<svg
class="w-[4.103vw] md:w-[1.25vw] h-[4.103vw] md:h-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.9998 19.9201L8.47984 13.4001C7.70984 12.6301 7.70984 11.3701 8.47984 10.6001L14.9998 4.08008"
stroke="#292D32"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</li>
</ul>
</div>
</template>