mohadese namavar
83 lines
2.5 KiB
Vue
83 lines
2.5 KiB
Vue
<template>
|
|
<section class="amazing-offers">
|
|
<div>
|
|
<aside>
|
|
<h2>
|
|
<span>{{ $t("amazingOffers") }}</span>
|
|
<span>{{ $t("asanMarket") }}</span>
|
|
</h2>
|
|
<img src="/images/amazing.svg" />
|
|
</aside>
|
|
<Swiper :slides-per-view="'auto'">
|
|
<SwiperSlide v-for="(product, i) in amazingOffers" :key="i">
|
|
<ProductCard :data="product" type="main" />
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { amazingOffers } = inject('data')
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.amazing-offers {
|
|
@apply w-full flex justify-center;
|
|
@apply mt-[2.6rem] lg:mt-[11.3rem];
|
|
|
|
&>div {
|
|
@apply max-w-full w-full flex shrink-0 bg-[#F2F2F2] overflow-hidden;
|
|
@apply gap-2.5 pr-2.5 h-max;
|
|
@apply lg:container lg:rounded-2xl lg:pr-[2.6rem] lg:gap-[2.4rem];
|
|
|
|
aside {
|
|
@apply bg-[linear-gradient(to_bottom,_#47B556_0%,_#F2F2F200_60%)];
|
|
@apply flex flex-col items-center justify-between;
|
|
@apply relative rounded-[0.6rem] shrink-0 mt-2;
|
|
@apply w-[6.2rem] h-[11.5rem] pt-4 px-2.5;
|
|
@apply lg:w-[11.6rem] lg:h-[20.1rem] lg:my-7 lg:px-5;
|
|
|
|
&::before {
|
|
@apply content-['_'] absolute inset-[0.2rem] bg-[#F2F2F2] rounded-lg;
|
|
}
|
|
|
|
h2 {
|
|
@apply flex flex-col items-center justify-center z-0 gap-2;
|
|
|
|
span {
|
|
@apply text-center first:text-[#163D22] last:text-primary-600;
|
|
@apply font-vazir font-black text-base lg:text-3xl;
|
|
}
|
|
}
|
|
|
|
img {
|
|
@apply w-[3.4rem] h-[4.3rem] lg:w-[9.6rem] lg:h-[12rem] self-start lg:-mb-20 z-0;
|
|
}
|
|
}
|
|
|
|
.swiper {
|
|
@apply w-full h-full rounded-xl relative rtl lg:ltr lg:px-6;
|
|
|
|
.swiper-wrapper {
|
|
@apply mt-2 mb-3 lg:my-6 z-0;
|
|
|
|
.swiper-slide {
|
|
@apply h-max w-max ml-[0.3rem] lg:ml-6 first:ml-0 rtl;
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
@apply content-['_'] w-6 absolute inset-y-0 -right-6 z-10;
|
|
@apply shadow-[-5px_0px_23px_0px_#00000040] max-lg:hidden;
|
|
}
|
|
|
|
&::after {
|
|
@apply content-['_'] w-6 absolute inset-y-0 -left-6 z-10;
|
|
@apply shadow-[5px_0px_23px_0px_#00000040] max-lg:hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|