diff --git a/src/views/IndexChat.vue b/src/views/IndexChat.vue
index 2dd819e..3f5a161 100644
--- a/src/views/IndexChat.vue
+++ b/src/views/IndexChat.vue
@@ -81,7 +81,7 @@
                 </div>
             </div>
         </div> -->
-        <div class="message-container">
+        <div class="message-container" id="chatform">
             <div class="message" v-for="(message, index) in messages" :key="message.id">
                 <div class="Left" v-if="!message.isMe">
                     <div class="Left_mesg">
@@ -129,18 +129,11 @@
                                             <span class="fullname">白亮</span>
                                             <span class="workername">主任医师</span>
                                         </div>
-
                                         <div class="work_tag">
                                             <span>象山县中医医院</span>
                                             <div class="xie"></div>
                                             <span>神经外科</span>
                                         </div>
-
-                                       <!--  <div class="tag_wrp">
-                                            <div class="tag">医保定点</div>
-                                            <div style="width: 4px;"></div>
-                                            <div class="tag">医保定点</div>
-                                        </div> -->
                                         <div class="detail"> 象山中医院建于1985年3月，是一所集中医、中西医结合，医疗、预防、康复于一体的非...</div>
                                     </div>
                                 </div>
@@ -158,6 +151,28 @@
                                 </div>
                             </div>
                         </div>
+                        <div v-else-if="message.type == 'card3'" class="card3">
+                            <div class="c_top">
+                                推荐您可以挂神经内科，您还可根据自身偏好重新选择，继续为您推荐，如偏好因素不在其列，可继续提出您的需求。
+                            </div>
+                            <div class="c_bt">
+                                <div class="cbt_it" v-for=" v in 3">
+                                    <div class="it_name">神经内科</div>
+                                    <div class="book_btn">预约</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-else-if="message.type == 'card4'" class="card3">
+                            <div class="c_top">
+                                推荐您可以挂神经内科，您还可根据自身偏好重新选择，继续为您推荐，如偏好因素不在其列，可继续提出您的需求。
+                            </div>
+                            <div class="c_bt">
+                                <div class="cbt_it" v-for=" v in 3">
+                                    <div class="it_name">神经内科</div>
+                                    <div class="book_btn">预约</div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="Right" v-else>
@@ -187,7 +202,7 @@
     </div>
 </template>
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, nextTick } from 'vue'
 let inputText = ref('')
 let messages = reactive([
     { id: 1, type: 'fstxt', text: '您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟', isMe: false },
@@ -196,6 +211,10 @@ let messages = reactive([
     { id: 4, type: 'txt', text: '基于号源等多种因素考虑，以下是相关医生推荐：', isMe: false },
     { id: 5, type: 'card2', text: '基：', isMe: false },
     { id: 6, type: 'txt', text: '最近总是头疼可以挂什么科室', isMe: true },
+    { id: 7, type: 'card3', text: '卡片3', isMe: false },
+    { id: 8, type: 'card4', text: '为您推荐相关医生，也可选择查看更多医生。', isMe: false },
+    { id: 9, type: 'txt', text: '人民医院怎么走', isMe: true },
+    { id: 10, type: 'card5', text: '卡片5', isMe: false },
 ]);
 let sendMessage = () => {
     console.log("dddd", inputText.value)
@@ -212,11 +231,14 @@ let sendMessage = () => {
     }
 }
 let scollToButtom = () => {
-    /*   $nextTick(() => {
-            let chatform= document.getElementById('chatform') // 获取对象
-            chatform.scrollTop = chatform.scrollHeight // 滚动高度
-          }) */
+    nextTick(() => {
+        let chatForm = document.getElementById('chatform'); // 获取对象
+        if (chatForm) {
+            chatForm.scrollTop = chatForm.scrollHeight; // 滚动高度
+        }
+    });
 }
+// scollToButtom()
 </script>
 <style lang="scss" scoped>
 ::-webkit-input-placeholder {
@@ -461,7 +483,7 @@ let scollToButtom = () => {
                     }
                 }
 
-                
+
 
                 .work_tag {
                     font-size: 12px;
@@ -470,16 +492,17 @@ let scollToButtom = () => {
                     color: #999999;
                     display: flex;
                     align-items: center;
+
                     .xie {
                         width: 1px;
                         border: 1px solid #999999;
                         height: 12px;
-                        margin:  0px 10px;
+                        margin: 0px 10px;
                         opacity: 0.5;
                     }
                 }
 
-              
+
                 .detail {
                     font-size: 10px;
                     font-family: PingFang SC, PingFang SC;
@@ -544,6 +567,49 @@ let scollToButtom = () => {
 
 }
 
+.card3 {
+    width: 300px;
+    height: 294px;
+    border-radius: 16px;
+    background-color: #fff;
+    box-sizing: border-box;
+    padding: 16px;
+    border: 1px solid red;
+
+    .c_top {margin-bottom: 12px;}
+
+    .c_bt {}
+
+    .cbt_it {
+        width: 268px;
+        height: 46px;
+        background: #EFF3FC;
+        border-radius: 8px 8px 8px 8px;
+        margin-bottom: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px;
+        box-sizing: border-box;
+        .it_name {
+            font-size: 14px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            color: #333333;
+        }
+
+        .book_btn {
+            width: 48px;
+            height: 24px;
+            background: linear-gradient(90deg, #6591FF 0%, #4379FF 100%);
+            border-radius: 22px 22px 22px 22px;
+            text-align: center;
+            line-height: 24px;
+            color: #fff;
+        }
+    }
+}
+
 .txt {
     min-height: 44px;
     padding: 10px 16px;
@@ -586,7 +652,7 @@ let scollToButtom = () => {
         .message {
             /* width: 100%;
             height: 100%; */
-            margin-bottom: 16px!important;
+            margin-bottom: 16px !important;
         }
     }