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

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']

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>