static image actualites

pages/actualites/[id].vue

@@ -1,26 +1,30 @@
 <template>
+  <LayoutNavigation />
   <LayoutContainer>
-    <LayoutNavigation />
     <v-row>
       <v-col cols="12">
-        <div class="banner-container">
-          <img src="/images/actu/pub.png" alt="line" class="cover-image" />
-        </div>
+        <CommonBanner :imageSrc="'/images/actu/pub.png'" imageAlt="'line'" />
       </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">
+      <v-row class="custom-row">
+        <v-col>
+        <div class="d-flex align-items-center">
+          <NuxtLink to="/actualites" style="text-decoration: none !important;">
+            <div class="carousel-button">
+              <i class="fa-solid fa-arrow-left" />
+            </div>
+          </NuxtLink>
+          <NuxtLink to="/actualites" class="ml-2 back-button mt-12">
             Retour aux actualités
-          </nuxt-link>
+          </NuxtLink>
         </div>
       </v-col>
+      </v-row>
+
 
-      <v-row>
+      <v-row class="custom-row">
         <v-col cols="6">
           <v-img>
             <img :src="getImageUrl(actu.attachment)" class="image-actu" />
@@ -32,10 +36,8 @@
         </v-col>
       </v-row>
 
-      <v-row>
-        <p class="description-actu">
-          {{ plainText }}
-        </p>
+      <v-row class="custom-row">
+        <p v-html="actu.bodyText" class="description-actu"></p>
       </v-row>
 
       <v-row class="d-flex justify-center align-center">
@@ -44,14 +46,14 @@
         </v-btn>
       </v-row>
     </div>
-    <v-row class="d-flex justify-space-between">
+    <v-row class="d-flex justify-space-between custom-row">
       <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">
+    <v-row class="d-flex justify-space-between mb-8 custom-row">
       <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">
@@ -78,11 +80,19 @@
     <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
+            class="carousel-button"
+            @click="goPrevious"
+            style="border: 2px solid #fff !important"
+          >
+            <i class="fas fa-chevron-left" style="color: white" />
           </div>
-          <div class="carousel-button" @click="goNext">
-            <i class="fas fa-chevron-right" />
+          <div
+            class="carousel-button"
+            @click="goNext"
+            style="border: 2px solid #fff !important"
+          >
+            <i class="fas fa-chevron-right" style="color: white" />
           </div>
         </div>
         <Carousel ref="carousel" :items-to-show="3" :items-to-scroll="2">
@@ -122,7 +132,7 @@
       </v-col>
     </v-row>
   </LayoutContainer>
-  <LayoutPrefooter />
+  <LayoutFooterPrefooter />
   <LayoutFooter />
 </template>
 
@@ -138,11 +148,12 @@ const actu = ref(null);
 const route = useRoute();
 const newsId = route.params.id;
 const pending = ref(true);
-// data event list using lazy loading
+const config = useRuntimeConfig();
+
 onMounted(async () => {
   try {
     actu.value = await apiRequestService.get(
-      `https://local.maestro.opentalent.fr/api/news/${newsId}`
+      `${config.public.apiBaseUrl}/api/news/${newsId}`
     );
     pending.value = false;
   } catch (error) {
@@ -153,10 +164,9 @@ onMounted(async () => {
 
 const getImageUrl = (attachment: string) => {
   if (attachment) {
-    return `https://local.maestro.opentalent.fr/uploads/news/${attachment}`;
+    return `${config.public.apiBaseUrl}/uploads/news/${attachment}`;
   }
   console.log("pas d'image");
-  return "/images/actu/image.png";
 };
 const plainText = computed(() => {
   let doc = new DOMParser().parseFromString(actu.value?.bodyText, "text/html");
@@ -233,22 +243,26 @@ 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%;
+.custom-row{
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
 }
-.cover-image {
-  width: 95%;
-  height: auto;
-  object-fit: cover;
-  margin: 0 auto;
-  display: block;
+:deep().text-left,
+:deep().text-right,
+:deep().description-square,
+:deep().black-square,
+:deep().blue-square {
+  display: none;
+}
+:deep().text-right {
+  display: none;
+}
+
+:deep().cover-image {
+  transform: none;
 }
 
 .btn {
@@ -316,7 +330,7 @@ const goNext = () => carousel.next();
   letter-spacing: 0.18em;
   text-transform: uppercase;
   font-size: 10px;
-  color: #112528;
+  color: white;
 }
 .card {
   border-radius: 15px 15px 0 0;
@@ -466,7 +480,7 @@ const goNext = () => carousel.next();
 .description-actu {
   color: #0e2d32;
   text-align: justify;
-  font-family: Barlow;
+  font-family: "Barlow";
   font-size: 30px;
   font-style: normal;
   font-weight: 500;
@@ -494,6 +508,7 @@ const goNext = () => carousel.next();
   font-size: 1.9em;
   margin-left: 0.5rem;
   margin-top: 0.5rem;
+  color: #0e2d32;
 }
 
 .key-word {

pages/actualites/index.vue

@@ -139,8 +139,9 @@ const updatePage = (newPage: number) => {
 };
 
 const query = computed(() => {
-  const queryParams: { page: number; [key: string]: number | string } = {
+  const queryParams: { page: number; type?: string; [key: string]: number | string } = {
     page: page.value,
+    type: 'ENTREPRISE' 
   };
 
   return queryParams;
@@ -153,14 +154,14 @@ const {
   pending,
   refresh,
 } = useLazyAsyncData("files", async () => {
-  const response = await apiRequestService.get(
-    baseUrl,
-    query.value
-  );
+  const response = await apiRequestService.get(baseUrl, query.value);
   const collection = response["hydra:member"];
-  totalItems.value = response["hydra:totalItems"];
-  console.log(collection);
-  return collection;
+  
+  const filteredNews = collection.filter(item => item.type === 'ENTREPRISE');
+  
+  totalItems.value = filteredNews.length;
+  console.log(filteredNews);
+  return filteredNews;
 });
 
 watch(page, () => {