From 1cfa5e8618efa38b99979b899257cf37a3399f7d Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Wed, 17 Dec 2025 03:59:38 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0IonRippleEffect?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=88=B0wallet-card=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=85=85=E5=80=BC=E5=92=8C=E6=8F=90=E7=8E=B0=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E7=9A=84=E4=BA=A4=E4=BA=92=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                           |  2 ++
 src/views/user/components/wallet-card.vue | 30 ++++++++++++++++-------
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 0884ad2..88d5c43 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -36,6 +36,7 @@ declare module 'vue' {
     IonPage: typeof import('@ionic/vue')['IonPage']
     IonRadio: typeof import('@ionic/vue')['IonRadio']
     IonRadioGroup: typeof import('@ionic/vue')['IonRadioGroup']
+    IonRippleEffect: typeof import('@ionic/vue')['IonRippleEffect']
     IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']
     IonSearchbar: typeof import('@ionic/vue')['IonSearchbar']
     IonSelect: typeof import('@ionic/vue')['IonSelect']
@@ -85,6 +86,7 @@ declare global {
   const IonPage: typeof import('@ionic/vue')['IonPage']
   const IonRadio: typeof import('@ionic/vue')['IonRadio']
   const IonRadioGroup: typeof import('@ionic/vue')['IonRadioGroup']
+  const IonRippleEffect: typeof import('@ionic/vue')['IonRippleEffect']
   const IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']
   const IonSearchbar: typeof import('@ionic/vue')['IonSearchbar']
   const IonSelect: typeof import('@ionic/vue')['IonSelect']
diff --git a/src/views/user/components/wallet-card.vue b/src/views/user/components/wallet-card.vue
index 850c048..3298a24 100644
--- a/src/views/user/components/wallet-card.vue
+++ b/src/views/user/components/wallet-card.vue
@@ -1,4 +1,6 @@
 <script lang='ts' setup>
+import IcRoundArrowCircleDown from "~icons/ic/round-arrow-circle-down";
+import IcRoundArrowCircleUp from "~icons/ic/round-arrow-circle-up";
 import RechargeChannel from "./recharge-channel.vue";
 
 const { t } = useI18n();
@@ -31,17 +33,27 @@ onMounted(() => {
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="px-2.5 pb-5 bg-(--ion-card-background)">
-      <ion-buttons class="gap-2.5" expand="block">
-        <ion-button id="open-recharge-modal" expand="block" fill="clear">
-          {{ t("wallet.recharge") }}
-        </ion-button>
+  <div class="flex mt-7 gap-10">
+    <div id="open-recharge-modal" class="flex-col-center">
+      <ion-ripple-effect />
+      <ion-button shape="round" color="success" size="large">
+        <IcRoundArrowCircleDown slot="icon-only" />
+      </ion-button>
+      <div class="text-center mt-2 text-sm font-medium text-text-500">
+        {{ t("wallet.recharge") }}
+      </div>
+    </div>
 
-        <ion-button expand="block" fill="clear" @click="handleWithdraw">
-          {{ t("wallet.withdraw") }}
-        </ion-button>
-      </ion-buttons>
+    <div class="flex-col-center" @click="handleWithdraw">
+      <ion-ripple-effect />
+      <ion-button shape="round" color="success" size="large">
+        <IcRoundArrowCircleUp slot="icon-only" />
+      </ion-button>
+      <div class="text-center mt-2 text-sm font-medium text-text-500">
+        {{ t("wallet.withdraw") }}
+      </div>
     </div>
   </div>