根据原型体，选一个最接近的UI组件 el-tabs

 html：

思路：通过el-tabs默认选中页签（v-model的值）与（切换列表循环的下标）进行判断，为true 表示当前选中项，就添加选中的图片，为false 添加默认的图片

 <template>
  <div>
      <div class="know_content">
        <el-tabs :tab-position="tabPosition" v-model="activeId">
          <el-tab-pane label="用户管理" v-for="(s,sIndex) in subjectList" :key="sIndex" :name="sIndex+''">

            <!-- 左边 “标题” 切换 -->
            <template slot="label">
              <div class="know_item">
                <img :src="activeId==sIndex?s.active:s.img" alt="">
                <div>{{s.title}}</div>
              </div>
            </template>

            <!-- 右边pane内容 -->
            <div class="know_right"></div>

          </el-tab-pane>
        </el-tabs>
      </div>
  </div>
</template>

js：

<script>
export default {
  data () {
    return {
      tabPosition: 'left',
      activeId: '0', // 默认显示第一页
      subjectList: [
        {title: '数学', active: require('@/assets/home/math1.png'), img: require('@/assets/home/math.png')},
        {title: '物理', active: require('@/assets/home/physics1.png'), img: require('@/assets/home/physics.png')},
        {title: '英语', active: require('@/assets/home/english1.png'), img: require('@/assets/home/english.png')}
      ]
    }
  }
}
</script>

 css：

<style lang="scss" scoped>
  // 内容
  /deep/ .know_content{
    padding:22px 20px 18px 20px;
    margin:0px 80px;
    height: calc(100vh - 13vw);
    background: url('../../assets/home/know_bgs.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    .el-tabs__header.is-left{
      margin-right: 0;
    }
    .el-tabs__nav-wrap::after {
      display: none;
    }
    .el-tabs__active-bar {
      display: none;
    }
    .el-tabs__nav-scroll::-webkit-scrollbar {
      height: 0;
    }
    .el-tabs__nav-scroll {
      overflow-x: scroll;
      background: linear-gradient(50deg, transparent 38px, rgba(25, 177, 201,.2) 0);
      padding-right: 40px;
      width: 220px;
      height: 100%;
    }
    .el-tabs__item {
      font-size: 24px;
      color: #D6D6D6;
      padding: 22px 0;
      border-radius: 0px 64px 65px 0px;
      height: auto;
      text-align: center;
      width: 180px;
      margin: 60px 0;
    }
    .el-tabs__item.is-active {
      color: #fff;
      background: #03ba82;
    }
    .el-tabs__content {
       z-index: 10;
       text-align: left;
       color: #fff;
    }
    .know_item{
      img{
        height: 48px;
      }
    }
    .know_right{
       width:1435px;
    }
  }
}
</style>

       希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~