Ajustement du placement des score, tout est bien aligné et centré
This commit is contained in:
parent
c3b86cb68b
commit
080601b792
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-navigation-drawer width="250">
|
<v-navigation-drawer width="250"> <!-- Augmenter la largeur pour deux équipes côte à côte -->
|
||||||
<div class="label-pos">
|
<div class="label-pos">
|
||||||
<v-label class="labelTitle-style">Buzzer connectés</v-label>
|
<v-label class="labelTitle-style">Buzzer connectés</v-label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<v-row no-gutters justify="space-around" class="button-pos">
|
<v-row no-gutters justify="space-around" class="button-pos">
|
||||||
@ -13,102 +13,104 @@
|
|||||||
|
|
||||||
<v-divider :thickness="2" class="border-opacity-100" color="primary"/>
|
<v-divider :thickness="2" class="border-opacity-100" color="primary"/>
|
||||||
<div class="label-pos">
|
<div class="label-pos">
|
||||||
<v-label class="labelTitle-style pb-7">Scores</v-label>
|
<v-label class="labelTitle-style pb-4">Scores</v-label>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<v-row no-gutters justify="space-around" class="scorebox-1-pos">
|
|
||||||
<v-row>
|
|
||||||
<v-col class="align-start scorediv-style-red pl-1">
|
|
||||||
<v-col>
|
|
||||||
<div class="pr-1">
|
|
||||||
<div>
|
|
||||||
<v-label class="labelRoundScore-style">Manche</v-label>
|
|
||||||
</div>
|
|
||||||
<v-label class="labelRoundScore-style">{{ RedRoundScore }}</v-label>
|
|
||||||
</div>
|
|
||||||
<v-divider class="pr-1" color="background"/>
|
|
||||||
</v-col>
|
|
||||||
<div class="pr-1">
|
|
||||||
<div>
|
|
||||||
<v-label class="labelTotalScore-style">Total</v-label>
|
|
||||||
</div>
|
|
||||||
<v-label class="labelTotalScore-style">{{ RedTotalScore }}</v-label>
|
|
||||||
</div>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
|
<!-- Équipes Rouges et Bleues côte à côte -->
|
||||||
<v-col class="align-start scorediv-style-blue pl-1">
|
<v-row no-gutters class="scorebox-pos">
|
||||||
<v-col>
|
<!-- Équipe Rouge -->
|
||||||
<div class="pr-1">
|
<v-col cols="6"> <!-- Colonnes de taille 6 pour chaque équipe -->
|
||||||
<div>
|
<v-row no-gutters>
|
||||||
<v-label class="labelRoundScore-style">Manche</v-label>
|
<v-col class="scorediv-style-red">
|
||||||
|
<div>
|
||||||
|
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
|
||||||
|
<div>
|
||||||
|
<v-label class="labelRoundScore-style">{{ RedRoundScore }}</v-label>
|
||||||
</div>
|
</div>
|
||||||
<v-label class="labelRoundScore-style">{{ BlueRoundScore }}</v-label>
|
</div>
|
||||||
</div>
|
<v-divider color="background"/>
|
||||||
<v-divider class="pr-1" color="background"/>
|
<div>
|
||||||
</v-col>
|
<v-label class="labelTotalScore-style pt-3">Total</v-label>
|
||||||
|
<div>
|
||||||
<div class="pr-1">
|
<v-label class="labelTotalScore-style pb-3">{{ RedTotalScore }}</v-label>
|
||||||
<div>
|
|
||||||
<v-label class="labelTotalScore-style">Total</v-label>
|
|
||||||
</div>
|
</div>
|
||||||
<v-label class="labelTotalScore-style">{{ BlueTotalScore }}</v-label>
|
</div>
|
||||||
</div>
|
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-row>
|
</v-col>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<!-- Équipe Bleue -->
|
||||||
|
<v-col cols="6">
|
||||||
<div>
|
<v-row no-gutters>
|
||||||
<v-row no-gutters justify="space-around" class="scorebox-2-pos mb-0">
|
<v-col class="scorediv-style-blue">
|
||||||
<v-row>
|
<div>
|
||||||
<v-col class="scorediv-style-orange pl-1">
|
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
|
||||||
<v-col>
|
<div>
|
||||||
<div class="pr-1">
|
<v-label class="labelRoundScore-style">{{ BlueRoundScore }}</v-label>
|
||||||
<div>
|
|
||||||
<v-label class="labelRoundScore-style">Manche</v-label>
|
|
||||||
</div>
|
</div>
|
||||||
<v-label class="labelRoundScore-style">{{ OrangeRoundScore }}</v-label>
|
</div>
|
||||||
</div>
|
<v-divider color="background"/>
|
||||||
<v-divider class="pr-1" color="background"/>
|
<div>
|
||||||
</v-col>
|
<v-label class="labelTotalScore-style pt-3">Total</v-label>
|
||||||
|
<div>
|
||||||
<div class="pr-1">
|
<v-label class="labelTotalScore-style pb-3">{{ BlueTotalScore }}</v-label>
|
||||||
<div>
|
|
||||||
<v-label class="labelTotalScore-style">Total</v-label>
|
|
||||||
</div>
|
</div>
|
||||||
<v-label class="labelTotalScore-style">{{ OrangeTotalScore }}</v-label>
|
</div>
|
||||||
</div>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col class="align-start scorediv-style-green pl-1">
|
|
||||||
<v-col>
|
|
||||||
<div class="pr-1">
|
|
||||||
<div>
|
|
||||||
<v-label class="labelRoundScore-style">Manche</v-label>
|
|
||||||
</div>
|
|
||||||
<v-label class="labelRoundScore-style">{{ GreenRoundScore }}</v-label>
|
|
||||||
</div>
|
|
||||||
<v-divider class="pr-1" color="background"/>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<div class="pr-1">
|
|
||||||
<div>
|
|
||||||
<v-label class="labelTotalScore-style">Total</v-label>
|
|
||||||
</div>
|
|
||||||
<v-label class="labelTotalScore-style">{{ GreenTotalScore }}</v-label>
|
|
||||||
</div>
|
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-row>
|
</v-col>
|
||||||
</div>
|
</v-row>
|
||||||
|
|
||||||
|
<!-- Équipes Oranges et Vertes côte à côte -->
|
||||||
|
<v-row no-gutters class="scorebox-pos">
|
||||||
|
<!-- Équipe Orange -->
|
||||||
|
<v-col cols="6">
|
||||||
|
<v-row no-gutters>
|
||||||
|
<v-col class="scorediv-style-orange">
|
||||||
|
<div>
|
||||||
|
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
|
||||||
|
<div>
|
||||||
|
<v-label class="labelRoundScore-style">{{ OrangeRoundScore }}</v-label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<v-divider color="background"/>
|
||||||
|
<div>
|
||||||
|
<v-label class="labelTotalScore-style pt-3">Total</v-label>
|
||||||
|
<div>
|
||||||
|
<v-label class="labelTotalScore-style pb-3">{{ OrangeTotalScore }}</v-label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<!-- Équipe Verte -->
|
||||||
|
<v-col cols="6">
|
||||||
|
<v-row no-gutters>
|
||||||
|
<v-col class="scorediv-style-green">
|
||||||
|
<div>
|
||||||
|
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
|
||||||
|
<div>
|
||||||
|
<v-label class="labelRoundScore-style">{{ GreenRoundScore }}</v-label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<v-divider color="background"/>
|
||||||
|
<div>
|
||||||
|
<v-label class="labelTotalScore-style pt-3">Total</v-label>
|
||||||
|
<div>
|
||||||
|
<v-label class="labelTotalScore-style pb-3">{{ GreenTotalScore }}</v-label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
</v-navigation-drawer>
|
</v-navigation-drawer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref} from 'vue'; // Import des fonctions de Vue 3
|
import { ref } from 'vue'; // Import des fonctions de Vue 3
|
||||||
import variables from '@/variables.js';
|
import variables from '@/variables.js';
|
||||||
|
|
||||||
// Déclaration des variables locales pour les scores
|
// Déclaration des variables locales pour les scores
|
||||||
@ -124,48 +126,51 @@ const GreenRoundScore = ref(variables.GreenRoundScore);
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.label-pos{
|
.label-pos {
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.labelTitle-style{
|
.labelTitle-style {
|
||||||
font-size: 20px !important;
|
font-size: 20px !important;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #e91e1e !important;
|
color: #e91e1e !important;
|
||||||
opacity: 90% !important;
|
opacity: 90% !important;
|
||||||
}
|
}
|
||||||
.labelRoundScore-style{
|
.labelRoundScore-style {
|
||||||
opacity: 100% !important;
|
opacity: 100% !important;
|
||||||
font-size: 25px !important;
|
font-size: 25px !important;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.labelTotalScore-style{
|
.labelTotalScore-style {
|
||||||
opacity: 100% !important;
|
opacity: 100% !important;
|
||||||
font-size: 15px !important;
|
font-size: 15px !important;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.button-pos{
|
.button-pos {
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
padding-bottom: 15px;
|
padding-bottom: 15px;
|
||||||
}
|
}
|
||||||
.scorebox-1-pos{
|
.scorebox-pos {
|
||||||
padding-bottom: 15px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.scorebox-2-pos{
|
.scorediv-style-red {
|
||||||
padding-top: 9px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.scorediv-style-red{
|
|
||||||
background-color: #d42828 !important;
|
background-color: #d42828 !important;
|
||||||
|
padding: 15px;
|
||||||
|
border-top-left-radius: 10%;
|
||||||
}
|
}
|
||||||
.scorediv-style-orange{
|
.scorediv-style-orange {
|
||||||
background-color: #d48f28 !important;
|
background-color: #d48f28 !important;
|
||||||
|
padding: 15px;
|
||||||
|
border-bottom-left-radius: 10%;
|
||||||
}
|
}
|
||||||
.scorediv-style-blue{
|
.scorediv-style-blue {
|
||||||
background-color: #2867d4 !important;
|
background-color: #2867d4 !important;
|
||||||
|
padding: 15px;
|
||||||
|
border-top-right-radius: 10%;
|
||||||
}
|
}
|
||||||
.scorediv-style-green{
|
.scorediv-style-green {
|
||||||
background-color: #28d42e !important;
|
background-color: #28d42e !important;
|
||||||
|
padding: 15px;
|
||||||
|
border-bottom-right-radius: 10%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user