HAM!DREZA
100 lines
4.1 KiB
Vue
100 lines
4.1 KiB
Vue
<template>
|
|
<section class="home-banners">
|
|
<div>
|
|
<!-- <router-link v-for="({ link, image }, i) in banners" :key="i" :to="link">
|
|
<img :src="image" />
|
|
</router-link> -->
|
|
<div class="bg-image-1 baner text-gray-800 flex justify-start w-full ps-[2rem] relative bg-gray-200 rounded-[5px] lg:rounded-[10px] shadow-sm">
|
|
<div class="-space-y-[0.4rem] lg:space-y-0 flex flex-col text-start w-full">
|
|
<h1 class="text-[0.9rem] lg:text-[2rem] font-bold">فروش ویژه
|
|
<span class="text-blue-800">روغن ها</span>
|
|
|
|
<br />
|
|
در
|
|
<span class="text-green-600">آناهیتا</span>
|
|
</h1>
|
|
|
|
<p class="text-gray-500 font-medium text-[0.5rem] lg:text-[1.2rem]">بهترین و با کیفیت ترین روغن ها را از آناهیتا بخواهید.</p>
|
|
<nuxt-link to="/search?category=haribaloil" class="gap-[0.1rem] lg:gap-[0.3rem] w-[3rem] lg:w-[7rem] h-[1.1rem] lg:h-[2.5rem] flex bg-green-500 text-white flex items-center justify-center text-[0.4rem] lg:text-[1.2rem] font-medium rounded-[2rem]">
|
|
<p>مشاهده</p>
|
|
<svg
|
|
class="h-[0.5rem] lg:h-[1.5rem]" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M9.57 5.93018L3.5 12.0002L9.57 18.0702" stroke="#fff" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M20.4999 12H3.66992" stroke="#fff" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</nuxt-link>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="bg-image-2 baner text-gray-800 flex justify-start w-full ps-[2rem] relative bg-sky-100 rounded-[10px] shadow-sm">
|
|
<div class="-space-y-[0.4rem] lg:space-y-0 flex flex-col text-start w-full">
|
|
<h1 class="text-[0.9rem] lg:text-[2rem] font-bold">عرضه کننده محصولات
|
|
<span class="text-blue-500">بالک</span>
|
|
</h1>
|
|
<p class="text-gray-500 font-medium text-[0.5rem] lg:text-[1.2rem]">آناهیتا بالک یکی از بزرگترین عرضه کننده
|
|
<br />
|
|
محصولات بالک در کشور .
|
|
</p>
|
|
<nuxt-link to="/search?category=medicineandgalen" class="lg:!mt-4 gap-[0.1rem] lg:gap-[0.3rem] w-[3rem] lg:w-[7rem] h-[1.1rem] lg:h-[2.5rem] flex bg-green-500 text-white flex items-center justify-center text-[0.4rem] lg:text-[1.2rem] font-medium rounded-[2rem]">
|
|
<p>مشاهده</p>
|
|
<svg
|
|
class="h-[0.5rem] lg:h-[1.5rem]" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M9.57 5.93018L3.5 12.0002L9.57 18.0702" stroke="#fff" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M20.4999 12H3.66992" stroke="#fff" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { banners } = inject("data");
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.home-banners {
|
|
@apply w-full flex justify-center mt-6 lg:mt-[6.5rem];
|
|
|
|
div {
|
|
@apply flex flex-wrap justify-center gap-3 lg:gap-[1.4rem];
|
|
|
|
a {
|
|
img {
|
|
@apply object-contain w-[21.3rem] h-[6.6rem] lg:w-[47.9rem] lg:h-[18.8rem];
|
|
}
|
|
}
|
|
.baner {
|
|
@apply border object-contain relative w-[21.3rem] h-[6.6rem] lg:w-[47.9rem] lg:h-[18.8rem] ;
|
|
img{
|
|
@apply flex inline object-cover w-[21.3rem] h-[6.6rem] lg:w-[50rem] lg:h-[40rem]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.baner{
|
|
|
|
background-size: 80% 220%;
|
|
background-repeat: no-repeat;
|
|
background-position: -4rem 50%;
|
|
font-family: 'vazir';
|
|
}
|
|
.bg-image-1 {
|
|
background-image: url('/public/images/1111.png');
|
|
}
|
|
.bg-image-2 {
|
|
background-image: url('/public/images/222.png');
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.baner{
|
|
background-size: 100%;
|
|
background-position: -13rem 50%;
|
|
}
|
|
}
|
|
</style>
|