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

<!-- tab1.page.html -->
<ion-header [translucent]="true">
  <ion-toolbar class="header-toolbar">
    <ion-title class="header-title">
      <span class="logo-icon">🍳</span>
      <span class="logo-text">味知星厨</span>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="content-background">
  <!-- 搜索栏 -->
  <div class="search-container">
    <ion-card class="search-card">
      <ion-item lines="none" class="search-item">
        <ion-input
          class="search-input"
          type="text"
          placeholder="搜索食谱（如：番茄炒蛋、低卡沙拉）"
          [(ngModel)]="searchQuery"
          clearInput
          enterkeyhint="search"
          (keyup.enter)="performSearch()"
        ></ion-input>
        <ion-button 
          slot="end" 
          fill="clear" 
          class="search-button" 
          (click)="selectRecipe()"
          aria-label="搜索"
        >
          <ion-icon slot="icon-only" name="search"></ion-icon>
        </ion-button>
      </ion-item>
    </ion-card>
  </div>

  <!-- 分类网格 -->
  <div class="section-container">
    <h2 class="section-title">美食分类</h2>
    <ion-grid class="category-grid">
      <ion-row>
        <ion-col 
          size="6" 
          md="4" 
          lg="3" 
          *ngFor="let category of categories"
          (click)="navigateToCategory()"
        >
          <ion-card class="category-card" >
            <ion-card-content class="category-content">
              <div class="category-icon-container">
                <ion-icon [name]="category.icon" class="category-icon"></ion-icon>
                <img style="width:64px;border-radius: 50px;" src="/assets/icon/{{category.name}}.jpg" alt="">
              </div>
              <h3 class="category-title">{{ category.name }}</h3>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

  <!-- 推荐食谱 -->
  <div class="section-container">
    <h2 class="section-title">今日推荐</h2>
    <ion-grid class="recipe-grid">
      <ion-row>
        <ion-col 
          size="12" 
          md="6" 
          lg="4" 
          *ngFor="let recipe of recipeGroup"
          (click)="goToDetail(recipe)"
        >
          <ion-card class="recipe-card" (click)="goToDetail(recipe)">
            <div class="recipe-image-container">
              <ion-img 
                [src]="recipe.imageUrl || '/assets/images/default-food.jpg'" 
                alt="食谱图片"
                class="recipe-image"
              ></ion-img>
              <div class="recipe-overlay">
                <ion-badge class="recipe-time">
                  <ion-icon name="time"></ion-icon>
                  {{ recipe.cookingTime || 30 }}分钟
                </ion-badge>
              </div>
            </div>
            <ion-card-header>
              <ion-card-title class="recipe-title">{{ recipe.title }}</ion-card-title>
            </ion-card-header>
            <ion-card-content class="recipe-content">
              <div class="recipe-rating">
                <ion-icon name="star" class="rating-icon"></ion-icon>
                <span class="rating-value">{{ recipe.rating || 4.5 }}</span>
              </div>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>