person.page.html 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <ion-header>
  2. <ion-toolbar class="header-toolbar">
  3. <ion-title>个人中心</ion-title>
  4. </ion-toolbar>
  5. </ion-header>
  6. <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;">
  7. <div class="profile-card">
  8. <ion-card>
  9. <div class="profile-card-content">
  10. <div class="profile-pic-container">
  11. <img src="../assets/images/avatar.jpg" alt="个人头像" class="profile-pic">
  12. </div>
  13. <div class="profile-info-container">
  14. <h2>超级小猫</h2>
  15. <p class="gender">性别: {{ gender }}</p>
  16. </div>
  17. <div class="navigate-button-container">
  18. <ion-button fill="clear" class="navigate-button" (click)="navigateToTab4()">
  19. <ion-icon name="chevron-forward"></ion-icon>
  20. </ion-button>
  21. </div>
  22. </div>
  23. </ion-card>
  24. </div>
  25. <ion-card>
  26. <ion-card-header>
  27. <ion-card-title>个性签名</ion-card-title>
  28. </ion-card-header>
  29. <ion-card-content>
  30. <input
  31. type="text"
  32. [value]="signature"
  33. (input)="onInputChange($event)"
  34. placeholder="在此处填写个性签名"
  35. class="signature-input"
  36. />
  37. </ion-card-content>
  38. </ion-card>
  39. <ion-card>
  40. <ion-card-header>
  41. <ion-card-title>常用功能</ion-card-title>
  42. </ion-card-header>
  43. <ion-card-content>
  44. <ion-list>
  45. <ion-item>
  46. <img src="assets/images/setup.png" alt="设置" class="icon">
  47. 设置
  48. </ion-item>
  49. <ion-item>
  50. <img src="assets/images/modify.png" alt="修改资料" class="icon">
  51. 修改资料
  52. </ion-item>
  53. <ion-item>
  54. <img src="assets/images/logout.png" alt="注销账号" class="icon">
  55. 注销账号
  56. </ion-item>
  57. <ion-item>
  58. <img src="assets/images/registration agreement.png" alt="用户注册协议" class="icon">
  59. 用户注册协议
  60. </ion-item>
  61. <ion-item>
  62. <img src="assets/images/privacy agreement.png" alt="用户隐私协议" class="icon">
  63. 用户隐私协议
  64. </ion-item>
  65. <ion-item>
  66. <img src="assets/images/help.png" alt="帮助" class="icon">
  67. 使用帮助
  68. </ion-item>
  69. <ion-item>
  70. <img src="assets/images/low.png" alt="法律条款" class="icon">
  71. 法律条款
  72. </ion-item>
  73. <ion-item>
  74. <img src="assets/images/opinion.png" alt="意见反馈" class="icon">
  75. 意见反馈
  76. </ion-item>
  77. </ion-list>
  78. </ion-card-content>
  79. </ion-card>
  80. </ion-content>