技术信用 移动端适配新方案

assets/css/credit/index.scss

@@ -220,7 +220,7 @@
     margin: 0 !important;
     .contentArea {
       width: 100vw;
-      margin: 57px auto 57px auto;
+      margin: pxtovw(57) auto pxtovw(57) auto;
       padding: 0 10px;
 
       display: flex;
@@ -229,13 +229,13 @@
 
       .screenTop {
         margin: 0 auto;
-        width: 324px;
+        width: pxtovw(324);
       }
 
       .screenList {
         flex-direction: column;
         .cell {
-          margin-top: 10px;
+          margin-top: pxtovw(10);
 
           &:first-child {
             margin-top: 0;
@@ -248,9 +248,10 @@
         flex-direction: column;
 
         .cell {
-          margin-top: 24px;
+          margin-top: pxtovw(24);
           display: block;
-          width: 355px;
+          width: pxtovw(355);
+          height: auto;
 
           &:first-child {
             margin-top: 0;
@@ -258,45 +259,45 @@
 
           .cellImg {
             img {
-              width: 355px;
-              height: 222px;
+              width: pxtovw(355);
+              height: pxtovw(222);
             }
           }
 
           .cellRight {
-            margin-top: 15px;
+            margin-top: pxtovw(15);
             margin-left: 0;
-            width: 355px;
+            width: pxtovw(355);
             height: auto;
             text-align: left;
             display: block;
             .cellTitle {
-              font-size:24px;
+              font-size:pxtovw(24);
               font-weight:600;
               color:rgba(34,34,34,1);
-              line-height:33px;
+              line-height:pxtovw(33);
             }
             .cellSubTitle {
-              margin-top: 6px;
-              font-size:12px;
+              margin-top: pxtovw(6);
+              font-size:pxtovw(12);
               font-weight:400;
               color:rgba(51,51,51,1);
-              line-height:17px;
+              line-height:pxtovw(17);
             }
           }
         }
       }
     }
     .bottomArea {
-      margin-top: 35px;
+      margin-top: pxtovw(35);
       .wordBox {
         p {
-          width: 355px;
+          width: pxtovw(355);
           position: absolute;
-          font-size:21px;
+          font-size:pxtovw(21);
           font-weight:300;
           color:rgba(255,255,255,1);
-          line-height: 32px;
+          line-height: pxtovw(32);
           letter-spacing:0;
         }
       }

assets/css/scssCommon.scss

@@ -1,4 +1,4 @@
 
 @function pxtovw($px) {
-  @return $px / 3.75 * 1vw
+  @return unquote($px / 3.75 + 'vw');
 }

components/credit/header.vue

@@ -42,7 +42,6 @@
       }
     },
     mounted() {
-      console.log('this.$deviceType.isMobile()', this.$deviceType.isMobile())
       this.mobile = this.$deviceType.isMobile()
     }
   };
@@ -130,7 +129,7 @@
       }
       .topContent {
         position: absolute;
-        top: 10px;
+        top: pxtovw(10);
         width: 100%;
         height: 175px;
 
@@ -143,38 +142,38 @@
 
           .titleBox {
             display: flex;
-            height: 66px;
+            height: pxtovw(66);
             align-items: center;
             justify-content: center;
             .icon {
-              width: 50px;
-              height: 50px;
-              margin-right: 10px;
+              width: pxtovw(50);
+              height: pxtovw(50);
+              margin-right: pxtovw(px);
             }
             .title {
               font-weight: 600;
               color: rgba(255, 255, 255, 1);
-              font-size:36px;
-              line-height:51px;
+              font-size:pxtovw(36);
+              line-height:pxtovw(51);
             }
           }
 
           .subWord {
-            margin-top: 6px;
-            font-size:16px;
-            line-height:22px;
+            margin-top: pxtovw(6);
+            font-size:pxtovw(16);
+            line-height:pxtovw(22);
             text-align: center;
 
             &.sub {
-              font-size:16px;
-              line-height:22px;
+              font-size:pxtovw(16);
+              line-height:pxtovw(22);
             }
           }
         }
 
         .right {
           flex-shrink: 0;
-          margin-left: 50px;
+          margin-left: pxtovw(px);
           img {
             width: 21.22vw;
             height: 19.61vw;