u

components/message-item/pay-message.vue

 <template>
     <div
         class="pay-message d-flex flex-column"
-        :class="messageClass"
+        :class="[messageClass, { 'user-side': !backend }]"
         @click="view"
     >
         <div class="d-flex align-items-center flex-fill pay-msg-body">
@@ -28,9 +28,12 @@
     import { PayMessageBody } from "@/customer-service/xim/models/chat";
     import { Component } from "vue-property-decorator";
     import BaseMessage from "./index";
+    import Chat from "@/customer-service/xim";
 
     @Component({ components: {} })
     export default class Index extends BaseMessage {
+        protected backend = Chat.isBackend();
+
         private get payData() {
             return this.messageBody.msg as PayMessageBody;
         }
@@ -108,6 +111,10 @@
         height: 106px;
         color: #fff;
 
+        &.user-side {
+            border-radius: 0 10px 10px 10px;
+        }
+
         &.default,
         &.balance-unpay {
             background: linear-gradient(180deg, #f95b3c 0%, #f94623 100%);
@@ -148,6 +155,7 @@
             height: 40px;
             display: inline-block;
             margin-right: 20px;
+            background-repeat: no-repeat;
 
             &.icon-1 {
                 background-image: url("./pay-status-1.svg");