app-aiqvyou/src/app/tab3/tab3.page.html

<ion-header [translucent]="true">

  <ion-toolbar>
    <ion-buttons slot="start" (click)="GoToLoginPage()">
      <ion-button>
        <ion-icon name="settings-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>个人中心</ion-title>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon name="mail-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>


<ion-content>
  <!-- 个人信息 -->
    <ion-card-content>

      <ion-row class="user-info-row">
        <ion-col size="auto" class="enlarge-col">
          <ion-avatar (click)="fileInput.click()">
            <ion-img [src]="userImage" ></ion-img>
          </ion-avatar>
          <input type="file" #fileInput (change)="onFileSelected($event)" style="display: none">

        </ion-col>
        <ion-col size="auto" class="info-col">
          <ion-label><h1>用户名：示例用户</h1></ion-label>
          <ion-label>ID: 23284787</ion-label>
          &nbsp;
          <ion-label>IP属地: 南昌</ion-label>
        </ion-col> 
      </ion-row>

      <ion-row>
        <ion-col>
          <ion-label>关注: 7</ion-label>
        </ion-col>
        <ion-col>
          <ion-label>粉丝: 0</ion-label>
        </ion-col>
        <ion-col>
          <ion-label>获赞: 0</ion-label>
        </ion-col>
      </ion-row>
    </ion-card-content>

    
  <div class="middle-section">
    <ion-card *ngFor="let card of cards" class="order-card">
      <ion-card-header>
        <span style="font-size: 16px;">{{ card.title }}</span>
      </ion-card-header>
      <ion-card-content>
        <span style="font-size: 14px;">{{ card.content }}</span>
      </ion-card-content>
    </ion-card>
  </div> 


  <ion-content>
    <ion-segment [(ngModel)]="currentTab">
      <ion-segment-button value="unpublished">
        未发布
      </ion-segment-button>
      <ion-segment-button value="published">
        已发布
      </ion-segment-button>
      <ion-segment-button value="liked">
        点赞
      </ion-segment-button>
      <ion-segment-button value="favorited">
        收藏
      </ion-segment-button>
    </ion-segment>
  
    <div *ngIf="currentTab === 'unpublished'">
      <p>未发布内容</p>
    </div>
  
    <div *ngIf="currentTab === 'published'">
      <p>已发布内容</p>
    </div>
  
    <div *ngIf="currentTab === 'liked'">
      <p>点赞内容</p>
    </div>
  
    <div *ngIf="currentTab === 'favorited'">
      <p>收藏内容</p>
    </div>
  </ion-content>

</ion-content>