代码

<template>
<div>
<!--设置总体颜色-->
  <div class="main">
    <div class="class">

      <router-link :to="{path: '/table'}">
        <i class="el-icon-s-promotion"></i>
        班级
      </router-link>

    </div>
  </div>

<!--  内容区域-->
  <div class="container">
    <router-view></router-view>
  </div>
</div>
</template>

<script>
export default {
  name: "NavTemp2",
  data(){
    return{
    //   侧边导航栏width
      navWidth:'',
    //   侧边栏的Height
      navHeight:'',
    //   侧边导航栏的第一行的width
      navOneRowWidth:'',
    //   侧边导航栏的第一行的height
      navOneRowHeight:'',
    //   主题内容的width
      themeWidth:'',
    //   主题内容的height
      themeHeight:'',
    //  主题内容与左边的距离
      themeAndLeft:''
    }
  },
  mounted() {
    this.gethomeheight()
    this.gethomewidth()
    window.addEventListener('resize', this.gethomewidth); // 在窗口大小改变时重新获取窗口宽度
    window.addEventListener('resize', this.gethomeheight);
  },

  methods:{
    gethomewidth(){
      // 获取窗口宽度
      var windowwidth = window.innerWidth
    //   侧边导航栏的width
      this.navWidth = parseInt(windowwidth/9)+'px'
      document.documentElement.style.setProperty('--navWidth',this.navWidth);
    // 侧边导航栏的第一行的width
      this.navOneRowWidth = this.navWidth
      document.documentElement.style.setProperty('--navOneRowWidth',this.navOneRowWidth);

      //主题内容的width
      this.themeWidth = parseInt(windowwidth/9*7)+'px'
      document.documentElement.style.setProperty('--themeWidth',this.themeWidth);
      //主题内容与左边的距离
      this.themeAndLeft = parseInt(windowwidth/9+10)+'px'
      document.documentElement.style.setProperty('--themeAndLeft',this.themeAndLeft);
    },
    // 获得窗口height度
    gethomeheight(){

      var windowheight = window.innerHeight
      //   侧边导航栏的height
      this.navHeight = parseInt(windowheight-50)+'px'
      document.documentElement.style.setProperty('--navHeight',this.navHeight);
      //侧边导航栏第一行的height
      this.navOneRowHeight = parseInt(windowheight/18)+'px'
      document.documentElement.style.setProperty('--navOneRowHeight',this.navOneRowHeight);
      //主题内容的height
      document.documentElement.style.setProperty('--themeHeight',this.navHeight);
    }
  },

}
</script>

<style scoped>
:root{
/*  侧边导航栏的width*/
  --navWidth:'';

  /*  侧边导航栏的height*/
  --navHeight:'';

/*  侧边导航栏的第一行的width*/
  --navOneRowWidth:'';

/* 侧边导航栏的第一行的height*/
  --navOneRowHeight: '';
/*  主题内容的width*/
  --themeWidth:'';
/*  主题内容的height*/
  --themeHeight:'';
/*主题内容与左边的距离*/
  --themeAndLeft:'';
}

.main{

  background-color: #35495d;
  width: var(--navWidth);
  height: var(--navHeight);
  color: #d1d1d1;
  font-size: 25px;
}

.container{
  background-color: #42b983;
  position: absolute;
  left: var(--themeAndLeft);
  top: 10px;
  width: var(--themeWidth);
  height: var(--navHeight);
}
.class{
  width: var(--navOneRowWidth);
  height: var(--navOneRowHeight);
  padding-top: 20px;
}
.class:hover{
  background-color:hsla(0, 0%, 100%, 0.1);
}
.router-link-active {
  text-decoration: none;
  color: yellow;
}
a{
  text-decoration: none;
  color: #d1d1d1;
}

</style>