48 lines
1.5 KiB
Vue
48 lines
1.5 KiB
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> |