105 lines
2.4 KiB
Vue
105 lines
2.4 KiB
Vue
<template>
|
|
<div class="info-columns">
|
|
<PageInfoBlock
|
|
title="More limits"
|
|
text="Get increased limits and advanced features by providing a little more profile information"
|
|
action="Increase the limit"
|
|
link="/verification/status"
|
|
badge="BASIC"
|
|
style="
|
|
background-image: url('/block2.jpg');
|
|
background-size: cover;
|
|
background-position: bottom right;
|
|
"
|
|
>
|
|
<template #info>
|
|
<div
|
|
v-if="!maxState"
|
|
class="limits"
|
|
>
|
|
<p class="limits__date">
|
|
Updated on <strong>{{ dayjs().format('DD.MM.YYYY') }}</strong>
|
|
</p>
|
|
|
|
<div>
|
|
<p class="limits__title">
|
|
Remaining limit
|
|
</p>
|
|
|
|
<div class="mb-4 d-flex justify-content-between">
|
|
<span class="limits__current">{{ dayLimit }} <span class="limits__current-text">/ per day</span></span>
|
|
|
|
<span class="limits__total">{{ curDayLimit }} USDT</span>
|
|
</div>
|
|
<UiProgressBar :progress="(curDayLimit / dayLimit) * 100" />
|
|
|
|
<div class="mb-4 mt-24 d-flex justify-content-between">
|
|
<span class="limits__current">{{ monthLimit }} <span class="limits__current-text">/ per month</span></span>
|
|
|
|
<span class="limits__total">{{ curMonthLimit }} USDT</span>
|
|
</div>
|
|
<UiProgressBar :progress="(curMonthLimit / monthLimit) * 100" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</PageInfoBlock>
|
|
|
|
<PageInfoBlock
|
|
title="2FA authentication"
|
|
text="Complete the verification process to remove withdrawal limits."
|
|
action="Add 2FA"
|
|
link="/2fa"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import dayjs from 'dayjs'
|
|
|
|
const maxState = ref(false)
|
|
|
|
const curDayLimit = ref(100)
|
|
const curMonthLimit = ref(5200)
|
|
|
|
const dayLimit = ref(1000)
|
|
const monthLimit = ref(10000)
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.info-columns {
|
|
> *:not(:last-child) {
|
|
margin-bottom: 8px;
|
|
}
|
|
}
|
|
|
|
.limits {
|
|
margin-bottom: 24px;
|
|
|
|
&__date {
|
|
@include txt-s;
|
|
color: $clr-grey-500;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
&__title {
|
|
@include txt-s-m;
|
|
color: $clr-grey-400;
|
|
text-align: right;
|
|
}
|
|
|
|
&__total {
|
|
@include txt-s-m;
|
|
color: $clr-grey-500;
|
|
}
|
|
|
|
&__current {
|
|
@include txt-m-sb;
|
|
}
|
|
|
|
&__current-text{
|
|
@include txt-r-sb;
|
|
color: $clr-grey-400;
|
|
}
|
|
}
|
|
</style>
|