登录页pc适配调试

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

@@ -3,12 +3,15 @@
     <div class="container">
       <div class="top">
         <div class="logo">
-          <img class="logo-img" src="~@/assets/logoNew.png" alt="">
-          <div class="company">
-            <span>合众未来</span>
-            <span>HEZHONGWEILAI</span>
-          </div>
+          <img id="logo" src="~@/assets/logo.png" alt="">
         </div>
+        <div id="company">
+          <span id="c-company">合众未来</span>
+          <span id="p-company">HEZHONGWEILAI</span>
+        </div>
+      </div>
+      <div class="illustration">
+        <img src="@/assets/home.pn g" alt="">
       </div>
       <route-view></route-view>
     </div>
@@ -33,69 +36,135 @@
       document.body.classList.remove('userLayout')
     },
   }
-  var comO,logo,logoImg
-  window.onresize = function(){
-    comO = document.getElementsByClassName("company")[0]
-    logo = document.getElementsByClassName("logo")[0]
-    logoImg = document.getElementsByClassName("logo-img")[0]
-    console.log(logo.width)
-    comO.style.left = (logoImg.width + 10) + 'px'
-    comO.style.height = logoImg.height + 'px'
-    logo.style.height = logoImg.height + 'px'
+  /*
+  * winWidth: 窗口可视宽度
+  * company: 公司名字盒子
+  * logo：logo图片
+  * cCompany: 中文公司名
+  * pCompany: 拼音公司名
+  * */
+  let winWidth,company,logo,cCompany,pCompany
+
+  window.onload = ()=>{
+    adaptation()
+  }
+  window.onresize = ()=>{
+    throttling(adaptation(),1000)
+  }
+  // 节流
+  let throttling = (fn, wait) => {
+    let timer;
+    let context, args;
+
+    let run = () => {
+      timer=setTimeout(()=>{
+        fn.apply(context,args);
+        clearTimeout(timer);
+        timer=null;
+      },wait);
+    }
+
+    return function () {
+      context=this;
+      args=arguments;
+      if(!timer){
+        console.log("throttle, set");
+        run();
+      }else{
+        console.log("throttle, ignore");
+      }
+    }
+
+  }
+  function adaptation(){
+    winWidth = window.innerWidth
+    logo = document.getElementById("logo")
+    company = document.getElementById("company")
+    cCompany = document.getElementById("c-company")
+    pCompany = document.getElementById("p-company")
+    cCompany.style.fontSize = (winWidth / 95) + 'px' // 公司中文适配
+    pCompany.style.fontSize = (winWidth / 120) + 'px' // 公司拼音适配
+    logo.style.maxWidth = (winWidth * 0.05) +'px' // logo宽度
+    company.style.left = (winWidth * 0.05 + 5) + 'px' // 公司名字距logo的左偏移
+    company.style.height = logo.height + 'px'
   }
 </script>
 <style lang="less" >
   #userLayout.user-layout-wrapper{
     height: 100%;
     .container {
-      background: url(~@/assets/home3840.png) no-repeat;
+      background: #4daaff;
       width: 100%;
       height: 100%;
-      background-size: 100% 100%;
       position: relative;
       .top{
         position: absolute;
         left: 2%;
         top: 3%;
         min-width: 100px;
-        min-height: 50px;
-        width: 100%;
-        height: 10%;
+        max-height: 50px;
+        z-index: 9;
         .logo{
-          width: 30%;
-          height: 100%;
+          width: 100%;
           display: flex;
           align-items: center;
-          position: relative;
+          position: absolute;
+          overflow: hidden;
           img{
-            max-width: 100%;
+            display: block;
+            max-width:50%;
+            min-height: 30px;
+            min-width: 35px;
           }
-          .company{
-            position: absolute;
-            bottom: 0;
-            display: inline-block;
-            color: #000;
-            white-space: nowrap;
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-end;
-            span{
-              &:first-child{
-                font-size: 140%;
-                font-weight: 600;
-                line-height: 100%;
-                min-height: 20%;
-                height: 40%;
-                letter-spacing: 1.5px;
-              }
-              &:last-child{
-                font-size: 110%;
-                font-weight: 700;
-              }
+        }
+        #company{
+          width: 15%;
+          position: absolute;
+          top: 0;
+          min-height: 30px;
+          display: inline-block;
+          color: #000;
+          white-space: nowrap;
+          position: absolute;
+          span{
+            display: block;
+            &:first-child{
+              font-size: 160%;
+              font-weight: 700;
+              letter-spacing: 0.5rem;
+              position: absolute;
+              top: 0;
+              left: 0;
+            }
+            &:last-child{
+              font-size: 10%;
+              letter-spacing: 0.06rem;
+              font-weight: 700;
+              position: absolute;
+              bottom: 0;
+              left: 0;
             }
           }
         }
       }
+      .illustration{
+        position: absolute;
+        max-width: 50%;
+        height: 100%;
+        min-width: 400px;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        img{
+          max-width: 70%;
+        }
+      }
+    }
+  }
+  @media all and (max-width:600px){ // 分辨率<=600px
+    .illustration{
+      display: none !important;
     }
   }
 </style>

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

@@ -62,8 +62,8 @@
               <a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]">自动登录</a-checkbox>
             </a-form-item>
           </a-col>
-          <a-col :span="7"></a-col>
-          <a-col :span="4" style="text-align: right;color: #1891FF;">
+          <a-col :span="6"></a-col>
+          <a-col :span="5" style="text-align: right;color: #1891FF;">
             <a-form-item>
               <router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
                 忘记密码
@@ -289,50 +289,53 @@
   .ant-row{
     margin-bottom: 4%;
   }
-  .user-layout-login{
-    width: 24%;
-    height: 56%;
-    padding: 3% 0 3% 0;
-    min-width: 400px;
-    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%;
-      height: 100%;
-      overflow: hidden;
-      display: flex;
-      justify-content: space-between;
-      flex-direction: column;
-      .title{
-        display: block;
-        color: #1891FF;
-        font-size: 28px;
-        font-weight: 500;
-        margin: 0 0 5% 0;
-        text-align: center;
-      }
-      .login-btn{
-        margin-bottom: 0;
-        font-size: 10px;
+  .main{
+    .user-layout-login{
+      width: 24%;
+      height: 56%;
+      padding: 3% 0 3% 0;
+      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%;
+        height: 100%;
+        overflow: hidden;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        .title{
+          display: block;
+          color: #1891FF;
+          font-size: 28px;
+          font-weight: 500;
+          margin: 0 0 5% 0;
+          text-align: center;
+        }
+        .login-btn{
+          margin-bottom: 0;
+          font-size: 10px;
+        }
       }
     }
   }
+
   @media all and (max-width:600px){ // 分辨率<=600px
     .user-layout-login{
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%,-50%);
+      top: 50% !important;
+      left: 50% !important;
+      transform: translate(-50%,-50%) !important;
     }
   }
 </style>