CampusBookConnect/src/app/tab1/tab1.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>首页</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 顶部搜索框 -->
  <ion-searchbar></ion-searchbar>

  <ion-card>
    <div class="button-container">
      <div class="button" (click)="onClickUser($event)">
        <ion-icon name="person"></ion-icon>
        <span>个人信息</span>
      </div>
      <div class="button" (click)="onClickBorrow($event)">
        <ion-icon name="book"></ion-icon>
        <span>我的借阅</span>
      </div>
      <div class="button">
        <ion-icon name="podium"></ion-icon>
        <span>排行榜</span>
      </div>
      <div class="button">
        <ion-icon name="add-circle"></ion-icon>
        <span>新书通报</span>
      </div>
      <div class="button">
        <ion-icon name="cloud-download"></ion-icon>
        <span>资源荐购</span>
      </div>
    </div>
    <div class="button-container">
      <div class="button">
        <ion-icon name="list"></ion-icon>
        <span>书单</span>
      </div>
      <div class="button">
        <ion-icon name="albums"></ion-icon>
        <span>专题</span>
      </div>
      <div class="button" (click)="onClickTab3($event)">
        <ion-icon name="chatbox-ellipses"></ion-icon>
        <span>我的请求</span>
      </div>
      <div class="button">
        <ion-icon name="folder"></ion-icon>
        <span>分类浏览</span>
      </div>
      <div class="button">
        <ion-icon name="library"></ion-icon>
        <span>数据库导航</span>
      </div>
    </div>
  </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 book of books; let i = index">
          <ion-thumbnail slot="start" (click) = "onClickBook($event, i)" *ngIf="i < 3">
            <img src="{{book.get('src')}}">
          </ion-thumbnail>
          <ion-label (click) = "onClickBook($event, i)" *ngIf="i < 3">
            <h2>{{book.get('title')}}</h2>
            <p>{{book.get('author')}}</p>
            <p>{{book.get('publisher')}}</p>
            <p>{{book.get('isbn')}}</p>            
          </ion-label>
        </ion-item>
      </ion-list>
      <ion-button style="color: white;" (click)="onClickTab2($event)">更多</ion-button>
    </ion-card-content>
  </ion-card>
</ion-content>