完善了官网主要结构

src/layout/example.vue

@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <div id="nav">
+            <RouterLink to="/example/sprite">sprite精灵图</RouterLink>
+            <RouterLink to="/example/svgicon">svg icon</RouterLink>
+            <RouterLink to="/example/globalComponent">全局组件</RouterLink>
+            <RouterLink to="/example/axios">axios</RouterLink>
+            <RouterLink to="/example/cookie">cookie</RouterLink>
+            <RouterLink to="/example/meta">meta</RouterLink>
+            <RouterLink to="/example/vuex">vuex</RouterLink>
+            <RouterLink to="/example/component">组件</RouterLink>
+            <RouterLink :to="{name:'exampleParams',params:{test:'123'}}">路由params</RouterLink>
+            <RouterLink :to="{path:'/example/query',query:{test:'123'}}">路由query</RouterLink>
+            <RouterLink to="/example/reload">刷新当前页面</RouterLink>
+            <RouterLink to="/example/permission/router">router鉴权</RouterLink>
+            <RouterLink to="/example/permission/js">js鉴权</RouterLink>
+            <RouterLink to="/example/user">基本操作</RouterLink>
+        </div>
+        <RouterView />
+    </div>
+</template>
+
+<style lang="scss" scoped>
+#nav {
+    margin-bottom: 10px;
+    a {
+        text-decoration: none;
+        font-size: 14px;
+        &::after {
+            content: '|';
+            margin: 0 10px;
+            font-weight: normal;
+            font-size: 14px;
+        }
+        &:last-child::after {
+            content: none;
+        }
+        &.router-link-active {
+            font-weight: bold;
+            font-size: 18px;
+        }
+    }
+}
+</style>

src/router/modules/root.js

@@ -1,13 +1,34 @@
 export default [
     {
         path: '/',
-        meta: {
-            requireLogin: false
-        },
-        component: () => import(/* webpackChunkName: 'root' */ '@/views/Home.vue')
-    },
-    {
-        path: '/login',
-        component: () => import(/* webpackChunkName: 'root' */ '@/views/design/login.vue')
+        meta: { requireLogin: false },
+        component: () => import(/* webpackChunkName: 'root' */ '@/views/Home.vue'),
+        children: [
+            {
+                path: '/login',
+                meta: { requireLogin: false },
+                component: () => import(/* webpackChunkName: 'root' */ '@/views/account/login.vue')
+            },
+            {
+                path: '/enterprise',
+                meta: { requireLogin: false },
+                component: () => import(/* webpackChunkName: 'root' */ '@/views/common/enterprise/index.vue')
+            },
+            {
+                path: '/sources',
+                meta: { requireLogin: false },
+                component: () => import(/* webpackChunkName: 'root' */ '@/views/common/sources/index.vue')
+            },
+            {
+                path: '/proposal',
+                meta: { requireLogin: false },
+                component: () => import(/* webpackChunkName: 'root' */ '@/views/common/proposal/index.vue')
+            },
+            {
+                path: '/console',
+                meta: { requireLogin: true },
+                component: () => import(/* webpackChunkName: 'root' */ '@/views/account/console/index.vue')
+            }
+        ]
     }
 ]

src/views/Home.vue

@@ -4,15 +4,13 @@
             <el-row>
                 <el-col class="headerCol" :span="3"></el-col>
                 <el-col class="headerCol" :span="18">
-                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect()" text-color="#767677" active-text-color="#1d499e">
+                    <el-menu :default-active="menuIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" text-color="#767677" active-text-color="#1d499e">
                         <div class="headerLogoDiv">
                             <img src="favicon.ico" class="headerLogo"/>
                             <span class="headerLogoTitle">TDUCK CLOUD</span>
                         </div>
-                        <el-menu-item index="enterprise" class="menuItem">企业部署</el-menu-item>
-                        <el-menu-item index="source" class="menuItem">开源版本</el-menu-item>
-                        <el-menu-item index="proposal" class="menuItem">提出建议</el-menu-item>
-                        <el-button class="consoleBtn">控 制 台</el-button>
+                        <el-menu-item  v-for="(item, index) in menuRouters" :key="index" :index="item.routerPath" :route="item.routerPath" class="menuItem">{{item.title}}</el-menu-item>
+                        <el-button class="consoleBtn" @click="$router.push({path:'/console'})">控 制 台</el-button>
                     </el-menu>
                 </el-col>
                 <el-col class="headerCol" :span="3"></el-col>
@@ -20,7 +18,13 @@
         </div>
         <div class="headerBody">
             <div class="indexBody">
