menu

src/main.js

@@ -9,7 +9,7 @@ import fastClick from 'fastclick'
 import infiniteScroll from 'vue-infinite-scroll'
 import VueTouchKeyboard from 'vue-touch-keyboard'
 import 'vue-touch-keyboard/dist/vue-touch-keyboard.css'
-import { DatePicker, Select, Option, Radio } from 'element-ui'
+import { DatePicker, Select, Option, Radio, Menu, MenuItem } from 'element-ui'
 import { Pagination } from 'vant'
 // import '@style/layout.styl'
 import '@style/common.styl'
@@ -24,6 +24,8 @@ Vue.use(DatePicker)
 Vue.use(Select)
 Vue.use(Option)
 Vue.use(Radio)
+Vue.use(Menu)
+Vue.use(MenuItem)
 Vue.use(Pagination)
 Vue.use(infiniteScroll)
 Vue.use(VueTouchKeyboard)

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>

src/router/index.js

@@ -3,6 +3,8 @@ import Router from 'vue-router'
 
 const Preload = r => require.ensure([], () => r(require('@page/Preload')), 'Preload')
 const Setup = r => require.ensure([], () => r(require('@page/Setup')), 'Setup')
+
+const IndexComponent = r => require.ensure([], () => r(require('@page/shells/management/index/index.vue')), 'shells')
 // carry
 const Home = r => require.ensure([], () => r(require('@page/Home')), 'Home')
 const MovePoint = r => require.ensure([], () => r(require('@page/MovePoint')), 'MovePoint')
@@ -37,6 +39,11 @@ export default new Router({
       path: '/setup',
       component: Setup
     },
+    {
+      path: '/index',
+      component: IndexComponent,
+      children: []
+    },
     {
       path: '/home',
       component: Home

src/style/iconfont.styl

@@ -1,15 +1,3 @@
-// .delete_icon
-//   &::before
-//     content: '\e632'
-// .eye_open_icon
-//   &::before
-//     content: '\e60a'
-// .eye_colse_icon
-//   &::before
-//     content: '\e7b2'
-// .back_icon
-//   &::before
-//     content: '\e644'
 .icon_dropdown
   &::before
     content: '\e65b'
@@ -19,9 +7,6 @@
 .icon_eyeclose
   &::before
     content: '\ee34'
-// .dropdown_icon_2
-//   &::before
-//     content:'\e62b'
-// .select_icon
-//   &::before
-//     content '\e608'
+.icon_admin
+  &::before
+    content: '\e7a3'

src/style/layout.styl

@@ -394,7 +394,7 @@ header
   color #C0C4CC
   font-size .14rem
   &::before
-    content '\e66d'
+    content '\e659'
 .input-cus-wrap
   position relative
   display inline-block