iakz/src/app/tab4/tab4.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-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-avatar1.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 [(ngModel)]="segmentModel">
      <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 *ngIf="segmentModel === 'works'">
      <ion-row>
        <ion-col size="4" *ngFor="let item of WorksItems">
          <div class="image-container">
            <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>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>

    <ion-grid *ngIf="segmentModel === 'likes'">
      <ion-row>
        <ion-col size="4" *ngFor="let item of LikesItems">
          <div class="image-container">
            <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>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>

    <ion-grid *ngIf="segmentModel === 'favorites'">
      <ion-row>
        <ion-col size="4" *ngFor="let item of FavoritesItems">
          <div class="image-container">
            <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>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>