开发: 成员聊天页面

src/pages/ChatLogs/components/index.module.scss

@@ -12,21 +12,26 @@
 }
 
 .chatAvatar {
+  display: flex;
   flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
   width: 34px;
   height: 34px;
+  background-color: #69b1ff;
+  border-radius: 4px;
 
   img {
     max-width: 100%;
     max-height: 100%;
     object-fit: cover;
     background-color: #fff;
-    border-radius: 2px;
+    border-radius: 4px;
   }
 }
 
 .name {
-  margin-bottom: 8px;
+  margin-bottom: 4px;
   color: #999;
 }
 
@@ -34,10 +39,12 @@
   position: relative;
   display: flex;
   justify-content: center;
+  min-height: 40px;
   padding: 12px;
   word-break: break-all;
   background-color: #fff;
   border-radius: 4px;
+  flex-direction: column;
 
   &::before {
     position: absolute;
@@ -58,7 +65,7 @@
 
 .chatRight {
   display: flex;
-  justify-content: end;
+  justify-content: flex-end;
   margin-bottom: 12px;
 
   .name {
@@ -69,7 +76,7 @@
     display: inline-flex;
     flex-direction: column;
     flex-shrink: 0;
-    justify-content: end;
+    justify-content: flex-end;
     max-width: 60%;
     margin-right: 16px;
   }
@@ -112,7 +119,14 @@
 .imgPreview {
   & > div {
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
   }
 }
+
+.revokeMsg{
+  background-color: #8c8c8c;
+  color: #fff;
+  border-radius: 4px;
+  padding: 0 12px;
+}