<div class="userInfos">
      <el-dropdown trigger="click">
        <div class="userInfo">
          <img class="userHead" src="../assets/userhead.png" alt="">
          <span>Admin</span>
          <img class="userSet" src="../assets/icon_set.png" alt="">
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <div class="cBody">
              <div class="cItem">修改密码</div>
              <div class="cItem">退出</div>
            </div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

css

<style>
.el-popper[x-placement^=bottom] .popper__arrow {
  display: none;
}

.popper__arrow {
  display: none;
}

.el-dropdown-menu {
  background: none;
  border: none;
}

.el-dropdown-menu:hover, .el-dropdown-menu:focus {
  background: none !important;
  box-shadow: none !important
}

.el-dropdown-menu__item {
  background: none !important;
}

.el-dropdown-menu__item {
  padding: 0;
}
</style>

.cBody {
  background: url("../assets/logoutbg.png") no-repeat;
  width: 190px;
  height: calc(140px - 28px);
  background-size: 100% 100%;
  padding-top: 28px;

  .cItem {
    width: 158px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    color: #fff;
    font-size: 14px;
    margin: 0 auto;
  }

  .cItem:hover {
    background: rgba(#00CCFF, 0.3);
  }
}

项目实例

vue 大屏案例 zhsw