73 lines
1.8 KiB
Vue
73 lines
1.8 KiB
Vue
<template>
|
|
<div class="month-presentation">
|
|
<div class="date">
|
|
{{ month.date }}
|
|
</div>
|
|
<div class="infos">
|
|
<ul>
|
|
<li> <span class="label"> CA théorique </span> <span class="value">{{ month.ca_theo ?? "∅"}}€</span></li>
|
|
<li> <span class="label"> CA à la rétrocession </span> <span class="value">{{ month.ca_retro ?? "∅"}}€</span></li>
|
|
<li> <span class="label"> CA réactualisé </span> <span class="value">{{ month.ca_react ?? "∅"}}€</span></li>
|
|
<li> <span class="label"> Nombre de séances effectuée</span> <span class="value">{{ month.nbr_seances ?? "∅"}}</span></li>
|
|
<li> <span class="label"> Montant de la rétrocession </span> <span class="value">{{ month.retro ?? "∅"}}€</span></li>
|
|
<li> <span class="label"> Rémunération effectuée </span> <span class="value">{{ month.remumeration ?? "∅"}}€</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="actions">
|
|
<button class="edit"> Éditer </button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'MonthPresentation',
|
|
props: {
|
|
month: {
|
|
type: Object,
|
|
}
|
|
},
|
|
computed: {
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped>
|
|
.month-presentation {
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
background-color: mintcream;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
border-radius: 10px;
|
|
}
|
|
.month-presentation > * {
|
|
margin: 20px;
|
|
}
|
|
|
|
.date {
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
}
|
|
li {
|
|
margin: 3px;
|
|
width: 30%;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
}
|
|
.value {
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
</style>
|