apt-nl/src/pages/shells/index/index.vue

<template>
  <div class="index-container">
    <div class="header-container">
      <div class="title-container">
        <span class="company-logo"></span>
      </div>
      <div class="horizontal-menu-container">
        <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
          <el-menu-item :index="menu.index" v-for="menu in menus" :key="menu.index">{{menu.label}}</el-menu-item>
        </el-menu>
      </div>
      <div class="state-container">
        <div class="state-item">运行</div>
        <div class="state-line"></div>
        <div class="state-item">自动</div>
        <div class="state-line"></div>
        <div class="state-item">中文<i class="icon_dropdown"></i></div>
      </div>
      <div class="user-container">
        <div class="elec-qty-wrap">
          <div class="elec-qty"></div>
        </div>
        <div class="elec-txt">90%</div>
        <div class="iconfont icon_admin"></div>
        <div class="elec-txt">admin</div>
      </div>
      <div class="time-container">
        <jxTime></jxTime>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import jxTime from '@components/time.vue'
export default {
  components: {
    jxTime
  },
  data () {
    return {
      activeIndex: this.$store.getters.defaultActive,
      menus: [{
        label: '首页',
        index: '1',
        router: '/homehome'
      }, {
        label: '任务管理',
        index: '2',
        router: '/CarryPoint'
      }, {
        label: '故障管理',
        index: '3',
        router: '/ErrorDeal'
      }, {
        label: '车辆信息',
        index: '4',
        router: '/vehiclestatus'
      }, {
        label: '示教',
        index: '5',
        router: '/teach'
      }, {
        label: '地图',
        index: '6',
        router: ''
      }, {
        label: '开发者',
        index: '7',
        router: ''
      }]
    }
  },
  methods: {
    handleSelect (key) {
      this.activeIndex = key
      this.$store.dispatch('getDefaultActive', key)
      this.$router.push({
        path: this.menus[Number(key) - 1].router
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.index-container
  _wh(100%, 100%)
.header-container
  _fj()
  _wh(100%, 61px)
  padding 0 10px
  border-bottom 2px solid #f1f1f1
.title-container
  _fj(center)
  _wh(130px, 61px)
.company-logo
  display block
  _wh(100%, 100%)
  background url(../../../images/aio/logo_1.png) left center / 100% auto no-repeat
.horizontal-menu-container
  height 61px
>>>.el-menu-item
  padding 0 7px
.state-container
  _fj()
.user-container
  _fj()
.time-container
  _fj()
.state-item
  border 1px solid #54C0B3
  border-radius 4px
  _font(15px,25px,#54C0B3,,center)
  padding 0 7px
.state-line
  _wh(2px,20px)
  opacity 0.3
  background #8991A6
  margin 0 10px
.elec-qty-wrap
  position relative
  width 15px
  height 25px
  border 1px solid #dddddd
  margin-right 2px
.elec-qty
  position absolute
  width 100%
  height 90%
  left 0
  bottom 0
  background-color #54C0B3
  // background-color #fa6400
.elec-txt
  _font(15px, 25px, #909399,,left)
  margin-right 10px
.icon_admin
  _font(20px, 25px, #54C0B3,,left)
  margin-right 2px
>>>.el-menu
  border-right none
</style>