site_logiciels/components/Layout/Table/Comparatif.vue

<template>
  <LayoutContainer>
    <v-row class="row-custom">
      <table class="table-comparatif">
        <thead>
          <tr>
            <th class="thead" />
            <th class="thead">
              <p class="standard" :style="{ color: color }">Standard</p>
              <p class="from">À partir de</p>
              <p class="price">
                {{ standardPrice }} <span class="ttc">ttc</span>
              </p>
              <p class="month">/mois</p>
            </th>
            <th class="thead premium-column">
              <p class="standard" :style="{ color: color }">Premium</p>
              <p class="from">À partir de</p>
              <p class="price">
                {{ premiumPrice }} <span class="ttc">ttc</span>
              </p>
              <p class="month">/mois</p>
            </th>
          </tr>
        </thead>
        <tbody class="table-body">
          <tr
            v-for="(row, index) in tableData"
            :key="row.id"
            class="table-row"
            :style="{
              backgroundColor: index % 2 !== 0 ? stripeColor : 'white',
            }"
          >
            <td class="table-data-left">{{ row.column1 }}</td>
            <td class="table-data-second">
              <v-icon
                v-if="row.column2 === 'check'"
                size="18"
                class="far fa-check-circle"
              />
              <v-icon
                v-else-if="row.column2 === 'cross'"
                size="18"
                class="far fa-times-circle"
                color="red"
              />
              <span v-else>{{ row.column2 }}</span>
            </td>
            <td class="table-data-second">
              <v-icon
                v-if="row.column3 === 'check'"
                size="18"
                class="far fa-check-circle"
              />
              <v-icon
                v-else-if="row.column3 === 'cross'"
                size="18"
                class="far fa-times-circle"
                color="red"
              />
              <span v-else>{{ row.column3 }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </v-row>
  </LayoutContainer>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  standardPrice: {
    type: String,
    default: "32,90€",
  },
  premiumPrice: {
    type: String,
    default: "46,20€",
  },
  color: {
    type: String,
    default: "#0e2d32", 
  },
  stripeColor: {
    type: String,
    default: "rgba(32, 147, 190, 0.2)", 
  },
  tableData: {
    type: Array,
    default: () => [],
  },
});
</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;
  margin-bottom: 1rem;
}

.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;
}

.ttc {
  text-transform: uppercase;
}

.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 {
  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;
}
.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;
}

.thead {
  background-color: #fff;
  height: 8rem;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 30px;
  line-height: 34px;
}
.table-comparatif {
  width: 70%;
  margin-top: 1rem;
  margin-right: auto;
  margin-left: auto;
  border: none;
  border-collapse: collapse;
}


.table-body .table-row:nth-child(odd) {
  background-color: rgba(190, 32, 77, 0.2);
}

</style>