From 291eef6f60d442a46e8f7d2f9f85c98cd7390421 Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Wed, 24 Dec 2025 05:54:06 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B8=83=E5=B1=80=EF=BC=8C=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E5=92=8C=E6=A0=87=E7=AD=BE=E7=9A=84=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/default.vue | 37 ++++++++++++++++++++++---------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/components/layout/default.vue b/src/components/layout/default.vue
index 1e35439..cc68ca6 100644
--- a/src/components/layout/default.vue
+++ b/src/components/layout/default.vue
@@ -10,37 +10,52 @@ const { t } = useI18n();
       <ion-router-outlet />
       <ion-tab-bar slot="bottom">
         <ion-tab-button tab="riwa" href="/layout/riwa">
-          <ion-icon aria-hidden="true" :icon="compass" />
-          <ion-label>{{ t('tabs.riwa') }}</ion-label>
+          <div class="flex-col-center gap-1">
+            <ion-icon aria-hidden="true" :icon="compass" class="icon" />
+            <ion-label>{{ t('tabs.riwa') }}</ion-label>
+          </div>
         </ion-tab-button>
 
         <ion-tab-button tab="market" href="/layout/market">
-          <ion-icon aria-hidden="true" :icon="cellular" />
-          <ion-label>{{ t('tabs.market') }}</ion-label>
+          <div class="flex-col-center gap-1">
+            <ion-icon aria-hidden="true" :icon="cellular" class="icon" />
+            <ion-label>{{ t('tabs.market') }}</ion-label>
+          </div>
         </ion-tab-button>
 
         <ion-tab-button tab="trade" href="/layout/trade">
-          <ion-icon aria-hidden="true" :icon="swapHorizontal" />
-          <ion-label>{{ t('tabs.trade') }}</ion-label>
+          <div class="flex-col-center gap-1">
+            <ion-icon aria-hidden="true" :icon="swapHorizontal" class="icon" />
+            <ion-label>{{ t('tabs.trade') }}</ion-label>
+          </div>
         </ion-tab-button>
 
         <ion-tab-button tab="chat" href="/layout/chat">
-          <ion-icon aria-hidden="true" :icon="chatboxEllipses" />
-          <ion-label>{{ t('tabs.chat') }}</ion-label>
+          <div class="flex-col-center gap-1">
+            <ion-icon aria-hidden="true" :icon="chatboxEllipses" class="icon" />
+            <ion-label>{{ t('tabs.chat') }}</ion-label>
+          </div>
         </ion-tab-button>
 
         <ion-tab-button tab="user" href="/layout/user">
-          <ion-icon aria-hidden="true" :icon="personCircle" />
-          <ion-label>{{ t('tabs.user') }}</ion-label>
+          <div class="flex-col-center gap-1">
+            <ion-icon aria-hidden="true" :icon="personCircle" class="icon" />
+            <ion-label>{{ t('tabs.user') }}</ion-label>
+          </div>
         </ion-tab-button>
       </ion-tab-bar>
     </ion-tabs>
   </ion-page>
 </template>
 
-<style scoped>
+<style  scoped>
 ion-tab-bar {
   height: 60px;
   --background: var(--ion-background-color);
+  box-shadow: 0px 0px 12px rgba(45, 213, 90, 0.21);
+  padding-bottom: var(--ion-safe-area-bottom);
+}
+.icon {
+  font-size: 1.5rem;
 }
 </style>