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"
          />

          <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" />
          </div>
          <div
            class="carousel-button"
            @click="goNext"
          >
            <i class="fas fa-chevron-right" />
          </div>
        </div>
      </v-col>

      <v-col cols="10">
        <Carousel
          ref="carousel"
          :items-to-show="3.5"
          :items-to-scroll="1"
        >
          <Slide
            v-for="(actu, index) in actus"
            :key="index"
            class="slide-card"
          >
            <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 carousel = ref(null);

const goPrevious = () => {
  carousel.value.prev();
};

const goNext = () => {
  carousel.value.next();
};

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",
  },
]);
</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;
  height: 100%;
}

.card-img-top {
  border-radius: 15px 15px 0 0;
  width: 100%;
  height: 100%;
  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>