BrainBlast/ui/src/components/CardSolution.vue

<template>
  <v-card tile outlined :class="{ 'card--reduced': isCardReduced }">
    <v-card-title class="card__title primary" @click="toggleCardSize">
      <v-icon left class="white--text pr-5 pl-2" size="40">mdi-play-network-outline</v-icon>
      Solution
    </v-card-title>
    <v-container class="text-center">
      <v-row justify="center">
        <v-container class="text-center">
          <!-- Utilisation de styles CSS personnalisés pour centrer l'image -->
          <v-img width="450" src="@/assets/copilot-solution-FULL-HD.jpg" style="margin: 0 auto;"></v-img>
        </v-container>
      </v-row>
    </v-container>
  </v-card>
</template>
<style>
@media (min-width: 1024px) {
  .image-container {
    width: 300px;
    overflow: hidden; /* Pour masquer le dépassement de l'image */
    border: 1px solid #ccc; /* Bordure de l'image */
  }
  .image-container img {
    width: 100%; /* Pour remplir complètement le conteneur */
    height: auto; /* Pour maintenir le ratio d'aspect de l'image */
    display: block; /* Pour éviter l'espace réservé pour les images */
  }
}
.card--reduced {
    height: 56px; /* Réglez la hauteur réduite selon vos besoins */
    width: 160px;
    overflow: hidden;
    transition: height 0.6s ease-in-out;
  }
</style>

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

  // Variable pour contrôler l'état de la carte
  const isCardReduced = ref(false);

  // Méthode pour basculer l'état de la carte
  function toggleCardSize() {
    isCardReduced.value = !isCardReduced.value;
  }
</script>