登录页移动端适配

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

jero-web/public/index.html

@@ -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;

jero-web/src/components/jerobiz/JSelectBizComponent/index.vue

@@ -149,7 +149,8 @@
     @width: 82px;
 
     .left {
-      width: calc(100% - @width - 8px);
+      //width: calc(100% - @width - 8px);
+      width: calc(100% - @width);
     }
 
     .right {

jero-web/src/components/layouts/RouteView.vue

@@ -39,4 +39,10 @@
       }
     },
   }
-</script>
+</script>
+<style>
+  .main{
+    height: 100%;
+    overflow: auto;
+  }
+</style>

jero-web/src/components/layouts/UserLayout.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="userLayout" :class="['user-layout-wrapper',device]">
-    <div class="container">
+    <div :class="!mobile ? 'container' : 'container-mobile'">
-      <div class="top" id="top">
+      <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: 窗口可视宽度
+  function isMobile() {
-  * company: 公司名字盒子
+    var userAgentInfo = navigator.userAgent;
-  * logo：logo图片
-  * cCompany: 中文公司名
-  * pCompany: 拼音公司名
-  * */
-  let winWidth,company,logo,oTop
 
-  window.onload = ()=>{
+    var mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
-    adaptation()
-  }
-  window.onresize = ()=>{
-    throttling(adaptation(),1000)
-  }
-  // 节流
-  let throttling = (fn, wait) => {
-    let timer;
-    let context, args;
 
-    let run = () => {
+    var mobile_flag = false;
-      timer=setTimeout(()=>{
-        fn.apply(context,args);
-        clearTimeout(timer);
-        timer=null;
-      },wait);
-    }
 
-    return function () {
+    //根据userAgent判断是否是手机
-      context=this;
+    for (var v = 0; v < mobileAgents.length; v++) {
-      args=arguments;
+      if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
-      if(!timer){
+        mobile_flag = true;
-        console.log("throttle, set");
+        break;
-        run();
-      }else{
-        console.log("throttle, ignore");
       }
     }
+    var screen_width = window.screen.width;
+    var screen_height = window.screen.height;
 
-  }
+    //根据屏幕分辨率判断是否是手机
-  function adaptation(){
+    if (screen_width < 500 && screen_height < 800) {
-    winWidth = document.body.clientWidth
+      mobile_flag = true;
-    console.log(winWidth)
+    }
-    console.log(document.body.clientHeight)
+    return mobile_flag;
-    logo = document.getElementById("logo")
-    // oTop = document.getElementById("top")
-    company = document.getElementById("company")
-    company.style.height = logo.height + 'px'
-    // oTop.style.height = logo.height + 'px'
   }
 </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{
+        #company {
-          width: 15%;
           position: absolute;
-          top: 0;
           max-height: 62px;
-          left: 82px;
+          left: 5.5rem;
-          /*left: calc(100% + 10px);*/
+          min-height: 61px;
-          min-height: 30px;
-          display: inline-block;
           color: #000;
           white-space: nowrap;
           display: flex;
           flex-direction: column;
           justify-content: flex-end;
-          span{
+          span {
             display: block;
-            &:first-child{
+            &:first-child {
-              font-size: 160%;
+              font-size: 1.8rem;
               font-weight: 700;
-              letter-spacing: 0.5rem;
+              letter-spacing: 0.3rem;
             }
-            &:last-child{
+            &:last-child {
-              font-size: 10%;
+              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 @@
         }
       }
     }
-  }
+    .container-mobile{
-  @media all and (max-width:600px){ // 分辨率<=600px
+      /*移动端的logo样式*/
-    .illustration{
+      background: #f0f2f5;
-      display: none !important;
+      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>

jero-web/src/components/page/GlobalLayout.vue

@@ -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%);

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 @@
         }
       }
     }
-  }
+    .user-layout-login-mobile{
-
+      right: 0;
-  @media all and (max-width:600px){ // 分辨率<=600px
+      width: 100%;
-    .user-layout-login{
+      margin-top: 15%;
-      top: 50% !important;
+      box-sizing: border-box;
-      left: 50% !important;
+      background: transparent;
-      transform: translate(-50%,-50%) !important;
+      padding: 4rem 2rem 6rem 2rem;
+      min-width: 0;
+      .ant-row{
+        margin-bottom: 0;
+      }
     }
   }
 </style>