me

app-angular/src/modules/lesson/me/me.component.html

@@ -41,7 +41,8 @@
         <ion-list [inset]="true">
             <ion-item lines="full">
                 <ion-avatar slot="start">
-                    <img alt="头像" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+                    <img alt="头像" src="../../assets/1.jpg" />
+
                 </ion-avatar>
                 <ion-label>
                     {{currentUser?.get("name") || '昵称'}}
@@ -64,29 +65,96 @@
         </ion-list>
     </ion-card>
     <!-- 列表 -->
+    
+    <ion-list [inset]="true">
+        <ion-button *ngIf="!currentUser?.id" expand="block" routerLink="/user/login">登录</ion-button>
+        <ion-button *ngIf="currentUser?.id" fill="clear" expand="block" (click)="logout()">登出</ion-button>
+    </ion-list>
     <ion-card class="myList">
         <ion-list [inset]="true">
             <ion-item button detail="true" routerLink="/lesson/me/userFollow">
+                <ion-icon name="people-sharp"></ion-icon>
                 <ion-label>
-                    <ion-note>关注</ion-note>
+                    <ion-note>人物</ion-note>
                 </ion-label>
             </ion-item>
             <ion-item button detail="true" routerLink="/lesson/me/userTag">
+                <ion-icon name="gift"></ion-icon>
                 <ion-label>
-                    <ion-note>等级</ion-note>
+                    <ion-note>礼物</ion-note>
                 </ion-label>
             </ion-item>
             <ion-item button detail="true" routerLink="/lesson/me/userCollection">
+                <ion-icon name="bulb"></ion-icon>
                 <ion-label>
-                    <ion-note>宠物档案</ion-note>
+                    <ion-note>想法</ion-note>
                 </ion-label>
             </ion-item>
         </ion-list>
     </ion-card>
-    <ion-list [inset]="true">
-        <ion-button *ngIf="!currentUser?.id" expand="block" routerLink="/user/login">登录</ion-button>
-        <ion-button *ngIf="currentUser?.id" fill="clear" expand="block" (click)="logout()">登出</ion-button>
-    </ion-list>
+
+
+    <ion-accordion-group [multiple]="true" [value]="['first', 'third']">
+        <ion-accordion value="first">
+          <ion-item slot="header" color="light">
+         
+            <ion-label class="larger-font">🔔提醒</ion-label>  
+          </ion-item>
+          <div class="ion-padding" slot="content">
+            <ion-item>
+            <ion-avatar slot="start">
+                <img alt="头像" src="../../assets/2.jpg" />
+            </ion-avatar>
+            <ion-label><span class="bold-text">葱葱</span><br>  
+                <span class="small-orange-text">生日</span>🎂<br>  
+                <span class="small-red-text">2024-7-01</span>  </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+                <img alt="头像" src="../../assets/3.jpg" />
+            </ion-avatar>
+            <ion-label>  
+                <span class="bold-text">影影</span><br>  
+    <span class="small-orange-text">生日</span>🎂<br>  
+    <span class="small-red-text">2024-7-03</span>  
+            </ion-label>
+          </ion-item>
+        </div>
+        </ion-accordion>
+        <ion-accordion value="second">
+          <ion-item slot="header" color="light">
+            <ion-label class="larger-font">📌建议</ion-label>
+          </ion-item>
+          <div class="ion-padding" slot="content"> 
+            <ion-item>
+            <ion-avatar slot="start">
+                <img alt="头像" src="../../assets/2.jpg" />
+            </ion-avatar>
+            <ion-label><span class="bold-text">boss刘</span> <br>  
+                <span class="small-orange-text">还没记录任何该人物的往来信息</span><br>  
+                 </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+                <img alt="头像" src="../../assets/3.jpg" />
+            </ion-avatar>
+            <ion-label>  
+                <span class="bold-text">飞马智哥</span><br>  
+    <span class="small-orange-text">还没添加该人物的关系</span><br>    
+            </ion-label>
+          </ion-item>
+        </div>
+        </ion-accordion>
+        <ion-accordion value="third">
+          <ion-item slot="header" color="light">
+            <ion-label class="larger-font">🎡功能</ion-label>
+          </ion-item>
+          <div class="ion-padding" slot="content">Third Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+
+    
+
     <!-- 详细内容 -->
     <!-- 导航 -->
     <ion-card>

app-angular/src/modules/lesson/me/me.component.scss

@@ -23,6 +23,13 @@ ion-item {
         margin: 0%;
     }
 }
+.reminder-item {
+    padding: 0%;
+
+    ion-list {
+        margin: 0%;
+    }
+}
 .roleCard {
     margin: 0px;
 }
@@ -48,4 +55,32 @@ ion-item {
     display: flex;
     align-items: center;
 
-}
+}
+ion-avatar img {  
+    width: 50px;  
+    height: 50px;  
+    object-fit: cover; /* 保持图片的宽高比 */  
+}
+.bold-text {  
+    font-weight: bold; /* 加粗 */  
+    color: black; /* 黑色 */  
+}  
+
+.small-orange-text {  
+    font-size: 0.8em; /* 小一号字体 */  
+    color: orange; /* 橘色 */  
+}  
+
+.small-red-text {  
+    font-size: 0.8em; /* 小一号字体 */  
+    color: red; /* 红色 */  
+}  
+.larger-font {  
+    font-size: 1.2em;}
+    .item-with-padding {  
+    padding-left: 16px; /* 左侧内边距 */  
+    padding-right: 16px; /* 右侧内边距 */  
+  }  
+ .ion-padding{
+    background-color: #eff6f7 !important; 
+ }

app-angular/src/modules/lesson/me/me.component.ts

@@ -9,7 +9,11 @@ import * as Parse from "parse"
   styleUrls: ['./me.component.scss']
 })
 export class MeComponent {
-
+  isReminderExpanded = false;  
+  
+  toggleReminder() {  
+      this.isReminderExpanded = !this.isReminderExpanded;  
+  }  
   currentUser: Parse.User | undefined
   constructor(
     private toastCtrl: ToastController,