修复完善deepmate页面

pages.json

@@ -129,6 +129,14 @@
 				"titleNView": false,
 				"bounce": false
 			}
+		},
+		{
+			"path": "pages/blank/blank",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom",
+				"titleNView": false
+			}
 		}
 	],
 	"globalStyle": {

pages/blank/blank.vue

@@ -0,0 +1,23 @@
+<template>
+  <view class="blank-page">
+    <text class="tip">这是一个空白页</text>
+  </view>
+</template>
+
+<script setup>
+// 空白页，无逻辑
+</script>
+
+<style scoped>
+.blank-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-color: #ffffff;
+}
+.tip {
+  color: #999999;
+  font-size: 28rpx;
+}
+</style>

pages/deepMate/deepMate.vue

@@ -20,6 +20,9 @@
 
     <!-- 主要内容区域 -->
     <view class="main-content">
+      <view class="banner-panel" v-if="messages.length === 0">
+        <image src="https://d31zlh4on95l9h.cloudfront.net/images/42e18bd7fe97d4f4f37aa70439a0990b.svg" class="pray-banner" mode="aspectFill" ></image>
+       <view class="contain">
       <!-- 机器人头像和欢迎语 -->
       <view class="robot-container" v-if="messages.length === 0">
         <image src="https://d31zlh4on95l9h.cloudfront.net/images/61fa384381c88ad80be28f41827fe0e5.svg" class="robot-avatar"></image>
@@ -30,25 +33,28 @@
       </view>
 
       <!-- 功能标签栏 -->
-      <view class="function-tabs" v-if="messages.length === 0">
+      <scroll-view class="function-tabs" v-if="messages.length === 0" scroll-x="true" show-scrollbar="false">
         <view class="tab-item ">个股诊断</view>
         <view class="tab-item">市场情绪温度计</view>
         <view class="tab-item">买卖时机提示</view>
         <view class="tab-item">个股</view>
-      </view>
+      </scroll-view>
 
       <!-- 特斯拉推荐卡片 -->
       <view class="recommend-card" v-if="messages.length === 0">
+        <view class="arrow" v-if="messages.length === 0"></view>
         <view class="card-content">
           <image src="../../static/images/tesla-logo.png" class="logo"></image>
           <view class="card-text">
             <text class="main-question">当前特斯拉该如何布局？</text>
             <text class="stock-code">TSLA</text>
           </view>
-          <image src="/static/icons/arrow-right.png" class="arrow-icon"></image>
+          <image src="https://d31zlh4on95l9h.cloudfront.net/images/40d94054644f6e3f1c366751f07f0010.svg" class="arrow-icon" @click="goBlank"></image>
+        </view>
         </view> 
       </view>
       
+      </view>
       <!-- 可能感兴趣的话题 -->
       <view v-if="messages.length === 0" class="interest-section">
         <text class="section-title">- 您可能感兴趣 -</text>
@@ -102,25 +108,27 @@
     <!-- 输入框区域 -->
     <view class="input-area">
       <view class="input-wrapper">
-        <image src="../../static/icons/mic.png" class="mic-icon"></image>
         <input
           type="text"
           placeholder="请输入股票代码/名称，获取AI洞察"
+          placeholder-style="color:#fff;opacity:1"
           class="input-field"
           v-model="inputMessage"
           @confirm="sendMessage"
         />
-        <button class="send-button" @click="sendMessage" :disabled="isSending">
-          <image
-            src="/static/icons/send.png"
+        <image class="send-button" @click="sendMessage" :disabled="isSending">
+          <!-- <image
+            src="https://d31zlh4on95l9h.cloudfront.net/images/95f1ea2262e9157db13c93c0dc1c5d96.svg"
             class="send-icon"
-          ></image>
-        </button>
+          ></image> -->
+        </image>
       </view>
       <text class="disclaimer" 
         >以上数据由AI生成，不作为最终投资建议，决策需独立！</text
       >
     </view>
+
+    <image class="back-to-top" src="https://d31zlh4on95l9h.cloudfront.net/images/ba357635d2bb480241952bb1cabacd73.svg" @click="scrollToTop"></image>
   </view>
 </template>
 
@@ -137,22 +145,22 @@ const hotTopics = ref([
   {
     id: 1,
     text: '英伟达(NVDA)股票情绪温度？',
-    icon: '../../static/icons/hot-tag.png'
+    icon: 'https://d31zlh4on95l9h.cloudfront.net/images/7ed58be0f4b81aeb398d9ba2534a624b.svg'
   },
   {
     id: 2,
     text: '博通(AVGO)明天还能涨吗？',
-    icon: '../../static/icons/hot-tag.png'
+    icon: 'https://d31zlh4on95l9h.cloudfront.net/images/7ed58be0f4b81aeb398d9ba2534a624b.svg'
   },
   {
     id: 3,
     text: '为什么Fluence Energy(FLNC)会暴涨？',
-    icon: '../../static/icons/hot-tag.png'
+    icon: 'https://d31zlh4on95l9h.cloudfront.net/images/7ed58be0f4b81aeb398d9ba2534a624b.svg'
   },
   {
     id: 4,
     text: '为什么Fluence Energy(FLNC)会暴涨？',
-    icon: '../../static/icons/hot-tag.png'
+    icon: 'https://d31zlh4on95l9h.cloudfront.net/images/7ed58be0f4b81aeb398d9ba2534a624b.svg'
   }
 ]);
 
@@ -193,6 +201,13 @@ const newChat = () => {
   initUUID();
 };
 
