44 lines
1.0 KiB
Vue
44 lines
1.0 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
name: String,
|
|
value: Number,
|
|
icon: String,
|
|
color: String,
|
|
index: Number,
|
|
});
|
|
|
|
const progressUnfilled = computed(() => `var(--bulma-${props.color}-85)`);
|
|
</script>
|
|
<template>
|
|
<div class="is-flex-grow-1">
|
|
<div class="is-flex is-justify-content-space-between">
|
|
<p :class="`has-text-${color}-40`">{{ name }}</p>
|
|
<p :class="['fs-18 font-bold', `has-text-${color}-30`]">{{ value }}</p>
|
|
</div>
|
|
<progress
|
|
:class="['progress is-small mt-2', `is-${color}`]"
|
|
value="20"
|
|
max="100"
|
|
></progress>
|
|
</div>
|
|
<div
|
|
v-if="index < 4"
|
|
class="is-flex is-justify-content-center is-align-items-center"
|
|
style="width: 60px; height: 48px"
|
|
>
|
|
<Icon
|
|
name="material-symbols:arrow-forward-rounded"
|
|
:size="24"
|
|
class="has-text-grey-70"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
$progress-value-background-color: "red";
|
|
|
|
.progress {
|
|
--bulma-size-small: 0.5rem;
|
|
background-color: v-bind(progressUnfilled);
|
|
}
|
|
</style>
|