|
|
@@ -0,0 +1,507 @@
|
|
|
+<template>
|
|
|
+ <LayoutContainer>
|
|
|
+ <LayoutNavigation />
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12">
|
|
|
+ <div class="banner-container">
|
|
|
+ <img src="/images/actu/pub.png" alt="line" class="cover-image" />
|
|
|
+ </div>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+ <div v-if="actu">
|
|
|
+ <v-col>
|
|
|
+ <div class="d-flex align-items-center ml-12">
|
|
|
+ <div class="carousel-button">
|
|
|
+ <i class="fa-solid fa-arrow-left" />
|
|
|
+ </div>
|
|
|
+ <nuxt-link to="/actualites" class="ml-2 back-button mt-12">
|
|
|
+ Retour aux actualités
|
|
|
+ </nuxt-link>
|
|
|
+ </div>
|
|
|
+ </v-col>
|
|
|
+
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="6">
|
|
|
+ <v-img>
|
|
|
+ <img :src="getImageUrl(actu.attachment)" class="image-actu" />
|
|
|
+ </v-img>
|
|
|
+ </v-col>
|
|
|
+
|
|
|
+ <v-col cols="6">
|
|
|
+ <h4 class="title-actu">{{ actu.title }}</h4>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <v-row>
|
|
|
+ <p class="description-actu">
|
|
|
+ {{ actu.bodyText }}
|
|
|
+ </p>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <v-row class="d-flex justify-center align-center">
|
|
|
+ <v-btn class="btn mb-12" text>
|
|
|
+ <v-icon class="fas fa-info mr-2"></v-icon>En savoir plus
|
|
|
+ </v-btn>
|
|
|
+ </v-row>
|
|
|
+ </div>
|
|
|
+ <v-row class="d-flex justify-space-between">
|
|
|
+ <p class="share ml-6">MOTS CLÉS</p>
|
|
|
+ <div>
|
|
|
+ <p class="share mr-6">PARTAGER</p>
|
|
|
+ </div>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <v-row class="d-flex justify-space-between mb-8">
|
|
|
+ <p class="key-word mt-3 ml-6">ROCK CONCERT FESTIVAL</p>
|
|
|
+ <div class="social-icons mr-6">
|
|
|
+ <a href="https://facebook.com" target="_blank" class="social-icon">
|
|
|
+ <i class="fa-brands fa-facebook"></i>
|
|
|
+ </a>
|
|
|
+ <a href="https://twitter.com" target="_blank" class="social-icon">
|
|
|
+ <i class="fa-brands fa-twitter"></i>
|
|
|
+ </a>
|
|
|
+ <a href="https://messenger.com" target="_blank" class="social-icon">
|
|
|
+ <i class="fa-brands fa-facebook-messenger"></i>
|
|
|
+ </a>
|
|
|
+ <a href="https://instagram.com" target="_blank" class="social-icon">
|
|
|
+ <i class="fa-brands fa-instagram"></i>
|
|
|
+ </a>
|
|
|
+ <a href="https://linkedin.com" target="_blank" class="social-icon">
|
|
|
+ <i class="fa-brands fa-linkedin"></i>
|
|
|
+ </a>
|
|
|
+ <a href="mailto:example@example.com" class="social-icon">
|
|
|
+ <i class="fa-solid fa-envelope"></i>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <v-row class="container-green">
|
|
|
+ <v-col cols="12">
|
|
|
+ <div class="d-flex justify-center align-center">
|
|
|
+ <div class="carousel-button" @click="goPrevious">
|
|
|
+ <i class="fas fa-chevron-left" />
|
|
|
+ </div>
|
|
|
+ <div class="carousel-button" @click="goNext">
|
|
|
+ <i class="fas fa-chevron-right" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <Carousel ref="carousel" :items-to-show="3" :items-to-scroll="2">
|
|
|
+ <Slide
|
|
|
+ v-for="(event, index) in events"
|
|
|
+ :key="index"
|
|
|
+ class="slide-card"
|
|
|
+ >
|
|
|
+ <div class="card">
|
|
|
+ <img class="card-img-top" :src="event.img" alt="Card image cap" />
|
|
|
+ <div class="card-body">
|
|
|
+ <small class="card-rdv">{{ event.rdv }}</small>
|
|
|
+ <h5 class="card-title">
|
|
|
+ {{ event.title }}
|
|
|
+ </h5>
|
|
|
+ <p class="card-localisation">
|
|
|
+ {{ event.localisation }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card-footer">
|
|
|
+ <v-chip-group active-class="primary--text" column>
|
|
|
+ <v-chip
|
|
|
+ v-for="(tag, indexTag) in event.tags"
|
|
|
+ :key="indexTag"
|
|
|
+ class="ma-2 chip-custom"
|
|
|
+ :color="tagColor(tag)"
|
|
|
+ label
|
|
|
+ >
|
|
|
+ <span :class="tagTextColor(tag)">{{ tag }}</span>
|
|
|
+ </v-chip>
|
|
|
+ </v-chip-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Slide>
|
|
|
+ </Carousel>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+ </LayoutContainer>
|
|
|
+ <LayoutPrefooter />
|
|
|
+ <LayoutFooter />
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref } from "vue";
|
|
|
+import { Carousel, Slide } from "vue3-carousel";
|
|
|
+import { useRoute } from "vue-router";
|
|
|
+import "vue3-carousel/dist/carousel.css";
|
|
|
+import { useMaestroRequestService } from "~/composables/useMaestroRequestService";
|
|
|
+const { apiRequestService } = useMaestroRequestService();
|
|
|
+
|
|
|
+const actu = ref(null);
|
|
|
+const route = useRoute();
|
|
|
+const newsId = route.params.id;
|
|
|
+const pending = ref(true);
|
|
|
+// data event list using lazy loading
|
|
|
+onMounted(async () => {
|
|
|
+ try {
|
|
|
+ actu.value = await apiRequestService.get(
|
|
|
+ `https://local.maestro.opentalent.fr/api/news/${newsId}`
|
|
|
+ );
|
|
|
+ pending.value = false;
|
|
|
+ } catch (error) {
|
|
|
+ console.error("Erreur lors de la récupération de l'actualité", error);
|
|
|
+ pending.value = false;
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const getImageUrl = (attachment: string) => {
|
|
|
+ if (attachment) {
|
|
|
+ return `https://local.maestro.opentalent.fr/uploads/news/${attachment}`;
|
|
|
+ }
|
|
|
+ console.log("pas d'image");
|
|
|
+ return "/images/actu/image.png";
|
|
|
+};
|
|
|
+
|
|
|
+const tagColor = (tag) => {
|
|
|
+ switch (tag) {
|
|
|
+ case "Payant":
|
|
|
+ return "red";
|
|
|
+ case "Gratuit":
|
|
|
+ return "green";
|
|
|
+ default:
|
|
|
+ return "primary";
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const tagTextColor = (tag) => {
|
|
|
+ switch (tag) {
|
|
|
+ case "Payant":
|
|
|
+ return "red--text";
|
|
|
+ case "Gratuit":
|
|
|
+ return "green--text";
|
|
|
+ default:
|
|
|
+ return "white--text";
|
|
|
+ }
|
|
|
+};
|
|
|
+const events = ref([
|
|
|
+ {
|
|
|
+ rdv: "20h00",
|
|
|
+ title: "LA NUIT DES RÊVES ",
|
|
|
+ localisation: "FESTIVALDE musique - LONGCHAMP",
|
|
|
+ date: "21/06/2023",
|
|
|
+ img: "/images/agenda/agenda2.jpg",
|
|
|
+ tags: ["Festival", "Musique", "Tout public", "Payant"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ rdv: "20h00",
|
|
|
+ title: "LE LAC DES CYGNES",
|
|
|
+ localisation: "SPECTACLE DE DANSE - PARIS 1",
|
|
|
+ date: "22/06/2023",
|
|
|
+ img: "/images/agenda/agenda3.jpg",
|
|
|
+ tags: ["Festival", "Musique", "Tout public", "Gratuit"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ rdv: "20h00",
|
|
|
+ title: "SOLIDAYS 2023 : 23 > 25 juin",
|
|
|
+ localisation: "ORCHESTRE DE PARIS - PARIS 12",
|
|
|
+ date: "23/06/2023",
|
|
|
+ img: "/images/agenda/agenda4.jpg",
|
|
|
+ tags: ["Festival", "Musique", "Tout public", "Payant"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ rdv: "20h00",
|
|
|
+ title: "LE LAC DES CYGNES",
|
|
|
+ localisation: "FESTIVALDE musique - LONGCHAMP",
|
|
|
+ date: "24/06/2023",
|
|
|
+ img: "/images/agenda/agenda5.jpg",
|
|
|
+ tags: ["Festival", "Musique", "Tout public", "Payant"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ rdv: "20h00",
|
|
|
+ title: "SOLIDAYS 2023 : 23 > 25 juin ",
|
|
|
+ localisation: "SPECTACLE DE DANSE - PARIS 1",
|
|
|
+ date: "20/06/2023",
|
|
|
+ img: "/images/agenda/agenda1.jpg",
|
|
|
+ tags: ["Festival", "Musique", "Tout public", "Payant"],
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+let carousel;
|
|
|
+
|
|
|
+const goPrevious = () => carousel.prev();
|
|
|
+const goNext = () => carousel.next();
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.banner-container {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-start;
|
|
|
+ height: 25rem;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.cover-image {
|
|
|
+ width: 95%;
|
|
|
+ height: auto;
|
|
|
+ object-fit: cover;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.btn {
|
|
|
+ background: var(--Vert-60, #64afb7);
|
|
|
+ display: flex;
|
|
|
+ left: 0;
|
|
|
+ padding: 25px 28px;
|
|
|
+ align-items: center;
|
|
|
+ gap: 9px;
|
|
|
+ color: var(--NEUTRAL---BLANC, #fff);
|
|
|
+ font-family: Barlow;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 15px;
|
|
|
+ letter-spacing: 1.3px;
|
|
|
+ text-transform: uppercase;
|
|
|
+ margin-bottom: -1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.green--text {
|
|
|
+ color: green;
|
|
|
+}
|
|
|
+
|
|
|
+.red--text {
|
|
|
+ color: red;
|
|
|
+}
|
|
|
+.black--text {
|
|
|
+ color: black;
|
|
|
+}
|
|
|
+.btn-news {
|
|
|
+ color: #9edbdd;
|
|
|
+ border-radius: 2rem;
|
|
|
+ font-family: "Barlow";
|
|
|
+ background: transparent;
|
|
|
+ border: 1px solid #9edbdd;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 600;
|
|
|
+ text-transform: uppercase;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ padding: 25px;
|
|
|
+ font-size: 10px;
|
|
|
+ line-height: 15px;
|
|
|
+}
|
|
|
+.chip-detail {
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+.chip-custom {
|
|
|
+ color: white;
|
|
|
+ border: 1px solid white;
|
|
|
+ border-radius: 3rem;
|
|
|
+ text-transform: uppercase;
|
|
|
+ font-family: "Barlow";
|
|
|
+ font-style: normal;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.card-localisation {
|
|
|
+ letter-spacing: 0.18em;
|
|
|
+ text-transform: uppercase;
|
|
|
+ font-size: 10px;
|
|
|
+ color: #112528;
|
|
|
+}
|
|
|
+.card {
|
|
|
+ border-radius: 15px 15px 0 0;
|
|
|
+ margin-bottom: 2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.icon-title {
|
|
|
+ color: #64afb7;
|
|
|
+ margin-top: 4.5rem;
|
|
|
+}
|
|
|
+.container-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 2rem;
|
|
|
+ margin-top: 4.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.carousel-button i {
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+.card-text {
|
|
|
+ font-family: "Barlow";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 18px;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+.card-title {
|
|
|
+ font-family: "Barlow";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 24px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ letter-spacing: 0.18em;
|
|
|
+ text-transform: uppercase;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+.card-date {
|
|
|
+ font-size: 0.8em;
|
|
|
+ color: #888;
|
|
|
+ margin-left: 1rem;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.card-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.card-body {
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ margin-left: 1rem;
|
|
|
+ font-family: "Barlow";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #fff !important;
|
|
|
+ color: #112528;
|
|
|
+}
|
|
|
+
|
|
|
+.card-img-top {
|
|
|
+ border-radius: 9px 9px 0 0;
|
|
|
+ width: 100%;
|
|
|
+ object-fit: 90%;
|
|
|
+ object-position: center;
|
|
|
+ width: 384px;
|
|
|
+ height: 247.11px;
|
|
|
+}
|
|
|
+
|
|
|
+.title,
|
|
|
+.carousel-button,
|
|
|
+.btn-news {
|
|
|
+ margin-top: 2rem;
|
|
|
+ margin-bottom: 2rem;
|
|
|
+}
|
|
|
+.agenda-details {
|
|
|
+ font-family: "Barlow";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 300;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-left: 2rem;
|
|
|
+ color: #091d20;
|
|
|
+ margin-bottom: 3rem;
|
|
|
+ width: 15rem;
|
|
|
+}
|
|
|
+.title {
|
|
|
+ font-family: "Barlow";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 42px;
|
|
|
+ line-height: 42px;
|
|
|
+ margin-left: 2rem;
|
|
|
+ color: #071b1f;
|
|
|
+}
|
|
|
+
|
|
|
+.carousel-button {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background-color: transparent;
|
|
|
+ border: 2px solid #000000;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.container-green {
|
|
|
+ background-color: #0e2d32;
|
|
|
+}
|
|
|
+
|
|
|
+.back-button {
|
|
|
+ text-decoration: none;
|
|
|
+ color: #000000;
|
|
|
+ font-family: Barlow;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 15px;
|
|
|
+ letter-spacing: 1.8px;
|
|
|
+ text-transform: uppercase;
|
|
|
+}
|
|
|
+
|
|
|
+.image-actu {
|
|
|
+ width: 80%;
|
|
|
+ margin-left: 3.5rem;
|
|
|
+ margin-right: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.title-actu {
|
|
|
+ margin-top: 11rem;
|
|
|
+ text-decoration: none;
|
|
|
+ text-transform: uppercase;
|
|
|
+ font-family: Barlow;
|
|
|
+ font-size: 36px;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.description-actu {
|
|
|
+ color: #0e2d32;
|
|
|
+ text-align: justify;
|
|
|
+ font-family: Barlow;
|
|
|
+ font-size: 30px;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 34px;
|
|
|
+ margin-left: 3.5rem;
|
|
|
+ margin-right: 3.5rem;
|
|
|
+ margin-bottom: 3rem;
|
|
|
+}
|
|
|
+
|
|
|
+.share {
|
|
|
+ color: #000;
|
|
|
+ font-family: Barlow;
|
|
|
+ font-size: 26px;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 28px;
|
|
|
+}
|
|
|
+
|
|
|
+.social-icons {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.social-icon i {
|
|
|
+ font-size: 1.9em;
|
|
|
+ margin-left: .5rem;
|
|
|
+ margin-top: .5rem
|
|
|
+}
|
|
|
+
|
|
|
+.key-word{
|
|
|
+ color: #000;
|
|
|
+font-family: Barlow;
|
|
|
+font-size: 20px;
|
|
|
+font-style: normal;
|
|
|
+font-weight: 500;
|
|
|
+line-height: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.title-other{
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+</style>
|
Maha Bouchiba