89 lines
1.6 KiB
Vue
89 lines
1.6 KiB
Vue
<template>
|
|
<div :class="cn.b()">
|
|
<p :class="cn.e('label')">
|
|
To pay:
|
|
</p>
|
|
|
|
<div :class="cn.e('left')">
|
|
<span :class="cn.e('amount')">{{ amount }}</span>
|
|
<UiCopyButton
|
|
:class="cn.e('copy')"
|
|
:title="null"
|
|
:pressed-title="null"
|
|
:value="amount"
|
|
/>
|
|
</div>
|
|
|
|
<div :class="cn.e('right')">
|
|
<UiCoin
|
|
:class="cn.e('coin')"
|
|
:code="invoice.currencyCode"
|
|
/>
|
|
<span :class="cn.e('code')">{{ invoice.currencyCode }}</span>
|
|
<span :class="cn.e('network')">TRC20</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { invoice } = inject('public-invoice')
|
|
|
|
const amount = computed(() => $money.format(invoice.value.amount, invoice.value.code))
|
|
|
|
const cn = useClassname('invoice-form-amount')
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.invoice-form-amount {
|
|
display: grid;
|
|
grid-template-areas: 'label label' 'left right';
|
|
text-align: left;
|
|
padding-inline: 16px;
|
|
|
|
&__label {
|
|
@include txt-r-m;
|
|
|
|
grid-area: label;
|
|
margin-bottom: 3px;
|
|
color: $clr-grey-500;
|
|
}
|
|
|
|
&__left {
|
|
display: flex;
|
|
align-items: center;
|
|
grid-area: left;
|
|
}
|
|
|
|
&__amount {
|
|
@include h2;
|
|
}
|
|
|
|
&__copy {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
&__right {
|
|
display: flex;
|
|
align-items: center;
|
|
grid-area: right;
|
|
justify-self: flex-end;
|
|
}
|
|
|
|
&__code {
|
|
@include font(16px, 600, 20px);
|
|
|
|
margin-left: 8px;
|
|
}
|
|
|
|
&__network {
|
|
@include txt-i-m;
|
|
|
|
padding: 3px 5px;
|
|
border-radius: 6px;
|
|
background-color: $clr-cyan-500;
|
|
color: $clr-white;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
</style>
|