41 lines
898 B
Vue
41 lines
898 B
Vue
<template>
|
|
<div>
|
|
<div
|
|
v-for="bar in bars"
|
|
:key="bar.name"
|
|
class="flex items-center gap-2 mb-2"
|
|
>
|
|
<div
|
|
class="text-[11px] font-semibold text-[var(--ins-text-secondary)] min-w-[72px] text-right"
|
|
>
|
|
{{ bar.name }}
|
|
</div>
|
|
<div class="flex-1 h-[22px] bg-[var(--bg-base)] rounded overflow-hidden">
|
|
<div
|
|
class="h-full rounded flex items-center pl-2 text-[10px] font-bold text-white transition-all duration-700"
|
|
:style="{ width: bar.widthPct + '%', background: bar.color }"
|
|
>
|
|
₼{{ bar.value }}M
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="text-[11px] font-bold text-[var(--ins-text-tertiary)] font-data min-w-[44px]"
|
|
>
|
|
{{ bar.pct }}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from "vue"
|
|
|
|
const props = defineProps({
|
|
bars: {
|
|
type: Array,
|
|
default: () => [],
|
|
// [{ name, value, pct, color }]
|
|
},
|
|
})
|
|
</script>
|