菜单页面嵌入

src/pages/shells/index/index.vue

@@ -0,0 +1,145 @@
+<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: ''
+      }, {
+        label: '故障管理',
+        index: '3',
+        router: ''
+      }, {
+        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>