<script setup lang="ts">
import { grid, home, person, radio, wallet } from "ionicons/icons";

const { t } = useI18n();
</script>

<template>
  <ion-page>
    <ion-tabs>
      <ion-router-outlet />
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="home" href="/layout/home">
          <div class="flex-col-center gap-1">
            <ion-icon aria-hidden="true" :icon="home" class="icon" />
            <ion-label>改革先锋</ion-label>
          </div>
        </ion-tab-button>

        <ion-tab-button tab="service" href="/layout/service">
          <div class="flex-col-center gap-1">
            <ion-icon aria-hidden="true" :icon="radio" class="icon" />
            <ion-label>思想引领</ion-label>
          </div>
        </ion-tab-button>

        <ion-tab-button tab="video" href="/layout/product">
          <div class="flex-col-center gap-1">
            <ion-icon aria-hidden="true" :icon="wallet" class="icon" />
            <ion-label>业务办理</ion-label>
          </div>
        </ion-tab-button>

        <ion-tab-button tab="profile" href="/layout/profile">
          <div class="flex-col-center gap-1">
            <ion-icon aria-hidden="true" :icon="person" class="icon" />
            <ion-label>我的事务</ion-label>
          </div>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

<style  scoped>
ion-tab-bar {
  height: 70px;
  --background: white;
  box-shadow: 0px 0px 12px #cfe3ff;
  padding-bottom: var(--ion-safe-area-bottom);
}
.icon {
  font-size: 1.5rem;
}
ion-label {
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 2px;
}
</style>
