add: register

src/components/layout/LayoutMain.vue

@@ -103,6 +103,10 @@
   body {
     // 打开滚动条固定显示
     overflow-y: scroll;
+
+    &.userLayout {
+      overflow-y: auto;
+    }
   }
 
   .layout {

src/components/layout/UserLayout.vue

@@ -0,0 +1,138 @@
+<template>
+  <div id="userLayout" class="user-layout-wrapper">
+    <div class="container">
+      <div class="top">
+        <div class="header">
+          <a href="/">
+            <img src="~@/assets/logo.svg" class="logo" alt="logo">
+            <span class="title">Ant Design</span>
+          </a>
+        </div>
+        <div class="desc">
+          Ant Design 是西湖区最具影响力的 Web 设计规范
+        </div>
+      </div>
+      <div class="main">
+        <route-view></route-view>
+      </div>
+      <div class="footer">
+        <div class="links">
+          <a href="_self">帮助</a>
+          <a href="_self">隐私</a>
+          <a href="_self">条款</a>
+        </div>
+        <div class="copyright">
+          Copyright &copy; 2018 白鹭学园技术组出品
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import RouteView from "@/components/layout/RouteView"
+
+  export default {
+    name: "UserLayout",
+    components: { RouteView },
+    data () {
+      return {}
+    },
+    mounted () {
+      document.body.classList.add('userLayout')
+    },
+    beforeDestroy () {
+      document.body.classList.remove('userLayout')
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  #userLayout.user-layout-wrapper {
+    height: 100%;
+
+    .container {
+      width: 100%;
+      min-height: 100%;
+      background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
+      background-size: 100%;
+      padding: 110px 0 144px;
+      position: relative;
+
+      a {
+        text-decoration: none;
+      }
+
+      .top {
+        text-align: center;
+
+        .header {
+          height: 44px;
+          line-height: 44px;
+
+          .badge {
+            position: absolute;
+            display: inline-block;
+            line-height: 1;
+            vertical-align: middle;
+            margin-left: -12px;
+            margin-top: -10px;
+            opacity: 0.8;
+          }
+
+          .logo {
+            height: 44px;
+            vertical-align: top;
+            margin-right: 16px;
+            border-style: none;
+          }
+
+          .title {
+            font-size: 33px;
+            color: rgba(0, 0, 0, .85);
+            font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+            font-weight: 600;
+            position: relative;
+            top: 2px;
+          }
+        }
+        .desc {
+          font-size: 14px;
+          color: rgba(0, 0, 0, 0.45);
+          margin-top: 12px;
+          margin-bottom: 40px;
+        }
+      }
+
+      .main {
+        width: 368px;
+        margin: 0 auto;
+      }
+
+      .footer {
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        padding: 0 16px;
+        margin: 48px 0 24px;
+        text-align: center;
+
+        .links {
+          margin-bottom: 8px;
+          font-size: 14px;
+          a {
+            color: rgba(0, 0, 0, 0.45);
+            transition: all 0.3s;
+            &:not(:last-child) {
+              margin-right: 40px;
+            }
+          }
+        }
+        .copyright {
+          color: rgba(0, 0, 0, 0.45);
+          font-size: 14px;
+        }
+      }
+    }
+  }
+</style>

src/permission.js

@@ -8,14 +8,14 @@ import { ACCESS_TOKEN } from "@/store/mutation-types"
 
 NProgress.configure({ showSpinner: false })// NProgress Configuration
 
-const whiteList = ['/login']// no redirect whitelist
+const whiteList = ['/user/login', '/user/register']// no redirect whitelist
 
 router.beforeEach((to, from, next) => {
   NProgress.start() // start progress bar
 
   if (Vue.ls.get(ACCESS_TOKEN)) {
     /* has token */
-    if (to.path === '/login') {
+    if (to.path === '/user/login') {
       next({ path: '/dashboard/workplace' })
       NProgress.done()
     } else {
@@ -28,7 +28,7 @@ router.beforeEach((to, from, next) => {
           })
         }).catch(() => {
           store.dispatch('Logout').then(() => {
-            next({ path: '/login' })
+            next({ path: '/user/login' })
           })
         })
 
@@ -40,7 +40,7 @@ router.beforeEach((to, from, next) => {
     if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
       next()
     } else {
-      next('/login')
+      next('/user/login')
       NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
     }
 

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import Layout from '../components/layout/LayoutView'
 import LayoutBase from '../components/layout/LayoutBaseView'
+import LayoutUser from '@/components/layout/UserLayout'
 
 Vue.use(Router)
 /**
@@ -14,17 +15,31 @@ Vue.use(Router)
 
 export const constantRouterMap = [
   {
-    path: '/login',
-    component: () => import('../views/Login')
+    path: '/user',
+    component: LayoutUser,
+    redirect: '/user/login',
+    hidden: true,
+    children: [
+      {
+        path: 'login',
+        name: 'login',
+        component: () => import(/* webpackChunkName: "user" */ '@/views/Login')
+      },
+      {
+        path: 'register',
+        name: 'register',
+        component: () => import(/* webpackChunkName: "user" */ '@/views/Register')
+      }
+    ]
   },
   {
     path: '/404',
-    component: () => import(/* webpackChunkName: "fail" */ '../views/exception/404')
+    component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
   },
   {
     path: '/',
     component: Layout,
-    redirect: '/login',
+    redirect: { name: 'login' },
     name: 'home',
     hidden: true
   }
@@ -48,20 +63,20 @@ export const asyncRouterMap = [
       {
         path: '/dashboard/analysis',
         name: 'Analysis',
-        component: () => import('../views/dashboard/Analysis'),
+        component: () => import('@/views/dashboard/Analysis'),
         meta: { title: '分析页', hideHeader: true, permission: [ 'dashboard' ] }
       },
       {
         path: '/dashboard/monitor',
         name: 'Monitor',
         hidden: true,
-        component: () => import('../views/dashboard/Monitor'),
+        component: () => import('@/views/dashboard/Monitor'),
         meta: { title: '监控页', hideHeader: true, permission: [ 'dashboard' ] }
       },
       {
         path: '/dashboard/workplace',
         name: 'Workplace',
-        component: () => import('../views/dashboard/Workplace'),
+        component: () => import('@/views/dashboard/Workplace'),
         meta: { title: '工作台', permission: [ 'dashboard' ] }
       }
     ]
@@ -76,19 +91,19 @@ export const asyncRouterMap = [
       {
         path: '/form/base-form',
         name: 'BaseForm',
-        component: () => import('../views/form/BasicForm'),
+        component: () => import('@/views/form/BasicForm'),
         meta: { title: '基础表单', permission: [ 'form' ] }
       },
       {
         path: '/form/step-form',
         name: 'StepForm',
-        component: () => import('../views/form/stepForm/StepForm'),
+        component: () => import('@/views/form/stepForm/StepForm'),
         meta: { title: '分步表单', permission: [ 'form' ] }
       },
       {
         path: '/form/advanced-form',
         name: 'AdvanceForm',
-        component: () => import('../views/form/advancedForm/AdvancedForm'),
+        component: () => import('@/views/form/advancedForm/AdvancedForm'),
         meta: { title: '高级表单', permission: [ 'form' ] }
       }
     ]

src/views/Login.vue

@@ -1,63 +1,48 @@
 <template>
-  <div id="auth">
-    <div class="container">
-      <div class="top">
-        <div class="header">
-          <a href="/">
-            <img src="~@/assets/logo.svg" class="logo" alt="logo">
-            <span class="title">Ant Design</span>
-          </a>
-        </div>
-        <div class="desc">
-          Ant Design 是西湖区最具影响力的 Web 设计规范
-        </div>
-      </div>
-      <div class="main">
-        <a-form ref="formLogin" :autoFormCreate="(form)=>{this.form = form}" id="formLogin">
-
-          <a-tabs 
-            :activeKey="customActiveKey" 
-            :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
-            @change="handleTabClick">
-            <a-tab-pane key="tab1" tab="账号密码登陆">
-
-              <a-form-item
-                fieldDecoratorId="username"
-                :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, { validator: this.handleUsernameOrEmail }], validateTrigger: 'blur'}"
-              >
-                <a-input size="large" type="text" v-model="formLogin.username" placeholder="帐户名或邮箱地址 / admin">
-                  <a-icon slot="prefix" type='user' :style="{ color: 'rgba(0,0,0,.25)' }"/>
-                </a-input>
-              </a-form-item>
-
-              <a-form-item
-                fieldDecoratorId="password"
-                :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}">
-                <a-input size="large" type="password" v-model="formLogin.password" placeholder="密码 / admin">
-                  <a-icon slot="prefix" type='lock' :style="{ color: 'rgba(0,0,0,.25)' }"/>
-                </a-input>
-              </a-form-item>
-            </a-tab-pane>
-            <a-tab-pane key="tab2" tab="手机号登陆">
-              <a-form-item
-                fieldDecoratorId="mobile"
-                :fieldDecoratorOptions="{rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }], validateTrigger: 'blur'}">
-                <a-input size="large" type="text" v-model="formLogin.mobile" placeholder="手机号">
-                  <a-icon slot="prefix" type='mobile' :style="{ color: 'rgba(0,0,0,.25)' }"/>
-                </a-input>
-              </a-form-item>
-
-              <a-row :gutter="16">
-                <a-col class="gutter-row" :span="16">
-                  <a-form-item
-                    fieldDecoratorId="captcha"
-                    :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}">
-                    <a-input size="large" type="text" v-model="formLogin.captcha" placeholder="验证码">
-                      <a-icon slot="prefix" type='mail' :style="{ color: 'rgba(0,0,0,.25)' }"/>
-                    </a-input>
-                  </a-form-item>
-                </a-col>
-                <a-col class="gutter-row" :span="8">
+  <a-form class="user-layout-login" ref="formLogin" :autoFormCreate="(form)=>{this.form = form}" id="formLogin">
+    <a-tabs
+      :activeKey="customActiveKey"
+      :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
+      @change="handleTabClick">
+      <a-tab-pane key="tab1" tab="账号密码登陆">
+
+        <a-form-item
+          fieldDecoratorId="username"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, { validator: this.handleUsernameOrEmail }], validateTrigger: 'blur'}"
+        >
+          <a-input size="large" type="text" v-model="formLogin.username" placeholder="帐户名或邮箱地址 / admin">
+            <a-icon slot="prefix" type='user' :style="{ color: 'rgba(0,0,0,.25)' }"/>
+          </a-input>
+        </a-form-item>
+
+        <a-form-item
+          fieldDecoratorId="password"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}">
+          <a-input size="large" type="password" v-model="formLogin.password" placeholder="密码 / admin">
+            <a-icon slot="prefix" type='lock' :style="{ color: 'rgba(0,0,0,.25)' }"/>
+          </a-input>
+        </a-form-item>
+      </a-tab-pane>
+      <a-tab-pane key="tab2" tab="手机号登陆">
+        <a-form-item
+          fieldDecoratorId="mobile"
+          :fieldDecoratorOptions="{rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }], validateTrigger: 'blur'}">
+          <a-input size="large" type="text" v-model="formLogin.mobile" placeholder="手机号">
+            <a-icon slot="prefix" type='mobile' :style="{ color: 'rgba(0,0,0,.25)' }"/>
+          </a-input>
+        </a-form-item>
+
+        <a-row :gutter="16">
+          <a-col class="gutter-row" :span="16">
+            <a-form-item
+              fieldDecoratorId="captcha"
+              :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}">
+              <a-input size="large" type="text" v-model="formLogin.captcha" placeholder="验证码">
+                <a-icon slot="prefix" type='mail' :style="{ color: 'rgba(0,0,0,.25)' }"/>
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col class="gutter-row" :span="8">
                   <span class="ivu-input-prefix">
                     <a-button
                       class="getCaptcha"
@@ -65,53 +50,49 @@
                       @click.stop.prevent="getCaptcha"
                       v-text="!state.smsSendBtn&&'获取验证码'||(state.time+' s')"></a-button>
                   </span>
-                </a-col>
-              </a-row>
-
-            </a-tab-pane>
-          </a-tabs>
-
-          <a-form-item>
-            <a-checkbox v-model="formLogin.rememberMe">自动登陆</a-checkbox>
-            <router-link :to="{ name: 'recover', params: { user: 'aaa'} }" class="forge-password" style="float: right;">
-              忘记密码
-            </router-link>
-          </a-form-item>
-
-          <a-form-item style="margin-top:24px">
-            <a-button
-              size="large"
-              type="primary"
-              htmlType="submit"
-              class="login-button"
-              :loading="loginBtn"
-              @click.stop.prevent="handleSubmit"
-              :disabled="loginBtn">确定
-            </a-button>
-          </a-form-item>
-
-        </a-form>
-      </div>
-      <div class="footer">
-        <div class="links">
-          <a href="_self">帮助</a>
-          <a href="_self">隐私</a>
-          <a href="_self">条款</a>
-        </div>
-        <div class="copyright">
-          Copyright &copy; 2018 白鹭学园技术组出品
-        </div>
-      </div>
+          </a-col>
+        </a-row>
+
+      </a-tab-pane>
+    </a-tabs>
+
+    <a-form-item>
+      <a-checkbox v-model="formLogin.rememberMe">自动登陆</a-checkbox>
+      <router-link :to="{ name: 'recover', params: { user: 'aaa'} }" class="forge-password" style="float: right;">
+        忘记密码
+      </router-link>
+    </a-form-item>
+
+    <a-form-item style="margin-top:24px">
+      <a-button
+        size="large"
+        type="primary"
+        htmlType="submit"
+        class="login-button"
+        :loading="loginBtn"
+        @click.stop.prevent="handleSubmit"
+        :disabled="loginBtn">确定
+      </a-button>
+    </a-form-item>
+
+    <div class="user-login-other">
+      <span>其他登陆方式</span>
+      <a><a-icon class="item-icon" type="alipay-circle"></a-icon></a>
+      <a><a-icon class="item-icon" type="taobao-circle"></a-icon></a>
+      <a><a-icon class="item-icon" type="weibo-circle"></a-icon></a>
+      <router-link class="register" :to="{ name: 'register' }">
+        注册账户
+      </router-link>
     </div>
