75 lines
2.2 KiB
Vue
75 lines
2.2 KiB
Vue
<script lang='ts' setup>
|
|
import SolarDollarMinimalisticBoldDuotone from "~icons/solar/dollar-minimalistic-bold-duotone";
|
|
import SolarRoundTransferHorizontalBoldDuotone from "~icons/solar/round-transfer-horizontal-bold-duotone";
|
|
import { getCryptoIcon } from "@/config/crypto";
|
|
|
|
const walletStore = useWalletStore();
|
|
const { fundingBalances, totalAssetValue } = storeToRefs(walletStore);
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<ion-label class="text-xs font-medium text-text-300">
|
|
资产分布
|
|
</ion-label>
|
|
|
|
<div class="grid grid-cols-2 gap-4 mt-2">
|
|
<div class="asset-card">
|
|
<div class="text-xs text-text-400 font-semibold flex items-center gap-1">
|
|
<SolarDollarMinimalisticBoldDuotone />
|
|
资金账户
|
|
</div>
|
|
<div class="font-bold">
|
|
${{ totalAssetValue.fundingValueUsd }}
|
|
</div>
|
|
</div>
|
|
<div class="asset-card">
|
|
<div class="text-xs text-text-400 font-semibold flex items-center gap-1">
|
|
<SolarRoundTransferHorizontalBoldDuotone />
|
|
交易账户
|
|
</div>
|
|
<div class="font-bold">
|
|
${{ totalAssetValue.tradingValueUsd }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ion-label class="text-xs font-medium text-text-300">
|
|
资产
|
|
</ion-label>
|
|
<ion-list lines="none" class="space-y-5 mt-2!">
|
|
<ion-item v-for="asset, i in fundingBalances" :key="i" class="">
|
|
<div class="flex items-center space-x-3 flex-1">
|
|
<component :is="getCryptoIcon(asset.assetCode)" class="w-8 h-8" />
|
|
<div class="space-y-1">
|
|
<div class="font-medium text-md">
|
|
{{ asset.assetCode }}
|
|
</div>
|
|
<div class="text-xs text-text-700 font-bold">
|
|
Total: ${{ asset.total }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-fit font-bold">
|
|
${{ Number(asset.available) }}
|
|
</div>
|
|
</ion-item>
|
|
</ion-list>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang='css' scoped>
|
|
@reference "tailwindcss";
|
|
|
|
ion-item::part(native) {
|
|
--padding-start: 0;
|
|
}
|
|
.asset-card {
|
|
@apply flex flex-col justify-between py-2 px-4 bg-gray-100 rounded-lg mb-3 gap-2;
|
|
}
|
|
|
|
.ion-palette-dark .asset-card {
|
|
@apply bg-[#151515];
|
|
}
|
|
</style>
|