样式

src/components/header.vue

@@ -1,14 +1,14 @@
 <template>
   <header>
     <div class="center_text">晟华大屏监控</div>
-    <div class="tag_block clearfix">
-      <div class="fl">
+    <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="fr">
+      <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>
@@ -47,7 +47,19 @@ header
   margin-left -200px
   letter-spacing 6px
 .tag_block
-  margin 35px .54rem 0
+  _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)

src/components/select.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="select">
+      <div class="select-item pointer" @click="selectOption">
+        <div class="select-item-txt">{{defaultLabel}}</div>
+        <div class="select-item-button">&nbsp;</div>
+      </div>
+      <ul v-show="active" class="options">
+        <li class="pointer" :class="{'li-active': e.index === index}" v-for="e in option" :key="e.index" @click="change(e)">{{e.label}}</li>
+      </ul>
+    </div>
+  </template>
+
+<script>
+export default {
+  name: 'SelectOpt',
+  props: {
+    option: Array,
+    index: [Number, String]
+  },
+  data () {
+    return {
+      active: false
+    }
+  },
+  computed: {
+    defaultLabel () {
+      let val = ''
+      this.option.map(e => {
+        if (e.index === this.index) {
+          val = e.label
+        }
+      })
+      return val
+    }
+  },
+  methods: {
+    selectOption () {
+      this.active = true
+    },
+    change (e) {
+      this.$emit('change', e.index)
+      this.active = false
+    }
+  }
+}
+</script>
+
+  <style lang="stylus" scoped>
+  @import '~@css/mixin'
+  .select
+    position relative
+    _wh(100%, inherit)
+    background-color #fff
+    user-select none
+.select-item
+    width 100%
+    _fj(row)
+.select-item-txt
+    width calc(100% - 50px)
+    _font(15px, inherit, #999,,left)
+    padding 0 10px
+.select-item-button
+    position relative
+    _wh(50px, inherit)
+    vertical-align top
+    &::before
+      content ''
+      width 0
+      height 0
+      border-left 5px solid transparent
+      border-right 5px solid transparent
+      border-top 5px solid #999
+      position absolute
+      right 13px
+      top 13px
+      pointer-events none
+      z-index 3
+  .options
+    position absolute
+    z-index 100000
+    top 44px
+    width 100%
+    padding 10px 0
+    background-color #fff
+    border 1px solid #eee
+    border-radius 5px
+    li
+      width 100%
+      _font(15px, 38px, #999,,left)
+      padding 0 10px
+      user-select none
+      box-sizing border-box
+      &:hover
+        background-color #f5f7fa
+    .li-active
+      color #409eff
+  </style>