zhgdyun/src/components/userChange.vue

<template>
  <div class="header-btn">
    <el-popover
      placement="bottom"
      trigger="click"
      width="450"
      class="popover"
      v-model="visible"
    >
      <div class="changeBox">
          <div class="title-content">
            <span>切换用户</span>
            <i class="el-icon-close" style="cursor: pointer;" @click="visible = false;"></i>
          </div>
          <div class="content-list">
            <div class="content-list-item">
              <i class="el-icon-trophy-1"></i>
              <span>中国建筑第八工程局第三建设有限公司</span>
              <i class="el-icon-arrow-right"></i>
            </div>
            <div class="content-list-item">
              <i class="el-icon-trophy-1"></i>
              <span>中国建筑第八工程局第三建设有限公司</span>
              <i class="el-icon-arrow-right"></i>
            </div>
            <div class="content-list-item">
              <i class="el-icon-trophy-1"></i>
              <span>中国建筑第八工程局第三建设有限公司</span>
              <i class="el-icon-arrow-right"></i>
            </div>
            <div class="content-list-item">
              <i class="el-icon-trophy-1"></i>
              <span>中国建筑第八工程局第三建设有限公司</span>
              <i class="el-icon-arrow-right"></i>
            </div>
            <div class="content-list-item">
              <i class="el-icon-trophy-1"></i>
              <span>中国建筑第八工程局第三建设有限公司</span>
              <i class="el-icon-arrow-right"></i>
            </div>
            <div class="content-list-item">
              <i class="el-icon-trophy-1"></i>
              <span>中国建筑第八工程局第三建设有限公司</span>
              <i class="el-icon-arrow-right"></i>
            </div>
            <div class="content-list-item">
              <i class="el-icon-trophy-1"></i>
              <span>中国建筑第八工程局第三建设有限公司</span>
              <span>个人租户</span>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
      </div>
      <!-- 点击内容 -->
      <div slot="reference" class="click-content">
        <i class="el-icon-trophy-1"></i>
        <span>18772114025</span>
        <i class="el-icon-arrow-down"></i>
      </div>
    </el-popover>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
.flexStyle(){
    display: flex;
    align-items: center;
}
.changeBox {
  padding: 0px 10px;
  .title-content{
    .flexStyle();
    >span{
      font-size: 16px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #000000;
      margin-right: auto;
    }
  }
  .content-list{
    margin-top: 15px;
    &-item{
      .flexStyle();
      padding: 10px 15px;
      border: 1px solid #DADBDB;
      border-radius: 5px;
      cursor: pointer;
      >span:nth-child(2){
        margin: 2px 10px 0px 10px;
      }
      >span:nth-child(3){
        padding:3px 10px;
        color: #79ACFA;
        background-color: #E4F5FF;
        border: 1px solid #99C3FB;
        border-radius: 5px;
        font-size: 10px;
      }
      /deep/.el-icon-arrow-right{
        margin-left: auto;
      }
    }
    &-item:not(:last-child){
      margin-bottom: 10px;
    }
  }
}
.click-content{
  cursor: pointer;
  .flexStyle();
  >span{
    margin: 0px 10px;
  }
}
</style>
<style>
.el-popover {
  box-sizing: content-box !important;
}
</style>