front_foundation #5
@ -3,7 +3,7 @@ import { RouterLink, RouterView } from 'vue-router'
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
import Header from './components/Header.vue';
|
||||
import ProjectComp from './components/Project-comp.vue';
|
||||
import CanvasView from './components/canvas/Lean-canvas.vue';
|
||||
import CanvasView from './components/canvas/LeanCanvas.vue';
|
||||
import ErrorWrapper from "@/views/errorWrapper.vue";
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="cell produit" @click="toggleExpand">
|
||||
<h3>9. Avantage déloyal</h3>
|
||||
<p>Ce qui ne peut pas être facilement copié ou acheté</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toggleExpand(event) {
|
||||
event.currentTarget.classList.toggle("expanded");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="cell produit" @click="toggleExpand">
|
||||
<h3>5. Canaux</h3>
|
||||
<p>Chemins d'accès aux clients</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toggleExpand(event) {
|
||||
event.currentTarget.classList.toggle("expanded");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
56
front/MyINPulse-front/src/components/canvas/CanvasItem.vue
Normal file
56
front/MyINPulse-front/src/components/canvas/CanvasItem.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
|
|
||||
<div :class="['cell', { expanded }]" @click="toggleExpand">
|
||||
<h3>{{ title }}</h3>
|
||||
<p>{{ description }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: String,
|
||||
description: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
expanded: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleExpand() {
|
||||
this.expanded = !this.expanded;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: column; /* Pour empiler le titre et la description */
|
||||
align-items: center; /* Centre horizontalement */
|
||||
justify-content: center; /* Centre verticalement */
|
||||
text-align: center; /* Centre le texte */
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.expanded {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="cell produit" @click="toggleExpand">
|
||||
<h3>7. Structure des coûts</h3>
|
||||
<p>Coûts d'acquisition, distribution, hébergement, employés...</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toggleExpand(event) {
|
||||
event.currentTarget.classList.toggle("expanded");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<header>
|
||||
<img src="@/assets/logo-inpulse.png" alt="INPulse Logo">
|
||||
<div class="header-buttons">
|
||||
<div class="contact-menu">
|
||||
<button class="contact-button" @click="toggleDropdown">Contact</button>
|
||||
<div class="contact-dropdown" v-show="isDropdownOpen">
|
||||
<button>Contact All</button>
|
||||
<button>Contact Person 1</button>
|
||||
<button>Contact Person 2</button>
|
||||
<button>Contact Person 3</button>
|
||||
</div>
|
||||
<div class="return"><a href="/">return to list project</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isDropdownOpen: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleDropdown() {
|
||||
this.isDropdownOpen = !this.isDropdownOpen;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
36
front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
Normal file
36
front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<header>
|
||||
<img src="../icons/logo inpulse.png" alt="INPulse Logo">
|
||||
<div class="header-buttons">
|
||||
<div class="contact-menu">
|
||||
<button class="contact-button" @click="toggleDropdown">Contact</button>
|
||||
<div class="contact-dropdown" v-show="isDropdownOpen">
|
||||
<button>Contact All</button>
|
||||
<button>Contact Person 1</button>
|
||||
<button>Contact Person 2</button>
|
||||
<button>Contact Person 3</button>
|
||||
</div>
|
||||
<div class="return"><a href="/">return to list project</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isDropdownOpen: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleDropdown() {
|
||||
this.isDropdownOpen = !this.isDropdownOpen;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="cell produit" @click="toggleExpand">
|
||||
<h3>8. Indicateurs clés</h3>
|
||||
<p>Activités clés que vous souhaitez évaluer</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toggleExpand(event) {
|
||||
event.currentTarget.classList.toggle("expanded");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<div class="canvas">
|
||||
<Probleme class="Probleme" />
|
||||
<Segments class="Segments" />
|
||||
<Valeur class="Valeur" />
|
||||
<Solution class="Solution" />
|
||||
<Avantage class="Avantage" />
|
||||
<Canaux class="Canaux" />
|
||||
<Indicateurs class="Indicateurs" />
|
||||
<Couts class="Couts" />
|
||||
<Revenus class="Revenus" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Probleme from "./Probleme.vue";
|
||||
import Segments from "./Segments.vue";
|
||||
import Solution from "./Solution.vue";
|
||||
import Valeur from "./Valeur.vue";
|
||||
import Canaux from "./Canaux.vue";
|
||||
import Revenus from "./Revenus.vue";
|
||||
import Couts from "./Couts.vue";
|
||||
import Indicateurs from "./Indicateurs.vue";
|
||||
import Avantage from "./Avantage.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Probleme,
|
||||
Segments,
|
||||
Solution,
|
||||
Valeur,
|
||||
Canaux,
|
||||
Revenus,
|
||||
Couts,
|
||||
Indicateurs,
|
||||
Avantage
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.canvas {
|
||||
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>
|
||||
92
front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
Normal file
92
front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div class="LeanCanvas">
|
||||
<CanvasItem
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
:title="item.title"
|
||||
:description="item.description"
|
||||
:class="item.class"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CanvasItem from "./CanvasItem.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CanvasItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{ title: "1. Problème",
|
||||
description: "3 problèmes essentiels à résoudre pour le client",
|
||||
class: "Probleme"
|
||||
},
|
||||
{ title: "2. Segments",
|
||||
description: "Les segments de clientèle visés",
|
||||
class: "Segments"
|
||||
},
|
||||
{ title: "3. Valeur",
|
||||
description: "La proposition de valeur",
|
||||
class: "Valeur"
|
||||
},
|
||||
{ title: "4. Solution",
|
||||
description: "Les solutions proposées",
|
||||
class: "Solution"
|
||||
},
|
||||
{ title: "5. Avantage",
|
||||
description: "Les avantages concurrentiels",
|
||||
class: "Avantage"
|
||||
},
|
||||
{ title: "6. Canaux",
|
||||
description: "Les canaux de distribution",
|
||||
class: "Canaux"
|
||||
},
|
||||
{ title: "7. Indicateurs",
|
||||
description: "Les indicateurs clés de performance",
|
||||
class: "Indicateurs"
|
||||
},
|
||||
{ title: "8. Coûts",
|
||||
description: "Les coûts associés",
|
||||
class: "Couts"
|
||||
},
|
||||
{ title: "9. Revenus",
|
||||
description: "Les sources de revenus",
|
||||
class: "Revenus"
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.LeanCanvas {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
grid-template-rows: repeat(6, 1fr);
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
max-width: 1200px;
|
||||
margin: 20px auto;
|
||||
border: 2px dashed #d33;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
height: 80vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.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; }
|
||||
|
||||
</style>
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="cell produit" @click="toggleExpand">
|
||||
<h3>1. Problème</h3>
|
||||
<p>3 problèmes essentiels à résoudre pour le client</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toggleExpand(event) {
|
||||
event.currentTarget.classList.toggle("expanded");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="cell produit" @click="toggleExpand">
|
||||
<h3>6. Sources de revenus</h3>
|
||||
<p>Modèle de revenus, durée, revenus espérés, marge espérée</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toggleExpand(event) {
|
||||
event.currentTarget.classList.toggle("expanded");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="cell produit" @click="toggleExpand">
|
||||
<h3>2. Segments de clients</h3>
|
||||
<p>Clients cibles</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toggleExpand(event) {
|
||||
event.currentTarget.classList.toggle("expanded");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="cell produit" @click="toggleExpand">
|
||||
<h3>4. Solution</h3>
|
||||
<p>3 fonctionnalités essentielles pour le client</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toggleExpand(event) {
|
||||
event.currentTarget.classList.toggle("expanded");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="cell produit" @click="toggleExpand">
|
||||
<h3>3. Proposition de valeur unique</h3>
|
||||
<p>Message simple, clair et persuasif expliquant en quoi votre produit est différent et mérite d'être acheté</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toggleExpand(event) {
|
||||
event.currentTarget.classList.toggle("expanded");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
</style>
|
||||
|
||||
@ -58,14 +58,8 @@ body {
|
||||
|
||||
h1 img {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
max-width: 1200px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
border: 2px dashed #d33;
|
||||
background-color: #fff;
|
||||
margin: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.row {
|
||||
@ -117,11 +111,6 @@ body {
|
||||
position: relative;
|
||||
piair
commented
Si cela ne concerne que le dropdown d'un contact, cela devrait être dans le style de la view contact Si cela ne concerne que le dropdown d'un contact, cela devrait être dans le style de la view contact
|
||||
}
|
||||
|
||||
.expanded {
|
||||
transform: scale(1.2); /* L'élément reste agrandi */
|
||||
transition: transform 0.3s ease; /* Animation fluide */
|
||||
}
|
||||
|
||||
.contact-button, .return {
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
<!-- src/views/CanvasView.vue -->
|
||||
<template>
|
||||
<div>
|
||||
<header>
|
||||
<HeaderCanvas />
|
||||
</header>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Page Canvas</h1>
|
||||
<LeanCanvas />
|
||||
@ -7,6 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import LeanCanvas from '@/components/canvas/Lean-canvas.vue';
|
||||
import HeaderCanvas from '../components/canvas/HeaderCanvas.vue';
|
||||
import LeanCanvas from '../components/canvas/LeanCanvas.vue';
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user
Il serait mieux d'afficher le contenu du lean canvas sans devoir clicker dessus, un peu comme sur ce lien.
De plus, ce n'est pas important d'afficher en gros le titre de la section, il devrait être plus discret.
https://cms.boardmix.com/images/articles/lean-canvas.png
En plus il y a des jolies couleur c'est sympa.