+// 跳转到空白页
+const goBlank = () => {
+  uni.navigateTo({
+    url: '/pages/blank/blank'
+  });
+};
+
 // 发送消息
 const sendMessage = () => {
   if (inputMessage.value.trim() === "" || isSending.value) return;
@@ -298,6 +313,9 @@ const scrollToBottom = () => {
     }
   });
 };
+const scrollToTop = () => {
+  uni.pageScrollTo({ scrollTop: 0, duration: 200 });
+};
 </script>
 
 <style scoped>
@@ -352,8 +370,9 @@ const scrollToBottom = () => {
 
 .main-content {
   flex: 1;
-  padding: 30rpx;
+  padding: 20rpx;
   overflow-y: auto;
+  margin-top: 20rpx;
   margin-bottom: 120rpx;
 }
 
@@ -364,10 +383,10 @@ const scrollToBottom = () => {
 }
 
 .robot-avatar {
-  width: 120rpx;
-  height: 120rpx;
+  width: 130rpx;
+  height: 130rpx;
   border-radius: 50%;
-  margin-right: 20rpx;
+  margin-right: 10rpx;
 }
 
 .welcome-message {
@@ -376,6 +395,8 @@ const scrollToBottom = () => {
 
 .greeting {
   font-size: 32rpx;
+  margin-left: 50rpx;
+  top: 40rpx;
   font-weight: bold;
   color: #333333;
   line-height: 48rpx;
@@ -383,10 +404,11 @@ const scrollToBottom = () => {
 
 .description {
   display: block;
-  font-size: 26rpx;
+  font-size: 24rpx;
   color: #666666;
   line-height: 36rpx;
   margin-top: 10rpx;
+  margin-left: 45rpx;
 }
 
 .function-tabs {
@@ -400,7 +422,7 @@ const scrollToBottom = () => {
   font-size: 20rpx;
   font-weight: 700;
   color: #666666;
-  background-color: #f0f0f0;
+  background-color: #fffefe;
   margin-right: 20rpx;
   transition: all 0.3s;
 }
@@ -412,11 +434,12 @@ const scrollToBottom = () => {
 }
 
 .recommend-card {
-  background: linear-gradient(180deg, #fee7ed 0%, #ffffff 100%);
-  border-radius: 20rpx;
-  padding: 30rpx;
+  background: url('https://d31zlh4on95l9h.cloudfront.net/images/4da1d629a55c307c3605ca15bf15189a.svg');
+  background-repeat: no-repeat;
+  /* border-radius: 20rpx; */
+  padding: 40rpx;
   margin-bottom: 30rpx;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+  /* box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); */
 }
 
 .card-content {
@@ -438,6 +461,7 @@ const scrollToBottom = () => {
 
 .card-text {
   flex: 1;
+  margin-left: 20rpx;
 }
 
 .main-question {
@@ -459,8 +483,14 @@ const scrollToBottom = () => {
 }
 
 .arrow-icon {
-  width: 32rpx;
-  height: 32rpx;
+background: url('https://d31zlh4on95l9h.cloudfront.net/images/40d94054644f6e3f1c366751f07f0010.svg');
+background-repeat: no-repeat;
+left: 0.5rem;
+top: 1.8rem;
+background-size: 100% 100%;
+width: 60rpx;
+height: 60rpx;
+
 }
 
 .interest-section {
@@ -631,7 +661,10 @@ const scrollToBottom = () => {
   padding: 15rpx 20rpx;
   background-color: rgb(220, 31, 29);
   border-radius: 100rpx;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+    display: flex;
+  align-items: center;
+  justify-content: center;
+
   height: 50rpx;
 }
 
@@ -644,7 +677,11 @@ const scrollToBottom = () => {
 .input-field {
   flex: 1;
   font-size: 28rpx;
-  color: #ffffff;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 60rpx;
   background: none;
   border: none;
   outline: none;
@@ -656,9 +693,13 @@ const scrollToBottom = () => {
 }
 
 .send-button {
-  background: none;
-  border: none;
+  background: url('https://d31zlh4on95l9h.cloudfront.net/images/95f1ea2262e9157db13c93c0dc1c5d96.svg');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  height: 50rpx;
+  width: 50rpx;
   padding: 0;
+  border: 1rpx solid transparent;
   margin-left: 20rpx;
 }
 
@@ -669,10 +710,47 @@ const scrollToBottom = () => {
 
 .disclaimer {
   font-size: 15rpx;
-  color: #999999;
+  color: #4d4c4c;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 15rpx;
 }
+.banner-panel {
+  position: relative;
+  height: 480rpx; /* 拉长容器，灰色背景跟随变高 */
+  overflow: hidden; /* 让圆角和内部层剪裁一致 */
+  border-radius: 15rpx;
+}
+
+.pray-banner {
+  position: absolute;
+  /* background-size: 100% 100%; */
+  inset: 0; /* 顶部、底部、左、右都贴合容器 */
+  width: 100%;
+  height: 88%;
+  border-radius: 15rpx;
+  z-index: 1; /* 在灰底之上、内容之下 */
+}
+.contain {
+  margin: 0 20rpx;
+  gap: 5rpx;
+}
+.banner-panel .robot-container,
+.banner-panel .function-tabs,
+.banner-panel .recommend-card {
+  position: relative;
+  z-index: 2;
+}
+.back-to-top {
+  position: fixed;
+  right: 30rpx;
+  bottom: 35%;
+  width: 100rpx;
+  height: 100rpx;
+  z-index: 1000;
+}
+.back-to-top:active {
+  transform: scale(0.96);
+}
 </style>