TEAMModelOS/TEAMModelOS.SmartClass/ClientApp/components/smart-class/headers.vue

<template>
  <div class="headerContainer">
    <div class="header center-row">
      <img src="http://ttkt.sxedu.org:70/upload/setting/0/0.png?_=1557194799800" />
      <ul>
        <li :class="this.$route.path ==  '/main/index' || activeIndex == 0 ? 'li-active':''" @click="handleMenuClick(0,'index')">首页</li>
        <li :class="this.$route.path ==  '/main/notice' || activeIndex == 1? 'li-active':''" @click="handleMenuClick(1,'notice')">通知公告</li>
        <li :class="this.$route.path ==  '/main/reviewActivity' || activeIndex == 2? 'li-active':''" @click="handleMenuClick(2,'reviewActivity')">评审活动</li>
        <li :class="this.$route.path ==  '/main/PastReview' || activeIndex == 3? 'li-active':''" @click="handleMenuClick(3,'PastReview')">往届回顾</li>
        <li :class="this.$route.path ==  '/main/LiveBroadcast' || activeIndex == 4? 'li-active':''" @click="handleMenuClick(4,'LiveBroadcast')">天天直播</li>
        <li :class="this.$route.path ==  '/main/Lessons' || activeIndex == 5? 'li-active':''" @click="handleMenuClick(5,'Lessons')">优课汇聚</li>
      </ul>
      <span class="btn-login" v-if="isLogin == 1" >欢迎&nbsp;{{userName}}!</span>
      <Icon type="md-power" v-if="isLogin == 1" @click="loginOut" style="margin-left:30px;" size="20" color="white" />
      <span class="btn-login" v-else @click="handleMenuClick(6,'/login')">登录</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "headers",
    data() {
      return {
        userName: '',
        isLogin:'',
        activeIndex: sessionStorage.getItem('_activeIndex') || 0
      }
    },
    methods: {
      handleMenuClick(index, route) {
        this.activeIndex = index;
        sessionStorage.setItem('_activeIndex', index);
        this.$router.push(route);
      },
      loginOut() {
        localStorage.clear();
        this.isLogin = 0;
      }
    },
    mounted() {
      this.userName = localStorage.getItem("userName");
      this.isLogin = localStorage.getItem("isLogin");
      this.$eventBus.$on('activeIndex', (index) => {
        this.activeIndex = index;
      })
    }
  }
</script>
<style scoped>

  .headerContainer {
    background-color: #1f2d3d;
    height: 80px;
    position: absolute;
    left:0;
    top:0;
    min-width: 100%
  }

  .header {
    width: 1200px;
    margin: 0 auto;
    height: 80px;
    box-sizing: content-box
  }

    .header ul {
      list-style:none;
      color:#aaa;
      padding: 0 20px;
      /*margin-right:20px;*/
    }

      .header ul li {
        float:left;
        height:80px;
        width:100px;
        line-height:80px;
        text-align:center;
        padding: 0 15px;
        font-size:16px;
        cursor:pointer;
      }
        .header ul li:hover {
          background:rgba(160,160,160,.24);
          color:#33aafe;
        }

      .header ul .li-active {
        color:#33aafe;
      }
    .header .btn-login {
      color: #fff;
      font-size: 14px;
      line-height: 44px;
      display: inline-block;
      cursor:pointer;
    }
  .center-row {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-around;
  }
</style>