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

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      健康科普
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="knowledge" [fullscreen]="true">
  <div class="search-bar">
    <input type="text" placeholder="输入关键词搜索科普文章">
  </div>
  <div class="content">
    <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-subtitle>请输入账号密码</ion-card-subtitle> -->
      </ion-card-header>
    
      <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>

  <div class="knowledge-cards">
      
  </div>

</ion-content>