优化登录页面为响应式,登录页兼容下手机端

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! ! !'

src/lang/zh.js

@@ -76,6 +76,7 @@ export default {
     logIn: '登录',
     username: '账号',
     password: '密码',
+    captchaCode: '验证码',
     any: '随便填',
     thirdparty: '第三方登录',
     thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！'

src/views/login/index.vue

@@ -1,7 +1,19 @@
 <template>
   <div class="login-container">
-
+    <el-row :gutter="10">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
+      <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"
+          label-position="left">
 
           <div class="title-container">
             <h3 class="title">{{ $t('login.title') }}</h3>
@@ -10,35 +22,71 @@
 
           <el-form-item prop="username">
             <span class="svg-container svg-container_login">
-          <svg-icon icon-class="user" />
+              <svg-icon icon-class="user"/>
             </span>
             <el-input
               v-model="loginForm.username"
               :placeholder="$t('login.username')"
               name="username"
               type="text"
-          auto-complete="on"
+              auto-complete="on"/>
-        />
           </el-form-item>
 
           <el-form-item prop="password">
             <span class="svg-container">
-          <svg-icon icon-class="password" />
+              <svg-icon icon-class="password"/>
             </span>
             <el-input
               :type="passwordType"
               v-model="loginForm.password"
               :placeholder="$t('login.password')"
               name="password"
-          auto-complete="on"
+              auto-complete="on"/>
-          @keyup.enter.native="handleLogin" />
             <span class="show-pwd" @click="showPwd">
-          <svg-icon icon-class="eye" />
+              <svg-icon icon-class="eye"/>
             </span>
           </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-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>
@@ -47,16 +95,30 @@
                 <span style="margin-right:18px;">{{ $t('login.username') }} : editor</span>
                 <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
               </div>
-
+            </el-col>
-      <el-button class="thirdparty-button" type="primary" @click="showDialog=true">{{ $t('login.thirdparty') }}</el-button>
+            <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 }],
+        username: [
-        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+          { 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;
+  $bg: #283443;
-  $light_gray:#eee;
+  $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,20 +271,23 @@ export default {
 </style>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-$bg:#2d3a4b;
+  $bg: #2d3a4b;
-$dark_gray:#889aa4;
+  $dark_gray: #889aa4;
-$light_gray:#eee;
+  $light_gray: #eee;
 
-.login-container {
+  .captcha_img {
+    width: 100%;
+    height: 49px;
+    max-height: 49px;
+    vertical-align: middle;
+  }
+
+  .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;
     }
@@ -252,6 +327,7 @@ $light_gray:#eee;
         right: 0px;
       }
     }
+
     .show-pwd {
       position: absolute;
       right: 10px;
@@ -261,10 +337,5 @@ $light_gray:#eee;
       cursor: pointer;
       user-select: none;
     }
-  .thirdparty-button {
-    position: absolute;
-    right: 35px;
-    bottom: 28px;
   }
-}
 </style>