ChatPanel-2025-7-4

src/layout/components/Chat/ChatPanel.vue

@@ -1,12 +1,14 @@
 <!-- src/components/ChatPanel.vue -->
 <template>
     <div class="chat-panel">
+
       <div class="chat-header">
         <img class="chat-icon" src="@/assets/chat/chat_line.png" alt="在线会话" />
         <span>测试名称</span>
         <span class="chat-status online"></span>
         <span class="chat-close" @click="$emit('close')">×</span>
       </div>
+
       <div class="chat-tabs">
         <span
           v-for="(tab, idx) in tabs"
@@ -18,6 +20,7 @@
           <i :class="tab.icon"></i>
         </span>
       </div>
+      
       <div class="chat-groups">
         <template v-if="activeTab === 0">
           <div class="hallLeft">
@@ -2388,10 +2391,10 @@
     border-bottom: 2px solid #409EFF;
   }
   .chat-groups {
-    flex: 1;
+     
 
-    padding: 16px;
-    overflow-y: auto;
+    padding: 0 6px;
+     
   }
   .group {
     margin-bottom: 12px;
@@ -2436,7 +2439,7 @@
         // width: 420px;
         background: #fff;
         border-radius: 20px;
-        margin-right: 20px;
+         margin-top: 11px;
         position: relative;
         .newFriendBox {
           padding: 10px 25px 0 25px;
@@ -2462,7 +2465,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            margin-right: 20px;
+            margin-right: 2px;
           }
           .newFriendText {  
             color: #333;
@@ -2597,7 +2600,7 @@
         .userListBox {
           padding: 15px 0;
           overflow-y: auto;
-          height: 380px;
+          height: 300px;
           .active {
             background: #F5F7FD;
             box-sizing: border-box;
@@ -2622,7 +2625,7 @@
             .userInfo {
               flex: 1;
               box-sizing: border-box;
-              padding-left: 15px;
+              padding-left: 5px;
               .userName {
                 display: flex;
                 align-items: center;
@@ -2639,7 +2642,7 @@
                 .userMessageNum {
                   font-size: 12px;
                   color: #333;
-                  width: 24px;
+                  width: 64px;
                   height: 24px;
                   line-height: 24px;
                   text-align: center;
@@ -2815,9 +2818,7 @@
         }
         
         .userListBox {
-          padding: 15px 0;
-          overflow-y: auto;
-          height: 560px;
+           
           .active {
             background: #F5F7FD;
             box-sizing: border-box;
@@ -2833,10 +2834,14 @@
             align-items: center;
             .flexItemBox{
               width: 100%;
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
+               
+
+              
               .userAvatar {
+                
+                  width: 58px;
+                  height: 58px;
+                  float:left;
                 img {
                   width: 58px;
                   height: 58px;
@@ -2844,7 +2849,9 @@
                 }
               }
               .userInfo {
-                flex: 1;
+                 float:left;
+                 width:131px;
+                 margin-top:17px;
                 box-sizing: border-box;
                 padding-left: 15px;
                 .userName {
@@ -2859,8 +2866,8 @@
                   }
                   .userMessageNum {
                     font-size: 12px;
-                    color: #333;
-                    width: 24px;
+                    color: #333; 
+                    width: 64px;
                     height: 24px;
                     line-height: 24px;
                     text-align: center;