-  </div>
+
+  </a-form>
 </template>
 
 <script>
   import md5 from "md5"
-  import api from '../api/'
+  import api from '@/api/'
   import { mapActions } from "vuex"
-
-  import { timeFix } from "../utils/util"
+  import { timeFix } from "@/utils/util"
 
   export default {
     data () {
@@ -253,116 +234,54 @@
 
 <style lang="scss" scoped>
 
-  #auth {
-    height: 100%;
+  .user-layout-login {
+    label {
+      font-size: 14px;
+    }
 
-    .container {
+/*    .ivu-input-prefix {
+      left: 12px;
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.25);
+    }*/
+    .getCaptcha {
+      display: block;
       width: 100%;
-      min-height: 100%;
-      background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
-      background-size: 100%;
-      padding: 110px 0 144px;
-      position: relative;
-
-      a {
-        text-decoration: none;
-      }
-
-      .top {
-        text-align: center;
-
-        .header {
-          height: 44px;
-          line-height: 44px;
-
-          .badge {
-            position: absolute;
-            display: inline-block;
-            line-height: 1;
-            vertical-align: middle;
-            margin-left: -12px;
-            margin-top: -10px;
-            opacity: 0.8;
-          }
-
-          .logo {
-            height: 44px;
-            vertical-align: top;
-            margin-right: 16px;
-            border-style: none;
-          }
-
-          .title {
-            font-size: 33px;
-            color: rgba(0, 0, 0, .85);
-            font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-            font-weight: 600;
-            position: relative;
-            top: 2px;
-          }
-        }
-        .desc {
-          font-size: 14px;
-          color: rgba(0, 0, 0, 0.45);
-          margin-top: 12px;
-          margin-bottom: 40px;
-        }
-      }
-
-      .main {
-        width: 368px;
-        margin: 0 auto;
-
-        label {
-          font-size: 14px;
-        }
+      height: 40px;
+    }
 
-        .ivu-input-prefix {
-          left: 12px;
-          font-size: 14px;
-          color: rgba(0, 0, 0, 0.25);
-        }
-        .getCaptcha {
-          display: block;
-          width: 100%;
-          height: 40px;
-        }
+    .forge-password {
+      font-size: 14px;
+    }
+    button.login-button {
+      padding: 0 15px;
+      font-size: 16px;
+      height: 40px;
+      width: 100%;
+    }
 
-        .forge-password {
-          font-size: 14px;
-        }
-        button.login-button {
-          padding: 0 15px;
-          font-size: 16px;
-          height: 40px;
-          width: 100%;
+    .user-login-other {
+      text-align: left;
+      margin-top: 24px;
+      line-height: 22px;
+
+      .item-icon {
+        font-size: 24px;
+        color: rgba(0,0,0,.2);
+        margin-left: 16px;
+        vertical-align: middle;
+        cursor: pointer;
+        transition: color .3s;
+
+        &:hover {
+          color: #1890ff;
         }
       }
 
-      .footer {
-        position: absolute;
-        width: 100%;
-        bottom: 0;
-        padding: 0 16px;
-        margin: 48px 0 24px;
-        text-align: center;
-
-        .links {
-          margin-bottom: 8px;
-          font-size: 14px;
-          a {
-            color: rgba(0, 0, 0, 0.45);
-            transition: all 0.3s;
-            &:not(:last-child) {
-              margin-right: 40px;
-            }
-          }
-        }
-        .copyright {
-          color: rgba(0, 0, 0, 0.45);
-          font-size: 14px;
-        }
+      .register {
+        float: right;
       }
     }
   }
+
 </style>

src/views/Register.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="user-layout-register">
+    <h3><span>注册</span></h3>
+    <a-form ref="formRegister" :autoFormCreate="(form)=>{this.form = form}" id="formRegister">
+      <a-form-item
+        fieldDecoratorId="email"
+        :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入邮箱地址' }], validateTrigger: 'blur'}">
+
+        <a-input size="large" type="text" placeholder="邮箱"></a-input>
+      </a-form-item>
+
+      <a-form-item
+        fieldDecoratorId="password"
+        :fieldDecoratorOptions="{rules: [{ required: true, message: '至少6位密码，区分大小写' }], validateTrigger: 'blur'}">
+
+        <a-input size="large" type="password" placeholder="至少6位密码，区分大小写"></a-input>
+      </a-form-item>
+
+      <a-form-item
+        fieldDecoratorId="password2"
+        :fieldDecoratorOptions="{rules: [{ required: true, message: '至少6位密码，区分大小写' }], validateTrigger: 'blur'}">
+
+        <a-input size="large" type="password" placeholder="确认密码"></a-input>
+      </a-form-item>
+
+      <a-form-item
+        fieldDecoratorId="mobile"
+        :fieldDecoratorOptions="{rules: [{ required: true, message: '手机号' }], validateTrigger: 'blur'}">
+
+        <a-input-group size="large" compact>
+          <a-select style="width: 20%" size="large" defaultValue="+86">
+            <a-select-option value="+86">+86</a-select-option>
+            <a-select-option value="+87">+87</a-select-option>
+          </a-select>
+          <a-input style="width: 80%" placeholder="11 位手机号"></a-input>
+        </a-input-group>
+      </a-form-item>
+
+      <a-row :gutter="16">
+        <a-col class="gutter-row" :span="16">
+          <a-form-item
+            fieldDecoratorId="captcha"
+            :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}">
+            <a-input size="large" type="text" placeholder="验证码">
+              <a-icon slot="prefix" type='mail' :style="{ color: 'rgba(0,0,0,.25)' }"/>
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col class="gutter-row" :span="8">
+          <span class="ivu-input-prefix">
+            <a-button
+              class="getCaptcha"
+              size="large"
+              :disabled="state.smsSendBtn"
+              @click.stop.prevent="getCaptcha"
+              v-text="!state.smsSendBtn && '获取验证码'||(state.time+' s')"></a-button>
+          </span>
+        </a-col>
+      </a-row>
+
+      <a-form-item>
+        <a-button
+          size="large"
+          type="primary"
+          htmlType="submit"
+          class="register-button"
+          :loading="registerBtn"
+          @click.stop.prevent="handleSubmit"
+          :disabled="registerBtn">注册
+        </a-button>
+        <router-link class="login" :to="{ name: 'login' }">使用已有账户登录</router-link>
+      </a-form-item>
+
+    </a-form>
+  </div>
+</template>
+
+<script>
+  import api from '@/api/'
+  import UserLayout from '@/components/layout/UserLayout'
+
+  export default {
+    name: "Register",
+    components: {
+      UserLayout
+    },
+    data () {
+      return {
+        form: null,
+
+        state: {
+          time: 60,
+          smsSendBtn: false,
+        },
+        registerBtn: false
+      }
+    },
+    methods: {
+
+      handleSubmit () {
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            console.log('form data', values)
+          }
+        })
+      },
+
+      getCaptcha (e) {
+        e.preventDefault()
+        let that = this
+
+        this.form.validateFields([ 'mobile' ], { force: true },
+          (err) => {
+            if (!err) {
+              this.state.smsSendBtn = true;
+
+              let interval = window.setInterval(() => {
+                if (that.state.time-- <= 0) {
+                  that.state.time = 60;
+                  that.state.smsSendBtn = false;
+                  window.clearInterval(interval);
+                }
+              }, 1000);
+
+              const hide = this.$message.loading('验证码发送中..', 0);
+              this.$http.post(api.SendSms, { mobile: that.formRegister.mobile })
+                .then(res => {
+                  setTimeout(hide, 2500);
+                  this.$notification[ 'success' ]({
+                    message: '提示',
+                    description: '验证码获取成功，您的验证码为：' + res.result.captcha,
+                    duration: 8
+                  })
+                })
+                .catch(err => {
+                  setTimeout(hide, 1);
+                  clearInterval(interval);
+                  that.state.time = 60;
+                  that.state.smsSendBtn = false;
+                  this.requestFailed(err);
+                });
+            }
+          }
+        );
+      },
+      requestFailed (err) {
+        this.$notification[ 'error' ]({
+          message: '错误',
+          description: ((err.response || {}).data || {}).message || "请求出现错误，请稍后再试",
+          duration: 4,
+        });
+        this.registerBtn = false;
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .user-layout-register {
+
+    &> h3 {
+      font-size: 16px;
+      margin-bottom: 20px;
+    }
+
+    .getCaptcha {
+      display: block;
+      width: 100%;
+      height: 40px;
+    }
+
+    .register-button {
+      width: 50%;
+    }
+
+    .login {
+      float: right;
+      line-height: 40px;
+    }
+  }
+</style>