55 lines
969 B
Vue
55 lines
969 B
Vue
<script setup>
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import { toCurrency } from 'filters/index';
|
|
|
|
const $props = defineProps({
|
|
amount: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const { t } = useI18n();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="card_balance">
|
|
<h6 class="title_balance">{{ t('Total') }}</h6>
|
|
<div class="row">
|
|
<p class="key_balance">{{ t('Balance due') }}: </p>
|
|
<b class="value_balance">
|
|
{{ toCurrency($props.amount) }}
|
|
</b>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.card_balance {
|
|
border: 1px solid black;
|
|
margin: 7px;
|
|
padding: 5px 7px;
|
|
}
|
|
.title_balance {
|
|
color: white;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
text-align: center;
|
|
}
|
|
.key_balance {
|
|
color: grey;
|
|
margin-bottom: 0;
|
|
}
|
|
.value_balance {
|
|
color: white;
|
|
margin-bottom: 0;
|
|
}
|
|
</style>
|
|
|
|
<i18n>
|
|
es:
|
|
Total: Total
|
|
Balance due: Saldo vencido
|
|
</i18n>
|