feat: 悬浮优化

src/views/customerService/chatDetail.vue

@@ -6,7 +6,8 @@
       </el-menu-item>
     </el-menu>-->
     <el-container v-loading="loading" style="width: 100%;height: 100%; border: 1px solid #eee">
-      <el-aside style="width: 20%;background-color: white;padding: 0">
+      <el-aside style="width: 20%;background-color: white;padding: 0;min-width: 240px">
+        <div class="top-tabs" style="background: white;position: fixed; width: 19%;min-width: 200px">
           <el-tabs style="padding: 10px 10px 0;" @tab-click="handleClick">
             <el-tab-pane v-for="(item) in customerList" :key="item.code" >
               <div slot="label">
@@ -17,7 +18,7 @@
               </div>
             </el-tab-pane>
           </el-tabs>
-
+        </div>
         <div class="conversation">
           <div
             v-for="item in conversationList"
@@ -38,10 +39,13 @@
                 <div class="conversation-item-info__message__time">{{ item.lastTime }}</div>
               </div>
             </div>
+            <!--            <div class="conversation-item-delete">
+              <i class="el-icon-close"/>
+            </div>-->
           </div>
         </div>
       </el-aside>
-      <el-main style="background-color: rgb(238, 241, 246); padding: 0; border: 1px solid #eee">
+      <el-main style="background-color: rgb(238, 241, 246); padding: 0; border: 1px solid #eee;min-width: 400px">
         <div class="chat-message">
           <div class="chat-message-top flex f-jc-sb">
             <div class="chat-message-top__title">{{ currentConversationItem && currentConversationItem.nick }}</div>
@@ -662,8 +666,13 @@ export default {
 
   }
 
+  .top-tabs {
+    width: auto;
+    z-index: 1000;
+  }
   .conversation {
-    height: 100%;
+    height: calc(100vh - 184px);
+    margin-top: 60px;
 
     .conversation-item {
       border-bottom: 1px solid #e7eaec;
@@ -686,7 +695,7 @@ export default {
       }
 
       .conversation-item-info {
-        width: 100%;
+        flex: 1;
 
         .conversation-item-info__nick {
           height: 20px;
@@ -747,6 +756,15 @@ export default {
           }
         }
       }
+      .conversation-item-delete {
+        display: block;
+        width: 0px;
+        height: 30px;
+        text-align: end;
+      }
+      .conversation-item-delete:hover {
+        width: 30px;
+      }
     }
 
     .conversation-item-active {