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" class="content-background">
  <!-- 搜索栏 -->
  <div class="search-container">
    <ion-searchbar placeholder="搜索" class="custom-searchbar"></ion-searchbar>
  </div>

  <!-- 分类区域（可横向滑动） -->
  <div class="category-scroll">
    <div class="category-scroll-inner">
      <ion-grid>
        <ion-row class="category-row">
          <ion-col size="3" *ngFor="let category of categories" class="category-col">
            <div class="category-item">
              <div class="category-image-wrapper">
                <img [src]="category.image" alt="{{category.name}}" class="category-image">
              </div>
              <div class="category-text">{{ category.name }}</div>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
  </div>

  <!-- 商品卡片列表区域 -->
  <div class="product-container">
    <ng-container *ngFor="let product of products">
      <ion-card class="product-card" (click)="openDetailModal(product)">
        <ion-card-header class="product-card-header">
          <div class="product-tag">{{product.title}}</div>
        </ion-card-header>
        <ion-card-content class="product-card-content">
          <div class="product-image-wrapper">
            <img [src]="product.image" alt="{{product.name}}" class="product-image">
          </div>
          <div class="product-info">
            <h3 class="product-name">{{product.name}}</h3>
            <div class="product-price">{{product.price}}</div>
          </div>
        </ion-card-content>
      </ion-card>
    </ng-container>
  </div>

  <!-- 底部弹出模态 -->
  <ion-modal [isOpen]="showDetailModal" cssClass="bottom-modal" backdropDismiss="true" (ionModalDidDismiss)="closeDetailModal()">
    <ion-header>
      <ion-toolbar>
        <ion-title>详情</ion-title>
        <ion-buttons slot="end">
          <ion-button fill="clear" (click)="closeDetailModal()">
            <ion-icon name="close"></ion-icon>
          </ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <div class="modal-content" *ngIf="currentProduct">
        <div class="image-container">
          <img [src]="currentProduct.image" alt="药品图片" class="medicine-image">
        </div>
        <h2 class="product-name">{{currentProduct.name}}</h2>
        <p><strong>价格：</strong>{{currentProduct.price}}</p>
        <p><strong>是否处方药：</strong>{{currentProduct.prescription ? '是' : '否'}}</p>
        <p><strong>用法用量：</strong>{{currentProduct.usage}}</p>
        <p><strong>主治功能：</strong>{{currentProduct.function}}</p>
        <p><strong>规格：</strong>{{currentProduct.spec}}</p>
        <p><strong>成分：</strong>{{currentProduct.composition}}</p>
        <p><strong>禁忌：</strong>{{currentProduct.taboo}}</p>
      </div>
    </ion-content>
  </ion-modal>
</ion-content>