u

components/message-item/file-message.vue

 <template>
-    <div class="msg-detail file-message d-flex" @dblclick="openFile">
+    <div
+        class="msg-detail file-message d-flex"
+        @dblclick="openFile"
+        @click="download"
+    >
         <div
             class="file-message-info"
             :class="{ 'd-flex align-items-center': !messageBody.msg.size }"
@@ -15,21 +19,8 @@
                 {{ format(messageBody.msg.size) }}
             </div>
         </div>
-        <file-icon :value="fileIcon"></file-icon>
 
-        <a
-            class="
-                d-flex
-                align-items-center
-                justify-content-center
-                download-icon
-            "
-            :href="messageRealUrl"
-            :download="getAttachment"
-            title="下载文件"
-        >
-            <img src="~@/customer-service/imgs/download.png" alt="Download" />
-        </a>
+        <file-icon :value="fileIcon"></file-icon>
     </div>
 </template>
 
@@ -65,13 +56,6 @@
 
     @Component({ components: { FileIcon } })
     export default class Index extends BaseMessage {
-        protected get getAttachment() {
-            if (this.messageBody) {
-                return this.messageBody.msg.name;
-            }
-            return "文件下载";
-        }
-
         protected get fileIcon() {
             if (this.value) {
                 return getFileType(this.messageBody.msg.name);
@@ -80,6 +64,10 @@
             return FileType.Others;
         }
 
+        private download() {
+            window.open(this.messageRealUrl);
+        }
+
         protected format(v: number) {
             return formatSize(v);
         }
@@ -92,9 +80,10 @@
 
 <style lang="less" scoped>
     .file-message {
-        background-color: transparent !important;
-        border-radius: 4px !important;
-        border: 1px solid #c5d4e5;
+        background-color: #eee !important;
+        border-radius: 6px !important;
+        cursor: pointer;
+
         .file-message-name {
             max-width: 130px;
             word-break: break-all;

components/message-item/image-message.vue

@@ -52,9 +52,6 @@
 
 <style lang="less" scoped>
     .image-message {
-        background-color: transparent !important;
-        border-radius: 4px !important;
-        border: 1px solid #c5d4e5;
         line-height: 1;
         max-width: 300px;
         box-sizing: content-box;
@@ -76,11 +73,4 @@
             margin-left: 0;
         }
     }
-    .my-message {
-        &.image-message:not(.image-404) {
-            background-color: transparent !important;
-            border-radius: 4px !important;
-            border: 1px solid #c5d4e5;
-        }
-    }
 </style>