kmt/src/components/SuperComponent.vue

<template>
  <el-col :span="24" class="">
      <el-col :span="2" :offset="2">
       <img class="logoImg" src="../assets/img/log.png"/>
      </el-col>
    <!--v-show="roles.indexOf(item.id) >= 0"-->
      <el-col :span="3"   v-for="(item, index) of menuData" :key="item.id"
      @click.native="secondNavClick(item,index)" style="text-align: center">
          <span class="lineStyle" :class="{active:index == checkindex,menu_item:true}">{{item.name}}</span>
          <!--<div class="box" v-if="index==1||index==3">-->
            <!--<span class="box-text">{{index==1?2+'项任务':3+'份作业'}}</span>-->
          <!--</div>-->
      </el-col>

      <el-col :span="4" class="aside-right">
      <div class="login">   
        <img  class="userstyle"  :src="BASE_URL + avatar" alt="">
        <!-- <img class="userstyle" src="../assets/img/user.jpg"> -->
        <span>{{name}}</span>
        <i class="el-icon-caret-bottom"></i>
      </div>
      <div class="out">
        <img src="../assets/img/out.png" alt class="out-img">
        <span @click="Loginout">退出</span>
      </div>
    </el-col>
  </el-col>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: "navMenu",
  // props: {
  //   navsData: Array
  // },
  data() {
    return {
         BASE_URL: "https://xt.sharingschool.com/upload/",
      menuData: [ {
    id: "1",
    name: "校区管理员",
    href: "SuperAdmin",
  },
  {
    id: "2",
    name: " 批改老师注册审核",
    href: "CheckTeacherAudit",
  },
  {
    id: "3",
    name: "批改老师薪酬表",
    href: "CheckTeacherPay",
  },
          {
            id: "4",
            name: "作业回收站",
            href: "HomeworkRecycle",
          },
 ],
      checkindex:''
    };
  },
  watch: {
    navsData(n) {
      this.navsData = n;
      this.initNav();
    }
  },
  methods: {
    // 初始化处理
    // initNav() {
    //   this.menuData = JSON.parse(JSON.stringify(this.navsData));
    // },
    secondNavClick(val, index) {

      sessionStorage.setItem('tabIndex',index);
      this.checkindex = sessionStorage.getItem('tabIndex');
      console.log(sessionStorage.getItem('tabIndex'))
      if (sessionStorage.getItem('tabIndex') == 0){
        this.$router.push("/super/" + 'SuperAdmin');
      } else if (sessionStorage.getItem('tabIndex') == 1){
        this.$router.push("/super/" + 'CheckTeacherAudit');
      } else if (sessionStorage.getItem('tabIndex') == 2){
        this.$router.push("/super/" + 'CheckTeacherPay');
      } else if (sessionStorage.getItem('tabIndex') == 3){
        this.$router.push("/super/" + 'HomeworkRecycle');
      }
      // this.$router.push("/super/" + val.href);
      // this.checkindex = index;
    },
     //  账号管理、退出登录
    Loginout() {
      this.$confirm("您确定退出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          localStorage.removeItem("accessToken");
          this.$store.dispatch("LogOut").then(() => {
            location.reload(); // 为了重新实例化vue-router对象 避免bug
          });
        })
        .catch(() => {
          // console.log(err)
          this.$message("已取消操作!");
        });
    }
  },
  computed: {
      ...mapGetters(['name', 'avatar','roles'])
    },
  mounted() {
    this.checkindex = sessionStorage.getItem('tabIndex');
    // this.initNav();
  }
};
</script>
<style scoped>
/*.mainHeader{*/
  /*height: 110px;*/
  /*line-height:110px;*/
/*}*/
.menu_item {
  cursor: pointer;
  color:#999999; 
  font-size: 9px;
  font-family: serif;
  box-sizing:border-box;
  height: 80%;
  text-align:center;
  padding-bottom:19px ;
  /*display: inline-block;*/
}
.menu_item:hover {
  color:#52CC60 ;
  border-bottom:2px solid #52cc60;
}
.active {
  color:#52CC60 !important;
  border-bottom:2px solid #52cc60;
}
.menu_item+.menu_item {
  border-left: 1px solid #ffffff;
}
.logoImg{
  width:136px;
  height:52px;
}
.sishuLogo{
  margin-left:125px;
}
.userstyle{
  width:50px;
  height:50px;
  border-radius: 25px;
}
  .lineStyle{
    color: #999999;
    font-size: 18px;
    text-align: center;
  }
.login{
  color: #333333;
  font-size: 14px;
  display: inline-block;
}
.out{
  margin-left: 40px;
  font-size: 14px;
  color: #666666;
  display: inline-block;
  cursor: pointer;
}
.out-img{
  width: 16px;
  height: 18px;
}
  .aside-right{
    float: right;
    margin-right: 0%;
  }
  .box-items{
    position: relative;
  }
  .box-text{
    color: #FFFFFF;
    font-size: 14px;
    position: absolute;
    top:-37px;
    left: 0;
    height:34px;
    min-width: 75px;
    display: inline-block;
  }
.box{
    position: relative;
    top:0px;
    left:0px;
    min-width:75px;
    height:34px;
    background: #FF6767;
   -moz-border-radius: 12px;
   -webkit-border-radius: 12px;
   border-radius: 17px;
   display: inline-block;
}
.box:before{
             position: absolute;
             content: "";
             width: 0;
             height: 0;
             right: 100%;
             top: 25px;
             left: -5px;
             border-top: 5px solid transparent;
             border-right: 18px solid #FF6767;
             border-bottom: 5px solid transparent;
             transform: rotate(-45deg);
            }
</style>