202226701007/travel-app/src/app/tab1/tab1.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
      <ion-avatar>
        <img src="./assets/img/logo.jpg">
      </ion-avatar>
    </ion-buttons>
    <div class="centered-title">
      乐游南昌
    </div>
    <ion-buttons slot="end">
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<style>
  .centered-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: '宋体', sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: black;
  }

  ion-toolbar {
    padding: 0; /* 移除默认的内边距 */
  }
</style>


<ion-content>
  <ion-searchbar 
    placeholder="输入目的地或景点" 
    showCancelButton="focus" 
    (ionInput)="onSearch($event)">
  </ion-searchbar>

  <ion-card>
    <ion-card-header>
      <ion-card-title>推荐路线</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-list>
        <ion-item *ngFor="let route of recommendedRoutes">
          <ion-thumbnail slot="start">
            <img [src]="route.thumbnail" />
          </ion-thumbnail>
          <ion-label>
            <h2>{{ route.title }}</h2>
            <p>{{ route.description }}</p>
          </ion-label>
          <ion-button slot="end" fill="outline" >去这里！</ion-button>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header>
      <ion-card-title>个性化推荐</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-list>
        <ion-item *ngFor="let personalizedRoute of personalizedRoutes" (click)="viewRoute(personalizedRoute)">
          <ion-label>
            <h2>{{ personalizedRoute.title }}</h2>
            <p>{{ personalizedRoute.reason }}</p>
          </ion-label>
          <ion-button slot="end" fill="outline">立即查看</ion-button>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header>
      <ion-card-title>热门景点</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-list>
        <ion-item *ngFor="let attraction of popularAttractions" (click)="viewAttraction(attraction)">
          <ion-thumbnail slot="start">
            <img [src]="attraction.image" />
          </ion-thumbnail>
          <ion-label>
            <h2>{{ attraction.name }}</h2>
            <p>{{ attraction.description }}</p>
          </ion-label>
          <ion-button slot="end" fill="outline">查看详情</ion-button>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header>
      <ion-card-title>用户反馈</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-list>
        <ion-item *ngFor="let feedback of userFeedbacks">
          <ion-avatar slot="start">
            <img [src]="feedback.userAvatar" />
          </ion-avatar>
          <ion-label>
            <h2>{{ feedback.username }}</h2>
            <p>{{ feedback.content }}</p>
            <div>
              <ion-icon *ngFor="let star of [].constructor(5); let i = index" 
                        [name]="i < feedback.rating ? 'star' : 'star-outline'">
              </ion-icon>
            </div>
          </ion-label>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>