引导页

pages/welcome/index.vue

 <template>
-  <div class="router-main flex fc-m fa-m">
+  <div class="router-main flex fc-m fa-m pr">
+    <ul class="pa navMenu">
+      <li
+        class="navMenuLi flex fc-m fa-m pr"
+        v-for="(item, index) in menus"
+        :key="index"
+        @mouseenter="navClick(item,index)"
+      >
+        <Icon type="ios-stats" class="f16" />{{ item.name }}
+      </li>
+
+    </ul>
     <div class="bdImg pr" @click="pageClick">
       <div
         class="one pa cursor"
@@ -27,9 +38,153 @@
 
 <script>
 import { isInteger } from "lodash";
+import viewerVue from "../test/viewer.vue";
 export default {
   data() {
     return {
+      navMenus: false,
+      onetest: "0",
+      menus: [
+        {
+          name: "项目管理",
+             style:{
+            left:'260px',
+            top:"100px"
+          },
+          children: [
+            {
+              name: "项目管理",
+              type: 2,
+              code: "",
+              icon: "",
+              target: 0,
+              url: "/project/project",
+              status: 1,
+              description: "",
+              source: 0,
+              app: "mes_roter",
+              priority: 0,
+              id: 541,
+              title: "项目管理",
+              expand: true,
+              upId: 537,
+              lay: 2,
+              children: null,
+              data: null,
+            },
+            {
+              name: "任务中心",
+              type: 2,
+              code: "",
+              icon: "",
+              target: 0,
+              url: "/project/task",
+              status: 1,
+              description: "",
+              source: 0,
+              app: "mes_roter",
+              priority: 0,
+              id: 542,
+              title: "任务中心",
+              expand: true,
+              upId: 537,
+              lay: 2,
+              children: null,
+              data: null,
+            },
+            {
+              name: "项目资源",
+              type: 2,
+              code: "",
+              icon: "",
+              target: 0,
+              url: "/project/resources",
+              status: 1,
+              description: "",
+              source: 0,
+              app: "mes_roter",
+              priority: 0,
+              id: 543,
+              title: "项目资源",
+              expand: true,
+              upId: 537,
+              lay: 2,
+              children: null,
+              data: null,
+            },
+          ],
+        },
+        {
+          name: "文档管理",
+          style:{
+            left:'260px',
+            top:"190px"
+          },
+          children: [
+            {
+              name: "文档分类",
+              type: 2,
+              code: "",
+              icon: "",
+              target: 0,
+              url: "/word/classification",
+              status: 1,
+              description: "",
+              source: 0,
+              app: "mes_roter",
+              priority: 0,
+              id: 544,
+              title: "文档分类",
+              expand: true,
+              upId: 539,
+              lay: 2,
+              children: null,
+              data: null,
+            },
+            {
+              name: "文档管理",
+              type: 2,
+              code: "",
+              icon: "",
+              target: 0,
+              url: "/word/document",
+              status: 1,
+              description: "",
+              source: 0,
+              app: "mes_roter",
+              priority: 0,
+              id: 545,
+              title: "文档管理",
+              expand: true,
+              upId: 539,
+              lay: 2,
+              children: null,
+              data: null,
+            },
+            {
+              name: "模板类型",
+              type: 2,
+              code: "",
+              icon: "",
+              target: 0,
+              url: "/word/template",
+              status: 1,
+              description: "",
+              source: 0,
+              app: "mes_roter",
+              priority: 0,
+              id: 546,
+              title: "模板类型",
+              expand: true,
+              upId: 539,
+              lay: 2,
+              children: null,
+              data: null,
+            },
+          ],
+        },
+        { name: "大屏展示" },
+      ],
       list: [],
       arrList: [],
       isIndex: -1,
@@ -81,6 +236,17 @@ export default {
         var { left, top } = item.style;
         this.menuPos = { left, top };
       }
+    },
+        navClick(v,index) {
+
+      if (v.children && v.children.length > 0) {
+        var { left, top } = v.style;
+        this.list = v.children;
+         this.menuPos = { left, top };
+        this.menu = true;
+      }else{
+          this.menu = false;
+      }
     },
     leavePosition() {
       this.oneShow = false;
@@ -93,6 +259,39 @@ export default {
 <style lang="less" scoped>
 .router-main {
   height: 100%;
+  .navMenu {
+    z-index: 999;
+    top: 90px;
+    left: 95px;
+    .navMenuLi {
+      cursor: pointer;
+      width: 185px;
+      height: 99px;
+      color: #ffffff;
+      .ivu-icon {
+        margin-right: 18px;
+      }
+    }
+    .navMenuLi:nth-child(1) {
+      background: url("../../assets/images/home/router/one.png") no-repeat;
+      background-size: contain;
+    }
+    .navMenuLi:nth-child(2) {
+      background: url("../../assets/images/home/router/two.png") no-repeat;
+      background-size: contain;
+    }
+    .navMenuLi:nth-child(3) {
+      background: url("../../assets/images/home/router/three.png") no-repeat;
+      background-size: contain;
+    }
+    .navMenuLi:hover {
+      transform: scale(1.1);
+    }
+    .navChild {
+      cursor: pointer;
+      left: 167px;
+    }
+  }
   .oneHover {
     border: 2px dotted #0868da;
   }