登录页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="">
+          <img id="logo" src="~@/assets/logo.png" alt="">
-          <div class="company">
+        </div>
-            <span>合众未来</span>
+        <div id="company">
-            <span>HEZHONGWEILAI</span>
+          <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(){
+  * winWidth: 窗口可视宽度
-    comO = document.getElementsByClassName("company")[0]
+  * company: 公司名字盒子
-    logo = document.getElementsByClassName("logo")[0]
+  * logo：logo图片
-    logoImg = document.getElementsByClassName("logo-img")[0]
+  * cCompany: 中文公司名
-    console.log(logo.width)
+  * pCompany: 拼音公司名
-    comO.style.left = (logoImg.width + 10) + 'px'
+  * */
-    comO.style.height = logoImg.height + 'px'
+  let winWidth,company,logo,cCompany,pCompany
-    logo.style.height = logoImg.height + 'px'
+
+  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;
+        max-height: 50px;
-        width: 100%;
+        z-index: 9;
-        height: 10%;
         .logo{
-          width: 30%;
+          width: 100%;
-          height: 100%;
           display: flex;
           align-items: center;
-          position: relative;
-          img{
-            max-width: 100%;
-          }
-          .company{
           position: absolute;
-            bottom: 0;
+          overflow: hidden;
+          img{
+            display: block;
+            max-width:50%;
+            min-height: 30px;
+            min-width: 35px;
+          }
+        }
+        #company{
+          width: 15%;
+          position: absolute;
+          top: 0;
+          min-height: 30px;
           display: inline-block;
           color: #000;
           white-space: nowrap;
-            display: flex;
+          position: absolute;
-            flex-direction: column;
-            justify-content: flex-end;
           span{
+            display: block;
             &:first-child{
-                font-size: 140%;
+              font-size: 160%;
-                font-weight: 600;
+              font-weight: 700;
-                line-height: 100%;
+              letter-spacing: 0.5rem;
-                min-height: 20%;
+              position: absolute;
-                height: 40%;
+              top: 0;
-                letter-spacing: 1.5px;
+              left: 0;
             }
             &:last-child{
-                font-size: 110%;
+              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="6"></a-col>
-          <a-col :span="4" style="text-align: right;color: #1891FF;">
+          <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,11 +289,12 @@
   .ant-row{
     margin-bottom: 4%;
   }
+  .main{
     .user-layout-login{
       width: 24%;
       height: 56%;
       padding: 3% 0 3% 0;
-    min-width: 400px;
+      min-width: 332px;
       min-height: 460px;
       background: #fff;
       -webkit-border-radius: 20px;
@@ -328,11 +329,13 @@
         }
       }
     }
+  }
+
   @media all and (max-width:600px){ // 分辨率<=600px
     .user-layout-login{
-      top: 50%;
+      top: 50% !important;
-      left: 50%;
+      left: 50% !important;
-      transform: translate(-50%,-50%);
+      transform: translate(-50%,-50%) !important;
     }
   }
 </style>