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

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>

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>

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>

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>

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>