85 lines
2.5 KiB
Vue
85 lines
2.5 KiB
Vue
<template>
|
|
<article
|
|
id="dtl-page"
|
|
class="bg-black rounded-xl p-64"
|
|
:style="'--background: url(' + background + ')'"
|
|
>
|
|
<header
|
|
class="flex flex-col justify-center | text-center text-white | flow"
|
|
style="--flow-space: 2rem"
|
|
>
|
|
<hgroup class="flow" data-icon="leaf-thin">
|
|
<h1 class="text-xl font-serif">{{ page.content.sectiontitle }}</h1>
|
|
<p class="intro" v-html="page.content.introduction"></p>
|
|
</hgroup>
|
|
<div class="ctas | flex" style="--column-gap: 1rem">
|
|
<button
|
|
@click="isOptimizationDialogOpen = true"
|
|
class="btn btn--white-10"
|
|
>
|
|
Optimiser un projet existant
|
|
</button>
|
|
<button
|
|
@click="isProjectRequestDialogOpen = true"
|
|
class="btn btn--white"
|
|
>
|
|
Créer un nouveau projet avec DTL
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<div class="presentation | mt-64 flow">
|
|
<div v-for="row in page.presentation" :key="row.id" class="flex">
|
|
<div
|
|
v-for="column in row.columns"
|
|
:key="column.id"
|
|
class="flex-1 | flex flex-col"
|
|
style="min-width: 16.5rem"
|
|
>
|
|
<div
|
|
v-for="block in column.blocks"
|
|
:key="block.id"
|
|
class="card w-full | bg-white-10 text-grey-200"
|
|
>
|
|
<img
|
|
:src="block.content.cover.url"
|
|
alt=""
|
|
width=""
|
|
height=""
|
|
class="rounded-md"
|
|
/>
|
|
<h2 class="font-serif text-lg text-white">
|
|
{{ block.content.title }}
|
|
</h2>
|
|
<div v-html="block.content.text"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<OptimizationRequestDialog
|
|
v-if="isOptimizationDialogOpen"
|
|
@close="isOptimizationDialogOpen = false"
|
|
/>
|
|
|
|
<ProjectRequestDialog
|
|
v-if="isProjectRequestDialogOpen"
|
|
@close="isProjectRequestDialogOpen = false"
|
|
/>
|
|
</template>
|
|
<script setup>
|
|
import { storeToRefs } from 'pinia';
|
|
import { usePageStore } from '../stores/page';
|
|
import OptimizationRequestDialog from '../components/design-to-light/OptimizationRequestDialog.vue';
|
|
import ProjectRequestDialog from '../components/ProjectRequestDialog.vue';
|
|
import { computed, ref } from 'vue';
|
|
|
|
const { page } = storeToRefs(usePageStore());
|
|
|
|
const isOptimizationDialogOpen = ref(false);
|
|
const isProjectRequestDialogOpen = ref(false);
|
|
|
|
const background = computed(() => {
|
|
return page.value?.background?.url;
|
|
});
|
|
</script>
|