优化DeepMate样式

pages/deepMate/deepMate.vue

@@ -29,15 +29,18 @@
 
     <!-- 主要内容区域 -->
     <view class="main-content">
-      <view class="banner-panel" v-if="messages.length === 0">
+      <view class="banner-panel" 
+                :class="messages.length === 0 ? '' : 'panelShow'"
+>
         <image
           src="https://d31zlh4on95l9h.cloudfront.net/images/42e18bd7fe97d4f4f37aa70439a0990b.svg"
           class="pray-banner"
+          :class="messages.length === 0 ? '' : 'show'"
           mode="aspectFill"
         ></image>
         <view class="contain">
           <!-- 机器人头像和欢迎语 -->
-          <view class="robot-container" v-if="messages.length === 0">
+          <view class="robot-container">
             <image
               src="https://d31zlh4on95l9h.cloudfront.net/images/61fa384381c88ad80be28f41827fe0e5.svg"
               class="robot-avatar"
@@ -310,7 +313,7 @@ const simulateBotResponse = (userMessage) => {
   });
 
   // 模拟流式响应
-  let responseText = `我已经收到您的消息: "${userMessage}"。作为您的股市顾问，我可以为您提供专业的投资建议。请问您想了解哪方面的信息？`;
+  let responseText = `我已经收到您的消息: "${userMessage}"。作为您的股市顾问，我可以为您提供专业的投资建议。请问您想了解哪方面的信息？作为您的股市顾问，我可以为您提供专业的投资建议。请问您想了解哪方面的信息？作为您的股市顾问，我可以为您提供专业的投资建议。请问您想了解哪方面的信息？作为您的股市顾问，我可以为您提供专业的投资建议。请问您想了解哪方面的信息？作为您的股市顾问，我可以为您提供专业的投资建议。请问您想了解哪方面的信息？作为您的股市顾问，我可以为您提供专业的投资建议。请问您想了解哪方面的信息？作为您的股市顾问，我可以为您提供专业的投资建议。请问您想了解哪方面的信息？作为您的股市顾问，我可以为您提供专业的投资建议。请问您想了解哪方面的信息？作为您的股市顾问，我可以为您提供专业的投资建议。请问您想了解哪方面的信息？作为您的股市顾问，我可以为您提供专业的投资建议。请问您想了解哪方面的信息？作为您的股市顾问，我可以为您提供专业的投资建议。请问您想了解哪方面的信息？`;
   let index = 0;
 
   const typeWriter = () => {
@@ -357,7 +360,8 @@ const scrollToTop = () => {
   flex-direction: column;
   height: 100vh;
   background-color: #ffffff;
-  padding: 20rpx;
+  padding: 20rpx 0rpx;
+
 }
 
 .header {
@@ -366,6 +370,7 @@ const scrollToTop = () => {
   align-items: center;
   padding: 20rpx 30rpx;
   background-color: #ffffff;
+
 }
 
 .header-left,
@@ -752,6 +757,9 @@ const scrollToTop = () => {
   overflow: hidden; /* 让圆角和内部层剪裁一致 */
   border-radius: 15rpx;
 }
+.panelShow{
+  height: 12%;
+}
 
 .pray-banner {
   position: absolute;
@@ -762,6 +770,8 @@ const scrollToTop = () => {
   border-radius: 15rpx;
   z-index: 1; /* 在灰底之上、内容之下 */
 }
+
+
 .contain {
   margin: 0 20rpx;
   gap: 5rpx;