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

<ion-header [translucent]="true">
  <ion-toolbar class="custom-toolbar">
    <ion-title class="custom-title">
      药品商城
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-searchbar placeholder="搜索"></ion-searchbar>

  <ion-grid>
    <ion-row>
      <ion-col size="2" *ngFor="let category of categories">
        <ion-button fill="">
          <div class="category-image-wrapper">
            <img [src]="category.image" alt="{{ category.name }}" class="category-image">
          </div>
          <div class="category-name">{{ category.name }}</div>
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- <ion-card>
    <ion-card-header>
      <ion-card-title>健康护肤专场</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-item *ngFor="let product of products">
        <ion-thumbnail slot="start">
          <img [src]="product.image">
        </ion-thumbnail>
        <ion-label>
          <h2>{{ product.name }}</h2>
          <p>{{ product.price }}</p>
        </ion-label>
      </ion-item>
    </ion-card-content>
  </ion-card> -->
  <ion-card>
    <app-sale-card *ngFor="let product of products" [product]="product"></app-sale-card>
  </ion-card>

  
</ion-content>