78 lines
3.1 KiB
Vue
78 lines
3.1 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"
|
|
:projectId="item.projectId"
|
|
:class="['canvas-item', item.class, 'card', 'shadow', 'p-3']"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import CanvasItem from "@/components/canvas/CanvasItem.vue";
|
|
|
|
const items = ref([
|
|
{ projectId: 1, title: 1, title_text: "1. Problème", description: "3 problèmes essentiels à résoudre pour le client", class: "Probleme" },
|
|
{ projectId: 1, title: 2, title_text: "2. Segments", description: "Les segments de clientèle visés", class: "Segments" },
|
|
{ projectId: 1, title: 3, title_text: "3. Valeur", description: "La proposition de valeur", class: "Valeur" },
|
|
{ projectId: 1, title: 4, title_text: "4. Solution", description: "Les solutions proposées", class: "Solution" },
|
|
{ projectId: 1, title: 5, title_text: "5. Avantage", description: "Les avantages concurrentiels", class: "Avantage" },
|
|
{ projectId: 1, title: 6, title_text: "6. Canaux", description: "Les canaux de distribution", class: "Canaux" },
|
|
{ projectId: 1, title: 7, title_text: "7. Indicateurs", description: "Les indicateurs clés de performance", class: "Indicateurs" },
|
|
{ projectId: 1, title: 8, title_text: "8. Coûts", description: "Les coûts associés", class: "Couts" },
|
|
{ projectId: 1, title: 9, title_text: "9. Revenus", description: "Les sources de revenus", class: "Revenus" }
|
|
]);
|
|
|
|
onMounted(() => {
|
|
const bootstrapCss = document.createElement('link')
|
|
bootstrapCss.rel = 'stylesheet'
|
|
bootstrapCss.href = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css'
|
|
bootstrapCss.integrity = 'sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+Fpc+NC'
|
|
bootstrapCss.crossOrigin = 'anonymous'
|
|
document.head.appendChild(bootstrapCss)
|
|
|
|
const bootstrapJs = document.createElement('script')
|
|
bootstrapJs.src = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js'
|
|
bootstrapJs.integrity = 'sha384-mQ93S0EhrF4Z1nM+fTflmYf0DyzsY5j7F5H3WlClDD6H3WUJh6kxBkF3GDW8n1j6'
|
|
bootstrapJs.crossOrigin = 'anonymous'
|
|
document.body.appendChild(bootstrapJs)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import "@/components/canvas/style-project.css";
|
|
|
|
.canvas {
|
|
display: grid;
|
|
grid-template-columns: repeat(10, 1fr);
|
|
grid-template-rows: repeat(6, 1fr);
|
|
gap: 12px;
|
|
padding: 30px;
|
|
/*background-color: #f8f9fa;*/
|
|
position: relative;
|
|
height: 90vh;
|
|
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; }
|
|
|
|
.canvas-item {
|
|
/*background-color: white;*/
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0.5rem;
|
|
}
|
|
</style>
|