131 lines
3.5 KiB
Vue
131 lines
3.5 KiB
Vue
<template>
|
|
<PageBlock
|
|
class="settings-limits"
|
|
title="Current tariff"
|
|
>
|
|
<template #badge>
|
|
<UiBadge type="marketing">
|
|
BASIC
|
|
</UiBadge>
|
|
</template>
|
|
|
|
<template #actions>
|
|
<UiButton>Increase the limit</UiButton>
|
|
</template>
|
|
|
|
<SettingsTariffCard title="Withdrawal of funds">
|
|
<template #icon>
|
|
<UiIconArrowSend class="text-clr-cyan-600" />
|
|
</template>
|
|
|
|
<template #subtitle>
|
|
<div class="settings-limits__subtitle">
|
|
<span>Minimum withdrawal amount <strong>5 usdt</strong></span>
|
|
|
|
<div class="settings-limits-separator" />
|
|
|
|
<span>Withdrawal fee <strong>2.5 usdt + 1%</strong></span>
|
|
</div>
|
|
</template>
|
|
|
|
<template #content>
|
|
<div class="settings-limits-content">
|
|
<div class="settings-limits-content__header">
|
|
<strong>The limit</strong> <span class="text-clr-grey-500"> for today</span>
|
|
<UiBadge type="marketing" class="ml-8">
|
|
It will be updated at 16:00
|
|
</UiBadge>
|
|
</div>
|
|
|
|
<SettingsLimitProgress currency="USDT" :max-amount="880" :amount="120" />
|
|
</div>
|
|
|
|
<div class="settings-limits-separator" />
|
|
|
|
<div class="settings-limits-content">
|
|
<div class="settings-limits-content__header">
|
|
<span class="text-clr-grey-500"> Monthly</span> <strong>limit</strong>
|
|
<UiBadge type="marketing" class="ml-8">
|
|
Updated on 03.01.2023
|
|
</UiBadge>
|
|
</div>
|
|
|
|
<SettingsLimitProgress currency="USDT" :max-amount="10000" :amount="120" />
|
|
</div>
|
|
</template>
|
|
</SettingsTariffCard>
|
|
|
|
<SettingsTariffCard title="Creating invoices">
|
|
<template #icon>
|
|
<UiIconArrowReceive class="text-clr-green-500" />
|
|
</template>
|
|
|
|
<template #subtitle>
|
|
<div class="settings-limits__subtitle">
|
|
<span>The minimum amount in the invoice is <strong>5 usdt</strong></span>
|
|
|
|
<div class="settings-limits-separator" />
|
|
|
|
<span>The commission for creating an invoice is <strong> 0.5 usdt</strong></span>
|
|
</div>
|
|
</template>
|
|
|
|
<template #content>
|
|
<div class="settings-limits-content">
|
|
<div class="settings-limits-content__header">
|
|
<strong>The limit</strong> <span class="text-clr-grey-500"> for today</span>
|
|
<UiBadge type="marketing" class="ml-8">
|
|
It will be updated at 16:00
|
|
</UiBadge>
|
|
</div>
|
|
|
|
<SettingsLimitProgress currency="invoices" :max-amount="200" :amount="200" />
|
|
</div>
|
|
|
|
<div class="settings-limits-separator" />
|
|
|
|
<div class="settings-limits-content">
|
|
<div class="settings-limits-content__header">
|
|
<span class="text-clr-grey-500"> Monthly</span> <strong>limit</strong>
|
|
<UiBadge type="marketing" class="ml-8">
|
|
Updated on 03.01.2023
|
|
</UiBadge>
|
|
</div>
|
|
|
|
<SettingsLimitProgress currency="invoices" :max-amount="1000" :amount="751" />
|
|
</div>
|
|
</template>
|
|
</SettingsTariffCard>
|
|
</PageBlock>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.settings-limits{
|
|
--page-block-gap: 24px;
|
|
--page-block-padding: 24px;
|
|
|
|
&__subtitle{
|
|
display: flex;
|
|
@include txt-r;
|
|
color: $clr-grey-600;
|
|
}
|
|
|
|
}
|
|
|
|
.settings-limits-separator{
|
|
width: 1px;
|
|
margin-inline: 16px;
|
|
background-color: $clr-grey-300;
|
|
}
|
|
.settings-limits-content {
|
|
width: 544px;
|
|
&__header{
|
|
margin-bottom: 16px;
|
|
}
|
|
}
|
|
</style>
|