登录页移动端适配

页面最右边的空白条条已完善

jero-web/src/views/user/Login.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="main">
-    <a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
+    <a-form v-if="!mobile" :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
       <div class="user-box">
         <span class="title">用户登录</span>
         <a-row>
@@ -91,6 +91,88 @@
         </a-row>
       </div>
     </a-form>
+    <a-form v-if="mobile" :form="form" class="user-layout-login user-layout-login-mobile" ref="formLogin" id="formLogin">
+      <div class="user-box user-box-mobile">
+        <!--<span class="title">用户登录</span>-->
+        <a-row>
+          <a-col :span="24">
+            <a-form-item>
+              <a-input
+                size="large"
+                v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
+                type="text"
+                placeholder="请输入帐号">
+                <a-icon slot="prefix" type="user" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
+              </a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="24">
+            <a-form-item>
+              <a-input
+                v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules,validateTrigger: 'blur'}]"
+                size="large"
+                type="password"
+                autocomplete="false"
+                placeholder="请输入密码"
+              >
+                <a-icon slot="prefix" type="lock" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
+              </a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="14">
+            <a-form-item>
+              <a-input
+                v-decorator="['inputCode',validatorRules.inputCode]"
+                size="large"
+                type="text"
+                @change="inputCodeChange"
+                placeholder="请输入验证码">
+                <a-icon slot="prefix" type="safety" :style="{ color: '#B3B7C2',fontSize:'20px'}"/>
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :span="10" style="text-align: right">
+            <img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode"/>
+            <img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="10">
+            <a-form-item>
+              <a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]">自动登录</a-checkbox>
+            </a-form-item>
+          </a-col>
+          <a-col :span="4"></a-col>
+          <a-col :span="9" style="text-align: right;color: #1891FF;">
+            <a-form-item>
+              <router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
+                忘记密码
+              </router-link>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row class="login-btn">
+          <a-col :span="24">
+            <a-form-item>
+              <a-button
+                block
+                size="large"
+                type="primary"
+                htmlType="submit"
+                :loading="loginBtn"
+                @click.stop.prevent="handleSubmit"
+                :disabled="loginBtn">
+                {{ loginBtn ? "登录中" : "登录" }}
+              </a-button>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </div>
+    </a-form>
   </div>
 </template>
 <script>
@@ -106,6 +188,7 @@
     data () {
       return {
         loginBtn: false,
+        mobile:isMobile(),
         // login type: 0 email, 1 username, 2 telephone
         loginType: 0,
         stepCaptchaVisible: false,
@@ -280,6 +363,30 @@
       },
     }
   }
+  // 判断当前设备
+  function isMobile() {
+    var userAgentInfo = navigator.userAgent;
+
+    var mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
+
+    var mobile_flag = false;
+
+    //根据userAgent判断是否是手机
+    for (var v = 0; v < mobileAgents.length; v++) {
+      if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
+        mobile_flag = true;
+        break;
+      }
+    }
+    var screen_width = window.screen.width;
+    var screen_height = window.screen.height;
+
+    //根据屏幕分辨率判断是否是手机
+    if (screen_width < 500 && screen_height < 800) {
+      mobile_flag = true;
+    }
+    return mobile_flag;
+  }
 </script>
 
 <style lang="less" scoped>
@@ -290,6 +397,7 @@
     margin-bottom: 4%;
   }
   .main{
+    height: 100%;
     .user-layout-login{
       z-index: 99;
       width: 24%;
@@ -298,16 +406,10 @@
       min-width: 332px;
       min-height: 460px;
       background: #fff;
-      -webkit-border-radius: 20px;
-      -moz-border-radius: 20px;
       border-radius: 20px;
       position: absolute;
       right: 8%;
       top: 50%;
-      -webkit-transform: translateY(-50%);
-      -moz-transform: translateY(-50%);
-      -ms-transform: translateY(-50%);
-      -o-transform: translateY(-50%);
       transform: translateY(-50%);
       .user-box{
         width: 100%;
@@ -330,13 +432,17 @@
         }
       }
     }
-  }
-
-  @media all and (max-width:600px){ // 分辨率<=600px
-    .user-layout-login{
-      top: 50% !important;
-      left: 50% !important;
-      transform: translate(-50%,-50%) !important;
+    .user-layout-login-mobile{
+      right: 0;
+      width: 100%;
+      margin-top: 15%;
+      box-sizing: border-box;
+      background: transparent;
+      padding: 4rem 2rem 6rem 2rem;
+      min-width: 0;
+      .ant-row{
+        margin-bottom: 0;
+      }
     }
   }
 </style>