166 lines
3.0 KiB
Vue
166 lines
3.0 KiB
Vue
<template>
|
|
<div class="asset-card" :class="{ 'is-active': isActive, 'is-disabled': disabled }">
|
|
<UiCoin
|
|
class="asset-card__coin"
|
|
:code="code"
|
|
/>
|
|
|
|
<div class="asset-card__name-wrapper">
|
|
<p class="asset-card__code">
|
|
{{ code }}
|
|
</p>
|
|
|
|
<p class="asset-card__name">
|
|
{{ name }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="asset-card__money">
|
|
<p class="asset-card__balance">
|
|
<span
|
|
v-if="showConverted"
|
|
class="asset-card__converted"
|
|
>
|
|
{{ convertedBalance }}
|
|
</span>
|
|
<span>{{ balance }}</span>
|
|
</p>
|
|
|
|
<p
|
|
v-if="withdraw"
|
|
class="asset-card__withdraw"
|
|
>
|
|
<span
|
|
v-if="showConverted"
|
|
class="asset-card__converted"
|
|
>
|
|
{{ convertedWithdraw }}
|
|
</span>
|
|
<span>{{ withdraw }}</span>
|
|
<UiIconSUpRight class="asset-card__withdraw-icon" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type Decimal from 'decimal.js'
|
|
|
|
interface Props {
|
|
code: string
|
|
name?: string
|
|
balance: Decimal.Value
|
|
withdraw?: Decimal.Value
|
|
rate: Decimal.Value
|
|
isActive?: boolean
|
|
disabled?: boolean
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const showConverted = computed(() => !!props.rate && props.rate !== 1)
|
|
const convertedBalance = computed(() => $money.fullFormat($money.convert(props.balance, props.rate), 'USDT'))
|
|
const convertedWithdraw = computed(() => $money.fullFormat($money.convert(props.balance, props.rate), 'USDT'))
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.asset-card {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr 1fr;
|
|
align-items: center;
|
|
padding: 24px;
|
|
border-radius: 12px;
|
|
background-color: $clr-grey-100;
|
|
outline: 2px solid transparent;
|
|
outline-offset: -2px;
|
|
cursor: pointer;
|
|
transition: .2s ease-out;
|
|
transition-property: outline-color, background-color;
|
|
min-height: 97px;
|
|
|
|
&:hover {
|
|
outline-color: $clr-grey-300;
|
|
}
|
|
|
|
&.is-active,
|
|
&:active {
|
|
background-color: $clr-grey-200;
|
|
}
|
|
|
|
&.is-active {
|
|
outline-color: $clr-cyan-300;
|
|
}
|
|
|
|
&.is-disabled {
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&__name-wrapper {
|
|
min-width: 0;
|
|
}
|
|
|
|
&__coin {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
&__code {
|
|
@include txt-l-sb;
|
|
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
&__name {
|
|
@include txt-r-m;
|
|
|
|
margin-top: 2px;
|
|
color: $clr-grey-400;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&__money {
|
|
text-align: right;
|
|
}
|
|
|
|
&__balance {
|
|
@include txt-l-sb;
|
|
}
|
|
|
|
&__withdraw {
|
|
@include txt-i-sb;
|
|
|
|
margin-top: 8px;
|
|
}
|
|
|
|
&__balance,
|
|
&__withdraw {
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
|
|
span {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
&__withdraw-icon {
|
|
color: $clr-cyan-500;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
&__converted {
|
|
@include txt-i-m;
|
|
|
|
vertical-align: middle;
|
|
color: $clr-grey-400;
|
|
|
|
&::after {
|
|
content: '/';
|
|
margin-inline: 4px;
|
|
color: $clr-grey-300;
|
|
}
|
|
}
|
|
}
|
|
</style>
|