rem to vw

assets/css/scssCommon.scss

@@ -3,6 +3,9 @@
   @return unquote($px / 3.75 + 'vw');
 }
 
+@function remtovw($rem) {
+  @return unquote($rem * 50 / 3.75 + 'vw');
+}
 
 @function webPxTvw($px) {
   @return unquote($px / 18 + 'vw');

components/type/vip/mobile.vue

@@ -335,7 +335,10 @@
   };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+
+  @import "~@/assets/css/scssCommon.scss";
+
   .wrapper {
     overflow: hidden;
     margin-top: 0;
@@ -362,21 +365,21 @@
 
   .switch-item {
     flex: 1;
-    padding-top: .4rem;
-    padding-bottom: .15rem;
+    padding-top: remtovw(0.4);
+    padding-bottom: remtovw(0.15);
   }
 
   .switch-item .switch-item-title {
-    line-height: .42rem;
+    line-height: remtovw(0.42);
     text-align: center;
-    font-size: .3rem;
+    font-size: remtovw(0.3);
     color: #FFFFFF;
   }
 
   .switch-item .switch-item-border {
-    margin: .18rem auto 0;
-    width: .6rem;
-    height: .06rem;
+    margin: remtovw(0.18) auto 0;
+    width: remtovw(0.6);
+    height: remtovw(0.06);
     background-color: transparent;
   }
 
@@ -395,8 +398,8 @@
   .banner-brown {
     overflow: hidden;
     margin: 0 auto;
-    width: 7rem;
-    height: 2.9rem;
+    width: remtovw(7);
+    height: remtovw(2.9);
     background-image: url('~@/assets/img/vip/banner_brown.png');
     background-size: 100%;
     background-repeat: no-repeat;
@@ -409,8 +412,8 @@
   .banner-blue {
     overflow: hidden;
     margin: 0 auto;
-    width: 7rem;
-    height: 2.9rem;
+    width: remtovw(7);
+    height: remtovw(2.9);
     background-image: url('~@/assets/img/vip/banner_blue.png');
     background-size: 100%;
     background-repeat: no-repeat;
@@ -423,62 +426,62 @@
   .banner-green {
     overflow: hidden;
     margin: 0 auto;
-    width: 7rem;
-    height: 2.9rem;
+    width: remtovw(7);
+    height: remtovw(2.9);
     background-image: url('~@/assets/img/vip/banner_green.png');
     background-size: 100%;
     background-repeat: no-repeat;
   }
 
   .banner-content {
-    margin-top: 1.12rem;
+    margin-top: remtovw(1.12);
     display: flex;
     align-items: center;
   }
 
   .avatar {
     position: relative;
-    margin-left: .32rem;
-    width: 1.1rem;
-    height: 1.1rem;
+    margin-left: remtovw(0.32);
+    width: remtovw(1.1);
+    height: remtovw(1.1);
   }
 
   .avatar img {
     width: 100%;
     height: 100%;
     border-radius: 50%;
-    border: .03rem solid #E1A83F;
+    border: remtovw(0.03) solid #E1A83F;
   }
 
   .name-wrapper {
     flex: 1;
-    margin-left: .23rem;
+    margin-left: remtovw(0.23);
   }
 
   .name {
-    line-height: .48rem;
+    line-height: remtovw(0.48);
     font-weight: 500;
-    font-size: .34rem;
+    font-size: remtovw(0.34);
     color: #222222;
   }
 
   .validity {
-    margin-top: .02rem;
-    line-height: .3rem;
-    font-size: .22rem;
+    margin-top: remtovw(0.02);
+    line-height: remtovw(0.3);
+    font-size: remtovw(0.22);
     color: rgba(34, 34, 34, 0.6)
   }
 
   .renew-btn {
-    margin-right: .3rem;
-    width: 1.54rem;
-    height: .64rem;
-    border-radius: .32rem;
+    margin-right: remtovw(0.3);
+    width: remtovw(1.54);
+    height: remtovw(0.64);
+    border-radius: remtovw(0.32);
     background-color: #D89823;
-    line-height: .64rem;
+    line-height: remtovw(0.64);
     font-weight: 600;
     text-align: center;
-    font-size: .26rem;
+    font-size: remtovw(0.26);
     color: #FFFFFF;
   }
 
@@ -489,23 +492,23 @@
 
   .title-wrapper {
     margin: 0 auto;
-    width: 7.1rem;
-    padding-bottom: .2rem;
+    width: remtovw(7.1);
+    padding-bottom: remtovw(0.2);
     display: flex;
   }
 
   .title {
     flex: 1;
-    margin-top: .17rem;
-    margin-left: .24rem;
-    line-height: .75rem;
+    margin-top: remtovw(.17);
+    margin-left: remtovw(0.24);
+    line-height: remtovw(0.75);
     font-weight: 600;
-    font-size: .29rem;
+    font-size: remtovw(0.29);
     color: #222222;
   }
 
   .price-wrapper {
-    margin-top: .23rem;
+    margin-top: remtovw(0.23);
     text-align: right;
   }
 
@@ -514,30 +517,30 @@
   }
 
   .monthly-origin-price {
-    margin-top: .17rem;
-    line-height: .3rem;
-    font-size: .22rem;
+    margin-top: remtovw(.17);
+    line-height: remtovw(0.3);
+    font-size: remtovw(0.22);
     color: #919AA7;
     text-decoration: line-through;
   }
 
   .monthly-discount-price {
-    margin-left: .07rem;
-    line-height: .62rem;
-    font-size: .24rem;
+    margin-left: remtovw(.07);
+    line-height: remtovw(0.62);
+    font-size: remtovw(0.24);
     color: #222222;
   }
 
   .monthly-discount-price span {
     font-weight: 600;
-    font-size: .45rem;
+    font-size: remtovw(0.45);
   }
 
   .quarterly-price {
-    margin-top: .01rem;
-    margin-right: .05rem;
-    line-height: .33rem;
-    font-size: .24rem;
+    margin-top: remtovw(0.01);
+    margin-right: remtovw(0.05);
+    line-height: remtovw(0.33);
+    font-size: remtovw(0.24);
     color: #666666;
   }
 
@@ -546,64 +549,64 @@
   }
 
   .list {
-    padding-top: .3rem;
-    padding-bottom: .33rem;
+    padding-top: remtovw(0.3);
+    padding-bottom: remtovw(0.33);
   }
 
   .item {
     margin: 0 auto;
-    width: 7.1rem;
+    width: remtovw(7.1);
     display: flex;
     align-items: center;
   }
 
   .item-title {
     flex: 1;
-    line-height: .74rem;
-    font-size: .28rem;
+    line-height: remtovw(0.74);
+    font-size: remtovw(0.28);
     color: #1D2A3A;
   }
 
   .item-discount {
-    width: 1.02rem;
-    height: .44rem;
+    width: remtovw(1.02);
+    height: remtovw(0.44);
     background-image: url('~@/assets/img/vip/icon_discount_brown.png');
     background-size: 100%;
     background-repeat: no-repeat;
-    line-height: .44rem;
-    text-indent: .16rem;
-    font-size: .22rem;
+    line-height: remtovw(0.44);
+    text-indent: remtovw(0.16);
+    font-size: remtovw(0.22);
     color: #E1A83F;
   }
 
   .item-include {
-    margin-right: .35rem;
-    width: .3rem;
-    height: .2rem;
+    margin-right: remtovw(0.35);
+    width: remtovw(0.3);
+    height: remtovw(0.2);
   }
 
   .tips-wrapper {
     overflow: hidden;
-    margin-top: .15rem;
-    padding-bottom: .39rem;
+    margin-top: remtovw(0.15);
+    padding-bottom: remtovw(0.39);
     background-color: #ffffff;
   }
 
   .tips-title {
-    margin-top: .36rem;
-    margin-left: .2rem;
-    line-height: .4rem;
+    margin-top: remtovw(0.36);
+    margin-left: remtovw(0.2);
+    line-height: remtovw(0.4);
     font-weight: 600;
-    font-size: .28rem;
+    font-size: remtovw(0.28);
     color: #666666;
   }
 
   .tips-content {
-    margin-top: .18rem;
-    margin-left: .2rem;
-    width: 6.8rem;
-    line-height: .56rem;
-    font-size: .26rem;
+    margin-top: remtovw(0.18);
+    margin-left: remtovw(0.2);
+    width: remtovw(6.8);
+    line-height: remtovw(0.56);
+    font-size: remtovw(0.26);
     color: #999999;
   }
 

pages/job/_post/_id.vue

@@ -178,14 +178,14 @@
   .mobile {
     .contentArea {
       width: 100%;
-      height:calc(100% - 1.3rem);
+      height:calc(100% - 18.67vw);
       overflow-x: hidden;
       overflow-y: scroll;
 
       .header {
         overflow: hidden;
-        padding-top: .72rem;
-        padding-bottom: .72rem;
+        padding-top: remtovw(.72);
+        padding-bottom: remtovw(.72);
         background-color: #ffffff;
       }
       .title-wrapper {
@@ -194,21 +194,21 @@
       }
       .title {
         flex: 1;
-        margin-left: .2rem;
-        line-height: .44rem;
+        margin-left: remtovw(0.2);
+        line-height: remtovw(.44);
         font-weight: 600;
-        font-size: .32rem;
+        font-size: remtovw(.32);
         color: #222222;
       }
       .price {
-        margin-right: .2rem;
-        line-height: .42rem;
+        margin-right: remtovw(.2);
+        line-height: remtovw(.42);
         font-weight: 600;
-        font-size: .3rem;
+        font-size: remtovw(.3);
         color: #308EFF;
       }
       .require-list {
-        margin-top: .16rem;
+        margin-top: remtovw(.16);
       }
       .require-item {
         margin: 0 pxtovw(10);
@@ -217,9 +217,9 @@
       }
       .require-label {
         flex-shrink: 0;
-        line-height: .46rem;
+        line-height: remtovw(.46);
         font-weight: 600;
-        font-size: .25rem;
+        font-size: remtovw(.25);
         color: #666666;
         align-self: flex-start;
         word-break: break-all;
@@ -228,51 +228,51 @@
         flex-grow: 1;
         margin-left: pxtovw(6);
         word-break: break-all;
-        line-height: .46rem;
-        font-size: .25rem;
+        line-height: remtovw(.46);
+        font-size: remtovw(.25);
         color: #666666;
       }
       .detail-wrapper {
         overflow: hidden;
-        margin-top: .2rem;
-        padding-top: .48rem;
-        padding-bottom: .44rem;
+        margin-top: remtovw(.2);
+        padding-top: remtovw(0.48);
+        padding-bottom: remtovw(0.44);
         background-color: #ffffff;
       }
       .detail-title {
-        margin-left: .26rem;
-        line-height: .44rem;
+        margin-left: remtovw(0.26);
+        line-height: remtovw(0.44);
         font-weight: 600;
-        font-size: .32rem;
+        font-size: remtovw(0.32);
         color: #333333;
       }
       .detail-text {
-        margin: .18rem auto 0;
-        width: 6.98rem;
-        line-height: .56rem;
-        font-size: .28rem;
+        margin: remtovw(0.18) auto 0;
+        width: remtovw(6.98);
+        line-height: remtovw(0.56);
+        font-size: remtovw(0.28);
         color: #444444;
       }
       .tips-wrapper {
         overflow: hidden;
-        margin: .2rem auto;
-        width: 7rem;
-        padding-top: .38rem;
-        padding-bottom: .36rem;
+        margin: remtovw(0.2) auto;
+        width: remtovw(7);
+        padding-top: remtovw(0.38);
+        padding-bottom: remtovw(0.36);
         background-color: #ffffff;
       }
       .tips-title {
-        margin-left: .24rem;
-        line-height: .42rem;
+        margin-left: remtovw(0.24);
+        line-height: remtovw(0.42);
         font-weight: 600;
-        font-size: .26rem;
+        font-size: remtovw(0.26);
         color: #EE3F21;
       }
       .tips-text {
         margin: 0 auto;
-        width: 6.5rem;
-        line-height: .42rem;
-        font-size: .26rem;
+        width: remtovw(6.5);
+        line-height: remtovw(0.42);
+        font-size: remtovw(0.26);
         color: #999999;
       }
     }
@@ -282,16 +282,16 @@
      bottom: 0;
      left: 0;
      width: 100%;
-     height: 1.2rem;
+     height: remtovw(1.2);
 
      display: flex;
      justify-content: center;
      align-items: center;
 
      .contact-wrapper {
-       height: 0.96rem;
+       height: remtovw(0.96);
        bottom: 0;
-       width: 6.7rem;
+       width: remtovw(6.7);
        background-color: #308EFF;
        display: flex;
        align-items: center;
@@ -299,26 +299,26 @@
        border-radius: 8px;
 
        img {
-         margin-right: .02rem;
-         width: .44rem;
-         height: .44rem;
+         margin-right: remtovw(0.2);
+         width: remtovw(0.44);
+         height: remtovw(0.44);
        }
        p {
-         line-height: .44rem;
+         line-height: remtovw(0.44);
          font-weight: 500;
-         font-size: .32rem;
+         font-size: remtovw(0.32);
          color: #ffffff;
        }
      }
      .btn {
        margin: 0 auto;
-       width: 6.7rem;
-       height: 0.96rem;
+       width: remtovw(6.7);
+       height: remtovw(0.96);
        background-color: #308EFF;
-       line-height: 0.96rem;
+       line-height: remtovw(0.96);
        text-align: center;
        font-weight: 500;
-       font-size: .32rem;
+       font-size: remtovw(0.32);
        color: #ffffff;
        border-radius: 8px;
      }
@@ -330,15 +330,15 @@
        justify-content: center;
      }
      .btn-item {
-       margin-left: .25rem;
-       margin-right: .25rem;
-       width: 3rem;
-       height: .96rem;
+       margin-left: remtovw(0.25);
+       margin-right: remtovw(0.25);
+       width: remtovw(3);
+       height: remtovw(0.96);
        background-color: #308EFF;
-       line-height: .96rem;
+       line-height: remtovw(0.96);
        text-align: center;
        font-weight: 500;
-       font-size: .32rem;
+       font-size: remtovw(0.32);
        color: #ffffff;
        border-radius: pxtovw(8);
      }