create courses page

2024-05-15 16:09:09 +03:30
parent 1332ec0215
commit bf2b3769bf
11 changed files with 486 additions and 187 deletions
@@ -0,0 +1,92 @@
+<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-[2px] 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
+          width="24"
+          height="25"
+          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="pb-[0.681vw] text-primaryGreen border-b-[2px] border-primaryGreen"
+        >
+          همه دوره ها
+        </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"
+    >
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+    </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%)";
+  }
+};
+
+</script>