<template>
  <div class="m-header">
    <div class="nav">
      <a class="logo" href="/">小云蜂巢</a>
      <ul class="menus">
        <li><a :class="current === 0 ? 'active' : ''" href="/content">内容管理工具</a></li>
        <li><a :class="current === 1 ? 'active' : ''" href="/ads">广告交易平台</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      current: 0
    }
  },
  beforeMount () {
    switch (location.pathname) {
      case '/content':
        this.current = 0
        break
      case '/ads':
        this.current = 1
        break
      default:
        this.current = 0
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
.m-header
  background-color: #000
  height: 64px
  line-height: 64px
  .nav
    min-width: 1000px
    margin: 0 auto
    overflow: hidden
    .logo
      float: left
      margin-left: 40px
      display: block
      width: 200px
      height: 60px
      line-height: 60px
      text-align: center
      font-size: 30px
      color: #ff4400
      margin-top: 2px
    .menus
      float: right
      margin-right: 138px
      li
        display: inline-block
        font-size: 16px
        text-align: center
        &:last-child
          margin-left: 200px
        a
          display: block
          width: 160px
          height: 60px
          border-bottom: 4px
          border-style: solid
          border-color: transparent
          color: #fff
          -webkit-transition: border-color .2s linear, color .2s linear
          -moz-transition: border-color .2s linear, color .2s linear
          -o-transition: border-color .2s linear, color .2s linear
          -ms-transition: border-color .2s linear, color .2s linear
          transition: border-color .2s linear, color .2s linear
          &.active
            color: #ff4400
            border-color: #ff4400
          &:hover
            color: #ff4400
            border-color: #ff4400
</style>
