43 lines
1.2 KiB
Vue
43 lines
1.2 KiB
Vue
<template>
|
|
<div class="flex column items-center bg-white rounded-card q-pa-md">
|
|
<div class="text-h5 text-primary text-bold">
|
|
{{ name }}
|
|
</div>
|
|
|
|
<div class="flex items-center" style="min-height: 50px;">
|
|
<div v-if="price" class="flex column items-center">
|
|
<div class="flex no-wrap items-center">
|
|
<telegram-star color="gold" size="24px" class="q-mr-xs"/>
|
|
<span class="text-h4">{{ price }}</span>
|
|
</div>
|
|
<span class="text-caption">{{ $t('price__per_month') }}</span>
|
|
</div>
|
|
<div v-else class="text-bold text-h5">
|
|
{{ $t('price__free_tax') }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center q-pt-md" style="min-height: 50px;">
|
|
<div class="flex no-wrap items-center">
|
|
<span v-if="chatsQty" class="text-brand2 text-bold text-h5">
|
|
{{ chatsQty }}
|
|
</span>
|
|
<q-icon v-else name="mdi-all-inclusive" size="md" color="brand2"/>
|
|
<span class="q-pl-sm">
|
|
{{ $t('price__chats')}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import telegramStar from 'components/TelegramStar.vue'
|
|
|
|
defineProps({
|
|
name: String,
|
|
price: Number,
|
|
chatsQty: Number
|
|
})
|
|
</script>
|