APPmy/src/app/creator/creator.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab4"></ion-back-button>
    </ion-buttons>
    <ion-title>创作者中心</ion-title>
  </ion-toolbar>
</ion-header>

<!-- <ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">creator</ion-title>
    </ion-toolbar>
  </ion-header>
</ion-content> -->


<ion-content>
  <div class="creator-info" style="background-image: url('../assets/img/paint.png');">
    <div class="profile">
      <ion-avatar>
        <img src="https://ionicframework.com/docs/img/demos/avatar.svg"> <!-- 头像图片 -->
      </ion-avatar>
      <ion-label class="nickname">{{user?.get("username")}}</ion-label> <!-- 昵称 -->
    </div>
    <div class="stats">
      <ion-label class="label-icon"><ion-icon name="thumbs-up-outline"></ion-icon> 点赞数：300</ion-label>
      <ion-label class="label-icon"><ion-icon name="eye-outline"></ion-icon> 浏览量：6000</ion-label>
      <ion-label class="label-icon"><ion-icon name="star-outline"></ion-icon> 最佳作品点赞数：150</ion-label>
      <ion-label class="label-icon"><ion-icon name="cash-outline"></ion-icon> 上月收入：2000元</ion-label>
    </div>
</div>

  <div class="best-works">
    <ion-card>
      <ion-card-header>
        <ion-card-title>最佳作品</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <!-- 最佳作品列表 -->
      </ion-card-content>
    </ion-card>
  </div>

  <div class="exclusive-services">
    <ion-card>
      <ion-card-header>
        <ion-card-title>专属服务</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-label>专属服务内容：</ion-label>
        <ion-label>1. 学创作</ion-label>
        <ion-label>2. 任务中心</ion-label>
      </ion-card-content>
    </ion-card>
  </div>

  <div class="tools-resources">
    <ion-card>
      <ion-card-header>
        <ion-card-title>创作工具和资源</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <!-- 创作工具和资源列表 -->
      </ion-card-content>
    </ion-card>
  </div>

  <div class="community-interaction">
    <ion-card>
      <ion-card-header>
        <ion-card-title>创作者社区和互动</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-button expand="block" fill="clear" (click)="goToCommunity()">
          <ion-icon name="people-outline"></ion-icon>
          创作者社区
        </ion-button>
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>