root/riwa-ionic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Seven
2025-12-14 21:17:34 +07:00
parent f112371efa
commit ba82a05b31
5 changed files with 184 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/views/user/components/asset-balance.vue Normal file
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>

44
src/views/user/components/issuing-asset.vue Normal file
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>

44
src/views/user/components/my-revenue.vue Normal file
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>

44
src/views/user/components/purchase-asset.vue Normal file
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>

8
src/views/user/index.vue
View File

@@ -1,5 +1,9 @@
<script setup lang="ts">
import { notificationsOutline, scanOutline, settingsOutline } from "ionicons/icons";
import AssetBalance from "./components/asset-balance.vue";
import IssuingAsset from "./components/issuing-asset.vue";
import MyRevenue from "./components/my-revenue.vue";
import PurchaseAsset from "./components/purchase-asset.vue";
import UserInfo from "./components/user-info.vue";
import WalletCard from "./components/wallet-card.vue";
</script>
@@ -24,6 +28,10 @@ import WalletCard from "./components/wallet-card.vue";
<IonContent :fullscreen="true" class="ion-padding">
<UserInfo />
<WalletCard />
<IssuingAsset />
<PurchaseAsset />
<AssetBalance />
<MyRevenue />
</IonContent>
</IonPage>
</template>