<template>
  <div class="header-btn">
    <el-popover
      placement="bottom"
      trigger="click"
      width="450"
      class="popover"
      v-model="visible"
    >
      <div class="changeBox">
        <div class="center-classify">
          <span>个人中心</span>
          <div class="row-line"></div>
          <div class="classify-item">
            <div @click="jumpRouter('/workSpace')">工作台</div>
            <div @click="jumpRouter('/userCenter/userConfig')">用户中心</div>
            <div @click="jumpRouter('/infoCenter/allInfo')">消息中心</div>
          </div>
        </div>
      </div>
      <!-- 点击内容 -->
      <div slot="reference" class="click-content">
        <i class="el-icon-trophy-1"></i>
        <span>工作台</span>
        <i class="el-icon-arrow-down"></i>
      </div>
    </el-popover>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    jumpRouter(routeName){
      this.$router.push(routeName)
    }
  }
}
</script>
<style lang="less" scoped>
.flexStyle(){
    display: flex;
    align-items: center;
}
.changeBox {
  .center-classify{
    width: 180px;
    >span:nth-child(1){
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #000000;
    }
    .row-line{
      width: 100%;
      height: 2px;
      background-color: #E1E1E1;
      margin-top: 5px;
    }
    .classify-item{
      margin-top: 10px;
      div{
        padding: 6px 0px;
        text-indent: 0.5em;
        border-radius: 3px;
        cursor: pointer;
      }
      div:hover{
        color: white;
        background-color: #478CF7;
      }
      div:not(:last-child){
        margin-bottom: 7px;
      }
    }
  }
}
.click-content{
  cursor: pointer;
  .flexStyle();
  >span{
    margin: 0px 10px;
  }
}
</style>
<style>
.el-popover {
  box-sizing: content-box !important;
}
</style>