36 lines
581 B
Vue
36 lines
581 B
Vue
<template>
|
|
<div class="ratio center" :class="status.toLowerCase()" v-for="value in [(ratio * 100).toFixed(2)]">
|
|
<p v-if="value === '100.00'">100%</p>
|
|
<p v-else>{{ value }}%</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
ratio: number,
|
|
status: string
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ratio {
|
|
width: 4rem;
|
|
border-radius: 1rem;
|
|
}
|
|
.ratio * {
|
|
color: black;
|
|
font-weight: 550;
|
|
}
|
|
.up {
|
|
background-color: #74f474;
|
|
}
|
|
.up * {
|
|
color: black;
|
|
}
|
|
.down {
|
|
background-color: #ff4534;
|
|
}
|
|
.down * {
|
|
color: white;
|
|
}
|
|
</style> |