mohadese namavar
134 lines
3.7 KiB
Vue
134 lines
3.7 KiB
Vue
<template>
|
|
<div class="other-seller-item">
|
|
<div>
|
|
<div>
|
|
<i class="isax isax-shop"></i>
|
|
<h3>{{ title }}</h3>
|
|
</div>
|
|
<p>
|
|
<small>{{ percent }}%</small>
|
|
<span>{{ $t("satisfaction") }}</span>
|
|
<span>{{ $t("performance") }} {{ $t(performance) }}</span>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p v-for="(item, i) in items" :key="i">
|
|
<i :class="item.icon"></i>
|
|
<span>{{ item.label }}</span>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<Button :label="$t('show')" size="small" />
|
|
<span>
|
|
<b>{{ price }}</b>
|
|
<small>{{ $t("priceUnit") }}</small>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
title: { type: String, default: "فروشگاه اسپیس" },
|
|
percent: { type: Number, default: 50 },
|
|
performance: { type: String, default: "veryGood" },
|
|
shippingDesc: {
|
|
type: String,
|
|
default: "ارسال از فروشنده پس از تایید نهایی 1-2 روز دیگر",
|
|
},
|
|
warranty: { type: String, default: "گارانتی 12 ماهه اسپیس" },
|
|
price: { type: String, default: "580,000" },
|
|
});
|
|
|
|
const items = reactive([
|
|
{ icon: "isax isax-box", label: props.shippingDesc },
|
|
{ icon: "isax isax-shield-tick", label: props.warranty },
|
|
]);
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.other-seller-item {
|
|
@apply w-full flex flex-col gap-4 justify-center relative;
|
|
@apply lg:flex-row xl:gap-8 lg:justify-between lg:items-center lg:bg-neutral-50 lg:rounded-[10px];
|
|
@apply lg:h-28 lg:px-4 xl:px-6;
|
|
|
|
|
|
& > div:nth-of-type(1) {
|
|
@apply flex flex-col gap-3 pb-4 border-b lg:border-b-0 xl:pr-4 lg:pb-0;
|
|
|
|
& > div {
|
|
@apply flex gap-3 lg:gap-4 items-center;
|
|
|
|
i {
|
|
@apply text-xl lg:text-2xl;
|
|
}
|
|
|
|
h3 {
|
|
@apply text-zinc-800 text-xs lg:text-xl font-medium font-vazir;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@apply flex flex-wrap whitespace-nowrap items-center gap-1 xl:mr-10 font-vazir;
|
|
|
|
small {
|
|
@apply text-[#019907] text-[11.20px] lg:text-base;
|
|
}
|
|
|
|
span {
|
|
@apply text-right text-[#999999] text-[11.20px] lg:text-base;
|
|
|
|
&:first-of-type {
|
|
@apply pl-3 lg:pl-4 relative;
|
|
|
|
&::after {
|
|
@apply content-['_'] w-px bg-[#D9D9D9] h-4 absolute left-0.5 lg:left-1 top-1/2 -translate-y-1/2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& > div:nth-of-type(2) {
|
|
@apply flex flex-col 2xl:flex-row gap-4 2xl:gap-40;
|
|
|
|
& > p {
|
|
@apply flex items-center gap-2 pb-4 border-b lg:border-b-0 lg:pb-0;
|
|
|
|
i {
|
|
@apply text-xl;
|
|
}
|
|
|
|
span {
|
|
@apply text-[#999] font-medium font-vazir text-[11.20px] lg:text-base;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > div:nth-of-type(3) {
|
|
@apply h-max flex justify-between items-center pb-[30px] border-b lg:border-b-0;
|
|
@apply lg:flex-row-reverse lg:gap-4 xl:gap-6 2xl:gap-8 lg:pb-0;
|
|
|
|
& > span {
|
|
@apply font-vazir text-[#4C4C4C];
|
|
|
|
b {
|
|
@apply text-xs lg:text-[25px] font-medium;
|
|
}
|
|
|
|
small {
|
|
@apply text-xs lg:text-xl mr-1;
|
|
}
|
|
}
|
|
|
|
button {
|
|
@apply w-[147px] h-[41px] lg:w-[153px] lg:h-11 #{!important};
|
|
|
|
span {
|
|
@apply font-iran-sans text-sm lg:text-lg font-medium;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|