seecoder-devcloud-frontend/src/components/SideBar.vue

<template>
  <el-menu :default-active="active" class="side-bar" :collapse="true" :router="true">
    <el-menu-item index="schedule">
      <i class="icon" target="schedule"></i>
    </el-menu-item>
    <el-menu-item index="taskList">
      <i class="icon" target="taskList"></i>
    </el-menu-item>
    <el-menu-item index="bugList">
      <i class="icon" target="bugList"></i>
    </el-menu-item>
    <!-- <el-menu-item index="statistics">
      <i class="icon" target="statistics"></i>
    </el-menu-item> -->
    <el-menu-item index="pipeline">
      <i class="icon" target="pipeline"></i>
    </el-menu-item>
    <el-menu-item index="database">
      <i class="icon" target="database"></i>
    </el-menu-item>
    <el-menu-item index="apitest">
      <i class="icon" target="apitest"></i>
    </el-menu-item>
    <el-menu-item index="invite">
      <i class="icon" target="invite"></i>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'SideBar',
  computed: {
    active() {
      const li = this.$route.path.split('/');
      return li[li.length - 1];
    },
  },
};
</script>

<style lang="scss" scoped>
.side-bar {
  height: 100%;
}
.icon {
  width: 28px;
  height: 28px;
  float: right;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 14px;
  transition: all .2s linear;
  .el-menu-item:hover & {
    cursor: pointer;
    transition-duration:0.2s;
    transform:scale(1.1);
    transition-timing-function:ease-in-out;
  }
}
.icon[target=schedule]{
  background-image: url("../assets/icon/navigation.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon/navigation-hover.svg");
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon/navigation-using.svg");
  }
}
.icon[target=taskList]{
  background-image: url("../assets/icon/task.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon/task-hover.svg");
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon/task-using.svg");
  }
}
.icon[target=bugList]{
  background-image: url("../assets/icon/bug.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon/bug-hover.svg");
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon/bug-using.svg");
  }
}
.icon[target=statistics]{
  background-image: url("../assets/icon/training.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon/training-hover.svg");
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon/training-using.svg");
  }
}
.icon[target=pipeline]{
  background-image: url("../assets/icon/training.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon/training-hover.svg");
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon/training-using.svg");
  }
}
.icon[target=database]{
  background-image: url("../assets/icon/database.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon/database-hover.svg");
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon/database-using.svg");
  }
}
.icon[target=apitest]{
   background-image: url("../assets/icon/test.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon/test-hover.svg");
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon/test-using.svg");
  }
}
.icon[target=invite]{
   background-image: url("../assets/icon/link.svg");
  .el-menu-item:hover & {
    background-image: url("../assets/icon/link-hover.svg");
  }
  .el-menu-item.is-active & {
    background-image: url("../assets/icon/link-using.svg");
  }
}
</style>