孵化平台界面创建

src/components/HeadNav/HeadNav.vue

@@ -2,23 +2,13 @@
   <div class="white d-flex flex-row flex-nowrap px-10 align-center">
     <img @click="jumUrl('/')" alt class="logo-img" src="@/assets/logo.png" style="cursor: pointer" />
     <div class="flex-1 ml-8">
-      <a-dropdown
-        :disabled="item.children && item.children.length > 0 ? false : true"
-        :key="a"
-        class="list-down"
-        v-for="(item, a) in list"
-      >
+      <a-dropdown :disabled="item.children && item.children.length > 0 ? false : true" :key="a" class="list-down" v-for="(item, a) in list">
         <a @click="jumUrl(item.url)" class="ant-dropdown-link">
           {{ item.name }}&nbsp;&nbsp;
           <a-icon type="down" v-show="item.children && item.children.length > 0" />
         </a>
         <a-menu slot="overlay">
-          <a-menu-item
-            :key="b"
-            class="px-6 py-3"
-            style="text-align: center"
-            v-for="(con, b) in item.children"
-          >
+          <a-menu-item :key="b" class="px-6 py-3" style="text-align: center" v-for="(con, b) in item.children">
             <a @click="jumUrl(con.url)">{{ con.title }}</a>
           </a-menu-item>
         </a-menu>
@@ -30,11 +20,7 @@
         <template slot="title">
           <span>点击查看购物车！</span>
         </template>
-        <a-icon
-          @click="$router.push('/Cart')"
-          class="baseColor icon-head icon-head-right pointer"
-          type="shopping-cart"
-        />
+        <a-icon @click="$router.push('/Cart')" class="baseColor icon-head icon-head-right pointer" type="shopping-cart" />
       </a-tooltip>
       <router-link tag="span" to="/login">
         <a-icon class="icon-head pointer" style="right: 50px" type="user" />
@@ -74,31 +60,31 @@ export default {
         },
         {
           name: '孵化平台',
-          url: '',
+          url: '/Hatch/Space',
           children: [
             {
               title: '高新众创空间',
-              url: '',
+              url: '/Hatch/Space',
             },
             {
               title: '数字创时代企业孵化器',
-              url: '',
+              url: '/Hatch/Incubator',
             },
             {
               title: '虚拟孵化器',
-              url: '',
+              url: '/Hatch/Fictitious',
             },
             {
               title: '创业导师',
-              url: '',
+              url: '/Hatch/Tutor',
             },
             {
               title: '合作伙伴',
-              url: '',
+              url: '/Hatch/Partner',
             },
             {
               title: '创业服务',
-              url: '',
+              url: '/Hatch/Service',
             },
           ],
         },

src/router/index.js

@@ -3,7 +3,7 @@
  * @email: 18603454788@163.com
  * @Date: 2021-01-13 16:33:32
  * @LastEditors: wally
- * @LastEditTime: 2021-01-14 16:32:22
+ * @LastEditTime: 2021-01-14 17:34:56
  */
 import Vue from 'vue';
 import VueRouter from 'vue-router';
@@ -184,6 +184,45 @@ const routes = [
       },
     ],
   },
