137 lines
3.7 KiB
Vue
137 lines
3.7 KiB
Vue
<template>
|
|
<div class="chat-box-members">
|
|
<div class="chat-member-title">成员列表</div>
|
|
<div class="chat-member-list">
|
|
<div
|
|
v-for="member in conversitionMemberList"
|
|
:key="member.memberId"
|
|
class="each-chat-member"
|
|
:style="computedStyle(member)"
|
|
:title="memberData[member.memberId].label + (memberData[member.memberId].userId? '(' + simulationUsers[memberData[member.memberId].userId].nickName + ')': '')"
|
|
>{{ memberData[member.memberId].label + (memberData[member.memberId].userId? '(' + simulationUsers[memberData[member.memberId].userId].nickName + ')': '') }}</div>
|
|
<!-- :class="member.online?'each-chat-member':'each-chat-member each-chat-member-outline'" -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
export default {
|
|
name: 'ChatMemberList',
|
|
props: {
|
|
conversitionMemberList:{
|
|
type: Array,
|
|
required: true
|
|
},
|
|
simulationUsers: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
showMembers:true,
|
|
memberList:[]
|
|
};
|
|
},
|
|
computed:{
|
|
userId() {
|
|
return this.$store.state.user.id;
|
|
},
|
|
memberData() {
|
|
return this.$store.state.training.memberData;
|
|
}
|
|
},
|
|
watch:{
|
|
'$store.state.socket.acceptConversionInvite':function(val) {
|
|
this.$emit('connectMember', val);
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods:{
|
|
computedStyle(member) {
|
|
const userId = this.memberData[member.memberId].userId;
|
|
if (userId && userId == this.userId) {
|
|
return {color: 'red'};
|
|
} else {
|
|
return {color: member.connect ? 'green' : 'gray'};
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.chat-box-members{
|
|
position: absolute;
|
|
width: 140px;
|
|
right: 0;
|
|
height: 100%;
|
|
background: #fff;
|
|
border-right: 1px #dedede solid;
|
|
border-radius: 0px 5px 5px 0px;
|
|
z-index: 2;
|
|
transition: transform 1s;
|
|
padding: 12px 2px 10px 16px;
|
|
font-size: 14px;
|
|
display: inline-block;
|
|
border-left: 1px #dedede solid;
|
|
}
|
|
.chat-member-title{
|
|
}
|
|
.chat-member-list{
|
|
margin-top: 13px;
|
|
font-size: 12px;
|
|
margin-left: 2px;
|
|
height: 250px;
|
|
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>
|