s202226701018/wisdom-app/src/app/tab2/tab2.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <div class="search-bar">
      <input type="text" placeholder="输入关键词搜索科普文章">
    </div>
    <div class="header">
      <ion-card>
        <ion-card-header>
          <ion-card-title>
            <ion-segment [scrollable]="true" value="hotdot" [value]="type" (ionChange)="typeChange($event)">
              <ion-segment-button value="hotdot" content-id="hotdot">
                <ion-label>热点</ion-label>
              </ion-segment-button>
              <ion-segment-button value="export" content-id="export">
                <ion-label>专家科普</ion-label>
              </ion-segment-button>
              <ion-segment-button value="sleep" content-id="sleep">
                <ion-label>睡眠</ion-label>
              </ion-segment-button>
              <ion-segment-button value="life" content-id="life">
                <ion-label>生活</ion-label>
              </ion-segment-button>
              <ion-segment-button value="male" content-id="male">
                <ion-label>男性</ion-label>
              </ion-segment-button>
              <ion-segment-button value="female" content-id="female">
                <ion-label>女性</ion-label>
              </ion-segment-button>
            </ion-segment>
          </ion-card-title>
        </ion-card-header>
      </ion-card>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content class="knowledge" [fullscreen]="true">
  
  <div class="content">
    <ion-card>
      <ion-card-content>
        <ion-segment-view>
          <ion-segment-content id="hotdot">
            <app-article-card *ngFor="let card of cards" [card]="card"></app-article-card>
          </ion-segment-content>

          <ion-segment-content id="export">
            <app-article-card *ngFor="let card of cards" [card]="card"></app-article-card>
          </ion-segment-content>

          <ion-segment-content id="sleep">
            <app-article-card *ngFor="let card of cards" [card]="card"></app-article-card>
          </ion-segment-content>

          <ion-segment-content id="life">
            <app-article-card *ngFor="let card of cards" [card]="card"></app-article-card>
          </ion-segment-content>
          <ion-segment-content id="male">
            <app-article-card *ngFor="let card of cards" [card]="card"></app-article-card>
          </ion-segment-content>
          <ion-segment-content id="female">
            <app-article-card *ngFor="let card of cards" [card]="card"></app-article-card>
          </ion-segment-content>
        </ion-segment-view>
      </ion-card-content>
    </ion-card>
  </div>
  
</ion-content>