menu

src/pages/shells/management/index/index.vue

@@ -0,0 +1,131 @@
+<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>
+      </div>
+    </div>
+    <div class="body-conatiner">
+      <div class="side-bar-container"></div>
+      <div class="main-container"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  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
+  display: flex;
+  flex-shrink: 0;
+  height: 61px;
+  justify-content: space-between;
+  border-bottom: 2px solid #f1f1f1;
+.title-container
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 20px;
+  height 61px
+.company-logo
+  display block
+  _wh(150px, 61px)
+  background url(../../../../images/aio/logo_1.png) left center / 100% auto no-repeat
+.horizontal-menu-container
+  height 61px
+>>>.el-menu-item
+  padding 0 10px
+.user-container
+  _fj()
+.state-item
+  border 1px solid #54C0B3
+  border-radius 4px
+  _font(15px,25px,#54C0B3,,center)
+  padding 0 7px
+  margin 0 10px
+.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>