apt-nl/src/pages/shells/management/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">
          <el-menu-item :index="menu.index" v-for="menu in menus" :key="menu.index">
            <router-link :to="menu.router">{{menu.label}}</router-link>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="user-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 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>
        <v-time/>
      </div>
    </div>
    <div class="body-conatiner">
      <div class="side-bar-container"></div>
      <div class="main-container"></div>
    </div>
  </div>
</template>

<script>
import time from '@components/time.vue'
export default {
  components: {
    vTime: time
  },
  data () {
    return {
      activeIndex: '1',
      menus: [{
        label: '首页',
        index: '1',
        router: ''
      }, {
        label: '任务管理',
        index: '2',
        router: ''
      }, {
        label: '故障管理',
        index: '3',
        router: ''
      }, {
        label: '车辆信息',
        index: '4',
        router: ''
      }, {
        label: '示教',
        index: '5',
        router: ''
      }, {
        label: '地图',
        index: '6',
        router: ''
      }, {
        label: '开发者',
        index: '7',
        router: ''
      }]
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.index-container
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  width: 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 9px
.user-container
  _fj()
.state-item
  border 1px solid #54C0B3
  border-radius 4px
  _font(15px,25px,#54C0B3,,center)
  padding 0 7px
  margin 0 10px
  &:nth-child(1)
    margin-left 0
.state-line
  _wh(2px,20px)
  opacity 0.3
  background #8991A6
.elec-qty-wrap
  position relative
  width 15px
  height 30px
  border 1px solid #dddddd
  margin-right 3px
.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)
.icon_admin
  _font(20px, 25px, #909399,,left)
</style>