弹窗组件，选择联系人，群组，最新联系人，新建群组vue+element

<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'>&lt;</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>