mohadese namavar
79 lines
1.9 KiB
Vue
79 lines
1.9 KiB
Vue
<template>
|
|
<div class="gallery">
|
|
<div>
|
|
<ul>
|
|
<li v-for="(act, key) in actions" :key="key">
|
|
<Button v-bind="act.props" @click="act.click()" />
|
|
</li>
|
|
</ul>
|
|
<img :src="coverImage" />
|
|
</div>
|
|
<ul>
|
|
<li v-for="(image, i) in images" :key="i">
|
|
<i class="isax isax-gallery-slash" />
|
|
<Image :src="image" preview />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { actions } = inject('init')
|
|
const { coverImage, images } = inject('data')
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.product .gallery {
|
|
@apply w-full h-full max-h-[38.4rem] flex flex-col gap-6 ;
|
|
|
|
&>div {
|
|
@apply flex p-6 w-full grow max-h-[29.9rem] border border-[#E5E5E5] overflow-hidden;
|
|
|
|
&>ul {
|
|
@apply flex flex-col gap-0 -m-3 relative;
|
|
|
|
li {
|
|
@apply ltr;
|
|
|
|
i {
|
|
@apply absolute inset-0;
|
|
}
|
|
|
|
button {
|
|
@apply w-12 h-12 #{!important};
|
|
|
|
span {
|
|
@apply text-2xl text-[#333333];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&>img {
|
|
@apply flex w-full h-full max-w-[24.1rem] max-h-[24.1rem] object-contain;
|
|
@apply shrink mt-5 mx-auto 2xl:translate-x-3 px-8 object-top;
|
|
}
|
|
}
|
|
|
|
&>ul {
|
|
@apply flex gap-3 flex-wrap h-28 overflow-hidden;
|
|
|
|
li {
|
|
@apply w-28 h-28 flex items-center justify-center relative bg-[#F2F2F2] cursor-pointer;
|
|
|
|
span {
|
|
@apply w-full h-full absolute;
|
|
|
|
img {
|
|
@apply w-full h-full object-cover;
|
|
}
|
|
}
|
|
|
|
i {
|
|
@apply text-2xl absolute;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|