29 lines
566 B
Vue
29 lines
566 B
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
count: number | string;
|
|
title: string;
|
|
icon: string;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="card">
|
|
<h3>{{ Number(count).toLocaleString('de') }}</h3>
|
|
<VaIcon :name="icon" size="10rem" />
|
|
<p>{{ title }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.card {
|
|
@apply m-4 grid grid-cols-2 items-center justify-items-center gap-8 rounded-lg p-4 text-3xl shadow-lg;
|
|
}
|
|
|
|
.card > *:nth-child(1) {
|
|
@apply col-span-2 mt-auto text-9xl font-bold;
|
|
}
|
|
.card > *:nth-child(3) {
|
|
@apply mr-auto text-left text-6xl;
|
|
}
|
|
</style>
|