vue element 导航路由跳转点击样式

懂的自然懂，

<template>
  <div class="recruittop">
      <el-menu :default-active="this.$route.path" router mode="horizontal">
        <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">{{ item.navItem }}</el-menu-item>
      </el-menu>
      <p class="returns">返回工作中心</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
        rightid:"86",
        rightimg:[],
        navList:[
            {name:'/onlineJob',navItem:'招聘管理'},
            {name:'/resumeManagement',navItem:'简历管理'},
            {name:'/historical',navItem:'面试管理'},
            {name:'/questionBank',navItem:'题库管理'},
        ],
        activeIndex: '1',
    };
  },

  created() {},
  mounted(){
    //   this.rightimgs();
  },
  methods: {
      actives(item){
          this.$router.push({
                name:item
            })
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
  }
};
</script>
<style type="text/css" scoped>
    .recruittop {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #E9E9E9;
        display: flex;
        justify-content: space-between;
    }
    .recruittop ul {
        display: flex;
        height: 40px;
        line-height: 40px;
    }
    .recruittop ul li {
        width:91px;
        height:39px;
        cursor: pointer;
        text-align: center;
        line-height: 40px;
    }
    .active {
        background:#339999;
        color: #ffffff;
        opacity:1;
        border-radius:6px 6px 0px 0px;
    }
    .returns {
        margin-top: 10px;
    }
</style>