px to rem

packages/common/styles/ionic-public-style.less

 .has-footer {
-  bottom: 44px;
+  bottom: 0.88rem;
   .scrollContent{
-    padding-bottom: 45px;
+    padding-bottom: 0.9rem;
   }
 
 }
 .header-top {
-  margin-top: 34px;
+  margin-top: 0.68rem;
 }
 
 .has-tabs {
   .scrollContent{
-    padding-bottom: 50px;
+    padding-bottom: 1rem;
   }
-  bottom: 50px;
+  bottom: 1rem;
 }
 
 .spinner svg {
-  width: 28px;
-  height: 28px;
+  width: 0.56rem;
+  height: 0.56rem;
 }
 
 .public-style {
@@ -26,32 +26,32 @@
   width: 100%;
   font-weight: inherit;
   .bar.button.button-icon .icon:before, .bar .button.button-icon.icon-left:before, .bar .button.button-icon.icon-right:before, .bar .button.button-icon:before, .bar button.button-icon .icon:before, .bar button.button-icon.icon-left:before, .bar button.button-icon.icon-right:before, .bar button.button-icon:before {
-    padding-right: 4px;
-    padding-left: 4px;
-    font-size: 32px;
-    line-height: 32px;
+    padding-right: 0.8rem;
+    padding-left: 0.8rem;
+    font-size: 0.64rem;
+    line-height: 0.64rem;
   }
 
   .bar {
     background-image: none;
-    padding: 5px 0;
-    height: 43px;
+    padding: 0.1rem 0;
+    height: 0.86rem;
     display: flex;
     display: -webkit-flex;
     align-items: center;
     -webkit-align-items: center;
     .title {
-      height: 43px;
-      min-width: 30px;
+      height: 0.86rem;
+      min-width: 0.6rem;
       line-height: normal;
-      font-size: 17px;
+      font-size: 0.34rem;
       display: flex;
       display: -webkit-flex;
       justify-content: center;
       -webkit-justify-content: center;
       align-items: center;
       -webkit-align-items: center;
-      padding-top: 4px;
+      padding-top: 0.8rem;
     }
   }
   .header-bar {
@@ -60,14 +60,14 @@
     .buttons {
       .button {
         color: @headerColor;
-        font-size: 16px;
-        padding-left: 10px;
-        padding-right: 12.5px;
+        font-size: 0.32rem;
+        padding-left: 0.2rem;
+        padding-right: 0.25rem;
       }
     }
     .title {
       color: #4A4A4A;
-      font-size: 17px;
+      font-size: 0.34rem;
       //font-weight: 600;
       left: 0 !important;
       right: 0 !important;
@@ -75,8 +75,8 @@
     .iconLeft {
       text-align: left;
       i {
-        font-size: 12.5px;
-        padding-left: 5px;
+        font-size: 0.25rem;
+        padding-left: 0.1rem;
       }
     }
   }
@@ -100,7 +100,7 @@
   .list {
     background-color: #ffffff;
     //border-bottom: 1px solid rgba(0, 0, 0, 0.10);
-    margin-bottom: 10px;
+    margin-bottom: 0.2rem;
     .item:last-child {
       .contents {
         border-bottom: none;
@@ -113,9 +113,9 @@
       transform: scale(1,1)
     }
     .item {
-      height: 45px;
+      height: 0.9rem;
       border: none;
-      padding: 0 0 0 15px;
+      padding: 0 0 0 0.3rem;
       .contents {
         height: 100%;
         width: 100%;
@@ -127,7 +127,7 @@
         align-items: center;
         -webkit-justify-content: space-between;
         -webkit-align-items: center;
-        padding: 0 15px 0 0;
+        padding: 0 0.3rem 0 0;
         &.activated {
           opacity: 0.9;
           -webkit-transform: scale(0.95);
@@ -141,13 +141,13 @@
           -webkit-justify-content: flex-start;
           -webkit-align-items: center;
           letter-spacing: 0;
-          line-height: 16px;
+          line-height: 0.32rem;
           font-size: @font-size-big;
           color: #838E94;
           letter-spacing: 0;
           text-align: center;
           .left-icon {
-            margin-right: 10px;
+            margin-right: 0.2rem;
           }
           .required {
             display: flex;
@@ -155,9 +155,9 @@
           .required::after {
             content: '*';
             color: #D24E4E;
-            height: 8px;
-            padding-top: 4px;
-            margin-left: 2.5px;
+            height: 0.16rem;
+            padding-top: 0.08rem;
+            margin-left: 0.05rem;
           }
         }
         .add-content {
@@ -174,7 +174,7 @@
           white-space: normal;
           word-break: break-all;
           word-wrap: break-word;
-          line-height: 20px;
+          line-height: 0.4rem;
           //输入框
           input {
             font-size: @font-size-middle;
@@ -186,7 +186,7 @@
           }
           //右侧图标
           .right-icon {
-            margin-left: 10px;
+            margin-left: 0.2rem;
           }
           //toggle
           .toggle-check {
@@ -197,15 +197,15 @@
             -webkit-align-items: center;
             align-items: center;
             .track {
-              width: 40px;
-              height: 25px;
-              margin-right: 2.5px;
-              border-radius: 15px;
+              width: 0.8rem;
+              height: 0.5rem;
+              margin-right: 0.05rem;
+              border-radius: 0.3rem;
               .handle {
-                width: 22.5px;
-                height: 22.5px;
-                top: 3.5px;
-                left: 2.5px;
+                width: 0.45rem;
+                height: 0.45rem;
+                top: 0.07rem;
+                left: 0.05rem;
               }
             }
           }
@@ -213,10 +213,10 @@
             border-color: @check-box-bg;
             background-color: @check-box-bg;
             .handle {
-              width: 22.5px;
-              height: 22.5px;
-              top: 3.5px;
-              left: 9px;
+              width: 0.45rem;
+              height: 0.45rem;
+              top: 0.07rem;
+              left: 0.18rem;
             }
           }
         }
@@ -225,7 +225,7 @@
     }
   }
   .bottom-tab {
-    height: 44px;
+    height: 0.88rem;
     width: 100%;
     background-color: #fff;
     position: fixed;
@@ -257,7 +257,7 @@
     }
     .bottom-tab-divider {
       width: 2px;  /*no*/
-      height: 30px;
+      height: 0.6rem;
       background-color: rgb(214, 217, 218);
     }
   }

packages/common/styles/ionic.less

@@ -4112,7 +4112,7 @@ body,
   padding: 0;
   color: #000;
   word-wrap: break-word;
-  font-size: 14px;
+  font-size: 0.28rem;
   font-family: -apple-system;
   font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
   //line-height: 40px;
@@ -4215,10 +4215,10 @@ body.grade-c {
 }
 
 .scroll-bar-h {
-  right: 2px;
-  bottom: 3px;
-  left: 2px;
-  height: 3px;
+  right: 0.04rem;
+  bottom: 0.06rem;
+  left: 0.04rem;
+  height: 0.06rem;
 }
 
 .scroll-bar-h .scroll-bar-indicator {
@@ -4226,10 +4226,10 @@ body.grade-c {
 }
 
 .scroll-bar-v {
-  top: 2px;
-  right: 3px;
-  bottom: 2px;
-  width: 3px;
+  top: 0.04rem;
+  right: 0.06rem;
+  bottom: 0.04rem;
+  width: 0.06rem;
 }
 
 .scroll-bar-v .scroll-bar-indicator {
@@ -4238,7 +4238,7 @@ body.grade-c {
 
 .scroll-bar-indicator {
   position: absolute;
-  border-radius: 6px;
+  border-radius: 0.12rem;
   background: rgba(0, 0, 0, 0.3);
   opacity: 1;
   -webkit-transition: opacity 0.3s linear;
@@ -4265,7 +4265,7 @@ body.grade-c {
 }
 
 ion-infinite-scroll {
-  height: 60px;
+  height: 1.2rem;
   width: 100%;
   display: block;
   display: -webkit-box;
@@ -4294,7 +4294,7 @@ ion-infinite-scroll {
 
 ion-infinite-scroll .icon {
   color: #666666;
-  font-size: 30px;
+  font-size: 0.6rem;
   color: #666666;
 }
 
@@ -4328,7 +4328,7 @@ ion-infinite-scroll:not(.active) .icon:before {
 
 /* If you change these, change platform.scss as well */
 .has-header {
-  top: 44px;
+  top: 0.88rem;
 }
 
 .no-header {
@@ -4336,42 +4336,42 @@ ion-infinite-scroll:not(.active) .icon:before {
 }
 
 .has-subheader {
-  top: 88px;
+  top: 1.76rem;
 }
 
 .has-tabs-top {
-  top: 93px;
+  top: 1.86rem;
 }
 
 .has-header.has-subheader.has-tabs-top {
-  top: 137px;
+  top: 2.74rem;
 }
 
 .has-footer {
-  bottom: 44px;
+  bottom: 0.88rem;
 }
 
 .has-subfooter {
-  bottom: 88px;
+  bottom: 1.56rem;
 }
 
 .has-tabs,
 .bar-footer.has-tabs {
-  bottom: 50px;
+  bottom: 1rem;
 }
 
 .has-tabs.pane,
 .bar-footer.has-tabs.pane {
-  bottom: 50px;
+  bottom: 1rem;
   height: auto;
 }
 
 .bar-subfooter.has-tabs {
-  bottom: 93px;
+  bottom: 1.86rem;
 }
 
 .has-footer.has-tabs {
-  bottom: 93px;
+  bottom: 1.86rem;
 }
 
 .pane {
@@ -4646,9 +4646,9 @@ a.subdued:last-child {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  padding: 5px;
+  padding: 0.1rem;
   width: 100%;
-  height: 44px;
+  height: 0.88rem;
   border-width: 0;
   border-style: solid;
   border-top: 1px solid transparent; /*no*/
@@ -4837,15 +4837,15 @@ a.subdued:last-child {
   left: 0;
   z-index: 0;
   overflow: hidden;
-  margin: 0 10px;
-  min-width: 30px;
-  height: 22px;
+  margin: 0 0.2rem;
+  min-width: 0.6rem;
+  height: 0.44rem;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 17px;
+  font-size: 0.34rem;
   font-weight: 500;
-  line-height: 44px;
+  line-height: 0.88rem;
 }
 
 .bar .title.title-left {
@@ -4864,10 +4864,10 @@ a.subdued:last-child {
   z-index: 1;
   padding: 0 8px;
   min-width: initial;
-  min-height: 31px;
+  min-height: 0.62rem;
   font-weight: 400;
-  font-size: 13px;
-  line-height: 32px;
+  font-size: 0.26rem;
+  line-height: 0.64rem;
 }
 
 .bar .button.button-icon:before,
@@ -4875,35 +4875,35 @@ a.subdued:last-child {
 .bar button .icon:before, .bar button.icon:before, .bar button.icon-left:before, .bar button.icon-right:before {
   padding-right: 2px;
   padding-left: 2px;
-  font-size: 20px;
-  line-height: 32px;
+  font-size: 0.4rem;
+  line-height: 0.64rem;
 }
 
 .bar .button.button-icon, .bar button.button-icon {
-  font-size: 17px;
+  font-size: 0.34rem;
 }
 
 .bar .button.button-icon .icon:before, .bar .button.button-icon:before, .bar .button.button-icon.icon-left:before, .bar .button.button-icon.icon-right:before, .bar button.button-icon .icon:before, .bar button.button-icon:before, .bar button.button-icon.icon-left:before, .bar button.button-icon.icon-right:before {
   vertical-align: top;
-  font-size: 32px;
-  line-height: 32px;
+  font-size: 0.64rem;
+  line-height: 0.64rem;
 }
 
 .bar .button.button-clear, .bar button.button-clear {
   padding-right: 3px;
   padding-left: 3px;
   font-weight: 300;
-  font-size: 17px;
+  font-size: 0.34rem;
 }
 
 .bar .button.button-clear .icon:before, .bar .button.button-clear.icon:before, .bar .button.button-clear.icon-left:before, .bar .button.button-clear.icon-right:before, .bar button.button-clear .icon:before, .bar button.button-clear.icon:before, .bar button.button-clear.icon-left:before, .bar button.button-clear.icon-right:before {
-  font-size: 32px;
-  line-height: 32px;
+  font-size: 0.64rem;
+  line-height: 0.64rem;
 }
 
 .bar .button.back-button, .bar button.back-button {
   display: block;
-  margin-right: 5px;
+  margin-right: 0.1rem;
   padding: 0;
   white-space: nowrap;
   font-weight: 400;
@@ -4915,13 +4915,13 @@ a.subdued:last-child {
 
 .bar .button-bar > .button,
 .bar .buttons > .button {
-  min-height: 32px;
-  line-height: 32px;
+  min-height: 0.64rem;
+  line-height: 0.64rem;
 }
 
 .bar .button-bar + .button,
 .bar .button + .button-bar {
-  margin-left: 5px;
+  margin-left: 0.1rem
 }
 
 .bar .buttons,
@@ -4935,12 +4935,12 @@ a.subdued:last-child {
 }
 
 .bar .buttons-left span {
-  margin-right: 5px;
+  margin-right: 0.1rem;
   display: inherit;
 }
 
 .bar .buttons-right span {
-  margin-left: 5px;
+  margin-left: 0.1rem;
   display: inherit;
 }
 
@@ -4950,9 +4950,9 @@ a.subdued:last-child {
 .bar .buttons.pull-right,
 .bar .title + .buttons {
   position: absolute;
-  top: 5px;
-  right: 5px;
-  bottom: 5px;
+  top: 0.1rem;
+  right: 0.1rem;
+  bottom: 0.1rem;
 }
 
 .platform-android .nav-bar-has-subheader .bar {
@@ -4960,12 +4960,12 @@ a.subdued:last-child {
 }
 
 .platform-android .bar .back-button .icon:before {
-  font-size: 24px;
+  font-size: 0.48rem;
 }
 
 .platform-android .bar .title {
-  font-size: 19px;
-  line-height: 44px;
+  font-size: 0.38rem;
+  line-height: 0.88rem;
 }
 
 
@@ -4976,7 +4976,7 @@ a.subdued:last-child {
 .checkbox {
   position: relative;
   display: inline-block;
-  padding: 7px 7px;
+  padding: 0.14rem 0.14rem;
   cursor: pointer;
 }
 
@@ -5107,8 +5107,8 @@ a.subdued:last-child {
 .checkbox input,
 .checkbox-icon {
   position: relative;
-  width: 28px;
-  height: 28px;
+  width: 0.56rem;
+  height: 0.56rem;
   display: block;
   border: 0;
   background: transparent;
@@ -5123,7 +5123,7 @@ a.subdued:last-child {
   height: 100%;
   border-width: 1px; /*no*/
   border-style: solid;
-  border-radius: 28px;
+  border-radius: 0.56rem;
   background: #fff;
   content: ' ';
   -webkit-transition: background-color 20ms ease-in-out;
@@ -5145,8 +5145,8 @@ input:checked + .checkbox-icon:before {
   top: 33%;
   left: 25%;
   display: table;
-  width: 14px;
-  height: 6px;
+  width: 0.28rem;
+  height: 0.12rem;
   border: 1px solid #fff; /*no*/
   border-top: 0;
   border-right: 0;
@@ -5200,7 +5200,7 @@ input:checked + .checkbox-icon:before {
   }
 
   .platform-ios.platform-cordova .modal-wrapper .modal .bar-header:not(.bar-subheader) {
-    height: 88px;
+    height: 1.76rem;
   }
 
   .platform-ios.platform-cordova .modal-wrapper .modal .bar-header:not(.bar-subheader) > * {
@@ -5209,24 +5209,24 @@ input:checked + .checkbox-icon:before {
 
   .platform-ios.platform-cordova .modal-wrapper .modal .tabs-top > .tabs,
   .platform-ios.platform-cordova .modal-wrapper .modal .tabs.tabs-top {
-    top: 88px;
+    top: 1.76rem;
   }
 
   .platform-ios.platform-cordova .modal-wrapper .modal .has-header,
   .platform-ios.platform-cordova .modal-wrapper .modal .bar-subheader {
-    top: 88px;
+    top: 1.76rem;
   }
 
   .platform-ios.platform-cordova .modal-wrapper .modal .has-subheader {
-    top: 176px;
+    top: 3.52rem;
   }
 
   .platform-ios.platform-cordova .modal-wrapper .modal .has-header.has-tabs-top {
-    top: 186px;
+    top: 3.72rem;
   }
 
   .platform-ios.platform-cordova .modal-wrapper .modal .has-header.has-subheader.has-tabs-top {
-    top: 274px;
+    top: 5.48rem;
   }
 
   .modal-backdrop-bg {
@@ -5340,10 +5340,10 @@ input:checked + .checkbox-icon:before {
   transition-property: background-color, border;
   display: inline-block;
   box-sizing: border-box;
-  width: 51px;
-  height: 31px;
+  width: 1.02rem;
+  height: 0.62rem;
   border: solid 1px #e6e6e6; /*no*/
-  border-radius: 20px;
+  border-radius: 0.4rem;
   background-color: #fff;
   content: ' ';
   cursor: pointer;
@@ -5365,20 +5365,20 @@ input:checked + .checkbox-icon:before {
   transition-property: background-color, transform;
   position: absolute;
   display: block;
-  width: 27px;
-  height: 27px;
-  border-radius: 27px;
+  width: 0.54rem;
+  height: 0.54rem;
+  border-radius: 0.54rem;
   background-color: #fff;
-  top: 7px;
-  left: 7px;
+  top: 0.14rem;
+  left: 0.14rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.15);
 }
 
 .toggle .handle:before {
   position: absolute;
-  top: -4px;
-  left: -22px;
-  padding: 18px 34px;
+  top: -0.02rem;
+  left: -0.44rem;
+  padding: 0.36rem 0.68rem;
   content: " ";
 }
 
@@ -5394,7 +5394,7 @@ input:checked + .checkbox-icon:before {
 
 .item-toggle,
 .item-toggle.item-complex .item-content {
-  padding-right: 99px;
+  padding-right: 1.98rem;
 }
 
 .item-toggle.item-complex {
@@ -5403,8 +5403,8 @@ input:checked + .checkbox-icon:before {
 
 .item-toggle .toggle {
   position: absolute;
-  top: 10px;
-  right: 16px;
+  top: 0.2rem;
+  right: 0.32rem;
   z-index: 3;
 }
 
@@ -5414,8 +5414,8 @@ input:checked + .checkbox-icon:before {
 
 .toggle-small .track {
   border: 0;
-  width: 34px;
-  height: 15px;
+  width: 0.68rem;
+  height: 0.3rem;
   background: #9e9e9e;
 }
 
@@ -5424,10 +5424,10 @@ input:checked + .checkbox-icon:before {
 }
 
 .toggle-small .handle {
-  top: 2px;
-  left: 4px;
-  width: 21px;
-  height: 21px;
+  top: 0.1rem;
+  left: 0.2rem;
+  width: 0.42rem;
+  height: 0.42rem;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); /*no*/
 }
 
@@ -5438,7 +5438,7 @@ input:checked + .checkbox-icon:before {
 }
 
 .toggle-small.item-toggle .toggle {
-  top: 19px;
+  top: 0.38rem;
 }
 
 .toggle-small .toggle-light input:checked + .track {
@@ -5527,7 +5527,7 @@ input:checked + .checkbox-icon:before {
 
 .item-radio .item-content {
   /* give some room to the right for the checkmark icon */
-  padding-right: 128px;
+  padding-right: 2.56rem;
 }
 
 .item-radio .radio-icon {
@@ -5537,9 +5537,9 @@ input:checked + .checkbox-icon:before {
   right: 0;
   z-index: 3;
   visibility: hidden;
-  padding: 14px;
+  padding: 0.28rem;
   height: 100%;
-  font-size: 24px;
+  font-size: 0.48rem;
 }
 
 .item-radio input {

packages/common/styles/platform-ios.less

 .platform-ios {
   .bar .title + .buttons {
     top: auto;
-    bottom: 12px;
+    bottom: 0.24rem;
   }
   .has-header {
-    top: 64px;
+    top: 1.28rem;
   }
   .header-top {
-    margin-top: 63px;
+    margin-top: 1.26rem;
   }
   .img {
-    margin-top: 10px;
+    margin-top: 0.2rem;
   }
   .bar {
     background-image: none;
-    padding: 5px 0 5px 0;
-    height: 64px !important;
+    padding: 0.1rem 0 0.1rem 0;
+    height: 1.28rem !important;
     display: flex;
     display: -webkit-flex;
     align-items: center;
     -webkit-align-items: center;
     .title {
-      height: 48px;
-      min-width: 30px;
-      line-height: 48px;
-      font-size: 17px;
+      height: 0.96rem;
+      min-width: 0.6rem;
+      line-height: 0.96rem;
+      font-size: 0.34rem;
       display: flex;
       display: -webkit-flex;
       justify-content: center;
       -webkit-justify-content: center;
       align-items: center;
       -webkit-align-items: center;
-      margin-top: 4px;
+      margin-top: 0.08rem;
     }
   }
   .content {
@@ -44,8 +44,8 @@
               color: #D24E4E;
               position: absolute;
               top: 0;
-              right: -8px;
-              height: 8px;
+              right: -0.16rem;
+              height: 0.16rem;
               padding-top: 2px;
             }
           }

packages/common/styles/platform-iosx.less

@@ -2,18 +2,18 @@
 @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
   .platform-ios{
     .has-header {
-      top: 84px;
+      top: 1.68rem;
     }
     .has-tabs {
-      bottom: 84px;
+      bottom: 1.68rem;
     }
     .has-footer{
-      margin-bottom: 34px;
+      margin-bottom: 0.68rem;
     }
     .public-style {
       .bottom-tab{
-        height: 78px; 
-        padding-bottom: 34px;
+        height: 1.56rem;
+        padding-bottom: 0.68rem;
       }
     }
   }
@@ -21,21 +21,21 @@
 
 
 // iPhoneX适配
-@media (device-width: 414) and (device-height: 896){
+@media (device-width: 414px) and (device-height: 896px){
   .platform-ios{
     .has-header {
-      top: 84px;
+      top: 1.68rem;
     }
     .has-tabs {
-      bottom: 84px;
+      bottom: 1.68rem;
     }
     .has-footer{
-      margin-bottom: 34px;
+      margin-bottom: 0.68rem;
     }
     .public-style {
       .bottom-tab{
-        height: 78px;
-        padding-bottom: 34px;
+        height: 1.56rem;
+        padding-bottom: 0.68rem;
       }
     }
   }

packages/common/styles/publicStyle.less

@@ -3,27 +3,27 @@
   position: absolute !important;
   top: 0;
   width: 100%;
-  height: 46px;
-  font-size: 14px !important;
+  height: 0.92rem;
+  font-size: 0.28rem !important;
   background: white;
   .vux-header-left {
-    font-size: 14px !important;
-    top: 12px !important;
-    line-height: 21px !important;
+    font-size: 0.28rem !important;
+    top: 0.24rem !important;
+    line-height: 0.42rem !important;
     .vux-header-back {
 
     }
     .left-arrow {
       &before {
-        width: 12px !important;
-        height: 12px !important;
+        width: 0.24rem !important;
+        height: 0.24rem !important;
       }
     }
   }
   .vux-header-title {
-    height: 40px !important;
-    line-height: 40px !important;
-    font-size: 18px !important;
+    height: 0.8rem !important;
+    line-height: 0.8rem !important;
+    font-size: 0.36rem !important;
   }
   .vux-header-right {
 
@@ -35,7 +35,7 @@
 }
 
 .weui-loading_toast .weui-toast__content {
-  margin-top: 7px !important;
+  margin-top: 0.14rem !important;
 }
 
 .weui-toast {
@@ -44,7 +44,7 @@
   max-width: 14em;
   min-height: 3em !important;
   top: 38% !important;
-  border-radius: 7px !important;
+  border-radius: 0.14rem !important;
 }
 
 .weui-toast.vux-toast-top {
@@ -58,27 +58,27 @@
 }
 
 .weui-icon_toast {
-  margin: 15px 0 0 !important;
+  margin: 0.3rem 0 0 !important;
 }
 
 .weui-icon_toast.weui-loading {
-  width: 32px !important;
-  height: 32px !important;
+  width: 0.64rem !important;
+  height: 0.64rem !important;
 }
 
 .weui-toast__content {
   //margin: 0 0 30px !important;
-  font-size: 16px !important;
+  font-size: 0.32rem !important;
 }
 
 .weui-toast_text .weui-toast__content {
-  border-radius: 10px !important;
-  padding: 6px 7px;
+  border-radius: 0.2rem !important;
+  padding: 0.12rem 0.14rem;
 }
 
 .weui-toast.vux-toast-bottom {
   top: auto !important;
-  bottom: 50px !important;
+  bottom: 1rem !important;
 }
 
 .weui-toast_success {
@@ -88,8 +88,8 @@
   width: auto !important;
 
   .weui-toast__content {
-    margin: 10px 5px !important;
-    line-height: 21px !important;
+    margin: 0.2rem 0.1rem !important;
+    line-height: 0.42rem !important;
   }
 }
 
@@ -105,22 +105,22 @@
 }
 
 .weui-toast.weui-toast_forbidden .weui-toast__content {
-  margin: 10px 5px !important;
-  line-height: 21px !important;
+  margin: 0.2rem 0.1rem !important;
+  line-height: 0.42rem !important;
 }
 
 .weui-icon_toast.weui-loading {
-  margin: 12px 0 0 !important;
+  margin: 0.24rem 0 0 !important;
 }
 
 .weui-icon_toast.weui-icon-success-no-circle:before {
-  font-size: 34px !important;
+  font-size: 0.68rem !important;
 }
 
 .weui-dialog {
   width: 70% !important;
-  max-width: 260px !important;
-  border-radius: 10px !important;
+  max-width: 5.2rem !important;
+  border-radius: 0.2rem !important;
 }
 
 .weui-dialog__hd {
@@ -128,16 +128,16 @@
 }
 
 .weui-tabbar__item {
-  padding: 6px 0 0 !important;
+  padding: 0.12rem 0 0 !important;
 }
 
 .weui-tabbar__icon {
-  width: 22px !important;
-  height: 22px !important;
+  width: 0.44rem !important;
+  height: 0.44rem !important;
 }
 
 .weui-tabbar__label {
-  font-size: 12px !important;
+  font-size: 0.24rem !important;
 
 }
 
@@ -148,52 +148,52 @@
 .weui-dialog__title {
 
   font-weight: 600 !important;
-  font-size: 18px !important;
+  font-size: 0.36rem !important;
 }
 
 .weui-dialog__bd {
-  font-size: 15px !important;
+  font-size: 0.3rem !important;
   min-height: 0.4rem;
 }
 
 .weui-dialog__ft {
-  line-height: 48px !important;
-  font-size: 18px !important;
+  line-height: 0.96rem !important;
+  font-size: 0.36rem !important;
 }
 
 .dp-header {
   .vux-datetime-cancel {
-    padding-left: 15px !important;
+    padding-left: 0.3rem !important;
   }
   .vux-datetime-confirm {
-    padding-right: 15px !important;
+    padding-right: 0.3rem !important;
   }
 }
 
 .dp-header .dp-item {
-  font-size: 16px !important;
-  height: 44px !important;
-  line-height: 44px !important;
+  font-size: 0.32rem !important;
+  height: 0.88rem !important;
+  line-height: 0.88rem !important;
 }
 
 .dp-content {
-  padding: 10px 0 !important;
+  padding: 0.2rem 0 !important;
 }
 
 .scroller-component {
-  height: 238px !important;
+  height: 4.76rem !important;
   background-color: #fff;
   z-index: 2;
 }
 
 .scroller-mask {
-  background-size: 100% 102px !important;
+  background-size: 100% 2.04rem !important;
 }
 
 .scroller-indicator {
-  top: 102px !important;
-  height: 34px !important;
-  line-height: 34px !important;
+  top: 2.04rem !important;
+  height: 0.68rem !important;
+  line-height: 0.68rem !important;
   //border-bottom: 1px solid #cccccc !important;
   //border-top: 1px solid #cccccc !important;
   background-image: none !important;
@@ -207,9 +207,9 @@
 }
 
 .scroller-item {
-  font-size: 16px !important;
-  height: 34px !important;
-  line-height: 34px !important;
+  font-size: 0.32rem !important;
+  height: 0.68rem !important;
+  line-height: 0.68rem !important;
 }
 
 .weui-cells {
@@ -231,7 +231,7 @@
 }
 
 .weui-textarea {
-  font-size: 16px !important;
+  font-size: 0.32rem !important;
 }
 
 .lg-preview-img {

packages/components/BottomTab/index.vue

@@ -41,22 +41,18 @@ export default {
   // iPhoneX适配
   @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
     .platform-ios {
-      //.h-ios {
       .h-bottom-tab {
         height: 78px;
         padding-bottom: 34px;
       }
-      //}
     }
   }
   @media (device-width: 414px) and (device-height: 896px){
     .platform-ios {
-      //.h-ios {
       .h-bottom-tab {
         height: 78px;
         padding-bottom: 34px;
       }
-      //}
     }
   }
 

packages/components/NumberKeyboard/index.vue

@@ -98,6 +98,28 @@
       border-bottom: 1px solid #e5e5e5; /*no*/
       border-right: 1px solid #e5e5e5; /*no*/
 
+      &:nth-child(3){
+        border-right: none;
+      }
+      &:nth-child(6){
+        border-right: none;
+      }
+      &:nth-child(9){
+        border-right: none;
+      }
+      &:nth-child(10){
+        border-right: none;
+        border-bottom: none;
+      }
+      &:nth-child(11){
+        border-right: none;
+        border-bottom: none;
+      }
+      &:nth-child(12){
+        border-right: none;
+        border-bottom: none;
+      }
+
     }
 
     .delete {

src/App.vue

@@ -66,7 +66,6 @@ export default {
 </script>
 
 <style lang="less">
-
   html, body, #app {
     height: 100%;
     width: 100%;