fix:个人中心

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

@@ -14,20 +14,24 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true" class="ion-padding" style="background-image: url('../../assets/images/background.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;">
-  <div class="profile-block">
-    <div class="profile-info">
-      <img src="../assets/images/background.jpg" alt="个人头像" class="profile-pic">
-      <div class="profile-info-content">
-        <h2>超级小猫</h2>
-        <p class="gender">性别: {{ gender }}</p>
+<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>
-      <div class="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>
@@ -35,10 +39,13 @@
       <ion-card-title>个性签名</ion-card-title>
     </ion-card-header>
     <ion-card-content>
-      <div class="completion">
-        <span>在此处填写个性签名</span>
-        <ion-button fill="clear" class="edit-button">立即填写</ion-button>
-      </div>
+      <input 
+        type="text" 
+        [value]="signature" 
+        (input)="onInputChange($event)" 
+        placeholder="在此处填写个性签名" 
+        class="signature-input" 
+      />
     </ion-card-content>
   </ion-card>
 
@@ -49,39 +56,35 @@
     <ion-card-content>
       <ion-list>
         <ion-item>
-          <ion-icon slot="start" name="folder"></ion-icon>
+          <img src="assets/images/setup.png" alt="设置" class="icon">
           设置
         </ion-item>
         <ion-item>
-          <ion-icon slot="start" name="folder"></ion-icon>
+          <img src="assets/images/modify.png" alt="修改资料" class="icon">
           修改资料
         </ion-item>
         <ion-item>
-          <ion-icon slot="start" name="lock-closed"></ion-icon>
-          修改密码
-        </ion-item>
-        <ion-item>
-          <ion-icon slot="start" name="folder"></ion-icon>
+          <img src="assets/images/logout.png" alt="注销账号" class="icon">
           注销账号
         </ion-item>
         <ion-item>
-          <ion-icon slot="start" name="folder"></ion-icon>
+          <img src="assets/images/registration agreement.png" alt="用户注册协议" class="icon">
           用户注册协议
         </ion-item>
         <ion-item>
-          <ion-icon slot="start" name="folder"></ion-icon>
+          <img src="assets/images/privacy agreement.png" alt="用户隐私协议" class="icon">
           用户隐私协议
         </ion-item>
         <ion-item>
-          <ion-icon slot="start" name="help-circle"></ion-icon>
+          <img src="assets/images/help.png" alt="帮助" class="icon">
           使用帮助
         </ion-item>
         <ion-item>
-          <ion-icon slot="start" name="document-text"></ion-icon>
+          <img src="assets/images/low.png" alt="法律条款" class="icon">
           法律条款
         </ion-item>
         <ion-item>
-          <ion-icon slot="start" name="warning"></ion-icon>
+          <img src="assets/images/opinion.png" alt="意见反馈" class="icon">
           意见反馈
         </ion-item>
       </ion-list>

novel-app/src/app/person/person.page.scss

@@ -1,17 +1,11 @@
 /* 全局样式 */
 ion-app {
-  background: url('/assets/images/background.jpg') no-repeat center center fixed;
-  /* 添加背景图片 */
+  background: url('/assets/images/background-image1.jpg') no-repeat center center fixed;
   background-size: cover;
-  /* 背景图片覆盖整个内容区域 */
   background-position: center;
-  /* 背景图片居中 */
   height: 100vh;
-  /* 确保背景覆盖整个视口高度 */
   margin: 0;
-  /* 移除默认的外边距 */
   padding: 0;
-  /* 移除默认的内边距 */
 }
 
 /* 保持大部分样式不变，只添加必要的样式 */
@@ -28,78 +22,119 @@ ion-app {
 
 ion-content {
   --background: transparent;
-  /* 设置为透明，以便背景从 ion-app 继承 */
   padding: 16px;
 }
 
 .profile-block {
-  background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
-  padding: 20px; /* 内边距 */
-  border-radius: 20px; /* 圆角 */
-  margin: 20px; /* 外边距 */
+  background-color: rgba(255, 255, 255, 0.8);
+  padding: 20px;
+  border-radius: 20px;
+  margin: 20px;
+}
+
+.profile-card-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
 }
 
-.profile-info {
-  text-align: center; /* 可选：使内容居中 */
+.profile-pic-container {
+  flex: 0 0 60px; /* 固定头像宽度 */
+  margin-right: 20px;
+}
+
+.profile-info-container {
+  flex: 1;
+  text-align: left;
+}
+
+.navigate-button-container {
+  flex: 0 0 100px; /* 固定按钮宽度 */
+  text-align: right;
 }
 
 .profile-pic {
-  width: 60px; /* 头像宽度 */
-  height: 60px; /* 头像高度 */
-  border-radius: 50%; /* 圆形头像 */
-  border: 3px solid white; /* 白色边框 */
-  margin-right: 10px; /* 头像与用户名之间的间距 */
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  border: 3px solid white;
 }
 
 h2 {
   font-size: 20px;
   font-weight: bold;
   color: #333;
-  margin-bottom: 5px; /* 添加下边距以分隔用户名和性别 */
+  margin-bottom: 5px;
 }
 
 .gender {
   font-size: 16px;
   color: #666;
-  margin-top: 5px; /* 添加上边距以确保与用户名之间有间隔 */
 }
 
 .navigate-button {
-  color: #333; /* 按钮颜色 */
-  margin-left: 10px; /* 添加左边距以确保与用户名之间有间隔 */
+  color: #333;
+  margin: 0; /* 移除默认的边距 */
 }
 
 ion-card {
-  margin-top: 20px; /* 卡片上边距 */
+  margin-top: 20px;
+  padding: 10px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
 
 ion-card-header {
-  background: rgba(105, 250, 255, 0.3); 
-  color: #333; /* 深色字体 */
+  background: rgba(105, 250, 255, 0.3);
+  color: #333;
+  padding: 10px;
+  text-align: left;
 }
 
 ion-card-title {
-  font-size: 18px; /* 卡片标题字体大小 */
+  font-size: 18px;
 }
 
 .completion {
   display: flex;
-  justify-content: space-between; /* 左右对齐 */
-  align-items: center; /* 垂直居中 */
+  justify-content: space-between;
+  align-items: center;
 }
 
 .edit-button {
-  color: #064351; /* 按钮颜色 */
-  font-size: 16px; /* 按钮字体大小 */
+  color: #064351;
+  font-size: 16px;
 }
 
 ion-list {
-  margin-top: 10px; /* 列表上边距 */
+  margin-top: 10px;
 }
 
 ion-item {
-  --background: #fff; /* 白色背景 */
-  --color: #333; /* 深色字体 */
+  --background: #fff;
+  --color: #333;
+  border-radius: 5px;
+  margin: 5px 0;
+  padding: 10px;
+}
+
+.icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+
+.signature-input {
+  width: 100%; /* 输入框宽度占满 */
+  padding: 10px; /* 内边距 */
+  border: 1px solid #ccc; /* 边框 */
   border-radius: 5px; /* 圆角 */
-  margin: 5px 0; /* 项目间距 */
+  font-size: 16px; /* 字体大小 */
+  color: #333; /* 字体颜色 */
+}
+
+.signature-input::placeholder {
+  color: #aaa; /* 提示文本颜色 */
+  opacity: 1; /* 保持提示文本的透明度 */
 }

novel-app/src/app/person/person.page.ts

@@ -1,28 +1,32 @@
 import { Component } from '@angular/core';
-import {  NavController } from '@ionic/angular';
-import { IonButton, IonButtons, IonHeader, IonToolbar ,IonIcon, IonTitle, IonContent, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonItem, IonList} from '@ionic/angular/standalone';
+import { NavController } from '@ionic/angular';
+import { IonButton, IonButtons, IonHeader, IonToolbar, IonIcon, IonTitle, IonContent, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonItem, IonList } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-person',
   templateUrl: 'person.page.html',
   styleUrls: ['person.page.scss'],
-  standalone:true,
-  imports: [IonHeader,IonToolbar,IonButtons,IonButton,IonIcon,IonTitle,
-    IonContent,IonCard,IonCardHeader,IonCardTitle,IonCardContent,IonItem,IonList
+  standalone: true,
+  imports: [IonHeader, IonToolbar, IonButtons, IonButton, IonIcon, IonTitle,
+    IonContent, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonItem, IonList
   ]
 })
 export class PersonPage {
   constructor(private navCtrl: NavController) {}
 
   gender: string = '女'; // 默认性别
+  signature: string = ''; // 个性签名
 
   goBack() {
     this.navCtrl.back();
   }
-  
+
   navigateToTab4() {
     this.navCtrl.navigateForward('/tab4'); // 跳转到tab4
   }
-  
-  
+
+  onInputChange(event: Event) {
+    const input = event.target as HTMLInputElement;
+    this.signature = input.value; // 更新个性签名
+  }
 }