up

components/message.vue

@@ -382,13 +382,7 @@
         position: relative;
 
         &.my-message {
-            .msg-avatar {
-                margin-right: 0;
-                margin-left: 10px;
-            }
-
             .msg-detail {
-                margin-top: 0;
                 background-color: #dbf2ff;
                 border-radius: 8px 0 8px 8px;
             }
@@ -436,36 +430,24 @@
         }
     }
 
-    .msg-avatar {
-        margin-right: 10px;
-        flex: 40px 0 0;
-    }
+.msg-name {
+    font-size: 14px;
+    color: #888;
+    text-align: right;
+    margin-bottom: 3px;
+    min-height: 16px;
 
-    i.msg-avatar {
-        font-size: 30px;
-        background-color: #c0c4cc;
-        border-radius: 4px;
-        width: 40px;
-        height: 40px;
-
-        &:before {
-            position: relative;
-            left: 5px;
-            top: 5px;
-            color: #fff;
-        }
+    .el-avatar {
+        margin-left: 10px;
     }
 
-    .msg-name {
-        font-size: 14px;
-        color: #888;
-        text-align: right;
-        margin-bottom: 3px;
-        min-height: 16px;
-        &.algin-left {
-            text-align: left;
+    &.flex-row-reverse {
+        .el-avatar {
+            margin-left: 0;
+            margin-right: 10px;
         }
     }
+}
 
     .msg-content {
         text-align: right;