40 lines
1.2 KiB
Vue
40 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<v-container>
|
||
|
|
<v-row>
|
||
|
|
<!-- Colonne gauche avec les trois composants empilés -->
|
||
|
|
<v-col cols="6" class="d-flex flex-column" style="align-items: stretch; height: 100%;">
|
||
|
|
<PublishMQTTComponent />
|
||
|
|
<MQTTColorPublisher />
|
||
|
|
<WSDebugControl />
|
||
|
|
</v-col>
|
||
|
|
|
||
|
|
<!-- Colonne droite avec le composant unique -->
|
||
|
|
<v-col cols="6">
|
||
|
|
<MQTTConsoleComponent />
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
</v-container>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import PublishMQTTComponent from '@/components/MQTTDebugPublish.vue';
|
||
|
|
import MQTTConsoleComponent from '@/components/MQTTDebugConsole.vue';
|
||
|
|
import MQTTColorPublisher from '@/components/MQTTColorPublisher.vue';
|
||
|
|
import WSDebugControl from '@/components/WSDebugControl.vue';
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
@media (min-width: 1024px) {
|
||
|
|
.card__title.primary {
|
||
|
|
background-color: rgba(var(--v-theme-primary)); /* Couleur basée sur le thème */
|
||
|
|
}
|
||
|
|
.card__title.feedback {
|
||
|
|
background-color: rgba(var(--v-theme-success)); /* Couleur basée sur le thème */
|
||
|
|
}
|
||
|
|
.btn {
|
||
|
|
border-radius: 30px !important;
|
||
|
|
background-color: rgba(var(--v-theme-primary)); /* Couleur basée sur le thème */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|