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>
@@ -0,0 +1,51 @@
+<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>
@@ -0,0 +1,53 @@
+<template>
+  <div
+    id="filters"
+    class="text-[#333333] rounded-t-[4.103vw] p-[5vw] flex flex-col fixed bg-white bottom-0 left-0 z-[1000] h-[80.769vw] translate-y-[80.769vw] duration-500 w-[100vw]"
+  >
+    <div class="flex items-center justify-between w-full">
+      <span class="text-[3.59vw]">مرتب سازی بر اساس</span>
+      <svg
+        @click="closeSortOptions"
+        class="w-[5.641vw] h-[5.641vw]"
+        viewBox="0 0 22 22"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6.41663 6.41675L15.5833 15.5834M6.41663 15.5834L15.5833 6.41675"
+          stroke="#878787"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+
+    <ul class="mt-[4vw] text-[3.19vw] px-[2vw]">
+      <li class="border-b py-[4vw] flex justify-between items-center">
+        <span>
+            همه ی دوره ها
+        </span>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M20 7L10 17L5 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+    </li>
+      <li class="border-b py-[4vw]">دوره های رایگان</li>
+      <li class="border-b py-[4vw]">ارزانترین</li>
+      <li class="py-[4vw]">گرانترین</li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+const closeSortOptions = () => {
+  if (process.client) {
+    document.getElementById("brightnessFilter").style.filter = "none";
+    document.getElementById("brightnessFilter").style.backdropFilter = "none";
+    document.getElementById("filters").classList.add("translate-y-[80.769vw]");
+    document
+      .getElementsByTagName("html")[0]
+      .classList.remove("overflow-hidden");
+  }
+};
+
+</script>