generated from gitea_admin/default
295 lines
10 KiB
Vue
295 lines
10 KiB
Vue
<template>
|
|
<div class="particulier--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">
|
|
{{particulier_donnees_servies.header_titre}}
|
|
</DsHeading>
|
|
</div>
|
|
|
|
<DsText as="p" align="justify">
|
|
{{particulier_donnees_servies.header_text}}
|
|
</DsText>
|
|
</div>
|
|
<div class="fiche_header_img">
|
|
<DsMedia
|
|
v-if="particulier_donnees_servies?.header_illustration?.url"
|
|
:src="particulier_donnees_servies.header_illustration.url"
|
|
:alt="particulier_donnees_servies.header_illustration.alternativeText || ''"
|
|
fit="cover"
|
|
ratio="square"
|
|
/>
|
|
|
|
<div v-else class="img_placeholder" aria-hidden="true" />
|
|
</div>
|
|
|
|
</div>
|
|
<div class="fiche_header_wp_droite"></div>
|
|
|
|
</section>
|
|
|
|
<!-- ================== -->
|
|
<!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
|
|
<!-- ================== -->
|
|
<template v-for="(t, index) in tiroirs" :key="index">
|
|
<PageSection :content="false" :class="{ 'decalage-section--spaced': index > 0 }">
|
|
<Decalage
|
|
:tone="t.decalage_couleur"
|
|
title-tone="invert"
|
|
:position="t.decalage_sens"
|
|
button-tone="invert"
|
|
:ensavoirplus-target="t.tiroir_ouvert ? undefined : `texte_cache_${index + 3}`"
|
|
:ensavoirplus-group="t.tiroir_ouvert ? undefined : 'particulier-details'"
|
|
>
|
|
<template #title>
|
|
{{ t.decalage_titre }}
|
|
</template>
|
|
<DsText as="p" tone="invert" :align="t.decalage_sens">
|
|
{{ t.decalage_texte }}
|
|
</DsText>
|
|
</Decalage>
|
|
</PageSection>
|
|
<PageSection
|
|
:id="`texte_cache_${index + 3}`"
|
|
:data-ensavoirplus-group="t.tiroir_ouvert ? undefined : 'particulier-details'"
|
|
tone=""
|
|
content-size="default"
|
|
padded_size=""
|
|
:class="{ 'decalage_ensavoirplus--hidden': !t.tiroir_ouvert }"
|
|
>
|
|
<section v-if="t.tiroir_galerie.length" class="img-gallery_wp">
|
|
<div class="img-gallery">
|
|
<DsMedia
|
|
v-for="img in t.tiroir_galerie"
|
|
:key="img.id || img.url"
|
|
:src="img.url"
|
|
:alt="img.alternativeText"
|
|
/>
|
|
</div>
|
|
</section>
|
|
<SectionContent class="fiche_description">
|
|
<StrapiBlocksConvert :blocks="t.tiroir_description" />
|
|
</SectionContent>
|
|
<section v-if="t.tiroir_videos.length" class="youtube_wp">
|
|
<div class="youtube-list">
|
|
<div v-for="v in t.tiroir_videos" :key="v.id" class="youtube-item">
|
|
<iframe
|
|
:src="v.lien_youtube"
|
|
title="Vidéo YouTube"
|
|
loading="lazy"
|
|
referrerpolicy="strict-origin-when-cross-origin"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</PageSection>
|
|
<!-- ================== -->
|
|
<!-- BOUTONS DON ET PLAQUETTE -->
|
|
<!-- ================== -->
|
|
<PageSection class="mt-5 mb-[50px]">
|
|
<SectionContent>
|
|
<!-- PDF -->
|
|
<div class="flex justify-center flex-wrap gap-5">
|
|
<div>
|
|
<a
|
|
href="https://media.orchestre-ile.com/uploads/cercle_des_particuliers_plaquette_2025_981efe3857.pdf"
|
|
download="cercle_des_particuliers_plaquette_2025"
|
|
class="flex items-center gap-2 px-6 py-2 bg-secondary-brand-container text-primary-brand-container rounded-full font-bold text-sm hover:bg-primary-fixed transition-colors"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<span class="material-symbols-outlined text-lg">volunteer_activism</span>
|
|
FAIRE UN DON EN LIGNE
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a
|
|
href="https://media.orchestre-ile.com/uploads/cercle_des_particuliers_plaquette_2025_981efe3857.pdf"
|
|
download="cercle_des_particuliers_plaquette_2025"
|
|
class="flex items-center gap-2 px-6 py-2 bg-primary-container text-on-primary-container rounded-full font-bold text-sm hover:bg-primary-fixed transition-colors"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<span class="material-symbols-outlined text-lg">picture_as_pdf</span>
|
|
PLAQUETTE DE VOS AVANTAGES
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</SectionContent>
|
|
</PageSection>
|
|
</template>
|
|
|
|
<!-- ================== -->
|
|
<!-- CONTACT -->
|
|
<!-- ================== -->
|
|
|
|
<PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
|
|
<ContactSpecifique
|
|
titre="Contacter le service mécénat"
|
|
nom="Audrey Chauvelot"
|
|
poste="Chargée du mécénat"
|
|
mail="audrey.chauvelot@orchestre-ile.com"
|
|
adresse=""
|
|
/>
|
|
</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 { computed } from 'vue'
|
|
|
|
useHead({
|
|
link: [
|
|
{
|
|
rel: 'preconnect',
|
|
href: 'https://fonts.googleapis.com',
|
|
},
|
|
{
|
|
rel: 'preconnect',
|
|
href: 'https://fonts.gstatic.com',
|
|
crossorigin: '',
|
|
},
|
|
{
|
|
rel: 'stylesheet',
|
|
href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap',
|
|
},
|
|
{
|
|
rel: 'stylesheet',
|
|
href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap',
|
|
},
|
|
],
|
|
})
|
|
|
|
// ======================================
|
|
// RÉCUPÉRATION DES DONNÉES DANS STRAPI
|
|
// ======================================
|
|
|
|
const endpoint = "/api/__strapi__/particulier"
|
|
const populate = {
|
|
header_illustration: true,
|
|
tiroirs_particulier: {
|
|
decalage_parametres: true,
|
|
tiroir_galerie: true,
|
|
tiroir_videos: true,
|
|
},
|
|
}
|
|
|
|
const { items: particulier, pending, error } = useStrapi(
|
|
endpoint,
|
|
{
|
|
locale: "fr-FR",
|
|
populate,
|
|
limit: 1,
|
|
}
|
|
)
|
|
|
|
// ======================================
|
|
// PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
|
|
// ======================================
|
|
const particulier_donnees_servies = computed(() => particulier.value?.[0] || {})
|
|
|
|
const tiroirs = computed(() =>
|
|
(particulier.value?.[0]?.tiroirs_particulier || []).map((tiroir_item) => ({
|
|
decalage_titre: tiroir_item.decalage_parametres?.decalage_titre,
|
|
decalage_texte: tiroir_item.decalage_parametres?.decalage_texte,
|
|
tiroir_ouvert: Boolean(tiroir_item.decalage_parametres?.tiroir_ouvert),
|
|
decalage_sens:
|
|
tiroir_item.decalage_parametres?.decalage_sens === "droite" ? "right" : "left",
|
|
decalage_couleur:
|
|
tiroir_item.decalage_parametres?.decalage_couleur === "rouge"
|
|
? "brand"
|
|
: tiroir_item.decalage_parametres?.decalage_couleur === "vert clair"
|
|
? "brandreverse"
|
|
: tiroir_item.decalage_parametres?.decalage_couleur === "jaune"
|
|
? "jaune"
|
|
: "dark",
|
|
tiroir_description: tiroir_item.tiroir_description,
|
|
tiroir_galerie: (tiroir_item.tiroir_galerie || []).map((tiroir_item_img) => ({
|
|
id: tiroir_item_img.id,
|
|
url: tiroir_item_img.url,
|
|
alt: tiroir_item_img.alternativeText,
|
|
})),
|
|
tiroir_videos: (tiroir_item.tiroir_videos || [])
|
|
.map((tiroir_item_video) => {
|
|
const id = getYoutubeId(tiroir_item_video?.lien_youtube)
|
|
if (!id) return null
|
|
|
|
return {
|
|
id: tiroir_item_video.id || id,
|
|
lien_youtube: `https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&iv_load_policy=3&playsinline=1`,
|
|
}
|
|
})
|
|
.filter(Boolean),
|
|
}))
|
|
)
|
|
|
|
function getYoutubeId(url = "") {
|
|
try {
|
|
const u = new URL(url)
|
|
if (u.hostname.includes("youtu.be")) return u.pathname.slice(1)
|
|
if (u.pathname.startsWith("/shorts/")) return u.pathname.split("/")[2]
|
|
if (u.pathname.startsWith("/embed/")) return u.pathname.split("/")[2]
|
|
return u.searchParams.get("v")
|
|
} catch {
|
|
return null
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// =======================
|
|
// SPÉCIFIQUE À CETTE PAGE
|
|
// =======================
|
|
.particulier--page {
|
|
.chiffres_wp {
|
|
background-color: var(--c-background-vert);
|
|
margin-bottom: 50px;
|
|
}
|
|
.fiche_description {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-bottom: 10px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
> * {
|
|
max-width: 640px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
.contact_spe_wp {
|
|
background-color: var(--c-background-jaune-clair);
|
|
margin-top: 50px;
|
|
margin-bottom: 40px;
|
|
}
|
|
}
|
|
|
|
/* ============================ */
|
|
/* GALERIES */
|
|
/* ============================ */
|
|
|
|
|
|
|
|
</style>
|