Sépare les cartes en plusieurs composants
This commit is contained in:
parent
ed23344d78
commit
117490fc3c
32
src/components/CardControl.vue
Normal file
32
src/components/CardControl.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<v-card tile outlined class="card">
|
||||
<v-card-title class="card__title primary">
|
||||
<v-icon left class="white--text pr-5 pl-2" size="50">mdi-camera-control</v-icon>
|
||||
Contrôles
|
||||
</v-card-title>
|
||||
<v-container class="text-center">
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" sm="6" md="5" class="mt-4">
|
||||
<v-btn width="240" height="130" class="btn card xs12 sm6 md3">
|
||||
<v-icon left size="100">mdi-skip-previous</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="5" class="mt-4">
|
||||
<v-btn width="240" height="130" class="btn card xs12 sm6 md3">
|
||||
<v-icon left size="100">mdi-skip-next</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="5" class="mb-4">
|
||||
<v-btn width="240" height="130" class="btn card xs12 sm6 md3">
|
||||
<v-icon left size="100">mdi-pause</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="5" class="mb-4">
|
||||
<v-btn width="240" height="130" class="btn card xs12 sm6 md3">
|
||||
<v-icon left size="100">mdi-play</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</template>
|
||||
30
src/components/CardSolution.vue
Normal file
30
src/components/CardSolution.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<v-card tile outlined class="card">
|
||||
<v-card-title class="card__title feedback">
|
||||
<v-icon left class="white--text pr-5 pl-2" size="50">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="https://c4.wallpaperflare.com/wallpaper/908/893/291/funny-middle-finger-black-background-wallpaper-preview.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 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
39
src/components/CardSoundboard.vue
Normal file
39
src/components/CardSoundboard.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<v-card tile outlined class="card" color="">
|
||||
<v-card-title class="card__title primary">
|
||||
<v-icon left class="white--text pr-5 pl-2" size="50">mdi-music-box-multiple</v-icon>
|
||||
Soundboard
|
||||
</v-card-title>
|
||||
<v-container class="text-center">
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" sm="6" md="4" class="mt-4">
|
||||
<v-btn class="card" width="200" height="130" @click="" rounded>
|
||||
<v-icon size="100">mdi-check-circle-outline</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4" class="mt-4">
|
||||
<v-btn class="card" width="200" height="130" @click="" rounded>
|
||||
<v-icon size="100">mdi-close-circle-outline</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4" class="mt-4">
|
||||
<v-btn class="card" width="200" height="130" @click="" rounded>
|
||||
<v-icon size="100">mdi-timer-outline</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" sm="6" md="4" class="mb-4">
|
||||
<v-btn class="card" width="220" height="130" @click="" rounded>
|
||||
<v-icon size="100">mdi-human-handsup</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="s" class="mb-4">
|
||||
<v-btn class="card" width="220" height="130" @click="" rounded>
|
||||
<v-icon size="100">mdi-bell-outline</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</template>
|
||||
@ -1,103 +1,31 @@
|
||||
|
||||
<template>
|
||||
<v-container>
|
||||
<v-row no-gutters>
|
||||
<v-col class="align-start">
|
||||
<v-card tile outlined class="card">
|
||||
<v-card-title class="card__title primary">
|
||||
<v-icon left class="white--text pr-5 pl-2" size="50">mdi-camera-control</v-icon>
|
||||
Contrôles
|
||||
</v-card-title>
|
||||
<v-container class="text-center">
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" sm="6" md="5" class="mt-4">
|
||||
<v-btn width="240" height="130" class="btn card xs12 sm6 md3">
|
||||
<v-icon left size="100">mdi-skip-previous</v-icon>
|
||||
</v-btn>
|
||||
<card-control />
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="5" class="mt-4">
|
||||
<v-btn width="240" height="130" class="btn card xs12 sm6 md3">
|
||||
<v-icon left size="100">mdi-skip-next</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="5" class="mb-4">
|
||||
<v-btn width="240" height="130" class="btn card xs12 sm6 md3">
|
||||
<v-icon left size="100">mdi-pause</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="5" class="mb-4">
|
||||
<v-btn width="240" height="130" class="btn card xs12 sm6 md3">
|
||||
<v-icon left size="100">mdi-play</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col class="pl-3">
|
||||
<v-card tile outlined class="card" color="">
|
||||
<v-card-title class="card__title primary">
|
||||
<v-icon left class="white--text pr-5 pl-2" size="50">mdi-music-box-multiple</v-icon>
|
||||
Soundboard
|
||||
</v-card-title>
|
||||
<v-container class="text-center">
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" sm="6" md="4" class="mt-4">
|
||||
<v-btn class="card" width="200" height="130" @click="" rounded>
|
||||
<v-icon size="100">mdi-check-circle-outline</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4" class="mt-4">
|
||||
<v-btn class="card" width="200" height="130" @click="" rounded>
|
||||
<v-icon size="100">mdi-close-circle-outline</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4" class="mt-4">
|
||||
<v-btn class="card" width="200" height="130" @click="" rounded>
|
||||
<v-icon size="100">mdi-timer-outline</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" sm="6" md="4" class="mb-4">
|
||||
<v-btn class="card" width="220" height="130" @click="" rounded>
|
||||
<v-icon size="100">mdi-human-handsup</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="s" class="mb-4">
|
||||
<v-btn class="card" width="220" height="130" @click="" rounded>
|
||||
<v-icon size="100">mdi-bell-outline</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
<card-soundboard />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-container>
|
||||
<v-row no-gutters>
|
||||
<v-col>
|
||||
<v-card tile outlined class="card">
|
||||
<v-card-title class="card__title feedback">
|
||||
<v-icon left class="white--text pr-5 pl-2" size="50">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="https://c4.wallpaperflare.com/wallpaper/908/893/291/funny-middle-finger-black-background-wallpaper-preview.jpg" style="margin: 0 auto;"></v-img>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
<card-solution />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import CardSolution from '@/components/CardSolution.vue'
|
||||
import CardControl from '@/components/CardControl.vue'
|
||||
import CardSoundboard from '@/components/CardSoundboard.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@media (min-width: 1024px) {
|
||||
.card__title.primary {
|
||||
@ -109,19 +37,5 @@
|
||||
.btn{
|
||||
border-radius:50px!important;
|
||||
}
|
||||
.card {
|
||||
background-color: #2979FF; /* Changez la couleur en fonction de votre thème */
|
||||
}
|
||||
.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 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user