mohadese namavar
80 lines
2.1 KiB
Vue
80 lines
2.1 KiB
Vue
<template>
|
|
<section class="wrapper">
|
|
<Swiper v-if="device == 'mobile'" v-bind="swiper.gallery">
|
|
<SwiperSlide v-for="(image, i) in product.images" :key="i">
|
|
<img :src="image" />
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
<div>
|
|
<Button v-bind="btns.report.props" @click="handleClick()" />
|
|
<ProductGallery v-if="device == 'desktop'" />
|
|
</div>
|
|
<ProductSummary />
|
|
<ProductSeller />
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { swiper, btns } = inject('init')
|
|
const { device, dialog } = inject('service')
|
|
const product = inject('data')
|
|
const token = useCookie('token')
|
|
const router = useRouter()
|
|
|
|
const handleClick = () => {
|
|
if (token.value)
|
|
dialog.show(resolveComponent('ProductDialogReport'), product)
|
|
else router.push('/auth/login')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.product>.wrapper {
|
|
@apply w-full flex max-lg:flex-col gap-3 lg:gap-[1.6rem];
|
|
|
|
.swiper {
|
|
@apply w-screen h-max pb-4 max-lg:order-1;
|
|
|
|
.swiper-wrapper {
|
|
@apply w-max z-0;
|
|
|
|
.swiper-slide {
|
|
@apply h-max w-screen;
|
|
|
|
img {
|
|
@apply w-[11.8rem] h-[12.5rem] lg:w-[15.6rem] lg:h-[15.6rem] mx-auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.swiper-pagination {
|
|
@apply pl-5 left-3 translate-x-0 lg:hidden;
|
|
|
|
.swiper-pagination-bullet {
|
|
@apply bg-[#D9D9D9] opacity-100;
|
|
}
|
|
|
|
* {
|
|
@apply mx-0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
&>div:not([class]) {
|
|
@apply flex max-lg:flex-col max-lg:order-3 gap-y-3 max-w-[38rem] grow;
|
|
|
|
&>button {
|
|
@apply w-max h-10 lg:h-14 shrink-0 max-lg:flex-row-reverse self-end #{!important};
|
|
@apply lg:-ml-[14.2rem] lg:-mb-2;
|
|
|
|
.p-button-icon {
|
|
@apply text-[1.1em] lg:text-2xl max-lg:ml-0 max-lg:mr-2 #{!important};
|
|
}
|
|
|
|
.p-button-label {
|
|
@apply text-[#7F7F7F] font-vazir font-medium text-[0.7em] lg:text-base;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |