From 1e09d7d3974100a856e96bbd8d501576d97b0e1e Mon Sep 17 00:00:00 2001
From: VinceJins <jingjunye@outlook.com>
Date: Sat, 21 Dec 2019 23:15:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E4=BA=86=E5=AE=98=E7=BD=91?=
 =?UTF-8?q?=E4=B8=BB=E8=A6=81=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/example.vue                | 44 ++++++++++++++++++++
 src/router/modules/root.js            | 37 +++++++++++++----
 src/views/Home.vue                    | 58 ++++++++++++++++++---------
 src/views/account/console/index.vue   | 13 ++++++
 src/views/account/login.vue           | 28 ++++++++++++-
 src/views/common/enterprise/index.vue | 13 ++++++
 src/views/common/proposal/index.vue   | 13 ++++++
 src/views/common/sources/index.vue    | 13 ++++++
 8 files changed, 191 insertions(+), 28 deletions(-)
 create mode 100644 src/layout/example.vue
 create mode 100644 src/views/account/console/index.vue
 create mode 100644 src/views/common/enterprise/index.vue
 create mode 100644 src/views/common/proposal/index.vue
 create mode 100644 src/views/common/sources/index.vue

diff --git a/src/layout/example.vue b/src/layout/example.vue
new file mode 100644
index 0000000..ab3a7d8
--- /dev/null
+++ b/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>
diff --git a/src/router/modules/root.js b/src/router/modules/root.js
index 780d155..7dfc8ed 100644
--- a/src/router/modules/root.js
+++ b/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')
+            }
+        ]
     }
 ]
diff --git a/src/views/Home.vue b/src/views/Home.vue
index be8830a..b72e58f 100644
--- a/src/views/Home.vue
+++ b/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;
diff --git a/src/views/account/console/index.vue b/src/views/account/console/index.vue
new file mode 100644
index 0000000..97593ab
--- /dev/null
+++ b/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>
diff --git a/src/views/account/login.vue b/src/views/account/login.vue
index d53bec6..723fce0 100644
--- a/src/views/account/login.vue
+++ b/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>
diff --git a/src/views/common/enterprise/index.vue b/src/views/common/enterprise/index.vue
new file mode 100644
index 0000000..8355127
--- /dev/null
+++ b/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>
diff --git a/src/views/common/proposal/index.vue b/src/views/common/proposal/index.vue
new file mode 100644
index 0000000..63df9b3
--- /dev/null
+++ b/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>
diff --git a/src/views/common/sources/index.vue b/src/views/common/sources/index.vue
new file mode 100644
index 0000000..a4ea225
--- /dev/null
+++ b/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>