mohadese namavar
91 lines
2.8 KiB
Vue
91 lines
2.8 KiB
Vue
<template>
|
|
<div class="seller-score">
|
|
<h2>{{ $t('yourePerformanceScore') }}</h2>
|
|
<ul>
|
|
<li v-for="(item, i) in items" :key="i">
|
|
<small>{{ item.title }}</small>
|
|
<span>{{ item.percent }}%</span>
|
|
<svg viewBox="0 0 250 250" :style="{'--percent': item.percent }">
|
|
<circle v-for="j in 2" :key="j" />
|
|
</svg>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { shop } = inject('data')
|
|
const items = reactive([
|
|
{ title: 'رضایت مشتریان', percent: shop.rate * 10 },
|
|
{ title: 'تاخیر در ارسال', percent: shop.warn * 10 },
|
|
{ title: 'بازگشت کالا', percent: shop.returnedScore },
|
|
{ title: 'لغو سفارش', percent: shop.canceledScore },
|
|
])
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.seller-score {
|
|
@apply w-full md:w-[21.4rem] h-[10.1rem] lg:w-[18.3rem] lg:h-[21.9rem] flex flex-col pt-[1.1rem] gap-[1.1rem] lg:pt-5 lg:gap-5 rounded-[0.6rem] border-2 border-neutral-200;
|
|
|
|
h2 {
|
|
@apply text-[#333333] text-sm lg:text-lg font-medium font-vazir pr-[1.1rem] lg:pr-5;
|
|
}
|
|
|
|
ul {
|
|
@apply w-full flex flex-wrap gap-2.5 lg:gap-x-[1.9rem] lg:gap-y-5 pt-[1.1rem] lg:pt-5 justify-center border-t border-[#E5E5E5];
|
|
|
|
li {
|
|
@apply w-[4.3rem] h-[4.3rem] lg:w-[6.9rem] lg:h-[6.9rem] relative flex flex-col items-center justify-center gap-2 rounded-full;
|
|
|
|
small {
|
|
@apply text-[#333333] text-[0.4em] lg:text-[0.6em] font-bold font-vazir mt-1;
|
|
}
|
|
|
|
span {
|
|
@apply text-[#333333] text-xs lg:text-base font-medium font-vazir;
|
|
}
|
|
|
|
svg {
|
|
@apply absolute inset-0;
|
|
|
|
--stroke-width: 5px;
|
|
|
|
@screen lg {
|
|
--stroke-width: 12px;
|
|
}
|
|
|
|
--radius: calc((250px - var(--stroke-width)) / 2);
|
|
|
|
circle {
|
|
cx: 125px;
|
|
cy: 125px;
|
|
r: var(--radius);
|
|
stroke-width: var(--stroke-width);
|
|
fill: none;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
circle:first-child {
|
|
stroke: #D9D9D9;
|
|
}
|
|
|
|
circle:last-child {
|
|
transition: stroke-dasharray 0.3s linear 0s;
|
|
stroke: #47B556;
|
|
transform-origin: 125px 125px;
|
|
--circumference: calc(var(--radius) * 3.14 * 2);
|
|
--dash: calc((var(--percent) * var(--circumference)) / 100);
|
|
stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |