feat: 悬浮优化

src/views/customerService/chatDetail.vue

@@ -6,18 +6,19 @@
       </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-tabs style="padding: 10px 10px 0;" @tab-click="handleClick">
-          <el-tab-pane v-for="(item) in customerList" :key="item.code" >
-            <div slot="label">
-              <div class="span-box">
-                <span>{{ item.name }}</span>
-                <div v-if="item.unReadMessageCount > 0" class="span-box__num"/>
+      <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">
+                <div class="span-box">
+                  <span>{{ item.name }}</span>
+                  <div v-if="item.unReadMessageCount > 0" class="span-box__num"/>
+                </div>
               </div>
-            </div>
-          </el-tab-pane>
-        </el-tabs>
-
+            </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 {