34 lines
881 B
Vue
34 lines
881 B
Vue
<script setup>
|
|
const props = defineProps({
|
|
name: String,
|
|
value: Number,
|
|
icon: String,
|
|
color: String,
|
|
unit: String
|
|
})
|
|
|
|
</script>
|
|
<template>
|
|
<div class="cell">
|
|
<div class="card h-full">
|
|
<div class="card-content is-flex is-gap-1 is-justify-content-space-between is-align-items-center">
|
|
<div>
|
|
<p class="has-text-grey">{{ name }}</p>
|
|
<div class="is-flex is-gap-1 is-align-items-center">
|
|
<p class="fs-26 font-bold">{{ value }}</p>
|
|
<span class="fs-13 has-text-grey">{{ unit }}</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
:class="['p-3 is-flex', `has-background-${color}-soft`]" style="border-radius: 8px"
|
|
>
|
|
<Icon
|
|
:name="icon"
|
|
:size="26"
|
|
:class="`has-text-${color}-40`"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |