udpate ui

chat-list.vue

@@ -122,6 +122,9 @@ export default class ChatList extends Vue {
   @chatStore.Mutation(ChatStore.MUTATION_SAVE_CHAT_TITLE)
   private readonly saveChatTitle!: ChatStore.MUTATION_SAVE_CHAT_TITLE;
 
+  @chatStore.Mutation(ChatStore.MUTATION_SHOW_CHAT)
+  private readonly showChat: ChatStore.MUTATION_SHOW_CHAT
+
   @Prop({ type: String, default: "-1" })
   private selected!: string;
 
@@ -191,6 +194,9 @@ export default class ChatList extends Vue {
       uniplatId: data.uniplatId,
     }).finally(this.raiseChatIdChanged);
 
+    this.showChat();
+    this.$emit("close");
+
     this.saveChatTitle(data.uniplatId);
   }
 
@@ -296,7 +302,7 @@ export default class ChatList extends Vue {
     .chat-msg {
       color: #888;
       text-align: start;
-      height: 16px;
+      font-size: 13px;
       margin-top: -3px;
     }
   }

chat.vue

 <template>
-    <!-- <el-dialog
-    class="chat-dialog-con"
-    :close-on-click-modal="false"
-    :visible="visible"
-    @close="hide"
-  > -->
-    <div class="chat-con">
-        <div class="h-100 chat-list">
-            <chat-list />
-        </div>
+    <div class="chat-con h-100">
         <div v-if="chatId != null" class="h-100 chat-area">
             <chat-room :close="hide" />
         </div>
@@ -29,12 +20,10 @@
             @hide="hideAddMember"
         />
     </div>
-    <!-- </el-dialog> -->
 </template>
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 
-import ChatList from "./chat-list.vue";
 import ChatRoom from "./chat-room.vue";
 import MessageList from "./message-list.vue";
 import buttonThrottle from "./utils/button-throttle";
@@ -42,7 +31,7 @@ import buttonThrottle from "./utils/button-throttle";
 import ChatCreator from "@/customer-service/create-chat.vue";
 import { ChatStore, chatStore } from "@/customer-service/store/model";
 
-@Component({ components: { MessageList, ChatRoom, ChatList, ChatCreator } })
+@Component({ components: { MessageList, ChatRoom, ChatCreator } })
 export default class Chat extends Vue {
     @chatStore.Getter(ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS)
     private readonly chatMembers!: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS;
@@ -85,28 +74,18 @@ export default class Chat extends Vue {
 </script>
 <style lang="less" scoped>
 .chat-con {
-    --chat-list-width: 200px;
     --chat-panel-width: 350px;
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 64px;
-    z-index: 99999;
-    background: #fff;
+    font-size: 13px;
+    color:black;
 }
-.chat-list,
 .chat-area,
 .chat-panel {
     display: inline-block;
     vertical-align: top;
 }
-.chat-list {
-    width: var(--chat-list-width);
-    border-right: 1px solid #e1e1e1;
-}
+
 .chat-area {
-    width: calc(100% - var(--chat-list-width) - var(--chat-panel-width) - 2px);
+    width: calc(100%  - var(--chat-panel-width) - 2px);
 }
 .chat-panel {
     position: relative;