Browse Source

提交内容的备注信息

AAA123 3 months ago
parent
commit
3df63d518c
3 changed files with 117 additions and 115 deletions
  1. 1 1
      src/app/splash/splash.page.ts
  2. 2 2
      src/app/tab2/tab2.page.html
  3. 114 112
      src/app/tab2/tab2.page.scss

+ 1 - 1
src/app/splash/splash.page.ts

@@ -38,6 +38,6 @@ export class SplashPage implements AfterViewInit {
         this.splashService.setOpenLoginModal(true);
         this.router.navigate(['/tabs/tab1']);
       }, 500);
-    }, 3000); // 3秒后开始淡出
+    }, 5000); // 3秒后开始淡出
   }
 }

+ 2 - 2
src/app/tab2/tab2.page.html

@@ -38,10 +38,10 @@
   <ion-toolbar>
     <ion-grid>
       <ion-row>
-        <ion-col size="10">
+        <ion-col size="9">
           <ion-input [(ngModel)]="userInput" placeholder="请输入您的问题..." (keyup.enter)="sendMessage()"></ion-input>
         </ion-col>
-        <ion-col size="2" class="send-button-container">
+        <ion-col size="3" class="send-button-container">
           <ion-button (click)="sendMessage()" expand="block" [disabled]="isLoading || !userInput.trim()">
             发送
           </ion-button>

+ 114 - 112
src/app/tab2/tab2.page.scss

@@ -1,113 +1,115 @@
-/* src/app/tab2/tab2.page.scss */
-.message-container {
-    display: flex;
-    align-items: center; /* 垂直居中 */
-    margin-bottom: 10px;
-  }
-  
-  .user-message,
-  .ai-message {
-    width: 100%;
-  }
-  
-  .user-message .message-text,
-  .ai-message .message-text {
-    max-width: 75%; /* 消息内容的最大宽度 */
-    word-wrap: break-word; /* 防止文字溢出 */
-  }
-  
-  .avatar-container {
-    display: flex;
-    align-items: center; /* 垂直居中 */
-  }
-  
-  .full-avatar {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    overflow: hidden; /* 确保图片超出部分被隐藏 */
-  }
-  
-  .full-avatar img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover; /* 保持图片比例并填充容器 */
-    border-radius: 50%; /* 保持圆形 */
-  }
-  
-  .user-message .avatar-container {
-    margin-right: 10px; /* 头像和文本之间的间距 */
-  }
-  
-  .ai-message .avatar-container {
-    margin-left: 10px; /* 头像和文本之间的间距 */
-  }
-  
-  .user-message .message-text {
-    text-align: left; /* 用户消息左对齐 */
-    margin-left: 10px; /* 文本和头像之间的间距 */
-    color:rgb(7, 7, 15); /* 用户消息的文字颜色 */
-    
-  }
-  
-  .ai-message .message-text {
-    tetext-align: left; /* AI 消息左对齐 */
-    margin-right: 10px; /* 文本和头像之间的间距 */
-    color: #333; /* AI 医生消息的文字颜色 */
-  }
-  
-  .user-message {
-    justify-content: flex-start; /* 用户消息固定在左边 */
-    background-color:#f1f1f1; /* 用户消息的背景色 */
-    
-  }
-  
-  .ai-message {
-    justify-content: flex-end; /* AI 消息固定在右边 */
-    background-color: #f1f1f1; /* AI 医生消息的背景色 */
-  }
-  
-  /* 确保头像和消息在同一行内 */
-  .user-message .message-container,
-  .ai-message .message-container {
-    display: flex;
-    align-items: center; /* 垂直居中 */
-  }
-  
-  /* 确保消息容器占据整个宽度 */
-  .user-message .message-container,
-  .ai-message .message-container {
-    width: 100%;
-  }
-  
-  ion-footer ion-toolbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-  }
-  
-  ion-footer .send-button-container {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-  
-  ion-footer ion-input {
-    flex: 1;
-    margin-right: 10px;
-  }
-  
-  ion-footer ion-button {
-    width: 80px;
-  }
-  
-  ion-spinner {
-    margin-left: 10px;
-  }
-  
-  /* 居中显示标题 */
-  .center-title {
-    text-align: center;
-    width: 100%; /* 确保标题占据整个工具栏的宽度 */
+/* src/app/tab2/tab2.page.scss */
+.message-container {
+    display: flex;
+    align-items: center; /* 垂直居中 */
+    margin-bottom: 10px;
+  }
+  
+  .user-message,
+  .ai-message {
+    width: 100%;
+  }
+  
+  .user-message .message-text,
+  .ai-message .message-text {
+    max-width: 75%; /* 消息内容的最大宽度 */
+    word-wrap: break-word; /* 防止文字溢出 */
+  }
+  
+  .avatar-container {
+    display: flex;
+    align-items: center; /* 垂直居中 */
+  }
+  
+  .full-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    overflow: hidden; /* 确保图片超出部分被隐藏 */
+  }
+  
+  .full-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* 保持图片比例并填充容器 */
+    border-radius: 50%; /* 保持圆形 */
+  }
+  
+  .user-message .avatar-container {
+    margin-right: 10px; /* 头像和文本之间的间距 */
+  }
+  
+  .ai-message .avatar-container {
+    margin-left: 10px; /* 头像和文本之间的间距 */
+  }
+  
+  .user-message .message-text {
+    text-align: left; /* 用户消息左对齐 */
+    margin-left: 10px; /* 文本和头像之间的间距 */
+    color:rgb(7, 7, 15); /* 用户消息的文字颜色 */
+    
+  }
+  
+  .ai-message .message-text {
+    tetext-align: left; /* AI 消息左对齐 */
+    margin-right: 10px; /* 文本和头像之间的间距 */
+    color: #333; /* AI 医生消息的文字颜色 */
+  }
+  
+  .user-message {
+    justify-content: flex-start; /* 用户消息固定在左边 */
+    background-color:#f1f1f1; /* 用户消息的背景色 */
+    
+  }
+  
+  .ai-message {
+    justify-content: flex-end; /* AI 消息固定在右边 */
+    background-color: #f1f1f1; /* AI 医生消息的背景色 */
+  }
+  
+  /* 确保头像和消息在同一行内 */
+  .user-message .message-container,
+  .ai-message .message-container {
+    display: flex;
+    align-items: center; /* 垂直居中 */
+  }
+  
+  /* 确保消息容器占据整个宽度 */
+  .user-message .message-container,
+  .ai-message .message-container {
+    width: 100%;
+  }
+  
+  ion-footer ion-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+  }
+  
+  ion-footer .send-button-container {
+    display: flex;
+    justify-content: center; /* 居中对齐按钮 */
+    align-items: center;
+    min-width: 80px; /* 设置最小宽度 */
+  }
+  
+  ion-footer ion-input {
+    flex: 1;
+    margin-right: 10px;
+  }
+  
+  ion-footer ion-button {
+    width: 100%; /* 让按钮占据整个列宽 */
+    min-width: 80px; /* 设置最小宽度 */
+    white-space: nowrap; /* 防止文本换行 */
+  }
+  
+  ion-spinner {
+    margin-left: 10px;
+  }
+  /* 居中显示标题 */
+  .center-title {
+    text-align: center;
+    width: 100%; /* 确保标题占据整个工具栏的宽度 */
   }