Création de la page Analyse

master
Clément VERDOIRE 3 years ago
parent ab591634e1
commit c7900491c7

@ -11,30 +11,38 @@ const api = axios.create({
const Analyse = () => { const Analyse = () => {
return ( return (
<div className="page_analyse"> <body>
{/* Create an analysis page */}
<div className="haut_de_page"> <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
<h2 className="titre">Analyse</h2>
<div className="rechLogo"> <div className="page_analyse">
<div className="input_box"> {/* Create an analysis page */}
<input type="search" placeholder="Rechercher..."/> <div className="haut_de_page">
<span className="search"> <h2 className="titre">Analyse</h2>
<i class="uil uil-search search-icon"></i> <div className="rechLogo">
</span> <div className="input_box">
<input type="search" placeholder="Rechercher..."/>
<span className="search">
<i class="uil uil-search search-icon"></i>
</span>
</div>
<img className="logo" srcSet="./LogoApp.svg"/>
</div> </div>
<img className="logo" srcSet="./LogoApp.svg"/>
</div> </div>
</div>
<div className="bas_de_page">
<NavigationDashboard />
<div className="Analyse">
<div className="statistiques_1">
<div className="bas_de_page">
<NavigationDashboard />
<div className="Analyse">
<div className="Stat_1">
Tendances des ventes
</div>
<div className="Stat_2">
Statistique n°2
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </body>
); );
}; };

@ -1,15 +1,12 @@
.page_analyse { body {
display: flex; background-image: url("../../../public/fond_page_connexion.png");
flex-direction: column;
//justify-content: space-evenly; .page_analyse {
width: auto; display: flex;
height: 100vh; flex-direction: column;
justify-content: space-evenly;
background: rgba(255, 255, 255, 0.143); width: auto;
border-radius: 15px; height: 100vh;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.haut_de_page { .haut_de_page {
display: flex; display: flex;
@ -21,7 +18,7 @@
align-items: center; align-items: center;
margin: 10px 10px 5px 10px; margin: 10px 10px 5px 10px;
background: rgba(255, 255, 255, 0.143); background: rgba(255, 255, 255, 0.3);
border-radius: 15px; border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
@ -90,7 +87,7 @@
.bas_de_page { .bas_de_page {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
//justify-content: space-between; justify-content: space-between;
width: auto; width: auto;
height: 86%; height: 86%;
@ -102,7 +99,7 @@
width: 5%; width: 5%;
margin: 5px 5px 10px 10px; margin: 5px 5px 10px 10px;
background: rgba(255, 255, 255, 0.143); background: rgba(255, 255, 255, 0.3);
border-radius: 15px; border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
@ -124,20 +121,40 @@
} }
} }
.statistiques_1 { .Analyse {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
padding: 50px; height: auto;
width: 1423px; width: 93%;
height: 627px; margin: 5px 10px 10px 5px;
margin: 5px 5px 10px 10px;
background: rgba(255, 255, 255, 0.143); .Stat_1 {
border-radius: 15px; display: flex;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); width: auto;
backdrop-filter: blur(3px); height: 50%;
-webkit-backdrop-filter: blur(15px); margin: 50px 50px 8px 50px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
}
.Stat_2 {
display: flex;
width: auto;
height: 50%;
margin: 8px 50px 50px 50px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
}
} }
} }
}
} }
Loading…
Cancel
Save