This commit is contained in:
2026-05-20 00:45:23 +02:00
parent fb6a0c7968
commit 107093f7bb
16 changed files with 866 additions and 22 deletions

View File

@@ -0,0 +1,182 @@
<template>
<div class="actus--page">
<!-- ================== -->
<!-- FILS D'ARIANE -->
<!-- ================== -->
<PageSection tone="" content-size="default" class="breadcrum_wp">
<Breadcrumb/>
</PageSection>
<!-- ================== -->
<!-- EN-TêTE -->
<!-- ================== -->
<PageSection padded_size="md" position="relative" overflow="hidden" class="">
<SectionContent>
<SectionTitle tone="" pad="xs">
ACTUALITÉS
</SectionTitle>
</SectionContent>
</PageSection>
<!-- ================== -->
<!-- LISTE DES ACTUS -->
<!-- ================== -->
<PageSection padded_size="md" position="relative" overflow="hidden" class="">
<SectionContent>
<div class="grid_3">
<article class="card">
<div class="card--img">
<DsMedia :src="imgSrc" :alt="imgAlt" ratio="square" />
</div>
<div class="card--content">
<h2>Titre</h2>
<p>Description</p>
</div>
</article>
<article class="card">
<div class="card--img">
<DsMedia :src="imgSrc" :alt="imgAlt" ratio="square" />
</div>
<div class="card--content">
<h2>Titre</h2>
<p>Description</p>
</div>
</article>
<article class="card">
<div class="card--img">
<DsMedia :src="imgSrc" :alt="imgAlt" ratio="square" />
</div>
<div class="card--content">
<h2>Titre</h2>
<p>Description</p>
</div>
</article>
<article class="card">
<div class="card--img">
<DsMedia :src="imgSrc" :alt="imgAlt" ratio="square" />
</div>
<div class="card--content">
<h2>Titre</h2>
<p>Description</p>
</div>
</article>
<article class="card">
<div class="card--img">
<DsMedia :src="imgSrc" :alt="imgAlt" ratio="square" />
</div>
<div class="card--content">
<h2>Titre</h2>
<p>Description</p>
</div>
</article>
<article class="card">
<div class="card--img">
<DsMedia :src="imgSrc" :alt="imgAlt" ratio="square" />
</div>
<div class="card--content">
<h2>Titre</h2>
<p>Description</p>
</div>
</article>
<article class="card">
<div class="card--img">
<DsMedia :src="imgSrc" :alt="imgAlt" ratio="square" />
</div>
<div class="card--content">
<h2>Titre</h2>
<p>Description</p>
</div>
</article>
<article class="card">
<div class="card--img">
<DsMedia :src="imgSrc" :alt="imgAlt" ratio="square" />
</div>
<div class="card--content">
<h2>Titre</h2>
<p>Description</p>
</div>
</article>
<article class="card">
<div class="card--img">
<DsMedia :src="imgSrc" :alt="imgAlt" ratio="square" />
</div>
<div class="card--content">
<h2>Titre</h2>
<p>Description</p>
</div>
</article>
</div>
</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 { computed } from 'vue'
// ======================================
// RÉCUPÉRATION DES DONNÉES DANS STRAPI
// ======================================
// ======================================
// PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
// ======================================
const imgSrc= '/contenus/pablo_gonzalez.jpg'
</script>
<style lang="scss">
// =======================
// SPÉCIFIQUE À CETTE PAGE
// =======================
.actus--page {
.grid_3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 4%;
}
.card {
display: flex;
background: white;
&--content {
background: #e5e5e5;
}
}
.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;
}
}
.strapi-blocks {
h2 {
color: var(--c-bleu);
}
}
}
/* ============================ */
/* GALERIES */
/* ============================ */
</style>