登录页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>