mohadese namavar
59 lines
1.7 KiB
Vue
59 lines
1.7 KiB
Vue
<template>
|
|
<section class="reviews">
|
|
<Swiper slides-per-view="auto">
|
|
<SwiperSlide v-for="(review, i) in reviews" :key="i">
|
|
<router-link :to="'blog/' + review.link">
|
|
<img :src="review.coverPath" />
|
|
<h2>{{ review.title }}</h2>
|
|
<i class="isax isax-arrow-circle-left5" />
|
|
</router-link>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { reviews } = inject('data')
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.reviews {
|
|
@apply w-full flex justify-center my-9 lg:my-[4.4rem];
|
|
|
|
.swiper {
|
|
@apply container py-2 lg:py-4 rtl max-lg:px-4;
|
|
|
|
.swiper-wrapper {
|
|
@apply w-max;
|
|
|
|
.swiper-slide {
|
|
@apply w-min ml-2.5 lg:ml-6 last:ml-0;
|
|
|
|
a {
|
|
@apply flex items-end justify-between relative rounded-lg overflow-hidden text-white z-0;
|
|
@apply w-[9.9rem] h-[7.6rem] gap-4 px-[0.3rem] pb-2.5;
|
|
@apply lg:w-[18.3rem] lg:h-56 lg:gap-[1.3rem] lg:p-6;
|
|
|
|
img {
|
|
@apply absolute inset-0 z-0;
|
|
}
|
|
|
|
&::after {
|
|
background: linear-gradient(180deg, #0000 43.02%, #00000096 100%);
|
|
@apply content-['_'] absolute inset-0 z-[1];
|
|
}
|
|
|
|
h2 {
|
|
@apply text-xs lg:text-[1.3em] lg:leading-8 font-black font-iran-sans z-[2] whitespace-break-spaces;
|
|
}
|
|
|
|
i {
|
|
@apply text-lg lg:text-2xl z-[2] -mb-2 lg:-mb-1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|