s202226701053/E-Cover-app/src/app/tab3/tab3.page.html

<ion-content>
  <!--个人资料版图-->
  <div id="banner">
    <!--头部三个按钮-->
    <div id="header">
      <ion-button shape="round">
        <ion-icon slot="start" name="person-add-outline"></ion-icon>我的名片
      </ion-button>
      <ion-icon name="card-outline" size="large"></ion-icon>
      <ion-text (click)="goSetting()">设置</ion-text>
    </div>
    <!--个人资料-->
    <div id="personInfo">
      <div id="avatarAndName">
        <!--头像-->
        <img id="avatar" [src]="currentUser?.get('avatar') ||'assets/icon/default_avatar.jpg'" alt="头像" />
        <!--用户名和标签-->
        <div id="nameAndTags">
          <h1>{{currentUser?.get('name')}}</h1>
          <ion-card class="tags">社交恐惧症</ion-card>
          <ion-card class="tags">穿衣有肉</ion-card>
        </div>
      </div>
      <!--签名-->
      @if(currentUser?.get('signature')){
      <p>{{ currentUser?.get('signature') }}</p>
      }
      @else{
      <p>这家伙很懒，什么都没有留下</p>
      }
      <!--统计-->
      <div id="count">
        <h3 style="display: inline;">{{ currentUser?.get('fans') }}</h3>
        <p style="display: inline;">粉丝</p>
        <h3 style="display: inline;">{{ currentUser?.get('subscription') }}</h3>
        <p style="display: inline;">关注</p>
        <h3 style="display: inline;">{{ formatNumber(currentUser?.get('like')) }}</h3>
        <p style="display: inline;">获赞</p>
      </div>
      <!--勋章-->
      <ion-button id="badge">
        <ion-icon slot="start" name="flame-outline"></ion-icon>
        我的勋章
        <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
      </ion-button>
    </div>
  </div>
  <!--统计版图-->
  <ion-card style="--background:white;box-shadow: none;border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;">
    <div class="card">
      <p>赞过帖子</p>
      <p>11</p>
    </div>
    <div class="card">
      <p>我的风格</p>
      <p>11</p>
    </div>
    <div class="card">
      <p>收藏帖子</p>
      <p>11</p>
    </div>
    <div class="card" (click)="goGenerateHistory()">
      <p>生成历史</p>
      <p>11</p>
    </div>

    <ion-segment value="myPost" swipeGesture="true">
      <ion-segment-button value="myPost" content-id="myPost">
        <ion-label>帖子</ion-label>
      </ion-segment-button>
      <ion-segment-button value="news" content-id="news">
        <ion-label>动态</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-card>
  <ion-segment-view>
    <ion-segment-content id="myPost">
      <ion-card class="post" *ngFor="let post of posts" (click)="goPostDetail(post)">
        <ion-img [src]="post?.get('image')[0] || 'assets/icon/favicon.png'" />
        <ion-title>{{post?.get('title')}}</ion-title>
        <div id="author">
          <ion-avatar><img [src]="currentUser?.get('avatar') || 'assets/icon/default_avatar.jpg'" /></ion-avatar>
          <ion-label>{{currentUser?.get('name')}}</ion-label>
        </div>
      </ion-card>
      <p id="footer">我是有底线的</p>
    </ion-segment-content>

    <ion-segment-content id="news">

    </ion-segment-content>
  </ion-segment-view>
</ion-content>