wondif_vue/app/pages/orchestre/missions.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="md" 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_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 -->
        <!-- ================== -->
        <PageSection tone="" content-size="default" padded_size="md" class="fiche_description">
          <SectionContent v-if="missions?.partie_3" class="description_wp">
            <StrapiBlocksConvert :blocks="missions.partie_3" />
          </SectionContent>
        </PageSection>



      <!-- ================== -->
      <!-- decalage_droite_clic_4 -->
      <!-- ================== -->
      <PageSection :content="false">
        <Decalage tone="brand" title-tone="invert" position="right" 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>
          <div id="texte_cache" class="decalage_ensavoirplus--hidden">Texte caché</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éficiares 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;
  }
}

</style>