site_logiciels/components/JoinUs/Missions.vue

<template>
  <LayoutContainer>
    <div class="mission-container" v-for="(job, index) in jobs" :key="index">
      <v-row>
        <v-col cols="2">
          <v-img class="logo-img" :src="job.image"></v-img>
        </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
            class="ma-2"
            v-for="(property, index) in job.properties"
            :key="index"
          >
            <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>
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>