s202226701018/wisdom-app/src/app/detail-modal/detail-modal.component.html

<ion-header>
  <ion-toolbar>
    <ion-title>{{ product?.get('name') || '药品详情' }}</ion-title>
    <ion-buttons slot="end">
      <ion-button fill="clear" (click)="dismiss()">
        <ion-icon name="close"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

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