登录页pc适配调试

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">
+      <div class="top" id="top">
         <div class="logo">
           <img id="logo" src="~@/assets/logo.png" alt="">
         </div>
@@ -43,7 +43,7 @@
   * cCompany: 中文公司名
   * pCompany: 拼音公司名
   * */
-  let winWidth,company,logo,cCompany,pCompany
+  let winWidth,company,logo,oTop
 
   window.onload = ()=>{
     adaptation()
@@ -77,23 +77,22 @@
 
   }
   function adaptation(){
-    winWidth = window.innerWidth
+    winWidth = document.body.clientWidth
+    console.log(winWidth)
+    console.log(document.body.clientHeight)
     logo = document.getElementById("logo")
+    // oTop = document.getElementById("top")
     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'
+    // oTop.style.height = logo.height + 'px'
   }
 </script>
 <style lang="less" >
   #userLayout.user-layout-wrapper{
     height: 100%;
+    background: #4daaff;
+    overflow: hidden;
     .container {
-      background: #4daaff;
       width: 100%;
       height: 100%;
       position: relative;
@@ -112,37 +111,35 @@
           overflow: hidden;
           img{
             display: block;
-            max-width:50%;
+            max-width:100%;
             min-height: 30px;
-            min-width: 35px;
           }
         }
         #company{
           width: 15%;
           position: absolute;
           top: 0;
+          max-height: 62px;
+          left: 82px;
+          /*left: calc(100% + 10px);*/
           min-height: 30px;
           display: inline-block;
           color: #000;
           white-space: nowrap;
-          position: absolute;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-end;
           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;
             }
           }
         }
@@ -150,9 +147,9 @@
       .illustration{
         position: absolute;
         max-width: 50%;
+        max-height: 100%;
         height: 100%;
         min-width: 400px;
-        position: relative;
         display: flex;
         justify-content: center;
         align-items: center;