nova-live/projects/live-app/src/modules/tabs/tabs/tabs.component.html

<div [ngClass]="{
  'tabs': true,
  'pad-but-ios': deviceSer.isIOS
}">
  @for (item of option; track $index) {
  <div class="buttom {{ $index == 99 ? 'center' : '' }}" (click)="goTabPage($index, item.url)">
    <img class="icon-img {{ $index == 99 ? '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="notice">
      <ion-icon name="notice-outline"></ion-icon>
      <ion-label>消息</ion-label>
    </ion-tab-button>

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

    <!-- <ion-tab-button tab="order">
      <ion-icon name="order-outline"></ion-icon>
      <ion-label>排名</ion-label>
    </ion-tab-button> -->

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

<app-flutter-comp></app-flutter-comp>