44 lines
881 B
Vue
44 lines
881 B
Vue
|
<script setup lang="ts">
|
||
|
|
const sizeCard = (val: number) => {
|
||
|
|
if (val === 5) {
|
||
|
|
return "width:15%;";
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const props = defineProps({
|
||
|
|
color: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
amount: {
|
||
|
|
type: Number,
|
||
|
|
default: 0,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div
|
||
|
|
:style="$q.screen.lt.md ? '' : sizeCard(5)"
|
||
|
|
:class="$q.screen.lt.sm ? 'col-4' : ''"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-px-sm"
|
||
|
|
>
|
||
|
|
<div class="col-12 row items-center q-pa-sm">
|
||
|
|
<div
|
||
|
|
class="col-12 text-h5 text-weight-bold"
|
||
|
|
:style="{ color: props.color }"
|
||
|
|
>
|
||
|
|
{{ props.amount }}
|
||
|
|
</div>
|
||
|
|
<div class="col-12 text-dark ellipsis">
|
||
|
|
{{ props.label }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|