cainiao-hue 3 сар өмнө
parent
commit
0327ae6876

+ 13 - 6
soul-app/src/app/tab2/tab2.page.html

@@ -1,6 +1,13 @@
-<ion-header>
+<ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>心理陪聊服务</ion-title>
+    <ion-item lines="none">
+      <!-- 图片 -->
+      <ion-avatar slot="start" class="image-container">
+        <img src="/assets/img/3.png" alt="Your Image" class="header-image">
+      </ion-avatar>
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
   </ion-toolbar>
 </ion-header>
 
@@ -36,17 +43,17 @@
         <ion-card-title>普通聊天</ion-card-title>
       </ion-card-header>
       <ion-card-content>
-        <p>在这里,我们的陪聊服务宗旨是为您提供情感支持和倾诉的机会,无论是生活上的开心,还是工作上的糟糕,你都可以跟我分享,这里是属于你一个人的空间,你可以大胆放心的使用。</p>
+        <p>在这里,无论是生活上的开心,还是工作上的糟糕,你都可以跟我分享,这里是属于你一个人的空间,你可以大胆放心的使用。</p>
         <ion-button expand="full" (click)="goChat()">开始聊天</ion-button>
       </ion-card-content>
     </ion-card>
   </section>
 
-  <!-- 普通心理问题的专业性建议区
+  <!--普通心理问题的小贴心建议建议区-->
   <section>
     <ion-card>
       <ion-card-header>
-        <ion-card-title>专业建议</ion-card-title>
+        <ion-card-title>小贴心建议</ion-card-title>
       </ion-card-header>
       <ion-card-content>
         <ion-list>
@@ -61,5 +68,5 @@
         </ion-list>
       </ion-card-content>
     </ion-card>
-  </section>-->
+  </section>
 </ion-content>

+ 38 - 1
soul-app/src/app/tab2/tab2.page.scss

@@ -1,3 +1,7 @@
+/* 设置页面背景色 */
+ion-content {
+  --background: #f9f9f9; /* 设置内容背景色 */
+}
 ion-avatar {
     width: 50px; /* 或者你需要的任何尺寸 */
     height: 50px; /* 保持宽高一致,避免变形 */
@@ -11,4 +15,37 @@ ion-avatar {
     width: 100%;
     height: auto; /* 保持图片比例 */
     border-radius: 50%; /* 可选:将图片设置为圆形 */
-  }
+  }
+    /* 设置搜索框的样式 */
+    ion-searchbar {
+      padding: 10px; /* 内边距 */
+      border-radius: 4px; /* 圆角 */
+      font-size: 16px; /* 字体大小 */
+    }
+    /* 设置卡片的样式 */
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  ion-card-header {
+    --background: #ffffff; /* 使用CSS变量设置背景颜色为白色 */
+    /* 或者,如果你不使用CSS变量,可以直接使用background-color属性 */
+    position: relative; /* 设置相对定位 */
+  }
+  ion-toolbar {
+    --background: #ffffff; /* 同样使用CSS变量,但通常不是必需的 */
+  }
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距,仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+}

+ 17 - 20
soul-app/src/app/tab2/tab2.page.ts

@@ -27,19 +27,16 @@ export class Tab2Page {
   }
   consultants = [
     {
-      id:1,
       name: '智能心理陪聊师',
       avatar: '/assets/img/2.png',
       fields: ['专业领域:焦虑']
     },
     {
-      id:2,
       name: '智能心理陪聊师',
       avatar: '/assets/img/4.png',
       fields: ['专业领域:抑郁']
     },
     {
-      id:3,
       name: '智能心理陪聊师',
       avatar: '/assets/img/5.png',
       fields: ['专业领域:压力']
@@ -55,23 +52,23 @@ export class Tab2Page {
   //selectedIssue:string='';
   matchedCounselor: { name: string; specialty: string } | null = null;
 
-  //questions = [
-    //{
-      //title: '如何应对焦虑?',
-      //advice: '尝试深呼吸和正念冥想,保持规律的作息。',
-      //expanded: false,
-    //},
-    //{
-      //title: '如何提高自信心?',
-      //advice: '设定小目标并逐步实现,进行积极自我对话。',
-      //expanded: false,
-    //},
-    //{
-      //title: '如何改善人际关系?',
-      //advice: '多与他人沟通,倾听对方的感受。',
-      //expanded: false,
-    //},
-  //];
+  questions = [
+    {
+      title: '如何应对焦虑?',
+      advice: '尝试深呼吸和正念冥想,保持规律的作息,健康饮食,设定小目标,培养兴趣爱好,适当锻炼。',
+      expanded: false,
+    },
+    {
+      title: '如何提高自信心?',
+      advice: '设定小目标并逐步实现,进行积极自我对话,培养技能,保持健康的生活方式,多与他人社交。',
+      expanded: false,
+    },
+    {
+      title: '如何改善人际关系?',
+      advice: '积极多与他人沟通,倾听对方的感受,理解他人的感受,多参加社交活动,保持积极的态度,尊重他人。',
+      expanded: false,
+    },
+  ];
 
   matchCounselor() {
   }

+ 2 - 6
soul-app/src/app/test-chat-panel/test-chat-panel.component.ts

@@ -164,12 +164,12 @@ export class TestChatPanelComponent  implements OnInit {
             console.log("自定义角色",this.chatComp.fmodeChat.role);
                         this.chatComp.fmodeChat.role.set("name","小聊");
             this.chatComp.fmodeChat.role.set("title","心理咨询师");
-            this.chatComp.fmodeChat.role.set("desc","一名亲切可爱的心理咨询师,小聊,年龄28岁");
+            this.chatComp.fmodeChat.role.set("desc","一名亲切可爱的心理陪聊师,小聊,年龄28岁");
             this.chatComp.fmodeChat.role.set("tags",["焦虑","压力"]);
             this.chatComp.fmodeChat.role.set("avatar","/assets/img/2.png")
             this.chatComp.fmodeChat.role.set("prompt",`
 # 角色设定
-您是一名亲切可爱的心理咨询师,小聊,年龄28岁,需要完成陪来访者聊聊天,随意轻松一些。
+您是一名亲切可爱的心理陪聊师,小聊,年龄28岁,需要完成陪来访者聊聊天,随意轻松一些。
 
 # 对话环节
 0.破冰,互相了解,引导用户介绍自己
@@ -179,10 +179,6 @@ export class TestChatPanelComponent  implements OnInit {
 2.引导收尾,委婉引导用户结束本次对话
 - 用户同意结束后,结束本次对话,如果依依不舍,可以再陪聊一会儿`);
 
-// # 开始话语
-// 当您准备好了,可以以一个医生的身份,向来访的用户打招呼。
-//             `);
-
             this.cdRef.detectChanges();
           }
       },1000)