style

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>