diff --git a/src/lang/en.js b/src/lang/en.js
index 021bc66c..5afc95a4 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -76,6 +76,7 @@ export default {
     logIn: 'Log in',
     username: 'Username',
     password: 'Password',
+    captchaCode: 'Captcha Code',
     any: 'any',
     thirdparty: 'Or connect with',
     thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !'
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 9da9e9e4..eab85cc4 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -76,6 +76,7 @@ export default {
     logIn: '登录',
     username: '账号',
     password: '密码',
+    captchaCode: '验证码',
     any: '随便填',
     thirdparty: '第三方登录',
     thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！'
diff --git a/src/views/layout/components/TagsView.vue b/src/views/layout/components/TagsView.vue
index 2bb83b41..3ba1382f 100644
--- a/src/views/layout/components/TagsView.vue
+++ b/src/views/layout/components/TagsView.vue
@@ -89,9 +89,10 @@ export default {
     refreshSelectedTag(view) {
       this.$store.dispatch('delCachedView', view).then(() => {
         const { fullPath } = view
-
-        this.$router.replace({
-          path: '/redirect' + fullPath
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
         })
       })
     },
@@ -132,94 +133,94 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.tags-view-container {
-  height: 34px;
-  width: 100%;
-  background: #fff;
-  border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
-  .tags-view-wrapper {
-    .tags-view-item {
-      display: inline-block;
-      position: relative;
-      height: 26px;
-      line-height: 26px;
-      border: 1px solid #d8dce5;
-      color: #495060;
-      background: #fff;
-      padding: 0 8px;
-      font-size: 12px;
-      margin-left: 5px;
-      margin-top: 4px;
-      &:first-of-type {
-        margin-left: 15px;
-      }
-      &:last-of-type {
-        margin-right: 15px;
-      }
-      &.active {
-        background-color: #42b983;
-        color: #fff;
-        border-color: #42b983;
-        &::before {
-          content: '';
-          background: #fff;
-          display: inline-block;
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          position: relative;
-          margin-right: 2px;
+    .tags-view-container {
+        height: 34px;
+        width: 100%;
+        background: #fff;
+        border-bottom: 1px solid #d8dce5;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+        .tags-view-wrapper {
+            .tags-view-item {
+                display: inline-block;
+                position: relative;
+                height: 26px;
+                line-height: 26px;
+                border: 1px solid #d8dce5;
+                color: #495060;
+                background: #fff;
+                padding: 0 8px;
+                font-size: 12px;
+                margin-left: 5px;
+                margin-top: 4px;
+                &:first-of-type {
+                    margin-left: 15px;
+                }
+                &:last-of-type {
+                    margin-right: 15px;
+                }
+                &.active {
+                    background-color: #42b983;
+                    color: #fff;
+                    border-color: #42b983;
+                    &::before {
+                        content: '';
+                        background: #fff;
+                        display: inline-block;
+                        width: 8px;
+                        height: 8px;
+                        border-radius: 50%;
+                        position: relative;
+                        margin-right: 2px;
+                    }
+                }
+            }
+        }
+        .contextmenu {
+            margin: 0;
+            background: #fff;
+            z-index: 100;
+            position: absolute;
+            list-style-type: none;
+            padding: 5px 0;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: 400;
+            color: #333;
+            box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+            li {
+                margin: 0;
+                padding: 7px 16px;
+                cursor: pointer;
+                &:hover {
+                    background: #eee;
+                }
+            }
         }
-      }
     }
-  }
-  .contextmenu {
-    margin: 0;
-    background: #fff;
-    z-index: 100;
-    position: absolute;
-    list-style-type: none;
-    padding: 5px 0;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 400;
-    color: #333;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
-    li {
-      margin: 0;
-      padding: 7px 16px;
-      cursor: pointer;
-      &:hover {
-        background: #eee;
-      }
-    }
-  }
-}
 </style>
 
 <style rel="stylesheet/scss" lang="scss">
-//reset element css of el-icon-close
-.tags-view-wrapper {
-  .tags-view-item {
-    .el-icon-close {
-      width: 16px;
-      height: 16px;
-      vertical-align: 2px;
-      border-radius: 50%;
-      text-align: center;
-      transition: all .3s cubic-bezier(.645, .045, .355, 1);
-      transform-origin: 100% 50%;
-      &:before {
-        transform: scale(.6);
-        display: inline-block;
-        vertical-align: -3px;
-      }
-      &:hover {
-        background-color: #b4bccc;
-        color: #fff;
-      }
+    //reset element css of el-icon-close
+    .tags-view-wrapper {
+        .tags-view-item {
+            .el-icon-close {
+                width: 16px;
+                height: 16px;
+                vertical-align: 2px;
+                border-radius: 50%;
+                text-align: center;
+                transition: all .3s cubic-bezier(.645, .045, .355, 1);
+                transform-origin: 100% 50%;
+                &:before {
+                    transform: scale(.6);
+                    display: inline-block;
+                    vertical-align: -3px;
+                }
+                &:hover {
+                    background-color: #b4bccc;
+                    color: #fff;
+                }
+            }
+        }
     }
-  }
-}
 </style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 5a09702a..b16bb22b 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,62 +1,124 @@
 <template>
   <div class="login-container">
-
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
-
-      <div class="title-container">
-        <h3 class="title">{{ $t('login.title') }}</h3>
-        <lang-select class="set-language"/>
-      </div>
-
-      <el-form-item prop="username">
-        <span class="svg-container svg-container_login">
-          <svg-icon icon-class="user" />
-        </span>
-        <el-input
-          v-model="loginForm.username"
-          :placeholder="$t('login.username')"
-          name="username"
-          type="text"
+    <el-row :gutter="10">
+      <el-col
+        :xs="{span: 20, offset: 2}"
+        :sm="{span: 14, offset: 5}"
+        :md="{span: 12, offset: 6}"
+        :lg="{span: 8, offset: 8}"
+        :xl="{span: 8, offset: 8}">
+        <el-form
+          ref="loginForm"
+          :model="loginForm"
+          :rules="loginRules"
+          class="login-form"
           auto-complete="on"
-        />
-      </el-form-item>
+          label-position="left">
 
-      <el-form-item prop="password">
-        <span class="svg-container">
-          <svg-icon icon-class="password" />
-        </span>
-        <el-input
-          :type="passwordType"
-          v-model="loginForm.password"
-          :placeholder="$t('login.password')"
-          name="password"
-          auto-complete="on"
-          @keyup.enter.native="handleLogin" />
-        <span class="show-pwd" @click="showPwd">
-          <svg-icon icon-class="eye" />
-        </span>
-      </el-form-item>
+          <div class="title-container">
+            <h3 class="title">{{ $t('login.title') }}</h3>
+            <lang-select class="set-language"/>
+          </div>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">{{ $t('login.logIn') }}</el-button>
+          <el-form-item prop="username">
+            <span class="svg-container svg-container_login">
+              <svg-icon icon-class="user"/>
+            </span>
+            <el-input
+              v-model="loginForm.username"
+              :placeholder="$t('login.username')"
+              name="username"
+              type="text"
+              auto-complete="on"/>
+          </el-form-item>
 
-      <div class="tips">
-        <span>{{ $t('login.username') }} : admin</span>
-        <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
-      </div>
-      <div class="tips">
-        <span style="margin-right:18px;">{{ $t('login.username') }} : editor</span>
-        <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
-      </div>
+          <el-form-item prop="password">
+            <span class="svg-container">
+              <svg-icon icon-class="password"/>
+            </span>
+            <el-input
+              :type="passwordType"
+              v-model="loginForm.password"
+              :placeholder="$t('login.password')"
+              name="password"
+              auto-complete="on"/>
+            <span class="show-pwd" @click="showPwd">
+              <svg-icon icon-class="eye"/>
+            </span>
+          </el-form-item>
 
-      <el-button class="thirdparty-button" type="primary" @click="showDialog=true">{{ $t('login.thirdparty') }}</el-button>
-    </el-form>
+          <el-form-item prop="captchaCode">
+            <el-row>
+              <el-col :span="16">
+                <span class="svg-container">
+                  <svg-icon icon-class="chart"/>
+                </span>
+                <el-input
+                  v-model="loginForm.captchaCode"
+                  :placeholder="$t('login.captchaCode')"
+                  type="text"
+                  name="captchaCode"
+                  auto-complete="on"
+                  @keyup.enter.native="handleLogin"/>
+              </el-col>
+              <el-col
+                :span="8"
+                class="captcha_img_box">
+                <img
+                  :src="captchaCode_img_url"
+                  alt="captcha"
+                  class="captcha_img"
+                  @click="refreshCaptchaImg">
+              </el-col>
+            </el-row>
+          </el-form-item>
 
+          <el-button
+            :loading="loading"
+            type="primary"
+            style="width:100%;margin-bottom:30px;"
+            @click.native.prevent="handleLogin">{{ $t('login.logIn') }}
+          </el-button>
+
+          <el-row>
+            <el-col
+              :xs="{span: 24}"
+              :sm="{span: 24}"
+              :md="{span: 16}"
+              :lg="{span: 14}"
+              :xl="{span: 14}">
+              <div class="tips">
+                <span>{{ $t('login.username') }} : admin</span>
+                <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
+              </div>
+              <div class="tips">
+                <span style="margin-right:18px;">{{ $t('login.username') }} : editor</span>
+                <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
+              </div>
+            </el-col>
+            <el-col
+              :xs="{span: 24}"
+              :sm="{span: 24}"
+              :md="{span: 8}"
+              :lg="{span: 10}"
+              :xl="{span: 10}">
+              <el-button
+                class="thirdparty-button"
+                type="primary"
+                style="width:100%;"
+                @click="showDialog=true">{{ $t('login.thirdparty') }}
+              </el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-col>
+    </el-row>
     <el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog" append-to-body>
       {{ $t('login.thirdpartyTips') }}
       <br>
       <br>
       <br>
-      <social-sign />
+      <social-sign/>
     </el-dialog>
 
   </div>
@@ -91,12 +153,18 @@ export default {
         password: '1111111'
       },
       loginRules: {
-        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
-        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+        username: [
+          { required: true, trigger: 'blur', validator: validateUsername }
+        ],
+        password: [
+          { required: true, trigger: 'blur', validator: validatePassword }
+        ]
       },
       passwordType: 'password',
       loading: false,
-      showDialog: false
+      showDialog: false,
+      // captchaCode_img_url: process.env.BASE_API + '/adm/captcha'
+      captchaCode_img_url: 'https://www.oschina.net/action/user/captcha'
     }
   },
   created() {
@@ -106,6 +174,10 @@ export default {
     // window.removeEventListener('hashchange', this.afterQRScan)
   },
   methods: {
+    refreshCaptchaImg() {
+      // this.captchaCode_img_url = process.env.BASE_API + '/adm/captcha' + '?t=' + Math.random()
+      this.captchaCode_img_url = 'https://www.oschina.net/action/user/captcha' + '?t=' + Math.random()
+    },
     showPwd() {
       if (this.passwordType === 'password') {
         this.passwordType = ''
@@ -155,12 +227,12 @@ export default {
   /* 修复input 背景不协调 和光标变色 */
   /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
-  $bg:#283443;
-  $light_gray:#eee;
+  $bg: #283443;
+  $light_gray: #eee;
   $cursor: #fff;
 
   @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
-    .login-container .el-input input{
+    .login-container .el-input input {
       color: $cursor;
       &::first-line {
         color: $light_gray;
@@ -173,7 +245,7 @@ export default {
     .el-input {
       display: inline-block;
       height: 47px;
-      width: 85%;
+      width: 80%; // 这里85%将影响部分错位 设置为80%即可
       input {
         background: transparent;
         border: 0px;
@@ -199,72 +271,71 @@ export default {
 </style>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-$bg:#2d3a4b;
-$dark_gray:#889aa4;
-$light_gray:#eee;
+  $bg: #2d3a4b;
+  $dark_gray: #889aa4;
+  $light_gray: #eee;
 
-.login-container {
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  background-color: $bg;
-  .login-form {
-    position: absolute;
-    left: 0;
-    right: 0;
-    width: 520px;
-    padding: 35px 35px 15px 35px;
-    margin: 120px auto;
+  .captcha_img {
+    width: 100%;
+    height: 49px;
+    max-height: 49px;
+    vertical-align: middle;
   }
-  .tips {
-    font-size: 14px;
-    color: #fff;
-    margin-bottom: 10px;
-    span {
-      &:first-of-type {
-        margin-right: 16px;
+
+  .login-container {
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    background-color: $bg;
+    .login-form {
+      padding: 35px 35px 15px 35px;
+      margin: 120px auto;
+    }
+    .tips {
+      font-size: 14px;
+      color: #fff;
+      margin-bottom: 10px;
+      span {
+        &:first-of-type {
+          margin-right: 16px;
+        }
       }
     }
-  }
-  .svg-container {
-    padding: 6px 5px 6px 15px;
-    color: $dark_gray;
-    vertical-align: middle;
-    width: 30px;
-    display: inline-block;
-    &_login {
-      font-size: 20px;
+    .svg-container {
+      padding: 6px 5px 6px 15px;
+      color: $dark_gray;
+      vertical-align: middle;
+      width: 30px;
+      display: inline-block;
+      &_login {
+        font-size: 20px;
+      }
     }
-  }
-  .title-container {
-    position: relative;
-    .title {
-      font-size: 26px;
-      color: $light_gray;
-      margin: 0px auto 40px auto;
-      text-align: center;
-      font-weight: bold;
+    .title-container {
+      position: relative;
+      .title {
+        font-size: 26px;
+        color: $light_gray;
+        margin: 0px auto 40px auto;
+        text-align: center;
+        font-weight: bold;
+      }
+      .set-language {
+        color: #fff;
+        position: absolute;
+        top: 5px;
+        right: 0px;
+      }
     }
-    .set-language {
-      color: #fff;
+
+    .show-pwd {
       position: absolute;
-      top: 5px;
-      right: 0px;
+      right: 10px;
+      top: 7px;
+      font-size: 16px;
+      color: $dark_gray;
+      cursor: pointer;
+      user-select: none;
     }
   }
-  .show-pwd {
-    position: absolute;
-    right: 10px;
-    top: 7px;
-    font-size: 16px;
-    color: $dark_gray;
-    cursor: pointer;
-    user-select: none;
-  }
-  .thirdparty-button {
-    position: absolute;
-    right: 35px;
-    bottom: 28px;
-  }
-}
 </style>