<ion-header>
  <ion-toolbar color="light">
    <ion-searchbar placeholder="搜索"></ion-searchbar>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon name="ellipsis-horizontal"></ion-icon>
      </ion-button>
    </ion-buttons>
    
  </ion-toolbar>
  <div class="user-actions">
    <ion-button color="#255,255,255">
      <ion-icon name="document"></ion-icon>
      我的订单
    </ion-button>
    <ion-button color="#255,255,255">
      <ion-icon name="cart"></ion-icon>
      购物车
    </ion-button>
    <ion-button color="#255,255,255">
      <ion-icon name="ticket"></ion-icon>
      红包/卡券
    </ion-button>
    <ion-button color="#255,255,255">
      <ion-icon name="time"></ion-icon>
      浏览记录
    </ion-button>
  </div>
  
</ion-header>

<ion-content>
  <ion-segment [(ngModel)]="segmentModel">
    <ion-segment-button value="aiRecommend">
      AI推荐
    </ion-segment-button>
    <ion-segment-button value="seasonHot">
      当季热门
    </ion-segment-button>
    <ion-segment-button value="styleChange">
      风格转换
    </ion-segment-button>
    <ion-segment-button value="selectedProducts">
      精选商品
    </ion-segment-button>
    <ion-segment-button value="favoriteProducts">
      收藏商品
    </ion-segment-button>
  </ion-segment>

  <!-- Content for each segment -->
  <ion-grid *ngIf="segmentModel === 'aiRecommend'">
    <!-- AI推荐内容 -->
    <div class="column-wrapper">
      <ion-card *ngFor="let item of aiRecommendItems">
        <img src="{{item.image}}" />
        <ion-card-content>
          <ion-label>{{item.label}}</ion-label>
        </ion-card-content>
      </ion-card>
    </div>
  </ion-grid>

  <ion-grid *ngIf="segmentModel === 'seasonHot'">
    <!-- 当季热门内容 -->
    <div class="column-wrapper">
      <ion-card *ngFor="let item of seasonHotItems">
        <img src="{{item.image}}" />
        <ion-card-content>
          <ion-label>{{item.label}}</ion-label>
        </ion-card-content>
      </ion-card>
    </div>
  </ion-grid>

  <ion-grid *ngIf="segmentModel === 'styleChange'">
    <!-- 风格转换内容 -->
    <div class="column-wrapper">
      <ion-card *ngFor="let item of styleChangeItems">
        <img src="{{item.image}}" />
        <ion-card-content>
          <ion-label>{{item.label}}</ion-label>
        </ion-card-content>
      </ion-card>
    </div>
  </ion-grid>

  <ion-grid *ngIf="segmentModel === 'selectedProducts'">
    <!-- 精选商品内容 -->
    <div class="column-wrapper">
      <ion-card *ngFor="let item of selectedProductsItems">
        <img src="{{item.image}}" />
        <ion-card-content>
          <ion-label>{{item.label}}</ion-label>
        </ion-card-content>
      </ion-card>
    </div>
  </ion-grid>

  <ion-grid *ngIf="segmentModel === 'favoriteProducts'">
    <!-- 收藏商品内容 -->
    <div class="column-wrapper">
      <ion-card *ngFor="let item of favoriteProductsItems">
        <img src="{{item.image}}" />
        <ion-card-content>
          <ion-label>{{item.label}}</ion-label>
        </ion-card-content>
      </ion-card>
    </div>
  </ion-grid>

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button (click)="toUp()" color="light">
      <ion-icon name="arrow-up"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>