Novel/src/app/tab3/tab3.page.html

<!-- 我的布局 -->
<ion-header>
  <ion-toolbar>
    
    <ion-buttons slot="start">
      <ion-button>
        用户信息
      </ion-button>
      <ion-avatar>
        <ion-img src="assets/img/头像.jpg"></ion-img>
      </ion-avatar>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon name="settings"></ion-icon>
      </ion-button>
      <ion-button>
        <ion-icon name="moon"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>

</ion-header>
<ion-content>


  <ion-card class="bianju">
    <img alt="" src="https://gd-hbimg.huaban.com/db3495ffea73e3551181abbfd45adbeee8b532369f3b3-N2AKKf_fw1200webp" />
    <ion-card-header>
      <ion-card-title>{{user?.get("username") || '未登录'}}</ion-card-title>
      <ion-card-subtitle *ngIf="!user?.id">请您登陆后继续使用</ion-card-subtitle>
      <ion-card-subtitle *ngIf="user?.id">{{user?.get("name")}}-{{user?.get("gender")}}</ion-card-subtitle>
    </ion-card-header>
 
    <!-- 新增：根据用户状态，显示登录/登出按钮，执行跳转或登出函数 -->
    <ion-button *ngIf="!user?.id" fill="clear" routerLink="/user/login">登录</ion-button>
    <ion-button *ngIf="user?.id" fill="clear" routerLink="/user/edit/info">编辑资料</ion-button>
    <ion-button *ngIf="user?.id" fill="clear" (click)="logout()">登出</ion-button>
  </ion-card>


  <!-- 金刚区 - 一行九列金刚区按钮
  <ion-title>我的会员</ion-title>
  <ion-row>
    <ion-col size="2" *ngFor="let item of myItems">
      <ion-button expand="block">{{ item.title }}</ion-button>
    </ion-col>
  </ion-row> -->
<!-- 金刚区 - 二行三列 -->
<ion-label>我的钱包</ion-label>
<ion-row >
  <ion-col size="4" >
   
    <ion-card>
      <ion-card-content>
        
        <ion-label>金币余额: 100</ion-label>
      </ion-card-content>
    </ion-card>
  </ion-col>
  <ion-col size="4" class="location">
    <ion-card>
      <ion-card-content>
        <ion-label>今日收益:100￥</ion-label>
      </ion-card-content>
      
    </ion-card>
  </ion-col>
  <ion-button expand="block" >去赚钱</ion-button>
</ion-row>

<!-- 金刚区 - 十行一列金刚区按钮 -->
<ion-row>
  <ion-col size="12">
    <ion-button expand="block">作者中心</ion-button>
    <ion-button expand="block">阅读喜好</ion-button>
    <ion-button expand="block">奖品中心</ion-button>
    <ion-button expand="block">我的评论</ion-button>
    <ion-button expand="block">我的收藏</ion-button>
    <ion-button expand="block">已购书籍</ion-button>
    <ion-button expand="block">绑兑换码</ion-button>
    <ion-button expand="block">客服咨询</ion-button>
    <ion-button expand="block">功能建议</ion-button>
    <ion-button expand="block">蚂蚁能量</ion-button>
  </ion-col>
</ion-row>

</ion-content>