mohadese namavar
48 lines
1.2 KiB
Vue
48 lines
1.2 KiB
Vue
<template>
|
|
<section v-if="relatedPosts.length > 0" class="blog-relateds">
|
|
<div>
|
|
<h2>{{ $t("relatedPosts") }}</h2>
|
|
<Swiper slides-per-view="auto">
|
|
<SwiperSlide v-for="(item, i) in relatedPosts" :key="i">
|
|
<BlogItem :data="item" type="vertical" />
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { relatedPosts = [] } = inject('data')
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.blog-relateds {
|
|
@apply w-full flex justify-center;
|
|
|
|
&>div {
|
|
@apply w-full flex flex-col gap-6 lg:gap-14;
|
|
|
|
h2 {
|
|
@apply flex gap-3 lg:gap-6 items-center text-[#333333] font-bold font-vazir;
|
|
@apply text-base lg:text-2xl lg:leading-[1.9rem] px-6;
|
|
|
|
&::before {
|
|
@apply content-['_'] w-1 h-[1.2rem] lg:h-6 lg:w-[0.3rem] rounded-full bg-primary-600;
|
|
}
|
|
}
|
|
|
|
.swiper {
|
|
@apply container px-6;
|
|
|
|
.swiper-wrapper {
|
|
@apply w-max;
|
|
|
|
.swiper-slide {
|
|
@apply w-max ml-[1.1rem] lg:ml-6 last:ml-0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|