DYP/src/app/explore-container/explore-container.component.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>文库</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 首页 -->
  <ion-grid>
    <!-- 顶部导航 -->
    <ion-row>
      <ion-col>
        <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
          <ion-segment-button value="online">
            <ion-label>线上陪玩</ion-label>
          </ion-segment-button>
          <ion-segment-button value="offline">
            <ion-label>线下陪玩</ion-label>
          </ion-segment-button>
          <ion-segment-button value="search">
            <ion-label>搜一搜</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-col>
    </ion-row>

    <!-- 功能区域 -->
    <ion-row *ngIf="segment === 'online'">
      <!-- 线上游戏类型 -->
      <ion-col size="6" *ngFor="let game of onlineGames">
        <ion-card>
          <ion-card-header>
            <ion-card-title>{{ game.name }}</ion-card-title>
          </ion-card-header>
        </ion-card>
      </ion-col>
    </ion-row>
    <ion-row *ngIf="segment === 'offline'">
      <!-- 线下游戏类型 -->
      <ion-col size="6" *ngFor="let game of offlineGames">
        <ion-card>
          <ion-card-header>
            <ion-card-title>{{ game.name }}</ion-card-title>
          </ion-card-header>
        </ion-card>
      </ion-col>
    </ion-row>

    <!-- 陪玩类型 -->
    <ion-row>
      <ion-col size="6" *ngFor="let type of companionTypes">
        <ion-chip>
          <ion-label>{{ type }}</ion-label>
        </ion-chip>
      </ion-col>
    </ion-row>

    <!-- 推荐的陪玩 -->
    <ion-row>
      <ion-col size="12" *ngFor="let companion of recommendedCompanions">
        <ion-card>
          <ion-item>
            <ion-avatar slot="start">
              <img [src]="companion.avatar" />
            </ion-avatar>
            <ion-label>
              <h2>{{ companion.name }}</h2>
              <p>{{ companion.info }}</p>
            </ion-label>
          </ion-item>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>