init git

2024-06-16 00:22:14 +04:30
commit ec84dfd222
322 changed files with 77942 additions and 0 deletions
@@ -0,0 +1,152 @@
+<template>
+    <div class="compare-selection">
+        <div>
+            <h2>{{ $t('selectProductCompare') }}</h2>
+            <Button icon="isax isax-close-circle" severity='secondary' rounded text @click="dialog.close()" />
+        </div>
+        <div>
+            <div>
+                <i class="isax isax-search-normal-1" />
+                <input v-model="query" :placeholder="$t('searchInPorducts')" />
+            </div>
+            <div>
+                <span>{{ $t('topProductToCompare') }}</span>
+                <span>{{ $t('commodity') }} {{ count }}</span>
+            </div>
+            <div>
+                <ul>
+                    <li v-for="(product, i) in store.items" :key="i" @click="add(product.id)">
+                        <ProductCard :data="product" type="main" />
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const dialog = inject('dialogRef')
+
+const query = ref()
+const count = ref(759)
+const route = useRoute()
+const router = useRouter()
+const store = useProductsStore()
+const ids = route.params.ids.split('-')
+store.compareSearch(ids)
+watch(query, (v) => store.compareSearch(ids, v))
+const add = (id) => {
+    if (!ids.includes(id)){
+        dialog.value.close()
+        router.push(`/compare/${[...ids, id].join('-')}`)
+    }
+       
+}
+</script>
+
+<style lang="scss">
+.compare-selection {
+    @apply w-full lg:w-[64.8rem] lg:h-[53.2rem] bg-white rounded-t-[0.6rem] lg:rounded-[0.6rem] flex flex-col lg:pb-[4.9rem];
+
+    &>div:nth-of-type(1) {
+        @apply flex justify-between items-center gap-3 p-6 lg:p-8 pb-6 border lg:border-b-2 border-[#E5E5E5];
+
+        h2 {
+            @apply text-zinc-800 text-sm lg:text-xl font-bold font-vazir;
+        }
+
+        button {
+            @apply -m-3;
+
+            .p-button-icon {
+                @apply text-[1.4em] lg:text-3xl text-[#B2B2B2];
+            }
+        }
+    }
+
+    &>div:nth-of-type(2) {
+        @apply w-full flex flex-col p-6 pt-8 lg:p-10 lg:pb-0 gap-6;
+
+        &>div:nth-of-type(1) {
+            @apply w-full h-[3.4rem] bg-[#FAFAFA] rounded-[0.6rem] flex items-center pr-4;
+
+            i {
+                @apply text-lg;
+            }
+
+            input {
+                @apply h-full px-2 bg-transparent grow outline-none;
+
+                &::placeholder {
+                    @apply text-neutral-400 text-xs lg:text-lg font-vazir;
+                }
+            }
+        }
+
+        &>div:nth-of-type(2) {
+            @apply w-full flex justify-between items-center;
+
+            span {
+                @apply text-[#7F7F7F] text-xs lg:text-base font-medium font-vazir;
+            }
+
+        }
+
+        &>div:nth-of-type(3) {
+            @apply overflow-y-auto h-[23.8rem] lg:h-[34.4rem] w-full;
+
+            &>ul {
+                @apply w-full grid lg:grid-cols-2 lg:gap-6 h-max;
+
+                li {
+                    @apply cursor-pointer;
+
+                    a {
+                        @apply pointer-events-none;
+                    }
+
+                    .product-card {
+                        @apply lg:w-[28.8rem] lg:h-[32.3rem];
+                    }
+
+                    @media (max-width: 1024px) {
+                        .product-card {
+                            @apply w-full h-[9.4rem] flex-row shadow-none border-0 rounded-none gap-4 p-0;
+                            @apply mt-[1.1rem] border-b border-[#E5E5E5];
+
+                            &>img {
+                                @apply w-[7.4rem] h-[7.4rem] object-contain object-top self-start;
+                            }
+
+                            &>div {
+                                @apply pb-6;
+
+                                h2 {
+                                    @apply mt-0 text-[0.7em];
+                                }
+
+                                h1 {
+                                    @apply text-xs;
+                                }
+
+                                &>button {
+                                    @apply left-0 bottom-4;
+
+                                    .p-button-icon {
+                                        @apply text-xl;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+            }
+
+
+        }
+    }
+
+
+}
+</style>