anahita-front/components/product/Seller.vue

<template>
    <div class="seller">
        <div>
            <h2>{{ $t('seller') }}</h2>
            <template v-if="device == 'mobile'">
                <Button :label="$t('otherSellersCount', { count: 3 })" text @click="handleClick" />
            </template>
        </div>
        <ul>
            <li v-for="(item, i) in items.slice(0, 3)" :key="i">
                <i :class="['isax', `isax-${item.icon}`]" />
                <span>{{ item.title }}</span>
            </li>
            <li v-show="shopID?.rate >= 0">
                <small>{{ shopID.rate * 10 }}%</small>
                <span>{{ $t('satisfaction') }}</span>
                <span>{{ $t('performance') }} {{ shopID?.performance }}</span>
            </li>
            <li v-show="boxSeller">
                <i class="isax isax-d-square"></i>
                <span>{{ $t('boxShopping') }}</span>
                <span>{{ $t('minBuyBox', { minBuy }) }}</span>
            </li>
            <li v-show="boxSeller">
                <div><i /></div>
                <span>{{ $t('itemInBox', { itemInBox }) }}</span>
            </li>
            <li>
                <div>
                    <template v-for="({ primary }, i) in items.slice(3)" :key="i">
                        <i :class="primary ? 'bg-primary-600' : 'bg-neutral-200'" />
                    </template>
                </div>
                <ul>
                    <li v-for="(item, i) in items.slice(3)" :key="i">
                        <i :class="`isax isax-${item.icon}`" />
                        <span>{{ item.title }}</span>
                    </li>
                </ul>
            </li>
        </ul>
        <ProductBuy />
    </div>
</template>

<script setup>
const { dialog, device, t } = inject('service')
const { shopID, warranty, boxSeller, localSend, minBuy, itemInBox } = inject('data')

const items = reactive([
    { title: shopID.shopName, icon: 'shop' },
    { title: warranty, icon: 'shield-tick' },
    { title: t('availableSellerWarehouse'), icon: 'box-tick' },
    { title: t('sendFromLocal'), icon: 'box', primary: localSend },
    { title: t('sendFromSeller'), icon: 'profile-circle', primary: !localSend }
])

const handleClick = () => {
    dialog.show(resolveComponent('ProductOtherSellers'))
}
</script>

<style lang="scss">
.product .seller {
    @apply w-full lg:w-[28.1rem] lg:h-[42rem] bg-[#FAFAFA] lg:rounded-[0.6rem] lg:border border-neutral-200;
    @apply flex flex-col gap-6 lg:gap-7 px-6 py-5 lg:py-6 max-lg:order-4;

    &>div:not([class]) {
        @apply flex justify-between items-center;

        h2 {
            @apply text-[#191919] text-base lg:text-2xl font-bold font-vazir;
        }

        button {
            @apply rtl p-0 h-max #{!important};

            .p-button-label {
                @apply text-[0.7em] text-primary-600;
            }
        }
    }

    &>ul {
        @apply flex flex-col gap-[1.1rem] lg:gap-4;

        &>li {
            @apply flex items-center;

            &:nth-of-type(-n + 3) {
                @apply gap-3 lg:gap-4;

                i {
                    @apply text-[1.4em] lg:text-2xl;
                }

                span {
                    @apply text-[#333] text-sm lg:text-xl font-medium font-vazir;
                }
            }

            &:nth-of-type(2) {
                @apply order-5 py-[1.2rem] lg:py-4 border-y border-[#E5E5E5];
            }

            &:nth-of-type(3) {
                @apply order-6;
            }

            &:nth-of-type(4) {
                @apply gap-1 lg:pr-10 font-vazir order-2 pb-[1.1rem] lg:pb-4 border-b border-[#E5E5E5];

                small {
                    @apply text-[#019907] text-xs lg:text-base;
                }

                span {
                    @apply text-[#999999] text-xs lg:text-base;

                    &:first-of-type {
                        @apply pl-2.5 relative;

                        &::after {
                            @apply content-['_'] w-px bg-[#D9D9D9] h-4 absolute left-0.5 top-1/2 -translate-y-1/2;
                        }
                    }
                }
            }

            &:nth-of-type(5) {
                @apply gap-4 font-vazir order-3;

                i {
                    @apply text-[#019907] text-[1.4em] lg:text-2xl;
                }

                span {
                    @apply text-[#019907] text-xs lg:text-lg font-medium;

                    &:first-of-type {
                        @apply pl-2.5 -ml-2 relative;

                        &::after {
                            @apply content-['_'] w-px bg-[#D9D9D9] h-4 absolute left-0 top-1/2 -translate-y-1/2;
                        }
                    }
                }
            }

            &:nth-of-type(6) {
                @apply gap-4 font-vazir order-4;

                div {
                    @apply w-2 lg:w-2.5 h-5 lg:h-6 mx-[0.4rem] -mt-2.5 lg:-mt-3.5 relative flex justify-center;

                    i {
                        @apply w-2 h-2 lg:w-2.5 lg:h-2.5 rounded-full mt-auto bg-[#019907] z-0;
                    }

                    &::before {
                        @apply content-['_'] absolute w-0.5 inset-y-0 bg-neutral-200;
                    }
                }

                span {
                    @apply text-[#019907] text-xs lg:text-lg font-medium;
                }
            }

            &:nth-of-type(7) {
                @apply gap-6 lg:gap-4 order-7 pb-4 lg:border-b border-[#E5E5E5];

                div {
                    @apply w-2.5 h-[4.3rem] lg:mx-[0.4rem] pt-4 lg:pt-3.5 -mt-2 lg:-mt-3.5 flex flex-col items-center justify-between relative;

                    i {
                        @apply w-2.5 h-2.5 rounded-full z-0;
                    }

                    &::before {
                        @apply content-['_'] absolute w-0.5 inset-y-0 bg-neutral-200;
                    }
                }

                ul {
                    @apply flex flex-col mt-2 gap-6 lg:gap-5 font-vazir;

                    li {
                        @apply flex gap-2 items-center h-4 lg:h-[1.6rem];

                        i {
                            @apply text-xl text-primary-600;
                        }

                        span {
                            @apply text-[#999] text-[0.7em] lg:text-base font-normal;
                        }
                    }
                }
            }
        }
    }
}
</style>