ss

238f669c · chenyishuai@singsingenglish.com · 11946771 · 238f669c · 238f669c · 11946771
Commit 238f669c authored Jun 27, 2019 by chenyishuai@singsingenglish.com
55 changed files
--- a/dev/index.html
+++ b/dev/index.html
@@ -10,4 +10,5 @@
          overflow: hidden;
          position: fixed;
          background: #f4f4f4;
-        }</style><link href=static/css/app.bf89c67cb6a818994fcc9e7a2f1754db.css rel=stylesheet></head><body><div id=app></div><script src=https://res.wx.qq.com/open/js/jweixin-1.3.2.js></script><script src=static/vconsole/vconsole.min.js></script><script></script><script type=text/javascript src=static/js/manifest.3c58d59cf02f8f2981bb.js></script><script type=text/javascript src=static/js/vendor.a5a943cd8fb34eed2a77.js></script><script type=text/javascript src=static/js/app.2b9f4ca7279792a39ac3.js></script></body></html>
+        }
\ No newline at end of file
+        /* html{font-size: 1px;} */</style><link href=static/css/app.bf89c67cb6a818994fcc9e7a2f1754db.css rel=stylesheet></head><body><div id=app></div><script src=https://res.wx.qq.com/open/js/jweixin-1.3.2.js></script><script src=static/vconsole/vconsole.min.js></script><script></script><script type=text/javascript src=static/js/manifest.86903dbd8896b8f44d16.js></script><script type=text/javascript src=static/js/vendor.a5a943cd8fb34eed2a77.js></script><script type=text/javascript src=static/js/app.37c8c4309a1f47ab161e.js></script></body></html>
\ No newline at end of file
--- a/dev/static/img/4.65b6cb5.png
+++ b/dev/static/img/4.65b6cb5.png
--- a/dev/static/img/4.ecf3d43.png
+++ b/dev/static/img/4.ecf3d43.png
--- a/dev/static/img/title1.664cce3.png
+++ b/dev/static/img/title1.664cce3.png
--- a/dev/static/img/title1.ddf7981.png
+++ b/dev/static/img/title1.ddf7981.png
--- a/dev/static/js/17.37acfb8d41847866afb0.js
+++ b/dev/static/js/17.37acfb8d41847866afb0.js
--- a/dev/static/js/4.f2bf790adbbeb12829e1.js
+++ b/dev/static/js/4.f2bf790adbbeb12829e1.js
--- a/dev/static/js/6.25de7942591869c92d4e.js
+++ b/dev/static/js/6.25de7942591869c92d4e.js
--- a/dev/static/js/6.b2e26ed5e21b7ea11850.js
+++ b/dev/static/js/6.b2e26ed5e21b7ea11850.js
--- a/dev/static/js/app.2b9f4ca7279792a39ac3.js
+++ b/dev/static/js/app.2b9f4ca7279792a39ac3.js
--- a/dev/static/js/manifest.3c58d59cf02f8f2981bb.js
+++ b/dev/static/js/manifest.3c58d59cf02f8f2981bb.js
-!function(e){var f=window.webpackJsonp;window.webpackJsonp=function(c,r,t){for(var d,b,o,i=0,u=[];i<c.length;i++)b=c[i],a[b]&&u.push(a[b][0]),a[b]=0;for(d in r)Object.prototype.hasOwnProperty.call(r,d)&&(e[d]=r[d]);for(f&&f(c,r,t);u.length;)u.shift()();if(t)for(i=0;i<t.length;i++)o=n(n.s=t[i]);return o};var c={},a={46:0};function n(f){if(c[f])return c[f].exports;var a=c[f]={i:f,l:!1,exports:{}};return e[f].call(a.exports,a,a.exports,n),a.l=!0,a.exports}n.e=function(e){var f=a[e];if(0===f)return new Promise(function(e){e()});if(f)return f[2];var c=new Promise(function(c,n){f=a[e]=[c,n]});f[2]=c;var r=document.getElementsByTagName("head")[0],t=document.createElement("script");t.type="text/javascript",t.charset="utf-8",t.async=!0,t.timeout=12e4,n.nc&&t.setAttribute("nonce",n.nc),t.src=n.p+"static/js/"+e+"."+{0:"6abe927f66853d202f08",1:"2d406400ec3c8d3cf042",2:"c9e0de699f755ee4b23a",3:"2107f1b9e184ae98213a",4:"f2bf790adbbeb12829e1",5:"3b0b1393953737345836",6:"25de7942591869c92d4e",7:"d38ff3f7521ea990c842",8:"4c37bd70d65f96539867",9:"f556b559f60a57bd98c7",10:"de3e0e9cd5ee98d6c928",11:"b0902bd724ca4e957e5d",12:"569df6356ef277433bf8",13:"80d75851ebf723ba0b00",14:"49e2faaa5a02eff36984",15:"9d6cc6367f21cfbac19e",16:"98ce85ad5ab95594e0f7",17:"37acfb8d41847866afb0",18:"c5d36ed475bb21ff44cf",19:"54a8798e8eefb0b18908",20:"ea0e446648e88f1d76e4",21:"f62dfff013d1ecc467be",22:"0a1864b54026b8c72ef7",23:"52c139bed6992be26830",24:"becd77dae5bf83dcbd54",25:"62620e9bac18a036b452",26:"74f2b27848334b451d54",27:"31c1e69da4f897ae4765",28:"99da3828c1999d40671a",29:"fa14b41d7c77e07c8120",30:"8415ee1bca5daa87c09e",31:"267ce6de032f1064248f",32:"832df5bf4f39f1bb1834",33:"39cebaea98826b57334e",34:"2ef07273df25c5998fc7",35:"4cc5c8808f6ddc45f715",36:"521b496293b7bc33814e",37:"5561b87aa887f3a9c76d",38:"39491e7ffa5846071712",39:"2eebc8580c2465fe6f3e",40:"3d668485588329ab6b7d",41:"333a8bf40e2fefa8f501",42:"0f9cba645d90bf0157fd",43:"6d2a78fce59048b83178"}[e]+".js";var d=setTimeout(b,12e4);function b(){t.onerror=t.onload=null,clearTimeout(d);var f=a[e];0!==f&&(f&&f[1](new Error("Loading chunk "+e+" failed.")),a[e]=void 0)}return t.onerror=t.onload=b,r.appendChild(t),c},n.m=e,n.c=c,n.d=function(e,f,c){n.o(e,f)||Object.defineProperty(e,f,{configurable:!1,enumerable:!0,get:c})},n.n=function(e){var f=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(f,"a",f),f},n.o=function(e,f){return Object.prototype.hasOwnProperty.call(e,f)},n.p="",n.oe=function(e){throw console.error(e),e}}([]);
+!function(e){var f=window.webpackJsonp;window.webpackJsonp=function(c,r,t){for(var d,o,b,i=0,u=[];i<c.length;i++)o=c[i],a[o]&&u.push(a[o][0]),a[o]=0;for(d in r)Object.prototype.hasOwnProperty.call(r,d)&&(e[d]=r[d]);for(f&&f(c,r,t);u.length;)u.shift()();if(t)for(i=0;i<t.length;i++)b=n(n.s=t[i]);return b};var c={},a={46:0};function n(f){if(c[f])return c[f].exports;var a=c[f]={i:f,l:!1,exports:{}};return e[f].call(a.exports,a,a.exports,n),a.l=!0,a.exports}n.e=function(e){var f=a[e];if(0===f)return new Promise(function(e){e()});if(f)return f[2];var c=new Promise(function(c,n){f=a[e]=[c,n]});f[2]=c;var r=document.getElementsByTagName("head")[0],t=document.createElement("script");t.type="text/javascript",t.charset="utf-8",t.async=!0,t.timeout=12e4,n.nc&&t.setAttribute("nonce",n.nc),t.src=n.p+"static/js/"+e+"."+{0:"6abe927f66853d202f08",1:"2d406400ec3c8d3cf042",2:"c9e0de699f755ee4b23a",3:"2107f1b9e184ae98213a",4:"899e6488c052f6382aa2",5:"3b0b1393953737345836",6:"b2e26ed5e21b7ea11850",7:"d38ff3f7521ea990c842",8:"4c37bd70d65f96539867",9:"f556b559f60a57bd98c7",10:"de3e0e9cd5ee98d6c928",11:"b0902bd724ca4e957e5d",12:"569df6356ef277433bf8",13:"80d75851ebf723ba0b00",14:"49e2faaa5a02eff36984",15:"9d6cc6367f21cfbac19e",16:"98ce85ad5ab95594e0f7",17:"12df6c9879dccd9c5f2e",18:"c5d36ed475bb21ff44cf",19:"54a8798e8eefb0b18908",20:"ea0e446648e88f1d76e4",21:"f62dfff013d1ecc467be",22:"0a1864b54026b8c72ef7",23:"52c139bed6992be26830",24:"becd77dae5bf83dcbd54",25:"62620e9bac18a036b452",26:"74f2b27848334b451d54",27:"31c1e69da4f897ae4765",28:"99da3828c1999d40671a",29:"fa14b41d7c77e07c8120",30:"8415ee1bca5daa87c09e",31:"267ce6de032f1064248f",32:"832df5bf4f39f1bb1834",33:"39cebaea98826b57334e",34:"2ef07273df25c5998fc7",35:"4cc5c8808f6ddc45f715",36:"521b496293b7bc33814e",37:"5561b87aa887f3a9c76d",38:"39491e7ffa5846071712",39:"2eebc8580c2465fe6f3e",40:"3d668485588329ab6b7d",41:"333a8bf40e2fefa8f501",42:"0f9cba645d90bf0157fd",43:"6d2a78fce59048b83178"}[e]+".js";var d=setTimeout(o,12e4);function o(){t.onerror=t.onload=null,clearTimeout(d);var f=a[e];0!==f&&(f&&f[1](new Error("Loading chunk "+e+" failed.")),a[e]=void 0)}return t.onerror=t.onload=o,r.appendChild(t),c},n.m=e,n.c=c,n.d=function(e,f,c){n.o(e,f)||Object.defineProperty(e,f,{configurable:!1,enumerable:!0,get:c})},n.n=function(e){var f=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(f,"a",f),f},n.o=function(e,f){return Object.prototype.hasOwnProperty.call(e,f)},n.p="",n.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file
--- a/index.html
+++ b/index.html
@@ -8,11 +8,11 @@
    <meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 -->
    <title>唱唱启蒙英语</title>
    <script>
-    setSize();
+    // setSize();
-      addEventListener('resize',setSize);
+    //   addEventListener('resize',setSize);
-      function setSize() {
+    //   function setSize() {
-          document.documentElement.style.fontSize = document.documentElement.clientWidth/375+'px';
+    //       document.documentElement.style.fontSize = document.documentElement.clientWidth/375*10+'px';
-      }
+    //   }
    </script>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_822651_g9r2j7kybxu.css">
    <style>
@@ -25,6 +25,7 @@
          position: fixed;
          background: #f4f4f4;
        }
+        /* html{font-size: 1px;} */
    </style>
  </head>
  <body>

