app-recipe/myapp/src/app/tabs/tabs.page.html

<!-- tabs.page.html -->
<ion-tabs>

  <ion-tab-bar slot="bottom" class="custom-tab-bar">
    <!-- 首页Tab -->
    <ion-tab-button tab="tab1" href="/tabs/tab1">
      <ion-icon aria-hidden="true" name="home-outline"></ion-icon>
      <ion-label>首页</ion-label>
      <ion-badge *ngIf="homeBadgeCount > 0" color="danger" class="badge">{{homeBadgeCount}}</ion-badge>
    </ion-tab-button>

    <!-- AI咨询Tab (修改为简约风格) -->
    <ion-tab-button tab="tab2" href="/tabs/tab2">
      <ion-icon aria-hidden="true" name="chatbubble-outline"></ion-icon>
      <ion-label>咨询</ion-label>
    </ion-tab-button>

    <!-- 个人中心Tab -->
    <ion-tab-button tab="tab3" href="/tabs/tab3">
      <ion-icon aria-hidden="true" name="person-outline"></ion-icon>
      <ion-label>我的</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>