style

components/message-list.vue

@@ -13,7 +13,9 @@
                 <div :key="item.id" class="message-template">
                     <div
                         v-if="
-              item.id > 0 && messageTimestampDictionary[item.id] && item.msg
+                            item.id > 0 &&
+                            messageTimestampDictionary[item.id] &&
+                            item.msg
                         "
                         class="text-center text-hint timestamp"
                     >
@@ -32,7 +34,10 @@
         </el-scrollbar>
 
         <image-preview v-model="preview" :file="imagePreview"></image-preview>
-    <video-preview v-model="previewVideo" :file="videoPreview"></video-preview>
+        <video-preview
+            v-model="previewVideo"
+            :file="videoPreview"
+        ></video-preview>
     </div>
 </template>
 
@@ -92,7 +97,9 @@ export default class MessageList extends Vue {
         }
 
         if (this.sendingMessages) {
-      return this.sendingMessages.filter((i) => i.chat_id === this.chatId);
+            return this.sendingMessages.filter(
+                (i) => i.chat_id === this.chatId
+            );
         }
 
         return [];
@@ -367,6 +374,10 @@ export default class MessageList extends Vue {
         }
     }
 
+    &:last-child {
+        padding-bottom: 10px;
+    }
+
     .timestamp {
         font-size: 12px;
         user-select: none;

components/message.vue

@@ -3,8 +3,13 @@
         class="message-con d-flex align-items-center"
         :class="isMyMessage ? 'my-message flex-row-reverse' : ''"
     >
-        <div class="msg-content" :class="{'algin-left': !isMyMessage}">
-            <div class="msg-name no-selection" :class="{'algin-left': !isMyMessage}">{{ userName }}</div>
+        <div class="msg-content" :class="{ 'algin-left': !isMyMessage }">
+            <div
+                class="msg-name no-selection"
+                :class="{ 'algin-left': !isMyMessage }"
+            >
+                {{ userName }}
+            </div>
             <!-- Image -->
             <div
                 class="msg-detail image-message"
@@ -111,7 +116,11 @@
 
         <template v-if="showReadSummary">
             <div v-if="isMyMessage" class="msg-read pos-rel">
-                <span @click="readListVisibility = true" class="pointer">
+                <span
+                    @click="readListVisibility = true"
+                    class="pointer"
+                    :class="{ all: isAllRead }"
+                >
                     <template v-if="isAllRead">全部已读</template>
                     <template v-else-if="data.read_count > 0"
                         >{{ data.read_count }}人已读</template
@@ -260,11 +269,14 @@ export default class Message extends Mixins(Filters) {
     }
 
     private mounted() {
-        this.buildMessageUrl()
+        this.buildMessageUrl();
     }
 
     private get userName() {
-        return this.chatMembers.find(member => member.eid === this.data.eid)?.name ?? "";
+        return (
+            this.chatMembers.find((member) => member.eid === this.data.eid)
+                ?.name ?? ""
+        );
     }
 
     private get avatar() {
@@ -460,6 +472,7 @@ export default class Message extends Mixins(Filters) {
             margin-right: 15px;
             user-select: none;
             flex: none;
+            margin-top: auto;
         }
 
         .download-icon {
@@ -605,4 +618,8 @@ i.msg-avatar {
         width: 100%;
     }
 }
+
+.all {
+    color: #4389f8;
+}
 </style>