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

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

@@ -10,28 +10,38 @@ 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" />
<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" />
<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" />
<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" />
<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" />
<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>
@@ -42,5 +52,10 @@ const { t } = useI18n();
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>