--- a/src/assets/activity/4.png
+++ b/src/assets/activity/4.png
--- a/src/assets/activity/title1.png
+++ b/src/assets/activity/title1.png
--- a/src/components/activity/liuyi.vue
+++ b/src/components/activity/liuyi.vue
@@ -273,22 +273,22 @@ export default {
  background: #fff5e5;
  overflow: hidden;
  width: 100%;
-  // padding-top: 203rem;
+  // padding-top: 203 * @toVw;
  .news {
    position: absolute;
-    width: 170rem;
+    width: 170 * @toVw;
-    height: 19rem;
+    height: 19 * @toVw;
-    top: 10rem;
+    top: 10 * @toVw;
-    line-height: 19rem;
+    line-height: 19 * @toVw;
-    border-radius: 19rem;
+    border-radius: 19 * @toVw;
    overflow: hidden;
    text-align: center;
-    left: 102rem;
+    left: 102 * @toVw;
-    font-size: 10rem;
+    font-size: 10 * @toVw;
    .shadow {
      position: absolute;
-      width: 170rem;
+      width: 170 * @toVw;
-      height: 19rem;
+      height: 19 * @toVw;
      top: 0;
      left: 0;
      background: rgba(25, 38, 99, 1);
@@ -301,7 +301,7 @@ export default {
      // display: flex;
      .name {
        display: inline-block;
-        max-width: 50rem;
+        max-width: 50 * @toVw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
@@ -317,55 +317,55 @@ export default {
  .luckBox {
    width: 100%;
    position: absolute;
-    top: 203rem;
+    top: 203 * @toVw;
    text-align: center;
    overflow: hidden;
    img {
-      width: 320rem;
+      width: 320 * @toVw;
    }
    .radius{-webkit-transform:rotate(30deg); }
    .point {
      position: absolute;
-      top: 103rem;
+      top: 103 * @toVw;
-      width: 98rem;
+      width: 98 * @toVw;
-      // height: 102rem;
+      // height: 102 * @toVw;
-      left: 139rem;
+      left: 139 * @toVw;
    }
    .text {
      position: absolute;
-      top: 137rem;
+      top: 137 * @toVw;
-      width: 98rem;
+      width: 98 * @toVw;
-      left: 139rem;
+      left: 139 * @toVw;
-      font-size: 19rem;
+      font-size: 19 * @toVw;
      color: white;
      font-weight: bold;
    }
    .imgLight {
-      width: 318rem;
+      width: 318 * @toVw;
      position: absolute;
-      top: 2rem;
+      top: 2 * @toVw;
-      left: 30rem;
+      left: 30 * @toVw;
    }
  }
  .textBox1 {
    color: #b4513e;
-    font-size: 14rem;
+    font-size: 14 * @toVw;
    position: absolute;
-    top: 533rem;
+    top: 533 * @toVw;
    width: 100%;
    text-align: center;
  }
  .textBox2 {
    position: absolute;
-    top: 669rem;
+    top: 669 * @toVw;
    text-align: left;
    width: 100%;
-    font-size: 12rem;
+    font-size: 12 * @toVw;
    color: #424242;
    p {
-      width: 277rem;
+      width: 277 * @toVw;
-      margin-bottom: 16rem;
+      margin-bottom: 16 * @toVw;
-      line-height: 18rem;
+      line-height: 18 * @toVw;
    }
  }
  .van-popup {
@@ -373,36 +373,36 @@ export default {
    width: 100%;
    .close {
      position: absolute;
-      right: 40rem;
+      right: 40 * @toVw;
-      width: 25rem;
+      width: 25 * @toVw;
-      top: 70rem;
+      top: 70 * @toVw;
    }
    .main {
      width: 100%;
    }
    .price {
      position: absolute;
-      left: 150rem;
+      left: 150 * @toVw;
-      top: 290rem;
+      top: 290 * @toVw;
      color: #eb4e2c;
      font-weight: bold;
      span {
-        font-size: 50rem;
+        font-size: 50 * @toVw;
      }
    }
    .btn {
      display: inline-block;
      position: absolute;
-      left: 84rem;
+      left: 84 * @toVw;
-      top: 440rem;
+      top: 440 * @toVw;
-      width: 205rem;
+      width: 205 * @toVw;
-      height: 42rem;
+      height: 42 * @toVw;
      text-align: center;
-      line-height: 42rem;
+      line-height: 42 * @toVw;
      background: #f9ea7e;
      font-weight: bold;
      color: #eb4e2c;
-      border-radius: 90rem;
+      border-radius: 90 * @toVw;
    }
  }
 }

--- a/src/components/bindMobile.vue
+++ b/src/components/bindMobile.vue
@@ -193,17 +193,17 @@
  @import "../util/public";
  .banner-block{
    text-align: center;
-    margin: 40rem auto;
+    margin: 40 * @toVw auto;
    img{
-      width: 142rem;
+      width: 142 * @toVw;
    }
  }
  .form-block{
-    padding: 20rem;
+    padding: 20 * @toVw;
    .input-block{
-      height: 60rem;
+      height: 60 * @toVw;
      border-bottom: 1*@toVw solid #cccccc;
-      margin-bottom: 20rem;
+      margin-bottom: 20 * @toVw;
      position: relative;
      .right-btn{
        position: absolute;
@@ -211,7 +211,7 @@
        top: 17*@toVw;
      }
      input{
-        padding: 10rem 0;
+        padding: 10 * @toVw 0;
        font-size:14*@toVw;
        background: transparent;
        font-family:PingFangSC-Semibold;
@@ -262,9 +262,9 @@
  .btn-block{
    text-align: center;
    .btn{
-      width: 236rem;
+      width: 236 * @toVw;
-      height: 37rem;
+      height: 37 * @toVw;
-      line-height: 37rem;
+      line-height: 37 * @toVw;
      background:rgba(96,173,240,1);
      border-radius:4*@toVw;font-size:14*@toVw;
      font-family:PingFangSC-Semibold;
@@ -292,6 +292,6 @@
    left: 0;
    right: 0;
    bottom: 0;
-    width: 375rem;
+    width: 375 * @toVw;
  }
 </style>
--- a/src/components/buy/activity.vue
+++ b/src/components/buy/activity.vue
@@ -404,20 +404,20 @@
  }
  .inviteContainer {
    position: relative;
-    margin: 128 / 2 * @toVh 29 / 2rem  30rem 29 / 2rem;
+    margin: 128 / 2 * @toVh 29 / 2 * @toVw  30 * @toVw 29 / 2 * @toVw;
    min-height: 100px;
    text-align: center;
    background-color: #fff;
    border-radius: @borderRadius;
-    padding-top: 110 / 2rem;
+    padding-top: 110 / 2 * @toVw;
    padding-bottom: 38 / 2 * @toVh;
  }
  .invite-title {
    position: absolute;
-    width: 450 / 2rem;
+    width: 450 / 2 * @toVw;
    left: 50%;
-    margin-left: -450 / 4rem;
+    margin-left: -450 / 4 * @toVw;
-    top: -50 / 2rem;
+    top: -50 / 2 * @toVw;
    height: auto;
  }
  .invite-icon{
@@ -427,8 +427,8 @@
    right: -15*@toVw;
  }
  .invite-list {
-    margin-left: 32 / 2rem;
+    margin-left: 32 / 2 * @toVw;
-    margin-right: 32 / 2rem;
+    margin-right: 32 / 2 * @toVw;
    padding: 28 / 2 * @toVh;
    border: 2*@toVw solid #f6234e;
    border-radius: @borderRadius;
@@ -456,7 +456,7 @@
    color: #f6234e;
  }
  .p-list {
-    margin: 0 32 / 2rem;
+    margin: 0 32 / 2 * @toVw;
    padding: 0;
    li {
      display: flex;
@@ -464,10 +464,10 @@
      justify-content: space-between;
      align-items: center;
      margin: 0;
-      padding: 8rem;
+      padding: 8 * @toVw;
      img {
-        width: 74 / 2rem;
+        width: 74 / 2 * @toVw;
-        height: 74 / 2rem;
+        height: 74 / 2 * @toVw;
        margin-right: 5px;
        border-radius: 50%;
      }
@@ -477,19 +477,19 @@
    margin: 0;
  }
  .moreBtn {
-    width: 220 / 2rem;
+    width: 220 / 2 * @toVw;
    height: auto;
  }
  .invite-btn {
    position: fixed;
    bottom: 0;
    width: 100%;
-    padding-top: 10rem;
+    padding-top: 10 * @toVw;
    box-sizing: content-box;
    text-align: center;
    background-color: #fff;
    img {
-      width: 504 / 2rem;
+      width: 504 / 2 * @toVw;
      height: auto;
    }
  }

--- a/src/components/buy/activityInvite.vue
+++ b/src/components/buy/activityInvite.vue
@@ -10,7 +10,6 @@
        </div>
      </div>
      <img :src="dataURL" class="cvs-img" id="cvs-img"/>
      <div class="inviteBtn" id="inviteBtn">
        <div class="content-text">
        <h3>长按保存海报 或发送给好友</h3>
@@ -112,14 +111,14 @@
        //   '第一次接触线上启蒙英语，发现唱唱课程实在太棒啦，既省事宝宝学起来还方便，每天快乐中学习。现在他们这个90天课程在做活动，限时免费学，不花1分钱，学习90天，还送实物教具，机不可失，速来领取~'
        // ],
         comments: [
-          '英语这样启蒙效果太棒啦，唱唱这个90天启蒙课程做真不错，推荐给你们！打卡60天全额返学费，报课即送价值498元教具礼盒。数量有限，抢完即止！',
+          '英语这样启蒙效果太棒啦，唱唱这个启蒙课程做得真不错，推荐给你们！现在限时优惠，全勤完课还返66元现金，报名立送实物教具礼盒，包邮送到家。数量有限，先到先得！',
          // '这家英语启蒙做的很不错\n再也不用花高价去外教班跟培训机构\n在家里就可以直接进行英语启蒙\n21天帮助宝宝树立英语学习兴趣，让宝宝爱上英语\n原价2980元，现在只需要99元\n全勤打卡18天赠送价值100元天猫同款3大精品礼盒\n限量200份，仅售3天！',
-          '发现一款对宝宝英语启蒙特别有用的产品，每天10分钟宝宝已经爱上英语、爱唱英语。现在他们这个90天课程在做活动，打卡60天全额返学费。我体验过了，真的很好！快带着宝宝一起唱玩英语吧~',
+          '发现一款对宝宝英语启蒙特别有用的产品，每天10分钟宝宝已经爱上英语、爱唱英语。现在他们这个21天课程在做活动，我体验过了，真的很好！现限时限量优惠，速来报名~',
-          '第一次接触线上启蒙英语，发现唱唱课程实在太棒啦，既省事宝宝学起来还方便，每天在快乐中学习。现在他们这个90天课程在做活动，限时免费学，不花1分钱，学习90天，还送实物教具，机不可失，速来领取~'
+          '第一次接触线上启蒙英语，发现唱唱课程实在太棒啦，既省事宝宝学起来还方便，每天在快乐中学习。现在他们这个21天课程在做活动，全勤学习还返66元现金，报名立送教具礼盒，快来和我一起参与吧！'
        ],
        commentIndex: 0,
-        shareTitle: '钜惠来袭！唱唱启蒙英语90天课程免费学！',
+        shareTitle: '钜惠来袭！唱唱21天英语训练营，全勤学习返66元现金',
-        shareDesc: '报课即送价值498元教具礼盒，坚持打卡全额返学费，让0基础宝宝10分钟开口说英语，速来~'
+        shareDesc: '21天让宝宝爱上说英语，报课即送教具礼盒，包邮送到家！'
      }
    },
    mounted(){
@@ -405,7 +404,7 @@
  .marquee {
    display: block;
    width: 100%;
-    top: 12rem;
+    top: 12 * @toVw;
    left: 0;
    text-align: center;
    position: absolute;
@@ -423,27 +422,27 @@
    z-index: 1;
  }
  .tips {
-    width: 230rem;
+    width: 230 * @toVw;
-    margin-left: 163 / 2rem;
+    margin-left: 163 / 2 * @toVw;
-    margin-top: 10rem;
+    margin-top: 10 * @toVw;
  }
  .img-cvs{
    position: absolute;
    background: rgb(253, 168, 19);
-    width: 518 / 2rem;
+    width: 518 / 2 * @toVw;
    top: 25 * @toVh;
-    left: 113 / 2rem;
+    left: 113 / 2 * @toVw;
    .avatar-container {
      position: absolute;
      top: 8 * @toVh;
-      left: 8rem;
+      left: 8 * @toVw;
-      font-size: 12rem;
+      font-size: 12 * @toVw;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      img {
-        width: 30rem;
+        width: 30 * @toVw;
        margin-right: 5px;
        border-radius: 50%;
      }
@@ -453,27 +452,27 @@
    }
  .qrcode{
    position: absolute;
-    top: 690 / 2rem;
+    top: 690 / 2 * @toVw;
-    left: 15rem;
+    left: 15 * @toVw;
-    width: 60rem !important;
+    width: 60 * @toVw !important;
    /deep/ canvas{
-      width: 60rem !important;
+      width: 60 * @toVw !important;
      height: 60*@toVw !important;
    }
    /deep/ img{
-      width: 60rem !important;
+      width: 60 * @toVw !important;
-      height: 60rem !important;
+      height: 60 * @toVw !important;
    }
  }
  }
  #avatarImg{
-     max-height: 415rem;
+     max-height: 415 * @toVw;
  }
  .cvs-img{
    position: absolute;
-    width: 518 / 2rem;
+    width: 518 / 2 * @toVw;
    top: 25 * @toVh;
-    left: 113 / 2rem;
+    left: 113 / 2 * @toVw;
    z-index: 10;
  }
  .inviteBtn {
@@ -484,28 +483,28 @@
    .i-btn {
      position: relative;
-      width: 642 / 2rem;
+      width: 642 / 2 * @toVw;
-      height: 92 / 2rem;
+      height: 92 / 2 * @toVw;
      text-align: left;
-      font-size: 14rem;
+      font-size: 14 * @toVw;
      color: #fff;
      // background: url('../../assets/activity/red-bg.png') no-repeat center;
      background: #f5c10c;
-      border-radius: 25rem;
+      border-radius: 25 * @toVw;
      box-shadow: 2px 2px 2px #888888;
      background-size: cover;
      box-sizing: border-box;
      padding: 2px 58/2*@toVw;
      overflow: hidden;
      .i-env {
-        width: 36 / 2rem;;
+        width: 36 / 2 * @toVw;;
        height: auto;
        margin-right: 5px;
        margin-left: 0;
        z-index: 2;
      }
      .i-env-title {
-        font-size: 16rem;
+        font-size: 16 * @toVw;
        margin:0;
        z-index: 2;
      }
@@ -522,25 +521,25 @@
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
-    width: 642 / 2rem;
+    width: 642 / 2 * @toVw;
-    margin-top: 30 / 2rem;
+    margin-top: 30 / 2 * @toVw;
-    font-size: 14rem;
+    font-size: 14 * @toVw;
    color: #fff;
    img {
-      width: 96 / 2rem;
+      width: 96 / 2 * @toVw;
-      height: 96 / 2rem;
+      height: 96 / 2 * @toVw;
    }
  }
  .copyBtn {
    background: url('../../assets/activity/yellow-bg.png') no-repeat center;
    background-size: cover;
    box-sizing: border-box;
-    width: 567 / 2rem;
+    width: 567 / 2 * @toVw;
-    height: 92 / 2rem;
+    height: 92 / 2 * @toVw;
    text-align: center;
-    line-height: 92 / 2rem;
+    line-height: 92 / 2 * @toVw;
    color: #fff;
-    font-size: 20rem;
+    font-size: 20 * @toVw;
  }
  .flex-bt {
    display: flex;
@@ -550,20 +549,20 @@
  }
  .p-tips {
    color: #999;
-    font-size: 15rem;
+    font-size: 15 * @toVw;
  }
  .p-envelope {
-    width: 22rem;
+    width: 22 * @toVw;
-    height: 22rem;
+    height: 22 * @toVw;
-    margin-right: 12rem;
+    margin-right: 12 * @toVw;
  }
  .p-switch {
-    width: 15rem;
+    width: 15 * @toVw;
-    height: 15rem;
+    height: 15 * @toVw;
  }
  .p-comments {
    margin: 15px 0;
-    // height: 220rem;
+    // height: 220 * @toVw;
    overflow-y: scroll;
    p {
      line-height: 2;
@@ -573,16 +572,16 @@
    margin: 0;
  }
  .ref-content{
-    width: 299rem;
+    width: 299 * @toVw;
-    height: 564rem;
+    height: 564 * @toVw;
    background-size: 100% 100%;
    position: relative;
  .tips{
    font-size: 12px;
    position: absolute;
    color: #666;
-    right: 10rem;
+    right: 10 * @toVw;
-    top: 250rem;
+    top: 250 * @toVw;
    width: 1em;
  }
  }
@@ -775,7 +774,7 @@
  }
  .pop-fill{
-    width: 705 / 2rem;
+    width: 705 / 2 * @toVw;
    padding:30/7.5vw 30/7.5vw;
    box-sizing: border-box;
    font-size: 16px;
@@ -783,13 +782,13 @@
    .close {
      position: absolute;
      width: 100%;
-      bottom: -60rem;
+      bottom: -60 * @toVw;
      left: 0;
      text-align: center;
    }
    .close-pop {
-      width: 75 / 2rem;
+      width: 75 / 2 * @toVw;
-      height: 75 / 2rem;
+      height: 75 / 2 * @toVw;
    }
  .btn-block{
    margin-top: 30/7.5vw;
@@ -810,12 +809,12 @@
  }
  }
  .content-text{
-    margin-bottom: 15rem;
+    margin-bottom: 15 * @toVw;
    h3{
-      margin-bottom: 5rem;
+      margin-bottom: 5 * @toVw;
    };
    p{
-      font-size: 16rem;
+      font-size: 16 * @toVw;
    }
  }

--- a/src/components/buy/buy.vue
+++ b/src/components/buy/buy.vue
@@ -399,20 +399,20 @@
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(0,0,0,1);
-    line-height: 40rem;
+    line-height: 40 * @toVw;
    margin-top: 10*@toVw;
-    height: 40rem;
+    height: 40 * @toVw;
-    padding: 5*@toVw 15rem;
+    padding: 5*@toVw 15 * @toVw;
    background: white;
    img{
-      width: 16rem;
+      width: 16 * @toVw;
-      margin-left: 8rem;
+      margin-left: 8 * @toVw;
      vertical-align: middle;
    }
    .you-content{
      float: right;
      color: #999999;
-      font-size: 14rem;
+      font-size: 14 * @toVw;
    }
  }
  .orderCancel{
@@ -429,8 +429,8 @@
        font-size: 25* @toVw;
        color: #6C6C6C;
      }
-      p{font-size: 14* @toVw;color: #999999;margin: 20rem 0 0;}
+      p{font-size: 14* @toVw;color: #999999;margin: 20 * @toVw 0 0;}
-      .warn{font-size: 15* @toVw;color: #EC612A;margin: 10rem 0 25* @toVw;font-weight: bold;}
+      .warn{font-size: 15* @toVw;color: #EC612A;margin: 10 * @toVw 0 25* @toVw;font-weight: bold;}
      .btnbox{
        display: flex;
        .btn{width: 118* @toVw;height: 40* @toVw;line-height: 40* @toVw;font-size: 14* @toVw;color: white;border-radius: 20* @toVw;font-weight:bold; }
@@ -449,17 +449,17 @@
    opacity: 0;
  }
  .phone-block{
-    padding: 10rem;
+    padding: 10 * @toVw;
    text-align: center;
    background: #f8f8f8;
  }
  .phone-input{
-    width: 280rem;
+    width: 280 * @toVw;
    height: 30*@toVw;
-    border-radius: 8rem;
+    border-radius: 8 * @toVw;
    outline: none;
-    padding:0 10rem;
+    padding:0 10 * @toVw;
    border: 1px solid #e8e8e8;
    text-align: center;
  }

--- a/src/components/buy/buySuccess.vue
+++ b/src/components/buy/buySuccess.vue
@@ -132,19 +132,19 @@
  }
  .buy-success{
    background: #FFFEF9;
-    padding-top: 20rem;
+    padding-top: 20 * @toVw;
    .banner{
-      padding: 20rem;
+      padding: 20 * @toVw;
      background: white;
      text-align: center;
-      margin-bottom: 10rem;
+      margin-bottom: 10 * @toVw;
      img{
        width: 100%;
      }
    }
    .shop-block{
      background: white;
-      margin-top: 20rem;
+      margin-top: 20 * @toVw;
      .shop{
        padding: 20/7.5vw;
        border-bottom: 1px solid #d8d8d8;
@@ -189,9 +189,9 @@
      }
    }
    .button-block{
-      margin-top: 60rem;
+      margin-top: 60 * @toVw;
-      width: 315rem;
+      width: 315 * @toVw;
-      padding: 0 30rem;
+      padding: 0 30 * @toVw;
      border-radius: 100px;
      overflow: hidden;
      button{

--- a/src/components/buy/index.vue
+++ b/src/components/buy/index.vue
@@ -619,34 +619,34 @@ video {
 }
 .img-cvs {
  position: absolute;
-  width: 233rem;
+  width: 233 * @toVw;
-  top: 176rem;
+  top: 176 * @toVw;
-  left: 29rem;
+  left: 29 * @toVw;
  .qrcode {
    position: absolute;
-    top: 305rem;
+    top: 305 * @toVw;
-    left: 15rem;
+    left: 15 * @toVw;
-    width: 60rem;
+    width: 60 * @toVw;
  }
 }
 .cvs-img {
  position: absolute;
-  width: 233rem;
+  width: 233 * @toVw;
-  top: 176rem;
+  top: 176 * @toVw;
-  left: 29rem;
+  left: 29 * @toVw;
  z-index: 10;
 }
 .ref-content {
-  width: 299rem;
+  width: 299 * @toVw;
-  height: 564rem;
+  height: 564 * @toVw;
  background-size: 100% 100%;
  position: relative;
  .tips {
    font-size: 12px;
    position: absolute;
    color: #666;
-    right: 10rem;
+    right: 10 * @toVw;
-    top: 250rem;
+    top: 250 * @toVw;
    width: 1em;
  }
 }
@@ -749,7 +749,7 @@ video {
      }
    }
    .qa-block {
-      padding-bottom: 50rem;
+      padding-bottom: 50 * @toVw;
      img,
      video {
        max-width: 100%;
@@ -779,12 +779,12 @@ video {
  .couponBox {
    position: fixed;
    width: 100%;
-    height: 25rem;
+    height: 25 * @toVw;
    background: #FFE83C;
-    bottom: 70rem;
+    bottom: 70 * @toVw;
    text-align: center;
    color: #FF4D4F;
-    line-height: 25rem;
+    line-height: 25 * @toVw;
    font-size: 12px;
  }
  footer {
@@ -834,7 +834,7 @@ video {
          &.full {
            background: #dddddd;
            border-color: #dddddd;
-            line-height: 50rem;
+            line-height: 50 * @toVw;
          }
        }
      }

--- a/src/components/buy/inviteList.vue
+++ b/src/components/buy/inviteList.vue
@@ -76,24 +76,24 @@
    position: relative;
    text-align: center;
    border-radius: @borderRadius;
-    padding-top: 10 / 2rem;
+    padding-top: 10 / 2 * @toVw;
    padding-bottom: 38 / 2 * @toVh;
  }
  .invite-title {
    position: relative;
    width: 60%;
    height: auto;
-    margin: 20rem 0;
+    margin: 20 * @toVw 0;
  }
  .invite-list {
-    margin-left: 32 / 2rem;
+    margin-left: 32 / 2 * @toVw;
-    margin-right: 32 / 2rem;
+    margin-right: 32 / 2 * @toVw;
    padding: 28 / 2 * @toVh;
    border: 1px solid @red;
    border-radius: @borderRadius;
  .i-title {
    font-size: 14px;
-    margin: 10rem;
+    margin: 10 * @toVw;
  }
  .i-num {
    font-size: 18px;
@@ -130,10 +130,10 @@
    justify-content: space-between;
    align-items: center;
    margin: 0;
-    padding: 8rem;
+    padding: 8 * @toVw;
  img {
-    width: 74 / 2rem;
+    width: 74 / 2 * @toVw;
-    height: 74 / 2rem;
+    height: 74 / 2 * @toVw;
    border-radius: 50%;
    margin-right: 5px;
  }

--- a/src/components/buy/login.vue
+++ b/src/components/buy/login.vue
@@ -233,7 +233,7 @@
      line-height:47*@toVw;
      text-indent: 10*@toVw;
      // border: 1*@toVw solid #cccccc;
-      // margin-bottom: 26rem;
+      // margin-bottom: 26 * @toVw;
      display: -webkit-flex;
      justify-content:space-between;
      position: relative;
@@ -261,7 +261,7 @@
      input{
        flex: 1;
        width: 20vw;
-        padding: 10rem 0;
+        padding: 10 * @toVw 0;
        font-size:14*@toVw;
        background: transparent;
        font-family:PingFangSC-Semibold;

--- a/src/components/buy/mpShop.vue
+++ b/src/components/buy/mpShop.vue
@@ -375,34 +375,34 @@
  }
  .img-cvs{
    position: absolute;
-    width: 233rem;
+    width: 233 * @toVw;
-    top: 176rem;
+    top: 176 * @toVw;
-    left: 29rem;
+    left: 29 * @toVw;
    .qrcode{
      position: absolute;
-      top: 305rem;
+      top: 305 * @toVw;
-      left: 15rem;
+      left: 15 * @toVw;
-      width: 60rem;
+      width: 60 * @toVw;
    }
  }
  .cvs-img{
    position: absolute;
-    width: 233rem;
+    width: 233 * @toVw;
-    top: 176rem;
+    top: 176 * @toVw;
-    left: 29rem;
+    left: 29 * @toVw;
    z-index: 10;
  }
  .ref-content{
-    width: 299rem;
+    width: 299 * @toVw;
-    height: 564rem;
+    height: 564 * @toVw;
    background-size: 100% 100%;
    position: relative;
    .tips{
      font-size: 12px;
      position: absolute;
      color: #666;
-      right: 10rem;
+      right: 10 * @toVw;
-      top: 250rem;
+      top: 250 * @toVw;
      width: 1em;
    }
  }

--- a/src/components/buy/sale.vue
+++ b/src/components/buy/sale.vue
@@ -84,29 +84,29 @@
    position: fixed;
    top: 0;
    bottom: 0;
-    padding: 10rem;
+    padding: 10 * @toVw;
    left: 0;
    right: 0;
    z-index: 2;
    background: #eee;
    .sale-block{
-      width: 342rem;
+      width: 342 * @toVw;
-      height: 129rem;
+      height: 129 * @toVw;
      background-size: 100% 100%;
      color: white;
-      margin-bottom: 15rem;
+      margin-bottom: 15 * @toVw;
      position: relative;
      .money{
        .price-icon{
-          font-size: 30rem;
+          font-size: 30 * @toVw;
        }
-        height:67rem;
+        height:67 * @toVw;
-        font-size:48rem;
+        font-size:48 * @toVw;
        font-family:PingFang-SC-Bold;
        color:rgba(255,255,255,1);
        line-height:67* @toVw;
        position: absolute;
-        top: 20rem;
+        top: 20 * @toVw;
        right: 179* @toVw;
      }
      .tips{
@@ -118,31 +118,31 @@
        color:rgba(255,255,255,1);
        line-height:22* @toVw;
        position: absolute;
-        top: 33rem;
+        top: 33 * @toVw;
-        right: 15rem;
+        right: 15 * @toVw;
      }
      .btn{
-        width: 106rem;
+        width: 106 * @toVw;
-        height: 32rem;
+        height: 32 * @toVw;
        border-radius: 1000* @toVw;
        background: white;
        color: #F24364;
        text-align: center;
-        line-height: 32rem;
+        line-height: 32 * @toVw;
        position: absolute;
-        top: 72rem;
+        top: 72 * @toVw;
-        right: 16rem;
+        right: 16 * @toVw;
      }
    }
    .cleanBtn{
      position: absolute;
      text-align: center;
-      width: 350rem;
+      width: 350 * @toVw;
-      height: 40rem;
+      height: 40 * @toVw;
-      line-height: 40rem;
+      line-height: 40 * @toVw;
      background: white;
      border-radius: 4px;
-      bottom: 20rem;
+      bottom: 20 * @toVw;
      color: #666666;
    }
  }

--- a/src/components/buy/saleSuccess.vue
+++ b/src/components/buy/saleSuccess.vue
@@ -130,9 +130,9 @@
      }
    }
    .banner{
-      margin: 0 0 10rem 0;
+      margin: 0 0 10 * @toVw 0;
      background: white;
-      padding: 10rem;
+      padding: 10 * @toVw;
      img{
        width: 100%;
      }

--- a/src/components/buy/success.vue
+++ b/src/components/buy/success.vue
@@ -307,10 +307,10 @@
    height: 60 *@toVw;
  }
  .banner {
-    padding: 10rem;
+    padding: 10 * @toVw;
    background: white;
    text-align: center;
-    margin-bottom: 10rem;
+    margin-bottom: 10 * @toVw;
    img {
      width: 100%;
      display: block;
@@ -320,10 +320,10 @@
    width: 100%;
    text-align: center;
    .btn{
-      margin: 0 20rem;
+      margin: 0 20 * @toVw;
      background: #FF7171;
-      height: 38rem;
+      height: 38 * @toVw;
-      line-height: 38rem;
+      line-height: 38 * @toVw;
      border-radius: 1000px;
      font-size:16px;
      font-family:PingFangSC-Regular;

--- a/src/components/collection/audio.vue
+++ b/src/components/collection/audio.vue
--- a/src/components/exChange.vue
+++ b/src/components/exChange.vue
@@ -215,17 +215,17 @@
  @import "../util/public";
  .banner-block{
    text-align: center;
-    margin: 40rem auto;
+    margin: 40 * @toVw auto;
    img{
-      width: 142rem;
+      width: 142 * @toVw;
    }
  }
  .form-block{
-    padding: 20rem;
+    padding: 20 * @toVw;
    .input-block{
-      height: 60rem;
+      height: 60 * @toVw;
      border-bottom: 1*@toVw solid #cccccc;
-      margin-bottom: 20rem;
+      margin-bottom: 20 * @toVw;
      position: relative;
      .right-btn{
        position: absolute;
@@ -233,7 +233,7 @@
        top: 17*@toVw;
      }
      input{
-        padding: 10rem 0;
+        padding: 10 * @toVw 0;
        font-size:14*@toVw;
        background: transparent;
        font-family:PingFangSC-Semibold;
@@ -284,9 +284,9 @@
  .btn-block{
    text-align: center;
    .btn{
-      width: 236rem;
+      width: 236 * @toVw;
-      height: 37rem;
+      height: 37 * @toVw;
-      line-height: 37rem;
+      line-height: 37 * @toVw;
      background:rgba(96,173,240,1);
      border-radius:4*@toVw;font-size:14*@toVw;
      font-family:PingFangSC-Semibold;
@@ -314,6 +314,6 @@
    left: 0;
    right: 0;
    bottom: 0;
-    width: 375rem;
+    width: 375 * @toVw;
  }
 </style>
--- a/src/components/index.vue
+++ b/src/components/index.vue
--- a/src/components/indexPage/med.vue
+++ b/src/components/indexPage/med.vue
@@ -78,7 +78,7 @@ import audioPage from '../collection/audio'
 <style scoped lang="less">
  @import "../../util/public";
  .contentBox{
-  padding: 10rem 20rem;
+  padding: 10 * @toVw 20 * @toVw;
  background: white;
  margin: 10px 0;
  .commonTitle{
@@ -110,17 +110,17 @@ import audioPage from '../collection/audio'
    flex-wrap:wrap;
    .contentItem{
    width: 50%;
-    height: 191rem;
+    height: 191 * @toVw;
    margin-top: 18px;
    position: relative;
-    img{width: 107rem;height:107rem;position: absolute;top: 0;left: 27rem;border-radius:53rem ; }
+    img{width: 107 * @toVw;height:107 * @toVw;position: absolute;top: 0;left: 27 * @toVw;border-radius:53 * @toVw ; }
-    .white{position: absolute;background: white;width: 20px;height: 20px;border-radius: 10px;top:43.5rem ; left: 70.5rem;}
+    .white{position: absolute;background: white;width: 20px;height: 20px;border-radius: 10px;top:43.5 * @toVw ; left: 70.5 * @toVw;}
    .text{
-      width: 161rem;
+      width: 161 * @toVw;
-      height: 161rem;
+      height: 161 * @toVw;
-      margin-top: 30rem;
+      margin-top: 30 * @toVw;
      color: #999999;
-      padding-top: 90rem;
+      padding-top: 90 * @toVw;
      box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.2);
      border-radius:16px;
      box-sizing: border-box;

--- a/src/components/indexPage/zb.vue
+++ b/src/components/indexPage/zb.vue
@@ -62,7 +62,7 @@
 <style scoped lang="less">
  @import "../../util/public";
  .contentBox{
-  padding: 20rem 20rem;
+  padding: 20 * @toVw 20 * @toVw;
  background: white;
  margin: 10px 0;
  .commonTitle{
@@ -91,23 +91,23 @@
  .content{
    text-align: center;
    .contentItem{
-    margin-top: 18rem;
+    margin-top: 18 * @toVw;
    position: relative;
-    box-shadow: 1rem 2rem 5rem 0rem rgba(0,0,0,0.2);
+    box-shadow: 1 * @toVw 2 * @toVw 5 * @toVw 0 * @toVw rgba(0,0,0,0.2);
-    border-radius:16rem;
+    border-radius:16 * @toVw;
    overflow: hidden;
-    img{width: 335rem;height:150rem;  }
+    img{width: 335 * @toVw;height:150 * @toVw;  }
      .text{
        display: flex;
        display: -webkit-flex;
-        width: 335rem;
+        width: 335 * @toVw;
        color: #999999;
-        padding: 19rem 15rem;
+        padding: 19 * @toVw 15 * @toVw;
        box-sizing: border-box;
-        .title{font-size: 12rem;color: black;}
+        .title{font-size: 12 * @toVw;color: black;}
-        .line{border-right:1rem solid #999999;height: 20rem;margin: 0 10rem; }
+        .line{border-right:1 * @toVw solid #999999;height: 20 * @toVw;margin: 0 10 * @toVw; }
        .lookData{flex: 1;text-align: right;}
-        .enTitle{font-size: 12rem;}
+        .enTitle{font-size: 12 * @toVw;}
      }
    }
  }

--- a/src/components/inspector/inspectorActivit.vue
+++ b/src/components/inspector/inspectorActivit.vue
@@ -196,7 +196,7 @@
  .banner-block{
    text-align: center;
    position: relative;
-    top: -20rem;
+    top: -20 * @toVw;
    img{
      width: 100%;
    }
@@ -206,15 +206,15 @@
    z-index: 10;
    background: white;
    top: -42*@toVw;
-    padding: 20rem;
+    padding: 20 * @toVw;
    border-radius:20*@toVw; 
-    .tip{font-size: 12*@toVw;color: #FF7875;position: absolute;top:  74rem;left: 47rem;}
+    .tip{font-size: 12*@toVw;color: #FF7875;position: absolute;top:  74 * @toVw;left: 47 * @toVw;}
    .input-block{
      width: 273*@toVw;height: 47*@toVw;
      line-height:47*@toVw;
      text-indent: 10*@toVw;
      border: 1*@toVw solid #cccccc;
-      margin-bottom: 26rem;
+      margin-bottom: 26 * @toVw;
      position: relative;
      .img{
        position: absolute;
@@ -235,7 +235,7 @@
      }
      input{
-        padding: 10rem 0;
+        padding: 10 * @toVw 0;
        font-size:14*@toVw;
        background: transparent;
        font-family:PingFangSC-Semibold;
@@ -302,6 +302,6 @@
    left: 0;
    right: 0;
    bottom: 0;
-    width: 375rem;
+    width: 375 * @toVw;
  }
 </style>
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -814,15 +814,15 @@
      display: none;
    }
    .unit-li{
-      width: 68rem;
+      width: 68 * @toVw;
      text-align: center;
      margin-top: 2.6666vw;
-      height:60rem;
+      height:60 * @toVw;
-      border-radius:8rem 8rem  0*@toVw 0*@toVw;
+      border-radius:8 * @toVw 8 * @toVw  0*@toVw 0*@toVw;
      font-size:10* @toVw;
      font-family:PingFangSC-Semibold;
      font-weight:600;
-      padding-top: 12rem;
+      padding-top: 12 * @toVw;
      color:rgba(102,102,102,1);
      line-height:20* @toVw;
      img{
@@ -844,7 +844,7 @@
    -webkit-overflow-scrolling:touch;
    .card-block{
      box-shadow:0* @toVw 2* @toVw 5* @toVw 1* @toVw rgba(153,153,153,0.56);
-      margin: 20rem;
+      margin: 20 * @toVw;
      border-radius: 8*@toVw;
      img{
        width: 100%;
@@ -856,9 +856,9 @@
        display: -webkit-flex;
        justify-content: space-between;
        margin: auto;
-        padding: 10rem;
+        padding: 10 * @toVw;
        position: relative;
-        border-bottom: 1rem solid #EEEEEE;
+        border-bottom: 1 * @toVw solid #EEEEEE;
        .text-block{
          margin-left: 0;
        }
@@ -901,7 +901,7 @@
          font-size:14*@toVw;
          font-family:PingFang-SC-Medium;
          font-weight:500;
-          min-width: 170rem;
+          min-width: 170 * @toVw;
          overflow: hidden;
          white-space:nowrap;
          text-overflow:ellipsis;
@@ -919,11 +919,11 @@
    text-align: center;
    background: white;
    border-radius: 8*@toVw;
-    width: 276rem;
+    width: 276 * @toVw;
    .header{
-      width: 276rem;
+      width: 276 * @toVw;
-      height: 137rem;
+      height: 137 * @toVw;
-      padding-top: 36rem;
+      padding-top: 36 * @toVw;
      background-size: 100% 100%;
      position: relative;
      .title{
@@ -945,7 +945,7 @@
        left: 50%;
        margin-left: -46*@toVw;
        bottom: 20*@toVw;
-        line-height: 36rem;
+        line-height: 36 * @toVw;
        font-size:16*@toVw;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
@@ -1069,9 +1069,9 @@
        display: flex;
        display: -webkit-flex;
        text-align: center;
-        height:38rem;
+        height:38 * @toVw;
        line-height: 38*@toVw;
-        border-radius:8rem;
+        border-radius:8 * @toVw;
        font-size:12* @toVw;
        font-family:PingFangSC-Semibold;
        font-weight:600;
@@ -1169,7 +1169,7 @@
      text-align: center;
      background: white;
      border-radius: 8*@toVw;
-      width: 493rem;
+      width: 493 * @toVw;
      height: 220*@toVw;
      position: relative;
      .header{
@@ -1202,7 +1202,7 @@
          left: 50%;
          margin-left: -46*@toVw;
          top: 50*@toVw;
-          line-height: 36rem;
+          line-height: 36 * @toVw;
          font-size:16*@toVw;
          font-family:PingFang-SC-Bold;
          font-weight:bold;

--- a/src/components/map/mapDefault.vue
+++ b/src/components/map/mapDefault.vue
@@ -67,20 +67,20 @@
 <style scoped lang="less">
  @import "../../util/public";
  .map{
-    padding-bottom: 45rem;
+    padding-bottom: 45 * @toVw;
    .background{
      width: 375*@toVw;
    }
      .go20{
        position: absolute;
-        width: 134rem;
+        width: 134 * @toVw;
-        top: 196rem;
+        top: 196 * @toVw;
-        left: 42rem;
+        left: 42 * @toVw;
      }
    .title-d{
-      font-size: 12rem;
+      font-size: 12 * @toVw;
-      width:100rem ;
+      width:100 * @toVw ;
-      height: 30rem;
+      height: 30 * @toVw;
      color: #3c2700;
      position: absolute;
      top: 0;
@@ -91,19 +91,19 @@
      -webkit-box-orient: vertical;
      &.title-d-name1{
        top: 525 *@toVw;
-        right:40rem ;
+        right:40 * @toVw ;
      }
      &.title-d-name6{
        top: 1210 *@toVw;
-        left:26rem ;
+        left:26 * @toVw ;
      }
      &.title-d-name11{
        top: 1865 *@toVw;
-        right:32rem ;
+        right:32 * @toVw ;
      }
      &.title-d-name16{
        top: 2598 *@toVw;
-        right:39rem ;
+        right:39 * @toVw ;
      }
    }
    .island-block{
@@ -121,8 +121,8 @@
        bottom: 14*@toVw;
        left: 76*@toVw;
        &.day20{
-          width: 45rem;
+          width: 45 * @toVw;
-          left: 60rem;
+          left: 60 * @toVw;
        }
      }
      .star-block{
@@ -137,84 +137,84 @@
        animation: dodge 1s infinite;
      }
      &.land201{
-        top: 287rem;
+        top: 287 * @toVw;
-        right: 39rem;
+        right: 39 * @toVw;
      }
      &.land202{
-        top: 407rem;
+        top: 407 * @toVw;
-        left: 39rem;
+        left: 39 * @toVw;
      }
      &.land203{
-        top: 564rem;
+        top: 564 * @toVw;
-        right: 158rem;
+        right: 158 * @toVw;
      }
      &.land204{
-        top: 666rem;
+        top: 666 * @toVw;
-        right: 24rem;
+        right: 24 * @toVw;
      }
      &.land205{
-        top: 775rem;
+        top: 775 * @toVw;
-        left: 35rem;
+        left: 35 * @toVw;
      }
      &.land206{
-        top: 910rem;
+        top: 910 * @toVw;
-        right: 11rem;
+        right: 11 * @toVw;
      }
      &.land207{
-        top: 993rem;
+        top: 993 * @toVw;
-        left: 24rem;
+        left: 24 * @toVw;
      }
      &.land208{
-        top: 1131rem;
+        top: 1131 * @toVw;
-        right: 112rem;
+        right: 112 * @toVw;
      }
      &.land209{
-        top: 1301rem;
+        top: 1301 * @toVw;
-        right: 24rem;
+        right: 24 * @toVw;
      }
      &.land2010{
-        top: 1420rem;
+        top: 1420 * @toVw;
-        right: 169rem;
+        right: 169 * @toVw;
      }
      &.land2011{
-        top: 1602rem;
+        top: 1602 * @toVw;
-        right: 50rem;
+        right: 50 * @toVw;
      }
      &.land2012{
-        top: 1765rem;
+        top: 1765 * @toVw;
-        left: 48rem;
+        left: 48 * @toVw;
      }
      &.land2013{
-        top: 1908rem;
+        top: 1908 * @toVw;
-        right: 78rem;
+        right: 78 * @toVw;
      }
      &.land2014{
-        top: 2095rem;
+        top: 2095 * @toVw;
-        right: 38rem;
+        right: 38 * @toVw;
      }
      &.land2015{
-        top: 2208rem;
+        top: 2208 * @toVw;
-        left: 46rem;
+        left: 46 * @toVw;
      }
      &.land2016{
-        top: 2381rem;
+        top: 2381 * @toVw;
-        right: 81rem;
+        right: 81 * @toVw;
      }
      &.land2017{
-        top: 2549rem;
+        top: 2549 * @toVw;
-        left: 33rem;
+        left: 33 * @toVw;
      }
      &.land2018{
-        top: 2646rem;
+        top: 2646 * @toVw;
-        right: 69rem;
+        right: 69 * @toVw;
      }
      &.land2019{
-        top: 2799rem;
+        top: 2799 * @toVw;
-        right: 200rem;
+        right: 200 * @toVw;
      }
      &.land2020{
-        top: 2959rem;
+        top: 2959 * @toVw;
-        right: 47rem;
+        right: 47 * @toVw;
      }
    }
    @keyframes dodge

--- a/src/components/map/numberMap.vue
+++ b/src/components/map/numberMap.vue
@@ -61,20 +61,20 @@
 <style scoped lang="less">
  @import "../../util/public";
  .map{
-    padding-bottom: 45rem;
+    padding-bottom: 45 * @toVw;
    .background{
      width: 375*@toVw;
    }
    .go20{
      position: absolute;
-      width: 134rem;
+      width: 134 * @toVw;
-      top: 196rem;
+      top: 196 * @toVw;
-      left: 42rem;
+      left: 42 * @toVw;
    }
    .title-d{
-      font-size: 12rem;
+      font-size: 12 * @toVw;
-      width:100rem ;
+      width:100 * @toVw ;
-      height: 30rem;
+      height: 30 * @toVw;
      color: #3c2700;
      position: absolute;
      top: 0;
@@ -85,19 +85,19 @@
      -webkit-box-orient: vertical;
      &.title-d-name1{
        top: 525 *@toVw;
-        right:40rem ;
+        right:40 * @toVw ;
      }
      &.title-d-name6{
        top: 1210 *@toVw;
-        left:26rem ;
+        left:26 * @toVw ;
      }
      &.title-d-name11{
        top: 1865 *@toVw;
-        right:32rem ;
+        right:32 * @toVw ;
      }
      &.title-d-name16{
        top: 2598 *@toVw;
-        right:39rem ;
+        right:39 * @toVw ;
      }
    }
    .island-block{
@@ -105,14 +105,14 @@
      width: 105*@toVw;
      text-align: center;
      .land{
-        width: 70rem;
+        width: 70 * @toVw;
        position: relative;
        z-index: 1;
      }
      .shadow{
        width: 100%;
        left: 0;
-        bottom: -20rem;
+        bottom: -20 * @toVw;
        z-index: 0;
        position: absolute;
@@ -124,7 +124,7 @@
        bottom: -20*@toVw;
        img{
          &:nth-child(2){
-            width: 30rem;
+            width: 30 * @toVw;
            margin: 0 -5*@toVw;
          }
          width: 20*@toVw;
@@ -134,114 +134,114 @@
        animation: dodge 1s infinite;
      }
      &.land201{
-        top: 287rem;
+        top: 287 * @toVw;
-        right: 90rem;
+        right: 90 * @toVw;
        .land{
-          width: 52rem;
+          width: 52 * @toVw;
        }
      }
      &.land202{
-        top: 407rem;
+        top: 407 * @toVw;
-        left: 19rem;
+        left: 19 * @toVw;
        .land{
-          width: 66rem;
+          width: 66 * @toVw;
        }
      }
      &.land203{
-        top: 564rem;
+        top: 564 * @toVw;
-        right: 188rem;
+        right: 188 * @toVw;
        .land{
-          width: 55rem;
+          width: 55 * @toVw;
        }
      }
      &.land204{
-        top: 666rem;
+        top: 666 * @toVw;
-        right: 54rem;
+        right: 54 * @toVw;
        .land{
-          width: 54rem;
+          width: 54 * @toVw;
        }
      }
      &.land205{
-        top: 775rem;
+        top: 775 * @toVw;
-        left: 15rem;
+        left: 15 * @toVw;
        .land{
-          width: 64rem;
+          width: 64 * @toVw;
        }
      }
      &.land206{
-        top: 910rem;
+        top: 910 * @toVw;
-        right: 31rem;
+        right: 31 * @toVw;
        .land{
-          width: 61rem;
+          width: 61 * @toVw;
        }
      }
      &.land207{
-        top: 993rem;
+        top: 993 * @toVw;
-        left: 4rem;
+        left: 4 * @toVw;
        .land{
-          width: 70rem;
+          width: 70 * @toVw;
        }
      }
      &.land208{
-        top: 1131rem;
+        top: 1131 * @toVw;
-        right: 142rem;
+        right: 142 * @toVw;
        .land{
-          width: 57rem;
+          width: 57 * @toVw;
        }
      }
      &.land209{
-        top: 1301rem;
+        top: 1301 * @toVw;
-        right: 61rem;
+        right: 61 * @toVw;
        .land{
-          width: 56rem;
+          width: 56 * @toVw;
        }
      }
      &.land2010{
-        top: 1420rem;
+        top: 1420 * @toVw;
-        right: 169rem;
+        right: 169 * @toVw;
        .land{
-          width: 103rem;
+          width: 103 * @toVw;
        }
      }
      &.land2011{
-        top: 1602rem;
+        top: 1602 * @toVw;
-        right: 50rem;
+        right: 50 * @toVw;
      }
      &.land2012{
-        top: 1765rem;
+        top: 1765 * @toVw;
-        left: 48rem;
+        left: 48 * @toVw;
      }
      &.land2013{
-        top: 1908rem;
+        top: 1908 * @toVw;
-        right: 78rem;
+        right: 78 * @toVw;
      }
      &.land2014{
-        top: 2095rem;
+        top: 2095 * @toVw;
-        right: 38rem;
+        right: 38 * @toVw;
      }
      &.land2015{
-        top: 2208rem;
+        top: 2208 * @toVw;
-        left: 46rem;
+        left: 46 * @toVw;
      }
      &.land2016{
-        top: 2381rem;
+        top: 2381 * @toVw;
-        right: 81rem;
+        right: 81 * @toVw;
      }
      &.land2017{
-        top: 2549rem;
+        top: 2549 * @toVw;
-        left: 33rem;
+        left: 33 * @toVw;
      }
      &.land2018{
-        top: 2646rem;
+        top: 2646 * @toVw;
-        right: 69rem;
+        right: 69 * @toVw;
      }
      &.land2019{
-        top: 2799rem;
+        top: 2799 * @toVw;
-        right: 200rem;
+        right: 200 * @toVw;
      }
      &.land2020{
-        top: 2959rem;
+        top: 2959 * @toVw;
-        right: 47rem;
+        right: 47 * @toVw;
      }
    }
    @keyframes dodge

--- a/src/components/map/once.vue
+++ b/src/components/map/once.vue
@@ -64,7 +64,7 @@
 <style scoped lang="less">
  @import "../../util/public";
  .map{
-    padding-bottom: 45rem;
+    padding-bottom: 45 * @toVw;
    .background{
      width: 375*@toVw;
    }
@@ -75,9 +75,9 @@
      width: 195*@toVw;
    }
    .title-d{
-      font-size: 12rem;
+      font-size: 12 * @toVw;
-      width:100rem ;
+      width:100 * @toVw ;
-      height: 30rem;
+      height: 30 * @toVw;
      color: #3c2700;
      position: absolute;
      top: 0;
@@ -88,19 +88,19 @@
      -webkit-box-orient: vertical;
      &.title-d-name1{
        top: 525 *@toVw;
-        right:40rem ;
+        right:40 * @toVw ;
      }
      &.title-d-name6{
        top: 1210 *@toVw;
-        left:26rem ;
+        left:26 * @toVw ;
      }
      &.title-d-name11{
        top: 1865 *@toVw;
-        right:32rem ;
+        right:32 * @toVw ;
      }
      &.title-d-name16{
        top: 2598 *@toVw;
-        right:39rem ;
+        right:39 * @toVw ;
      }
    }
    .island-block{

--- a/src/components/map/secMap.vue
+++ b/src/components/map/secMap.vue
@@ -980,15 +980,15 @@ export default {
      display: none;
    }
    .unit-li{
-      width: 68rem;
+      width: 68 * @toVw;
      text-align: center;
      margin-top: 2.6666vw;
-      height:60rem;
+      height:60 * @toVw;
-      border-radius:8rem 8rem  0*@toVw 0*@toVw;
+      border-radius:8 * @toVw 8 * @toVw  0*@toVw 0*@toVw;
      font-size:10* @toVw;
      font-family:PingFangSC-Semibold;
      font-weight:600;
-      padding-top: 12rem;
+      padding-top: 12 * @toVw;
      color:rgba(102,102,102,1);
      line-height:20* @toVw;
      img{
@@ -1010,7 +1010,7 @@ export default {
    -webkit-overflow-scrolling:touch;
    .card-block{
      box-shadow:0* @toVw 2* @toVw 5* @toVw 1* @toVw rgba(153,153,153,0.56);
-      margin: 20rem;
+      margin: 20 * @toVw;
      border-radius: 8*@toVw;
      overflow: hidden;
      position: relative;
@@ -1023,12 +1023,12 @@ export default {
        height: 140*@toVw;}
        .content{position: absolute;width:100% ;z-index: 1;color: white;
        height: 140*@toVw;
-          p{font-size: 12rem;margin-top: 51rem;margin-left:19rem;  }
+          p{font-size: 12 * @toVw;margin-top: 51 * @toVw;margin-left:19 * @toVw;  }
-          div{font-size: 17rem; margin: 10rem;border: 1px solid white;border-radius: 19rem;
+          div{font-size: 17 * @toVw; margin: 10 * @toVw;border: 1px solid white;border-radius: 19 * @toVw;
-          width: 313rem;height: 38rem;
+          width: 313 * @toVw;height: 38 * @toVw;
-          line-height:38rem;  
+          line-height:38 * @toVw;  
-          text-indent: 9rem;
+          text-indent: 9 * @toVw;
-            span{display: inline-block;width: 76rem;
+            span{display: inline-block;width: 76 * @toVw;
            height: 38* @toVw;background: #FF4F59;
            float: right;
            border-radius: 19*@toVw; 
@@ -1046,9 +1046,9 @@ export default {
        display: -webkit-flex;
        justify-content: space-between;
        margin: auto;
-        padding: 10rem;
+        padding: 10 * @toVw;
        position: relative;
-        border-bottom: 1rem solid #EEEEEE;
+        border-bottom: 1 * @toVw solid #EEEEEE;
        .text-block{
          margin-left: 0;
        }
@@ -1094,7 +1094,7 @@ export default {
          font-size:14*@toVw;
          font-family:PingFang-SC-Medium;
          font-weight:500;
-          min-width: 170rem;
+          min-width: 170 * @toVw;
          overflow: hidden;
          white-space:nowrap;
          text-overflow:ellipsis;
@@ -1120,11 +1120,11 @@ export default {
    text-align: center;
    background: white;
    border-radius: 8*@toVw;
-    width: 276rem;
+    width: 276 * @toVw;
    .header{
-      width: 276rem;
+      width: 276 * @toVw;
-      height: 137rem;
+      height: 137 * @toVw;
-      padding-top: 36rem;
+      padding-top: 36 * @toVw;
      background-size: 100% 100%;
      position: relative;
      .title{
@@ -1146,7 +1146,7 @@ export default {
        left: 50%;
        margin-left: -46*@toVw;
        bottom: 20*@toVw;
-        line-height: 36rem;
+        line-height: 36 * @toVw;
        font-size:16*@toVw;
        font-family:PingFang-SC-Bold;
        font-weight:bold;

--- a/src/components/mine/activityAddr.vue
+++ b/src/components/mine/activityAddr.vue
@@ -68,11 +68,11 @@ export default {
 .address2 {
  background: #f5f5f9;
  .van-button{
-    margin-left: 20rem;
+    margin-left: 20 * @toVw;
  }
  .head{
-    i{display: inline-block;border-radius: 50%; width: 11rem;height: 11rem; }
+    i{display: inline-block;border-radius: 50%; width: 11 * @toVw;height: 11 * @toVw; }
-    padding: 13rem;
+    padding: 13 * @toVw;
    background: white;
    border-bottom: 1px solid #E2E2E2;
    color: #666666;
@@ -89,28 +89,28 @@ export default {
  }
  .content {
    background: white;
-    padding: 13rem 0 13rem 26rem;
+    padding: 13 * @toVw 0 13 * @toVw 26 * @toVw;
    .top {
-      line-height: 28rem;
+      line-height: 28 * @toVw;
      color: #333333;
      font-weight: bold;
-      font-size: 17rem;
+      font-size: 17 * @toVw;
    }
    .bottom {
      color: #666666;
-      font-size: 14rem;
+      font-size: 14 * @toVw;
-      line-height: 20rem;
+      line-height: 20 * @toVw;
    }
    .timeInfo{
      display: flex;
      .text{
        color: #999999;
-        font-size: 12rem;
+        font-size: 12 * @toVw;
        margin-left: 0;
-        line-height: 26rem;
+        line-height: 26 * @toVw;
      }
      .right{
-        margin-top: 43rem;
+        margin-top: 43 * @toVw;
      }
      .van-button--info{
        background: white;
@@ -131,10 +131,10 @@ export default {
    -webkit-transform: scale(1,0.5);
  }
  .tip {
-    padding: 10rem 20rem;
+    padding: 10 * @toVw 20 * @toVw;
    color: #999999;
-    font-size: 12rem;
+    font-size: 12 * @toVw;
-    line-height: 23rem;
+    line-height: 23 * @toVw;
  }
 }

--- a/src/components/mine/address.vue
+++ b/src/components/mine/address.vue
@@ -50,17 +50,17 @@ export default {
  background: #f5f5f9;
  .content {
    background: white;
-    padding: 10rem 20rem;
+    padding: 10 * @toVw 20 * @toVw;
    .top {
-      line-height: 28rem;
+      line-height: 28 * @toVw;
      color: #333333;
      font-weight: bold;
-      font-size: 17rem;
+      font-size: 17 * @toVw;
    }
    .bottom {
      color: #666666;
-      font-size: 14rem;
+      font-size: 14 * @toVw;
-      line-height: 20rem;
+      line-height: 20 * @toVw;
    }
  }
  .linebox{
@@ -71,10 +71,10 @@ export default {
    display: block;
  }
  .tip {
-    padding: 10rem 20rem;
+    padding: 10 * @toVw 20 * @toVw;
    color: #999999;
-    font-size: 12rem;
+    font-size: 12 * @toVw;
-    line-height: 23rem;
+    line-height: 23 * @toVw;
  }
 }
 @media screen and (orientation: landscape) {

--- a/src/components/mine/addressEdit.vue
+++ b/src/components/mine/addressEdit.vue
@@ -196,8 +196,8 @@ export default {
    color: #333333;
  }
  .btn {
-    margin-top: 50rem;
+    margin-top: 50 * @toVw;
-    padding: 0 34rem;
+    padding: 0 34 * @toVw;
  }
  #mtcell {
    //  background: red;
@@ -225,22 +225,22 @@ export default {
  .holder {
    color: rgb(204, 204, 204);
    position: absolute;
-    top: 10rem;
+    top: 10 * @toVw;
-    left: 108rem;
+    left: 108 * @toVw;
  }
  // .mint-cell-value{color: #333333;}
  .head {
    i {
      display: inline-block;
      border-radius: 50%;
-      width: 11rem;
+      width: 11 * @toVw;
-      height: 11rem;
+      height: 11 * @toVw;
    }
-    padding: 13rem;
+    padding: 13 * @toVw;
    background: white;
    border-bottom: 1px solid #e2e2e2;
    color: #666666;
-    font-size: 14rem;
+    font-size: 14 * @toVw;
  }
  .now {
    i {
@@ -257,32 +257,32 @@ export default {
  }
  .content {
    background: white;
-    padding: 13rem 0 13rem 33rem;
+    padding: 13 * @toVw 0 13 * @toVw 33 * @toVw;
    .top {
-      line-height: 28rem;
+      line-height: 28 * @toVw;
      color: #333333;
      font-weight: bold;
-      font-size: 17rem;
+      font-size: 17 * @toVw;
    }
    .bottom {
      color: #666666;
-      font-size: 14rem;
+      font-size: 14 * @toVw;
-      line-height: 20rem;
+      line-height: 20 * @toVw;
    }
    .timeInfo {
      display: flex;
      .text {
        color: #999999;
-        font-size: 12rem;
+        font-size: 12 * @toVw;
        margin-left: 0;
-        line-height: 26rem;
+        line-height: 26 * @toVw;
      }
      .right {
-        margin-top: 43rem;
+        margin-top: 43 * @toVw;
      }
      .van-button--info {
        background: white;
-        width: 74rem;
+        width: 74 * @toVw;
        color: #60adf0;
        border-color: #60adf0;
      }
@@ -295,13 +295,13 @@ export default {
    width: 100%;
    display: block;
    border-bottom: 1px solid #e2e2e2;
-    margin: 12rem 0;
+    margin: 12 * @toVw 0;
  }
  .tip {
-    padding: 10rem 20rem;
+    padding: 10 * @toVw 20 * @toVw;
    color: #999999;
-    font-size: 12rem;
+    font-size: 12 * @toVw;
-    line-height: 23rem;
+    line-height: 23 * @toVw;
  }
 }
 @media screen and (orientation: landscape) {

--- a/src/components/mine/index.vue
+++ b/src/components/mine/index.vue
@@ -152,83 +152,83 @@ export default {
  .head {
    position: relative;
    .contentBox {
-      width: 335rem;
+      width: 335 * @toVw;
-      height: 104rem;
+      height: 104 * @toVw;
      background: white;
      box-shadow: 0px 1px 6px 0px rgba(64, 169, 255, 0.3);
-      border-radius: 8rem;
+      border-radius: 8 * @toVw;
      position: absolute;
-      top: 100rem;
+      top: 100 * @toVw;
-      left: 20rem;
+      left: 20 * @toVw;
      display: flex;
      .left {
-        // min-width: 90rem;
+        // min-width: 90 * @toVw;
-        width: 160rem;
+        width: 160 * @toVw;
        margin-right: 0;
-        margin-left: 0rem;
+        margin-left: 0 * @toVw;
-        padding-left: 16rem;
+        padding-left: 16 * @toVw;
        box-sizing: border-box;
        // margin-left: 26* @toVw;
        p {
-          max-width: 120rem;
+          max-width: 120 * @toVw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
-          font-size: 20rem;
+          font-size: 20 * @toVw;
-          margin-left: 0rem;
+          margin-left: 0 * @toVw;
-          line-height: 28rem;
+          line-height: 28 * @toVw;
          text-align: center;
          // text-align: left;
        }
      }
      .right {
-        margin-left: 0rem;
+        margin-left: 0 * @toVw;
      }
    }
    .bg {
      width: 100%;
    }
    .ref-block {
-      width: 25rem;
+      width: 25 * @toVw;
-      height: 25rem;
+      height: 25 * @toVw;
      position: absolute;
-      right: 28rem;
+      right: 28 * @toVw;
-      top: 56rem;
+      top: 56 * @toVw;
      img {
        width: 100%;
      }
    }
-    width: 375rem;
+    width: 375 * @toVw;
-    height: 160rem;
+    height: 160 * @toVw;
    background-size: 100% 100%;
    color: white;
    text-align: center;
    .header-icon {
-      width: 84rem;
+      width: 84 * @toVw;
-      height: 84rem;
+      height: 84 * @toVw;
      border-radius: 10000px;
-      border: 3rem solid white;
+      border: 3 * @toVw solid white;
      position: absolute;
-      top: -40rem;
+      top: -40 * @toVw;
-      left: 30rem;
+      left: 30 * @toVw;
    }
    .name {
-      font-size: 20rem;
+      font-size: 20 * @toVw;
      font-family: PingFang-SC-Medium;
      font-weight: normal;
-      line-height: 20rem;
+      line-height: 20 * @toVw;
-      margin-top: 42rem;
+      margin-top: 42 * @toVw;
      color: black;
      font-weight: 500;
    }
    .id {
-      font-size: 14rem;
+      font-size: 14 * @toVw;
      // font-family: PingFang-SC-Medium;
      color: #808080;
      border-radius: 200px;
-      line-height: 17rem;
+      line-height: 17 * @toVw;
      background-color: white;
-      margin-top: 14rem;
+      margin-top: 14 * @toVw;
      text-align: left;
      // font-weight: 300;
      // padding: 10 20*@toVw 0 ;
@@ -237,24 +237,24 @@ export default {
  .outBox {
    background: white;
    box-shadow: 0px 1px 6px 0px rgba(64, 169, 255, 0.3);
-    width: 335rem;
+    width: 335 * @toVw;
    // width: 412px;
-    border-radius: 8rem;
+    border-radius: 8 * @toVw;
-    margin-top: 62rem;
+    margin-top: 62 * @toVw;
    overflow: hidden;
    .list {
      .van-cell {
-        font-size: 16rem;
+        font-size: 16 * @toVw;
-        padding-top: 12rem;
+        padding-top: 12 * @toVw;
-        padding-bottom: 12rem;
+        padding-bottom: 12 * @toVw;
        img {
-          margin-right: 12rem;
+          margin-right: 12 * @toVw;
-          width: 28rem;
+          width: 28 * @toVw;
          // margin:auto 0 ;
-          height: 28rem;
+          height: 28 * @toVw;
        }
        .starNum {
-          font-size: 13rem;
+          font-size: 13 * @toVw;
        }
      }
      .van-cell:not(:last-child)::after {
@@ -265,7 +265,7 @@ export default {
 }
 @media screen and (orientation: landscape) {
  .landscape {
-    height: 100rem;
+    height: 100 * @toVw;
  }
  .mine {
    min-height: 100vh;

--- a/src/components/myGoodsList.vue
+++ b/src/components/myGoodsList.vue
@@ -93,25 +93,25 @@
    width: 335* @toVw;
    box-shadow:0px 2px 4px 0px rgba(191,191,191,0.5);
    border-radius:8*@toVw;
-    margin-bottom: 10rem;
+    margin-bottom: 10 * @toVw;
    .banner{
      width: 100%;
-      height: 236rem;
+      height: 236 * @toVw;
      border-radius:8*@toVw;
    }
    .content{
-      font-size:20rem;
+      font-size:20 * @toVw;
      font-family:PingFang-SC-Medium;
      font-weight:normal;
      color:rgba(51,51,51,1);
-      padding: 8rem;
+      padding: 8 * @toVw;
-      line-height:28rem;
+      line-height:28 * @toVw;
      .start-time{
-        font-size:12rem;
+        font-size:12 * @toVw;
        font-family:PingFang-SC-Medium;
        font-weight:normal;
        color:rgba(51,51,51,1);
-        line-height:17rem;
+        line-height:17 * @toVw;
      }
    }
  }

--- a/src/components/newLesson/audio.vue
+++ b/src/components/newLesson/audio.vue
@@ -681,7 +681,7 @@
      img{
        width: 188*@toVw;
      height: 188*@toVw;
-        border-radius: 999rem;
+        border-radius: 999 * @toVw;
      }
    }
    .title-block{
@@ -705,7 +705,7 @@
      }
    }
    .range-block{
-      width: 250rem;
+      width: 250 * @toVw;
      margin-top: 10*@toVw;
      .time-block{
        font-size:12*@toVw;
@@ -864,7 +864,7 @@
  }
  .parent-finish{
    // position: absolute;
-    // bottom: 0rem;
+    // bottom: 0 * @toVw;
    width: 100%;
    left: 0;
    top: 430*@toVw;
@@ -947,7 +947,7 @@
          border:4px solid rgba(255,255,255,1);
          img{
            width: 100%;
-            border-radius: 999rem;
+            border-radius: 999 * @toVw;
          }
        }
        .title-block{

--- a/src/components/newLesson/shareGoods.vue
+++ b/src/components/newLesson/shareGoods.vue
@@ -266,18 +266,18 @@ export default {
 @import "../../util/public";
 @-webkit-keyframes spin {
  from {
-    -webkit-transform: translateY(-3rem);
+    -webkit-transform: translateY(-3 * @toVw);
  }
  to {
-    -webkit-transform: translateY(3rem);
+    -webkit-transform: translateY(3 * @toVw);
  }
 }
 @keyframes spin {
  from {
-    transform: translateY(-3rem);
+    transform: translateY(-3 * @toVw);
  }
  to {
-    transform: translateY(3rem);
+    transform: translateY(3 * @toVw);
  }
 }
 .move {
@@ -303,11 +303,11 @@ export default {
  position: relative;
  .textBox {
    position: absolute;
-    top: 340rem;
+    top: 340 * @toVw;
    left: 0;
    text-align: center;
    color: #b75b3a;
-    font-size: 15rem;
+    font-size: 15 * @toVw;
    width: 100%;
    div {
      color: #55343a;
@@ -320,14 +320,14 @@ export default {
      color: #55343a;
    }
    .top {
-      font-size: 17rem;
+      font-size: 17 * @toVw;
    }
    .btn {
-      font-size: 15rem;
+      font-size: 15 * @toVw;
    }
  }
  .yearclass {
-    top: 350rem;
+    top: 350 * @toVw;
    div{color: #b75b3a;}
    .oldprice {
      text-decoration: line-through;
@@ -336,79 +336,79 @@ export default {
  }
  .iknow {
    position: absolute;
-    top: 415rem;
+    top: 415 * @toVw;
-    width: 265rem;
+    width: 265 * @toVw;
    // height: 44*@toVw;
-    left: 58rem;
+    left: 58 * @toVw;
    -webkit-animation: myfirst 3s linear infinite;
  }
  .head {
    position: absolute;
-    width: 60rem;
+    width: 60 * @toVw;
-    height: 60rem;
+    height: 60 * @toVw;
-    top: 42rem;
+    top: 42 * @toVw;
-    left: 159rem;
+    left: 159 * @toVw;
-    border-radius: 100rem;
+    border-radius: 100 * @toVw;
  }
  .tip2 {
    position: absolute;
-    width: 350rem;
+    width: 350 * @toVw;
    color: #55343a;
-    font-size: 15rem;
+    font-size: 15 * @toVw;
    text-align: center;
-    top: 110rem;
+    top: 110 * @toVw;
-    left: 13rem;
+    left: 13 * @toVw;
  }
  .title {
    position: absolute;
-    width: 225rem;
+    width: 225 * @toVw;
-    height: 54rem;
+    height: 54 * @toVw;
    background-size: 100% 100%;
-    top: 175rem;
+    top: 175 * @toVw;
-    left: 75rem;
+    left: 75 * @toVw;
    text-align: center;
    color: white;
-    font-size: 20rem;
+    font-size: 20 * @toVw;
-    line-height: 48rem;
+    line-height: 48 * @toVw;
  }
  .day {
    position: absolute;
-    top: 172rem;
+    top: 172 * @toVw;
    width: 100%;
    text-align: center;
    color: white;
-    font-size: 54rem;
+    font-size: 54 * @toVw;
    font-family: PingFangSC-Semibold;
    font-weight: bold;
    p {
-      font-size: 20rem;
+      font-size: 20 * @toVw;
      font-family: PingFangSC-Semibold;
      // font-weight:bold;
-      line-height: 6rem;
+      line-height: 6 * @toVw;
      font-weight: 300;
      color: white;
    }
  }
  .Fml {
    position: absolute;
-    top: 284rem;
+    top: 284 * @toVw;
-    left: 106rem;
+    left: 106 * @toVw;
-    font-size: 15rem;
+    font-size: 15 * @toVw;
    color: #55343a;
    text-align: center;
    p {
-      line-height: 36rem;
+      line-height: 36 * @toVw;
      color: #55343a;
    }
    div {
    }
    .line {
      width: 95%;
-      height: 4rem;
+      height: 4 * @toVw;
      background: #f6c9a2;
      opacity: 0.44;
      position: relative;
-      top: -5rem;
+      top: -5 * @toVw;
    }
    span {
      color: #e17640;
@@ -416,36 +416,36 @@ export default {
  }
  .nav {
    position: absolute;
-    top: 512rem;
+    top: 512 * @toVw;
-    left: 108rem;
+    left: 108 * @toVw;
    z-index: 20;
-    width: 157rem;
+    width: 157 * @toVw;
-    height: 30rem;
+    height: 30 * @toVw;
-    line-height: 30rem;
+    line-height: 30 * @toVw;
-    border-radius: 15rem;
+    border-radius: 15 * @toVw;
    // background: #F98F55;
    text-align: center;
    img {
-      width: 10rem;
+      width: 10 * @toVw;
    }
    color: white;
  }
 }
 .good-content {
  background: #f4caa2;
-  padding: 0 15rem 80rem 15rem;
+  padding: 0 15 * @toVw 80 * @toVw 15 * @toVw;
  position: relative;
-  top: -5rem;
+  top: -5 * @toVw;
  .content {
    // background: white;
-    border-radius: 8rem;
+    border-radius: 8 * @toVw;
    overflow: hidden;
    // padding: 10*@toVw;
  }
 }
 .btn-block {
  position: fixed;
-  padding: 10rem 0;
+  padding: 10 * @toVw 0;
  left: 0;
  width: 100%;
  background: white;
@@ -453,9 +453,9 @@ export default {
  transition: all 0.5s;
  bottom: 0;
  .lastTime {
-    top: -30rem;
+    top: -30 * @toVw;
-    height: 30rem;
+    height: 30 * @toVw;
-    line-height: 30rem;
+    line-height: 30 * @toVw;
    color: #ff785d;
    background: #ffe543;
    position: absolute;
@@ -465,25 +465,25 @@ export default {
  }
  .btnBox {
    display: flex;
-    padding: 0 29rem;
+    padding: 0 29 * @toVw;
    .slg {
      background: white;
      color: #666666;
      border: 1px solid #666666;
      box-sizing: border-box;
-      margin-right: 10rem;
+      margin-right: 10 * @toVw;
    }
  }
  .btn {
-    width: 287rem;
+    width: 287 * @toVw;
-    height: 44rem;
+    height: 44 * @toVw;
    margin: auto;
    background: #ff785d;
-    border-radius: 100rem;
+    border-radius: 100 * @toVw;
    color: white;
-    line-height: 44rem;
+    line-height: 44 * @toVw;
    text-align: center;
-    font-size: 18rem;
+    font-size: 18 * @toVw;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
  }

--- a/src/components/newLesson/video.vue
+++ b/src/components/newLesson/video.vue
@@ -459,7 +459,7 @@
      }
      .parent-finish{
        position: fixed;
-        bottom: 2rem;
+        bottom: 2 * @toVw;
        width: 100%;
        left: 0;
        top: 500*@toVw;

--- a/src/components/order.vue
+++ b/src/components/order.vue
@@ -186,7 +186,7 @@
   z-index: 2002;
 }
 .tips{
-   padding: 20rem;
+   padding: 20 * @toVw;
   font-size: 24px;
   text-align: center;
   color: #888888;
@@ -199,8 +199,8 @@
    .bg-img{
      width: 108*@toVw;
      height:108*@toVw ;
-      margin-right: 15rem;
+      margin-right: 15 * @toVw;
-      margin-left: 0rem;
+      margin-left: 0 * @toVw;
      background-size:100% 100%;
    }
    .head{
@@ -235,7 +235,7 @@
            img{
              width: 13 *@toVw;
              display: inline-block;
-              margin-right: 3rem;
+              margin-right: 3 * @toVw;
              vertical-align: text-bottom;
            }
          }
@@ -255,7 +255,7 @@
      margin-right: 10px;
      padding: 6px 12px;
      color: #999;
-      font-size: 12rem;
+      font-size: 12 * @toVw;
      border: 1px solid #ccc;
      border-top: none;
      border-bottom-left-radius: 9px;
@@ -263,7 +263,7 @@
      box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.1);
      span{
        margin: 0;
-        line-height: 20rem;
+        line-height: 20 * @toVw;
      }
      .red{

--- a/src/components/orderTrans/index.vue
+++ b/src/components/orderTrans/index.vue
@@ -212,7 +212,7 @@
    .bgblock{
      background: white;
      border-radius:20*@toVw; 
-      padding: 20rem 34rem 30rem;
+      padding: 20 * @toVw 34 * @toVw 30 * @toVw;
    }
    .tip{font-size: 11*@toVw;color: #FF7875;position: relative;top: -5* @toVw;font-weight: bold;}
    .title{text-align: center;font-size: 21*@toVw;margin: 16* @toVw 0  20* @toVw;}
@@ -220,7 +220,7 @@
      width: 249*@toVw;height: 45*@toVw;
      line-height:45*@toVw;
      border-bottom: 1*@toVw solid #FFCFCD;
-      margin-bottom: 8rem;
+      margin-bottom: 8 * @toVw;
      position: relative;
      .yzm{
        border: 1px solid #FFCA68;
@@ -242,7 +242,7 @@
        font-size: 12*@toVw;
      }
      input{
-        padding: 9rem 0;
+        padding: 9 * @toVw 0;
        font-size:16*@toVw;
        background: transparent;
        // font-family:PingFangSC-Semibold;
@@ -298,7 +298,7 @@
    left: 0;
    right: 0;
    bottom: 0;
-    width: 375rem;
+    width: 375 * @toVw;
  }
  @media screen and (min-width: 600px) {
    @toVw:100/520vw;
@@ -316,7 +316,7 @@
    .bgblock{
      background: white;
      border-radius:20*@toVw; 
-      padding: 20rem 34rem 30rem;
+      padding: 20 * @toVw 34 * @toVw 30 * @toVw;
    }
    .tip{font-size: 11*@toVw;color: #FF7875;position: relative;top: -5* @toVw;font-weight: bold;}
    .title{text-align: center;font-size: 21*@toVw;margin: 16* @toVw 0  20* @toVw;}
@@ -324,7 +324,7 @@
      width: 249*@toVw;height: 45*@toVw;
      line-height:45*@toVw;
      border-bottom: 1*@toVw solid #FFCFCD;
-      margin-bottom: 8rem;
+      margin-bottom: 8 * @toVw;
      position: relative;
      .yzm{
        border: 1px solid #FFCA68;
@@ -346,7 +346,7 @@
        font-size: 12*@toVw;
      }
      input{
-        padding: 9rem 0;
+        padding: 9 * @toVw 0;
        font-size:16*@toVw;
        background: transparent;
        // font-family:PingFangSC-Semibold;

--- a/src/components/public/audioPlay.vue
+++ b/src/components/public/audioPlay.vue
@@ -227,16 +227,16 @@
    -webkit-appearance: none;
    display: flex;
    width: 90%;
-    padding: 0 5rem;
+    padding: 0 5 * @toVw;
    border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
  }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
  }
  input[type=range]::-webkit-slider-runnable-track {
-     height: 2rem;
+     height: 2 * @toVw;
    background: #999999;
-    border-radius: 1rem ;
+    border-radius: 1 * @toVw ;
   }
  input[type=range]:focus {
    outline: none;
@@ -244,16 +244,16 @@
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border-radius: 50%; /*外观设置为圆形*/
-    height: 15rem;
+    height: 15 * @toVw;
-    width:  15rem;
+    width:  15 * @toVw;
-    margin-top: -6rem; /*使滑块超出轨道部分的偏移量相等*/
+    margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
    background: #ffffff;
    border: solid 1* @toVw rgba(205, 224, 230, 0.5); /*设置边框*/
-    box-shadow: 0 0 2rem #3b4547; /*添加底部阴影*/
+    box-shadow: 0 0 2 * @toVw #3b4547; /*添加底部阴影*/
  }
  .audioOff {
-    padding: 5rem;
+    padding: 5 * @toVw;
    display: flex;
    justify-content: center;
    align-items: center;
@@ -264,18 +264,18 @@
  .ofplayBox {
    width: 100%;
-    height: 30rem;
+    height: 30 * @toVw;
    margin: 0;
    display: flex;
  }
  .isPlayImg {
-    width: 40rem;
+    width: 40 * @toVw;
    height: 100%;
  }
  .isPlayImg img {
-    width: 30rem;
+    width: 30 * @toVw;
  }
  .progress {
@@ -287,7 +287,7 @@
  .duration {
    display: flex;
    font-size: 12px;
-    margin-left: 5rem;
+    margin-left: 5 * @toVw;
    justify-content: space-between;
    span:first-child{
      margin-left: 0;
@@ -299,7 +299,7 @@
  @media screen and (orientation: landscape) {
    .audioOff {
-      padding: 2rem;
+      padding: 2 * @toVw;
      display: flex;
      justify-content: center;
      align-items: center;
@@ -311,16 +311,16 @@
      -webkit-appearance: none;
      display: flex;
      width: 90%;
-      padding: 0 5rem;
+      padding: 0 5 * @toVw;
      border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
    }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
    }
    input[type=range]::-webkit-slider-runnable-track {
-      height: 2rem;
+      height: 2 * @toVw;
      background: #999999;
-      border-radius: 1rem ;
+      border-radius: 1 * @toVw ;
    }
    input[type=range]:focus {
      outline: none;
@@ -328,9 +328,9 @@
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      border-radius: 50%; /*外观设置为圆形*/
-      height: 10rem;
+      height: 10 * @toVw;
-      width:  10rem;
+      width:  10 * @toVw;
-      margin-top: -4rem; /*使滑块超出轨道部分的偏移量相等*/
+      margin-top: -4 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
      background: #ffffff;
      border: solid 1* @toVw rgba(205, 224, 230, 0.5); /*设置边框*/
      box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
@@ -338,19 +338,19 @@
    }
    .ofplayBox {
      width: 100%;
-      height: 20rem;
+      height: 20 * @toVw;
      margin: 0;
      display: flex;
    }
    .isPlayImg {
-      width: 24rem;
+      width: 24 * @toVw;
-      margin-right: 5rem;
+      margin-right: 5 * @toVw;
      height: 100%;
    }
    .isPlayImg img {
-      width: 20rem;
+      width: 20 * @toVw;
    }
    .progress {
@@ -361,7 +361,7 @@
    .duration {
      display: flex;
      font-size: 12px;
-      margin-left: 5rem;
+      margin-left: 5 * @toVw;
      justify-content: space-between;
      span:first-child{
        margin-left: 0;

--- a/src/components/public/bottomTab.vue
+++ b/src/components/public/bottomTab.vue
@@ -108,22 +108,22 @@ export default {
 <style scoped lang="less">
 @import "../../util/public";
 .bottom-tab {
-  width: 375rem;
+  width: 375 * @toVw;
-  height: 48rem;
+  height: 48 * @toVw;
  position: fixed;
  left: 0;
  bottom: 0;
  box-shadow: 0px -1px 2px 0px rgba(204, 204, 204, 0.5);
-  padding: 0 24rem;
+  padding: 0 24 * @toVw;
  box-sizing: border-box;
  display: flex;
  display: -webkit-flex;
-  font-size: 10rem;
+  font-size: 10 * @toVw;
  font-family: PingFang-SC-Medium;
  text-align: center;
  font-weight: normal;
  color: #666666;
-  line-height: 14rem;
+  line-height: 14 * @toVw;
  z-index: 30;
  background: white;
  & > div {
@@ -133,40 +133,40 @@ export default {
    // border-right: 1px solid #eeeeee;
  }
  .img {
-    width: 28rem;
+    width: 28 * @toVw;
-    height: 28rem;
+    height: 28 * @toVw;
    overflow: hidden;
    position: relative;
    img {
-      width: 28rem;
+      width: 28 * @toVw;
      position: absolute;
      left: 0;
    }
  }
  .index {
    img {
-      top: -28rem;
+      top: -28 * @toVw;
    }
  }
  .map {
    img {
-      top: -56rem;
+      top: -56 * @toVw;
    }
  }
  .mine {
    img {
-      top: -84rem;
+      top: -84 * @toVw;
    }
  }
  .actived {
    .index {
      img {
-        top: -140rem;
+        top: -140 * @toVw;
      }
    }
    .map {
      img {
-        top: -112rem;
+        top: -112 * @toVw;
      }
    }
    .mine {
@@ -181,20 +181,20 @@ export default {
  @toVw: 100/1024vw;
  .bottom-tab {
    width:100%;
-    height: 66rem;
+    height: 66 * @toVw;
    position: fixed;
    left: 0;
    bottom: 0;
    box-shadow: 0px -1px 2px 0px rgba(204, 204, 204, 0.5);
-    padding: 0 6rem;
+    padding: 0 6 * @toVw;
    display: flex;
    display: -webkit-flex;
-    font-size: 10rem;
+    font-size: 10 * @toVw;
    font-family: PingFang-SC-Medium;
    text-align: center;
    font-weight: normal;
    color: #ccc;
-    line-height: 14rem;
+    line-height: 14 * @toVw;
    z-index: 30;
    background: white;
    & > div {
@@ -204,40 +204,40 @@ export default {
      color: #6eb1ff;
    }
    .img {
-    width: 30rem;
+    width: 30 * @toVw;
-    height: 30rem;
+    height: 30 * @toVw;
    overflow: hidden;
    position: relative;
    img {
-      width: 30rem;
+      width: 30 * @toVw;
      position: absolute;
      left: 0;
    }
   }
   .index {
    img {
-      top: -30rem;
+      top: -30 * @toVw;
    }
  }
  .map {
    img {
-      top: -60rem;
+      top: -60 * @toVw;
    }
  }
  .mine {
    img {
-      top: -91rem;
+      top: -91 * @toVw;
    }
  }
  .actived {
    .index {
      img {
-        top: -151rem;
+        top: -151 * @toVw;
      }
    }
    .map {
      img {
-        top: -119rem;
+        top: -119 * @toVw;
      }
    }
    .mine {

--- a/src/components/share.vue
+++ b/src/components/share.vue
@@ -30,24 +30,24 @@
    background-size: 100% 100%;
    .tips{
      position: absolute;
-      top: 8rem;
+      top: 8 * @toVw;
-      height: 66rem;
+      height: 66 * @toVw;
      z-index: 0;
-      right: 31rem;
+      right: 31 * @toVw;
    }
    .content{
-      width: 313rem;
+      width: 313 * @toVw;
-      height: 524rem;
+      height: 524 * @toVw;
      background-size: 100% 100%;
      position: relative;
      z-index: 2;
-      margin:53rem auto 0 auto;
+      margin:53 * @toVw auto 0 auto;
      .head{
        border-radius: 1000px;
-        width: 32rem;
+        width: 32 * @toVw;
        position: absolute;
-        top: 257rem;
+        top: 257 * @toVw;
-        left: 40rem;
+        left: 40 * @toVw;
      }
      .name{
        width:70px;
@@ -58,8 +58,8 @@
        color:rgba(51,51,51,1);
        line-height:20px;
        position: absolute;
-        top: 257rem;
+        top: 257 * @toVw;
-        left: 84rem;
+        left: 84 * @toVw;
      }
      .day{
        font-size:20px;
@@ -68,8 +68,8 @@
        color:rgba(51,51,51,1);
        line-height:28px;
        position: absolute;
-        top: 334rem;
+        top: 334 * @toVw;
-        right:243rem;
+        right:243 * @toVw;
      }
      .num{
        font-size:20px;
@@ -78,8 +78,8 @@
        color:rgba(51,51,51,1);
        line-height:28px;
        position: absolute;
-        top: 334rem;
+        top: 334 * @toVw;
-        right: 167rem;
+        right: 167 * @toVw;
      }
      .time{
        font-size:20px;
@@ -88,8 +88,8 @@
        color:rgba(51,51,51,1);
        line-height:28px;
        position: absolute;
-        top: 334rem;
+        top: 334 * @toVw;
-        right: 63rem;
+        right: 63 * @toVw;
      }
    }
  }

--- a/src/components/star/detail.vue
+++ b/src/components/star/detail.vue
@@ -130,8 +130,8 @@ export default {
  width: 100%;
  background: white;
  z-index: 100;
-  // padding-bottom: 10rem;
+  // padding-bottom: 10 * @toVw;
-  padding: 10rem 20rem ;
+  padding: 10 * @toVw 20 * @toVw ;
  margin-bottom: 8* @toVw;
  border-bottom: 1px solid #E2E2E2;
  .top{
@@ -139,12 +139,12 @@ export default {
    span{line-height: 28* @toVw ;margin: 0;}
   }
  .count{
-    font-size: 18rem;
+    font-size: 18 * @toVw;
    color: #f27321;
    font-weight: 800;
  }
  .date{
-    font-size: 12rem;
+    font-size: 12 * @toVw;
    color: #999999;
  }
 }
@@ -152,18 +152,18 @@ export default {
 .secTitle {
  text-align: center;
  color: #999999;
-  font-size: 13rem;
+  font-size: 13 * @toVw;
  .line {
    display: inline-block;
-    width: 120rem;
+    width: 120 * @toVw;
    border-bottom: 1px solid #e2e2e2;
    position: relative;
-    top: -3rem;
+    top: -3 * @toVw;
  }
 }
 // .scrollP{position: relative;height: 100vh;width: 100%;transform:none;}
 .scroll {
-  padding: 10rem 20rem 0;
+  padding: 10 * @toVw 20 * @toVw 0;
  // margin-top: 180* @toVw;
  height: 100%;
  overflow: hidden;
@@ -172,10 +172,10 @@ export default {
  box-sizing: border-box;
  background: white;
  .itemBox {
-    padding-top: 65rem;
+    padding-top: 65 * @toVw;
    .none {
-      height: 53rem;
+      height: 53 * @toVw;
-      line-height: 40rem;
+      line-height: 40 * @toVw;
      text-align: center;
      color: #999999;
      font-size: 12px;
@@ -185,30 +185,30 @@ export default {
    display: -webkit-flex;
    justify-content: space-between;
    border-bottom: 1px solid #e2e2e2;
-    padding: 9rem 2rem;
+    padding: 9 * @toVw 2 * @toVw;
    div {
      flex: 1;
    }
    .left {
-      font-size: 15rem;
+      font-size: 15 * @toVw;
      // font-family: Regular;
      .date {
        color: #999999;
-        font-size: 13rem;
+        font-size: 13 * @toVw;
-        margin-top: 4rem;
+        margin-top: 4 * @toVw;
      }
    }
    .right {
      text-align: right;
-      font-size: 18rem;
+      font-size: 18 * @toVw;
      color: #f27321;
      font-weight: 800;
      // font-family: Arial-Black;
      img {
-        width: 20rem;
+        width: 20 * @toVw;
        position: relative;
-        top: 3rem;
+        top: 3 * @toVw;
-        margin-left: 3rem;
+        margin-left: 3 * @toVw;
      }
      span {
      }
@@ -227,12 +227,12 @@ export default {
      width: 100%;
      background: white;
      z-index: 100;
-      padding-bottom: 10rem;
+      padding-bottom: 10 * @toVw;
    }
    // .child-view{height: 200vh;}
    .scroll{position: relative;
    height: 50vh;
-    .itemBox{padding-top: 0rem;padding-bottom: 10vh;}
+    .itemBox{padding-top: 0 * @toVw;padding-bottom: 10vh;}
    }
 }
 </style>

--- a/src/components/star/result.vue
+++ b/src/components/star/result.vue
@@ -85,7 +85,7 @@ export default {
  border-top: 1px solid transparent;
 }
 .page {
-  padding: 10rem;
+  padding: 10 * @toVw;
  box-sizing: border-box;
 }
 .result {
@@ -93,32 +93,32 @@ export default {
  text-align: center;
  background: url("https://cdn.singsingenglish.com/new-sing/number_img_bg_win@2x.png");
  background-size: 100% 100%;
-  padding: 39rem 13rem 12rem;
+  padding: 39 * @toVw 13 * @toVw 12 * @toVw;
-  box-shadow: 0px 1rem 8rem 0rem rgba(175, 175, 175, 0.53);
+  box-shadow: 0px 1 * @toVw 8 * @toVw 0 * @toVw rgba(175, 175, 175, 0.53);
-  border-radius: 8rem;
+  border-radius: 8 * @toVw;
-  margin-bottom: 10rem;
+  margin-bottom: 10 * @toVw;
  background-color: #fff9f2;
  .float {
-    width: 74rem;
+    width: 74 * @toVw;
-    height: 27rem;
+    height: 27 * @toVw;
    background: linear-gradient(
      270deg,
      rgba(255, 227, 126, 1) 0%,
      rgba(255, 167, 114, 1) 100%
    );
-    border-radius: 0 8rem 0 8rem;
+    border-radius: 0 8 * @toVw 0 8 * @toVw;
    color: white;
-    line-height: 27rem;
+    line-height: 27 * @toVw;
    position: absolute;
    top: 0;
    right: 0;
-    font-size: 13rem;
+    font-size: 13 * @toVw;
  }
  .imgbox {
-    margin-top: 8rem;
+    margin-top: 8 * @toVw;
    img {
-      width: 111rem;
+      width: 111 * @toVw;
-      margin: 0 12rem;
+      margin: 0 12 * @toVw;
    }
  }
  .addr {
@@ -127,56 +127,56 @@ export default {
      rgba(252, 171, 69, 1) 0%,
      rgba(247, 115, 33, 1) 100%
    );
-    border-radius: 12rem;
+    border-radius: 12 * @toVw;
-    height: 24rem;
+    height: 24 * @toVw;
-    line-height: 24rem;
+    line-height: 24 * @toVw;
-    text-indent: 10rem;
+    text-indent: 10 * @toVw;
    color: white;
-    font-size: 13rem;
+    font-size: 13 * @toVw;
-    margin: 15rem 0;
+    margin: 15 * @toVw 0;
    text-align: left;
    display: flex;
    span {
-      max-width: 296rem;
+      max-width: 296 * @toVw;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    i {
-      margin-left: -6rem;
+      margin-left: -6 * @toVw;
-      width: 20rem;
+      width: 20 * @toVw;
-      font-size: 12rem;
+      font-size: 12 * @toVw;
    }
  }
  .tip {
    color: #937148;
-    font-size: 12rem;
+    font-size: 12 * @toVw;
    text-align: left;
  }
  h2 {
    color: #d33500;
-    margin: 0 0 8rem;
+    margin: 0 0 8 * @toVw;
  }
  p {
    color: #f65c28;
  }
 }
 .fal {
-  padding: 39rem 0 12rem;
+  padding: 39 * @toVw 0 12 * @toVw;
-  height: 189rem;
+  height: 189 * @toVw;
  background: url("https://cdn.singsingenglish.com/new-sing/number_img_bg_lose@2x.png");
  background-size: 100% 100%;
  box-sizing: border-box;
  .fal_title {
    color: #2a455a;
-    font-size: 24rem;
+    font-size: 24 * @toVw;
    font-weight: bold;
  }
  .fal_tip {
    color: #f65c28;
-    font-size: 13rem;
+    font-size: 13 * @toVw;
-    margin-top: 10rem;
+    margin-top: 10 * @toVw;
  }
 }

--- a/src/components/star/starRank.vue
+++ b/src/components/star/starRank.vue
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,6 @@ import App from './App'
 import router from './router'
 import store from './store'
 import MintUI from 'mint-ui'
-// import {popup} from 'mint-ui'
 import VueClipboard from 'vue-clipboard2'
 import sa from 'sa-sdk-javascript';
 import 'mint-ui/lib/style.css'
@@ -41,9 +40,9 @@ Vue.component('scroll', scroll);
 // Vue.prototype.$throw = (error)=> errorHandler(error,this);
 /* eslint-disable no-new */
-if(process.env.NODE_ENV != 'production'){
+// if(process.env.NODE_ENV != 'production'){
-  var vConsole = new VConsole();
+//   var vConsole = new VConsole();
-}
+// }
 router.beforeEach((to, from, next) => {
  next()