site_logiciels/components/Logiciels/Artist/Premium.vue

<template>
  <LayoutContainer>
    <h6 class="subtitle">Comparatif de nos solutions</h6>
    <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>Standard</p>
            <p>A partir de 44,10 ttc /mois</p>
          </th>
          <th class="thead">
            <p>Premium</p>
            <p>A partir de 60,20 ttc /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">{{ row.column1 }}</td>
          <td>{{ row.column2 }}</td>
          <td>{{ row.column3 }}</td>
          <td>{{ row.column4 }}</td>
        </tr>
      </tbody>
    </table>
  </LayoutContainer>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          column1: "Donnée 1",
          column2: "Donnée 2",
          column3: "Donnée 3",
          column4: "Donnée 4",
        },
        {
          id: 2,
          column1: "Donnée 5",
          column2: "Donnée 6",
          column3: "Donnée 7",
          column4: "Donnée 8",
        },
        {
          id: 3,
          column1: "Donnée 9",
          column2: "Donnée 10",
          column3: "Donnée 11",
          column4: "Donnée 12",
        },
        {
          id: 4,
          column1: "Donnée 13",
          column2: "Donnée 14",
          column3: "Donnée 15",
          column4: "Donnée 16",
        },
        {
          id: 5,
          column1: "Donnée 17",
          column2: "Donnée 18",
          column3: "Donnée 19",
          column4: "Donnée 20",
        },
        {
          id: 6,
          column1: "Donnée 21",
          column2: "Donnée 22",
          column3: "Donnée 23",
          column4: "Donnée 24",
        },
        {
          id: 7,
          column1: "Donnée 25",
          column2: "Donnée 26",
          column3: "Donnée 27",
          column4: "Donnée 28",
        },
        {
          id: 8,
          column1: "Donnée 29",
          column2: "Donnée 30",
          column3: "Donnée 31",
          column4: "Donnée 32",
        },
        {
          id: 9,
          column1: "Donnée 33",
          column2: "Donnée 34",
          column3: "Donnée 35",
          column4: "Donnée 36",
        },
        {
          id: 10,
          column1: "Donnée 37",
          column2: "Donnée 38",
          column3: "Donnée 39",
          column4: "Donnée 40",
        },
        {
          id: 11,
          column1: "Donnée 41",
          column2: "Donnée 42",
          column3: "Donnée 43",
          column4: "Donnée 44",
        },
      ],
    };
  },
};
</script>

<style scoped>

.subtitle {
  font-size: 1.5rem;
  font-weight: 400;
  margin-left: 9rem;
}

.title{
  font-size: 1.5rem;
  font-weight: 400;
  margin-left: 9rem;
}

.thead {
  background-color: #fff;
  height: 8rem;
  font-family: 'Barlow';
font-style: normal;
font-weight: 400;
font-size: 30px;
line-height: 34px;
}
.table-comparatif {
  width: 74rem;
  margin-top: 1rem;
  margin-left: 15rem;
  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: rgba(250, 194, 10, 0.2);
}

</style>