test/tab3.page.html

<ion-header [translucent]="true">
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 3</ion-title>
    </ion-toolbar>
  </ion-header>
  
  <!-- 个人信息板块 -->
  <ion-card>
    <ion-card-header>
      <ion-avatar>
        <img src="assets/img/head.jpg" class="avatar-img">
      </ion-avatar>
      <ion-card-title>昵称：鱼聪明</ion-card-title>
      <ion-card-subtitle>个性签名：坚持不懈，直到成功</ion-card-subtitle>
    </ion-card-header>

    <ion-card-content>
      <ion-grid>
        <ion-row>
          <ion-col size="6">
            打卡天数： 天
          </ion-col>
          <ion-col size="6">
            累计减重： kg
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="6">
            当前赏金： 元
          </ion-col>
          <ion-col size="6">
            BMI指数：
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>

  <!-- 功能菜单 -->
  <ion-list>
    <ion-item button (click)="onItemClick('我的目标')">
      <ion-icon name="body" slot="start"></ion-icon>
      我的目标
    </ion-item>
    <ion-item button (click)="onItemClick('减肥搭子')">
      <ion-icon name="people" slot="start"></ion-icon>
      减肥搭子
    </ion-item>
    <ion-item button (click)="onItemClick('赏金商店')">
      <ion-icon name="cash" slot="start"></ion-icon>
      赏金商店
    </ion-item>
    <ion-item button (click)="onItemClick('我的账户')">
      <ion-icon name="person" slot="start"></ion-icon>
      我的账户
    </ion-item>
    <ion-item button (click)="onItemClick('背景设置')">
      <ion-icon name="settings" slot="start"></ion-icon>
      背景设置
    </ion-item>
    <ion-item button (click)="onItemClick('操作手册')">
      <ion-icon name="book" slot="start"></ion-icon>
      操作手册
    </ion-item>
    <ion-item button (click)="onItemClick('数据备份')">
      <ion-icon name="cloud-download" slot="start"></ion-icon>
      数据备份
    </ion-item>
    <ion-item button (click)="onItemClick('数据下载')">
      <ion-icon name="download" slot="start"></ion-icon>
      数据下载
    </ion-item>
  </ion-list>
  
</ion-content>