20222670105/novel-app/src/app/person/person.page.html

<ion-header>
  <ion-toolbar class="header-toolbar">
    <ion-title>个人中心</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding" style="background-image: url('../../assets/images/background-image1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;">
  <div class="profile-card">
    <ion-card>
      <div class="profile-card-content">
        <div class="profile-pic-container">
          <img src="../assets/images/avatar.jpg" alt="个人头像" class="profile-pic">
        </div>
        <div class="profile-info-container">
          <h2>超级小猫</h2>
          <p class="gender">性别: {{ gender }}</p>
        </div>
        <div class="navigate-button-container">
          <ion-button fill="clear" class="navigate-button" (click)="navigateToTab4()">
            <ion-icon name="chevron-forward"></ion-icon>
          </ion-button>
        </div>
      </div>
    </ion-card>
  </div>

  <ion-card>
    <ion-card-header>
      <ion-card-title>个性签名</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <input 
        type="text" 
        [value]="signature" 
        (input)="onInputChange($event)" 
        placeholder="在此处填写个性签名" 
        class="signature-input" 
      />
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header>
      <ion-card-title>常用功能</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-list>
        <ion-item>
          <img src="assets/images/setup.png" alt="设置" class="icon">
          设置
        </ion-item>
        <ion-item>
          <img src="assets/images/modify.png" alt="修改资料" class="icon">
          修改资料
        </ion-item>
        <ion-item>
          <img src="assets/images/logout.png" alt="注销账号" class="icon">
          注销账号
        </ion-item>
        <ion-item>
          <img src="assets/images/registration agreement.png" alt="用户注册协议" class="icon">
          用户注册协议
        </ion-item>
        <ion-item>
          <img src="assets/images/privacy agreement.png" alt="用户隐私协议" class="icon">
          用户隐私协议
        </ion-item>
        <ion-item>
          <img src="assets/images/help.png" alt="帮助" class="icon">
          使用帮助
        </ion-item>
        <ion-item>
          <img src="assets/images/low.png" alt="法律条款" class="icon">
          法律条款
        </ion-item>
        <ion-item>
          <img src="assets/images/opinion.png" alt="意见反馈" class="icon">
          意见反馈
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>