123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- <ion-toolbar>
- <ion-searchbar
- class="custom-searchbar"
- placeholder="搜索食物、食谱、餐厅"
- show-clear-button="focus"
- (ionInput)="setSearchQuery($event.target.value || '')"
- (ionClear)="searchQuery = ''"
- (ionCancel)="searchQuery = ''"
- (ionSearch)="search()">
- </ion-searchbar>
- <ion-buttons slot="end">
- <ion-button (click)="search()">搜索
- <ion-icon slot="icon-only" name="search"></ion-icon>
- </ion-button>
- </ion-buttons>
- </ion-toolbar>
- <ion-content [fullscreen]="true">
- <!-- 轮播图区域 -->
- <div class="carousel-container" style="border-radius: 25px; margin: 5px auto;">
- <div class="carousel" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'">
- <div class="slide" *ngFor="let image of images; let i = index">
- <img [src]="image" (click)="onImageClick(i)" style="width: 100%; height: auto;" />
- <!-- 显示图片对应的描述 -->
- <div class="description" [innerHTML]="descriptions[i]" [class.active]="i === currentSlide"></div>
- </div>
- </div>
- <button class="prev" (click)="prevSlide()">❮</button>
- <button class="next" (click)="nextSlide()">❯</button>
- <div class="dots">
- <span class="dot" *ngFor="let image of images; let i = index"
- [class.active]="i === currentSlide"
- (click)="goToSlide(i)"></span>
- </div>
- </div>
- <!-- 推荐健康建议 -->
- <ion-card>
- <ion-card-header>
- <ion-card-title>
- <ion-icon slot="start" name="leaf-outline"></ion-icon>
- 健康建议
- </ion-card-title>
- </ion-card-header>
- <ion-card-content>
- <div>
- @if(currentUser?.id){
- @if(!responseMsg){
- <p>加载中...</p>
- }
- <p>{{ responseMsg }}</p>
- }
- </div>
- <!-- 如果用户未登录,显示登录按钮 -->
- @if(!currentUser?.id){
- <ion-button (click)="login()" fill="outline" color="primary">
- 请登录后使用该功能
- </ion-button>
- }
- </ion-card-content>
- </ion-card>
- <!-- 快速入口 -->
- <ion-grid>
- <ion-row>
- <ion-col size="12">
- <ion-button>
- <ion-icon slot="start" name="document-outline"></ion-icon>
- 健康目标管理
- </ion-button>
- </ion-col>
- </ion-row>
- <ion-row>
- <ion-col size="12">
- <ion-button>
- <ion-icon slot="start" name="storefront-outline"></ion-icon>
- 外卖推荐
- </ion-button>
- </ion-col>
- </ion-row>
- </ion-grid>
- <!-- 推荐食谱 -->
- <ion-card>
- <ion-card-header>
- <ion-card-title>
- <ion-icon slot="start" name="albums-outline"></ion-icon>
- 今日推荐食谱
- </ion-card-title>
- </ion-card-header>
- <ion-card-content>
- <ion-button (click)="viewRecommendedRecipes()">
- 查看推荐食谱
- </ion-button>
- <p>{{ recipeMsg }}</p> <!-- 显示 AI 生成的推荐食谱 -->
- </ion-card-content>
- </ion-card>
- </ion-content>
|