app-gift/app-angular/src/modules/lesson/page-lesson/page-lesson.component.html

<!--侧边栏-->
<ion-menu contentId="main-content">
    <ion-header>
      <ion-toolbar>
        <ion-title>礼物分类</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <ion-item (click)="scrollToCardSection('热门')">
        热门
      </ion-item>
      <ion-item (click)="scrollToCardSection('文创')">
        文创
      </ion-item>
      <ion-item (click)="scrollToCardSection('美食')">
        美食
      </ion-item>
      <ion-item (click)="scrollToCardSection('美食')">
        家居
      </ion-item>
      <ion-item (click)="scrollToCardSection('美食')">
        配饰
      </ion-item>
      <ion-item (click)="scrollToCardSection('美食')">
        彩妆
      </ion-item>
      <ion-item (click)="scrollToCardSection('美食')">
        护肤
      </ion-item>
      <ion-item (click)="scrollToCardSection('美食')">
        保健
      </ion-item>
      <ion-item (click)="scrollToCardSection('美食')">
        图书
      </ion-item>
      <!-- 其他分类项 -->
    </ion-content>
  </ion-menu>
  
<!--主页面-->
<div class="ion-page" id="main-content">
    <!--搜索栏-->
    <ion-header>
        <ion-toolbar>
            <ion-buttons slot="start">
                <ion-menu-button></ion-menu-button>
            </ion-buttons>
            <ion-searchbar [(ngModel)]="searchInput" (ionChange)="search()" (ionClear)="search()"
                placeholder="搜索你想要的礼物"></ion-searchbar>
        </ion-toolbar>
    </ion-header>
    <!--课程卡片区-->
    <ion-content>
        <div id="card-section-热门">
        <ion-grid>
            <ion-row>
                <ng-container *ngFor="let course of courseList; let i = index">
                    <ng-container *ngIf="i % 2 === 0">
                        <ion-col size="5.5">
                            <ion-card (click)="goLessonDetail(course)">
                                <img alt="Silhouette of mountains" [src]="course?.get('foodImg')" />
                                <ion-card-header>
                                    <ion-card-title>{{course?.get("foodName")}}</ion-card-title>
                                </ion-card-header>

                            </ion-card>
                        </ion-col>
                        <ion-col size="5.5" *ngIf="i + 1 < courseList.length">
                            <ion-card (click)="goLessonDetail(courseList[i+1])">
                                <img alt="Silhouette of mountains" [src]="courseList[i + 1].get('foodImg')" />
                                <ion-card-header>
                                    <ion-card-title>{{courseList[i +1].get("foodName")}}</ion-card-title>
                                </ion-card-header>
                            </ion-card>
                        </ion-col>
                    </ng-container>
                </ng-container>
            </ion-row>
        </ion-grid>
    </div>
        
    </ion-content>

    

</div>