piair/MyINPulse
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

front_foundation #5

Open
mohamed_maoulainine wants to merge 73 commits from front_foundation into main
pull from: front_foundation
merge into: piair:main
Conversation 3 Commits 73 Files Changed 27 +70 -41
1 changed files with 70 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9d71c93b5b - Show all commits

99
front/MyINPulse-front/src/components/canvas/Lean-canvas.vue
View File

@ -1,42 +1,71 @@
<template> <template>
<div class="canvas"> <div class="canvas">
<div class="row"> <Probleme class="Probleme" />
<Probleme /> <Segments class="Segments" />
<Segments /> <Valeur class="Valeur" />
<Solution class="Solution" />
<Avantage class="Avantage" />
<Canaux class="Canaux" />
<Indicateurs class="Indicateurs" />
<Couts class="Couts" />
<Revenus class="Revenus" />
</div> </div>
<div class="row"> </template>
<Solution />
<Valeur />
<Canaux />
</div>
<div class="row">
<Couts />
<Revenus />
</div>
<div class="row">
<Indicateurs />
<Avantage />
</div>
</div>
</template>
<script> <script>
import Probleme from "./Probleme.vue"; import Probleme from "./Probleme.vue";
import Segments from "./Segments.vue"; import Segments from "./Segments.vue";
import Solution from "./Solution.vue"; import Solution from "./Solution.vue";
import Valeur from "./Valeur.vue"; import Valeur from "./Valeur.vue";
import Canaux from "./Canaux.vue"; import Canaux from "./Canaux.vue";
import Revenus from "./Revenus.vue"; import Revenus from "./Revenus.vue";
import Couts from "./Couts.vue"; import Couts from "./Couts.vue";
import Indicateurs from "./Indicateurs.vue"; import Indicateurs from "./Indicateurs.vue";
import Avantage from "./Avantage.vue"; import Avantage from "./Avantage.vue";
export default { export default {
components: { Probleme, Segments, Solution, Valeur, Canaux, Revenus, Couts, Indicateurs, Avantage } components: {
}; Probleme,
</script> Segments,
Solution,
Valeur,
Canaux,
Revenus,
Couts,
Indicateurs,
Avantage
}
};
</script>
<style scoped> <style scoped>
@import "@/components/canvas/style-project.css"; .canvas {
</style> display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(6, 1fr);
gap: 10px;
padding: 10px;
}
.Probleme { grid-column: 1 / 3; grid-row: 1 / 5; }
.Segments { grid-column: 9 / 11; grid-row: 1 / 5; }
.Valeur { grid-column: 5 / 7; grid-row: 1 / 5; }
.Solution { grid-column: 3 / 5; grid-row: 1 / 3; }
.Avantage { grid-column: 7 / 9; grid-row: 1 / 3; }
.Canaux { grid-column: 7 / 9; grid-row: 3 / 5; }
.Indicateurs { grid-column: 3 / 5; grid-row: 3 / 5; }
.Couts { grid-column: 1 / 6; grid-row: 5 / 7; }
.Revenus { grid-column: 6 / 11; grid-row: 5 / 7; }
.expanded {
position: absolute;
top: 0;
left: 0;
width: 100%; /* Remplit toute la zone sans dépassement */
height: 100%;
transition: all 0.3s ease;
z-index: 10;
background: white; /* S'assurer que le contenu s'affiche correctement */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Optionnel : un petit effet visuel */
}
</style>