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

<template>
  <div class="headerContainer">
    <div class="header center-row">
      <img src="../../assets/image/e_logo4.png" style="width:230px" />
      <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/LiveBroadcast' || activeIndex == 4? 'li-active':''" @click="handleMenuClick(4,'LiveBroadcast')">课例直播</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/Lessons' || activeIndex == 5? 'li-active':''" @click="handleMenuClick(5,'Lessons')">经典课例</li>
      </ul>
      <div  v-if="isLogin == 1">
        <span class="btn-login">欢迎&nbsp;{{userName}} !</span>
        <Icon type="md-power"  @click="loginOut" style="margin-left:10px;cursor:pointer;margin-top:-4px;" size="20" title="退出登录" color="white" />
      </div>      
      <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
      }
    },

    created() {

    },
    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:#41b6ba;
        }

      .header ul .li-active {
        color:#41b6ba;
      }
    .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>