页面内容修改

src/views/components/ChatList.vue

@@ -82,37 +82,29 @@ defineExpose({
 .chat-area .chat-user .chat-item {
   border-radius: 4px 0 4px 4px;
 }
-
-.loader {
-  display: inline-block;
-  position: relative;
+/* 修改后的布局 */
+ .loader {
+  display: flex;
+  align-items: center;
+  gap: 12px; /* 小圆点之间的间距 */
   height: 40px;
 }
-
 .loader div {
-  display: inline-block;
-  position: absolute;
-  left: 8px;
   width: 12px;
   height: 12px;
   background: white;
   border-radius: 50%;
   animation: loading 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
 }
-
 .loader div:nth-child(1) {
-  left: 8px;
   animation-delay: -0.24s;
 }
 .loader div:nth-child(2) {
-  left: 32px;
   animation-delay: -0.12s;
 }
 .loader div:nth-child(3) {
-  left: 56px;
   animation-delay: 0;
 }
-
 @keyframes loading {
   0%,
   80%,
@@ -123,4 +115,36 @@ defineExpose({
     transform: scale(1);
   }
 }
+
+/* 原版内容 */
+/* .loader {
+  display: inline-block;
+  position: relative;
+  height: 40px;
+}
+.loader div {
+  display: inline-block;
+  position: absolute;
+  left: 8px;
+  width: 12px;
+  height: 12px;
+  background: white;
+  border-radius: 50%;
+  animation: loading 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+}
+
+.loader div:nth-child(1) {
+  left: 8px;
+  animation-delay: -0.24s;
+}
+.loader div:nth-child(2) {
+  left: 32px;
+  animation-delay: -0.12s;
+}
+.loader div:nth-child(3) {
+  left: 56px;
+  animation-delay: 0;
+} */
+
+
 </style>