style

.prettierrc

+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": false
+}

components/who-read-list.vue

@@ -4,26 +4,46 @@
         ref="list-con"
         @blur="$emit('blur')"
         class="who-read-list pos-rel"
-    :style="`left:${left}px;top:${top}px`"
     >
-    <template v-if="!loading">
-      <div class="list-left">
-        <div class="number-count">已读 {{ readlist.length }}</div>
-        <div class="member-item" v-for="item in readlist" :key="item.eid">
-          <avatar class="member-avatar" :src="item.avatar" :size="30" />
-          <span class="member-name">{{ item.name }}</span>
+        <template>
+            <div class="d-flex tabs">
+                <div
+                    class="tab text-nowrap"
+                    :class="{ selected: tab === 1 }"
+                    @click="tab = 1"
+                >
+                    <span>{{ readlist.length }}</span>
+                    <span>已读</span>
+                </div>
+                <div
+                    class="tab text-nowrap"
+                    :class="{ selected: tab === 2 }"
+                    @click="tab = 2"
+                >
+                    <span>{{ unreadlist.length }}</span>
+                    <span>未读</span>
                 </div>
             </div>
-      <div class="list-right">
-        <div class="number-count">未读 {{ unreadlist.length }}</div>
-        <div class="member-item" v-for="item in unreadlist" :key="item.eid">
-          <avatar class="member-avatar" :src="item.avatar" :size="30" />
+            <div class="items">
+                <el-scrollbar>
+                    <div
+                        class="member-item"
+                        v-for="item in items"
+                        :key="`${item.eid}-${tab}`"
+                    >
+                        <avatar
+                            class="member-avatar"
+                            :src="item.avatar"
+                            :size="30"
+                        />
                         <span class="member-name">{{ item.name }}</span>
                     </div>
+                </el-scrollbar>
             </div>
         </template>
     </div>
 </template>
+
 <script lang="ts">
 import { Component, Prop, Ref, Vue } from "vue-property-decorator";
 import { namespace } from "vuex-class";
@@ -37,11 +57,8 @@ import chat from "@/customer-service/xim/index";
 import xim from "@/customer-service/xim/xim";
 
 const chatStoreNamespace = namespace("chatStore");
-@Component({
- components: {
-  avatar
-}
-})
+
+@Component({ components: { avatar } })
 export default class WhoReadList extends Vue {
     @chatStoreNamespace.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
     private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
@@ -49,19 +66,22 @@ export default class WhoReadList extends Vue {
     @chatStoreNamespace.State(ChatStore.STATE_CHAT_MY_ID)
     private readonly chatMyId!: ChatStore.STATE_CHAT_MY_ID;
 
-  @Prop({
-    type: Number,
-  })
+    @Prop({ type: Number })
     private msgId!: number;
 
     @Ref("list-con")
     private listCon!: HTMLElement;
 
-  private top = 0;
-  private left = 0;
     private readlist: { name: string; avatar: string }[] = [];
     private unreadlist: { name: string; avatar: string }[] = [];
     private loading = false;
+
+    private tab = 1;
+
+    private get items() {
+        return this.tab === 1 ? this.readlist : this.unreadlist;
+    }
+
     private startLoading() {
         this.loading = true;
     }
@@ -78,10 +98,6 @@ export default class WhoReadList extends Vue {
 
     public mounted() {
         this.enableBlur();
-    const { top, left } = (this.listCon
-      .parentNode as HTMLElement).getBoundingClientRect();
-    this.top = top;
-    this.left = left;
     }
 
     private enableBlur() {
@@ -90,11 +106,7 @@ export default class WhoReadList extends Vue {
     }
 
     private async getUserNameByid(eid: string) {
-    const data = await chat
-      .getSdk()
-      .model("user")
-      .detail(eid)
-      .query();
+        const data = await chat.getSdk().model("user").detail(eid).query();
         return data.row.first_name.value as string;
     }
 
@@ -137,58 +149,62 @@ export default class WhoReadList extends Vue {
     }
 
     private uniqueReaderList(data: dto.OneWhoReadMessage[]) {
-    return unique(data, function(item, all) {
+        return unique(data, function (item, all) {
             return all.findIndex((k) => k.eid === item.eid);
         });
     }
 }
 </script>
+
 <style lang="less" scoped>
 .who-read-list {
-  ::before {
-    content: "";
-    position: absolute;
-    width: 1px;
-    top: 15px;
-    bottom: 15px;
-    left: 0;
-    right: 0;
-    margin: auto;
-    background: #e1e2e2;
-  }
-  &:focus {
-    outline: unset;
-  }
-  padding: 15px 30px;
-  background: rgba(249, 249, 249, 1);
+    background-color: #fff;
     box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
     border-radius: 4px;
     border: 1px solid rgba(183, 191, 199, 1);
-  width: 455px;
     min-height: 100px;
-  position: fixed;
-  margin-left: -200px;
-  margin-top: 20px;
+    position: absolute;
     color: #000;
     z-index: 2;
-  .list-left,
-  .list-right {
-    display: inline-block;
-    vertical-align: top;
-    width: calc(50% - 30px);
-  }
-  .list-left {
-    padding-right: 30px;
-  }
-  .list-right {
-    padding-left: 30px;
-  }
+    margin-left: -100px;
     .number-count {
         font-size: 14px;
         color: #333333;
         margin-bottom: 15px;
     }
 }
+
+.tabs {
+    border-bottom: 1px solid #f0f0f0;
+    padding: 10px;
+
+    .tab {
+        cursor: pointer;
+
+        span {
+            font-size: 22px;
+
+            & + span {
+                font-size: 12px;
+            }
+        }
+
+        &.selected {
+            color: #4389f8;
+        }
+
+        & + .tab {
+            margin-left: 30px;
+        }
+    }
+}
+
+.items {
+    padding: 10px;
+    padding-top: 0;
+    padding-left: 20px;
+}
+
 .member-item {
     margin-top: 10px;
     .member-avatar,