主页菜单栏以及路由

src/router/index.js

@@ -2,6 +2,8 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import login from '../views/login.vue'
 import homepage from "../views/homepage.vue";
+import mineMonitoring from '../views/mineMonitoring.vue'
+import videoSurveillance from '../views/videoSurveillance.vue'
 
 
 Vue.use(VueRouter)
@@ -15,7 +17,16 @@ const routes = [
   {
     path: '/homepage',
     name: 'homepage',
-    component: homepage
+    component: homepage,
+    children: [
+      {
+        path: '/homepage/mineMonitoring',
+        component: mineMonitoring
+      },{
+        path: '/homepage/videoSurveillance',
+        component: videoSurveillance
+      },
+    ]
   },
   // {
   //   path: '/about',
@@ -25,11 +36,11 @@ const routes = [
   //   // which is lazy-loaded when the route is visited.
   //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   // },
-  {
-    name: 'default',
-    path: '*',
-    redirect: '/login'
-  }
+  // {
+  //   name: 'default',
+  //   path: '*',
+  //   redirect: '/login'
+  // }
 ]
 
 const router = new VueRouter({

src/views/homepage.vue

@@ -5,7 +5,7 @@
       <div class="userInformationBar">
         <div>
           <span>用户权限</span>
-          <span class="iconfont icon-xiajiantou" style="font-size:18px;"></span>
+          <span class="iconfont icon-xiajiantou xiajiantou" style="font-size:18px;"></span>
         </div>
         <div>
           <span>131313132</span>
@@ -22,30 +22,82 @@
               @open="handleOpen"
               @close="handleClose"
               background-color="rgb(9, 26, 69)"
-              text-color="#fff"
-              active-text-color="#ffd04b"
+              text-color="rgb(3,156,205)"
+              active-text-color="white"
               :unique-opened="true"
+              :router="true"
             >
-
-              <el-menu-item index="1">
-                    <i class="el-icon-menu"></i>
-                    <span slot="title">导航一</span>
+              <el-menu-item index="/homepage/mineMonitoring">
+                  <i class="el-icon-menu"></i>
+                  <span slot="title">矿区监控</span>
+              </el-menu-item>
+              <el-menu-item index="/homepage/videoSurveillance">
+                  <i class="el-icon-menu"></i>
+                  <span slot="title">视频监控</span>
               </el-menu-item>
-              <el-submenu index="2">
-                    <template slot="title">
-                        <i class="el-icon-location"></i>
-                        <span>导航二</span>
-                    </template>
-                    <el-menu-item index="2-1">选项1</el-menu-item>
-                    <el-menu-item index="2-2">选项2</el-menu-item>
+              <el-submenu index="3">
+                <template slot="title">
+                  <i class="el-icon-location"></i>
+                  <span>生产自动化系统</span>
+                </template>
+                <el-menu-item index="3_1">系统首页</el-menu-item>
+                <el-menu-item index="3_2">实时数据</el-menu-item>
+                <el-menu-item index="3_3">历史数据</el-menu-item>
+                <el-menu-item index="3_4">报警记录</el-menu-item>
               </el-submenu>
-
+              <el-submenu index="4">
+                <template slot="title">
+                  <i class="el-icon-location"></i>
+                  <span>生产报表系统</span>
+                </template>
+                <el-menu-item index="4_1">系统首页</el-menu-item>
+                <el-menu-item index="4_2">实时数据</el-menu-item>
+                <el-menu-item index="3_3">历史数据</el-menu-item>
+              </el-submenu>
+              <el-menu-item index="5">
+                  <i class="el-icon-menu"></i>
+                  <span slot="title">人员定位系统</span>
+              </el-menu-item>
+              <el-menu-item index="6">
+                  <i class="el-icon-menu"></i>
+                  <span slot="title">车辆定位系统</span>
+              </el-menu-item>
+              <el-submenu index="7">
+                <template slot="title">
+                  <i class="el-icon-location"></i>
+                  <span>边坡在线监测</span>
+                </template>
+                <el-menu-item index="7_1">系统首页</el-menu-item>
+                <el-menu-item index="7_2">实时数据</el-menu-item>
+                <el-menu-item index="7_3">历史数据</el-menu-item>
+                <el-menu-item index="7_4">报警记录</el-menu-item>
+              </el-submenu>
+              <el-submenu index="8">
+                <template slot="title">
+                  <i class="el-icon-location"></i>
+                  <span>环境在线监测</span>
+                </template>
+                <el-menu-item index="8_1">系统首页</el-menu-item>
+                <el-menu-item index="8_2">实时数据</el-menu-item>
+                <el-menu-item index="8_3">历史数据</el-menu-item>
+                <el-menu-item index="8_4">报警记录</el-menu-item>
+              </el-submenu>
+              <el-menu-item index="9">
+                  <i class="el-icon-menu"></i>
+                  <span slot="title">数字化储量管理</span>
+              </el-menu-item>
+              <el-menu-item index="10">
+                  <i class="el-icon-menu"></i>
+                  <span slot="title">门禁系统</span>
+              </el-menu-item>
             </el-menu>
           </el-col>
         </el-row>
       </div>
-
-      <router-view></router-view>
+      <div class="rightBody">
+          <router-view></router-view>
+      </div>
+      
 
     </div>
   </div>
@@ -60,10 +112,8 @@ export default {
     handleClose(key, keyPath) {
       console.log(key, keyPath);
     },
-    handleId(key, keyPath) {
-      console.log(key, keyPath);
-    },
   },
+  
 };
 </script>
 
@@ -106,9 +156,30 @@ export default {
 .mainBody{
     height: 100vh;
     overflow: hidden;
+    display: flex;
+}
+.rightBody{
+  width: 100%;
+  height: 100%;
 }
 .leftMenuBar>.tac>.el-col>ul{
     width: 240px;
     height: 100vh;
+    font-size: 18px;
+    letter-spacing: 2px;
+    font-weight: 600;
+}
+.el-menu-item{
+  height: 50px;
+  line-height: 50px;
+}
+.el-submenu{
+  min-height: 50px;
+  line-height: 50px;
+}
+.xiajiantou{
+  display: inline-block;
+  width: 18px;
+  height: 18px;
 }
 </style>
\ No newline at end of file

src/views/login.vue

@@ -89,7 +89,7 @@ export default {
             }
           })
         })
-        this.$router.push({path: 'homepage',query:{ index:this.userName}});
+        this.$router.push({path: 'homepage/mineMonitoring',query:{ index:this.userName}});
       }
     }
   }

src/views/mineMonitoring.vue

+<template>
+  <div class="allBox">
+      <div class="intelligentDispatch">
+          <div></div>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+*{
+  margin: 0;
+  padding: 0;
+}
+.allBox{
+  background-image: url("../imgs/5dd5481bb9102.png");
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+</style>
\ No newline at end of file

src/views/videoSurveillance.vue

+<template>
+  <div>Video surveillance</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file