init git

2024-06-16 00:22:14 +04:30
commit ec84dfd222
322 changed files with 77942 additions and 0 deletions
@@ -0,0 +1,87 @@
+<template>
+    <section class="product-wrapper">
+        {{ data }}
+        <h2 v-if="title">{{ $t(title) }}</h2>
+        <div>
+            <SearchFilters v-if="device == 'desktop'" />
+            <div>
+                <SearchSort v-if="device == 'desktop'" />
+                <SearchToolbar v-if="device == 'mobile'" />
+                <div>
+                    <template v-for="(product, i) in products" :key="i">
+                        <ProductCard :data="product" />
+                    </template>
+                </div>
+                <AppPagination :pages="pages" />
+            </div>
+        </div>
+    </section>
+</template>
+
+<script setup>
+const { device } = inject('service')
+const { products, pages } = inject('data')
+</script>
+
+<style lang="scss">
+.product-wrapper {
+    @apply w-full flex flex-col gap-4 lg:gap-[3.8rem] lg:pt-11 px-5;
+
+    &>h2 {
+        @apply w-full flex justify-center lg:justify-start gap-3 lg:gap-6 items-center text-[#333333] text-base lg:text-2xl font-bold font-vazir;
+
+        &::before {
+            @apply lg:content-['_'] h-8 w-1.5 rounded-full bg-primary-600;
+        }
+    }
+
+    &>div {
+        @apply w-full flex gap-6 justify-center;
+
+        &>div {
+            @apply w-full container mx-0 flex flex-col gap-10;
+
+
+            &>div {
+                @apply w-full flex max-lg:flex-col lg:flex-wrap gap-3 lg:gap-[1.4rem];
+
+                @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-3;
+
+                                .p-button-icon {
+                                    @apply text-xl;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .pagination {
+                @apply self-center mt-auto;
+            }
+        }
+    }
+
+}
+</style>