菜单页面嵌入

src/pages/shells/index/index.vue

@@ -5,47 +5,46 @@
         <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 :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="user-container">
+      <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>
-        <v-time/>
+      </div>
+      <div class="time-container">
+        <jxTime></jxTime>
       </div>
     </div>
-    <div class="body-conatiner">
-      <div class="side-bar-container"></div>
-      <div class="main-container"></div>
-    </div>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import time from '@components/time.vue'
+import jxTime from '@components/time.vue'
 export default {
   components: {
-    vTime: time
+    jxTime
   },
   data () {
     return {
-      activeIndex: '1',
+      activeIndex: this.$store.getters.defaultActive,
       menus: [{
         label: '首页',
         index: '1',
-        router: ''
+        router: '/homehome'
       }, {
         label: '任务管理',
         index: '2',
@@ -57,11 +56,11 @@ export default {
       }, {
         label: '车辆信息',
         index: '4',
-        router: ''
+        router: '/vehiclestatus'
       }, {
         label: '示教',
         index: '5',
-        router: ''
+        router: '/teach'
       }, {
         label: '地图',
         index: '6',
@@ -72,6 +71,15 @@ export default {
         router: ''
       }]
     }
+  },
+  methods: {
+    handleSelect (key) {
+      this.activeIndex = key
+      this.$store.dispatch('getDefaultActive', key)
+      this.$router.push({
+        path: this.menus[Number(key) - 1].router
+      })
+    }
   }
 }
 </script>
@@ -79,10 +87,7 @@ export default {
 <style lang="stylus" scoped>
 @import '~@style/mixin'
 .index-container
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  width: 100%;
+  _wh(100%, 100%)
 .header-container
   _fj()
   _wh(100%, 61px)
@@ -94,31 +99,33 @@ export default {
 .company-logo
   display block
   _wh(100%, 100%)
-  background url(../../../../images/aio/logo_1.png) left center / 100% auto no-repeat
+  background url(../../../images/aio/logo_1.png) left center / 100% auto no-repeat
 .horizontal-menu-container
   height 61px
 >>>.el-menu-item
-  padding 0 9px
+  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
-  margin 0 10px
-  &:nth-child(1)
-    margin-left 0
 .state-line
   _wh(2px,20px)
   opacity 0.3
   background #8991A6
+  margin 0 10px
 .elec-qty-wrap
   position relative
   width 15px
-  height 30px
+  height 25px
   border 1px solid #dddddd
-  margin-right 3px
+  margin-right 2px
 .elec-qty
   position absolute
   width 100%
@@ -129,6 +136,10 @@ export default {
   // background-color #fa6400
 .elec-txt
   _font(15px, 25px, #909399,,left)
+  margin-right 10px
 .icon_admin
-  _font(20px, 25px, #909399,,left)
+  _font(20px, 25px, #54C0B3,,left)
+  margin-right 2px
+>>>.el-menu
+  border-right none
 </style>

src/pages/shells/sidebar/sidebar.vue

@@ -0,0 +1,43 @@
+<template>
+  <el-menu :default-active="activeIndex" @select="handleSelect">
+    <el-menu-item :index="menu.index" v-for="menu in menus" :key="menu.index">{{menu.label}}</el-menu-item>
+  </el-menu>
+</template>
+
+<script>
+export default {
+  name: 'jxSidebar',
+  props: {
+    menus: Array
+  },
+  data () {
+    return {
+      activeIndex: '1'
+    }
+  },
+  created () {
+    this.menus.map(el => {
+      if (el.router === this.$route.path) {
+        this.activeIndex = el.index
+      }
+    })
+  },
+  methods: {
+    handleSelect (key) {
+      this.activeIndex = key
+      this.$router.push({
+        path: this.menus[Number(key) - 1].router
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+>>>.el-menu-item a
+    color #909399
+>>>.is-active
+    background-color: #ecf5ff
+>>>.is-active a
+    color #409EFF
+</style>