-                <router-view></router-view>
+                <el-row>
+                    <el-col class="bodyCol" :span="3"></el-col>
+                    <el-col class="bodyCol" :span="18">
+                        <router-view></router-view>
+                    </el-col>
+                    <el-col class="bodyCol" :span="3"></el-col>
+                </el-row>
             </div>
             <div class="footerDiv">
                 关于我们
@@ -29,30 +33,43 @@
     </div>
 </template>
 <script>
-import store from '@/store/index.js'
 export default {
-    computed: {
-        getStore() {
-            return store;
-        }
-    },
     data() {
         return {
-            activeIndex: null
+            menuIndex: null,
+            menuRouters: [
+                {
+                    routerPath: 'enterprise',
+                    title: '企业部署'
+                },
+                {
+                    routerPath: 'sources',
+                    title: '开源版本'
+                },
+                {
+                    routerPath: 'proposal',
+                    title: '提出建议'
+                }
+            ]
         }
     },
     methods: {
-        handleSelect(key, keyPath) {
-            console.log(key, keyPath);
+        handleSelect(index, indexPath) {
+            this.$router.push({ path: '/' + indexPath });
         }
     },
     mounted() {
-        console.info(this.getStore);
+        this.menuIndex = this.$route.path.substring(1);
+    },
+    watch: {
+        $route(to,from) {
+            this.menuIndex = to.path.substring(1);
+        }
     }
 }
 </script>
 <style scoped>
-.headerCol {
+.headerCol, .bodyCol {
     border: solid thin white;
 }
 .headerDiv {
@@ -60,6 +77,11 @@ export default {
     position: fixed;
     width: 100%;
     top: 0px;
+    z-index: 100;
+    border-bottom: solid thin #E6E6E6;
+}
+.headerDiv .headerCol .el-menu--horizontal {
+    border: none;
 }
 .headerLogo {
     float: left;
@@ -89,12 +111,12 @@ export default {
 }
 .consoleBtn:focus, .consoleBtn:hover {
     border-color: #1d499e;
+    color: #1d499e;
 }
 .headerBody {
     padding-top: 113px;
 }
 .footerDiv {
-    border: solid thin black;
     font-size: 14px;
     color: white;
     text-align: center;

src/views/account/console/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div id="console" style="height:690px;/*开发时请将此样式移除*/">
+        控制台
+    </div>
+</template>
+<script>
+export default {
+    name: 'console',
+    data() {
+        return { }
+    }
+}
+</script>

src/views/account/login.vue

@@ -1,6 +1,21 @@
 <template>
     <div id="login">
-
+        <el-row class="loginBody">
+            <el-col :span="12" style="border:solid thin black;">
+                <img class="loginBackImg" src="http://q2fgufcw6.bkt.clouddn.com/login-banner"/>
+            </el-col>
+            <el-col :span="12" style="border:solid thin black;">
+                <el-tabs v-model="activeName">
+                    <el-tab-pane label="微信扫码登录" name="wechat">
+                        微信扫码登录主体
+                    </el-tab-pane>
+                    <el-tab-pane label="账号密码登录" name="account">
+                        账号密码登录主体
+                    </el-tab-pane>
+                </el-tabs>
+                <div style="height:70px;border:solid thin black;"></div><!-- 暂时用来撑下面的高度，等菜🐎把图片确定以后再把此div移除 -->
+            </el-col>
+        </el-row>
     </div>
 </template>
 <script>
@@ -8,8 +23,17 @@ export default {
     name: 'login',
     data() {
         return {
-            
+            activeName: 'wechat'
         }
     }
 }
 </script>
+<style scoped>
+.loginBody {
+    border: solid thin black;
+    margin: 70px 0px 0px 0px;
+}
+.loginBackImg {
+    width: 100%;
+}
+</style>

src/views/common/enterprise/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div id="enterprise" style="height:690px;/*开发时请将此样式移除*/">
+        企业部署
+    </div>
+</template>
+<script>
+export default {
+    name: 'enterprise',
+    data() {
+        return { }
+    }
+}
+</script>

src/views/common/proposal/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div id="proposal" style="height:690px;/*开发时请将此样式移除*/">
+        提出建议
+    </div>
+</template>
+<script>
+export default {
+    name: 'proposal',
+    data() {
+        return { }
+    }
+}
+</script>

src/views/common/sources/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div id="sources" style="height:690px;/*开发时请将此样式移除*/">
+        开源版本
+    </div>
+</template>
+<script>
+export default {
+    name: 'sources',
+    data() {
+        return { }
+    }
+}
+</script>