+  // 孵化平台
+  {
+    path: '/Hatch/Space',
+    name: 'Hatch',
+    component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/Hatch/Hatch.vue'),
+    children: [
+      {
+        // 高新众创空间
+        path: '/Hatch/Space',
+        name: 'Space',
+        component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/Hatch/Children/Space.vue'),
+      },
+      {
+        path: '/Hatch/Incubator',
+        name: 'Incubator',
+        component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/Hatch/Children/Incubator.vue'),
+      },
+      {
+        path: '/Hatch/Fictitious',
+        name: 'Fictitious',
+        component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/Hatch/Children/Fictitious.vue'),
+      },
+      {
+        path: '/Hatch/Tutor',
+        name: 'Tutor',
+        component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/Hatch/Children/Tutor.vue'),
+      },
+      {
+        path: '/Hatch/Partner',
+        name: 'Partner',
+        component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/Hatch/Children/Partner.vue'),
+      },
+      {
+        path: '/Hatch/Service',
+        name: 'Service',
+        component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/Hatch/Children/Service.vue'),
+      },
+    ],
+  },
 ];
 
 const router = new VueRouter({

src/views/Hatch/Children/Fictitious.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>虚拟孵化器</div>
+</template>
+<script>
+export default {
+  name: 'Fictitious',
+  data() {
+    return {};
+  },
+};
+</script>

src/views/Hatch/Children/Incubator.vue

@@ -0,0 +1,18 @@
+<!--
+ * @Author: wally
+ * @email: 18603454788@163.com
+ * @Date: 2021-01-14 17:34:23
+ * @LastEditors: wally
+ * @LastEditTime: 2021-01-14 17:37:46
+-->
+<template>
+  <div>数智创世代企业孵化器</div>
+</template>
+<script>
+export default {
+  name: 'Incubator',
+  data() {
+    return {};
+  },
+};
+</script>

src/views/Hatch/Children/Partner.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>合作伙伴</div>
+</template>
+<script>
+export default {
+  name: 'Partner',
+  data() {
+    return {};
+  },
+};
+</script>

src/views/Hatch/Children/Service.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>创业服务</div>
+</template>
+<script>
+export default {
+  name: 'Service',
+  data() {
+    return {};
+  },
+};
+</script>

src/views/Hatch/Children/Space.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>高新众创空间</div>
+</template>
+<script>
+export default {
+  name: 'Space',
+  data() {
+    return {};
+  },
+};
+</script>

src/views/Hatch/Children/Tutor.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>创业导师</div>
+</template>
+<script>
+export default {
+  name: 'Tutor',
+  data() {
+    return {};
+  },
+};
+</script>

src/views/Hatch/Hatch.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="inner" style="margin-top: 50px; margin-bottom: 100px">
+    <left-nav style="float: left" />
+    <div style="width: 83%; float: right">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+import LeftNav from './components/LeftNav.vue';
+export default {
+  name: 'Hatch',
+  components: { LeftNav },
+  data() {
+    return {
+      title: '孵化平台',
+      arr: [{ name: '孵化平台', url: '' }],
+    };
+  },
+};
+</script>
+
+<style scoped lang="stylus"></style>

src/views/Hatch/components/LeftNav.vue

@@ -0,0 +1,79 @@
+<!--
+ * @Author: wally
+ * @email: 18603454788@163.com
+ * @Date: 2021-01-13 17:25:56
+ * @LastEditors: wally
+ * @LastEditTime: 2021-01-14 17:42:17
+-->
+<template>
+  <div class="nav-box">
+    <div :class="activeNum === index ? 'nav-box-active' : ''" :key="index" @click="jump(item.url, index)" v-for="(item, index) in list">
+      {{ item.title }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LeftNav',
+  data() {
+    return {
+      str: '导航条',
+      activeNum: 0,
+      list: [
+        {
+          title: '高新众创空间',
+          url: '/Hatch/Space',
+        },
+        {
+          title: '数字创时代企业孵化器',
+          url: '/Hatch/Incubator',
+        },
+        {
+          title: '虚拟孵化器',
+          url: '/Hatch/Fictitious',
+        },
+        {
+          title: '创业导师',
+          url: '/Hatch/Tutor',
+        },
+        {
+          title: '合作伙伴',
+          url: '/Hatch/Partner',
+        },
+        {
+          title: '创业服务',
+          url: '/Hatch/Service',
+        },
+      ],
+    };
+  },
+  created() {
+    if (this.$route.fullPath === '/Hatch/Incubator') {
+      this.activeNum = 1;
+    } else if (this.$route.fullPath === '/Hatch/Fictitious') {
+      this.activeNum = 2;
+    } else if (this.$route.fullPath === '/Hatch/Tutor') {
+      this.activeNum = 3;
+    } else if (this.$route.fullPath === '/Hatch/Partner') {
+      this.activeNum = 4;
+    } else if (this.$route.fullPath === '/Hatch/Service') {
+      this.activeNum = 5;
+    } else {
+      this.activeNum = 0;
+    }
+  },
+  methods: {
+    jump(url, index) {
+      if (this.$route.fullPath === url) {
+        this.$message.success('已在当前界面');
+      } else {
+        this.$router.push(url);
+        this.activeNum = index;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="stylus"></style>