DYP/src/app/tab3/tab3.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button>
        <ion-icon name="wallet-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>我的</ion-title>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon name="menu-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="profile-header">
    <ion-avatar class="profile-avatar"  (click)="goToLogin()" >
        <img src="https://ionicframework.com/docs/img/demos/card-media.png"  />
    </ion-avatar>
    <div class="profile-info">
      <div class="profile-name">
        <ion-card-title>{{user?.get("username") || '未登录'}}</ion-card-title>
        <ion-card-subtitle *ngIf="!user?.id">请您登陆后继续使用</ion-card-subtitle>
        <ion-card-subtitle *ngIf="user?.id">{{user?.get("name")}}-{{user?.get("gender")}}</ion-card-subtitle>
      </div>
    </div>
    <ion-button fill="outline" expand="block" (click)="goToEditInfo()" class="edit-button">
      <ion-icon slot="icon-only" name="create-outline"></ion-icon>
    </ion-button>
  </div>


  <ion-card>
    <ion-card-content>
      <ion-row>
        <ion-col>
          <ion-label>0</ion-label>
          <ion-note>获赞</ion-note>
        </ion-col>
        <ion-col>
          <ion-label>0</ion-label>
          <ion-note>关注</ion-note>
        </ion-col>
        <ion-col>
          <ion-label>0</ion-label>
          <ion-note>足迹</ion-note>
        </ion-col>
        <ion-col>
          <ion-label>0</ion-label>
          <ion-note>访客</ion-note>
        </ion-col>
        <ion-col>
          <ion-label>0</ion-label>
          <ion-note>粉丝</ion-note>
        </ion-col>
      </ion-row>
    </ion-card-content>
  </ion-card>

  <ion-list>
    <ion-item>
      <ion-label>
        <ion-icon name="location-outline"></ion-icon>
        <span>江西</span><span>Steam专区</span>
      </ion-label>
    </ion-item>
  </ion-list>

  <ion-segment [(ngModel)]="segment">
    <ion-segment-button value="posts">
      <ion-label>动态</ion-label>
    </ion-segment-button>
    <ion-segment-button value="about">
      <ion-label>关于ta</ion-label>
    </ion-segment-button>
  </ion-segment>

  <div [ngSwitch]="segment">
    <ion-list *ngSwitchCase="'posts'">
      <ion-item>
        <ion-label>
          <h2>哈哈</h2>
          <p>发布于 07-04</p>
        </ion-label>
        <ion-thumbnail slot="end">
          <img src="https://example.com/game-icons.jpg" />
        </ion-thumbnail>
      </ion-item>
    </ion-list>

    <div *ngSwitchCase="'about'">
      <p>这是关于ta的内容</p>
    </div>
  </div>

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button (click)="gotoDynamic()">
      <ion-icon name="camera-outline"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>