修改elementUi的el-dropdown样式

效果图

<template>
  <div class="nav-wrap">
    <img src="@/assets/imgs/通知.png" alt="通知" class="notice">
    <div class="avatar-wrap">
      <img src="@/assets/imgs/默认头像.png" alt="默认头像">
    </div>
    <el-dropdown size="medium" trigger="click">
      <div class="dropdown">
        <div class="title">
          <div class="name">阿贝贝</div>
          <div class="text">北京市朝天区</div>
        </div>
        <div class="drop-wrap">
          <img src="@/assets/imgs/用户名下拉.png" alt="用户名下拉" class="drop">
        </div>
      </div>
      <el-dropdown-menu slot="dropdown" class="dropdown-menu">
        <el-dropdown-item class="df aic name-item" disabled>阿贝贝</el-dropdown-item>
        <el-dropdown-item class="pwd-item df aic jcsb">修改密码
          <img src="@/assets/imgs/下拉.png" alt=""></el-dropdown-item>
        <el-dropdown-item class="logout df aic">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
    };
  }
}
</script>
<style lang="scss" scoped>
.nav-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 60px;
  padding-right: 45px;

  .notice {
    width: 18px;
    height: 20px;
  }

  .avatar-wrap {
    width: 32px;
    height: 32px;
    background-image: linear-gradient(90deg, );
    border: solid 2px rgba(47, 71, 200, 0.06);
    border-radius: 50%;
    margin: 0 10px;
  }

}

.dropdown {
  display: flex;
  cursor: pointer;
  color: #409EFF;
  align-items: center;

  .title {
    .name {
      width: 42px;
      height: 20px;
      font-family: Source Han Sans SC;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 14px;
      letter-spacing: 0px;
      color: #171725;
    }

    .text {
      width: 145px;
      height: 18px;
      font-family: Source Han Sans SC;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 12px;
      letter-spacing: 0px;
      color: #92929d;
    }

  }

  .drop-wrap {
    width: 9px;
    height: 6px;

    .drop {}
  }

}

.dropdown-menu {
  padding: 50px 10px 10px 10px;
  box-sizing: border-box;
  position: relative;

  .name-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: white;
    font-size: 18px;
    height: 50px;
    background-color: #465a70;
    border-radius: 5px;
    padding-left: 28px;
  }

  .pwd-item {
    height: 30px;
    border-bottom: 1px solid #ebedef;
    margin-top: 5px;
    &:hover {
      color: #606266;
      background-color: #ebedef;
      border-radius: 3px;
    }
  }

  .logout {
    border-radius: 2px;
    height: 30px;
    border-bottom: 1px solid #ebedef;
    margin-top: 5px;
    &:hover {
      color: #606266;
      background-color: #ebedef;
      border-radius: 3px;
    }
  }
}
</style>
<style lang="scss">
.el-popper.dropdown-menu {
  // background-color: #465a70;
  border: none;
  width: 150px;

  .popper__arrow {
    left: 105px !important;//箭头位置

    &::after {
      //箭头颜色
      border-bottom-color: #465a70 !important;
    }
  }

}

.el-dropdown-menu--medium {
  padding: 0px;
}
</style>