iakz/src/app/tab2/tab2.page.html

<ion-header>
  <ion-toolbar color="" class="header">
    <ion-buttons slot="start">
      <ion-button>
        <ion-icon name="menu"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>User Profile</ion-title>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon name="scan"></ion-icon>
      </ion-button>
      <ion-button>
        <ion-icon name="settings"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="user-profile">
    <div class="user-info">
      <img src="assets/user-avatar.jpg" alt="User Avatar">
      <h3>不吃粉面菜蛋</h3>
      <p>ID:0210033</p>
      <p>个人简介</p>
      <div class="info-icons">
        <div class="icon-wrapper">
          <ion-icon name="male"></ion-icon>
          <span>21</span>
        </div>
        <div class="action-buttons">
          <span>关注 104</span>
          <span>粉丝 62</span>
          <span>获赞 896</span>
        </div>
      </div>
    </div>
    <div class="user-actions">
      <ion-button color ="rgba(255, 255, 255, 0.4)">
        <ion-icon name="cart"></ion-icon>
        购物车
      </ion-button>
      <ion-button color="rgba(255, 255, 255, 0.4)">
        <ion-icon name="document"></ion-icon>
        我的订单
      </ion-button>
      <ion-button color="rgba(255, 255, 255, 0.4)">
        <ion-icon name="time"></ion-icon>
        浏览历史
      </ion-button>
    </div>
  </div>
  <div class="content">
    <ion-segment>
      <ion-segment-button value="works" checked>
        作品
      </ion-segment-button>
      <ion-segment-button value="likes">
        点赞
      </ion-segment-button>
      <ion-segment-button value="favorites">
        收藏
      </ion-segment-button>
    </ion-segment>

    <ion-grid>
      <ion-row>
        <ion-col size="4" *ngFor="let item of items">
          <ion-card>
            <img src="{{item.image}}" alt="Item Image">
            <ion-card-content>
              <ion-icon name="heart"></ion-icon> {{item.likes}}
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>

<ion-footer>
  <ion-toolbar color="light">
    <ion-buttons slot="start">
      <ion-button [routerLink]="'/tabs/tab1'" routerDirection="root">
        <ion-icon name="home"></ion-icon>
      </ion-button>
      <ion-button [routerLink]="'/tabs/tab2'" routerDirection="root">
        <ion-icon name="cart"></ion-icon>
      </ion-button>
      <ion-button [routerLink]="'/tabs/tab3'" routerDirection="root">
        <ion-icon name="chatbox"></ion-icon>
      </ion-button>
      <ion-button [routerLink]="'/tabs/tab4'" routerDirection="root">
        <ion-icon name="person"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>