site_logiciels/components/Logiciels/School/Premium.vue

<template>
  <div id="Comparatif">
    <LayoutContainer>
      <div class="d-flex justify-center align-center">
        <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
        <h5 class="subtitle">Découvrez les avantages de la solution</h5>
      </div>

      <h3 class="title">Et si vous passiez à la version Premium</h3>
      <table class="table-comparatif">
        <thead>
          <tr>
            <th class="thead"></th>
            <th class="thead"></th>
            <th class="thead">
              <p class="standard">Standard</p>
              <p class="from">A partir de </p>
              <p class="price">44,10 <span class="ttc">ttc</span> </p>
              <p class="month">/mois</p>
            </th>
            <th class="thead premium-column">
              <p class="standard">Premium</p>
              <p class="from">A partir de </p>
              <p class="price">60,20 <span class="ttc">ttc</span> </p>
              <p class="month">/mois</p>
            </th>
          </tr>
        </thead>
        <tbody class="table-body">
          <tr v-for="row in tableData" :key="row.id" class="table-row">
            <td class="table-data table-data-left">{{ row.column1 }}</td>
            <td class="table-data ">{{ row.column2 }}</td>
            <td class="table-data-second">
              <v-icon
                size="15"
                class="far fa-check-circle"
                v-if="row.column3 == 'check'"
              ></v-icon>
              <span v-else>{{ row.column3 }}</span>
            </td >
            <td class="table-data-second ">
              <v-icon
                size="15"
                class="far fa-check-circle"
                v-if="row.column4 == 'check'"
              ></v-icon>
              <span v-else>{{ row.column4 }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </LayoutContainer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          column1: "Espace mémoire",
          column2: "Stockage disponible",
          column3: "1 Go",
          column4: "2 Go",
        },
        {
          id: 2,
          column1: "Administration",
          column2: "Compte Internet avec gestion des droits",
          column3: "150",
          column4: "300",
        },
        {
          id: 3,
          column1: "",
          column2: "Gestion des rôles",
          column3: "check",
          column4: "check",
        },
        {
          id: 4,
          column1: "",
          column2: "Gestion du bureau et du CA",
          column3: "check",
          column4: "check",
        },
        {
          id: 5,
          column1: "",
          column2: "Gestion des commissions",
          column3: "check",
          column4: "check",
        },
        {
          id: 6,
          column1: "gestion des membres",
          column2: "",
          column3: "check",
          column4: "check",
        },
        {
          id: 7,
          column1: "",
          column2: "Tuteurs pour les mineurs",
          column3: "check",
          column4: "check",
        },
        {
          id: 8,
          column1: "gestion des élèves",
          column2: "Nombre d’élève maximum",
          column3: "check",
          column4: "check",
        },
        {
          id: 9,
          column1: "",
          column2: "Fiche élève avec gestion des tuteurs",
          column3: "check",
          column4: "check",
        },
        {
          id: 10,
          column1: "",
          column2: "Corus suivi",
          column3: "check",
          column4: "check",
        },
        {
          id: 11,
          column1: "",
          column2: "Suivi pédagogique",
          column3: "check",
          column4: "check",
        },
      ],
    };
  },
};
</script>
.
<style scoped>

.table-data-second {
  padding-right: 5rem;
}
.standard{
  font-family: 'Barlow';
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 16px;
text-align: center;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #0E2D32;
padding-right: 5rem;
}

.from, .ttc{
  font-family: 'Barlow';
font-style: normal;
font-weight: 300;
font-size: 12px;
line-height: 14px;
text-align: center;
color: #454545;
padding-right: 5rem;
}

.price, .month{
  font-family: 'Barlow';
font-style: normal;
font-weight: 400;
font-size: 30px;
line-height: 34px;
text-align: center;
color: #454545;
}


.month{
  padding-right: 5rem;
}

.table-data-left{
  width: 15rem;
  padding-right: 2rem;
}
.table-data {
  text-align: left;
  padding-left: 20px;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;

  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #454545;
}
.icon-title {
  color: rgba(32, 147, 190, 0.6);
}
.subtitle {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 0.9rem;
  margin-left: 0.5rem;
  margin-right: 73rem;
}

.title {
  font-size: 1.5rem;
  font-weight: 500;
  margin-left: 3rem;
  width: 27rem;
  font-family: "Barlow";
  font-size: 2.5rem;
  margin-top: 2rem;
}

.thead {
  background-color: #fff;
  height: 8rem;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 30px;
  line-height: 34px;
}
.table-comparatif {
  width: 80rem;
  margin-top: 1rem;
  margin-left: 5rem;
  margin-right: 5rem;
  border: none;
  border-collapse: collapse;
}
.table-row {
  background-color: white;
  text-align: center;
  height: 3rem;
}

.table-body .table-row:nth-child(even) {
  background-color: rgba(32, 147, 190, 0.2);
}
</style>