u

code/link/link-frontend/src/views/im/index.vue

@@ -44,37 +44,20 @@ import Icon from '@/components/icon.vue'
               单聊
             </div>
             <div class="im__list-body">
-              <div>
+              <div class="im__chat-user">
-                Operation feedback: enable the users to clearly perceive their
+                <Avatar name="A" />
-                operations by style updates and interactive effects;
+
-              </div>
+                <div class="im__chat-user-info">
-              <div>
+                  <div class="im__chat-user-main">
-                Visual feedback: reflect current state by updating or rearranging
+                    <div class="im__chat-user-name">张三</div>
-                elements of the page.
+                    <div class="im__chat-user-last-time">聊天时间</div>
-              </div>
+                  </div>
-              <div>
+
-                Operation feedback: enable the users to clearly perceive their
+                  <div class="im__chat-user-message">
-                operations by style updates and interactive effects;
+                    <div class="im__chat-user-last-message">下周一起吃个饭</div>
-              </div>
+                    <div class="im__chat-user-unread-count">2</div>
-              <div>
+                  </div>
-                Visual feedback: reflect current state by updating or rearranging
+                </div>
-                elements of the page.
-              </div>
-              <div>
-                Operation feedback: enable the users to clearly perceive their
-                operations by style updates and interactive effects;
-              </div>
-              <div>
-                Visual feedback: reflect current state by updating or rearranging
-                elements of the page.
-              </div>
-              <div>
-                Operation feedback: enable the users to clearly perceive their
-                operations by style updates and interactive effects;
-              </div>
-              <div>
-                Visual feedback: reflect current state by updating or rearranging
-                elements of the page.
               </div>
             </div>
           </div>
@@ -83,7 +66,14 @@ import Icon from '@/components/icon.vue'
               群聊
             </div>
             <div class="im__list-body">
-              body
+              <div>
+                Operation feedback: enable the users to clearly perceive their
+                operations by style updates and interactive effects;
+              </div>
+              <div>
+                Visual feedback: reflect current state by updating or rearranging
+                elements of the page.
+              </div>
             </div>
           </div>
         </div>
@@ -105,6 +95,26 @@ import Icon from '@/components/icon.vue'
   width: 100%;
   background-color: #f5f6fa;
 
+  & *::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  & *::-webkit-scrollbar-track {
+    background-color: #f1f1f1;
+    border-radius: 10px;
+  }
+
+  & *::-webkit-scrollbar-thumb {
+    background-color: #888;
+    border-radius: 10px;
+    border: 2px solid #f1f1f1;
+  }
+
+  & *::-webkit-scrollbar-thumb:hover {
+    background-color: #555;
+  }
+
   .im__container {
     width: 1300px;
     height: 80%;
@@ -112,6 +122,8 @@ import Icon from '@/components/icon.vue'
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     border-radius: 2px;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
   }
 
   .im__header {
@@ -121,7 +133,7 @@ import Icon from '@/components/icon.vue'
     display: flex;
     align-items: center;
     justify-content: space-between;
-
+    flex-shrink: 0;
     .im__desc {
       display: flex;
       align-items: center;
@@ -186,24 +198,26 @@ import Icon from '@/components/icon.vue'
   .im__body {
     display: flex;
     flex: 1;
+    min-height: 0;
   }
 
   .im__list {
     width: 300px;
     border-right: 1px solid #ddd;
-    overflow: none;
     display: flex;
     flex-direction: column;
-    height: 100%;
+    min-height: 0;
+
     .im__list-input {
       padding: 10px;
       background-color: #1553f1;
     }
 
     .im__list-item {
-      flex: 1;
       display: flex;
       flex-direction: column;
+      flex: 1;
+      min-height: 0;
       .im__list-header {
         font-size: 14px;
         padding: 8px 10px;
@@ -213,6 +227,18 @@ import Icon from '@/components/icon.vue'
       .im__list-body {
         overflow-y: auto;
         flex: 1;
+        min-height: 0;
+        .im__chat-user {
+          display: flex;
+          align-items: center;
+          height: 56px;
+          width: 100%;
+          padding: 0 10px;
+          &:hover {
+            background-color: #f5f7fa;
+            cursor: pointer;
+          }
+        }
       }
     }
   }