site_logiciels/components/Layout/Card/StatCard.vue

<template>
  <LayoutContainer> 
  <v-row class="card-container">
    <v-col cols="3" class="d-flex justify-center align-center small-padding">
      <div class="card" :style="{ backgroundColor: backgroundColor }">
        <h3 class="chiffre">{{ chiffre }}</h3>
        <p>{{ label }}</p>
      </div>
    </v-col>
  </v-row>
</LayoutContainer> 
</template>

<script setup>
import { ref, defineProps } from 'vue';

const props = defineProps({
  chiffre: String,
  label: String,
  backgroundColor: {
    type: String,
    default: '#c3e5e7' 
  }
});

const backgroundColor = ref(props.backgroundColor);
</script>

<style scoped>

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


.card-container {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 5rem;
  margin-right: 5rem;
}
.card {
  background: #c3e5e7;
  border-radius: 10px;
  padding-left: 5rem;
  padding-right: 5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  max-width: 15rem;
  width: 36rem;
  height: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>