First_APP/src/app/tab1/tab1.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start" style="flex: 0 0 85%;">
      <ion-searchbar placeholder="搜索"></ion-searchbar>
    </ion-buttons>
    <ion-buttons slot="end" style="flex: 0 0 15%;">
      <ion-button>
        <ion-icon slot="icon-only" name="mail"></ion-icon>
      </ion-button>
      <ion-button>
        <ion-icon slot="icon-only" name="server-sharp"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-segment>
    <ion-segment-button value="follow">关注</ion-segment-button>
    <ion-segment-button value="discover">发现</ion-segment-button>
    <ion-segment-button value="activity">活动</ion-segment-button>
  </ion-segment>
  
  <div class="filter-area">
    <ion-row>
      <ion-col size="4" *ngFor="let item of filterItems">
        <ion-card>
          <ion-card-content>{{item}}</ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </div>
  
  <div class="friend-circles">
    <!-- Repeat the following structure for each friend circle card -->
    <ion-card>
      <ion-card-header>
        <ion-card-title>朋友圈的一句话</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>客户id</p>
      </ion-card-content>
    </ion-card>

    <ion-card>
      <ion-card-header>
        <ion-card-title>朋友圈的一句话</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>客户id</p>
      </ion-card-content>
    </ion-card>

    <ion-card>
      <ion-card-header>
        <ion-card-title>朋友圈的一句话</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>客户id</p>
      </ion-card-content>
    </ion-card>

    <ion-card>
      <ion-card-header>
        <ion-card-title>朋友圈的一句话</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>客户id</p>
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>