<template> <div class='ucan-popup' @click='close'> <div class='ucan-popup-box' v-loading='loading' v-if='!addGroup' @click.stop> <div class='ucan-popup-add' @click='toAddGroup'>+</div> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="选择新的联系人" name="first"> <div class='ucan-popup-input'> <el-input placeholder="请输入关键字查询" class="main-page__search" size="small" v-model="keyValue" @keyup.enter.native="searchInfo"> <el-button slot="append" icon="el-icon-search" @click="searchInfo"></el-button> </el-input> </div> <el-menu v-if='name=="first"' default-active="1" class="el-menu-vertical-demo" @open="handleOpen" unique-opened @close="handleClose"> <el-submenu class='ucan-popup-menu-box' :id='"el"+index' :index='index+""' v-for='(item,index) in department.rows' :key='index'> <template slot="title">{{item.descr}}</template> <div class='ucan-popup-big-box' v-if='users.length>0'> <div :id='index+"fys"+i' v-for='(item,i) in users' :key='i'> <span class='ucan-popup-first-char' :id='item.firstChar + index+""'>{{item.firstChar}}</span> <div class="ucan-popup-box-user-info" v-for='(user,index) in item.teachers' :key='user.email'> <div class='ucan-popup-userbox'> <span class='ucan-popup-box-user-sur'>{{user.name | fShowFirstText}}</span> <div class="ucan-popup-box-user-name"> <div class='ucan-popup-user-info-box'> <span class='ucan-popup-user-name-box'>{{user.name}}</span><span>({{user.email}})</span> </div> <span>{{user.descr}}</span> </div> </div> <el-checkbox-group v-if='checked[i]' v-model="checkList"> <el-checkbox :label="checked[i][index].email" @change='addUser(user,index)'></el-checkbox> </el-checkbox-group> </div> </div> </div> <div class='ucan-popup-select'> <span :id="'s'+index+item" class='ucan-popup-select-sapn' v-for='item in arr' @click='goToPosition("xin",item,index)' :key='item' @mouseenter="show('xin',item,index)" @mouseleave="hidden('xin',item,index)">{{item}}</span> </div> </el-submenu> </el-menu> <div class='ucan-popup-bottom-box' v-if='addUsers.length>0&&ok&&name=="first"'> <div class='ucan-popup-bottom-user-bigBox'> <button @click='change("0")' class='ucan-popup-bottom-lbtn' v-if='addUsers.length>=0'></button> <button @click='change("1")' class='ucan-popup-bottom-rbtn' v-if='addUsers.length>=0'></button> <div class='ucan-popup-bottom-userbox'> <div class='ucan-popup-bottom-user' v-for='(item,index) in addUsers' :key='item.id' @mouseenter="enter(index)" @mouseleave="leave(index)"> <span class='ucan-popup-bottom-user-add-sur'>{{item.name | fShowFirstText}}</span> <span class='ucan-popup-bottom-user-name'>{{item.name}}</span> <span :id='index' class='ucan-popup-bottom-user-del' @click='del(0,item.id)'>x</span> </div> </div> </div> <span @click='submit' class='ucan-popup-bottom-yes' v-if='addUsers.length>0'> 确定({{addUsers.length}}) </span> </div> </el-tab-pane> <el-tab-pane label="从群组中选择" name="second"> <div class='ucan-popup-input'> <el-input placeholder="请输入姓名或者邮箱查询" class="main-page__search" size="small" v-model="keyValue" @keyup.enter.native="searchInfo"> <el-button slot="append" icon="el-icon-search" @click="searchInfo"></el-button> </el-input> </div> <div class='ucan-popup-group' > <!-- <div class="ucan-popup-box-user" > --> <div class="ucan-popup-box-group-user-info" v-for='(item,index) in group' :key='index'> <div class='ucan-popup-group-user-box'> <img class='ucan-popup-group-user-sur' :src="item.qrcodeAddress" alt=""> <div class="ucan-popup-group-user-name"> <span>{{item.groupName}}</span> <span>{{item.totalCount}}</span> </div> </div> <el-checkbox-group v-model="checkList"> <el-checkbox :label="checked[index]" @change='addUser(item,index)'></el-checkbox> </el-checkbox-group> </div> <!-- </div> --> </div> <div class='ucan-popup-bottom-box' v-if='addUsers.length>0&&ok&&name=="second"'> <div class='ucan-popup-bottom-user-bigBox'> <button @click='change("0")' class='ucan-popup-bottom-lbtn' v-if='addUsers.length>=8'></button> <button @click='change("1")' class='ucan-popup-bottom-rbtn' v-if='addUsers.length>=8'></button> <div class='ucan-popup-bottom-group-userbox'> <div class='ucan-popup-bottom-group-user' v-for='(item,index) in addUsers' :key='item.id ' @mouseenter="enter('g'+index)" @mouseleave="leave('g'+index)"> <span class='ucan-popup-bottom-user-add-sur'>{{item.name | fShowFirstText}}</span> <span class='ucan-popup-bottom-user-name'>{{item.name}}</span> <span :id='"g"+index' class='ucan-popup-bottom-group-user-del' @click='del(1,item.id)'>x</span> </div> </div> </div> <div @click='submit' class='ucan-popup-bottom-yes' v-if='addUsers.length>0'> 确定({{addUsers.length}}) </div> </div> </el-tab-pane> <el-tab-pane label="最近联系人" name="third"> <div class='ucan-popup-input'> <el-input placeholder="请输入关键字查询" class="main-page__search" size="small" v-model="keyValue" @keyup.enter.native="searchInfo"> <el-button slot="append" icon="el-icon-search" @click="searchInfo"></el-button> </el-input> </div> <div class='ucan-popup-group' > <div class="ucan-popup-box-group-user-info" v-for='(item,index) in recentContacts' :key='index'> <div class='ucan-popup-group-user-box'> <img class='ucan-popup-bottom-user-sur' :src="item.iconAddress" alt="" v-if='item.iconAddress'> <span class='ucan-popup-box-user-sur' v-else>{{item.name | fShowFirstText}}</span> <span class="ucan-popup-box-user-name"> <span class='ucan-popup-user-name-box'>{{item.name}}</span> <span>{{item.groupCount}}</span> </span> </div> <el-checkbox-group v-model="checkList"> <el-checkbox :label="checked[index]" @change='addUser(item,index)'></el-checkbox> </el-checkbox-group> </div> </div> <div class='ucan-popup-bottom-box' v-if='addUsers.length>0&&ok&&name=="third"'> <div class='ucan-popup-bottom-user-bigBox'> <button @click='change("0")' class='ucan-popup-bottom-lbtn' v-if='addUsers.length>=0'></button> <button @click='change("1")' class='ucan-popup-bottom-rbtn' v-if='addUsers.length>=0'></button> <div class='ucan-popup-bottom-recent-group-userbox'> <div class='ucan-popup-bottom-group-user' v-for='(item,index) in addUsers' :key='item.id ' @mouseenter="enter('z'+index)" @mouseleave="leave('z'+index)"> <span class='ucan-popup-bottom-user-add-sur'>{{item.name | fShowFirstText}}</span> <span class='ucan-popup-bottom-user-name'>{{item.name}}</span> <span :id='"z"+index' class='ucan-popup-bottom-group-user-del' @click='del(1,item.id)'>x</span> </div> </div> </div> <span @click='submit' class='ucan-popup-bottom-yes' v-if='addUsers.length>0'> 确定({{addUsers.length}}) </span> </div> </el-tab-pane> </el-tabs> </div> <div v-loading='loading' class='ucan-popup-add-group' v-if='addGroup' @click.stop> <div class="ucan-popup-add-header"> <div class='ucan-popup-add-back' @click='goBack()'> <span style='color:#CCC'><</span><span>返回</span> </div> <div class='ucan-popup-add-title'> 添加群组 </div> </div> <div class='ucan-popup-add-user-box'> <div class='ucan-popup-add-group-input'> <el-input placeholder="请输入关键字查询" class="main-page__search" size="small" v-model="keyValue" @keyup.enter.native="searchInfo"> <el-button slot="append" icon="el-icon-search" @click="searchInfo"></el-button> </el-input> </div> <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" unique-opened @close="handleClose"> <el-submenu class='ucan-add-group-box' :id='"add"+index' :index='index+""' v-for='(item,index) in department.rows' :key='index'> <template slot="title">{{item.descr}}</template> <div class='ucan-popup-add-box' v-if='users.length>0'> <div class="ucan-popup-add-user" :id='"addfys"+i' v-for='(item,i) in users' :key='i'> <span class='ucan-popup-add-dscer' :id='"Add"+item.firstChar+index+""'>{{item.firstChar}}</span> <div class="ucan-popup-box-user-info" v-for='(user,index) in item.teachers' :key='user.email'> <span class='ucan-popup-userbox'> <span class='ucan-popup-box-user-sur'>{{user.name | fShowFirstText}}</span> <span class="ucan-popup-box-user-name"> <span class='ucan-popup-user-info-box'> <span class='ucan-popup-user-name-box'>{{user.name}}</span><span>({{user.email}})</span> </span> <span>{{user.descr}}</span> </span> </span> <el-checkbox-group v-if='checked[i]' v-model="checkList"> <el-checkbox :label="checked[i][index].email" @change='addUser(user,index)'></el-checkbox> </el-checkbox-group> </div> </div> </div> <div class='ucan-popup-select'> <span :id="'add'+index+item" class='ucan-popup-select-sapn' v-for='item in arr' @click='goToPosition("add",item,index)' :key='item' @mouseenter="show('add',item,index)" @mouseleave="hidden('add',item,index)">{{item}}</span> </div> </el-submenu> </el-menu> </div> <div class='ucan-popup-bottom-box' v-if='!addPageShow&&wxList.length>0'> <div class='ucan-popup-bottom-user-bigBox'> <button @click='change("0")' class='ucan-popup-bottom-lbtn' v-if='wxList.length>=0'></button> <button @click='change("1")' class='ucan-popup-bottom-rbtn' v-if='wxList.length>=0'></button> <div class='ucan-popup-bottom-userbox'> <div class='ucan-popup-bottom-user' v-for='(item,index) in wxList' :key='item.id' @mouseenter="enter(index)" @mouseleave="leave(index)"> <!-- <img class='ucan-popup-bottom-user-add-sur' :src="item.iconAddress" alt="" > --> <span class='ucan-popup-bottom-user-add-sur'>{{item.name | fShowFirstText}}</span> <span class='ucan-popup-bottom-user-name'>{{item.name}}</span> <div :id='index' class='ucan-popup-bottom-user-del' @click='del("wx",item.id)'>x</div> </div> </div> </div> <span @click="open" class='ucan-popup-bottom-yes' v-if='wxList.length>0'> 确定({{wxList.length}}) </span> </div> </div> </div> </template>
export default {
name: "ucan-popup",
props: ["pop"],
data() {
return {
isPop: true,
activeName: "first",
addGroup: false,
addPageShow: true,
name: "first",
showList: [],
loading: true,
ok: false,
arr: [
"A",
"B",
"C",
"D",
"E",
"F",
"G",
"H",
"I",
"J",
"K",
"L",
"M",
"N",
"O",
"P",
"Q",
"R",
"S",
"T",
"U",
"V",
"W",
"X",
"Y",
"Z"
],
checkList: [],
keyValue: "",
currentPage4: "3",
isShow: false,
department: [],
users: [],
addUsers: this.pop,
length: 0,
checked: {},
group: [],
wxList: [],
recentContacts: []
};
},
created() {
this.init(1);
},
mounted() {},
filters: {
fShowFirstText: function(text) {
if (text) {
return text.charAt(0);
}
}
},
methods: {
goToPosition(type, item, i) {
if (type == "add") {
console.log(document.getElementById("Add" + item + i + ""), 999999);
if (document.getElementById("Add" + item + i + "")) {
// document.getElementById("Add" + item + i + '').parentNode.parentNode.parentNode.parentNode.scrollTop=0
document.getElementById(
"Add" + item + i + ""
).parentNode.parentNode.parentNode.parentNode.parentNode.scrollTop =
document.getElementById("Add" + item + i + "").parentNode
.offsetTop +
document.getElementById("Add" + item + i + "").parentNode.parentNode
.parentNode.offsetTop;
}
} else {
console.log(
document.getElementById(item + i + "").parentNode.parentNode
.parentNode,
99999
);
if (document.getElementById(item + i + "")) {
document.getElementById(
item + i + ""
).parentNode.parentNode.parentNode.parentNode.parentNode.scrollTop =
document.getElementById(item + i + "").parentNode.offsetTop +
document.getElementById(item + i + "").parentNode.parentNode
.parentNode.offsetTop;
}
}
},
close() {
this.$parent.isPop = false;
},
open() {
this.$prompt("给群起个名字吧", {
confirmButtonText: "确定",
cancelButtonText: "取消"
// inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
// inputErrorMessage: '邮箱格式不正确'
})
.then(({ value }) => {
var params = new FormData();
params.append("userInfos", JSON.stringify(this.wxList));
params.append("groupName", value);
this.$http({
})
.then(res => {
// this.infoDetail = res.data;
(this.wxList = []), (this.checkList = []);
})
.catch(function(error) {
console.log(error);
});
this.$message({
type: "success",
message: "群名称是: " + value
});
})
.catch(() => {
// console.log(,55555)
this.$message({
type: "info",
message: "取消输入"
});
});
},
toAddGroup() {
console.log(2121221);
this.loading - true;
this.addGroup = true;
(this.wxList = []), (this.checkList = []);
},
goBack() {
this.addGroup = false;
},
show(type, item, index) {
if (type == "add") {
document.getElementById("add" + index + item).style.background =
"#4B92F9";
} else {
document.getElementById("s" + index + item).style.background =
"#4B92F9";
}
},
hidden(type, item, index) {
if (type == "add") {
document.getElementById("add" + index + item).style.background = "#FFF";
} else {
document.getElementById("s" + index + item).style.background = "#FFF";
}
},
enter(index) {
document.getElementById(index).style.display = "block";
},
leave(index) {
document.getElementById(index).style.display = "none";
},
del(type, info) {
if (type == "wx") {
for (var i = 0; i < this.wxList.length; i++) {
if (this.wxList[i].id == info) {
this.wxList.splice(i, 1);
}
}
for (var i = 0; i < this.checkList.length; i++) {
if (this.checkList[i] == info) {
this.checkList.splice(i, 1);
}
}
}
if (type == 0) {
for (var i = 0; i < this.addUsers.length; i++) {
if (this.addUsers[i].id == info) {
this.addUsers.splice(i, 1);
}
}
for (var i = 0; i < this.checkList.length; i++) {
if (this.checkList[i] == info) {
this.checkList.splice(i, 1);
}
}
} else if (type == 1) {
for (var i = 0; i < this.addUsers.length; i++) {
if (this.addUsers[i].id == info) {
this.addUsers.splice(i, 1);
}
}
for (var i = 0; i < this.checkList.length; i++) {
if (this.checkList[i] == info) {
this.checkList.splice(i, 1);
}
}
}
},
init(num) {
this.$http({
})
.then(res => {
this.ok = true;
// this.infoDetail = res.data;
this.department = res.data.data;
this.loading = false;
})
.catch(function(error) {
console.log(error);
});
},
getUsers(id) {
var departmentId = id;
this.$http({
})
.then(res => {
this.users = res.data.data;
this.ok = true;
this.checked = {};
var arr = [];
if (!this.addGroup) {
for (var i = 0; i < this.users.length; i++) {
this.checked[i] = this.users[i].teachers;
arr = arr.concat(this.users[i].teachers);
}
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < this.addUsers.length; j++) {
if (arr[i].email == this.addUsers[j].id) {
this.checkList[i] = arr[i].email;
}
}
}
} else if (this.addGroup) {
for (var i = 0; i < this.users.length; i++) {
this.checked[i] = this.users[i].teachers;
arr = arr.concat(this.users[i].teachers);
}
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < this.wxList.length; j++) {
if (arr[i].email == this.wxList[j].id) {
this.checkList[i] = arr[i].email;
}
}
}
}
this.loading = false;
// alert(111111)
})
.catch(function(error) {
console.log(error);
});
},
searchGroup() {
this.$http({
})
.then(res => {
this.group = res.data.data;
this.checked = [];
this.checkList = [];
this.ok = true;
for (var i = 0; i < this.group.length; i++) {
this.checked.push(this.group[i].groupId);
}
for (let i = 0; i < this.group.length; i++) {
for (let j = 0; j < this.addUsers.length; j++) {
if (this.group[i].groupId === this.addUsers[j].id) {
this.checkList[i] = this.group[i].groupId;
}
}
}
this.loading = false;
})
.catch(function(error) {
console.log(error);
});
},
getGroup() {
this.$http({
})
.then(res => {
this.group = res.data.data;
this.checked = [];
this.checkList = [];
this.ok = true;
for (var i = 0; i < this.group.length; i++) {
this.checked.push(this.group[i].groupId);
}
for (let i = 0; i < this.group.length; i++) {
for (let j = 0; j < this.addUsers.length; j++) {
if (this.group[i].groupId === this.addUsers[j].id) {
this.checkList[i] = this.group[i].groupId;
}
}
}
this.loading = false;
})
.catch(function(error) {
console.log(error);
});
},
getLately() {
this.$http({
})
.then(res => {
this.recentContacts = res.data.data;
this.checked = [];
this.checkList = [];
this.ok = true;
for (var i = 0; i < this.recentContacts.length; i++) {
this.checked.push(this.recentContacts[i].id);
}
for (let i = 0; i < this.recentContacts.length; i++) {
for (let j = 0; j < this.addUsers.length; j++) {
if (this.recentContacts[i].id === this.addUsers[j].id) {
this.checkList[i] = this.recentContacts[i].id;
}
}
}
this.loading = false;
})
.catch(function(error) {
console.log(error);
});
},
searchInfo() {
this.loading = true;
if (name == "first") {
} else if ((name = "second")) {
if (this.keyValue) {
this.searchGroup();
} else {
this.getGroup();
}
} else if ((name = "third")) {
} else {
}
},
addUser(item, index) {
var isAdd = true;
if (this.addGroup) {
console.log(11111);
item.id = item.email;
item.type = 0;
for (var i = 0; i < this.wxList.length; i++) {
if (this.wxList[i].email == item.email) {
this.wxList.splice(i, 1);
isAdd = false;
}
}
if (isAdd) {
this.wxList.push(item);
}
} else {
if (this.name == "first") {
item.id = item.email;
item.type = 0;
for (var i = 0; i < this.addUsers.length; i++) {
if (this.addUsers[i].email == item.email) {
this.addUsers.splice(i, 1);
isAdd = false;
}
}
if (isAdd) {
this.addUsers.push(item);
}
} else if (this.name == "second") {
item.id = item.groupId;
item.type = 1;
item.name = item.groupName;
for (var i = 0; i < this.addUsers.length; i++) {
if (this.addUsers[i].groupId == item.groupId) {
this.addUsers.splice(i, 1);
isAdd = false;
}
}
if (isAdd) {
this.addUsers.push(item);
}
} else if (this.name == "third") {
item.id = item.id;
item.type = item.relationType;
for (var i = 0; i < this.addUsers.length; i++) {
if (this.addUsers[i].id == item.id) {
this.addUsers.splice(i, 1);
isAdd = false;
}
}
if (isAdd) {
this.addUsers.push(item);
}
}
}
if (this.wxList.length > 10) {
document.getElementsByClassName(
"ucan-popup-bottom-userbox"
)[0].scrollLeft += 48;
}
if (!this.addGroup) {
if (this.addUsers.length > 10) {
if (this.name == "first") {
document.getElementsByClassName(
"ucan-popup-bottom-userbox"
)[0].scrollLeft += 48;
} else if (this.name == "second") {
var outDiv = (document.getElementsByClassName(
"ucan-popup-bottom-group-userbox"
)[0].scrollLeft += 48);
} else {
var outDiv = (document.getElementsByClassName(
"ucan-popup-bottom-recent-group-userbox"
)[0].scrollLeft += 48);
}
}
}
},
handleOpen(key) {
this.loading = true;
this.isShow = true;
this.addPageShow = false;
this.users = [];
this.getUsers(this.department.rows[key].deptId);
// document.getElementsByClassName("el-menu-vertical-demo")[0].scrollTop = 0;
},
handleClose(key) {
this.isShow = false;
this.addPageShow = true;
},
handleClick(value) {
this.loading = true;
this.name = value.name;
this.ok = false;
if (this.name == "first") {
this.init(1);
} else if (this.name == "second") {
this.getGroup();
} else {
this.getLately();
}
this.users = [];
this.checked = [];
this.checkList = [];
this.isShow = false;
},
handleCurrentChange(val) {
this.init(val);
this.loading = true;
},
handleSizeChange(val) {
this.init(val);
this.loading = true;
},
change(type) {
if (this.name == "first" || this.addGroup) {
var outDiv = document.getElementsByClassName(
"ucan-popup-bottom-userbox"
)[0];
} else if (this.name == "second") {
var outDiv = document.getElementsByClassName(
"ucan-popup-bottom-group-userbox"
)[0];
} else {
var outDiv = document.getElementsByClassName(
"ucan-popup-bottom-recent-group-userbox"
)[0];
}
var step = 80;
if (type == 0) {
outDiv.scrollLeft -= step;
} else {
outDiv.scrollLeft += step;
}
},
submit() {
if (this.addGroup) {
}
this.$parent.addressee = this.addUsers;
this.$parent.isPop = false;
}
}
};
<style>
.ucan-popup {
width: 100vw;
height: 100vh;
z-index: 1000;
position: fixed;
background: rgba(0, 0, 0, 0.3);
top: 0;
left: 0;
}
.ucan-popup-box {
width: 442px;
height: 518px;
position: fixed;
top: calc(50vh - 269px);
background: #fff;
left: calc(50vw - 221px);
}
.ucan-popup-box .el-tabs__nav-scroll {
padding-left: 20px;
}
.ucan-popup-add {
position: absolute;
right: 20px;
top: 10px;
width: 18px;
height: 18px;
line-height: 16px;
text-align: center;
color: #4b92f9;
border: 1px solid #4b92f9;
cursor: pointer;
z-index: 999;
}
.ucan-popup-input {
width: 400px;
margin-left: 20px;
}
.ucan-popup-box .el-tabs .el-tabs__content .el-tab-pane .el-menu-vertical-demo {
height: 440px;
overflow-y: auto;
overflow-x: hidden;
}
.ucan-popup-big-box {
width: 380px;
margin-left: 20px;
}
.ucan-popup-select {
position: absolute;
top: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
cursor: pointer;
z-index: 999;
}
.ucan-popup-first-char {
display: block;
width: 20px;
height: 20px;
font-size: 14px;
line-height: 20px;
text-align: left;
}
.ucan-popup-box-user-info .el-checkbox {
width: 14px;
}
.el-checkbox__label {
visibility: hidden;
}
.ucan-popup-box-user-info {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
margin: 5px 0;
}
.ucan-popup-userbox {
display: flex;
justify-content: center;
align-items: center;
}
.ucan-popup-box-user-sur {
display: block;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 18px;
color: #2e7df0;
border: 1px solid #2e7df0;
font-size: 20px;
}
.ucan-popup-user-info-box {
display: flex;
/* flex-direction: column; */
justify-content: flex-start;
align-items: center;
font-size: 14px;
}
.ucan-popup-box-user-name {
width: 300px;
font-size: 14px;
margin-left: 20px;
}
.ucan-popup-user-name-box {
display: block;
width: 46px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ucan-popup-bottom-box {
min-height: 100px;
width: 100%;
background: #fff;
padding-bottom: 20px;
}
.ucan-popup-bottom-user-bigBox {
padding: 0 20px;
height: 60px;
position: relative;
overflow: hidden;
}
.ucan-popup-bottom-lbtn {
position: absolute;
top: 10px;
left: 0;
background: url(../assets/ucan-popup/lbtn.png) no-repeat center;
width: 8px;
height: 40px;
margin-left: 5px;
z-index: 999;
/* border:none */
}
.ucan-popup-bottom-rbtn {
position: absolute;
top: 10px;
right: 0;
background: url(../assets/ucan-popup/rbtn.png) no-repeat center;
width: 8px;
height: 40px;
margin-right: 5px;
z-index: 999;
/* border:none */
}
.ucan-popup-bottom-userbox {
height: 46px;
padding: 7px 0;
width: 100%;
overflow-x: auto;
display: flex;
justify-content: flex-start;
align-items: center;
}
.ucan-popup-bottom-userbox::-webkit-scrollbar {
display: none;
}
.ucan-popup-bottom-recent-group-userbox {
height: 46px;
padding: 7px 0;
width: 100%;
overflow-x: auto;
display: flex;
justify-content: flex-start;
align-items: center;
}
.ucan-popup-bottom-recent-group-userbox::-webkit-scrollbar {
display: none;
}
.ucan-popup-bottom-group-userbox {
height: 46px;
padding: 7px 0;
width: 100%;
overflow-x: auto;
display: flex;
justify-content: flex-start;
align-items: center;
}
.ucan-popup-bottom-group-userbox::-webkit-scrollbar {
display: none;
}
.ucan-popup-bottom-user {
width: 46px;
height: 46px;
float: left;
margin: 0 5px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: relative;
}
.ucan-popup-bottom-user-add-sur {
display: block;
width: 25px;
height: 25px;
border: 1px solid #2e7df0;
color: #2e7df0;
font-size: 20px;
line-height: 25px;
text-align: center;
border-radius: 25px;
}
.ucan-popup-bottom-user-name {
display: block;
width: 46px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
height: 15px;
line-height: 15px;
text-align: center;
}
.ucan-popup-bottom-user-del {
position: absolute;
left: 0;
top: 0;
line-height: 46px;
text-align: center;
font-size: 24px;
width: 46px;
height: 46px;
border-radius: 40px;
background: rgba(0, 0, 0, 0.3);
display: none;
cursor: pointer;
}
/* 群组样式开始 */
.ucan-popup-group {
width: 400px;
margin-left: 20px;
height: 425px;
overflow-y: auto;
overflow-x: hidden;
}
.ucan-popup-group-user-box {
display: flex;
/* flex-direction: column; */
justify-content: space-between;
align-items: center;
}
.ucan-popup-group-user-sur {
display: block;
width: 36px;
height: 36px;
/* line-height: 30px; */
/* text-align: center; */
border-radius: 18px;
/* color: #2e7df0; */
border: 1px solid #2e7df0;
}
.ucan-popup-box-group-user-info {
width: 360px;
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0;
}
.ucan-popup-group-user-name {
width: 280px;
margin-left: 20px;
height: 38px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.ucan-popup-bottom-group-user {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 46px;
height: 46px;
margin: 0px 5px;
position: relative;
}
.ucan-popup-bottom-group-user-del {
position: absolute;
left: 0;
top: 0;
line-height: 46px;
text-align: center;
font-size: 24px;
width: 46px;
height: 46px;
border-radius: 40px;
background: rgba(0, 0, 0, 0.3);
display: none;
cursor: pointer;
}
.ucan-popup-bottom-yes {
display: block;
width: 100px;
height: 40px;
line-height: 40px;
border-radius: 4px;
text-align: center;
font-size: 16px;
margin-left: 171px;
background: #2e7df0;
color: #fff;
cursor: pointer;
margin-top: 10px;
}
.ucan-popup-bottom-user-sur {
display: block;
height: 36px;
width: 36px;
border-radius: 19px;
border: 1px solid #2e7df0;
}
.ucan-popup-bottom-recent-group-userbox {
}
.ucan-popup-add-group {
width: 442px;
height: 518px;
position: fixed;
top: calc(50vh - 269px);
background: #fff;
left: calc(50vw - 221px);
}
.ucan-popup-add-header {
width: 100%;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
.ucan-popup-add-back {
color: #666666;
font-size: 14px;
cursor: pointer;
margin-left: 10px;
float: left;
}
.ucan-popup-add-back span {
margin-right: 4px;
}
.ucan-popup-add-title {
float: left;
width: 56px;
font-size: 14px;
margin-left: 130px;
}
.ucan-popup-add-group-input {
width: 380px;
margin: 10px 0 0 20px;
}
.ucan-popup-add-user-box .el-menu-vertical-demo {
height: 430px;
overflow-y: auto;
overflow-x: hidden;
}
.ucan-popup-add-user {
width: 360px;
margin-left: 20px;
}
</style>