117 lines
2.8 KiB
Vue
117 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<div class="chat-box-members">
|
||
|
|
<div class="chat-member-title">成员列表</div>
|
||
|
|
<div class="chat-member-list">
|
||
|
|
<div
|
||
|
|
v-for="member in currentMemberList"
|
||
|
|
:key="member.id"
|
||
|
|
:style="computedStyle(member)"
|
||
|
|
class="each-chat-member"
|
||
|
|
:title="member.memberName"
|
||
|
|
>{{ member.memberName }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'ChatMemberList',
|
||
|
|
props: {
|
||
|
|
currentMemberList:{
|
||
|
|
type:Array,
|
||
|
|
required:true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed:{
|
||
|
|
userId() {
|
||
|
|
return this.$store.state.user.id;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
computedStyle(member) {
|
||
|
|
if (member.userId && member.userId == this.userId) {
|
||
|
|
return {color: 'red'};
|
||
|
|
} else if (member.userId) {
|
||
|
|
return {color: member.connect && member.online ? 'green' : 'gray'};
|
||
|
|
} else {
|
||
|
|
return {color: member.connect ? 'green' : 'gray'};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.memberAnimate{
|
||
|
|
transform: translateX(97%);
|
||
|
|
}
|
||
|
|
.chat-box-members{
|
||
|
|
position: absolute;
|
||
|
|
width: 140px;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 100%;
|
||
|
|
background: #fff;
|
||
|
|
border-left: 1px #dedede solid;
|
||
|
|
padding: 12px 2px 10px 10px;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
.chat-member-title{
|
||
|
|
}
|
||
|
|
.chat-member-list{
|
||
|
|
margin-top: 10px;
|
||
|
|
font-size: 12px;
|
||
|
|
margin-left: 0px;
|
||
|
|
height: 350px;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
.each-chat-member{
|
||
|
|
margin-bottom: 10px;
|
||
|
|
width: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.each-chat-member-outline{
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 谷歌、safari、qq浏览器、360浏览器滚动条样式
|
||
|
|
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
|
||
|
|
.chat-member-list::-webkit-scrollbar {
|
||
|
|
width: 6px;
|
||
|
|
height: 6px;
|
||
|
|
// height: 110px;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
}
|
||
|
|
/*定义滚动条轨道 内阴影+圆角*/
|
||
|
|
.chat-member-list::-webkit-scrollbar-track {
|
||
|
|
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||
|
|
border-radius: 10px;
|
||
|
|
background-color: #FFFFFF;;
|
||
|
|
}
|
||
|
|
/*定义滑块 内阴影+圆角*/
|
||
|
|
.chat-member-list::-webkit-scrollbar-thumb {
|
||
|
|
border-radius: 10px;
|
||
|
|
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||
|
|
background-color: #cacaca;
|
||
|
|
}
|
||
|
|
/*滑块效果*/
|
||
|
|
.chat-member-list::-webkit-scrollbar-thumb:hover {
|
||
|
|
border-radius: 5px;
|
||
|
|
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||
|
|
background: rgba(0,0,0,0.4);
|
||
|
|
}
|
||
|
|
/*IE滚动条颜色*/
|
||
|
|
html {
|
||
|
|
scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
|
||
|
|
scrollbar-highlight-color:#000;
|
||
|
|
scrollbar-3dlight-color:#000;
|
||
|
|
scrollbar-darkshadow-color:#000;
|
||
|
|
scrollbar-Shadow-color:#adadad;/*滑块边色*/
|
||
|
|
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
|
||
|
|
scrollbar-track-color:#eeeeee;/*背景颜色*/
|
||
|
|
}
|
||
|
|
</style>
|