App-TheRecipeYouKnow/src/app/tab3/tab3.page.html

<ion-header>
  <ion-toolbar>
    <!-- 编辑信息按钮 -->
    <ion-buttons slot="start">
      <ion-button id="myMenu">
        <ion-icon name="menu-outline"></ion-icon>
      </ion-button>
      <ion-popover trigger="myMenu" triggerAction="click">
        <ng-template>
          <ion-list>
            <ion-item [button]="true">
              <ion-icon name="scan-outline" size="small"></ion-icon>
              <ion-text>扫一扫</ion-text>
            </ion-item>
            <ion-item [button]="true">
              <ion-icon name="pulse-outline" size="small"></ion-icon>
              <ion-text>客服</ion-text>
            </ion-item>
            <ion-item [button]="true">
              <ion-icon name="settings-outline" size="small"></ion-icon>
              <ion-text>设置</ion-text>
            </ion-item>
          </ion-list>
        </ng-template>
      </ion-popover>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon slot="start" name="create-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content color="light">
  <!-- 基本信息栏 -->
  <ion-card>
    <ion-list [inset]="true">
      <ion-item lines="full">
        <ion-avatar slot="start">
          <img alt="头像" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
        </ion-avatar>
        <ion-label>
          <ion-note>用户名</ion-note>
        </ion-label>
      </ion-item>
      <ion-item lines="none">
        <ion-label color="medium">
          <ion-note>介绍一下自己吧</ion-note>
        </ion-label>
      </ion-item>
    </ion-list>
  </ion-card>

  <!-- 列表 -->
  <ion-card>
    <ion-list [inset]="true">
      <ion-item button detail="true">
        <ion-label>
          <ion-note>身份档案</ion-note>
        </ion-label>
      </ion-item>
      <ion-item button detail="true">
        <ion-label>
          <ion-note>收藏目录</ion-note>
        </ion-label>
      </ion-item>
      <ion-item button detail="true">
        <ion-label>
          <ion-note>浏览记录</ion-note>
        </ion-label>
      </ion-item>
    </ion-list>
  </ion-card>
  <!--退出 -->
  <ion-button expand="block">退出</ion-button>