HAM!DREZA
95 lines
2.5 KiB
Vue
95 lines
2.5 KiB
Vue
<template>
|
|
<div class="category">
|
|
<h3
|
|
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>
|
|
<p
|
|
class="ms-0 md:ms-[1.563vw] text-[#878787] text-[3.59vw] md:text-[1.055vw] mt-[2vw] md:mt-[1vw]"
|
|
>
|
|
انتخاب از بین بیش از 210000 دوره آنلاین ویدیویی با افزودنی های جدید که هر
|
|
ماه منتشر می شود
|
|
</p>
|
|
|
|
<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: 7.3,
|
|
snapAlign: 'end',
|
|
},
|
|
// 1024 and up
|
|
1024: {
|
|
itemsToShow: 8.3,
|
|
snapAlign: 'end',
|
|
},
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |