<template>
  <header>
    <div class="tag_block clearfix">
      <div class="fl">
        <div v-if="index == '0'" class="tag cur_tag">首页</div>
        <router-link v-else to="/homepage" class="tag">首页</router-link>
        <div v-if="index == '1'" class="tag cur_tag">生产统计</div>
        <router-link v-else to="/prodcount" class="tag">生产统计</router-link>
      </div>
      <div class="fr">
        <div v-if="index == '2'" class="tag cur_tag">仓储监控</div>
        <router-link v-else to="/storagemonitor" class="tag">仓储监控</router-link>
        <div v-if="index == '3'" class="tag cur_tag">设备监控</div>
        <router-link v-else to="/devicemonitor" class="tag">设备监控</router-link>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {}
  },
  props: {
    index: String
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/mixin'
header
  _wh(100%, 84px)
  overflow hidden
  position relative
  _bis('../assets/images/top.png',auto, 84px)
.tag_block
  margin 35px .54rem 0
.tag
  display inline-block
  _wh(132px, 36px)
  _font(16px, 36px)
  _bis('../assets/images/tag_1.png')
  cursor pointer
  &:hover
    color #32C5FF
    _bis('../assets/images/tag_2.png')
.cur_tag
  color #32C5FF
  _bis('../assets/images/tag_2.png')
</style>
