site_logiciels/components/JoinUs/Missions.vue

<template>
  <LayoutContainer>
    <div
      v-for="(job, jobIndex) in jobs"
      :key="jobIndex"
      class="mission-container"
    >
      <v-row>
        <v-col cols="2">
          <v-img
            class="logo-img"
            :src="job.image"
          />
        </v-col>

        <v-col cols="6">
          <v-row class="job-details">
            <h6 class="title-job">
              {{ job.title }}
            </h6>
            <h6 class="contrat-job">
              {{ job.contractType }}
            </h6>
            <h6 class="location-job">
              {{ job.location }}
            </h6>
            <p class="description-job">
              {{ job.description }}
            </p>
          </v-row>

          <v-row>
            <div class="container-btn">
              <v-btn
                class="btn-apply"
                text
              >
                Postuler
              </v-btn>
              <v-btn
                class="btn-more ml-4"
                text
              >
                En savoir plus
              </v-btn>
            </div>
          </v-row>
        </v-col>

        <v-col cols="3">
          <v-chip
            v-for="(property, propertyIndex) in job.properties"
            :key="propertyIndex"
            class="ma-2"
          >
            <span class="white--text">{{ property }}</span>
          </v-chip>
        </v-col>
      </v-row>
    </div>

    <v-row class="apply-row">
      <h3 class="apply">
        Candidature spontanée
      </h3>
      <p class="apply-now">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
        quae fugit maxime illo reiciendis excepturi laborum sed dicta impedit
        minima minus eveniet, ipsam voluptatum beatae asperiores aut accusamus
        autem magnam.
      </p>
      <v-btn class="btn-apply">
        Envoyer ma candidature
      </v-btn>
    </v-row>
  </LayoutContainer>
</template>

<script setup>
import { ref } from "vue";
const jobs = ref([
  {
    id: 1,
    image: "/images/Opentalent.png",
    title: "Assistant(e) Commercial(e) h/f",
    contractType: "CDI",
    location: "Paris",
    description:
      "Lorem ipsum dolor sit amet. At doloribus nostrum non temporibus quidem est ipsa laborum sed internos dolor in pariatur vitae. ..",
    properties: ["CDI", "Paris", "Commercial"],
  },
  {
    id: 1,
    image: "/images/Opentalent.png",
    title: "Assistant(e) Commercial(e) h/f",
    contractType: "CDI",
    location: "Paris",
    description:
      "Lorem ipsum dolor sit amet. At doloribus nostrum non temporibus quidem est ipsa laborum sed internos dolor in pariatur vitae. ..",
    properties: ["CDI", "Paris", "Commercial"],
  },
  {
    id: 1,
    image: "/images/Opentalent.png",
    title: "Assistant(e) Commercial(e) h/f",
    contractType: "CDI",
    location: "Paris",
    description:
      "Lorem ipsum dolor sit amet. At doloribus nostrum non temporibus quidem est ipsa laborum sed internos dolor in pariatur vitae. ..",
    properties: ["CDI", "Paris", "Commercial"],
  },
]);
</script>

<style scoped>
.apply-row {
  margin-top: 5rem;
  margin-bottom: 5rem;
  margin-left: 4rem;
  margin-right: 4rem;
}

.apply {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 39px;
  color: #0e2d32;
  margin-top: 5rem;
  margin-bottom: 1rem;
}

.apply-now {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 300;
  font-size: 34px;
  line-height: 40px;
  color: #091d20;
  margin-bottom: 2rem;
}
.description-job {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 40px;
  color: #091d20;
}

.btn-apply {
  background: #f4aa2a;
  border-radius: 0.5rem;
}

.btn-more {
  background: #ffffff;
  border: 0.1rem solid #f4aa2a;
  border-radius: 0.5rem;
  color: #f4aa2a;
}

.container-btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.location-job {
  font-weight: 600;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 39px;
  color: #444444;
}

.contrat-job {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 2rem;
  line-height: 39px;
  color: #444444;
}
.job-details {
  display: flex;
  flex-direction: column;
}

.title-job {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 36px;
  line-height: 1rem;
  margin-bottom: 1rem;
  color: #0e2d32;
  margin-top: 2rem;
}

.logo-img {
  width: 70%;
  height: 80%;
  margin-left: 1rem;
}

.mission-container {
  margin-top: 5rem;
  margin-bottom: 5%;
}

.mission-container:nth-child(even) {
  background: rgba(14, 45, 50, 0.3);
}
</style>