nova-live/projects/live-app/src/moduls/home/tabs/tabs.component.html

<div class="tabs">
  @for (item of option; track $index) {
  <div
    class="buttom {{ $index == 2 ? 'center' : '' }}"
    (click)="goTabPage($index, item.url)"
  >
    <img
      class="icon-img {{ $index == 2 ? 'box-icon' : '' }}"
      src="{{ $index == active ? item.active : item.src }}"
      alt=""
    />
    <ion-label [style.color]="active == $index ? '#FD7884' : '#808080'">{{
      item.name
    }}</ion-label>
  </div>
  }
</div>

<ion-tabs>
  <ion-tab-bar style="height: 0vw" slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home-outline"></ion-icon>
      <ion-label>首页</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="center">
      <ion-icon name="ban-outline"></ion-icon>
      <ion-label>消息</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="center">
      <ion-icon name="ban-outline"></ion-icon>
      <ion-label>直播</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="center">
      <ion-icon name="ban-outline"></ion-icon>
      <ion-label>排名</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="my">
      <ion-icon name="person"></ion-icon>
      <ion-label>我的</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>