175 lines
3.4 KiB
Vue
175 lines
3.4 KiB
Vue
<template>
|
|
<div class="canvas container-fluid">
|
|
<CanvasItem
|
|
v-for="(item, index) in items"
|
|
:key="index"
|
|
:title="item.title"
|
|
:title-text="item.title_text"
|
|
:description="item.description"
|
|
:project-id="props.projectId"
|
|
:class="['canvas-item', item.class, 'card', 'shadow', 'p-3']"
|
|
:is-admin="props.isAdmin"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import CanvasItem from "@/components/canvas/CanvasItem.vue";
|
|
|
|
const props = defineProps<{
|
|
projectId: number;
|
|
isAdmin: boolean;
|
|
}>();
|
|
|
|
const items = ref([
|
|
{
|
|
title: 1,
|
|
title_text: "1. Problème",
|
|
description: "3 problèmes essentiels à résoudre pour le client",
|
|
class: "Probleme",
|
|
},
|
|
{
|
|
title: 2,
|
|
title_text: "2. Segments",
|
|
description: "Les segments de clientèle visés",
|
|
class: "Segments",
|
|
},
|
|
{
|
|
title: 3,
|
|
title_text: "3. Valeur",
|
|
description: "La proposition de valeur",
|
|
class: "Valeur",
|
|
},
|
|
{
|
|
title: 4,
|
|
title_text: "4. Solution",
|
|
description: "Les solutions proposées",
|
|
class: "Solution",
|
|
},
|
|
{
|
|
title: 5,
|
|
title_text: "5. Avantage",
|
|
description: "Les avantages concurrentiels",
|
|
class: "Avantage",
|
|
},
|
|
{
|
|
title: 6,
|
|
title_text: "6. Canaux",
|
|
description: "Les canaux de distribution",
|
|
class: "Canaux",
|
|
},
|
|
{
|
|
title: 7,
|
|
title_text: "7. Indicateurs",
|
|
description: "Les indicateurs clés de performance",
|
|
class: "Indicateurs",
|
|
},
|
|
{
|
|
title: 8,
|
|
title_text: "8. Coûts",
|
|
description: "Les coûts associés",
|
|
class: "Couts",
|
|
},
|
|
{
|
|
title: 9,
|
|
title_text: "9. Revenus",
|
|
description: "Les sources de revenus",
|
|
class: "Revenus",
|
|
},
|
|
]);
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import "@/components/canvas/style-project.css";
|
|
|
|
.canvas {
|
|
display: grid;
|
|
grid-template-columns: repeat(10, minmax(0, 1fr));
|
|
grid-auto-rows: min-content;
|
|
gap: 12px;
|
|
padding: 30px;
|
|
position: relative;
|
|
height: auto;
|
|
max-height: none;
|
|
box-sizing: border-box;
|
|
overflow: visible;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.canvas {
|
|
grid-template-columns: repeat(1, 1fr);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.canvas-item {
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.Probleme {
|
|
background-color: #ffdddd;
|
|
}
|
|
.Segments {
|
|
background-color: #ddffdd;
|
|
}
|
|
.Valeur {
|
|
background-color: #ddddff;
|
|
}
|
|
.Solution {
|
|
background-color: #fff0b3;
|
|
}
|
|
.Avantage {
|
|
background-color: #d1c4e9;
|
|
}
|
|
.Canaux {
|
|
background-color: #b2ebf2;
|
|
}
|
|
.Indicateurs {
|
|
background-color: #ffe082;
|
|
}
|
|
.Couts {
|
|
background-color: #ffcdd2;
|
|
}
|
|
.Revenus {
|
|
background-color: #c8e6c9;
|
|
}
|
|
</style>
|