会话从中间弹出来

chat.vue

 <template>
 <template>
-    <div class="chat-con h-100">
+    <div class="chat-con">
         <ChatTitle :close="hide" />
         <ChatTitle :close="hide" />
         <div class="chat-area-con">
         <div class="chat-area-con">
             <div v-if="chatId != null" class="h-100 chat-area">
             <div v-if="chatId != null" class="h-100 chat-area">
@@ -14,7 +14,7 @@
                     >添加成员</el-button
                     >添加成员</el-button
                 >
                 >
             </div> -->
             </div> -->
-                <el-tabs v-model="currentTab">
+                <el-tabs class="chat-panel" v-model="currentTab">
                     <el-tab-pane label="数据" name="one"
                     <el-tab-pane label="数据" name="one"
                         >model的数据，可配置。</el-tab-pane
                         >model的数据，可配置。</el-tab-pane
                     >
                     >
@@ -109,6 +109,9 @@ export default class Chat extends Vue {
 }
 }
 </script>
 </script>
 <style lang="less" scoped>
 <style lang="less" scoped>
+.chat-con {
+    height:70vh;
+}
 .chat-area-con {
 .chat-area-con {
     height: calc(100% - 60px);
     height: calc(100% - 60px);
 }
 }
@@ -138,4 +141,9 @@ export default class Chat extends Vue {
     bottom: 20px;
     bottom: 20px;
     text-align: center;
     text-align: center;
 }
 }
+.chat-panel {
+    /deep/ .el-tabs__item {
+        padding:0 18px;
+    }
+}
 </style>
 </style>