61 lines
2.2 KiB
Vue
61 lines
2.2 KiB
Vue
<template>
|
|
<div class="pricing-table">
|
|
<div class="pricing-plan" :class="{ 'is-active': plan === 'free' }">
|
|
<div class="plan-header">Gratuit</div>
|
|
Parfait pour démarrer rapidement
|
|
<div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">€</span>0</span>/mois</div>
|
|
<div class="plan-items">
|
|
<div class="plan-item">jusqu'à 20 comptes</div>
|
|
<div class="plan-item">jusqu'à 20 amis/compte</div>
|
|
<div class="plan-item">jusqu'à 200 dépenses/compte</div>
|
|
<div class="plan-item">33 devises</div>
|
|
</div>
|
|
<div class="plan-footer">
|
|
<button class="button is-fullwidth" @click="choose('free')">
|
|
<span v-if="plan !== 'free'">Choix par défaut</span>
|
|
<span v-else>Sélectionné</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pricing-plan is-success" :class="{ 'is-active': plan === 'premium' }">
|
|
<div class="plan-header">Premium</div>
|
|
Vaquant sans aucune limite !
|
|
<div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">€</span>3</span>/mois</div>
|
|
<div class="plan-items">
|
|
<div class="plan-item"><awe-icon icon="infinity" /> comptes</div>
|
|
<div class="plan-item"><awe-icon icon="infinity" /> amis/compte</div>
|
|
<div class="plan-item"><awe-icon icon="infinity" /> dépenses/compte</div>
|
|
<div class="plan-item">150+ devises</div>
|
|
<div class="plan-item">pièces jointes disponibles</div>
|
|
</div>
|
|
<div class="plan-footer">
|
|
<button class="button is-fullwidth" @click="choose('premium')" disabled>
|
|
Bientôt disponible
|
|
<!-- <span v-if="plan !== 'premium'">Passer en premium</span>
|
|
<span v-else>Sélectionné</span> -->
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from 'vue-property-decorator'
|
|
|
|
@Component
|
|
export default class PrincingTable extends Vue {
|
|
@Prop({ type: String, default: '' })
|
|
public firstPlan!: string
|
|
public plan: string = ''
|
|
|
|
public mounted(): void {
|
|
this.plan = this.firstPlan
|
|
}
|
|
public choose(plan: string): void {
|
|
this.plan = plan
|
|
this.$emit(plan)
|
|
}
|
|
}
|
|
</script>
|