update:css

soul-app/src/app/consult-picture/consult-picture.component.ts

@@ -16,7 +16,7 @@ import { DalleOptions, ImagineWork,FmodeChatCompletion } from 'fmode-ng';
 })
 export class ConsultPictureComponent  implements OnInit {
 
-  userPrompt:string = "生成一个414*896大小手机壁纸图片，在柔和的淡粉色和温暖的浅黄色交织中，油画风格，通过小爱心、小星星和小气泡点缀，营造出一种温馨和放松的氛围，让人感到心灵的宁静与舒适。"
+  userPrompt:string = "生成一个手机壁纸图片，在浅色系且是暖色系的颜色交织中，颜色不要太亮眼，绘画卡通风格，通过小爱心、小星星、花瓣和小泡泡点缀，营造出一种温馨和放松的氛围，让人感到心灵的宁静与舒适。"
   promptInput(ev:any){
     this.userPrompt = ev.detail.value;
   }
@@ -34,7 +34,7 @@ export class ConsultPictureComponent  implements OnInit {
   async createImage(){
     this.imagineWork = new ImagineWork();
     //文本生成
-    let PromptTemplate = `请你作为一名专业的设计师，结合壁纸的基础设计元素帮我设计一个贴切我项目的手机壁纸
+    let PromptTemplate = `请你作为一名专业的设计师，结合壁纸的基础设计元素以及丰富的想象力帮我设计一个贴切我项目的手机壁纸
     要求如下：
     ${this.userPrompt}
     `

soul-app/src/app/tab1/tab1.page.scss

@@ -1,8 +1,8 @@
-/* 设置页面背景色 */
+/* 整体ion-content背景 */
 ion-content {
-    --background: #f9f9f9; /* 设置内容背景色 */
-  }
-  
+  --background: url('https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/aigc/imagine/4RHC2Jhp2l-0.png') no-repeat fixed!important;
+  --background-size: cover; /* 使背景图片覆盖整个屏幕 */
+}
   /* 设置卡片的样式 */
   ion-card {
     margin: 10px; /* 卡片之间的间距 */
@@ -13,10 +13,10 @@ ion-content {
     font-weight:bold;
   }
   
-  /* 设置列表项的样式 */
-  ion-item {
-    margin: 5px 0; /* 列表项之间的间距 */
-  }
+  // /* 设置列表项的样式 */
+  // ion-item {
+  //   margin: 5px 0; /* 列表项之间的间距 */
+  // }
   ion-button {
     font-size: 15px; /* 增大字体大小 */
     margin-top: 8px; /* 上间距，仅在需要时添加 */
@@ -52,8 +52,6 @@ ion-content {
   /* 确保按钮的文本颜色是白色 */
   .button-text {
     color: #ffffff !important; /* 使用!important可以确保这个规则具有更高的优先级，但通常不推荐，除非确实需要 */
-    /* 然而，在这个例子中，由于按钮本身可能有自己的颜色设置，你可能不需要为.button-text设置颜色，
-       而是应该确保按钮的color属性正确，并在需要时覆盖按钮的默认颜色设置 */
   }
 
   ion-avatar {
@@ -79,4 +77,9 @@ ion-content {
     display: flex;
     width: 100%; /* 使按钮容器占满整个宽度 */
   }
+  ion-item {
+    background: rgba(18, 10, 0, 0.01); /* 列表项背景为半透明白色 */
+    margin-bottom: 10px; /* 列表项之间的间距 */
+    padding: 0.5px; /* 内边距 */
+  }
   

soul-app/src/app/tab2/tab2.page.html

@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header [translucent]="true">
   <ion-toolbar>
     <ion-item lines="none">
       <!-- 搜索框 -->
@@ -13,14 +13,13 @@
 </ion-header>
 
 <ion-content>
-  <!-- 智能陪聊区 -->
-  <section>
-    <ion-card>
+  <!-- 智能陪聊区 --> 
+   <ion-card>
       <ion-card-header>
         <ion-card-title>智能陪聊</ion-card-title>
       </ion-card-header>
       <ion-card-content>
-        <p>以下是一些专业性的的智能心理陪聊师：</p>
+        <p style="font-size: 16px;">以下是一些专业性的的智能心理陪聊师：</p>
         <ion-list>
           <ion-item *ngFor="let chatpartner of chatpartnerList">
             <ion-avatar slot="start">
@@ -35,11 +34,8 @@
         </ion-list>
       </ion-card-content>
     </ion-card>
-  </section>
-
-  <!-- 聊天服务区 -->
-  <section>
-    <ion-card>
+  <!-- 聊天服务区 -->  
+   <ion-card>
       <ion-card-header>
         <ion-card-title style="flex: 1;">普通聊天</ion-card-title>
       </ion-card-header>
@@ -57,12 +53,10 @@
         </ion-item>
         <p style="font-size: 16px; text-indent:2em;">在这里，我是你的聊天伙伴，无论是生活上的开心，还是工作上的糟糕，你都可以跟我分享，这里是属于你一个人的空间，你可以大胆放心的使用。</p>
         </ion-list>
-      </ion-card-content>
-    </ion-card>
-  </section>
+      </ion-card-content> 
+    </ion-card>  
 
   <!--普通心理问题的小贴心建议建议区-->
-  <section>
     <ion-card>
       <ion-card-header>
         <ion-card-title>小贴心建议</ion-card-title>
@@ -80,5 +74,4 @@
         </ion-list>
       </ion-card-content>
     </ion-card>
-  </section>
 </ion-content>

soul-app/src/app/tab2/tab2.page.scss

@@ -1,36 +1,39 @@
-ion-content {
-  background: rgba(243, 181, 181, 0.8); /* 卡片背景为半透明白色，增加可读性 */
-}
-
-ion-card {
-  background: rgba(243, 181, 181, 0.8); /* 卡片背景为半透明白色，增加可读性 */
-}
-
 ion-item {
-  background: rgba(255, 255, 255, 0.8); /* 列表项背景为半透明白色 */
-  border-radius: 8px; /* 圆角 */
+  background: rgba(18, 10, 0, 0.996); /* 列表项背景为半透明白色 */
   margin-bottom: 10px; /* 列表项之间的间距 */
+  padding: 0.5px; /* 内边距 */
 }
 
 ion-avatar {
-  width: 50px; /* 或者你需要的任何尺寸 */
-  height: 50px; /* 保持宽高一致，避免变形 */
+  width: 50px; /* 头像宽度 */
+  height: 50px; /* 头像高度 */
 }
 
 ion-avatar img {
-  width: 100%; /* 让图片填满avatar */
+  width: 100%; /* 让图片填满头像 */
   height: auto; /* 保持图片比例 */
 }
 
 ion-searchbar {
   padding: 10px; /* 内边距 */
-  border-radius: 4px; /* 圆角 */
+  border-radius: 20px; /* 圆角 */
   font-size: 16px; /* 字体大小 */
 }
 
-ion-button {
+/* 按钮颜色为暖色系 */
+.customer-service-button,
+ion-item ion-button {
+  --background: #f9dd94; /* 浅粉色，作为示例的暖色系 */
+  --color: #FFFFFF; /* 白色文本 */
+  box-shadow: none; /* 移除按钮的阴影 */
   font-size: 15px; /* 增大字体大小 */
   margin-top: 8px; /* 上间距，仅在需要时添加 */
   text-transform: none; /* 按钮文字不变形 */
-  height: 35px;
+  height: 40px; /* 按钮高度 */
+}
+
+/* 整体ion-content背景 */
+ion-content {
+  --background: url('https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/aigc/imagine/4RHC2Jhp2l-0.png') no-repeat fixed!important;
+  --background-size: cover; /* 使背景图片覆盖整个屏幕 */
 }

soul-app/src/app/tab2/tab2.page.ts

@@ -10,7 +10,6 @@ import { ModalController } from '@ionic/angular/standalone';
 import { CloudObject, CloudQuery, CloudUser } from 'src/lib/ncloud';
 import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
 import { CustomerServiceComponent } from '../customer-service/customer-service.component';
-import { ReportModalComponent } from '../report-modal/report-modal.component';
 
 @Component({
   selector: 'app-tab2',

soul-app/src/app/tab3/tab3.page.html

@@ -46,6 +46,7 @@
     </ion-card-content>
   </ion-card>
 
+  <ion-card>
   <!-- 功能列表 -->
   <ion-list>
     <!-- 个人信息设置 -->
@@ -95,5 +96,6 @@
       <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
     </ion-item>
   </ion-list>
+</ion-card>
 
 </ion-content>

soul-app/src/app/tab3/tab3.page.scss

@@ -50,4 +50,9 @@
     ion-button {
       --border-radius: 4px;
     }
-  }
+  }
+  /* 整体ion-content背景 */
+ion-content {
+  --background: url('https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/aigc/imagine/4RHC2Jhp2l-0.png') no-repeat fixed!important;
+  --background-size: cover; /* 使背景图片覆盖整个屏幕 */
+}