root/riwa-ionic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化标签组件布局，统一图标和标签的样式

Browse Source
This commit is contained in:
Seven
2025-12-24 05:54:06 +07:00
parent dd1dbd485f
commit 291eef6f60
1 changed files with 26 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/layout/default.vue
View File

@@ -10,37 +10,52 @@ const { t } = useI18n();
<ion-router-outlet /> <ion-router-outlet />
<ion-tab-bar slot="bottom"> <ion-tab-bar slot="bottom">
<ion-tab-button tab="riwa" href="/layout/riwa"> <ion-tab-button tab="riwa" href="/layout/riwa">
<ion-icon aria-hidden="true" :icon="compass" /> <div class="flex-col-center gap-1">
<ion-label>{{ t('tabs.riwa') }}</ion-label> <ion-icon aria-hidden="true" :icon="compass" class="icon" />
<ion-label>{{ t('tabs.riwa') }}</ion-label>
</div>
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="market" href="/layout/market"> <ion-tab-button tab="market" href="/layout/market">
<ion-icon aria-hidden="true" :icon="cellular" /> <div class="flex-col-center gap-1">
<ion-label>{{ t('tabs.market') }}</ion-label> <ion-icon aria-hidden="true" :icon="cellular" class="icon" />
<ion-label>{{ t('tabs.market') }}</ion-label>
</div>
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="trade" href="/layout/trade"> <ion-tab-button tab="trade" href="/layout/trade">
<ion-icon aria-hidden="true" :icon="swapHorizontal" /> <div class="flex-col-center gap-1">
<ion-label>{{ t('tabs.trade') }}</ion-label> <ion-icon aria-hidden="true" :icon="swapHorizontal" class="icon" />
<ion-label>{{ t('tabs.trade') }}</ion-label>
</div>
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="chat" href="/layout/chat"> <ion-tab-button tab="chat" href="/layout/chat">
<ion-icon aria-hidden="true" :icon="chatboxEllipses" /> <div class="flex-col-center gap-1">
<ion-label>{{ t('tabs.chat') }}</ion-label> <ion-icon aria-hidden="true" :icon="chatboxEllipses" class="icon" />
<ion-label>{{ t('tabs.chat') }}</ion-label>
</div>
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="user" href="/layout/user"> <ion-tab-button tab="user" href="/layout/user">
<ion-icon aria-hidden="true" :icon="personCircle" /> <div class="flex-col-center gap-1">
<ion-label>{{ t('tabs.user') }}</ion-label> <ion-icon aria-hidden="true" :icon="personCircle" class="icon" />
<ion-label>{{ t('tabs.user') }}</ion-label>
</div>
</ion-tab-button> </ion-tab-button>
</ion-tab-bar> </ion-tab-bar>
</ion-tabs> </ion-tabs>
</ion-page> </ion-page>
</template> </template>
<style scoped> <style scoped>
ion-tab-bar { ion-tab-bar {
height: 60px; height: 60px;
--background: var(--ion-background-color); --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> </style>