[feat][ai生涯访谈][聊天静态页面]

src/views/xjc-integratedmachine/environment/ai_interview/ai_career_interview_chat.vue

@@ -35,28 +35,28 @@
                 <div class="message-list" ref="chatContainerRef">
                     <div v-for="(item, index) in chatRecordList" :key="item.id">
                         <div v-if="item.isUser == 1" class="user-message">
-                            <img src="@/assets/images/common/ai/user.png" alt="icon" style="margin-left: 4px"/>
-                            <span class="user-message-content">{{item.content}}</span>
+                            <img src="@/assets/images/environment/ai-career-chat-profile.png" alt="icon" style="margin-left: 4px;height: 50px;width: 50px"/>
+                            <span class="user-message-content content-text" >{{item.content}}</span>
                         </div>
                         <div v-else class="bot-message">
-                            <img src="@/assets/images/common/ai/system.png" alt="icon" style="margin-left: 4px"/>
+                            <img src="@/assets/images/environment/ai-career-chat-profile.png" alt="icon" style="margin-left: 4px;height: 50px;width: 50px"/>
                             <div style="margin-left: 4px;">
                                 <div class="bot-message-content">
                                     <div v-if="index === chatRecordList.length-1">
                                         <div v-if="item.isTyping">
-                                            <div v-html="item.content"></div>
+                                            <div v-html="item.content" class="content-text"></div>
                                             <span class="loading-dots" style="display: flex;justify-content: center">
                                                 <span class="dot"></span>
                                                 <span class="dot"></span>
                                             </span>
                                         </div>
                                         <div v-else>
-                                            <div v-html="item.content"></div>
+                                            <div v-html="item.content"  class="content-text"></div>
                                         </div>
                                     </div>
                                     <div v-else>
-                                        <div v-show="!expandIndexList.includes(index)" v-html="item.content.substring(0, 80)"></div>
-                                        <div v-show="expandIndexList.includes(index)" v-html="item.content"></div>
+                                        <div v-show="!expandIndexList.includes(index)" v-html="item.content.substring(0, 80)"  class="content-text"></div>
+                                        <div v-show="expandIndexList.includes(index)" v-html="item.content"  class="content-text"></div>
                                     </div>
                                 </div>
                                 <div style="margin: 4px">
@@ -64,10 +64,15 @@
                                 </div>
                             </div>
                             <div v-if="index !== chatRecordList.length-1">
-                                <el-button v-if="item.content.length>80" style="margin-left: 4px"
+                               <!-- <el-button v-if="item.content.length>80" style="margin-left: 4px"
                                            @click="foldOrExpandMessage(index, expandIndexList.includes(index))">
                                     {{expandIndexList.includes(index)?'折叠':'展开'}}
-                                </el-button>
+                                </el-button>-->
+                                <img v-if="item.content.length>80"
+                                     @click="foldOrExpandMessage(index, expandIndexList.includes(index))"
+                                    :src="expandIndexList.includes(index)?msgFold:msgExpand"
+                                    alt="icon"
+                                    style="margin-left: 4px;height: 36px;width: 36px"/>
                             </div>
                             <el-button @click="ttsStartPlay(item.content, index)">{{playActiveIndex === index && playButtonFlag ?'停止':'播放'}}</el-button>
                         </div>
@@ -100,6 +105,9 @@
     // 语音播放
     import {Base64} from 'js-base64'
     import * as AudioPlayer from "/public/ai/tts/dist/index.umd.js"
+    import {aiChatRecordList, aiChatRecordAdd} from '@/api/xjc-integratedmachine/common/aiChat.js'
+    import msgFold from '@/assets/images/environment/ai-career-msg-fold.png'
+    import msgExpand from '@/assets/images/environment/ai-career-msg-expand.png'
     const router = useRouter()
     const route = useRoute()
 
@@ -809,8 +817,89 @@
                     margin-right: 30px;
                 }
             }
+            .chat-container {
+                display: flex;
+                flex-direction: column;
+                height: 865px;
+                /*聊天列表*/
+                .message-list{
+                    flex: 1;
+                    height: 865px;
+                    overflow-y: auto;
+                    display: flex;
+                    flex-direction: column;
+                    .user-message {
+                        display: flex;
+                        align-self: flex-end;
+                        flex-direction: row-reverse;
+                        align-items: center;
+                        margin: 4px;
+                        .user-message-content {
+                            padding: 10px;
+                            background: #EDFFFB;
+                            border-radius: 5px 5px 32px 5px;
+                        }
+                    }
+
+
+                    .bot-message {
+                        max-width: 70%;
+                        display: flex;
+                        align-self: flex-start;
+                        align-items: flex-start;
+                        margin: 4px;
+                        .bot-message-content {
+                            padding: 10px;
+                            background: #EDFFFB;
+                            border-radius: 5px 5px 5px 32px;
+
+                        }
+                    }
+                }
+            }
+            .input-container{
 
+            }
         }
     }
 
+    .content-text{
+        font-weight: 400;
+        font-size: 28px !important;
+        color: #333333;
+        line-height: 52px;
+        letter-spacing: 3px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+
+    .loading-dots {
+        padding-left: 5px;
+    }
+    .dot {
+        display: inline-block;
+        margin-left: 5px;
+        width: 8px;
+        height: 8px;
+        background-color: #000000;
+        border-radius: 50%;
+        animation: pulse 1.2s infinite ease-in-out both;
+    }
+    .dot:nth-child(2) {
+        animation-delay: -0.6s;
+    }
+
+    @keyframes pulse {
+        0%,
+        100% {
+            transform: scale(0.6);
+            opacity: 0.4;
+        }
+
+        50% {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
 </style>