登录页移动端适配

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

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="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>