site_logiciels/components/Layout/Card/Stat.vue

<template>
  <div class="card" :style="{ backgroundColor: props.backgroundColor }">
    <h3 class="chiffre">
      {{ props.chiffre }}
    </h3>
    <p>{{ props.text }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  chiffre: {
    type:String,
    default: 'XXX',
  },
  text: {
    type: String,
    default: 'Texte par défaut',
  },
  backgroundColor: {
    type: String,
    default: '#fac20a', 
  },
});
</script>

<style scoped>
.card {
  border-radius: 10px;
  width: 36rem;
  height: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.chiffre {
  font-weight: 600;
  font-size: 60px;
  line-height: 68px;
  text-align: center;
  color: #091d20;
  margin-bottom: 0.5rem;
}
</style>