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