app-recipe/myapp/src/app/tab1/page-selectlist/page-selectlist-detail/page-selectlist-detail.page.html

<ion-header [translucent]="true" class="recipe-header">
  <ion-toolbar color="light">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/" text="" color="dark"></ion-back-button>
    </ion-buttons>
    <ion-title class="header-title">菜谱详情</ion-title>
    <ion-buttons slot="end">
      <ion-button fill="clear" color="dark">
        <ion-icon slot="icon-only" name="bookmark-outline"></ion-icon>
      </ion-button>
      <ion-button fill="clear" color="dark">
        <ion-icon slot="icon-only" name="share-social-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="recipe-content">
  <!-- 菜品图片 -->
  <div class="recipe-image-container">
    <img [src]="recipe?.get('imageUrl') || 'assets/images/default-food.jpg'" 
         [alt]="recipe?.get('title')" 
         class="recipe-image">
    <div class="image-overlay">
      <ion-chip color="warning" outline>
        <ion-icon name="time-outline" slot="start"></ion-icon>
        {{ recipe?.get('cookTime') || '30分钟' }}
      </ion-chip>
    </div>
  </div>

  <!-- 菜品名称和评分 -->
  <div class="recipe-info-section">
    <div class="recipe-header">
      <h1 class="recipe-title">{{ recipe?.get('title') }}</h1>
      <div class="recipe-rating">
        <ion-icon name="star" color="warning"></ion-icon>
        <ion-icon name="star" color="warning"></ion-icon>
        <ion-icon name="star" color="warning"></ion-icon>
        <ion-icon name="star" color="warning"></ion-icon>
        <ion-icon name="star-outline" color="warning"></ion-icon>
        <span class="rating-text">4.5</span>
      </div>
    </div>

    <!-- 菜品元信息 -->
    <div class="recipe-meta">
      <ion-item lines="none" class="meta-item">
        <ion-icon slot="start" name="time-outline" color="medium"></ion-icon>
        <ion-label>{{ recipe?.get('prepTime') || '10分钟' }} 准备</ion-label>
      </ion-item>
      
      <ion-item lines="none" class="meta-item">
        <ion-icon slot="start" name="flame-outline" color="medium"></ion-icon>
        <ion-label>{{ recipe?.get('difficulty') || '中等' }}难度</ion-label>
      </ion-item>
      
      <ion-item lines="none" class="meta-item">
        <ion-icon slot="start" name="people-outline" color="medium"></ion-icon>
        <ion-label>{{ recipe?.get('servings') || 2 }} 人份</ion-label>
      </ion-item>
    </div>

    <!-- 菜品描述 -->
    <p class="recipe-description" *ngIf="recipe?.get('description')">
      {{ recipe?.get('description') }}
    </p>
  </div>

  <!-- 食材部分 -->
  <ion-card class="section-card">
    <ion-card-header class="section-header">
      <ion-card-title class="section-title">
        <ion-icon name="basket-outline" class="section-icon"></ion-icon>
        所需食材
      </ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-list lines="none" class="ingredient-list">
        <ion-item *ngFor="let ingredient of recipe?.get('ingredients')" class="ingredient-item">
          <ion-icon name="ellipse" slot="start" class="bullet-icon"></ion-icon>
          <ion-label class="ingredient-name">{{ ingredient.name }}</ion-label>
          <ion-note slot="end" color="primary" class="ingredient-amount">{{ ingredient.amount }}</ion-note>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>

  <!-- 操作步骤 -->
  <ion-card class="section-card">
    <ion-card-header class="section-header">
      <ion-card-title class="section-title">
        <ion-icon name="restaurant-outline" class="section-icon"></ion-icon>
        操作步骤
      </ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-list lines="none" class="step-list">
        <ion-item *ngFor="let step of recipe?.get('steps'); let i = index" class="step-item">
          <ion-avatar slot="start" class="step-number">
            {{ i + 1 }}
          </ion-avatar>
          <ion-label class="ion-text-wrap step-text">
            <p>{{ step }}</p>
          </ion-label>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>

  <!-- 底部操作按钮 -->
  <div class="action-buttons">
    <ion-button expand="block" color="success" shape="round" class="cook-button">
      <ion-icon name="restaurant" slot="start"></ion-icon>
      开始烹饪
    </ion-button>
  </div>
</ion-content>