增加登录页

src/App.vue

@@ -1,9 +1,6 @@
 <template>
   <div id="app">
-    <!--<img src="./assets/logo.png">-->
-    <gloabl-layout>
-      <router-view/>
-    </gloabl-layout>
+    <router-view/>
   </div>
 </template>
 

src/components/layout/GloablLayout.vue

@@ -61,7 +61,7 @@ export default {
     }
   },
   beforeCreate () {
-    menuData = this.$router.options.routes
+    menuData = this.$router.options.routes.find((item) => item.path === '/').children
   }
 }
 </script>

src/components/layout/HeaderlAvatar.vue

@@ -15,8 +15,10 @@
       </a-menu-item>
       <a-menu-divider />
       <a-menu-item>
-        <a-icon type="poweroff" />
-        <span>退出登录</span>
+        <router-link to="/login">
+          <a-icon type="poweroff" />
+          <span>退出登录</span>
+        </router-link>
       </a-menu-item>
     </a-menu>
   </a-dropdown>

src/components/layout/MenuView.vue

@@ -0,0 +1,17 @@
+<template>
+  <gloabl-layout>
+    <router-view />
+  </gloabl-layout>
+</template>
+
+<script>
+import GloablLayout from './GloablLayout'
+export default {
+  name: 'MenuView',
+  components: {GloablLayout}
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/login/Login.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="container">
+    <div class="content">
+      <div class="top">
+        <div class="header">
+          <img alt="logo" class="logo" src="static/img/vue-antd-logo.png" />
+          <span class="title">Vue Antd</span>
+        </div>
+        <div class="desc">Vue Antd 是西湖区最具影响力的 Web 设计规范</div>
+      </div>
+      <div class="login">
+        <a-form @submit="onSubmit">
+          <a-tabs size="large" style="text-align: center">
+            <a-tab-pane tab="账户密码登录" key="1">
+              <a-form-item>
+                <a-input size="large" placeholder="admin/iczer" >
+                  <a-icon slot="prefix" type="user" />
+                </a-input>
+              </a-form-item>
+              <a-form-item>
+                <a-input size="large" placeholder="888888/123456" type="password">
+                  <a-icon slot="prefix" type="lock" />
+                </a-input>
+              </a-form-item>
+            </a-tab-pane>
+            <a-tab-pane tab="手机号登录" key="2">
+              <a-form-item>
+                <a-input size="large" placeholder="mobile number" >
+                  <a-icon slot="prefix" type="mobile" />
+                </a-input>
+              </a-form-item>
+              <a-form-item>
+                <a-row style="margin: 0 -4px">
+                  <a-col :span="16">
+                    <a-input size="large" placeholder="captcha">
+                    <a-icon slot="prefix" type="mail" />
+                  </a-input>
+                  </a-col>
+                  <a-col :span="8" style="padding-left: 4px">
+                    <a-button style="width: 100%" size="large">获取验证码</a-button>
+                  </a-col>
+                </a-row>
+              </a-form-item>
+            </a-tab-pane>
+          </a-tabs>
+          <div>
+            <a-checkbox :checked="true" >自动登录</a-checkbox>
+            <a style="float: right">忘记密码</a>
+          </div>
+          <a-form-item>
+            <a-button style="width: 100%;margin-top: 24px" size="large" htmlType="submit" type="primary">登录</a-button>
+          </a-form-item>
+          <div>
+            其他登录方式
+            <a-icon class="icon" type="alipay-circle" />
+            <a-icon class="icon" type="taobao-circle" />
+            <a-icon class="icon" type="weibo-circle" />
+            <router-link style="float: right" to="/" >注册账户</router-link>
+          </div>
+        </a-form>
+      </div>
+    </div>
+    <gloabl-footer />
+  </div>
+</template>
+
+<script>
+import AForm from 'vue-antd-ui/es/form/Form'
+import ATabs from 'vue-antd-ui/es/tabs'
+import GloablFooter from '../layout/GloablFooter'
+import AFormItem from 'vue-antd-ui/es/form/FormItem'
+import AInput from 'vue-antd-ui/es/input/Input'
+import AIcon from 'vue-antd-ui/es/icon/icon'
+import AInputGroup from 'vue-antd-ui/es/input/Group'
+import AButton from 'vue-antd-ui/es/button/button'
+import ACol from 'vue-antd-ui/es/grid/Col'
+import ACheckbox from 'vue-antd-ui/es/checkbox/Checkbox'
+
+const ATabPane = ATabs.TabPane
+
+export default {
+  name: 'Login',
+  components: {ACheckbox, ACol, AButton, AInputGroup, AIcon, AInput, AFormItem, GloablFooter, ATabPane, ATabs, AForm},
+  methods: {
+    onSubmit (e) {
+      e.preventDefault()
+      console.log('submit')
+      this.$router.push('/')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: auto;
+    background: #f0f2f5 url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg') no-repeat center 110px;
+    background-size: 100%;
+    .content {
+      padding: 32px 0;
+      flex: 1;
+      @media (min-width: 768px){
+        padding: 112px 0 24px;
+      }
+      .top {
+        text-align: center;
+        .header {
+          height: 44px;
+          line-height: 44px;
+          a {
+            text-decoration: none;
+          }
+          .logo {
+            height: 44px;
+            vertical-align: top;
+            margin-right: 16px;
+          }
+          .title {
+            font-size: 33px;
+            color: rgba(0,0,0,.85);
+            font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+            font-weight: 600;
+            position: relative;
+            top: 2px;
+          }
+        }
+        .desc {
+          font-size: 14px;
+          color: rgba(0,0,0,.45);
+          margin-top: 12px;
+          margin-bottom: 40px;
+        }
+      }
+      .login{
+        width: 368px;
+        margin: 0 auto;
+        .icon {
+          font-size: 24px;
+          color: rgba(0, 0, 0, 0.2);
+          margin-left: 16px;
+          vertical-align: middle;
+          cursor: pointer;
+          transition: color 0.3s;
+
+          &:hover {
+            color: #1890ff;
+          }
+        }
+      }
+    }
+  }
+</style>

src/components/menu/menu.js

@@ -51,7 +51,7 @@ export default {
   },
   data () {
     return {
-      rootSubmenuKeys: ['/form', '/list', '/detail', '/exception', '/result'],
+      rootSubmenuKeys: ['/dashboard', '/form', '/list', '/detail', '/exception', '/result'],
       openKeys: [],
       selectedKeys: [],
       cachedOpenKeys: []

src/router/index.js

@@ -7,6 +7,7 @@ import NotPermit from '@/components/exception/403'
 import ServerError from '@/components/exception/500'
 import PageView from '@/components/layout/PageView'
 import RouteView from '@/components/layout/RouteView'
+import MenuView from '@/components/layout/MenuView'
 import BasicForm from '@/components/form/BasicForm'
 import StepForm from '@/components/form/stepForm/StepForm'
 import AdvancedForm from '@/components/form/advancedForm/AdvancedForm'
@@ -20,173 +21,189 @@ import ArticleList from '@/components/list/ArticleList'
 import ApplicationList from '@/components/list/ApplicationList'
 import ProjectList from '@/components/list/ProjectList'
 import WorkPlace from '@/components/dashboard/WorkPlace'
+import Login from '@/components/login/Login'
 
 Vue.use(Router)
 
 export default new Router({
   routes: [
+    {
+      path: '/login',
+      name: '登录页',
+      component: Login,
+      invisible: true
+    },
     {
       path: '/',
-      name: 'dashboard',
-      component: RouteView,
-      icon: 'dashboard',
+      name: 'home',
+      component: MenuView,
+      icon: 'none',
+      invisible: true,
       children: [
-        {
-          path: '/workplace',
-          name: '工作台',
-          component: WorkPlace,
-          alias: '/',
-          icon: 'none'
-        },
         {
           path: '/dashboard',
-          name: '分析页',
-          component: Dashboard,
-          icon: 'none'
-        }
-      ]
-    },
-    {
-      path: '/form',
-      name: '表单页',
-      component: PageView,
-      icon: 'form',
-      children: [
-        {
-          path: '/form/basic',
-          name: '基础表单',
-          component: BasicForm,
-          icon: 'none'
-        },
-        {
-          path: '/form/step',
-          name: '分步表单',
-          component: StepForm,
-          icon: 'none'
-        },
-        {
-          path: '/form/advanced',
-          name: '高级表单',
-          component: AdvancedForm,
-          icon: 'none'
-        }
-      ]
-    },
-    {
-      path: '/list',
-      name: '列表页',
-      component: PageView,
-      icon: 'table',
-      children: [
-        {
-          path: '/list/query',
-          name: '查询表格',
-          component: QueryList,
-          icon: 'none'
-        },
-        {
-          path: '/list/primary',
-          name: '标准列表',
-          component: StandardList,
-          icon: 'none'
-        },
-        {
-          path: '/list/card',
-          name: '卡片列表',
-          component: CardList,
-          icon: 'none'
-        },
-        {
-          path: '/list/search',
-          name: '搜索列表',
-          component: SearchLayout,
-          icon: 'none',
+          name: 'dashboard',
+          component: RouteView,
+          icon: 'dashboard',
           children: [
             {
-              path: '/list/search/article',
-              name: '文章',
-              component: ArticleList,
+              path: '/dashboard/workplace',
+              name: '工作台',
+              component: WorkPlace,
+              alias: '/',
               icon: 'none'
             },
             {
-              path: '/list/search/application',
-              name: '应用',
-              component: ApplicationList,
-              icon: 'none'
-            },
-            {
-              path: '/list/search/project',
-              name: '项目',
-              component: ProjectList,
+              path: '/dashboard/analysis',
+              name: '分析页',
+              component: Dashboard,
               icon: 'none'
             }
           ]
-        }
-      ]
-    },
-    {
-      path: '/detail',
-      name: '详情页',
-      icon: 'profile',
-      component: PageView,
-      children: [
-        {
-          path: '/detail/basic',
-          name: '基础详情页',
-          icon: 'none',
-          component: NotFound
         },
         {
-          path: '/detail/advanced',
-          name: '高级详情页',
-          icon: 'none',
-          component: NotFound
-        }
-      ]
-    },
-    {
-      path: '/result',
-      name: '结果页',
-      icon: 'check-circle-o',
-      component: PageView,
-      children: [
-        {
-          path: '/result/success',
-          name: '成功',
-          icon: 'none',
-          component: Success
+          path: '/form',
+          name: '表单页',
+          component: PageView,
+          icon: 'form',
+          children: [
+            {
+              path: '/form/basic',
+              name: '基础表单',
+              component: BasicForm,
+              icon: 'none'
+            },
+            {
+              path: '/form/step',
+              name: '分步表单',
+              component: StepForm,
+              icon: 'none'
+            },
+            {
+              path: '/form/advanced',
+              name: '高级表单',
+              component: AdvancedForm,
+              icon: 'none'
+            }
+          ]
         },
         {
-          path: '/result/error',
-          name: '失败',
-          icon: 'none',
-          component: Error
-        }
-      ]
-    },
-    {
-      path: '/exception',
-      name: '异常页',
-      icon: 'warning',
-      component: Exception,
-      children: [
-        {
-          path: '/exception/404',
-          name: '404',
-          icon: 'none',
-          component: NotFound
+          path: '/list',
+          name: '列表页',
+          component: PageView,
+          icon: 'table',
+          children: [
+            {
+              path: '/list/query',
+              name: '查询表格',
+              component: QueryList,
+              icon: 'none'
+            },
+            {
+              path: '/list/primary',
+              name: '标准列表',
+              component: StandardList,
+              icon: 'none'
+            },
+            {
+              path: '/list/card',
+              name: '卡片列表',
+              component: CardList,
+              icon: 'none'
+            },
+            {
+              path: '/list/search',
+              name: '搜索列表',
+              component: SearchLayout,
+              icon: 'none',
+              children: [
+                {
+                  path: '/list/search/article',
+                  name: '文章',
+                  component: ArticleList,
+                  icon: 'none'
+                },
+                {
+                  path: '/list/search/application',
+                  name: '应用',
+                  component: ApplicationList,
+                  icon: 'none'
+                },
+                {
+                  path: '/list/search/project',
+                  name: '项目',
+                  component: ProjectList,
+                  icon: 'none'
+                }
+              ]
+            }
+          ]
         },
         {
-          path: '/exception/403',
-          name: '403',
-          icon: 'none',
-          component: NotPermit
+          path: '/detail',
+          name: '详情页',
+          icon: 'profile',
+          component: PageView,
+          children: [
+            {
+              path: '/detail/basic',
+              name: '基础详情页',
+              icon: 'none',
+              component: NotFound
+            },
+            {
+              path: '/detail/advanced',
+              name: '高级详情页',
+              icon: 'none',
+              component: NotFound
+            }
+          ]
         },
         {
-          path: '/exception/500',
-          name: '500',
-          icon: 'none',
-          component: ServerError
+          path: '/result',
+          name: '结果页',
+          icon: 'check-circle-o',
+          component: PageView,
+          children: [
+            {
+              path: '/result/success',
+              name: '成功',
+              icon: 'none',
+              component: Success
+            },
+            {
+              path: '/result/error',
+              name: '失败',
+              icon: 'none',
+              component: Error
+            }
+          ]
+        },
+        {
+          path: '/exception',
+          name: '异常页',
+          icon: 'warning',
+          component: Exception,
+          children: [
+            {
+              path: '/exception/404',
+              name: '404',
+              icon: 'none',
+              component: NotFound
+            },
+            {
+              path: '/exception/403',
+              name: '403',
+              icon: 'none',
+              component: NotPermit
+            },
+            {
+              path: '/exception/500',
+              name: '500',
+              icon: 'none',
+              component: ServerError
+            }
+          ]
         }
       ]
     }