APPmy/src/app/tab3/tab3.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      消息
    </ion-title>
      <ion-button slot="end"  (click)="openSettingsPage()">
        <ion-icon name="settings-outline"></ion-icon>
      </ion-button>
      
  </ion-toolbar>
</ion-header>

<ion-content>
<div style="background-image: url(assets/img/c.jpg);">
  <ion-searchbar placeholder="输入关键字搜索"></ion-searchbar>
  <ion-card class="card">
    <ion-card-header >
      <ion-card-title style="color: rgb(0, 4, 255);">最新推荐</ion-card-title>
    </ion-card-header>
    <ion-card-content >
      <ion-avatar>
        <ion-img src="assets/img/a.png"></ion-img>
      </ion-avatar>
      <ion-label>用户名</ion-label><br>
      <ion-label>标签</ion-label><br>
      <ion-label>聊天内容</ion-label>
      <ion-button expand="block">免费提问</ion-button>
    </ion-card-content>
  </ion-card>
  <div style="display: flex; flex-direction: column;">
   <ion-segment [ngModelOptions]="{standalone:true}" [(ngModel)]="activeTab" (ionChange)="changeTab($event)">
    <ion-segment-button value="explore">
      <ion-icon name="chatbubble-ellipses"></ion-icon>
      评论和回复
    </ion-segment-button>
    <ion-segment-button value="video">
      <ion-icon  name="thumbs-up"></ion-icon>
      赞与收藏
    </ion-segment-button>
    <ion-segment-button value="search">
      <ion-icon name="person-add"></ion-icon>
      新增关注
    </ion-segment-button>
    <ion-segment-button value="system">
      <ion-icon name="notifications"></ion-icon>
      系统消息
    </ion-segment-button>
   </ion-segment>
   <div *ngIf="activeTab === 'explore'" >
    <ion-item>
      <ion-avatar slot="start">
        <ion-img src="assets/img/b.png"></ion-img>
      </ion-avatar>
      <ion-label>
        <h2>用户名</h2>
        <p>这是一条评论内容</p>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-avatar slot="start">
        <ion-img src="https://img2.baidu.com/it/u=2453029165,1962533557&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></ion-img>
      </ion-avatar>
      <ion-label>
        <h2>回复者用户名</h2>
        <p>这是一条回复内容</p>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-input placeholder="添加评论"></ion-input>
      <ion-button slot="end" (click)="sendComment()">
        <ion-icon name="send"></ion-icon>
      </ion-button>
    </ion-item>
   </div>
   <div *ngIf="activeTab === 'video'">
    <ion-item>
      <ion-avatar slot="start">
        <ion-img src="assets/avatar1.jpg"></ion-img>
      </ion-avatar>
      <ion-label>
        <h2>用户名1</h2>
        <p>这是一条内容1</p>
      </ion-label>
      <ion-buttons slot="end">
        <ion-button (click)="likePost(1)">
          <ion-icon name="heart" [color]="isPostLiked(1) ? 'danger' : 'medium'"></ion-icon>
        </ion-button>
        <ion-button (click)="toggleFavorite(1)">
          <ion-icon name="star" [color]="isPostFavorite(1) ? 'warning' : 'medium'"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-item>
    <ion-item>
      <ion-avatar slot="start">
        <ion-img src="assets/avatar2.jpg"></ion-img>
      </ion-avatar>
      <ion-label>
        <h2>用户名2</h2>
        <p>这是一条内容2</p>
      </ion-label>
      <ion-buttons slot="end">
        <ion-button (click)="likePost(2)">
          <ion-icon name="heart" [color]="isPostLiked(2) ? 'danger' : 'medium'"></ion-icon>
        </ion-button>
        <ion-button (click)="toggleFavorite(2)">
          <ion-icon name="star" [color]="isPostFavorite(2) ? 'warning' : 'medium'"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-item>  
   </div>
   <div *ngIf="activeTab === 'search'">
    <ion-item>
      <ion-avatar slot="start">
        <ion-img src="assets/avatar1.jpg"></ion-img>
      </ion-avatar>
      <ion-label>
        <h2>用户名1</h2>
        <p>这是一条内容1</p>
      </ion-label>
      <ion-button slot="end" (click)="toggleFollow(1)" color="primary" [fill]="isUserFollowed(1) ? 'solid' : 'outline'">
        {{ isUserFollowed(1) ? '已关注' : '关注' }}
      </ion-button>
    </ion-item>

    <ion-item>
      <ion-avatar slot="start">
        <ion-img src="assets/avatar2.jpg"></ion-img>
      </ion-avatar>
      <ion-label>
        <h2>用户名2</h2>
        <p>这是一条内容2</p>
      </ion-label>
      <ion-button slot="end" (click)="toggleFollow(2)" color="primary" [fill]="isUserFollowed(2) ? 'solid' : 'outline'">
        {{ isUserFollowed(2) ? '已关注' : '关注' }}
      </ion-button>
    </ion-item>
   </div>
   <div *ngIf="activeTab === 'system'">
    <ion-item>
      <ion-avatar slot="start">
        <ion-img src="assets/avatar1.jpg"></ion-img>
      </ion-avatar>
      <ion-label>
        <h2>系统消息标题1</h2>
        <p>这是一条系统消息内容1</p>
      </ion-label>
    </ion-item>

    <ion-item>
      <ion-avatar slot="start">
        <ion-img src="assets/avatar2.jpg"></ion-img>
      </ion-avatar>
      <ion-label>
        <h2>系统消息标题2</h2>
        <p>这是一条系统消息内容2</p>
      </ion-label>
    </ion-item>
   </div>
  </div>
</div>
</ion-content>