首页卡片开发

pages/chat/components/ai-paging.vue

@@ -1,11 +1,7 @@
 <template>
     <view class="chat-container">
         <!-- #ifdef MP-WEIXIN -->
-         <view class="chat-background">
-        <!-- #endif -->
-        <!-- #ifndef MP-WEIXIN -->
-        <view class="chat-background" v-fade:600="!messages.length">
-        <!-- #endif -->
+         <view class="chat-background" v-if="!messages.length">
             <image class="backlogo" src="/static/icon/backAI.png"></image>
             <view class="back-rowTitle">嗨！欢迎使用{{ config.appInfo.areaName }}AI智能求职</view>
             <view class="back-rowText">
@@ -24,6 +20,28 @@
                 <view class="message">{{ recognizedText }} {{ lastFinalText }}</view>
             </view>
         </view>
+        <!-- #endif -->
+        <!-- #ifndef MP-WEIXIN -->
+        <view class="chat-background" v-if="!messages.length">
+            <image class="backlogo" src="/static/icon/backAI.png"></image>
+            <view class="back-rowTitle">嗨！欢迎使用{{ config.appInfo.areaName }}AI智能求职</view>
+            <view class="back-rowText">
+                我可以根据您的简历和求职需求，帮你精准匹配{{ config.appInfo.areaName }}互联网招聘信息，对比招聘信息的优缺点，提供面试指导等，请把你的任务交给我吧~
+            </view>
+            <view class="back-rowh3">猜你所想</view>
+            <view
+                class="back-rowmsg button-click"
+                v-for="(item, index) in queries"
+                :key="index"
+                @click="sendMessageGuess(item)"
+            >
+                {{ item }}
+            </view>
+            <view class="chat-item self" v-if="isRecording">
+                <view class="message">{{ recognizedText }} {{ lastFinalText }}</view>
+            </view>
+        </view>
+        <!-- #endif -->
         <scroll-view class="chat-list scrollView" :scroll-top="scrollTop" :scroll-y="true" scroll-with-animation>
             <!-- #ifdef MP-WEIXIN -->
             <view class="chat-list list-content">
@@ -946,19 +964,19 @@ image-margin-top = 40rpx
     white-space: pre-wrap;
 }
 .list-content {
-    padding: 0 44rpx 44rpx 44rpx;
+    padding: 0 44rpx 10rpx 44rpx;
 }
 .chat-item {
     display: flex;
     align-items: flex-start;
-    margin-bottom: 20rpx;
+    margin-bottom: 10rpx;
     width: 100%;
 }
 .chat-item.self {
     justify-content: flex-end;
 }
 .message
-    margin-top: 40rpx
+    margin-top: 0rpx
     // max-width: 80%;
     width: 100%;
     word-break: break-word;
@@ -1003,10 +1021,12 @@ image-margin-top = 40rpx
 }
 .input-area {
     padding: 32rpx 28rpx 24rpx 28rpx;
+    padding-bottom: calc(24rpx + env(safe-area-inset-bottom) + 40rpx - 40rpx);
     position: relative;
     background: #FFFFFF;
     box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(11,44,112,0.06);
     transition: height 2s ease-in-out;
+    z-index: 1001;
 }
 .input-area::after
     position: absolute