feat: 添加资产相关组件并更新用户界面

This commit is contained in:
2025-12-14 21:17:34 +07:00
parent f112371efa
commit ba82a05b31
5 changed files with 184 additions and 0 deletions

View File

@@ -0,0 +1,44 @@
<script lang='ts' setup>
import { cardOutline, cashOutline, linkOutline, walletOutline } from "ionicons/icons";
</script>
<template>
<div class="mt-10">
<ion-label class="text-xs font-medium text-text-300">
Asset Balance
</ion-label>
<div class="grid grid-cols-4 mt-5">
<div class="col-span-1 flex-col-center gap-2">
<ion-icon :icon="cashOutline" />
<div class="text-xs">
Fiat
</div>
</div>
<div class="col-span-1 flex-col-center gap-2">
<ion-icon :icon="linkOutline" />
<div class="text-xs">
On-Chain
</div>
</div>
<div class="col-span-1 flex-col-center gap-2">
<ion-icon :icon="walletOutline" />
<div class="text-xs">
Wallet
</div>
</div>
<div class="col-span-1 flex-col-center gap-2">
<ion-icon :icon="cardOutline" />
<div class="text-xs">
Recharge
</div>
</div>
</div>
</div>
</template>
<style lang='css' scoped>
ion-icon {
font-size: 1.5rem;
color: var(--ion-color-primary);
}
</style>

View File

@@ -0,0 +1,44 @@
<script lang='ts' setup>
import { calculatorOutline, documentTextOutline, fingerPrintOutline, personOutline } from "ionicons/icons";
</script>
<template>
<div class="mt-10">
<ion-label class="text-xs font-medium text-text-300">
Issuing Asset
</ion-label>
<div class="grid grid-cols-4 mt-5">
<div class="col-span-1 flex-col-center gap-2">
<ion-icon :icon="personOutline" />
<div class="text-xs">
My Company
</div>
</div>
<div class="col-span-1 flex-col-center gap-2">
<ion-icon :icon="documentTextOutline" />
<div class="text-xs">
Issuing Apply
</div>
</div>
<div class="col-span-1 flex-col-center gap-2">
<ion-icon :icon="calculatorOutline" />
<div class="text-xs">
Audit
</div>
</div>
<div class="col-span-1 flex-col-center gap-2">
<ion-icon :icon="fingerPrintOutline" />
<div class="text-xs">
Supervision
</div>
</div>
</div>
</div>
</template>
<style lang='css' scoped>
ion-icon {
font-size: 1.5rem;
color: var(--ion-color-primary);
}
</style>

View File

@@ -0,0 +1,44 @@
<script lang='ts' setup>
import { calendarOutline, listOutline, timeOutline, walletOutline } from "ionicons/icons";
</script>
<template>
<div class="mt-10">
<ion-label class="text-xs font-medium text-text-300">
My Revenue
</ion-label>
<div class="grid grid-cols-4 mt-5">
<div class="col-span-1 flex-col-center gap-2">
<ion-icon :icon="walletOutline" />
<div class="text-xs">
Total Revenue
</div>
</div>
<div class="col-span-1 flex-col-center gap-2">
<ion-icon :icon="calendarOutline" />
<div class="text-xs">
Monthly Revenue
</div>
</div>
<div class="col-span-1 flex-col-center gap-2">
<ion-icon :icon="timeOutline" />
<div class="text-xs">
Pending Revenue
</div>
</div>
<div class="col-span-1 flex-col-center gap-2">
<ion-icon :icon="listOutline" />
<div class="text-xs">
Revenue Details
</div>
</div>
</div>
</div>
</template>
<style lang='css' scoped>
ion-icon {
font-size: 1.5rem;
color: var(--ion-color-primary);
}
</style>

View File

@@ -0,0 +1,44 @@
<script lang='ts' setup>
import { cashOutline, homeOutline, logoUsd, swapHorizontalOutline } from "ionicons/icons";
</script>
<template>
<div class="mt-10">
<ion-label class="text-xs font-medium text-text-300">
Purchase Assets
</ion-label>
<div class="grid grid-cols-4 mt-5">
<div class="col-span-1 flex-col-center gap-2">
<ion-icon :icon="cashOutline" />
<div class="text-xs">
Fiat Purchase
</div>
</div>
<div class="col-span-1 flex-col-center gap-2">
<ion-icon :icon="logoUsd" />
<div class="text-xs">
Crypto Purchase
</div>
</div>
<div class="col-span-1 flex-col-center gap-2">
<ion-icon :icon="homeOutline" />
<div class="text-xs">
Real Estate
</div>
</div>
<div class="col-span-1 flex-col-center gap-2">
<ion-icon :icon="swapHorizontalOutline" />
<div class="text-xs">
Asset Exchange
</div>
</div>
</div>
</div>
</template>
<style lang='css' scoped>
ion-icon {
font-size: 1.5rem;
color: var(--ion-color-primary);
}
</style>