69 lines
2.2 KiB
Vue
69 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { cellular, chatboxEllipses, compass, personCircle, swapHorizontal } from "ionicons/icons";
|
|
|
|
const { t } = useI18n();
|
|
</script>
|
|
|
|
<template>
|
|
<ion-page>
|
|
<ion-tabs>
|
|
<ion-router-outlet />
|
|
<ion-tab-bar slot="bottom">
|
|
<ion-tab-button tab="riwa" href="/layout/riwa">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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="notify" href="/layout/notify">
|
|
<div class="flex-col-center gap-1">
|
|
<ion-icon aria-hidden="true" :icon="chatboxEllipses" class="icon" />
|
|
<ion-label>{{ t('tabs.notify') }}</ion-label>
|
|
</div>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="user" href="/layout/user">
|
|
<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>
|
|
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>
|