site_logiciels/components/Home/News.vue

<template>
  <LayoutContainer>
    <v-row>
      <v-col cols="6">
        <div class="container-title">
          <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>

        <h6 class="small-title">Découvrez nos dernières actualités</h6>
      </div>
        <h2 class="title">Quoi de neuf ?</h2>
      </v-col>

      <v-col cols="6">
        <v-btn class="btn-news" text>VOIR TOUTES LES ACTUALITÉS</v-btn>
      </v-col>
    </v-row>

    <v-row>
        <v-col cols="2">
          <div class="d-flex justify-center align-center">
            <div class="carousel-button" @click="goPrevious">
          <i class="fas fa-chevron-left"></i>
        </div>
        <div class="carousel-button" @click="goNext">
          <i class="fas fa-chevron-right"></i>
        </div>
          </div>

      </v-col>

      <v-col cols="10">
        <Carousel  :itemsToShow="3.5" :itemsToScroll="1" v-slot="{ carousel: _carousel }" ref="carousel">
        <Slide class="slide-card" v-for="(actu, index) in actus" :key="index">
          <div class="card ">
            <img class="card-img-top" :src="actu.img" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">{{ actu.title }}</h5>
              <p class="card-text">{{ actu.content }}</p>
            </div>
            
            <div class="card-footer">
              <p class="card-date">{{ actu.date }}</p>
              <button class="card-button">+</button>
            </div>
          </div>
        </Slide>
      </Carousel>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup>
import { ref } from 'vue';
import { Carousel, Slide } from 'vue3-carousel';
import 'vue3-carousel/dist/carousel.css';

const actus = ref([
  { title: 'Suivi Pédagogique', content: 'Sed laeditur hic coetuum magnificus', date: '20/06/2023', img: '/images/actu/actu1.jpg' },
  { title: 'AMÉLIORATION DU RÉPERTOIRE', content: 'Sed laeditur hic coetuum magnificus', date: '21/06/2023', img: '/images/actu/actu2.jpg' },
  { title: 'fOIRE AUX QUESTIONS', content: 'Sed laeditur hic coetuum magnificus', date: '22/06/2023', img: '/images/actu/actu3.jpg' },
  { title: 'Suivi Pédagogique', content: 'Sed laeditur hic coetuum magnificus', date: '23/06/2023', img: '/images/actu/actu4.jpg' },
  { title: 'Actu 1', content: 'Sed laeditur hic coetuum magnificus gegr', date: '24/06/2023', img: '/images/actu/actu5.jpg' },
  { title: 'Actu 2', content: 'Sed laeditur hic coetuum magnificus', date: '25/06/2023', img: '/images/actu/actu6.jpg' },
  { title: 'Actu 3', content: 'Sed laeditur hic coetuum magnificus', date: '26/06/2023', img: '/images/actu/actu1.jpg' },
  { title: 'Suivi Pédagogique', content: 'Sed laeditur hic coetuum magnificus', date: '27/06/2023', img: '/images/actu/actu2.jpg' }
]);

let carousel;

const goPrevious = () => carousel.prev();
const goNext = () => carousel.next();

</script>

<style scoped>

.card {
  border: 0.5px solid #C4C4C4;
  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 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: 2px solid #000000;
  cursor: pointer;
  margin-right: 1rem;
  margin-top: 4rem;
}

.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: #091D20;
}
.card-title{
  font-family: 'Barlow';
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-top: 1rem;
margin-bottom: 1rem;
}
.card-date {
  font-size: 0.8em;
  color: #888;
  margin-left: 1rem;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.card-body {
  text-align: left;
  margin-bottom:1rem ;
  margin-left: 1rem;
}


.card-button {
  background-color: transparent;
  border: none;
  width: 2.5rem;
  font-size: 1.5em;
  text-align: right;
  color: #ffffff;
  background-color: #64AFB7;;
  border: none;
  text-align: center;
  
}
.slide-card{
  margin-left: 1rem;
  margin-right: 1rem;

}

.card-img-top {
  border-radius: 15px 15px 0 0;
  width: 100%;
  height: 90%;
  object-fit: cover;
  object-position: center; 
}
.small-title {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  width: 12rem;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-left: 2rem;
  color: #071b1f;
  margin-top: 4.5rem;
}

.title {
  margin-top: 2rem;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 42px;
  line-height: 42px;
  margin-left: 2rem;
  color: #071b1f;
  margin-bottom: 2rem;
}

.btn-news {
  color: #9edbdd;
  margin-left: 25rem;
  margin-top: 8rem;
  top: 6rem;
  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;
}
</style>