YF_monitor/test/src/views/layout/components/LeftAside.vue

<template>
  <el-aside class="page-home-content">
    <div class="left">

      <router-link   to="/LayOut" active-class="change" exact>
          <div class="system-info">
            <!-- <img src="../../../assets/system-Selected.png" alt="" /> -->
            <img :src="aside[0].path === $route.path ? aside[0].selected : aside[0].normal" alt="" />

            <span >系统信息</span>
          </div>
      </router-link>

      <router-link style="margin-top:35px"   to="/LayOut/banmange"  active-class="change" exact>
        <div class="system-info"  >
          <!-- <img src="../../../assets/ban-Selected.png" alt="" /> -->
            <img :src="aside[1].path === $route.path ? aside[1].selected : aside[1].normal" alt="" />
          <span >四情封禁</span>
        </div>
      </router-link>
    </div>
  </el-aside>
</template>

<script>
export default {
  name: 'LeftAside',
  data () {
    return {
      aside: [
        { path: '/LayOut', normal: require('../../../assets/system.png'), selected: require('../../../assets/system-Selected.png') },
        { path: '/LayOut/banmange', normal: require('../../../assets/ban.png'), selected: require('../../../assets/ban-Selected.png') }
      ]

    }
  }

}
</script>

<style scoped lang="less">

a{
  text-decoration: none;
  color: #6A7A88 ;
}

.change {
  color: white;
}

.el-aside {
  // border: 1px solid red;
  width: 106px !important ;
}

.page-home-content {
    background-color: rgb(240, 242, 245);
    box-sizing: border-box;
    // height: 875px;
    height: calc(98vh - 60px);
    width: 100vw;
    display: flex;
    justify-content: space-between;
    .left {
      // height: calc(1080px - 203px);
      // height: calc(1080px - 61px);
      // height: calc(100vh - 61px);
      height: 100%;
      width: 106px;
      min-height: 640px;
      background-color: #040e1b;
      border-top: 1px solid #ecf0f8;
      padding-top: 25px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      flex-direction: column;

    }

    .system-info {
      display: flex;
      flex-direction: column;
    }

    img {
      width: 60px;
      height: 60px;
    }

}
</style>