Feat: boxed class and tweek button
This commit is contained in:
parent
e082bf7164
commit
deb5a61add
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="month-presentation">
|
<div class="boxed month-presentation">
|
||||||
<div class="date">
|
<div class="date">
|
||||||
<div class="month">
|
<div class="month">
|
||||||
{{ theMonth }}
|
{{ theMonth }}
|
||||||
@ -114,10 +114,7 @@ export default {
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 140px 6fr;
|
grid-template-columns: 140px 6fr;
|
||||||
|
|
||||||
box-shadow: 2px 2px 5px gray;
|
|
||||||
border-left: 1rem solid black;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 10px;
|
|
||||||
}
|
}
|
||||||
.month-presentation > * {
|
.month-presentation > * {
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
|
@ -1,70 +1,70 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="hightlights">
|
<div class="hightlights">
|
||||||
<div class="hightlight">
|
<div class="hightlight boxed">
|
||||||
<ul>
|
<ul>
|
||||||
<li>{{ ca }} €</li>
|
<li>{{ ca }} €</li>
|
||||||
<li>CA</li>
|
<li>CA</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="hightlight">
|
<div class="hightlight boxed">
|
||||||
<ul>
|
<ul>
|
||||||
<li>{{ caMean }} €</li>
|
<li>{{ caMean }} €</li>
|
||||||
<li>CA moyen</li>
|
<li>CA moyen</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<!--
|
<!--
|
||||||
<div class="hightlight">
|
<div class="hightlight boxed">
|
||||||
<ul>
|
<ul>
|
||||||
<li>{{ caTheo }}</li>
|
<li>{{ caTheo }}</li>
|
||||||
<li>CA des séances effectuées</li>
|
<li>CA des séances effectuées</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
-->
|
-->
|
||||||
<div class="hightlight">
|
<div class="hightlight boxed">
|
||||||
<ul>
|
<ul>
|
||||||
<li>{{ caUnFactured }} €</li>
|
<li>{{ caUnFactured }} €</li>
|
||||||
<li>Non facturé</li>
|
<li>Non facturé</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="hightlight">
|
<div class="hightlight boxed">
|
||||||
<ul>
|
<ul>
|
||||||
<li>{{ remuneration }} €</li>
|
<li>{{ remuneration }} €</li>
|
||||||
<li>Rémunération</li>
|
<li>Rémunération</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="hightlight">
|
<div class="hightlight boxed">
|
||||||
<ul>
|
<ul>
|
||||||
<li>{{ remunerationMean }} €</li>
|
<li>{{ remunerationMean }} €</li>
|
||||||
<li>Rémunération moyenne</li>
|
<li>Rémunération moyenne</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<!--
|
<!--
|
||||||
<div class="hightlight">
|
<div class="hightlight boxed">
|
||||||
<ul>
|
<ul>
|
||||||
<li>{{ retrocession }}</li>
|
<li>{{ retrocession }}</li>
|
||||||
<li>Rétrocession</li>
|
<li>Rétrocession</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="hightlight">
|
<div class="hightlight boxed">
|
||||||
<ul>
|
<ul>
|
||||||
<li>{{ retrocessionMean }}</li>
|
<li>{{ retrocessionMean }}</li>
|
||||||
<li>Rétrocession moyenne</li>
|
<li>Rétrocession moyenne</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="hightlight">
|
<div class="hightlight boxed">
|
||||||
<ul>
|
<ul>
|
||||||
<li>{{ caPro }}</li>
|
<li>{{ caPro }}</li>
|
||||||
<li> CA pour la partie pro ({{ caProPercentage*100}}% du CA)</li>
|
<li> CA pour la partie pro ({{ caProPercentage*100}}% du CA)</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="hightlight">
|
<div class="hightlight boxed">
|
||||||
<ul>
|
<ul>
|
||||||
<li>{{ caPerso }}</li>
|
<li>{{ caPerso }}</li>
|
||||||
<li> CA pour la partie perso</li>
|
<li> CA pour la partie perso</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
-->
|
-->
|
||||||
<div class="hightlight">
|
<div class="hightlight boxed">
|
||||||
<ul>
|
<ul>
|
||||||
<li>{{ caPersoUntouch }} €</li>
|
<li>{{ caPersoUntouch }} €</li>
|
||||||
<li> CA perso non utilisé pour se rémunérer</li>
|
<li> CA perso non utilisé pour se rémunérer</li>
|
||||||
@ -131,13 +131,10 @@ export default {
|
|||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column wrap;
|
flex-flow: column wrap;
|
||||||
box-shadow: 2px 2px 5px gray;
|
|
||||||
border-left: 1rem solid black;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding-inline-start: 0;
|
padding-inline-start: 0;
|
||||||
}
|
}
|
||||||
.hightlight > ul > li {
|
.hightlight > ul > li {
|
||||||
margin: 3px;
|
margin: 5px;
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
}
|
}
|
||||||
.hightlight > ul :first-child{
|
.hightlight > ul :first-child{
|
||||||
|
@ -1,8 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<nav>
|
<h1>Sous Margot</h1>
|
||||||
<router-link to="/"> Home </router-link>
|
<!--
|
||||||
<router-link to="/config"> Config </router-link>
|
<nav>
|
||||||
</nav>
|
<router-link to="/"> Home </router-link>
|
||||||
|
<router-link to="/config"> Config </router-link>
|
||||||
|
</nav>
|
||||||
|
-->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -15,7 +18,4 @@ export default {
|
|||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
<style scoped>
|
<style scoped>
|
||||||
nav {
|
|
||||||
background-color: green;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,3 +1,6 @@
|
|||||||
|
body {
|
||||||
|
background-color: whitesmoke;
|
||||||
|
}
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
@ -14,8 +17,13 @@ button {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
color: white;
|
background-color: white;
|
||||||
|
transition: all 0.2s ease-out;
|
||||||
}
|
}
|
||||||
|
button:hover {
|
||||||
|
transition: all 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
.validate {
|
.validate {
|
||||||
border: 2px solid green;
|
border: 2px solid green;
|
||||||
color: green;
|
color: green;
|
||||||
@ -40,3 +48,10 @@ button {
|
|||||||
background-color: orange;
|
background-color: orange;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.boxed {
|
||||||
|
box-shadow: 2px 2px 5px gray;
|
||||||
|
border-left: 1rem solid black;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user