iakz/src/app/tab1/tab1.page.html

<ion-header>
  <ion-toolbar color="light">
    <ion-buttons slot="start">
      <ion-button>
        <ion-icon name="menu"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-segment [(ngModel)]="segmentModel">
      <ion-segment-button value="follow">
        关注
      </ion-segment-button>
      <ion-segment-button value="recommend">
        推荐
      </ion-segment-button>
      <ion-segment-button value="nearby">
        附近
      </ion-segment-button>
    </ion-segment>
    <ion-buttons slot="end">
      <ion-button (click)="search()">
        <ion-icon name="search"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="column-wrapper" *ngIf="segmentModel === 'follow'">
    <div class="image-container">
      <ion-card *ngFor="let item of FollowItems">
        <img src="{{item.image}}" alt="Item Image">
        <ion-card-header>
          <ion-card-title>{{item.title}}</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <div class="card-footer">
            <div class="avatar-section">
              <ion-avatar>
                <img src="{{item.avatar}}" alt="Item Avatar">
              </ion-avatar>
            </div>
            <div class="heart-section">
              <ion-button fill="light" (click)="like()">
                <ion-icon name="heart"></ion-icon> {{item.likes}}
              </ion-button>
            </div>
          </div>
        </ion-card-content>
      </ion-card>
    </div>
  </div>

  <div class="column-wrapper" *ngIf="segmentModel === 'recommend'">
    <div class="image-container">
      <ion-card *ngFor="let item of RecommendItems">
        <img src="{{item.image}}" alt="Item Image">
        <ion-card-header>
          <ion-card-title>{{item.title}}</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <div class="card-footer">
            <div class="avatar-section">
              <ion-avatar>
                <img src="{{item.avatar}}" alt="Item Avatar">
              </ion-avatar>
            </div>
            <div class="heart-section">
              <ion-button fill="light" (click)="like()">
                <ion-icon name="heart"></ion-icon> {{item.likes}}
              </ion-button>
            </div>
          </div>
        </ion-card-content>
      </ion-card>
    </div>
  </div>

  <div class="column-wrapper" *ngIf="segmentModel === 'nearby'">
    <div class="image-container">
      <ion-card *ngFor="let item of NearbyItems">
        <img src="{{item.image}}" alt="Item Image">
        <ion-card-header>
          <ion-card-title>{{item.title}}</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <div class="card-footer">
            <div class="avatar-section">
              <ion-avatar>
                <img src="{{item.avatar}}" alt="Item Avatar">
              </ion-avatar>
            </div>
            <div class="heart-section">
              <ion-button fill="light" (click)="like()">
                <ion-icon name="heart"></ion-icon> {{item.likes}}
              </ion-button>
            </div>
          </div>
        </ion-card-content>
      </ion-card>
    </div>
  </div>

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button (click)="addNew()" color=light>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>