init git

2024-06-16 00:22:14 +04:30
commit ec84dfd222
322 changed files with 77942 additions and 0 deletions
@@ -0,0 +1,100 @@
+<template>
+    <div class="order-item">
+        <div>
+            <ul>
+                <li v-for="(value, key) in items" :key="key">
+                    <label>{{ $t(key) }}:</label>
+                    <span>{{ value }}</span>
+                </li>
+            </ul>
+            <router-link :to="`/panel/factors?id=${id}`">
+                <Button :label="$t('showFactor')" size="small" />
+            </router-link>
+        </div>
+        <Swiper :slides-per-view="'auto'" :space-between="16">
+            <SwiperSlide v-for="(item, i) in products" :key="i">
+                <ProductCard :data="item.product" type="minimal" />
+            </SwiperSlide>
+        </Swiper>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps(['data'])
+const { _id: id, totalAmount, status, orderDate, products } = props.data
+
+const numberFormat = (number) =>
+    new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)
+
+const { t } = useI18n()
+const items = reactive({
+    documentNumber: id,
+    amount: numberFormat(totalAmount) + ' ' + t('priceUnit'),
+    orderStatus: t('orderStatuses.' + status.toLowerCase()),
+    orderDate: new Date(orderDate).toLocaleString('fa-IR')
+})
+</script>
+
+<style lang="scss">
+.order-item {
+    @apply w-[21.4rem] h-[29.1rem] lg:w-full lg:h-[19.3rem] overflow-hidden;
+    @apply flex flex-col-reverse lg:flex-row bg-white border-2 border-[#E5E5E5];
+    @apply rounded-[0.6rem] max-lg:rounded-t-xl;
+
+    &>div:first-of-type {
+        @apply w-full h-[15.1rem] lg:w-[29.6rem] lg:h-full max-lg:border-t-2 border-[#E5E5E5];
+        @apply flex flex-col justify-between whitespace-nowrap;
+        @apply gap-[1.9rem] p-6 lg:gap-10 lg:p-8;
+
+        ul {
+            @apply flex flex-col gap-4;
+
+            li {
+                @apply flex gap-3 items-center font-vazir text-xs lg:text-lg;
+
+                label {
+                    @apply text-zinc-500;
+                }
+
+                span {
+                    @apply text-zinc-800 font-medium;
+                }
+
+                &:last-child span {
+                    @apply ltr;
+                }
+            }
+        }
+
+        button {
+            @apply w-full h-10 lg:w-[9.3rem] rounded-lg #{!important};
+
+            .p-button-panel {
+                @apply font-medium font-vazir text-xs lg:text-base;
+            }
+        }
+    }
+
+    .swiper {
+        @apply w-full max-w-[67.6rem] h-56 lg:h-full relative ltr px-[0.9rem];
+
+        .swiper-wrapper {
+            @apply items-center z-0;
+
+            .swiper-slide {
+                @apply h-max w-max;
+            }
+        }
+
+        &::before {
+            @apply shadow-[-5px_0px_23px_0px_#00000040];
+            @apply content-['_'] absolute inset-y-0 w-6 -right-8 lg:-right-6 opacity-50 z-10;
+        }
+
+        &::after {
+            @apply shadow-[5px_0px_23px_0px_#00000040];
+            @apply content-['_'] absolute inset-y-0 w-6 -left-8 lg:-left-6 opacity-50 z-10;
+        }
+    }
+}
+</style>