app-snbw/myapp/src/app/crop-intro/crop-intro.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>农作物百科</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-searchbar placeholder="搜索农作物..."></ion-searchbar>

  <ion-list>
    <ion-item *ngFor="let crop of crops" [detail]="true" (click)="openCropDetail(crop)">
      <ion-avatar slot="start">
        <img [src]="crop.image">
      </ion-avatar>
      <ion-label>
        <h2>{{crop.name}}</h2>
        <p>{{crop.summary}}</p>
      </ion-label>
      <ion-badge slot="end" [color]="crop.season === '春季' ? 'success' : 'warning'">
        {{crop.season}}
      </ion-badge>
    </ion-item>
  </ion-list>
</ion-content>