拷贝晟华新大屏

src/components/header.vue

@@ -0,0 +1,75 @@
+<template>
+  <header>
+    <div class="center_text">晟华大屏监控</div>
+    <div class="tag_block">
+      <div class="tag_left">
+        <!-- <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="tag_right">
+        <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 '~@style/mixin'
+header
+  _wh(100%, 84px)
+  overflow hidden
+  position relative
+  _bis('../assets/images/top.png',auto, 84px)
+.center_text
+  _wh(400px, 40px)
+  position absolute
+  _font(36px, 40px, #fff,,center)
+  font-family "阿里妈妈数黑体" !important
+  left 50%
+  top 8px
+  margin-left -200px
+  letter-spacing 6px
+.tag_block
+  _wh(100%, 100%)
+  _fj(row)
+  padding 25px 15px 0
+.tag_left
+  _wh(50%, 100%)
+  _fj(row, flex-start)
+  .tag
+    margin-right 20px
+.tag_right
+  _wh(50%, 100%)
+  _fj(row, flex-end)
+  .tag
+    margin-left 20px
+.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>