跳转

kcui/src/router/router.js

@@ -5,6 +5,7 @@ import Home from '@/view/Graph.vue'
 import Book from '@/view/Book.vue'
 import TwInfo from '@/view/TWInfo.vue'
 import Login from '@/view/Login.vue'
+import Mulu from '@/view/Mulu.vue'
 //2.调用vue.use() 函数，把 VueRouter 安装为 Vue 的插件
 //vue.use()函数的作用，就是来安装插件的
 Vue.use(VueRouter)
@@ -18,6 +19,11 @@ export default new VueRouter({
             component: Login,   //对应的组件模板
         },
         {                    //每一个链接都是一个对象
+            path: '/Mulu',         //链接路径
+            name: 'Mulu',     //路由名称，
+            component: Mulu,   //对应的组件模板
+        },
+        {                    //每一个链接都是一个对象
             path: '/Graph',         //链接路径
             name: 'Graph',     //路由名称，
             component: Home   //对应的组件模板

kcui/src/view/Graph.vue

@@ -287,13 +287,13 @@ export default {
 
       return styles[group] || {};
     },
-    doLogin(){
-      userLogin().then((res)=>{
-        console.log(res);
-        this.testInfo();
-        this.getInfo();
-      })
-    },
+    // doLogin(){
+    //   userLogin().then((res)=>{
+    //     console.log(res);
+    //     this.testInfo();
+    //     this.getInfo();
+    //   })
+    // },
     testInfo(){
       test().then((res)=>{
         console.log(res);

kcui/src/view/Mulu.vue

@@ -0,0 +1,63 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <img style="width: 100%;height: 100%;position: absolute;z-index:99;" src="../assets/img/mulubg.png">
+    <img src="../assets/img/mululist.png" style="width: 100%;height: 100%;position: absolute;z-index:100;">
+    <headInfo style="position: absolute;z-index: 100"></headInfo>
+    <div class="mululist">
+      <div v-for="item in mulu" :key="item" style="width: 100%;height: 10%;">
+        {{item.name}}
+      </div>
+    </div>
+
+    <div style="width: 100%;height: 3%;position: fixed;bottom: 0px;z-index: 100">
+      <foot></foot>
+    </div>
+  </div>
+
+</template>
+<script>
+
+import headInfo from "@/components/Head.vue";
+import Foot from "@/components/Foot.vue";
+export default {
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: 'Home',
+  components: {Foot, headInfo},
+  data() {
+    return{
+       mulu:[
+         {id:0,name:"图文资源"},
+         {id:1,name:"视频资源"},
+         {id:2,name:"动画显示"},
+         {id:3,name:"计算模块"},
+         {id:4,name:"知识图谱"},
+         {id:4,name:"帮助文档"},
+       ]
+    }
+  },
+  methods:{
+
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped>
+.mululist{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 10%;
+  height: 50%;
+  //background-color: #42b983;
+  position: absolute;
+  top: 25%;
+  z-index: 110;
+  left: 15%;
+  text-align: center;
+  font-size: 1.2vw;
+  color: #ffffff;
+}
+</style>