|
|
@@ -1,189 +1,189 @@
|
|
|
<template>
|
|
|
<LayoutContainer>
|
|
|
<div class="premium-container">
|
|
|
- <v-row class="center-90">
|
|
|
- <table v-if="mdAndUp">
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <th />
|
|
|
-
|
|
|
- <th>
|
|
|
- <p class="standard">Standard</p>
|
|
|
- <p v-if="showFrom" class="from">À partir de</p>
|
|
|
- <p class="price">
|
|
|
- {{ standardPrice }} <span class="ttc">ttc</span>
|
|
|
- </p>
|
|
|
- <p class="month">/mois *</p>
|
|
|
- </th>
|
|
|
-
|
|
|
- <th class="premium-column">
|
|
|
- <p class="standard">Premium</p>
|
|
|
- <p v-if="showFrom" class="from">À partir de</p>
|
|
|
- <p class="price">
|
|
|
- {{ premiumPrice }} <span class="ttc">ttc</span>
|
|
|
- </p>
|
|
|
- <p class="month">/mois *</p>
|
|
|
- </th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
-
|
|
|
- <tbody>
|
|
|
- <tr v-for="item in items" :key="item.label">
|
|
|
- <td class="label-column">
|
|
|
- {{ item.label }}
|
|
|
- </td>
|
|
|
-
|
|
|
- <td>
|
|
|
- <v-icon
|
|
|
- v-if="item.includedInStandard === true"
|
|
|
- icon="far fa-check-circle"
|
|
|
- size="18"
|
|
|
- />
|
|
|
-
|
|
|
- <v-icon
|
|
|
- v-else-if="item.includedInStandard === false"
|
|
|
- icon="far fa-times-circle"
|
|
|
- size="18"
|
|
|
- color="red"
|
|
|
- />
|
|
|
-
|
|
|
- <span v-else>
|
|
|
- {{ item.includedInStandard }}
|
|
|
- </span>
|
|
|
- </td>
|
|
|
-
|
|
|
- <td>
|
|
|
- <v-icon
|
|
|
- v-if="item.includedInPremium === true"
|
|
|
- icon="far fa-check-circle"
|
|
|
- size="18"
|
|
|
- />
|
|
|
-
|
|
|
- <v-icon
|
|
|
- v-else-if="item.includedInPremium === false"
|
|
|
- icon="far fa-times-circle"
|
|
|
- size="18"
|
|
|
- color="red"
|
|
|
- />
|
|
|
-
|
|
|
- <span v-else>
|
|
|
- {{ item.includedInPremium }}
|
|
|
- </span>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
-
|
|
|
- <div v-else>
|
|
|
- <div class="d-flex flex-row flex-grow-1 justify-center mt-2">
|
|
|
- <v-btn
|
|
|
- :disabled="carouselPos === 0"
|
|
|
- icon="fas fa-chevron-left"
|
|
|
- class="mr-6"
|
|
|
- aria-label="Précédent"
|
|
|
- @click="goToPrevious"
|
|
|
- />
|
|
|
- <v-btn
|
|
|
- :disabled="carouselPos === 1"
|
|
|
- icon="fas fa-chevron-right"
|
|
|
- aria-label="Suivant"
|
|
|
- @click="goToNext"
|
|
|
- />
|
|
|
+ <v-row class="center-90">
|
|
|
+ <table v-if="mdAndUp">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th />
|
|
|
+
|
|
|
+ <th>
|
|
|
+ <p class="standard">Standard</p>
|
|
|
+ <p v-if="showFrom" class="from">À partir de</p>
|
|
|
+ <p class="price">
|
|
|
+ {{ standardPrice }} <span class="ttc">ttc</span>
|
|
|
+ </p>
|
|
|
+ <p class="month">/mois *</p>
|
|
|
+ </th>
|
|
|
+
|
|
|
+ <th class="premium-column">
|
|
|
+ <p class="standard">Premium</p>
|
|
|
+ <p v-if="showFrom" class="from">À partir de</p>
|
|
|
+ <p class="price">
|
|
|
+ {{ premiumPrice }} <span class="ttc">ttc</span>
|
|
|
+ </p>
|
|
|
+ <p class="month">/mois *</p>
|
|
|
+ </th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="item in items" :key="item.label">
|
|
|
+ <td class="label-column">
|
|
|
+ {{ item.label }}
|
|
|
+ </td>
|
|
|
+
|
|
|
+ <td>
|
|
|
+ <v-icon
|
|
|
+ v-if="item.includedInStandard === true"
|
|
|
+ icon="far fa-check-circle"
|
|
|
+ size="18"
|
|
|
+ />
|
|
|
+
|
|
|
+ <v-icon
|
|
|
+ v-else-if="item.includedInStandard === false"
|
|
|
+ icon="far fa-times-circle"
|
|
|
+ size="18"
|
|
|
+ color="red"
|
|
|
+ />
|
|
|
+
|
|
|
+ <span v-else>
|
|
|
+ {{ item.includedInStandard }}
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+
|
|
|
+ <td>
|
|
|
+ <v-icon
|
|
|
+ v-if="item.includedInPremium === true"
|
|
|
+ icon="far fa-check-circle"
|
|
|
+ size="18"
|
|
|
+ />
|
|
|
+
|
|
|
+ <v-icon
|
|
|
+ v-else-if="item.includedInPremium === false"
|
|
|
+ icon="far fa-times-circle"
|
|
|
+ size="18"
|
|
|
+ color="red"
|
|
|
+ />
|
|
|
+
|
|
|
+ <span v-else>
|
|
|
+ {{ item.includedInPremium }}
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <div v-else>
|
|
|
+ <div class="d-flex flex-row flex-grow-1 justify-center mt-2">
|
|
|
+ <v-btn
|
|
|
+ :disabled="carouselPos === 0"
|
|
|
+ icon="fas fa-chevron-left"
|
|
|
+ class="mr-6"
|
|
|
+ aria-label="Précédent"
|
|
|
+ @click="goToPrevious"
|
|
|
+ />
|
|
|
+ <v-btn
|
|
|
+ :disabled="carouselPos === 1"
|
|
|
+ icon="fas fa-chevron-right"
|
|
|
+ aria-label="Suivant"
|
|
|
+ @click="goToNext"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <v-carousel
|
|
|
+ v-model="carouselPos"
|
|
|
+ :hide-delimiters="true"
|
|
|
+ :show-arrows="false"
|
|
|
+ :height="height"
|
|
|
+ >
|
|
|
+ <v-carousel-item>
|
|
|
+ <h4>Standard</h4>
|
|
|
+ <div>
|
|
|
+ <p class="from">À partir de</p>
|
|
|
+ <p class="price">
|
|
|
+ {{ standardPrice }} <span class="ttc">ttc</span>
|
|
|
+ <span class="month">/mois</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <table>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="item in items" :key="item.label">
|
|
|
+ <td class="label-column">
|
|
|
+ {{ item.label }}
|
|
|
+ </td>
|
|
|
+
|
|
|
+ <td>
|
|
|
+ <v-icon
|
|
|
+ v-if="item.includedInStandard === true"
|
|
|
+ icon="far fa-check-circle"
|
|
|
+ size="18"
|
|
|
+ />
|
|
|
+
|
|
|
+ <v-icon
|
|
|
+ v-else-if="item.includedInStandard === false"
|
|
|
+ icon="far fa-times-circle"
|
|
|
+ size="18"
|
|
|
+ color="red"
|
|
|
+ />
|
|
|
+
|
|
|
+ <span v-else>
|
|
|
+ {{ item.includedInStandard }}
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </v-carousel-item>
|
|
|
+
|
|
|
+ <v-carousel-item>
|
|
|
+ <h4>Premium</h4>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <p class="from">À partir de</p>
|
|
|
+ <p class="price">
|
|
|
+ {{ premiumPrice }} <span class="ttc">ttc</span>
|
|
|
+ <span class="month">/mois</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <table>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="item in items" :key="item.label">
|
|
|
+ <td class="label-column">
|
|
|
+ {{ item.label }}
|
|
|
+ </td>
|
|
|
+
|
|
|
+ <td>
|
|
|
+ <v-icon
|
|
|
+ v-if="item.includedInPremium === true"
|
|
|
+ icon="far fa-check-circle"
|
|
|
+ size="18"
|
|
|
+ />
|
|
|
+
|
|
|
+ <v-icon
|
|
|
+ v-else-if="item.includedInPremium === false"
|
|
|
+ icon="far fa-times-circle"
|
|
|
+ size="18"
|
|
|
+ color="red"
|
|
|
+ />
|
|
|
+
|
|
|
+ <span v-else>
|
|
|
+ {{ item.includedInPremium }}
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </v-carousel-item>
|
|
|
+ </v-carousel>
|
|
|
</div>
|
|
|
|
|
|
- <v-carousel
|
|
|
- v-model="carouselPos"
|
|
|
- :hide-delimiters="true"
|
|
|
- :show-arrows="false"
|
|
|
- :height="height"
|
|
|
- >
|
|
|
- <v-carousel-item>
|
|
|
- <h4>Standard</h4>
|
|
|
- <div>
|
|
|
- <p class="from">À partir de</p>
|
|
|
- <p class="price">
|
|
|
- {{ standardPrice }} <span class="ttc">ttc</span>
|
|
|
- <span class="month">/mois</span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <table>
|
|
|
- <tbody>
|
|
|
- <tr v-for="item in items" :key="item.label">
|
|
|
- <td class="label-column">
|
|
|
- {{ item.label }}
|
|
|
- </td>
|
|
|
-
|
|
|
- <td>
|
|
|
- <v-icon
|
|
|
- v-if="item.includedInStandard === true"
|
|
|
- icon="far fa-check-circle"
|
|
|
- size="18"
|
|
|
- />
|
|
|
-
|
|
|
- <v-icon
|
|
|
- v-else-if="item.includedInStandard === false"
|
|
|
- icon="far fa-times-circle"
|
|
|
- size="18"
|
|
|
- color="red"
|
|
|
- />
|
|
|
-
|
|
|
- <span v-else>
|
|
|
- {{ item.includedInStandard }}
|
|
|
- </span>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </v-carousel-item>
|
|
|
-
|
|
|
- <v-carousel-item>
|
|
|
- <h4>Premium</h4>
|
|
|
-
|
|
|
- <div>
|
|
|
- <p class="from">À partir de</p>
|
|
|
- <p class="price">
|
|
|
- {{ premiumPrice }} <span class="ttc">ttc</span>
|
|
|
- <span class="month">/mois</span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <table>
|
|
|
- <tbody>
|
|
|
- <tr v-for="item in items" :key="item.label">
|
|
|
- <td class="label-column">
|
|
|
- {{ item.label }}
|
|
|
- </td>
|
|
|
-
|
|
|
- <td>
|
|
|
- <v-icon
|
|
|
- v-if="item.includedInPremium === true"
|
|
|
- icon="far fa-check-circle"
|
|
|
- size="18"
|
|
|
- />
|
|
|
-
|
|
|
- <v-icon
|
|
|
- v-else-if="item.includedInPremium === false"
|
|
|
- icon="far fa-times-circle"
|
|
|
- size="18"
|
|
|
- color="red"
|
|
|
- />
|
|
|
-
|
|
|
- <span v-else>
|
|
|
- {{ item.includedInPremium }}
|
|
|
- </span>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </v-carousel-item>
|
|
|
- </v-carousel>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="asterisk">
|
|
|
- <span>* Payable annuellement</span>
|
|
|
- </div>
|
|
|
- </v-row>
|
|
|
+ <div class="asterisk">
|
|
|
+ <span>* Payable annuellement</span>
|
|
|
+ </div>
|
|
|
+ </v-row>
|
|
|
</div>
|
|
|
</LayoutContainer>
|
|
|
</template>
|
|
|
@@ -378,34 +378,29 @@ table tr:nth-child(1) th:nth-child(3) {
|
|
|
.premium-column {
|
|
|
position: relative;
|
|
|
z-index: 10;
|
|
|
- border-radius: 0 15px 15px 0;
|
|
|
+ border-radius: 0 15px 15px 0;
|
|
|
}
|
|
|
|
|
|
.premium-column p,
|
|
|
.premium-column .month,
|
|
|
.premium-column .price {
|
|
|
- border: none !important;
|
|
|
+ border: none !important;
|
|
|
}
|
|
|
|
|
|
thead th:nth-child(3) {
|
|
|
- border-top: 2px solid black;
|
|
|
+ border-top: 2px solid black;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
tbody tr:last-child td:nth-child(3) {
|
|
|
border-bottom: 2px solid black;
|
|
|
- border-radius: 0 0 15px 0;
|
|
|
+ border-radius: 0 0 15px 0;
|
|
|
}
|
|
|
|
|
|
.premium-column p,
|
|
|
.premium-column .month,
|
|
|
.premium-column .price,
|
|
|
-.premium-column .ttc
|
|
|
-
|
|
|
-{
|
|
|
+.premium-column .ttc {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
</style>
|