generated from gitea_admin/default
241 lines
8.0 KiB
Vue
241 lines
8.0 KiB
Vue
<template>
|
||
<div class="missions--page">
|
||
<!-- ================== -->
|
||
<!-- FILS D'ARIANE -->
|
||
<!-- ================== -->
|
||
<PageSection tone="" content-size="default" class="breadcrum_wp">
|
||
<Breadcrumb/>
|
||
</PageSection>
|
||
|
||
<!-- ================== -->
|
||
<!-- EN-TêTE -->
|
||
<!-- ================== -->
|
||
<section class="fiche_header_simple_wp">
|
||
<div class="fiche_header_wp_gauche"></div>
|
||
|
||
<div class="fiche_header_inner">
|
||
<div class="fiche_header_titres">
|
||
<div>
|
||
<DsHeading as="h1" tone="default" textcase="uppercase" class="concert-card__title">
|
||
{{ missions?.header_titre }}
|
||
</DsHeading>
|
||
</div>
|
||
|
||
<DsText as="p" align="justify">
|
||
{{ missions?.header_text }}
|
||
</DsText>
|
||
</div>
|
||
<div class="fiche_header_img">
|
||
<DsMedia
|
||
v-if="missions?.image_illustration_header?.url"
|
||
:src="missions.image_illustration_header.url"
|
||
:alt="missions.image_illustration_header.alternativeText || ''"
|
||
fit="cover"
|
||
ratio="square"
|
||
/>
|
||
|
||
<div v-else class="img_placeholder" aria-hidden="true" />
|
||
</div>
|
||
|
||
</div>
|
||
<div class="fiche_header_wp_droite"></div>
|
||
|
||
</section>
|
||
|
||
<!-- ================== -->
|
||
<!-- PARTIE 1 -->
|
||
<!-- ================== -->
|
||
<PageSection tone="" content-size="default" padded_size="" class="fiche_description">
|
||
<SectionContent v-if="missions?.partie_1" class="description_wp">
|
||
<StrapiBlocksConvert :blocks="missions.partie_1" />
|
||
</SectionContent>
|
||
</PageSection>
|
||
|
||
<!-- ================== -->
|
||
<!-- CHIFFRES -->
|
||
<!-- ================== -->
|
||
<PageSection tone="" content-size="default" padded_size="md" class="chiffres_wp">
|
||
<Chiffres
|
||
title="L'ORCHESTRE PARTOUT EN ÎLE-DE-FRANCE"
|
||
:items="missionsChiffres"
|
||
/>
|
||
</PageSection>
|
||
|
||
|
||
|
||
<!-- ================== -->
|
||
<!-- decalage_gauche 1 -->
|
||
<!-- ================== -->
|
||
<PageSection :content="false">
|
||
<Decalage tone="dark" title-tone="invert" position="left" button-tone="invert">
|
||
<template #title>
|
||
{{ missions?.decalage_gauche_1?.decalage_titre }}
|
||
</template>
|
||
<DsText as="p" tone="invert" align="justify">
|
||
{{ missions?.decalage_gauche_1?.decalage_texte }}
|
||
</DsText>
|
||
</Decalage>
|
||
</PageSection>
|
||
|
||
<!-- ================== -->
|
||
<!-- PARTIE 2 -->
|
||
<!-- ================== -->
|
||
<PageSection tone="" content-size="default" padded_size="md" class="fiche_description">
|
||
<SectionContent v-if="missions?.partie_2" class="description_wp">
|
||
<StrapiBlocksConvert :blocks="missions.partie_2" />
|
||
</SectionContent>
|
||
</PageSection>
|
||
|
||
|
||
<!-- ================== -->
|
||
<!-- decalage_gauche 1 -->
|
||
<!-- ================== -->
|
||
<PageSection :content="false">
|
||
<Decalage tone="dark" title-tone="invert" position="left" button-tone="invert">
|
||
<template #title>
|
||
Studio d’enregistrement et location d’instruments
|
||
</template>
|
||
<DsText as="p" tone="invert" align="justify">
|
||
L’Orchestre national d’Île-de-France accompagne les professionnels et les amateurs dans leurs activités musicales.<br>
|
||
Aux portes de Paris, nous mettons à leur disposition un studio d’enregistrement high-tech et plusieurs espaces de répétition. Nous leur proposons également plus de 3000 instruments à la location à travers un parc instrumental ouvert sur le monde et ses traditions musicales les plus inattendues !
|
||
</DsText>
|
||
</Decalage>
|
||
</PageSection>
|
||
|
||
|
||
<!-- ================== -->
|
||
<!-- decalage_droite_2 -->
|
||
<!-- ================== -->
|
||
<PageSection :content="false">
|
||
<Decalage tone="brandreverse" title-tone="invert" position="right" button-tone="invert">
|
||
<template #title>
|
||
{{ missions?.decalage_droite_2?.decalage_titre }}
|
||
</template>
|
||
<DsText as="p" align="justify">
|
||
{{ missions?.decalage_droite_2?.decalage_texte }}
|
||
</DsText>
|
||
</Decalage>
|
||
</PageSection>
|
||
|
||
<!-- ================== -->
|
||
<!-- PARTIE 3 -->
|
||
<!-- 🚫 DISPLAY NONE -->
|
||
<!-- ================== -->
|
||
<PageSection tone="" content-size="default" padded_size="md" class="fiche_description display_none">
|
||
<SectionContent v-if="missions?.partie_3" class="description_wp">
|
||
<StrapiBlocksConvert :blocks="missions.partie_3" />
|
||
</SectionContent>
|
||
</PageSection>
|
||
|
||
|
||
|
||
<!-- ================== -->
|
||
<!-- decalage_droite_clic_4 -->
|
||
<!-- RSE -->
|
||
<!-- ================== -->
|
||
<PageSection :content="false">
|
||
<Decalage tone="brand" title-tone="invert" position="left" button-tone="invert" ensavoirplus-target="texte_cache">
|
||
<template #title>
|
||
{{ missions?.decalage_droite_clic_4?.decalage_titre }}
|
||
</template>
|
||
<DsText as="p" tone="invert" align="justify">
|
||
{{ missions?.decalage_droite_clic_4?.decalage_texte }}
|
||
</DsText>
|
||
</Decalage>
|
||
</PageSection>
|
||
|
||
<PageSection tone="" content-size="default" padded_size="" class="fiche_description">
|
||
<div
|
||
v-if="missions?.partie_ouvrable_4"
|
||
id="texte_cache"
|
||
class="decalage_ensavoirplus--hidden"
|
||
>
|
||
<StrapiBlocksConvert :blocks="missions.partie_ouvrable_4 || []" />
|
||
</div>
|
||
</PageSection>
|
||
|
||
<!-- ================== -->
|
||
<!-- L'ORCHESTRE POUR LES PROS -->
|
||
<!-- ================== -->
|
||
<PageSection padded_size="lg">
|
||
<SectionContent>
|
||
<SectionTitle tone="" pad="xs">
|
||
L'ORCHESTRE POUR LES PROS
|
||
</SectionTitle>
|
||
</SectionContent>
|
||
|
||
<SectionContent>
|
||
<BannierePros />
|
||
</SectionContent>
|
||
</PageSection>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
|
||
import DsText from '@root/design-system/primitives/DsText.vue'
|
||
import DsMedia from '@root/design-system/primitives/DsMedia.vue'
|
||
import DsButton from '@root/design-system/primitives/DsButton.vue'
|
||
|
||
//--------------------
|
||
// RÉCUPÉRATION DES DONNÉES STRAPI
|
||
//--------------------
|
||
const { items: mission, pending, error, refresh } = useStrapi(
|
||
"/api/__strapi__/missions",
|
||
{ locale: "fr-FR",
|
||
populate: {
|
||
decalage_gauche_1: true,
|
||
decalage_droite_2: true,
|
||
decalage_gauche_3: true,
|
||
decalage_droite_clic_4: true,
|
||
image_illustration_header: true,
|
||
},
|
||
}
|
||
)
|
||
const missions = computed(() => mission.value?.[0] || null)
|
||
const missionsChiffres = [
|
||
{ value: '8', label: 'Départements' },
|
||
{ value: '+ de 60', label: 'Villes' },
|
||
{ value: '+ de 120', label: 'concerts' },
|
||
{ value: '100 000', label: 'Spectateurs et spectatrices' },
|
||
{ value: '22 000', label: "Bénéficiaires de l'action culturelle" }
|
||
]
|
||
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
|
||
.breadcrum_wp {
|
||
padding-top: 30px;
|
||
}
|
||
|
||
|
||
|
||
// =======================
|
||
// SPÉCIFIQUE À CETTE PAGE
|
||
// =======================
|
||
.missions--page {
|
||
.chiffres_wp {
|
||
background-color: var(--c-background-vert);
|
||
margin-bottom: 50px;
|
||
}
|
||
|
||
.fiche_description {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding-top: 10px;
|
||
padding-bottom: 10px;
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
> * {
|
||
max-width: 640px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|