generated from gitea_admin/default
dev
This commit is contained in:
182
app/pages/orchestre/actus copie.vue
Normal file
182
app/pages/orchestre/actus copie.vue
Normal 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>
|
||||
Reference in New Issue
Block a user