feat: account vchip ui refactor

This commit is contained in:
Alisa | Side.one 2023-05-12 21:26:36 +08:00
parent d984bac2d4
commit 53481bad37
2 changed files with 34 additions and 15 deletions

View File

@ -130,9 +130,12 @@ loadAccount(props.address);
${{ 0 }}
</VListItemSubtitle>
<template #append>
<VChip color="primary">{{
format.calculatePercent(v.amount, totalAmount)
}}</VChip>
<div class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2">
<span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"></span>
{{
format.calculatePercent(v.amount, totalAmount)
}}
</div>
</template>
</VListItem>
<VListItem v-for="v in delegations">
@ -149,9 +152,12 @@ loadAccount(props.address);
${{ 0 }}
</VListItemSubtitle>
<template #append>
<VChip color="primary">{{
format.calculatePercent(v.balance.amount, totalAmount)
}}</VChip>
<div class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2">
<span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"></span>
{{
format.calculatePercent(v.balance.amount, totalAmount)
}}
</div>
</template>
</VListItem>
<VListItem v-for="v in rewards.total">
@ -168,9 +174,12 @@ loadAccount(props.address);
${{ 0 }}
</VListItemSubtitle>
<template #append>
<VChip color="primary">{{
format.calculatePercent(v.amount, totalAmount)
}}</VChip>
<div class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2">
<span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"></span>
{{
format.calculatePercent(v.amount, totalAmount)
}}
</div>
</template>
</VListItem>
@ -193,9 +202,12 @@ loadAccount(props.address);
${{ 0 }}
</VListItemSubtitle>
<template #append>
<VChip color="primary">{{
format.calculatePercent(unbondingTotal, totalAmount)
}}</VChip>
<div class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2">
<span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"></span>
{{
format.calculatePercent(unbondingTotal, totalAmount)
}}
</div>
</template>
</VListItem>
</VList>

View File

@ -49,10 +49,17 @@ const messages = computed(() => {
<tr>
<td>Status</td>
<td>
<VChip v-if="tx.tx_response.code === 0" color="success"
>Success</VChip
<VChip color="primary">oioio</VChip>
<div
class="text-xs truncate relative py-2 px-4 rounded-full w-fit mr-2"
:class="`text-${tx.tx_response.code === 0 ? 'success': 'error'}`"
>
<span v-else><VChip color="error">Failded</VChip></span>
<span
class="inset-x-0 inset-y-0 opacity-10 absolute"
:class="`bg-${tx.tx_response.code === 0 ? 'success': 'error'}`"
></span>
{{ tx.tx_response.code === 0 ? 'Success': 'Failded' }}
</div>
</td>
</tr>
<tr>