app-Luck16th/src/modules/user/mine/mine.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-grid>
      <ion-row>
        <ion-col style="display: flex; justify-content: flex-start;">
          <ion-icon name="chevron-back-outline"></ion-icon>
        </ion-col>
        <ion-col style="display: flex; justify-content: center;">
          我的
        </ion-col>
        <ion-col style="display: flex; justify-content: flex-end;">
          <ion-icon name="notifications-circle-outline"></ion-icon>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-toolbar>
</ion-header>
<div class="page-color">
    <ion-card>
      <ion-card-header>
        <ion-item>
          <ion-avatar slot="start">
            <img src='{{userImg}}' />
          </ion-avatar>
          <ion-label>
            <ion-card-content>
              <ion-card-title>{{username || '未登录'}}</ion-card-title>
              <ion-card-subtitle *ngIf="!username">请您登陆后继续使用</ion-card-subtitle>
              <ion-card-subtitle *ngIf="username">{{userId}}-{{userId}}</ion-card-subtitle>
          </ion-card-content>
          </ion-label>
        </ion-item>
      </ion-card-header>
    </ion-card>
  
    <ion-card>
      <ion-list-header>
        <ion-label>任务提醒</ion-label>
        <ion-button *ngIf="userId" fill="clear" routerLink="/user/edit/info">编辑资料</ion-button>
      </ion-list-header>
    
      <ion-card-content>
        <ion-label>
          <b>联系方式</b>
          <p>13679842345</p>
        </ion-label>
        <br>
        <ion-label>
          <b>公司信息</b>
          <p>建筑公司</p>
        </ion-label>
      </ion-card-content>
    </ion-card>
  
    <ion-card>
      <ion-card-header>
        <ion-card-title style="font-size: 20px;">设置</ion-card-title>
      </ion-card-header>
    
      <ion-card-content>
        <ion-label>
          <b>修改密码</b>
        </ion-label>
        <br>
        <ion-label>
          <b>消息通知设置</b>
        </ion-label>
      </ion-card-content>
    </ion-card>
  
  
    <ion-card>
      <ion-row>
        <ion-col></ion-col>
        <ion-col size="6">
          <ion-button style="display: flex; justify-content: center;" *ngIf="!userId" routerLink="/user/login">登录</ion-button>
          <ion-button style="display: flex; justify-content: center;" *ngIf="userId" (click)="logout()">登出</ion-button>
        </ion-col>
        <ion-col></ion-col>
      </ion-row>
    </ion-card>
</div>