登录页移动端适配

页面最右边的空白条条已完善
2021-03-29 15:07:13 +08:00
parent 930da4650c
commit d109108355
6 changed files with 220 additions and 90 deletions
@@ -6,12 +6,13 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>JeroBoot平台</title>
-  <link rel="icon" href="<%= BASE_URL %>logo.png">
+  <!--<link rel="icon" href="<%= BASE_URL %>logo.png">-->
  <script src="<%= BASE_URL %>cdn/babel-polyfill/polyfill_7_2_5.js"></script>
  <style>
    html,
    body,
    #app {
+      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
@@ -149,7 +149,8 @@
    @width: 82px;

    .left {
-      width: calc(100% - @width - 8px);
+      //width: calc(100% - @width - 8px);
+      width: calc(100% - @width);
    }

    .right {
@@ -39,4 +39,10 @@
      }
    },
  }
-</script>
+</script>
+<style>
+  .main{
+    height: 100%;
+    overflow: auto;
+  }
+</style>
@@ -1,7 +1,7 @@
 <template>
  <div id="userLayout" :class="['user-layout-wrapper',device]">
-    <div class="container">
-      <div class="top" id="top">
+    <div :class="!mobile ? 'container' : 'container-mobile'">
+      <div class="top" id="top" v-if="!mobile">
        <div class="logo">
          <img id="logo" src="~@/assets/logo.png" alt="">
        </div>
@@ -10,7 +10,16 @@
          <span id="p-company">HEZHONGWEILAI</span>
        </div>
      </div>
-      <div class="illustration">
+      <div v-if="mobile" class="mobile">
+        <div class="logo">
+          <img src="~@/assets/logo.png" alt="">
+        </div>
+        <div class="company">
+          <span>合众未来</span>
+          <span>HEZHONGWEILAI</span>
+        </div>
+      </div>
+      <div class="illustration" v-if="!mobile">
        <img src="@/assets/home.png" alt="">
      </div>
      <route-view></route-view>
@@ -27,7 +36,9 @@
    components: { RouteView },
    mixins: [mixinDevice],
    data () {
-      return {}
+      return {
+        mobile:isMobile() //是否是mobile
+      }
    },
    mounted () {
      document.body.classList.add('userLayout')
@@ -36,114 +47,88 @@
      document.body.classList.remove('userLayout')
    },
  }
-  /*
-  * winWidth: 窗口可视宽度
-  * company: 公司名字盒子
-  * logo：logo图片
-  * cCompany: 中文公司名
-  * pCompany: 拼音公司名
-  * */
-  let winWidth,company,logo,oTop
+  // 判断当前设备
+  function isMobile() {
+    var userAgentInfo = navigator.userAgent;

-  window.onload = ()=>{
-    adaptation()
-  }
-  window.onresize = ()=>{
-    throttling(adaptation(),1000)
-  }
-  // 节流
-  let throttling = (fn, wait) => {
-    let timer;
-    let context, args;
+    var mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];

-    let run = () => {
-      timer=setTimeout(()=>{
-        fn.apply(context,args);
-        clearTimeout(timer);
-        timer=null;
-      },wait);
-    }
+    var mobile_flag = false;

-    return function () {
-      context=this;
-      args=arguments;
-      if(!timer){
-        console.log("throttle, set");
-        run();
-      }else{
-        console.log("throttle, ignore");
+    //根据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;

-  }
-  function adaptation(){
-    winWidth = document.body.clientWidth
-    console.log(winWidth)
-    console.log(document.body.clientHeight)
-    logo = document.getElementById("logo")
-    // oTop = document.getElementById("top")
-    company = document.getElementById("company")
-    company.style.height = logo.height + 'px'
-    // oTop.style.height = logo.height + 'px'
+    //根据屏幕分辨率判断是否是手机
+    if (screen_width < 500 && screen_height < 800) {
+      mobile_flag = true;
+    }
+    return mobile_flag;
  }
 </script>
 <style lang="less" >
  #userLayout.user-layout-wrapper{
    height: 100%;
    background: #4daaff;
-    overflow: hidden;
+    overflow: auto;
    .container {
      width: 100%;
+      min-width: 770px;
+      min-height: 500px;
      height: 100%;
      position: relative;
-      .top{
+      .top {
        position: absolute;
        left: 2%;
        top: 3%;
        min-width: 100px;
        max-height: 50px;
        z-index: 9;
-        .logo{
+        .logo {
          width: 100%;
          display: flex;
          align-items: center;
          position: absolute;
          overflow: hidden;
-          img{
+          img {
            display: block;
-            max-width:100%;
+            max-width: 100%;
            min-height: 30px;
          }
        }
-        #company{
-          width: 15%;
+        #company {
          position: absolute;
-          top: 0;
          max-height: 62px;
-          left: 82px;
-          /*left: calc(100% + 10px);*/
-          min-height: 30px;
-          display: inline-block;
+          left: 5.5rem;
+          min-height: 61px;
          color: #000;
          white-space: nowrap;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
-          span{
+          span {
            display: block;
-            &:first-child{
-              font-size: 160%;
+            &:first-child {
+              font-size: 1.8rem;
              font-weight: 700;
-              letter-spacing: 0.5rem;
+              letter-spacing: 0.3rem;
            }
-            &:last-child{
-              font-size: 10%;
+            &:last-child {
+              font-size: 0.9rem;
+              line-height: 0.9rem;
              letter-spacing: 0.06rem;
              font-weight: 700;
            }
          }
        }
      }
+
      .illustration{
        position: absolute;
        max-width: 50%;
@@ -158,10 +143,41 @@
        }
      }
    }
-  }
-  @media all and (max-width:600px){ // 分辨率<=600px
-    .illustration{
-      display: none !important;
+    .container-mobile{
+      /*移动端的logo样式*/
+      background: #f0f2f5;
+      width: 100%;
+      height: 100%;
+      .mobile{
+        position: absolute;
+        top: 6rem;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: flex-end;
+        .logo{
+          max-width: 4rem;
+          img{
+            max-width: 100%;
+          }
+        }
+        .company{
+          margin-left: 0.8rem;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-end;
+          span:first-child{
+            font-size: 1.6rem;
+            font-weight: bold;
+            letter-spacing: 0.1rem;
+          }
+          span:last-child{
+            font-size: 0.8rem;
+            line-height: 0.8rem;
+            font-weight: bold;
+          }
+        }
+      }
    }
  }
 </style>
@@ -131,11 +131,11 @@
      //--update-begin----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------
      //this.menus = this.mainRouters.find((item) => item.path === '/').children;
      this.menus = this.permissionMenuList
-      
+
      //--update-begin----author:liusq---date:20210223------for:关于测边菜单遮挡内容问题详细说明 #2255
      this.collapsed=!this.sidebarOpened;
      //--update-begin----author:liusq---date:20210223------for:关于测边菜单遮挡内容问题详细说明 #2255
-  
+
      // 根据后台配置菜单，重新排序加载路由信息
      //console.log('----加载菜单逻辑----')
      //console.log(this.mainRouters)
@@ -182,8 +182,8 @@

 <style lang="less">
  body {
-    // 打开滚动条固定显示
-    overflow-y: scroll;
+    // 打开滚动条:有即显示，无则不显示
+    overflow-y: auto;

    &.colorWeak {
      filter: invert(80%);
@@ -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>