1. feat 样式调整

components/chat-room.vue

@@ -4,7 +4,7 @@
             <div class="chat-area h-100 d-flex flex-column" ref="chatBox">
                 <div
                     ref="top"
-                    class="chat-messages pos-rel flex-fill"
+                    class="chat-messages pos-rel flex-fill d-flex"
                     :class="{ 'is-not-chat-member': !isChatMember }"
                 >
                     <div
@@ -13,7 +13,8 @@
                     >
                         {{ getCurrentInputingPeople }}正在输入
                     </div>
-                    <messages />
+                    <messages class="flex-fill" />
+                    <slot name="chat-right-panel"></slot>
                 </div>
                 <div
                     class="resize"
@@ -34,28 +35,28 @@
     </div>
 </template>
 <script lang="ts">
-import {
+    import {
         Component,
         Prop,
         Provide,
         Ref,
         Vue,
         Watch,
-} from "vue-property-decorator";
+    } from "vue-property-decorator";
 
-import MessageInput from "@/customer-service/components/message-input.vue";
-import messages from "@/customer-service/components/message-list.vue";
-import { ChatStore, chatStore } from "@/customer-service/store/model";
+    import MessageInput from "@/customer-service/components/message-input.vue";
+    import messages from "@/customer-service/components/message-list.vue";
+    import { ChatStore, chatStore } from "@/customer-service/store/model";
 
-type RoomInfoTab = "customer" | "order";
+    type RoomInfoTab = "customer" | "order";
 
-@Component({
+    @Component({
         components: {
             MessageInput,
             messages,
         },
-})
-export default class ChatRoom extends Vue {
+    })
+    export default class ChatRoom extends Vue {
         @Ref("chatBox") chatBox!: Element;
         @Ref("top") refTop!: Element;
         @Ref("bottom") refBottom!: Element;
@@ -160,11 +161,11 @@ export default class ChatRoom extends Vue {
                 ((this.refBottom as HTMLElement).style.height =
                     this.chatBox.clientHeight - this.refTop.clientHeight + "px");
         }
-}
+    }
 </script>
 
 <style lang="less" scoped>
-.chat-status {
+    .chat-status {
         display: inline-block;
         width: 46px;
         height: 20px;
@@ -178,9 +179,9 @@ export default class ChatRoom extends Vue {
         &.chat-done {
             background: #c5d4e5;
         }
-}
+    }
 
-.chat-panel {
+    .chat-panel {
         height: 100%;
         .chat-area,
         .chat-info {
@@ -191,8 +192,8 @@ export default class ChatRoom extends Vue {
             width: 349px;
             border-left: 1px solid #e1e1e1;
         }
-}
-.info-tabs {
+    }
+    .info-tabs {
         height: 40px;
         line-height: 40px;
         border-bottom: 1px solid #f0f0f0;
@@ -210,8 +211,8 @@ export default class ChatRoom extends Vue {
                 font-weight: 600;
             }
         }
-}
-.chat-area {
+    }
+    .chat-area {
         position: relative;
         width: 100%;
         overflow: hidden;
@@ -231,15 +232,15 @@ export default class ChatRoom extends Vue {
             height: 6px;
             width: 100%;
         }
-}
-.order-info-con {
+    }
+    .order-info-con {
         height: calc(100% - 40px);
-}
-.someone-inputing {
+    }
+    .someone-inputing {
         position: absolute;
         left: 20px;
         bottom: 20px;
         z-index: 1;
         color: #c2c2c2;
-}
+    }
 </style>