HAM!DREZA
135 lines
4.2 KiB
Vue
135 lines
4.2 KiB
Vue
<template>
|
|
<div class="category">
|
|
<h3
|
|
v-if="$route.path === '/'"
|
|
class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[4.103vw] md:mt-[3.49vw] ms-0 md:ms-[1.563vw]"
|
|
>
|
|
انتخاب گسترده ای از دوره ها
|
|
</h3>
|
|
<div
|
|
class="flex flex-col md:flex-row items-start justify-between md:items-center"
|
|
v-else
|
|
>
|
|
<h3
|
|
class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[6vw] md:mt-[4.103vw] md:mt-[3.2vw] ms-0 md:ms-[1.563vw]"
|
|
>
|
|
حرفه آینده را کشف کنید
|
|
</h3>
|
|
<span
|
|
class="mt-[3vw] md:mt-[3vw] text-[#878787] text-[3.59vw] md:text-[0.833vw] md:me-[1.563vw]"
|
|
>42 ویدیو آموزشی</span
|
|
>
|
|
</div>
|
|
<p
|
|
class="hidden md:block ms-0 md:ms-[1.563vw] text-[#878787] text-[3.59vw] md:text-[1.055vw] mt-[2vw] md:mt-[1vw]"
|
|
>
|
|
انتخاب از بین بیش از 210000 دوره آنلاین ویدیویی با افزودنی های جدید که هر
|
|
ماه منتشر می شود
|
|
</p>
|
|
<div
|
|
v-show="$route.path === '/courses'"
|
|
class="mt-[5vw] md:mt-[2.3vw] mb-[3.2vw] relative"
|
|
>
|
|
<svg
|
|
class="absolute top-[3vw] md:top-[0.9vw] right-[4.5vw] md:right-[2.5vw] h-[5.128vw] md:h-[1.458vw] w-[5.128vw] md:w-[1.458vw]"
|
|
viewBox="0 0 28 28"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M13.4168 24.5C19.538 24.5 24.5002 19.5378 24.5002 13.4167C24.5002 7.29552 19.538 2.33334 13.4168 2.33334C7.29567 2.33334 2.3335 7.29552 2.3335 13.4167C2.3335 19.5378 7.29567 24.5 13.4168 24.5Z"
|
|
stroke="#878787"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M25.6668 25.6667L23.3335 23.3333"
|
|
stroke="#878787"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
|
|
<input
|
|
class="thin w-[100%] md:w-[45vw] h-[10.769vw] md:h-[3.333vw] text-[2.836vw] md:text-[0.741vw] text-[#878787] rounded-[2.564vw] md:rounded-[0.781vw] ps-[12vw] md:ps-[3vw] md:ms-[1.563vw] shadow-sm"
|
|
type="text"
|
|
placeholder="نام آموزش ، دوره و ... را وارد کنید"
|
|
/>
|
|
</div>
|
|
<div class="flexBox px-0 md:px-[1vw] h-[2.813vw] mt-[10vw] md:mt-[2.5vw]">
|
|
<svg
|
|
@click="this.$refs.carousel.next()"
|
|
class="hidden md:block h-[1.563vw] w-[1.563vw] cursor-pointer"
|
|
viewBox="0 0 30 30"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
class="fill-[#878787] hover:fill-[#383E43]"
|
|
d="M18.9996 13.1125L16.5371 10.65L12.5246 6.63753C11.6746 5.80003 10.2246 6.40003 10.2246 7.60003V15.3875V22.4C10.2246 23.6 11.6746 24.2 12.5246 23.35L18.9996 16.875C20.0371 15.85 20.0371 14.15 18.9996 13.1125Z"
|
|
/>
|
|
</svg>
|
|
|
|
<Carousel
|
|
:items-to-show="8.3"
|
|
ref="carousel"
|
|
:breakpoints="breakpoints"
|
|
:wrapAround="true"
|
|
class="w-full md:w-[95%]"
|
|
>
|
|
<Slide v-for="slide in categories" :key="slide">
|
|
<div class="categoriesOption">{{ slide }}</div>
|
|
</Slide>
|
|
</Carousel>
|
|
|
|
<svg
|
|
@click="this.$refs.carousel.prev()"
|
|
class="hidden md:block h-[1.563vw] w-[1.563vw] cursor-pointer"
|
|
viewBox="0 0 30 30"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M17.4748 6.65005L13.4623 10.6626L10.9998 13.1126C9.9623 14.1501 9.9623 15.8376 10.9998 16.8751L17.4748 23.3501C18.3248 24.2001 19.7748 23.5876 19.7748 22.4001V15.3876V7.60005C19.7748 6.40005 18.3248 5.80005 17.4748 6.65005Z"
|
|
class="fill-[#878787] hover:fill-[#383E43]"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
const categories = [
|
|
"Python",
|
|
"JavaScript",
|
|
"C#",
|
|
"php",
|
|
"C++",
|
|
"Ruby",
|
|
"Node.js",
|
|
"php",
|
|
"C++",
|
|
"Ruby",
|
|
"Node.js",
|
|
];
|
|
const breakpoints = {
|
|
// 700px and up
|
|
300: {
|
|
itemsToShow: 3.5,
|
|
snapAlign: "end",
|
|
},
|
|
700: {
|
|
itemsToShow: 8.6,
|
|
snapAlign: "end",
|
|
},
|
|
// 1024 and up
|
|
1024: {
|
|
itemsToShow: 8.6,
|
|
snapAlign: "end",
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style> |