聊天界面优化

src/views/Service/chat/index.vue

@@ -2,14 +2,16 @@
   <section>
     <div class="chat-section">
       <div class="leftDiv">
-        <ul class="infinite-list">
-          <li class="infinite-list-head">
-            <img :src="userInfo.headImg"/>{{ userInfo.name }}
-          </li>
-          <li v-for="item in friends" :key="item.id" @click="chat(item)" class="infinite-list-item">
-            <img :src="item.headImg"/>{{ item.name }}
-          </li>
-        </ul>
+        <li class="infinite-list-head">
+          <img :src="userInfo.headImg"/>{{ userInfo.name }}
+        </li>
+        <div class="friends-list">
+          <ul class="infinite-list">
+            <li v-for="item in friends" :key="item.id" @click="chat(item)" class="infinite-list-item">
+              <img :src="item.headImg"/>{{ item.name }}
+            </li>
+          </ul>
+        </div>
       </div>
       <div class="chat-div">
         <div class="chat-title"><span>{{ current.name }}</span></div>
@@ -229,11 +231,21 @@ export default {
 /* 左边的列表 */
 .leftDiv {
   width: 20%;
-  height: 100.5%;
+  height: 100.2%;
   float: left;
   background-color: #2e2e2e;
 }
 
+.friends-list{
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 87%;
+}
+
+.friends-list::-webkit-scrollbar {
+  display: none;
+}
+
 .infinite-list {
   padding: 0;
   margin: 0;