From ba82a05b31e76edc666269d731fad4d62376e4f9 Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Sun, 14 Dec 2025 21:17:34 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=B5=84=E4=BA=A7?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E7=BB=84=E4=BB=B6=E5=B9=B6=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/user/components/asset-balance.vue  | 44 ++++++++++++++++++++
 src/views/user/components/issuing-asset.vue  | 44 ++++++++++++++++++++
 src/views/user/components/my-revenue.vue     | 44 ++++++++++++++++++++
 src/views/user/components/purchase-asset.vue | 44 ++++++++++++++++++++
 src/views/user/index.vue                     |  8 ++++
 5 files changed, 184 insertions(+)
 create mode 100644 src/views/user/components/asset-balance.vue
 create mode 100644 src/views/user/components/issuing-asset.vue
 create mode 100644 src/views/user/components/my-revenue.vue
 create mode 100644 src/views/user/components/purchase-asset.vue

diff --git a/src/views/user/components/asset-balance.vue b/src/views/user/components/asset-balance.vue
new file mode 100644
index 0000000..cad2e9b
--- /dev/null
+++ b/src/views/user/components/asset-balance.vue
@@ -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>
diff --git a/src/views/user/components/issuing-asset.vue b/src/views/user/components/issuing-asset.vue
new file mode 100644
index 0000000..ace040c
--- /dev/null
+++ b/src/views/user/components/issuing-asset.vue
@@ -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>
diff --git a/src/views/user/components/my-revenue.vue b/src/views/user/components/my-revenue.vue
new file mode 100644
index 0000000..2717e7f
--- /dev/null
+++ b/src/views/user/components/my-revenue.vue
@@ -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>
diff --git a/src/views/user/components/purchase-asset.vue b/src/views/user/components/purchase-asset.vue
new file mode 100644
index 0000000..066168a
--- /dev/null
+++ b/src/views/user/components/purchase-asset.vue
@@ -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>
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index a06c8e2..f501c92 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -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>