init git

2024-06-16 00:22:14 +04:30
commit ec84dfd222
322 changed files with 77942 additions and 0 deletions
@@ -0,0 +1,78 @@
+<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>