feat: canvas are now generic
This commit is contained in:
parent
9d71c93b5b
commit
6a3d4239ab
@ -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;
|
||||
}
|
||||
|
||||
.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