anahita-front/components/panel/seller/dialog/details/Order.vue

<template>
    <div class="seller-details-order">
        <div>
            <Button icon="isax isax-close-circle" severity="secondary" rounded link @click="dialog.close()" />
            <h2>{{ $t('orderDetails') }}</h2>
            <Button icon="isax isax-receipt-item" iconPos="right" link :label="$t('showFactor')" @click="show()" />
        </div>
        <ul>
            <li v-for="(value, key ) in items" :key="key">
                <label>{{ $t(key) }}</label>
                <span>{{ value }}</span>
            </li>
        </ul>
        <ul>
            <li v-for="(product, k) in [product]" :key="k">
                <span v-if="product.quantity > 1">
                    {{ product.quantity }}x
                </span>
                <img :src="product.coverImage">
            </li>
        </ul>
    </div>
</template>

<script setup>
const dialog = inject('dialogRef')
const { total, product} = dialog.value.data

const items = reactive({
    address: ".........................................................................",
    receiver: "علی مصلحی",
    purchaseDate: "1402/05/13",
    postageDate: "1402/05/20",
    price: "252,000",
})
</script>

<style lang="scss">
.seller-details-order {
    @apply flex flex-col bg-white rounded-t-[0.6rem]  gap-[1.1rem] px-6 pt-[1.1rem] rtl;

    &>div {
        @apply flex items-center gap-1.5;

        h2 {
            @apply text-[#333333] text-sm font-medium font-vazir;
        }

        &>button {
            @apply -mx-4 -my-3 last:mr-auto;

            &:first-child {
                @apply text-lg text-[#B2B2B2] #{!important};
            }

            &:last-child{
                @apply text-[#47B556] font-vazir;

                .p-button-label{
                    @apply text-xs;
                }
            }
        }
    }

    &>ul:first-of-type {
        @apply flex flex-col gap-[1.1rem] mt-1.5;

        li {
            @apply flex justify-between;

            label {
                @apply text-[#5D5D5D] text-xs font-vazir
            }

            span {
                @apply text-[#333333] text-xs font-medium font-vazir;
            }
        }
    }

    &>ul:last-of-type {
        @apply flex items-center gap-[1.1rem] pb-[1.1rem] border-t border-[#E5E5E5];

        li {
            @apply flex flex-col h-28 items-center justify-end gap-2.5;

            span {
                @apply text-[#333333] text-xs font-normal font-poppins
            }

            img {
                @apply w-[3.8rem] h-[3.8rem];
            }
        }
    }
}
</style>