feat: 添加IonRippleEffect组件到wallet-card，优化充值和提现按钮的交互效果

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>