diff --git a/src/assets/less/custom.less b/src/assets/less/custom.less
index ea4625f..47b595a 100644
--- a/src/assets/less/custom.less
+++ b/src/assets/less/custom.less
@@ -24,8 +24,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  min-height: 5rem;
-  font-size: 1.4rem;
+  min-height: 50rem;
+  font-size: 14rem;
 
   &.no-active {
     &:active {
@@ -55,8 +55,8 @@
     color: white;
 
     img {
-      margin-right: 1rem;
-      width: 1.5rem;
+      margin-right: 10rem;
+      width: 15rem;
     }
   }
 
@@ -68,8 +68,8 @@
     color: @second-text-color;
 
     img {
-      margin-left: .5rem;
-      width: 2rem;
+      margin-left: 5rem;
+      width: 20rem;
     }
   }
 }
diff --git a/src/assets/less/utils.less b/src/assets/less/utils.less
index c1fc180..010c108 100644
--- a/src/assets/less/utils.less
+++ b/src/assets/less/utils.less
@@ -55,7 +55,7 @@ margin
 .m(5);
 .m(@n, @i: 1) when (@i =< @n) {
   .m@{i}r {
-    margin: (1rem * @i) !important;
+    margin: (10rem * @i) !important;
   }
   .m(@n, (@i + 1));
 }
@@ -63,7 +63,7 @@ margin
 .ml(5);
 .ml(@n, @i: 1) when (@i =< @n) {
   .ml@{i}r {
-    margin-left: (1rem * @i) !important;
+    margin-left: (10rem * @i) !important;
   }
   .ml(@n, (@i + 1));
 }
@@ -71,7 +71,7 @@ margin
 .mr(5);
 .mr(@n, @i: 1) when (@i =< @n) {
   .mr@{i}r {
-    margin-right: (1rem * @i) !important;
+    margin-right: (10rem * @i) !important;
   }
   .mr(@n, (@i + 1));
 }
@@ -79,7 +79,7 @@ margin
 .mt(5);
 .mt(@n, @i: 1) when (@i =< @n) {
   .mt@{i}r {
-    margin-top: (1rem * @i) !important;
+    margin-top: (10rem * @i) !important;
   }
   .mt(@n, (@i + 1));
 }
@@ -87,7 +87,7 @@ margin
 .mb(7);
 .mb(@n, @i: 1) when (@i =< @n) {
   .mb@{i}r {
-    margin-bottom: (1rem * @i) !important;
+    margin-bottom: (10rem * @i) !important;
   }
   .mb(@n, (@i + 1));
 }
@@ -101,7 +101,7 @@ padding
 .p(5);
 .p(@n, @i: 1) when (@i =< @n) {
   .p@{i}r {
-    padding: (1rem * @i) !important;
+    padding: (10rem * @i) !important;
   }
   .p(@n, (@i + 1));
 }
@@ -109,7 +109,7 @@ padding
 .pb(5);
 .pb(@n, @i: 1) when (@i =< @n) {
   .pb@{i}r {
-    padding-bottom: (1rem * @i) !important;
+    padding-bottom: (10rem * @i) !important;
   }
   .pb(@n, (@i + 1));
 }
@@ -117,7 +117,7 @@ padding
 .pt(5);
 .pt(@n, @i: 1) when (@i =< @n) {
   .pt@{i}r {
-    padding-top: (1rem * @i) !important;
+    padding-top: (10rem * @i) !important;
   }
   .pt(@n, (@i + 1));
 }
@@ -125,7 +125,7 @@ padding
 .pl(5);
 .pl(@n, @i: 1) when (@i =< @n) {
   .pl@{i}r {
-    padding-left: (1rem * @i) !important;
+    padding-left: (10rem * @i) !important;
   }
   .pl(@n, (@i + 1));
 }
@@ -133,7 +133,7 @@ padding
 .pr(5);
 .pr(@n, @i: 1) when (@i =< @n) {
   .pr@{i}r {
-    padding-right: (1rem * @i) !important;
+    padding-right: (10rem * @i) !important;
   }
   .pr(@n, (@i + 1));
 }
diff --git a/src/components/AutoInput.vue b/src/components/AutoInput.vue
index f6b2adb..e494f3c 100644
--- a/src/components/AutoInput.vue
+++ b/src/components/AutoInput.vue
@@ -36,11 +36,11 @@ export default {
 <style scoped lang="less">
 
 .auto-input {
-  font-size: 1.2rem;
+  font-size: 12rem;
   width: 100%;
-  max-height: 7rem;
+  max-height: 70rem;
   overflow-y: scroll;
-  padding: 0 .5rem;
+  padding: 0 5rem;
   outline: none;
 }
 
diff --git a/src/components/BVideo.vue b/src/components/BVideo.vue
index 3cf3951..a7b0087 100644
--- a/src/components/BVideo.vue
+++ b/src/components/BVideo.vue
@@ -371,7 +371,7 @@ export default {
 .video-wrapper {
   position: relative;
   background: black;
-  font-size: 1.4rem;
+  font-size: 14rem;
   width: 100%;
   height: 100%;
 
@@ -382,8 +382,8 @@ export default {
   }
 
   .pause {
-    width: 10rem;
-    height: 10rem;
+    width: 100rem;
+    height: 100rem;
     opacity: 0.5;
     position: absolute;
     margin: auto;
@@ -490,7 +490,7 @@ export default {
           justify-content: center;
           align-items: center;
 
-          @width: 3.5rem;
+          @width: 35rem;
 
           img {
             width: @width;
@@ -498,7 +498,7 @@ export default {
           }
 
           span {
-            font-size: 1.2rem;
+            font-size: 12rem;
           }
         }
 
@@ -520,25 +520,25 @@ export default {
           display: flex;
 
           .location {
-            margin-bottom: 1rem;
+            margin-bottom: 10rem;
 
             display: flex;
             align-items: center;
-            font-size: 1.2rem;
-            padding: .4rem;
-            border-radius: .3rem;
+            font-size: 12rem;
+            padding: 4rem;
+            border-radius: 3rem;
             background: @second-btn-color-tran;
 
             .gang {
-              height: .8rem;
+              height: 8rem;
               width: 1.5px;
-              margin: 0 .5rem;
+              margin: 0 5rem;
               background: gray;
             }
 
             img {
-              margin-right: .7rem;
-              width: 1.8rem;
+              margin-right: 7rem;
+              width: 18rem;
             }
           }
         }
diff --git a/src/components/Back.vue b/src/components/Back.vue
index 39e86ba..ebd8572 100644
--- a/src/components/Back.vue
+++ b/src/components/Back.vue
@@ -39,6 +39,6 @@ export default {
 
 <style scoped lang="less">
 img {
-  width: 2rem;
+  width: 20rem;
 }
 </style>
diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index 8cc4e5a..b531723 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -82,18 +82,18 @@ export default {
 
 .button {
   color: white;
-  height: 4rem;
-  line-height: 4rem;
-  border-radius: .3rem;
+  height: 40rem;
+  line-height: 40rem;
+  border-radius: 3rem;
   //width: 100%;
-  font-size: 1.4rem;
+  font-size: 14rem;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
 
   .progress {
-    border-radius: .3rem;
+    border-radius: 3rem;
     position: absolute;
     left: 0;
     top: 0;
@@ -103,8 +103,8 @@ export default {
   }
 
   img {
-    height: 1.6rem;
-    margin-right: .5rem;
+    height: 16rem;
+    margin-right: 5rem;
     animation: animal .8s infinite linear;
 
     @keyframes animal {
@@ -236,9 +236,9 @@ export default {
   }
 
   &.small {
-    font-size: 1.2rem;
-    width: 6.2rem;
-    height: 2.6rem;
+    font-size: 12rem;
+    width: 62rem;
+    height: 26rem;
   }
 }
 </style>
diff --git a/src/components/BaseHeader.vue b/src/components/BaseHeader.vue
index f1945e5..f59fe52 100644
--- a/src/components/BaseHeader.vue
+++ b/src/components/BaseHeader.vue
@@ -90,8 +90,8 @@ export default {
 
     .left {
       position: absolute;
-      left: 1rem;
-      top: 2rem;
+      left: 10rem;
+      top: 20rem;
     }
 
     & > :nth-last-child(1) {
diff --git a/src/components/BaseMarquee.vue b/src/components/BaseMarquee.vue
index 41263f7..9962d65 100644
--- a/src/components/BaseMarquee.vue
+++ b/src/components/BaseMarquee.vue
@@ -105,7 +105,7 @@ export default {
 
     .space {
       display: inline-block;
-      width: 5rem;
+      width: 50rem;
     }
   }
 
diff --git a/src/components/Call.vue b/src/components/Call.vue
index 717574b..1cb6be0 100644
--- a/src/components/Call.vue
+++ b/src/components/Call.vue
@@ -140,23 +140,23 @@ export default {
 .call-float {
   transition-property: all;
   z-index: 9;
-  width: 7rem;
-  height: 9rem;
+  width: 70rem;
+  height: 90rem;
   position: fixed;
   top: 20vh;
   left: @padding-page;
   background: white;
   display: flex;
   align-items: center;
-  border-radius: .6rem;
+  border-radius: 6rem;
   justify-content: center;
   flex-direction: column;
   color: #14BF5F;
-  font-size: 1.2rem;
+  font-size: 12rem;
 
   img {
-    width: 3rem;
-    margin-bottom: .2rem;
+    width: 30rem;
+    margin-bottom: 2rem;
   }
 }
 
@@ -170,7 +170,7 @@ export default {
   height: 100vh;
   background: linear-gradient(to bottom, #262626, black);
   transition: all .3s;
-  font-size: 1.2rem;
+  font-size: 12rem;
 
   .float {
     transition: all .3s;
@@ -202,8 +202,8 @@ export default {
 
         img {
           width: 50%;
-          max-width: 2.4rem;
-          max-height: 2.4rem;
+          max-width: 24rem;
+          max-height: 24rem;
         }
       }
 
@@ -212,19 +212,19 @@ export default {
         overflow: hidden;
         text-align: center;
         word-break: keep-all;
-        font-size: 1.4rem;
+        font-size: 14rem;
       }
 
       .right {
         width: 12%;
-        max-width: 4rem;
+        max-width: 40rem;
         display: flex;
         flex-direction: column;
 
         img {
           width: 50%;
-          max-width: 2.4rem;
-          max-height: 2.4rem;
+          max-width: 24rem;
+          max-height: 24rem;
         }
 
         .option {
@@ -237,7 +237,7 @@ export default {
           span {
             word-break: keep-all;
             margin-top: 20%;
-            font-size: 1.2rem;
+            font-size: 12rem;
           }
         }
 
@@ -253,7 +253,7 @@ export default {
       top: 50%;
       transform: translate3d(-50%, -50%, 0);
       width: 25%;
-      max-width: 10rem;
+      max-width: 100rem;
       border-radius: 50%;
     }
 
@@ -262,12 +262,12 @@ export default {
       display: flex;
       flex-direction: column;
       align-items: center;
-      font-size: 1.2rem;
+      font-size: 12rem;
       margin-bottom: 10%;
 
       img {
         width: 15%;
-        max-width: 5rem;
+        max-width: 50rem;
         margin-bottom: 1%;
       }
 
@@ -275,12 +275,12 @@ export default {
   }
 
   &.small {
-    width: 7rem;
-    height: 9rem;
+    width: 70rem;
+    height: 90rem;
     position: fixed;
     top: 20vh;
     left: @padding-page;
-    border-radius: .6rem;
+    border-radius: 6rem;
 
     .float {
       > .header {
diff --git a/src/components/Check.vue b/src/components/Check.vue
index 4e6b42b..3e02995 100644
--- a/src/components/Check.vue
+++ b/src/components/Check.vue
@@ -37,7 +37,7 @@ export default {
 @import "../assets/less/index";
 
 .check {
-  @width: 1.4rem;
+  @width: 14rem;
   width: @width;
   height: @width;
 
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 1d7f6e4..6b59ac1 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -331,22 +331,22 @@ export default {
   position: fixed;
   left: 0;
   right: 0;
-  height: 4rem;
-  padding: 0 1.5rem;
+  height: 40rem;
+  padding: 0 15rem;
   background: white;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-radius: 1rem 1rem 0 0;
+  border-radius: 10rem 10rem 0 0;
 
   span {
-    font-size: 1.2rem;
+    font-size: 12rem;
     text-align: center;
   }
 
   img {
-    width: 1.3rem;
-    height: 1.3rem;
+    width: 13rem;
+    height: 13rem;
   }
 }
 
@@ -355,18 +355,18 @@ export default {
   height: v-bind(height);
   background: #fff;
   z-index: 5;
-  border-radius: 1rem 1rem 0 0;
+  border-radius: 10rem 10rem 0 0;
 
   .wrapper {
     position: relative;
-    padding-top: 4rem;
-    padding-bottom: 6rem;
+    padding-top: 40rem;
+    padding-bottom: 60rem;
   }
 
   .items {
     .item {
       .main {
-        padding: .5rem 0;
+        padding: 5rem 0;
         display: flex;
 
         &:active {
@@ -374,19 +374,19 @@ export default {
         }
 
         .head-image {
-          margin-left: 1.5rem;
-          margin-right: 1rem;
-          width: 3.5rem;
-          height: 3.5rem;
+          margin-left: 15rem;
+          margin-right: 10rem;
+          width: 35rem;
+          height: 35rem;
           border-radius: 50%;
         }
       }
 
       .replies {
-        padding-left: 5.5rem;
+        padding-left: 55rem;
 
         .reply {
-          padding: .5rem 0 .5rem .5rem;
+          padding: 5rem 0 5rem 5rem;
           display: flex;
 
           &:active {
@@ -394,34 +394,34 @@ export default {
           }
 
           .head-image {
-            margin-right: 1rem;
-            width: 2rem;
-            height: 2rem;
+            margin-right: 10rem;
+            width: 20rem;
+            height: 20rem;
             border-radius: 50%;
           }
         }
 
         .more {
-          font-size: 1.2rem;
-          margin: .5rem;
+          font-size: 12rem;
+          margin: 5rem;
           display: flex;
           align-items: center;
           color: @second-text-color;
 
           .gang {
             background: #d5d5d5;
-            width: 2rem;
-            margin-right: 1rem;
+            width: 20rem;
+            margin-right: 10rem;
             height: 1px;
           }
 
           .arrow {
-            margin-left: .5rem;
-            margin-top: .8rem;
+            margin-left: 5rem;
+            margin-top: 8rem;
             width: 0;
             height: 0;
-            border: .5rem solid transparent;
-            border-top: .6rem solid @second-text-color;
+            border: 5rem solid transparent;
+            border-top: 6rem solid @second-text-color;
           }
         }
       }
@@ -429,29 +429,29 @@ export default {
       .content {
         display: flex;
         flex: 1;
-        font-size: 1.4rem;
+        font-size: 14rem;
 
         .comment-container {
           width: 85%;
 
           .name {
             color: @second-text-color;
-            margin-bottom: .5rem;
+            margin-bottom: 5rem;
             display: flex;
             align-items: center;
 
 
             .reply-user {
-              margin-left: .5rem;
+              margin-left: 5rem;
               width: 0;
               height: 0;
-              border: .5rem solid transparent;
-              border-left: .6rem solid gray;
+              border: 5rem solid transparent;
+              border-left: 6rem solid gray;
             }
           }
 
           .detail {
-            margin-bottom: .5rem;
+            margin-bottom: 5rem;
           }
 
           .time-wrapper {
@@ -460,7 +460,7 @@ export default {
 
             .time {
               color: #c4c3c3;
-              margin-right: 1.5rem;
+              margin-right: 15rem;
             }
 
             .reply-text {
@@ -473,17 +473,17 @@ export default {
       .love {
         color: @second-text-color;
         text-align: center;
-        width: 3rem;
-        padding-right: 1rem;
+        width: 30rem;
+        padding-right: 10rem;
 
         .love-image {
-          width: 2.5rem;
+          width: 25rem;
           border-radius: 50%;
         }
 
         span {
-          font-size: 1rem;
-          transform: translateY(-.5rem);
+          font-size: 10rem;
+          transform: translateY(-5rem);
         }
       }
     }
@@ -494,18 +494,18 @@ export default {
   @chat-bg-color: rgb(105, 143, 244);
 
   .input-toolbar {
-    border-radius: 1rem 1rem 0 0;
+    border-radius: 10rem 10rem 0 0;
     background: white;
     position: fixed;
     width: 100vw;
     bottom: 0;
     z-index: 3;
 
-    @space-width: 1.8rem;
-    @icon-width: 4.8rem;
+    @space-width: 18rem;
+    @icon-width: 48rem;
 
     .call-friend {
-      padding-top: 3rem;
+      padding-top: 30rem;
       overflow-x: scroll;
       display: flex;
       padding-right: @space-width;
@@ -515,7 +515,7 @@ export default {
         position: relative;
         margin-left: @space-width;
         margin-bottom: @space-width;
-        font-size: 1rem;
+        font-size: 10rem;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -527,7 +527,7 @@ export default {
         }
 
         span {
-          margin-top: .5rem;
+          margin-top: 5rem;
           text-align: center;
           width: @icon-width;
           white-space: nowrap;
@@ -539,18 +539,18 @@ export default {
           position: absolute;
           top: @icon-width - 1.5;
           right: -2px;
-          width: 2rem;
-          height: 2rem;
+          width: 20rem;
+          height: 20rem;
           border-radius: 50%;
         }
       }
     }
 
     .toolbar {
-      @icon-width: 2.5rem;
+      @icon-width: 25rem;
       display: flex;
       align-items: center;
-      padding: 1rem 1.5rem;
+      padding: 10rem 15rem;
       border-top: 1px solid #e2e1e1;
 
       .input-wrapper {
@@ -559,9 +559,9 @@ export default {
         align-items: center;
         justify-content: space-between;
         box-sizing: border-box;
-        padding: .5rem 1rem;
+        padding: 5rem 10rem;
         background: #eee;
-        border-radius: 2rem;
+        border-radius: 20rem;
 
         .right {
           display: flex;
@@ -569,7 +569,7 @@ export default {
         }
 
         .auto-input {
-          width: calc(100vw - 18rem);
+          width: calc(100vw - 180rem);
         }
       }
 
@@ -577,7 +577,7 @@ export default {
         width: @icon-width;
         height: @icon-width;
         border-radius: 50%;
-        margin-left: 1.5rem;
+        margin-left: 15rem;
       }
     }
   }
diff --git a/src/components/DouyinCode.vue b/src/components/DouyinCode.vue
index bd895b6..c3879e3 100644
--- a/src/components/DouyinCode.vue
+++ b/src/components/DouyinCode.vue
@@ -84,7 +84,7 @@ export default {
   .content {
     background: white;
     width: 80vw;
-    margin-bottom: 2rem;
+    margin-bottom: 20rem;
     position: relative;
 
     .top {
@@ -92,22 +92,22 @@ export default {
     }
 
     .desc {
-      margin-bottom: 2rem;
+      margin-bottom: 20rem;
       display: flex;
-      padding: 1rem;
+      padding: 10rem;
 
       .left {
-        font-size: 1.8rem;
+        font-size: 18rem;
 
         .title {
-          font-size: 1.4rem;
+          font-size: 14rem;
           color: @second-text-color;
         }
 
       }
 
       .code {
-        width: 6rem;
+        width: 60rem;
       }
     }
 
@@ -119,7 +119,7 @@ export default {
       width: 35vw;
       height: calc(35vw * 1.5);
       position: absolute;
-      top: 8rem;
+      top: 80rem;
       left: 50%;
       transform: translateX(-50%);
       overflow: hidden;
@@ -138,7 +138,7 @@ export default {
       .play {
         position: relative;
         z-index: 9;
-        width: 4rem;
+        width: 40rem;
       }
     }
   }
@@ -146,17 +146,17 @@ export default {
   .toolbar {
     width: 100vw;
     background: black;
-    border-radius: 1rem 1rem 0 0;
+    border-radius: 10rem 10rem 0 0;
     color: white;
 
     .title {
-      font-size: 1.2rem;
-      padding: 1rem;
+      font-size: 12rem;
+      padding: 10rem;
       text-align: center;
     }
 
-    @space-width: 1.8rem;
-    @icon-width: 4.5rem;
+    @space-width: 18rem;
+    @icon-width: 45rem;
 
     .shares {
       display: flex;
@@ -176,7 +176,7 @@ export default {
 
         span {
           color: @second-text-color;
-          font-size: 1rem;
+          font-size: 10rem;
           display: block;
           text-align: center;
         }
@@ -184,9 +184,9 @@ export default {
     }
 
     .cancel {
-      font-size: 1.6rem;
+      font-size: 16rem;
       background: rgb(38,38,38);
-      padding: 1.5rem;
+      padding: 15rem;
       text-align: center;
     }
 
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
index b4a3315..553f619 100644
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@@ -23,7 +23,7 @@ export default {
 
   &.normal {
     width: 100%;
-    height: 4rem;
+    height: 40rem;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -38,12 +38,12 @@ export default {
     transform: translate(-50%, -50%);
     display: flex;
     justify-content: space-between;
-    width: 2.2rem;
+    width: 22rem;
   }
 
   .circle {
-    width: 1rem;
-    height: 1rem;
+    width: 10rem;
+    height: 10rem;
     border-radius: 50%;
   }
 
@@ -62,7 +62,7 @@ export default {
       transform: translate3d(0, 0, 0) scale(1);
     }
     to {
-      transform: translate3d(1rem, 0, 0) scale(1.2);
+      transform: translate3d(10rem, 0, 0) scale(1.2);
     }
 
   }
@@ -71,7 +71,7 @@ export default {
       transform: translate3d(0, 0, 0) scale(1);
     }
     to {
-      transform: translate3d(-1rem, 0, 0) scale(1.2);
+      transform: translate3d(-10rem, 0, 0) scale(1.2);
     }
   }
 }
diff --git a/src/components/NoMore.vue b/src/components/NoMore.vue
index 3f07a6b..5780380 100644
--- a/src/components/NoMore.vue
+++ b/src/components/NoMore.vue
@@ -14,8 +14,8 @@ export default {
 @import "../assets/less/index";
 
 .NoMore {
-  font-size: 1.2rem;
-  height: 6rem;
+  font-size: 12rem;
+  height: 60rem;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/components/Posters.vue b/src/components/Posters.vue
index 77f163f..ab00f8a 100644
--- a/src/components/Posters.vue
+++ b/src/components/Posters.vue
@@ -95,50 +95,50 @@ export default {
 
   .music {
     position: absolute;
-    font-size: 1.2rem;
+    font-size: 12rem;
     background: gold;
     color: black;
-    padding: .2rem .3rem;
-    border-radius: .2rem;
-    top: .7rem;
-    left: .7rem;
+    padding: 2rem 3rem;
+    border-radius: 2rem;
+    top: 7rem;
+    left: 7rem;
   }
 
   .num {
     color: white;
     position: absolute;
-    bottom: .5rem;
-    left: .5rem;
+    bottom: 5rem;
+    left: 5rem;
     display: flex;
     align-items: center;
-    font-size: 1.4rem;
+    font-size: 14rem;
 
     .love {
-      width: 1.4rem;
-      height: 1.4rem;
-      margin-right: .5rem;
+      width: 14rem;
+      height: 14rem;
+      margin-right: 5rem;
     }
   }
 
   .date {
     position: absolute;
-    top: .5rem;
-    left: .5rem;
+    top: 5rem;
+    left: 5rem;
     display: flex;
     align-items: center;
     flex-direction: column;
-    font-size: 1.4rem;
+    font-size: 14rem;
     color: black;
     background: white;
-    padding: .6rem;
-    border-radius: .6rem;
+    padding: 6rem;
+    border-radius: 6rem;
 
     .day {
       font-weight: bold;
     }
 
     .month {
-      font-size: 1rem;
+      font-size: 10rem;
     }
   }
 }
diff --git a/src/components/Search.vue b/src/components/Search.vue
index c6b70e5..a84c977 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -95,24 +95,24 @@ export default {
   }
 
   .rightTextColor {
-    margin-left: 1.5rem;
-    font-size: 1.4rem;
+    margin-left: 15rem;
+    font-size: 14rem;
   }
 
   .search {
-    font-size: 1.4rem;
+    font-size: 14rem;
     padding: 0;
     flex: 1;
     position: relative;
-    height: 3.6rem;
+    height: 36rem;
     border-radius: 2px;
     display: flex;
     align-items: center;
 
     .search-icon {
-      height: 2.2rem;
-      width: 2.2rem;
-      margin-left: .7rem;
+      height: 22rem;
+      width: 22rem;
+      margin-left: 7rem;
     }
 
     input {
@@ -122,7 +122,7 @@ export default {
       width: 100%;
       outline: none;
       border: none;
-      padding: 0 0 0 .7rem;
+      padding: 0 0 0 7rem;
       background: transparent;
 
       &::-webkit-input-placeholder {
@@ -134,10 +134,10 @@ export default {
       display: flex;
       align-items: center;
       position: absolute;
-      right: 1.5rem;
+      right: 15rem;
 
       img {
-        width: 1.5rem;
+        width: 15rem;
       }
     }
   }
diff --git a/src/components/Share.vue b/src/components/Share.vue
index e006a55..9cbd692 100644
--- a/src/components/Share.vue
+++ b/src/components/Share.vue
@@ -273,11 +273,11 @@ export default {
   color: white;
   box-sizing: border-box;
 
-  @space-width: 1.8rem;
-  @icon-width: 4.8rem;
+  @space-width: 18rem;
+  @icon-width: 48rem;
 
   .title {
-    font-size: 1.4rem;
+    font-size: 14rem;
     padding: 20px;
     position: relative;
     display: flex;
@@ -285,9 +285,9 @@ export default {
     justify-content: space-between;
 
     img {
-      width: 1.4rem;
-      height: 1.4rem;
-      padding: .6rem;
+      width: 14rem;
+      height: 14rem;
+      padding: 6rem;
       border-radius: 50%;
       background: @second-btn-color-tran;
       //background: rgb(56, 58, 57);
@@ -304,7 +304,7 @@ export default {
       position: relative;
       margin-left: @space-width;
       margin-bottom: @space-width;
-      font-size: 1rem;
+      font-size: 10rem;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -316,7 +316,7 @@ export default {
       }
 
       span {
-        margin-top: .5rem;
+        margin-top: 5rem;
         text-align: center;
         width: @icon-width;
         //white-space: nowrap;
@@ -328,8 +328,8 @@ export default {
         position: absolute;
         top: @icon-width - 1.5;
         right: -2px;
-        width: 2rem;
-        height: 2rem;
+        width: 20rem;
+        height: 20rem;
         border-radius: 50%;
       }
     }
@@ -341,7 +341,7 @@ export default {
       img {
         width: @icon-width - 2.6;
         height: @icon-width - 2.6;
-        padding: 1.3rem;
+        padding: 13rem;
         border-radius: 50%;
         background: @second-btn-color-tran;
         //background: rgb(56, 58, 57);
@@ -349,7 +349,7 @@ export default {
     }
 
     span {
-      font-size: 1.2rem;
+      font-size: 12rem;
       display: block;
       text-align: center;
       word-break: break-all;
@@ -359,9 +359,9 @@ export default {
   .line {
     height: 1px;
     background: #1c1c1c;
-    margin-left: 2rem;
-    width: calc(100% - 4rem);
-    margin-bottom: 1rem;
+    margin-left: 20rem;
+    width: calc(100% - 40rem);
+    margin-bottom: 10rem;
   }
 
   .shares {
@@ -383,7 +383,7 @@ export default {
 
       span {
         color: @second-text-color;
-        font-size: 1rem;
+        font-size: 10rem;
         display: block;
         text-align: center;
       }
@@ -404,7 +404,7 @@ export default {
       img {
         width: @icon-width - 2;
         height: @icon-width - 2;
-        padding: 1rem;
+        padding: 10rem;
         border-radius: 50%;
         //background: @second-btn-color;
         background: rgb(56, 58, 57);
@@ -412,7 +412,7 @@ export default {
 
       span {
         color: @second-text-color;
-        font-size: 1rem;
+        font-size: 10rem;
         display: block;
         text-align: center;
       }
@@ -422,10 +422,10 @@ export default {
   .share2friend {
     position: fixed;
     bottom: 0;
-    padding: 2rem;
+    padding: 20rem;
     box-sizing: border-box;
     width: 100vw;
-    height: 18rem;
+    height: 180rem;
     background: black;
     display: flex;
     flex-direction: column;
@@ -444,23 +444,23 @@ export default {
       }
 
       .poster {
-        margin-left: 2rem;
-        height: 4rem;
-        width: 4rem;
+        margin-left: 20rem;
+        height: 40rem;
+        width: 40rem;
       }
     }
 
     .create-chat {
-      font-size: 1.1rem;
-      margin: 1rem 0;
+      font-size: 11rem;
+      margin: 10rem 0;
       display: flex;
       align-items: center;
       color: @second-text-color;
 
       .check {
-        margin-right: 1rem;
-        width: 1.6rem;
-        height: 1.6rem;
+        margin-right: 10rem;
+        width: 16rem;
+        height: 16rem;
         //transform: scale(1.2);
       }
     }
diff --git a/src/components/Video.vue b/src/components/Video.vue
index 2066a4e..04456c4 100644
--- a/src/components/Video.vue
+++ b/src/components/Video.vue
@@ -400,7 +400,7 @@ export default {
 .video-wrapper {
   position: relative;
   background: black;
-  font-size: 1.4rem;
+  font-size: 14rem;
   width: 100%;
   height: 100%;
 
@@ -411,14 +411,13 @@ export default {
   }
 
   .pause {
-    width: 10rem;
-    height: 10rem;
+    width: 100rem;
+    height: 100rem;
     opacity: 0.5;
     position: absolute;
     margin: auto;
     left: 0;
     top: 0;
-    top: 0;
     bottom: 0;
     right: 0;
     animation: pause-animation 1.1s linear;
@@ -520,7 +519,7 @@ export default {
           justify-content: center;
           align-items: center;
 
-          @width: 3.5rem;
+          @width: 35rem;
 
           img {
             width: @width;
@@ -528,7 +527,7 @@ export default {
           }
 
           span {
-            font-size: 1.2rem;
+            font-size: 12rem;
           }
         }
 
@@ -550,25 +549,25 @@ export default {
           display: flex;
 
           .location {
-            margin-bottom: 1rem;
+            margin-bottom: 10rem;
 
             display: flex;
             align-items: center;
-            font-size: 1.2rem;
-            padding: .4rem;
-            border-radius: .3rem;
+            font-size: 12rem;
+            padding: 4rem;
+            border-radius: 3rem;
             background: @second-btn-color-tran;
 
             .gang {
-              height: .8rem;
+              height: 8rem;
               width: 1.5px;
-              margin: 0 .5rem;
+              margin: 0 5rem;
               background: gray;
             }
 
             img {
-              margin-right: .7rem;
-              width: 1.8rem;
+              margin-right: 7rem;
+              width: 18rem;
             }
           }
         }
diff --git a/src/components/dialog/ConfirmDialog.vue b/src/components/dialog/ConfirmDialog.vue
index 93b0a8c..add892a 100644
--- a/src/components/dialog/ConfirmDialog.vue
+++ b/src/components/dialog/ConfirmDialog.vue
@@ -100,20 +100,20 @@ export default {
     width: 70%;
     border-radius: 2px;
     box-sizing: border-box;
-    font-size: 1.5rem;
+    font-size: 15rem;
     text-align: center;
 
     .body {
-      padding: 2.5rem;
+      padding: 25rem;
 
       .title {
-        font-size: 1.5rem;
+        font-size: 15rem;
         font-weight: bold;
       }
 
       .subtitle {
-        margin-top: 1rem;
-        font-size: 1.3rem;
+        margin-top: 10rem;
+        font-size: 13rem;
 
         &.gray {
           color: @second-text-color;
@@ -122,10 +122,10 @@ export default {
     }
 
     .footer {
-      height: 4.6rem;
+      height: 46rem;
       display: flex;
       border-top: 1px solid whitesmoke;
-      font-size: 1.4rem;
+      font-size: 14rem;
 
       .cancel, .ok {
         display: flex;
@@ -145,11 +145,7 @@ export default {
           color: @second-text-color;
         }
       }
-
     }
-
   }
-
-
 }
 </style>
diff --git a/src/components/dialog/FadeDialog.vue b/src/components/dialog/FadeDialog.vue
index c8b02c6..a963ced 100644
--- a/src/components/dialog/FadeDialog.vue
+++ b/src/components/dialog/FadeDialog.vue
@@ -27,10 +27,10 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
 
   .content {
-    padding-top: 6rem;
+    padding-top: 60rem;
   }
 }
 </style>
diff --git a/src/components/dialog/FromBottomDialog.vue b/src/components/dialog/FromBottomDialog.vue
index 649cf98..f58dfe0 100644
--- a/src/components/dialog/FromBottomDialog.vue
+++ b/src/components/dialog/FromBottomDialog.vue
@@ -61,7 +61,7 @@ export default {
     },
     borderRadius: {
       type: String,
-      default: '.5rem .5rem 0 0'
+      default: '5rem 5rem 0 0'
     },
   },
   watch: {
@@ -186,7 +186,7 @@ export default {
   position: fixed;
   width: 100%;
   overflow: auto;
-  padding-top: 2.4rem;
+  padding-top: 24rem;
   bottom: 0;
   left: 0;
   box-sizing: border-box;
@@ -210,13 +210,13 @@ export default {
   }
 
   .heng-gang {
-    border-radius: .5rem .5rem 0 0;
+    border-radius: 5rem 5rem 0 0;
     z-index: 3;
     width: 100%;
     position: fixed;
-    height: 2rem;
+    height: 20rem;
     display: flex;
-    transform: translateY(-2.4rem);
+    transform: translateY(-24rem);
     justify-content: center;
     align-items: center;
 
@@ -246,8 +246,8 @@ export default {
 
     .content {
       border-radius: 2px;
-      height: .4rem;
-      width: 3rem;
+      height: 4rem;
+      width: 30rem;
     }
   }
 }
diff --git a/src/components/dialog/NoticeDialog.vue b/src/components/dialog/NoticeDialog.vue
index 2a87e47..51b3171 100644
--- a/src/components/dialog/NoticeDialog.vue
+++ b/src/components/dialog/NoticeDialog.vue
@@ -75,20 +75,20 @@ export default {
     width: 70%;
     border-radius: 2px;
     box-sizing: border-box;
-    font-size: 1.5rem;
+    font-size: 15rem;
     text-align: center;
 
     .body {
-      padding: 2.5rem;
+      padding: 25rem;
 
       .title {
-        font-size: 1.5rem;
+        font-size: 15rem;
         font-weight: bold;
       }
 
       .subtitle {
-        margin-top: 1rem;
-        font-size: 1.3rem;
+        margin-top: 10rem;
+        font-size: 13rem;
 
         &.gray{
           color: @second-text-color;
@@ -97,12 +97,12 @@ export default {
     }
 
     .footer {
-      height: 4.6rem;
+      height: 46rem;
       display: flex;
       justify-content: center;
       align-items: center;
       border-top: 1px solid whitesmoke;
-      font-size: 1.4rem;
+      font-size: 14rem;
 
 
       .cancel {
diff --git a/src/components/dialog/SelectDialog.vue b/src/components/dialog/SelectDialog.vue
index 069b98e..f3c6c9c 100644
--- a/src/components/dialog/SelectDialog.vue
+++ b/src/components/dialog/SelectDialog.vue
@@ -43,13 +43,13 @@ export default {
   .content {
     background: white;
     width: 80%;
-    padding: .5rem 0;
+    padding: 5rem 0;
     border-radius: 2px;
     box-sizing: border-box;
 
     .item {
-      font-size: 1.5rem;
-      padding: 1.5rem 2rem;
+      font-size: 15rem;
+      padding: 15rem 20rem;
       transition: all .2s;
 
       &:active {
diff --git a/src/components/dialog/SimpleConfirmDialog.vue b/src/components/dialog/SimpleConfirmDialog.vue
index b8ae095..48e3405 100644
--- a/src/components/dialog/SimpleConfirmDialog.vue
+++ b/src/components/dialog/SimpleConfirmDialog.vue
@@ -67,16 +67,16 @@ export default {
     width: 80%;
     border-radius: 2px;
     box-sizing: border-box;
-    padding: 1.5rem 2rem;
-    font-size: 1.5rem;
+    padding: 15rem 20rem;
+    font-size: 15rem;
 
     .footer {
-      margin-top: 2rem;
+      margin-top: 20rem;
       display: flex;
       justify-content: flex-end;
 
       .cancel {
-        margin-right: 2.5rem;
+        margin-right: 25rem;
       }
 
     }
diff --git a/src/components/slide/Indicator.vue b/src/components/slide/Indicator.vue
index 31dd2c4..d9dff17 100644
--- a/src/components/slide/Indicator.vue
+++ b/src/components/slide/Indicator.vue
@@ -117,7 +117,7 @@ export default {
 @import "../../assets/less/index";
 
 .indicator-ctn {
-  font-size: 1.4rem;
+  font-size: 14rem;
   width: 100%;
   height: @indicator-height;
   top: 0;
@@ -132,7 +132,7 @@ export default {
     font-weight: bold;
 
     .tab {
-      height: 4.5rem;
+      height: 45rem;
       width: 45%;
       display: flex;
       justify-content: center;
@@ -145,8 +145,8 @@ export default {
       }
 
       img {
-        margin-left: .5rem;
-        @width: 1.2rem;
+        margin-left: 5rem;
+        @width: 12rem;
         width: @width;
         height: @width;
       }
diff --git a/src/components/slide/IndicatorLight.vue b/src/components/slide/IndicatorLight.vue
index dcd300e..110aef0 100644
--- a/src/components/slide/IndicatorLight.vue
+++ b/src/components/slide/IndicatorLight.vue
@@ -118,7 +118,7 @@ export default {
 @import "../../assets/less/index";
 
 .indicator-ctn {
-  font-size: 1.4rem;
+  font-size: 14rem;
   width: 100%;
   height: @indicator-height;
   top: 0;
@@ -132,7 +132,7 @@ export default {
     font-weight: bold;
 
     .tab {
-      height: 4.5rem;
+      height: 45rem;
       width: 45%;
       display: flex;
       justify-content: center;
@@ -145,8 +145,8 @@ export default {
       }
 
       img {
-        margin-left: .5rem;
-        @width: 1.2rem;
+        margin-left: 5rem;
+        @width: 12rem;
         width: @width;
         height: @width;
       }
@@ -155,7 +155,7 @@ export default {
 
   .indicator {
     height: 3px;
-    width: 2.5rem;
+    width: 25rem;
     background: #fff;
     border-radius: 5px;
     position: relative;
diff --git a/src/components/slide/SlideList.vue b/src/components/slide/SlideList.vue
index 9706ec7..19c7680 100644
--- a/src/components/slide/SlideList.vue
+++ b/src/components/slide/SlideList.vue
@@ -431,7 +431,7 @@ export default {
 
   .indicator-home {
     position: fixed;
-    font-size: 1.6rem;
+    font-size: 16rem;
     top: 0;
     left: 0;
     height: 60px;
diff --git a/src/components/slide/SlideRowList.vue b/src/components/slide/SlideRowList.vue
index 6d54c7c..18732f8 100644
--- a/src/components/slide/SlideRowList.vue
+++ b/src/components/slide/SlideRowList.vue
@@ -21,9 +21,9 @@
         <img src="../../assets/img/icon/search-gray.png" alt=""
              :style="{opacity:loading ? 0 : 1}"
              @click="$nav('/home/search')"
-             style="margin-top: .5rem;">
+             style="margin-top: 5rem;">
       </div>
-      <Loading class="loading" style="width: 4rem;" :style="loadingStyle" :is-full-screen="false"/>
+      <Loading class="loading" style="width: 40rem;" :style="loadingStyle" :is-full-screen="false"/>
     </div>
 
     <div class="indicator-bullets" v-if="indicatorType === 'bullets' && slideItems.length">
@@ -362,7 +362,7 @@ export default {
 
   .indicator-home {
     position: fixed;
-    font-size: 1.6rem;
+    font-size: 16rem;
     top: 0;
     left: 0;
     height: 60px;
@@ -383,8 +383,8 @@ export default {
 
     .loading {
       opacity: 0;
-      top: 1.3rem;
-      right: 1.5rem;
+      top: 13rem;
+      right: 15rem;
       position: absolute;
 
     }
@@ -396,7 +396,7 @@ export default {
       width: 100%;
       height: 100%;
       box-sizing: border-box;
-      padding: 0 1.5rem;
+      padding: 0 15rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -424,11 +424,11 @@ export default {
         .indicator {
           //transition: left .3s;
           position: absolute;
-          bottom: -0.8rem;
-          height: .3rem;
-          width: 2rem;
+          bottom: -8rem;
+          height: 3rem;
+          width: 20rem;
           background: #fff;
-          border-radius: .5rem;
+          border-radius: 5rem;
         }
       }
     }
@@ -436,7 +436,7 @@ export default {
 
   .indicator-bullets {
     position: absolute;
-    bottom: 1rem;
+    bottom: 10rem;
     z-index: 2;
     left: 0;
     display: flex;
@@ -444,10 +444,10 @@ export default {
     width: 100%;
 
     .bullet {
-      @width: .5rem;
+      @width: 5rem;
       width: @width;
       height: @width;
-      margin: 0 .3rem;
+      margin: 0 3rem;
       border-radius: 50%;
       background: @second-btn-color;
 
diff --git a/src/components/slide/SlideUser.vue b/src/components/slide/SlideUser.vue
index 4378339..8d0ef60 100644
--- a/src/components/slide/SlideUser.vue
+++ b/src/components/slide/SlideUser.vue
@@ -259,34 +259,34 @@ export default {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    border-radius: 1.5rem;
+    border-radius: 15rem;
     //box-shadow: 0 0 2rem 0 #b3b3b3;
-    padding: 1.5rem;
+    padding: 15rem;
     color: black;
     position: relative;
 
     .close {
-      top: 1.5rem;
-      right: 1.5rem;
-      width: 2.5rem;
-      height: 2.5rem;
+      top: 15rem;
+      right: 15rem;
+      width: 25rem;
+      height: 25rem;
       position: absolute;
     }
 
     .avatar {
-      width: 12rem;
+      width: 120rem;
       border-radius: 50%;
     }
 
     .name {
-      margin-top: 2rem;
-      margin-bottom: 2rem;
+      margin-top: 20rem;
+      margin-bottom: 20rem;
       font-weight: bold;
-      font-size: 1.6rem;
+      font-size: 16rem;
     }
 
     .age {
-      font-size: 1rem;
+      font-size: 10rem;
       background: #f1f1f1;
       padding: 3px;
       border-radius: 2px;
@@ -297,9 +297,9 @@ export default {
       color: black;
       border-top: 1px solid #f1f1f1;
       border-bottom: 1px solid #f1f1f1;
-      padding: 1rem 0;
-      margin: 1.5rem 0;
-      font-size: 1.2rem;
+      padding: 10rem 0;
+      margin: 15rem 0;
+      font-size: 12rem;
       width: 90%;
     }
 
@@ -313,7 +313,7 @@ export default {
     }
 
     .poster-item {
-      border-radius: .8rem;
+      border-radius: 8rem;
       overflow: hidden;
       position: relative;
 
@@ -326,17 +326,17 @@ export default {
       .num {
         color: white;
         position: absolute;
-        bottom: .5rem;
-        left: .5rem;
+        bottom: 5rem;
+        left: 5rem;
         display: flex;
         align-items: center;
-        font-size: 1.2rem;
+        font-size: 12rem;
 
 
         .love {
-          width: 1.2rem;
-          height: 1.2rem;
-          margin-right: .5rem;
+          width: 12rem;
+          height: 12rem;
+          margin-right: 5rem;
         }
       }
     }
@@ -345,11 +345,11 @@ export default {
 
   .options {
     position: absolute;
-    bottom: 2rem;
+    bottom: 20rem;
     display: flex;
     justify-content: space-between;
-    left: 1.5rem;
-    right: 1.5rem;
+    left: 15rem;
+    right: 15rem;
 
     .button {
       width: 49%;
diff --git a/src/components/slide/SlideVideo.vue b/src/components/slide/SlideVideo.vue
index ea6ab8c..4c97551 100644
--- a/src/components/slide/SlideVideo.vue
+++ b/src/components/slide/SlideVideo.vue
@@ -353,7 +353,7 @@ export default {
 .video-wrapper {
   position: relative;
   background: black;
-  font-size: 1.4rem;
+  font-size: 14rem;
   width: 100%;
   height: 100%;
 
@@ -364,8 +364,8 @@ export default {
   }
 
   .pause {
-    width: 10rem;
-    height: 10rem;
+    width: 100rem;
+    height: 100rem;
     opacity: 0.5;
     position: absolute;
     margin: auto;
@@ -473,7 +473,7 @@ export default {
           justify-content: center;
           align-items: center;
 
-          @width: 3.5rem;
+          @width: 35rem;
 
           img {
             width: @width;
@@ -481,7 +481,7 @@ export default {
           }
 
           span {
-            font-size: 1.2rem;
+            font-size: 12rem;
           }
         }
 
@@ -503,25 +503,25 @@ export default {
           display: flex;
 
           .location {
-            margin-bottom: 1rem;
+            margin-bottom: 10rem;
 
             display: flex;
             align-items: center;
-            font-size: 1.2rem;
-            padding: .4rem;
-            border-radius: .3rem;
+            font-size: 12rem;
+            padding: 4rem;
+            border-radius: 3rem;
             background: @second-btn-color-tran;
 
             .gang {
-              height: .8rem;
+              height: 8rem;
               width: 1.5px;
-              margin: 0 .5rem;
+              margin: 0 5rem;
               background: gray;
             }
 
             img {
-              margin-right: .7rem;
-              width: 1.8rem;
+              margin-right: 7rem;
+              width: 18rem;
             }
           }
         }
diff --git a/src/pages/home/Attention.vue b/src/pages/home/Attention.vue
index 3515403..5ab60c4 100644
--- a/src/pages/home/Attention.vue
+++ b/src/pages/home/Attention.vue
@@ -409,14 +409,14 @@ export default {
   //overflow: auto;
 
   .scroller {
-    //transform: translate3d(0, -5rem, 0);
-    height: calc(100vh - 5rem);
+    //transform: translate3d(0, -50rem, 0);
+    height: calc(100vh - 50rem);
     position: relative;
     overflow: scroll;
 
     > .wrapper {
       position: absolute;
-      top: -8rem;
+      top: -80rem;
       left: 0;
       width: 100%;
       z-index: 2;
@@ -425,17 +425,17 @@ export default {
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
-        height: 8rem;
+        height: 80rem;
       }
     }
   }
 
   header {
-    //transform: translate3d(0, -5rem, 0);
+    //transform: translate3d(0, -50rem, 0);
     background: @douyin-bg;
     width: 100%;
-    font-size: 1.5rem;
-    height: 5rem;
+    font-size: 15rem;
+    height: 50rem;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -461,7 +461,7 @@ export default {
 
     .title {
       margin-bottom: 15px;
-      font-size: 1.8rem;
+      font-size: 18rem;
       font-weight: bold;
     }
 
@@ -483,7 +483,7 @@ export default {
 
         .left-title {
           font-weight: bold;
-          font-size: 1.7rem;
+          font-size: 17rem;
           display: flex;
           align-items: center;
           margin-bottom: 10px;
@@ -492,7 +492,7 @@ export default {
             background: linear-gradient(to top right, #e37c7c, #bd5959);
             padding: 0 4px 2px 4px;
             border-radius: 3px;
-            font-size: 1rem;
+            font-size: 10rem;
             font-weight: lighter;
             margin-left: 5px;
           }
@@ -516,7 +516,7 @@ export default {
             }
 
             .price {
-              font-size: 1rem;
+              font-size: 10rem;
             }
           }
         }
@@ -553,7 +553,7 @@ export default {
               }
 
               .ad-desc {
-                font-size: 1rem;
+                font-size: 10rem;
                 color: darkgray;
               }
             }
@@ -563,8 +563,6 @@ export default {
               height: 50px;
               border-radius: 5px;
             }
-
-
           }
         }
       }
@@ -620,17 +618,17 @@ export default {
         .author {
           position: absolute;
           border-radius: 50%;
-          height: 3rem;
-          bottom: 1rem;
-          left: 1rem;
+          height: 30rem;
+          bottom: 10rem;
+          left: 10rem;
         }
 
         .live {
           position: absolute;
-          padding: .2rem .5rem;
-          border-radius: .2rem;
-          top: 1rem;
-          left: 1rem;
+          padding: 2rem 5rem;
+          border-radius: 2rem;
+          top: 10rem;
+          left: 10rem;
           color: white;
           background: @primary-btn-color;
         }
@@ -641,7 +639,7 @@ export default {
         background: @douyin-bg;
 
         .top, .bottom {
-          font-size: 1.4rem;
+          font-size: 14rem;
           display: flex;
           align-items: center;
 
@@ -658,31 +656,31 @@ export default {
           .line {
             margin: 0 4px;
             width: 1px;
-            height: .8rem;
+            height: 8rem;
             background: gray;
           }
         }
 
         .bottom {
           margin-top: 2px;
-          font-size: 1rem;
+          font-size: 10rem;
         }
       }
 
       .ranking-list {
-        padding: 2rem 1rem;
+        padding: 20rem 10rem;
         background: @douyin-bg;
 
         .desc {
           .top {
-            margin-bottom: .2rem;
+            margin-bottom: 2rem;
             display: flex;
             align-items: center;
-            font-size: 1.4rem;
+            font-size: 14rem;
 
             .logo {
-              margin-right: .5rem;
-              height: 1.4rem;
+              margin-right: 5rem;
+              height: 14rem;
             }
 
             .name {
@@ -692,19 +690,19 @@ export default {
         }
 
         .ads {
-          font-size: 1.2rem;
+          font-size: 12rem;
 
           .ad {
             background: @second-btn-color;
             display: flex;
-            margin-top: 1rem;
+            margin-top: 10rem;
 
             .left {
-              margin-right: 1rem;
+              margin-right: 10rem;
 
               .ad-logo {
-                height: 4rem;
-                width: 4rem;
+                height: 40rem;
+                width: 40rem;
               }
             }
 
@@ -715,7 +713,7 @@ export default {
 
               .rank {
                 color: @second-text-color;
-                margin-bottom: .2rem;
+                margin-bottom: 2rem;
               }
             }
           }
diff --git a/src/pages/home/Index2.vue b/src/pages/home/Index2.vue
index bc4c5af..c419e6d 100644
--- a/src/pages/home/Index2.vue
+++ b/src/pages/home/Index2.vue
@@ -6,7 +6,7 @@
         v-model:active-index="baseActiveIndex">
       <SlideItem>
         <SlideRowList
-            style="height: calc(100% - 5rem);"
+            style="height: calc(100% - 50rem);"
             v-model:active-index="activeIndex"
             indicatorType="home"
         >
diff --git a/src/pages/home/LivePage.vue b/src/pages/home/LivePage.vue
index cbde22a..5e8a801 100644
--- a/src/pages/home/LivePage.vue
+++ b/src/pages/home/LivePage.vue
@@ -238,7 +238,7 @@ export default {
 .send-gift {
   position: fixed;
   top: 63vh;
-  left: 1.5rem;
+  left: 15rem;
   display: flex;
   align-items: flex-end;
   animation: send-gift-anim 2s linear;
@@ -264,14 +264,14 @@ export default {
 
   .left {
     background: linear-gradient(to right, @primary-btn-color, rgba(252, 47, 86, .2));
-    padding: .5rem;
-    border-radius: 5rem;
+    padding: 5rem;
+    border-radius: 50rem;
     display: flex;
     align-items: center;
 
     .avatar {
-      margin-right: .5rem;
-      width: 4rem;
+      margin-right: 5rem;
+      width: 40rem;
       border-radius: 50%;
     }
 
@@ -285,11 +285,11 @@ export default {
       }
 
       .name {
-        font-size: 1.4rem;
+        font-size: 14rem;
       }
 
       .sendto {
-        font-size: 1.2rem;
+        font-size: 12rem;
         color: yellow;
       }
 
@@ -299,13 +299,13 @@ export default {
     }
 
     .gift-icon {
-      width: 4rem;
+      width: 40rem;
     }
 
   }
 
   .right {
-    font-size: 2.3rem;
+    font-size: 23rem;
     font-weight: bold;
     font-style: oblique;
   }
@@ -317,7 +317,7 @@ export default {
   transform: translateX(100vw);
   display: flex;
   align-items: center;
-  font-size: 1.2rem;
+  font-size: 12rem;
   animation: anim 5s linear;
 
   @keyframes anim {
@@ -330,24 +330,24 @@ export default {
   }
 
   .type {
-    padding: .1rem .6rem;
+    padding: 1rem 6rem;
     border: 1px solid white;
-    border-radius: 2rem;
-    margin-right: .5rem;
+    border-radius: 20rem;
+    margin-right: 5rem;
   }
 
 }
 
 .user-joined {
   @tag-bg: rgba(58, 58, 70, 0.3);
-  font-size: 1.2rem;
+  font-size: 12rem;
   position: absolute;
   top: 70vh;
-  left: 1.5rem;
-  padding: .4rem .8rem;
-  border-radius: 2rem;
+  left: 15rem;
+  padding: 4rem 8rem;
+  border-radius: 20rem;
   background: rgba(115, 114, 181, .7);
-  margin-bottom: .5rem;
+  margin-bottom: 5rem;
   animation: user-joined-anim 3s linear;
 
   @keyframes user-joined-anim {
@@ -357,7 +357,7 @@ export default {
     }
     10% {
       opacity: 1;
-      transform: translateX(3rem);
+      transform: translateX(30rem);
     }
     90% {
       opacity: 1;
@@ -378,22 +378,22 @@ export default {
       display: flex;
       @color: rgb(130, 133, 185);
       align-items: center;
-      font-size: 1rem;
-      border-radius: 1rem;
-      margin-right: 0.5rem;
-      padding: 0 .6rem;
+      font-size: 10rem;
+      border-radius: 10rem;
+      margin-right: 5rem;
+      padding: 0 6rem;
       background: @color;
 
       img {
-        margin-right: 0.3rem;
-        width: 1.2rem;
+        margin-right: 3rem;
+        width: 12rem;
       }
     }
   }
 
   .name {
-    margin-right: 0.5rem;
-    font-size: 1.3rem;
+    margin-right: 5rem;
+    font-size: 13rem;
     color: @text-color;
   }
 
@@ -410,7 +410,7 @@ export default {
   width: 100vw;
   height: 100vh;
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
   position: relative;
 
   .live-wrapper {
@@ -436,7 +436,7 @@ export default {
     .top {
       display: flex;
       justify-content: space-between;
-      margin-top: 1rem;
+      margin-top: 10rem;
 
       .left {
         margin-left: @padding-page;
@@ -445,15 +445,15 @@ export default {
           box-sizing: border-box;
           background: @second-btn-color-tran;
           display: flex;
-          padding: .3rem .4rem .3rem .2rem;
+          padding: 3rem 4rem 3rem 2rem;
           align-items: center;
-          border-radius: 2rem;
+          border-radius: 20rem;
 
           .avatar {
             border-radius: 50%;
-            width: 3rem;
-            height: 3rem;
-            margin-right: .4rem;
+            width: 30rem;
+            height: 30rem;
+            margin-right: 4rem;
           }
 
           .desc {
@@ -464,10 +464,10 @@ export default {
 
 
             .desc-wrapper {
-              width: 8rem;
+              width: 80rem;
 
               .name {
-                font-size: 1.2rem;
+                font-size: 12rem;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
@@ -475,19 +475,19 @@ export default {
 
               .count {
                 color: gainsboro;
-                font-size: 1rem;
+                font-size: 10rem;
               }
             }
 
             .follow-btn {
-              height: 3rem;
-              width: 4.5rem;
+              height: 30rem;
+              width: 45rem;
               background: @primary-btn-color;
-              border-radius: 3rem;
+              border-radius: 30rem;
               display: flex;
               align-items: center;
               justify-content: center;
-              font-size: 1.2rem;
+              font-size: 12rem;
             }
           }
         }
@@ -495,20 +495,20 @@ export default {
         .left-bottom {
           margin-top: calc(@padding-page / 2);
           display: flex;
-          font-size: 1.2rem;
+          font-size: 12rem;
 
           .tag {
             display: flex;
             align-items: center;
-            padding: .4rem 1rem;
+            padding: 4rem 10rem;
             background: @tag-bg;
-            border-radius: 2rem;
-            margin-right: 1rem;
+            border-radius: 20rem;
+            margin-right: 10rem;
 
             img {
-              margin-right: .5rem;
-              width: 1rem;
-              height: 1rem;
+              margin-right: 5rem;
+              width: 10rem;
+              height: 10rem;
             }
           }
         }
@@ -516,23 +516,23 @@ export default {
       }
 
       .right {
-        margin-top: .3rem;
+        margin-top: 3rem;
         display: flex;
         flex-direction: column;
 
         .follower {
-          @width: 3rem;
+          @width: 30rem;
           display: flex;
 
           .round {
             width: @width;
             height: @width;
             border-radius: 50%;
-            margin-right: .3rem;
+            margin-right: 3rem;
           }
 
           .count {
-            font-size: 1.2rem;
+            font-size: 12rem;
             background: @second-btn-color-tran;
             display: flex;
             align-items: center;
@@ -540,11 +540,11 @@ export default {
           }
 
           .close {
-            margin-right: 1rem;
-            margin-left: .5rem;
-            padding: 0.6rem;
-            width: calc(@width - 1.2rem);
-            height: calc(@width - 1.2rem);
+            margin-right: 10rem;
+            margin-left: 5rem;
+            padding: 6rem;
+            width: calc(@width - 12rem);
+            height: calc(@width - 12rem);
           }
         }
 
@@ -553,16 +553,15 @@ export default {
           justify-content: flex-end;
 
           .wrapper {
-            border-radius: 1.3rem 0 0 1.3rem;
-            padding: .2rem 0 .2rem 1rem;
-            margin-top: 1.5rem;
+            border-radius: 13rem 0 0 13rem;
+            padding: 2rem 0 2rem 10rem;
+            margin-top: 15rem;
             background: @tag-bg;
             display: flex;
             align-items: center;
-            font-size: 1rem;
+            font-size: 10rem;
           }
         }
-
       }
     }
 
@@ -572,7 +571,7 @@ export default {
       width: 100vw;
       box-sizing: border-box;
       padding: @padding-page;
-      padding-bottom: 1rem;
+      padding-bottom: 10rem;
       display: flex;
 
 
@@ -580,7 +579,7 @@ export default {
         width: 87%;
 
         .comments {
-          margin-bottom: 1rem;
+          margin-bottom: 10rem;
           overflow: auto;
           height: 20vh;
 
@@ -592,10 +591,10 @@ export default {
           }
 
           .comment {
-            padding: .4rem .5rem;
-            border-radius: 1rem;
+            padding: 4rem 5rem;
+            border-radius: 10rem;
             background: @tag-bg;
-            margin-bottom: .5rem;
+            margin-bottom: 5rem;
 
             @text-color: rgb(164, 234, 253);
 
@@ -612,22 +611,22 @@ export default {
                 display: flex;
                 @color: rgb(130, 133, 185);
                 align-items: center;
-                font-size: 1rem;
-                border-radius: 1rem;
-                margin-right: 0.5rem;
-                padding: 0 .6rem;
+                font-size: 10rem;
+                border-radius: 10rem;
+                margin-right: 5rem;
+                padding: 0 6rem;
                 background: @color;
 
                 img {
-                  margin-right: 0.3rem;
-                  width: 1.2rem;
+                  margin-right: 3rem;
+                  width: 12rem;
                 }
               }
             }
 
             .name {
-              margin-right: 0.5rem;
-              font-size: 1.3rem;
+              margin-right: 5rem;
+              font-size: 13rem;
               color: @text-color;
             }
 
@@ -644,31 +643,31 @@ export default {
           .input {
             flex: 1;
             color: #a2a2a2;
-            font-size: 1.2rem;
-            border-radius: 1.5rem;
-            padding: .4rem 1rem;
+            font-size: 12rem;
+            border-radius: 15rem;
+            padding: 4rem 10rem;
             background: @tag-bg;
             display: flex;
             align-items: center;
             justify-content: space-between;
 
             img {
-              width: 2rem;
+              width: 20rem;
             }
           }
 
           .more {
-            margin-left: 1rem;
-            width: 2rem;
-            height: 2rem;
-            padding: .5rem;
+            margin-left: 10rem;
+            width: 20rem;
+            height: 20rem;
+            padding: 5rem;
             background: @tag-bg;
             border-radius: 50%;
           }
 
           .gift {
-            margin-left: 1rem;
-            width: 3.1rem;
+            margin-left: 10rem;
+            width: 31rem;
           }
         }
       }
@@ -679,12 +678,12 @@ export default {
         justify-content: flex-end;
         align-items: flex-end;
 
-        @width: 3.5rem;
+        @width: 35rem;
 
         .avatar-wrapper {
           background: linear-gradient(to bottom, #000000, @primary-btn-color);
-          border-radius: 2rem;
-          width: calc(@width + .2rem);
+          border-radius: 20rem;
+          width: calc(@width + 2rem);
           display: flex;
           flex-direction: column;
           align-items: center;
@@ -698,27 +697,27 @@ export default {
             width: @width;
             border-radius: 50%;
             background: white;
-            padding: .15rem;
+            padding: 1.5rem;
           }
 
           .follow {
-            width: 3.2rem;
-            margin-top: .5rem;
-            margin-bottom: .5rem;
+            width: 32rem;
+            margin-top: 5rem;
+            margin-bottom: 5rem;
           }
 
           .options {
-            margin-top: .8rem;
-            margin-bottom: .5rem;
+            margin-top: 8rem;
+            margin-bottom: 5rem;
             display: flex;
-            width: 2rem;
-            height: 2rem;
+            width: 20rem;
+            height: 20rem;
             justify-content: center;
             align-items: center;
 
             img {
               position: absolute;
-              width: 1.8rem;
+              width: 18rem;
               transition: all .8s;
             }
 
@@ -740,12 +739,9 @@ export default {
               }
             }
           }
-
         }
       }
     }
-
   }
-
 }
 </style>
diff --git a/src/pages/home/Music.vue b/src/pages/home/Music.vue
index 1a29f7f..fcafdfa 100644
--- a/src/pages/home/Music.vue
+++ b/src/pages/home/Music.vue
@@ -229,7 +229,7 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
 
   .header {
     position: fixed;
@@ -238,14 +238,14 @@ export default {
     background: @main-bg;
     width: 100%;
     box-sizing: border-box;
-    padding: 0 1.5rem;
-    height: 6rem;
+    padding: 0 15rem;
+    height: 60rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
 
     .center {
-      font-size: 1.3rem;
+      font-size: 13rem;
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
@@ -258,34 +258,34 @@ export default {
       .logo {
         background: linear-gradient(to bottom, #794CFF 5%, #4C3EFE 50%);
         //padding: .2rem 1rem;
-        width: 8rem;
-        height: 2rem;
-        border-radius: 1rem;
+        width: 80rem;
+        height: 20rem;
+        border-radius: 10rem;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 1rem;
+        font-size: 10rem;
       }
 
       img {
-        width: 2.4rem;
-        height: 2.4rem;
-        margin-left: 1.5rem;
+        width: 24rem;
+        height: 24rem;
+        margin-left: 15rem;
       }
     }
   }
 
   .content {
-    padding-top: 6rem;
+    padding-top: 60rem;
 
     .Scroll {
-      height: calc(100vh - 6rem);
+      height: calc(100vh - 60rem);
     }
 
     .desc {
-      padding: 1rem 1.5rem 3rem 1.5rem;
+      padding: 10rem 15rem 30rem 15rem;
       display: flex;
-      height: 12rem;
+      height: 120rem;
 
       .cover-wrapper {
         position: relative;
@@ -294,82 +294,81 @@ export default {
         justify-content: center;
 
         .play {
-          width: 4rem;
-          height: 4rem;
+          width: 40rem;
+          height: 40rem;
           position: absolute;
         }
 
         .cover {
-          width: 12rem;
+          width: 120rem;
           object-fit: cover;
           height: 100%;
-          border-radius: .3rem;
+          border-radius: 3rem;
         }
       }
 
       .info {
-        margin-left: 1.5rem;
+        margin-left: 15rem;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
 
 
         .name {
-          font-size: 1.8rem;
+          font-size: 18rem;
           color: #fff;
           font-weight: bold;
-          margin-bottom: 1rem;
+          margin-bottom: 10rem;
         }
 
         .user, .peoples {
-          font-size: 1.2rem;
-          margin-bottom: 0.5rem;
+          font-size: 12rem;
+          margin-bottom: 5rem;
           color: #999999;
         }
 
         .collection {
           display: flex;
           justify-content: center;
-          height: 2.5rem;
-          width: 7rem;
+          height: 25rem;
+          width: 70rem;
           align-items: center;
           color: #ffffff;
           background: @second-btn-color;
-          border-radius: 0.2rem;
-          font-size: 1.3rem;
+          border-radius: 2rem;
+          font-size: 13rem;
 
           img {
-            margin-right: .5rem;
-            width: 1.3rem;
-            height: 1.3rem;
+            margin-right: 5rem;
+            width: 13rem;
+            height: 13rem;
           }
         }
       }
     }
-
   }
 
   .options {
-    font-size: 1.4rem;
+    font-size: 14rem;
     width: 100vw;
     position: fixed;
-    bottom: 2rem;
+    bottom: 20rem;
     display: flex;
     justify-content: center;
 
     img {
-      width: 2rem;
-      height: 2rem;
-      margin-right: .5rem;
+      width: 20rem;
+      height: 20rem;
+      margin-right: 5rem;
     }
 
     .l-button {
-      margin-left: .5rem;
-      margin-right: .5rem;
-      width: 14rem;
-      border-radius: 5rem;
+      margin-left: 5rem;
+      margin-right: 5rem;
+      width: 140rem;
+      border-radius: 50rem;
       display: flex;
-      padding: 1.5rem 0;
+      padding: 15rem 0;
       align-items: center;
       justify-content: center;
     }
diff --git a/src/pages/home/MusicRankList.vue b/src/pages/home/MusicRankList.vue
index c74857d..c779d1b 100644
--- a/src/pages/home/MusicRankList.vue
+++ b/src/pages/home/MusicRankList.vue
@@ -432,12 +432,12 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
 
   .fixed-back {
     position: fixed;
-    left: 1rem;
-    top: 2rem;
+    left: 10rem;
+    top: 20rem;
     z-index: 3;
   }
 
@@ -446,7 +446,7 @@ export default {
     width: 100%;
     position: fixed;
     z-index: 2;
-    height: 6rem;
+    height: 60rem;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -464,9 +464,9 @@ export default {
     .update-time {
       position: absolute;
       background: rgba(172, 107, 251, .5);
-      bottom: 2rem;
-      border-radius: .1rem;
-      padding: .2rem 3rem;
+      bottom: 20rem;
+      border-radius: 1rem;
+      padding: 2rem 30rem;
     }
   }
 
@@ -481,7 +481,7 @@ export default {
 
     .list {
       .item {
-        padding: 2rem 1.5rem;
+        padding: 20rem 15rem;
         padding-bottom: 0;
         display: flex;
         flex-direction: column;
@@ -492,11 +492,11 @@ export default {
 
           .rank-wrapper {
             .rank {
-              width: 1.8rem;
-              height: 1.8rem;
-              line-height: 1.8rem;
+              width: 18rem;
+              height: 18rem;
+              line-height: 18rem;
               text-align: center;
-              margin-right: 1.5rem;
+              margin-right: 15rem;
             }
           }
 
@@ -510,21 +510,21 @@ export default {
               display: flex;
 
               .cover-wrapper {
-                margin-right: 1rem;
+                margin-right: 10rem;
                 position: relative;
                 display: flex;
                 align-items: center;
                 justify-content: center;
 
                 .play {
-                  width: 3rem;
-                  height: 3rem;
+                  width: 30rem;
+                  height: 30rem;
                   position: absolute;
                 }
 
                 .cover {
-                  border-radius: .2rem;
-                  @width: 6rem;
+                  border-radius: 2rem;
+                  @width: 60rem;
                   width: @width;
                   object-fit: cover;
                   height: @width;
@@ -544,7 +544,7 @@ export default {
                 }
 
                 .author, .desc-bottom {
-                  font-size: 1.2rem;
+                  font-size: 12rem;
                   color: @second-text-color;
                 }
 
@@ -552,7 +552,7 @@ export default {
                   display: flex;
 
                   .duration {
-                    margin-right: 1.4rem;
+                    margin-right: 14rem;
                     position: relative;
 
                     &:after {
@@ -572,9 +572,9 @@ export default {
 
             .option {
               img {
-                width: 2rem;
-                height: 2rem;
-                margin-left: 2rem;
+                width: 20rem;
+                height: 20rem;
+                margin-left: 20rem;
               }
             }
 
@@ -583,9 +583,9 @@ export default {
 
         .bottom {
           background: @second-btn-color-tran;
-          padding: 1rem 1.5rem;
-          margin-left: 3.3rem;
-          margin-top: 1.5rem;
+          padding: 10rem 15rem;
+          margin-left: 33rem;
+          margin-top: 15rem;
           display: flex;
           justify-content: space-between;
           align-items: center;
@@ -594,27 +594,27 @@ export default {
           .arrow {
             width: 0;
             height: 0;
-            border: .8rem solid transparent;
-            border-bottom: .8rem solid @second-btn-color-tran;
+            border: 8rem solid transparent;
+            border-bottom: 8rem solid @second-btn-color-tran;
             position: absolute;
-            left: 2rem;
-            top: -1.5rem;
+            left: 20rem;
+            top: -15rem;
           }
 
           .left {
             display: flex;
 
             .avatar {
-              width: 3.5rem;
-              height: 3.5rem;
-              margin-right: 1rem;
+              width: 35rem;
+              height: 35rem;
+              margin-right: 10rem;
               border-radius: 50%;
             }
           }
 
           .button {
-            width: 6rem;
-            height: 2.5rem;
+            width: 60rem;
+            height: 25rem;
           }
         }
       }
diff --git a/src/pages/home/Publish.vue b/src/pages/home/Publish.vue
index c817319..273b9e9 100644
--- a/src/pages/home/Publish.vue
+++ b/src/pages/home/Publish.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="Publish">
-    <video id="video" autoplay="autoplay" style="width: 100%;height:calc(100% - 6rem);"></video>
+    <video id="video" autoplay="autoplay" style="width: 100%;height:calc(100% - 60rem);"></video>
     <div class="footer">
       <SlideRowList v-model:active-index="activeIndex">
-        <SlideItem style="min-width: 20vw;min-height: 6rem;"></SlideItem>
-        <SlideItem style="min-width: 20vw;min-height: 6rem;"></SlideItem>
-        <SlideItem style="min-width: 25vw;min-height: 6rem;" @click="activeIndex = 0">
+        <SlideItem style="min-width: 20vw;min-height: 60rem;"></SlideItem>
+        <SlideItem style="min-width: 20vw;min-height: 60rem;"></SlideItem>
+        <SlideItem style="min-width: 25vw;min-height: 60rem;" @click="activeIndex = 0">
           <span :class="activeIndex + 2 === 2?'active':''">分段拍</span>
         </SlideItem>
-        <SlideItem style="min-width: 20vw;min-height: 6rem;" @click="activeIndex = 1">
+        <SlideItem style="min-width: 20vw;min-height: 60rem;" @click="activeIndex = 1">
           <span :class="activeIndex + 2 === 3?'active':''">快拍</span>
         </SlideItem>
-        <SlideItem style="min-width: 20vw;min-height: 6rem;" @click="activeIndex = 2">
+        <SlideItem style="min-width: 20vw;min-height: 60rem;" @click="activeIndex = 2">
           <span :class="activeIndex + 2 === 4?'active':''">影集</span>
         </SlideItem>
-        <SlideItem style="min-width: 20vw;min-height: 6rem;" @click="activeIndex = 3">
+        <SlideItem style="min-width: 20vw;min-height: 60rem;" @click="activeIndex = 3">
           <span :class="activeIndex + 2 === 5?'active':''">开直播</span>
         </SlideItem>
       </SlideRowList>
@@ -98,7 +98,7 @@ export default {
   background: black;
 
   .footer {
-    font-size: 1.5rem;
+    font-size: 15rem;
     font-weight: bold;
     color: @second-text-color;
 
@@ -121,51 +121,49 @@ export default {
 
     .close {
       position: absolute;
-      left: 2rem;
-      top: 2rem;
-      width: 2rem;
-      height: 2rem;
+      left: 20rem;
+      top: 20rem;
+      width: 20rem;
+      height: 20rem;
     }
 
     .choose-music {
       position: absolute;
       left: 50%;
-      top: 2rem;
+      top: 20rem;
       transform: translateX(-50%);
-      border-radius: 2rem;
+      border-radius: 20rem;
       background: #333333;
-      padding: .5rem 1.5rem;
+      padding: 5rem 15rem;
       display: flex;
       align-items: center;
 
       img {
-        margin-right: .5rem;
-        width: 1.2rem;
-        height: 1.2rem;
+        margin-right: 5rem;
+        width: 12rem;
+        height: 12rem;
       }
     }
 
     .toolbar {
       position: absolute;
-      top: 2rem;
-      right: 1rem;
+      top: 20rem;
+      right: 10rem;
 
       .tool {
         display: flex;
         flex-direction: column;
         align-items: center;
-        margin-bottom: 2rem;
-        font-size: 1rem;
+        margin-bottom: 20rem;
+        font-size: 10rem;
 
         img {
-          width: 2rem;
-          height: 2rem;
-          margin-bottom: .5rem;
+          width: 20rem;
+          height: 20rem;
+          margin-bottom: 5rem;
         }
       }
     }
   }
-
-
 }
 </style>
diff --git a/src/pages/home/Report.vue b/src/pages/home/Report.vue
index 13c0f19..c8b3848 100644
--- a/src/pages/home/Report.vue
+++ b/src/pages/home/Report.vue
@@ -134,27 +134,27 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
 
   .content {
-    padding-top: 6rem;
+    padding-top: 60rem;
 
     .title {
-      font-size: 1.2rem;
-      padding: 1rem 1.5rem;
+      font-size: 12rem;
+      padding: 10rem 15rem;
       color: @second-text-color;
 
       img {
-        width: 1rem;
-        height: 1rem;
-        margin-right: .2rem;
+        width: 10rem;
+        height: 10rem;
+        margin-right: 2rem;
       }
     }
   }
 
   .line {
-    width: calc(100% - 3rem);
-    margin-left: 1.5rem;
+    width: calc(100% - 30rem);
+    margin-left: 15rem;
     background: @line-color;
   }
 }
diff --git a/src/pages/home/SearchPage.vue b/src/pages/home/SearchPage.vue
index 41956f3..0101cf2 100644
--- a/src/pages/home/SearchPage.vue
+++ b/src/pages/home/SearchPage.vue
@@ -671,17 +671,17 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
 
   .type {
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 1.6rem;
-    width: 1.6rem;
-    font-size: 1.2rem;
-    margin-left: .5rem;
-    border-radius: .2rem;
+    height: 16rem;
+    width: 16rem;
+    font-size: 12rem;
+    margin-left: 5rem;
+    border-radius: 2rem;
 
     &.hot {
       background: @primary-btn-color;
@@ -695,8 +695,8 @@ export default {
   .header {
     z-index: 4;
     background: @main-bg;
-    height: 6rem;
-    font-size: 1.4rem;
+    height: 60rem;
+    font-size: 14rem;
     padding: 0 @padding-page;
     display: flex;
     justify-content: space-between;
@@ -713,22 +713,22 @@ export default {
 
     .scan {
       transform: scale(2);
-      height: 1rem;
-      width: 1rem;
+      height: 10rem;
+      width: 10rem;
     }
   }
 
   .content {
-    padding-top: 6rem;
+    padding-top: 60rem;
 
     .history {
       .row {
-        min-height: 4rem;
+        min-height: 40rem;
       }
 
       .history-expand {
         text-align: center;
-        padding: 1rem;
+        padding: 10rem;
         color: @second-text-color;
       }
     }
@@ -737,8 +737,8 @@ export default {
       padding: 0 @padding-page;
 
       .title {
-        font-size: 1.4rem;
-        padding: 1rem 0;
+        font-size: 14rem;
+        padding: 10rem 0;
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -749,28 +749,28 @@ export default {
           align-items: center;
 
           img {
-            margin-right: .5rem;
-            width: 1.3rem;
-            height: 1.3rem;
+            margin-right: 5rem;
+            width: 13rem;
+            height: 13rem;
           }
         }
       }
 
       .keys {
-        font-size: 1.6rem;
+        font-size: 16rem;
         display: flex;
         flex-wrap: wrap;
 
         .key {
           box-sizing: border-box;
-          padding: .8rem 0;
+          padding: 8rem 0;
           width: 49%;
           display: flex;
           align-items: center;
 
           .desc {
             max-width: 80%;
-            font-size: 1.4rem;
+            font-size: 14rem;
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
@@ -782,14 +782,14 @@ export default {
 
     .rank-list {
       .indicator {
-        padding: 1.5rem;
+        padding: 15rem;
         display: flex;
         align-items: center;
-        font-size: 1.4rem;
+        font-size: 14rem;
 
         .tab {
           color: @second-text-color;
-          margin-right: 2rem;
+          margin-right: 20rem;
 
           &.active {
             transform: scale(1.2);
@@ -809,15 +809,15 @@ export default {
 
       .slide0 {
         box-sizing: border-box;
-        margin: 0 @padding-page 5rem @padding-page;
+        margin: 0 @padding-page 50rem @padding-page;
         background: linear-gradient(to right, rgb(32, 29, 36), rgb(50, 29, 38));
         padding: @padding-page;
-        border-radius: 1rem;
+        border-radius: 10rem;
 
         .l-row {
-          font-size: 1.4rem;
+          font-size: 14rem;
           display: flex;
-          margin-bottom: 1.6rem;
+          margin-bottom: 16rem;
           align-items: center;
           color: @second-text-color;
 
@@ -826,11 +826,11 @@ export default {
             align-items: center;
 
             .rank {
-              width: 1.8rem;
-              height: 1.8rem;
-              line-height: 1.8rem;
+              width: 18rem;
+              height: 18rem;
+              line-height: 18rem;
               text-align: center;
-              margin-right: 1.5rem;
+              margin-right: 15rem;
             }
           }
 
@@ -841,18 +841,18 @@ export default {
             justify-content: space-between;
 
             .center {
-              width: calc(100vw - 14rem);
+              width: calc(100vw - 140rem);
               box-sizing: border-box;
               //padding: 0 1rem;
               //flex: 1;
               display: flex;
               align-items: center;
-              font-size: 1.4rem;
+              font-size: 14rem;
               color: white;
 
               .desc {
                 max-width: 85%;
-                font-size: 1.4rem;
+                font-size: 14rem;
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 overflow: hidden;
@@ -860,7 +860,7 @@ export default {
             }
 
             .count {
-              font-size: 1.2rem;
+              font-size: 12rem;
             }
           }
         }
@@ -868,16 +868,16 @@ export default {
 
       .slide1 {
         box-sizing: border-box;
-        margin: 0 @padding-page 5rem @padding-page;
+        margin: 0 @padding-page 50rem @padding-page;
         background: rgb(20, 22, 34);
         border: 1px solid rgba(31, 34, 52, 0.5);
         padding: @padding-page;
-        border-radius: 1rem;
+        border-radius: 10rem;
 
         .l-row {
-          font-size: 1.4rem;
+          font-size: 14rem;
           display: flex;
-          margin-bottom: 1rem;
+          margin-bottom: 10rem;
           align-items: center;
           color: @second-text-color;
 
@@ -890,11 +890,11 @@ export default {
             align-items: center;
 
             .rank {
-              width: 1.8rem;
-              height: 1.8rem;
-              line-height: 1.8rem;
+              width: 18rem;
+              height: 18rem;
+              line-height: 18rem;
               text-align: center;
-              margin-right: 1.5rem;
+              margin-right: 15rem;
 
               &.top {
                 color: yellow;
@@ -909,18 +909,18 @@ export default {
             justify-content: space-between;
 
             .center {
-              width: calc(100vw - 16rem);
+              width: calc(100vw - 160rem);
               box-sizing: border-box;
               //padding: 0 1rem;
               //flex: 1;
               display: flex;
               align-items: center;
-              font-size: 1.4rem;
+              font-size: 14rem;
               color: white;
 
               .avatar-wrapper {
-                @width: 3.5rem;
-                margin-right: 1rem;
+                @width: 35rem;
+                margin-right: 10rem;
                 display: flex;
                 align-items: center;
                 justify-content: center;
@@ -932,48 +932,48 @@ export default {
                 .avatar {
                   width: @width - 0.3;
                   border-radius: 50%;
-                  padding: .1rem;
+                  padding: 1rem;
                   background: black;
                 }
               }
 
               .desc {
                 max-width: 55%;
-                font-size: 1.4rem;
+                font-size: 14rem;
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 overflow: hidden;
               }
 
               .live-type {
-                height: 2.2rem;
-                padding: 0 .5rem;
+                height: 22rem;
+                padding: 0 5rem;
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                font-size: 1rem;
+                font-size: 10rem;
                 color: @second-text-color;
-                margin-left: .5rem;
-                border-radius: .2rem;
+                margin-left: 5rem;
+                border-radius: 2rem;
                 background: @second-btn-color-tran;
 
                 .type2 {
-                  margin-right: .2rem;
-                  width: 1rem;
-                  height: 1rem;
+                  margin-right: 2rem;
+                  width: 10rem;
+                  height: 10rem;
                 }
 
                 .type1 {
-                  margin-right: .2rem;
-                  width: 1.5rem;
-                  height: 1rem;
+                  margin-right: 2rem;
+                  width: 15rem;
+                  height: 10rem;
                 }
 
               }
             }
 
             .count {
-              font-size: 1.2rem;
+              font-size: 12rem;
             }
           }
         }
@@ -981,16 +981,16 @@ export default {
 
       .slide2 {
         box-sizing: border-box;
-        margin: 0 @padding-page 5rem @padding-page;
+        margin: 0 @padding-page 50rem @padding-page;
         background: rgb(20, 22, 34);
         border: 1px solid rgba(31, 34, 52, 0.5);
         padding: @padding-page;
-        border-radius: 1rem;
+        border-radius: 10rem;
 
         .l-row {
-          font-size: 1.4rem;
+          font-size: 14rem;
           display: flex;
-          margin-bottom: 1rem;
+          margin-bottom: 10rem;
           align-items: center;
           color: @second-text-color;
 
@@ -1003,11 +1003,11 @@ export default {
             align-items: center;
 
             .rank {
-              width: 1.8rem;
-              height: 1.8rem;
-              line-height: 1.8rem;
+              width: 18rem;
+              height: 18rem;
+              line-height: 18rem;
               text-align: center;
-              margin-right: 1.5rem;
+              margin-right: 15rem;
 
               &.top {
                 color: yellow;
@@ -1022,28 +1022,28 @@ export default {
             justify-content: space-between;
 
             .center {
-              width: calc(100vw - 15rem);
+              width: calc(100vw - 150rem);
               box-sizing: border-box;
               //padding: 0 1rem;
               //flex: 1;
               display: flex;
               align-items: center;
-              font-size: 1.4rem;
+              font-size: 14rem;
               color: white;
 
               .avatar-wrapper {
-                margin-right: 1rem;
+                margin-right: 10rem;
 
                 .avatar {
-                  width: 3rem;
-                  height: 3rem;
-                  border-radius: .2rem;
+                  width: 30rem;
+                  height: 30rem;
+                  border-radius: 2rem;
                 }
               }
 
               .desc {
                 max-width: 95%;
-                font-size: 1.4rem;
+                font-size: 14rem;
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 overflow: hidden;
@@ -1054,12 +1054,12 @@ export default {
             .count {
               display: flex;
               align-items: center;
-              font-size: 1.2rem;
+              font-size: 12rem;
 
               img {
-                margin-right: .2rem;
-                width: 1.5rem;
-                height: 1.5rem;
+                margin-right: 2rem;
+                width: 15rem;
+                height: 15rem;
               }
             }
           }
@@ -1068,22 +1068,22 @@ export default {
 
       .slide3 {
         box-sizing: border-box;
-        margin: 0 @padding-page 5rem @padding-page;
-        border-radius: 1rem;
+        margin: 0 @padding-page 50rem @padding-page;
+        border-radius: 10rem;
 
         .slide4-wrapper {
-          padding: .5rem @padding-page;
+          padding: 5rem @padding-page;
 
           .brands {
             color: @second-text-color;
-            font-size: 1.2rem;
-            margin-bottom: 1.5rem;
+            font-size: 12rem;
+            margin-bottom: 15rem;
             display: flex;
 
             .brand {
-              border-radius: .2rem;
-              margin-right: 1rem;
-              padding: .5rem 1rem;
+              border-radius: 2rem;
+              margin-right: 10rem;
+              padding: 5rem 10rem;
               background: @second-btn-color-tran;
 
               &.active {
@@ -1094,9 +1094,9 @@ export default {
           }
 
           .l-row {
-            font-size: 1.4rem;
+            font-size: 14rem;
             display: flex;
-            margin-bottom: 1rem;
+            margin-bottom: 10rem;
             align-items: center;
             color: @second-text-color;
 
@@ -1109,11 +1109,11 @@ export default {
               align-items: center;
 
               .rank {
-                width: 1.8rem;
-                height: 1.8rem;
-                line-height: 1.8rem;
+                width: 18rem;
+                height: 18rem;
+                line-height: 18rem;
                 text-align: center;
-                margin-right: 1.5rem;
+                margin-right: 15rem;
 
                 &.top {
                   color: yellow;
@@ -1128,18 +1128,18 @@ export default {
               justify-content: space-between;
 
               .center {
-                width: calc(100vw - 15rem);
+                width: calc(100vw - 150rem);
                 box-sizing: border-box;
                 //padding: 0 1rem;
                 //flex: 1;
                 display: flex;
                 align-items: center;
-                font-size: 1.4rem;
+                font-size: 14rem;
                 color: white;
 
                 .avatar-wrapper {
-                  @width: 3.5rem;
-                  margin-right: 1rem;
+                  @width: 35rem;
+                  margin-right: 10rem;
 
                   &.living {
                     position: relative;
@@ -1157,7 +1157,7 @@ export default {
                       position: absolute;
                       background: transparent;
                       border-radius: 50%;
-                      border: .2rem solid @primary-btn-color;
+                      border: 2rem solid @primary-btn-color;
                       animation: avatar-out-line 1s infinite;
 
                       @keyframes avatar-out-line {
@@ -1166,13 +1166,13 @@ export default {
                         }
                         to {
                           opacity: 0;
-                          padding: .2rem;
+                          padding: 2rem;
                         }
                       }
                     }
 
                     .avatar {
-                      padding: .1rem;
+                      padding: 1rem;
                       animation: avatar 1s infinite alternate;
                     }
                   }
@@ -1188,10 +1188,10 @@ export default {
 
                     @keyframes avatar {
                       from {
-                        padding: .1rem;
+                        padding: 1rem;
                       }
                       to {
-                        padding: .2rem;
+                        padding: 2rem;
                       }
                     }
                   }
@@ -1199,7 +1199,7 @@ export default {
 
                 .desc {
                   max-width: 95%;
-                  font-size: 1.4rem;
+                  font-size: 14rem;
                   white-space: nowrap;
                   text-overflow: ellipsis;
                   overflow: hidden;
@@ -1210,32 +1210,31 @@ export default {
               .count {
                 display: flex;
                 align-items: center;
-                font-size: 1.2rem;
+                font-size: 12rem;
 
                 img {
-                  margin-right: .2rem;
-                  width: 1.5rem;
-                  height: 1.5rem;
+                  margin-right: 2rem;
+                  width: 15rem;
+                  height: 15rem;
                 }
               }
             }
           }
         }
 
-
         .ad {
           background: @second-btn-color-tran;
           display: flex;
           align-items: center;
           justify-content: center;
-          height: 10rem;
+          height: 100rem;
         }
       }
 
       .more {
-        margin-bottom: 2rem;
-        font-size: 1.2rem;
-        padding: 1rem 1rem 0 1rem;
+        margin-bottom: 20rem;
+        font-size: 12rem;
+        padding: 10rem 10rem 0 10rem;
         text-align: center;
         color: yellow;
       }
diff --git a/src/pages/home/SubmitReport.vue b/src/pages/home/SubmitReport.vue
index c79da98..b7890c7 100644
--- a/src/pages/home/SubmitReport.vue
+++ b/src/pages/home/SubmitReport.vue
@@ -83,33 +83,33 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
 
   .content {
-    padding-top: 6rem;
+    padding-top: 60rem;
 
     .title {
-      font-size: 1.2rem;
-      padding: 1rem 1.5rem;
+      font-size: 12rem;
+      padding: 10rem 15rem;
       color: @second-text-color;
       border-bottom: 1px solid #cccccc11;
 
       img {
-        width: 1rem;
-        height: 1rem;
-        margin-right: .2rem;
+        width: 10rem;
+        height: 10rem;
+        margin-right: 2rem;
       }
     }
 
     .l-row {
-      padding: 0 1.5rem;
+      padding: 0 15rem;
 
       .textarea-ctn {
         width: 100%;
         background: @active-main-bg;
-        padding: 1.5rem;
+        padding: 15rem;
         box-sizing: border-box;
-        margin-top: 1rem;
+        margin-top: 10rem;
         border-radius: 2px;
 
 
@@ -128,19 +128,19 @@ export default {
       }
 
       .text-num {
-        margin-top: .5rem;
-        font-size: 1rem;
+        margin-top: 5rem;
+        font-size: 10rem;
         color: @second-text-color;
         text-align: right;
       }
     }
 
     .upload-photo {
-      margin-top: .5rem;
+      margin-top: 5rem;
       display: flex;
-      padding: 0 1.5rem;
+      padding: 0 15rem;
 
-      @width: calc((100vw - 3vw - 3rem) / 4);
+      @width: calc((100vw - 3vw - 30rem) / 4);
 
       .photo-wrapper {
         width: @width;
@@ -160,9 +160,9 @@ export default {
           right: 0;
           top: 0;
           background: @second-btn-color;
-          padding: .3rem;
-          width: 1rem;
-          height: 1rem;
+          padding: 3rem;
+          width: 10rem;
+          height: 10rem;
         }
       }
 
@@ -173,13 +173,13 @@ export default {
         flex-direction: column;
         justify-content: center;
         color: @second-text-color;
-        font-size: 1.2rem;
+        font-size: 12rem;
         align-items: center;
         background: @second-btn-color-tran;
 
         img {
-          width: 3.5rem;
-          height: 3.5rem;
+          width: 35rem;
+          height: 35rem;
         }
       }
     }
@@ -187,9 +187,9 @@ export default {
 
   .button {
     position: absolute;
-    left: 1.5rem;
-    right: 1.5rem;
-    bottom: 1.5rem;
+    left: 15rem;
+    right: 15rem;
+    bottom: 15rem;
   }
 }
 </style>
diff --git a/src/pages/home/components/Duoshan.vue b/src/pages/home/components/Duoshan.vue
index 9b0f75d..3e2eee2 100644
--- a/src/pages/home/components/Duoshan.vue
+++ b/src/pages/home/components/Duoshan.vue
@@ -53,8 +53,8 @@ export default {
 @import "../../../assets/less/index";
 
 .share-to-duoshan {
-  padding: 3rem 2rem;
-  min-height: calc(50vh - 6rem);
+  padding: 30rem 20rem;
+  min-height: calc(50vh - 60rem);
   //min-height: 50vh;
   box-sizing: border-box;
   display: flex;
@@ -64,8 +64,8 @@ export default {
 
 
   .logo {
-    height: 12rem;
-    width: 12rem;
+    height: 120rem;
+    width: 120rem;
   }
 
   .wrapper {
@@ -73,15 +73,15 @@ export default {
   }
 
   .title2 {
-    margin-bottom: 2rem;
+    margin-bottom: 20rem;
     text-align: center;
-    font-size: 2rem;
+    font-size: 20rem;
     color: black;
   }
 
   .subtitle {
     text-align: center;
-    font-size: 1.2rem;
+    font-size: 12rem;
     color: @second-text-color;
   }
 
@@ -90,8 +90,8 @@ export default {
     width: 100%;
 
     img {
-      height: 2.2rem;
-      margin-right: .5rem;
+      height: 22rem;
+      margin-right: 5rem;
     }
   }
 }
diff --git a/src/pages/home/components/FollowSetting.vue b/src/pages/home/components/FollowSetting.vue
index f352594..cdbf174 100644
--- a/src/pages/home/components/FollowSetting.vue
+++ b/src/pages/home/components/FollowSetting.vue
@@ -5,7 +5,7 @@
       :show-heng-gang="false"
       maskMode="dark"
       @cancel="cancel()"
-      height="33rem"
+      height="330rem"
       mode="light">
     <div class="follow-setting-dialog">
       <div class="dialog-header">
@@ -92,12 +92,12 @@ export default {
 @import "../../../assets/less/index";
 
 .follow-setting-dialog {
-  padding: 1.5rem;
-  font-size: 1.4rem;
+  padding: 15rem;
+  font-size: 14rem;
 
   .dialog-header {
     color: rgb(81, 81, 89);
-    font-size: 1.4rem;
+    font-size: 14rem;
     position: relative;
     display: flex;
     align-items: flex-start;
@@ -109,44 +109,44 @@ export default {
     }
 
     .title {
-      font-size: 1.8rem;
+      font-size: 18rem;
     }
 
     .subtitle {
-      margin-top: .5rem;
+      margin-top: 5rem;
       color: @second-text-color;
-      font-size: 1.3rem;
+      font-size: 13rem;
     }
 
     img {
-      width: 1.4rem;
-      height: 1.4rem;
-      padding: .6rem;
+      width: 14rem;
+      height: 14rem;
+      padding: 6rem;
       border-radius: 50%;
       background: rgba(187, 187, 194, 0.4);
     }
   }
 
   .options {
-    margin-top: 2rem;
+    margin-top: 20rem;
     display: flex;
     justify-content: space-between;
 
     .option {
       box-sizing: border-box;
-      padding: 1rem;
+      padding: 10rem;
       display: flex;
       background: white;
       flex-direction: column;
       align-items: center;
       width: 23%;
-      font-size: 1.2rem;
-      border-radius: .8rem;
+      font-size: 12rem;
+      border-radius: 8rem;
 
       img {
-        margin-top: .5rem;
-        margin-bottom: 1rem;
-        @width: 2rem;
+        margin-top: 5rem;
+        margin-bottom: 10rem;
+        @width: 20rem;
         width: @width;
         height: @width;
       }
@@ -154,11 +154,11 @@ export default {
   }
 
   .l-rows {
-    margin-top: 2rem;
+    margin-top: 20rem;
 
     .l-row {
-      height: 4.5rem;
-      padding: 0 2rem;
+      height: 45rem;
+      padding: 0 20rem;
       background: white;
       display: flex;
       align-items: center;
@@ -166,17 +166,17 @@ export default {
       border-bottom: 1px solid rgba(222, 222, 222, 0.42);
 
       &:nth-child(1) {
-        border-radius: 1rem 1rem 0 0;
+        border-radius: 10rem 10rem 0 0;
       }
 
       &:nth-child(3) {
         border-bottom: none;
-        border-radius: 0 0 1rem 1rem;
+        border-radius: 0 0 10rem 10rem;
       }
 
       img {
-        width: 2rem;
-        height: 2rem;
+        width: 20rem;
+        height: 20rem;
       }
     }
   }
diff --git a/src/pages/home/components/FollowSetting2.vue b/src/pages/home/components/FollowSetting2.vue
index c539f20..d13c351 100644
--- a/src/pages/home/components/FollowSetting2.vue
+++ b/src/pages/home/components/FollowSetting2.vue
@@ -5,7 +5,7 @@
       :show-heng-gang="false"
       maskMode="dark"
       @cancel="cancel()"
-      height="33rem"
+      height="330rem"
       mode="light">
     <div class="follow-setting-dialog">
       <div class="dialog-header">
@@ -75,12 +75,12 @@ export default {
 @import "../../../assets/less/index";
 
 .follow-setting-dialog {
-  padding: 1.5rem;
-  font-size: 1.4rem;
+  padding: 15rem;
+  font-size: 14rem;
 
   .dialog-header {
     color: rgb(81, 81, 89);
-    font-size: 1.4rem;
+    font-size: 14rem;
     position: relative;
     display: flex;
     align-items: flex-start;
@@ -92,44 +92,44 @@ export default {
     }
 
     .title {
-      font-size: 1.8rem;
+      font-size: 18rem;
     }
 
     .subtitle {
-      margin-top: .5rem;
+      margin-top: 5rem;
       color: @second-text-color;
-      font-size: 1.3rem;
+      font-size: 13rem;
     }
 
     img {
-      width: 1.4rem;
-      height: 1.4rem;
-      padding: .6rem;
+      width: 14rem;
+      height: 14rem;
+      padding: 6rem;
       border-radius: 50%;
       background: rgba(187, 187, 194, 0.4);
     }
   }
 
   .options {
-    margin-top: 2rem;
+    margin-top: 20rem;
     display: flex;
     justify-content: space-between;
 
     .option {
       box-sizing: border-box;
-      padding: 1rem;
+      padding: 10rem;
       display: flex;
       background: white;
       flex-direction: column;
       align-items: center;
       width: 23%;
-      font-size: 1.2rem;
-      border-radius: .8rem;
+      font-size: 12rem;
+      border-radius: 8rem;
 
       img {
-        margin-top: .5rem;
-        margin-bottom: 1rem;
-        @width: 2rem;
+        margin-top: 5rem;
+        margin-bottom: 10rem;
+        @width: 20rem;
         width: @width;
         height: @width;
       }
@@ -137,11 +137,11 @@ export default {
   }
 
   .l-rows {
-    margin-top: 2rem;
+    margin-top: 20rem;
 
     .l-row {
-      height: 4.5rem;
-      padding: 0 2rem;
+      height: 45rem;
+      padding: 0 20rem;
       background: white;
       display: flex;
       align-items: center;
@@ -149,17 +149,17 @@ export default {
       border-bottom: 1px solid rgba(222, 222, 222, 0.42);
 
       &:nth-child(1) {
-        border-radius: 1rem 1rem 0 0;
+        border-radius: 10rem 10rem 0 0;
       }
 
       &:nth-child(3) {
         border-bottom: none;
-        border-radius: 0 0 1rem 1rem;
+        border-radius: 0 0 10rem 10rem;
       }
 
       img {
-        width: 2rem;
-        height: 2rem;
+        width: 20rem;
+        height: 20rem;
       }
     }
   }
diff --git a/src/pages/home/components/PlayFeedback.vue b/src/pages/home/components/PlayFeedback.vue
index db91fa5..6f9cac1 100644
--- a/src/pages/home/components/PlayFeedback.vue
+++ b/src/pages/home/components/PlayFeedback.vue
@@ -121,12 +121,12 @@ export default {
 @import "../../../assets/less/index";
 
 .play-feedback {
-  max-height: 49rem;
+  max-height: 490rem;
   overflow: auto;
   background: #fff;
   color: black;
   position: fixed;
-  bottom: 5rem;
+  bottom: 50rem;
   left: 0;
   right: 0;
 
@@ -135,36 +135,36 @@ export default {
     left: 0;
     right: 0;
     background: white;
-    height: 3rem;
-    padding: 1.5rem;
+    height: 30rem;
+    padding: 15rem;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     font-weight: bold;
-    font-size: 1.8rem;
+    font-size: 18rem;
   }
 
   .content {
-    padding: 6rem 1.5rem 1.5rem 1.5rem;
+    padding: 60rem 15rem 15rem 15rem;
   }
 
   .notice {
-    font-size: 1.2rem;
+    font-size: 12rem;
     color: @second-text-color;
   }
 
   .l-row {
     display: flex;
     align-items: center;
-    min-height: 5rem;
-    font-size: 1.4rem;
+    min-height: 50rem;
+    font-size: 14rem;
     border-bottom: 1px solid #f1f1f1;
 
 
     .check {
-      width: 2rem;
-      height: 2rem;
-      margin-right: 1rem;
+      width: 20rem;
+      height: 20rem;
+      margin-right: 10rem;
     }
   }
 
@@ -176,9 +176,9 @@ export default {
     .textarea-ctn {
       width: 100%;
       background: #eae8e8;
-      padding: 1.5rem;
+      padding: 15rem;
       box-sizing: border-box;
-      margin-top: 1rem;
+      margin-top: 10rem;
       border-radius: 2px;
 
 
@@ -197,9 +197,9 @@ export default {
     }
 
     .text-num {
-      margin-top: .8rem;
-      margin-bottom: .8rem;
-      font-size: 1rem;
+      margin-top: 8rem;
+      margin-bottom: 8rem;
+      font-size: 10rem;
       color: @second-text-color;
       text-align: right;
     }
diff --git a/src/pages/home/components/ShareTo.vue b/src/pages/home/components/ShareTo.vue
index aa7c5ef..570470e 100644
--- a/src/pages/home/components/ShareTo.vue
+++ b/src/pages/home/components/ShareTo.vue
@@ -235,24 +235,24 @@ export default {
 
 .option-dialog {
   .buttons {
-    padding: 0 1.5rem;
+    padding: 0 15rem;
 
     img {
-      height: 2.2rem;
-      margin-right: .5rem;
+      height: 22rem;
+      margin-right: 5rem;
     }
   }
 
   .dialog-friends {
     color: black;
-    margin: 1rem 1rem 0 1rem;
-    width: calc(100% - 2rem);
+    margin: 10rem 10rem 0 10rem;
+    width: calc(100% - 20rem);
     background: white;
     border-radius: 6px 6px 0 0;
 
     > .dialog-friend {
       box-sizing: border-box;
-      padding: .8rem;
+      padding: 8rem;
       width: 100%;
       display: flex;
       align-items: center;
@@ -260,23 +260,23 @@ export default {
 
       img {
         border-radius: 50%;
-        width: 3.8rem;
-        height: 3.8rem;
+        width: 38rem;
+        height: 38rem;
       }
 
       .right {
-        margin: 0 0.5rem 0 1.5rem;
-        font-size: 1.4rem;
+        margin: 0 5rem 0 15rem;
+        font-size: 14rem;
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: space-between;
 
         .share-btn {
-          font-size: 1.3rem;
+          font-size: 13rem;
           color: white;
-          height: 2.5rem;
-          width: 6rem;
+          height: 25rem;
+          width: 60rem;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -293,19 +293,19 @@ export default {
 
     .more {
       box-sizing: border-box;
-      height: 5.5rem;
+      height: 55rem;
       width: 100%;
       display: flex;
       align-items: center;
       border-bottom: 1px solid #efefef;
-      font-size: 1.4rem;
-      margin-bottom: 1.5rem;
+      font-size: 14rem;
+      margin-bottom: 15rem;
 
       img {
         border-radius: 50%;
-        width: 2rem;
-        height: 2rem;
-        margin: 0 2.2rem 0 1.5rem;
+        width: 20rem;
+        height: 20rem;
+        margin: 0 22rem 0 15rem;
       }
     }
   }
diff --git a/src/pages/home/components/ShareToFriend.vue b/src/pages/home/components/ShareToFriend.vue
index b70ef29..3b4e5c4 100644
--- a/src/pages/home/components/ShareToFriend.vue
+++ b/src/pages/home/components/ShareToFriend.vue
@@ -171,48 +171,48 @@ export default {
 @import "../../../assets/less/index";
 
 .button {
-  width: 6.4rem;
-  height: 2.6rem !important;
+  width: 64rem;
+  height: 26rem !important;
 }
 
-@avatar-width: 3.8rem;
+@avatar-width: 38rem;
 
 .friend-list {
-  padding: 0 1.5rem;
+  padding: 0 15rem;
 
   .index {
     color: @second-text-color;
-    height: 6rem;
-    line-height: 6rem;
-    font-size: 1.3rem;
+    height: 60rem;
+    line-height: 60rem;
+    font-size: 13rem;
   }
 
   .friend-item {
-    margin-bottom: 2rem;
+    margin-bottom: 20rem;
     display: flex;
     align-items: center;
     //background: #fff;
 
     &:nth-child(1) {
-      margin-top: 1rem;
+      margin-top: 10rem;
     }
 
     .left {
       width: @avatar-width;
       height: @avatar-width;
       border-radius: 50%;
-      margin-right: 1.5rem;
+      margin-right: 15rem;
     }
 
     .right {
-      font-size: 1.4rem;
+      font-size: 14rem;
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: space-between;
 
       img {
-        height: 2rem;
+        height: 20rem;
       }
     }
   }
@@ -222,28 +222,28 @@ export default {
   color: white;
 
   .create-chat {
-    padding-bottom: 4rem;
+    padding-bottom: 40rem;
     background: @main-bg;
 
     .search-ctn {
-      padding: 0 1.5rem;
+      padding: 0 15rem;
     }
 
     .joined-chat-group-nav {
       border-bottom: 1px solid @line-color;
-      height: 5rem;
-      padding: 0 1.5rem;
+      height: 50rem;
+      padding: 0 15rem;
       display: flex;
       align-items: center;
 
       .left {
-        width: 2.2rem;
-        height: 2.2rem;
-        margin-right: 1rem;
+        width: 22rem;
+        height: 22rem;
+        margin-right: 10rem;
       }
 
       .right {
-        font-size: 1.4rem;
+        font-size: 14rem;
         flex: 1;
         display: flex;
         align-items: center;
@@ -263,15 +263,15 @@ export default {
       justify-content: center;
 
       .btn {
-        margin-bottom: 2rem;
-        width: calc(100% - 4rem);
-        height: 4rem;
+        margin-bottom: 20rem;
+        width: calc(100% - 40rem);
+        height: 40rem;
         display: flex;
         align-items: center;
-        font-size: 1.4rem;
+        font-size: 14rem;
         justify-content: center;
         background: #3f445c;
-        border-radius: .2rem;
+        border-radius: 2rem;
 
         &.primary {
           background: @primary-btn-color;
@@ -287,12 +287,12 @@ export default {
       flex-direction: column;
 
       .notice-h1 {
-        font-size: 1.6rem;
+        font-size: 16rem;
       }
 
       .notice-h2 {
-        margin-top: 1rem;
-        font-size: 1.4rem;
+        margin-top: 10rem;
+        font-size: 14rem;
         color: @second-text-color;
       }
 
@@ -303,17 +303,17 @@ export default {
     background: @main-bg;
 
     .nav {
-      font-size: 1.6rem;
-      padding: 1.5rem;
+      font-size: 16rem;
+      padding: 15rem;
       display: flex;
       justify-content: space-between;
     }
 
     .chat-list {
-      padding: 0 1.5rem;
+      padding: 0 15rem;
 
       .chat-item {
-        margin-bottom: 2rem;
+        margin-bottom: 20rem;
         display: flex;
         align-items: center;
         position: relative;
@@ -324,18 +324,18 @@ export default {
         }
 
         &:nth-child(1) {
-          margin-top: 1rem;
+          margin-top: 10rem;
         }
 
         .left {
           width: @avatar-width;
           height: @avatar-width;
           border-radius: 50%;
-          margin-right: 1.5rem;
+          margin-right: 15rem;
         }
 
         .right {
-          font-size: 1.4rem;
+          font-size: 14rem;
           flex: 1;
           display: flex;
           align-items: center;
@@ -355,13 +355,13 @@ export default {
             }
 
             .num {
-              margin-left: .5rem;
+              margin-left: 5rem;
               color: @second-text-color;
             }
           }
 
           img {
-            height: 1.5rem;
+            height: 15rem;
           }
         }
       }
diff --git a/src/pages/home/components/VideoShare.vue b/src/pages/home/components/VideoShare.vue
index fea0bf2..b2b1888 100644
--- a/src/pages/home/components/VideoShare.vue
+++ b/src/pages/home/components/VideoShare.vue
@@ -259,19 +259,19 @@ export default {
 .video-share {
   height: 60vh;
   width: 100%;
-  border-radius: 1rem 1rem 0 0;
+  border-radius: 10rem 10rem 0 0;
   color: white;
   box-sizing: border-box;
 
   .friends {
-    border-radius: 1rem;
-    margin: 1rem;
+    border-radius: 10rem;
+    margin: 10rem;
     padding: 0 @padding-page;
-    @avatar-width: 3.8rem;
-    font-size: 1.4rem;
+    @avatar-width: 38rem;
+    font-size: 14rem;
     background: white;
 
-    @item-width: 5.5rem;
+    @item-width: 55rem;
 
     .item {
       height: @item-width;
@@ -284,18 +284,18 @@ export default {
         width: @avatar-width;
         height: @avatar-width;
         border-radius: 50%;
-        margin-right: 1.5rem;
+        margin-right: 15rem;
       }
 
       .right {
-        font-size: 1.4rem;
+        font-size: 14rem;
         flex: 1;
         display: flex;
         align-items: center;
         justify-content: space-between;
 
         img {
-          height: 2rem;
+          height: 20rem;
         }
       }
     }
@@ -309,19 +309,19 @@ export default {
       border-bottom: 1px solid #f3f3f3;
 
       .left {
-        width: 2rem;
-        height: 2rem;
+        width: 20rem;
+        height: 20rem;
         border-radius: 50%;
-        margin-left: 1rem;
-        margin-right: 2rem;
+        margin-left: 10rem;
+        margin-right: 20rem;
       }
     }
   }
 
-  @icon-width: 5.8rem;
+  @icon-width: 58rem;
 
   :deep(.shares) {
-    @space-width: 1.5rem;
+    @space-width: 15rem;
 
     overflow-x: scroll;
     display: flex;
@@ -336,8 +336,8 @@ export default {
         background: white;
         width: @icon-width;
         height: @icon-width;
-        padding: 1.2rem;
-        border-radius: 1.5rem;
+        padding: 12rem;
+        border-radius: 15rem;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -349,9 +349,9 @@ export default {
       }
 
       span {
-        margin-top: .7rem;
+        margin-top: 7rem;
         color: black;
-        font-size: 1rem;
+        font-size: 10rem;
         display: block;
         text-align: center;
       }
@@ -383,10 +383,7 @@ export default {
       border: @border-width solid #514F56;
       border-radius: 50%;
     }
-
   }
-
-
 }
 
 </style>
diff --git a/src/pages/message/Message.vue b/src/pages/message/Message.vue
index 1438ce3..f1b61e8 100644
--- a/src/pages/message/Message.vue
+++ b/src/pages/message/Message.vue
@@ -296,7 +296,7 @@
                 <img class="left" :src="$imgPreview(item.avatar)" alt="">
                 <div class="right">
                   <span>{{ item.name }}</span>
-                  <Check mode="red" style="height: 2rem;width: 2rem;" v-model="item.select"/>
+                  <Check mode="red" style="height: 20rem;width: 20rem;" v-model="item.select"/>
                 </div>
               </div>
             </div>
@@ -507,7 +507,7 @@ export default {
   bottom: 0;
   left: 0;
   right: 0;
-  font-size: 1.4rem;
+  font-size: 14rem;
   background: @main-bg;
   color: white;
 
@@ -516,70 +516,70 @@ export default {
 
     .create-chat-wrapper {
       min-height: 70vh;
-      padding-bottom: 6rem;
+      padding-bottom: 60rem;
 
       .joined-chat {
         border-bottom: 1px solid @line-color;
-        height: 5rem;
-        padding: 0 2rem;
+        height: 50rem;
+        padding: 0 20rem;
         display: flex;
         align-items: center;
 
         .left {
-          width: 2.2rem;
-          height: 2.2rem;
-          margin-left: 1rem;
-          margin-right: 2rem;
+          width: 22rem;
+          height: 22rem;
+          margin-left: 10rem;
+          margin-right: 20rem;
         }
 
         .right {
-          font-size: 1.4rem;
+          font-size: 14rem;
           flex: 1;
           display: flex;
           align-items: center;
           justify-content: space-between;
 
           img {
-            height: 1.5rem;
+            height: 15rem;
           }
         }
       }
 
       .friend-list {
-        padding: 0 2rem;
+        padding: 0 20rem;
 
         .index {
-          height: 6rem;
-          line-height: 6rem;
-          font-size: 1.4rem;
+          height: 60rem;
+          line-height: 60rem;
+          font-size: 14rem;
         }
 
         .friend-item {
-          margin-bottom: 2rem;
+          margin-bottom: 20rem;
           display: flex;
           align-items: center;
           //background: #fff;
 
           &:nth-child(1) {
-            margin-top: 1rem;
+            margin-top: 10rem;
           }
 
           .left {
-            width: 4.8rem;
-            height: 4.8rem;
+            width: 48rem;
+            height: 48rem;
             border-radius: 50%;
-            margin-right: 1rem;
+            margin-right: 10rem;
           }
 
           .right {
-            font-size: 1.4rem;
+            font-size: 14rem;
             flex: 1;
             display: flex;
             align-items: center;
             justify-content: space-between;
 
             img {
-              height: 2rem;
+              height: 20rem;
             }
           }
         }
@@ -597,15 +597,15 @@ export default {
         justify-content: center;
 
         .btn {
-          margin-bottom: 2rem;
-          width: calc(100% - 4rem);
-          height: 4rem;
+          margin-bottom: 20rem;
+          width: calc(100% - 40rem);
+          height: 40rem;
           display: flex;
           align-items: center;
-          font-size: 1.4rem;
+          font-size: 14rem;
           justify-content: center;
           background: #3f445c;
-          border-radius: .2rem;
+          border-radius: 2rem;
 
           &.primary {
             background: @primary-btn-color;
@@ -614,26 +614,26 @@ export default {
       }
 
       .search-result {
-        padding: 0 2rem;
+        padding: 0 20rem;
 
         .search-result-item {
-          margin-bottom: 2rem;
+          margin-bottom: 20rem;
           display: flex;
           align-items: center;
 
           &:nth-child(1) {
-            margin-top: 1rem;
+            margin-top: 10rem;
           }
 
           .left {
-            width: 4.8rem;
-            height: 4.8rem;
+            width: 48rem;
+            height: 48rem;
             border-radius: 50%;
-            margin-right: 1rem;
+            margin-right: 10rem;
           }
 
           .right {
-            font-size: 1.4rem;
+            font-size: 14rem;
             flex: 1;
             display: flex;
             align-items: center;
@@ -644,17 +644,17 @@ export default {
               flex-direction: column;
 
               .name {
-                font-size: 1.4rem;
+                font-size: 14rem;
               }
 
               .account {
-                font-size: 1.3rem;
+                font-size: 13rem;
                 color: @second-text-color;
               }
             }
 
             img {
-              height: 2rem;
+              height: 20rem;
             }
           }
         }
@@ -668,12 +668,12 @@ export default {
         flex-direction: column;
 
         .notice-h1 {
-          font-size: 1.6rem;
+          font-size: 16rem;
         }
 
         .notice-h2 {
-          margin-top: 1rem;
-          font-size: 1.4rem;
+          margin-top: 10rem;
+          font-size: 14rem;
           color: @second-text-color;
         }
 
@@ -684,21 +684,21 @@ export default {
       min-height: 70vh;
 
       .nav {
-        font-size: 1.7rem;
-        padding: 2rem;
+        font-size: 17rem;
+        padding: 20rem;
         display: flex;
         justify-content: space-between;
 
         img {
-          height: 2rem;
+          height: 20rem;
         }
       }
 
       .chat-list {
-        padding: 0 2rem;
+        padding: 0 20rem;
 
         .chat-item {
-          margin-bottom: 2rem;
+          margin-bottom: 20rem;
           display: flex;
           align-items: center;
           position: relative;
@@ -709,18 +709,18 @@ export default {
           }
 
           &:nth-child(1) {
-            margin-top: 1rem;
+            margin-top: 10rem;
           }
 
           .left {
-            width: 4.8rem;
-            height: 4.8rem;
+            width: 48rem;
+            height: 48rem;
             border-radius: 50%;
-            margin-right: 1rem;
+            margin-right: 10rem;
           }
 
           .right {
-            font-size: 1.4rem;
+            font-size: 14rem;
             flex: 1;
             display: flex;
             align-items: center;
@@ -735,13 +735,13 @@ export default {
               }
 
               .num {
-                margin-left: .5rem;
+                margin-left: 5rem;
                 color: @second-text-color;
               }
             }
 
             img {
-              height: 1.5rem;
+              height: 15rem;
             }
           }
         }
@@ -763,28 +763,28 @@ export default {
     .friends {
       overflow-x: scroll;
       display: flex;
-      font-size: 1.4rem;
+      font-size: 14rem;
 
       .friend {
         &:nth-last-child(1) {
           img {
-            margin: 0 1rem;
-            padding: 1.7rem;
+            margin: 0 10rem;
+            padding: 17rem;
             background: @second-btn-color-tran;
-            width: 3rem;
-            height: 3rem;
+            width: 30rem;
+            height: 30rem;
             border-radius: 50%;
-            margin-bottom: .6rem;
+            margin-bottom: 6rem;
 
           }
         }
 
         .avatar {
           position: relative;
-          margin-bottom: .6rem;
+          margin-bottom: 6rem;
 
           img {
-            @width: 6.4rem;
+            @width: 64rem;
             width: @width;
             height: @width;
             border-radius: 50%;
@@ -792,9 +792,9 @@ export default {
 
           &.on-line::before {
             content: ' ';
-            border: .4rem solid black;
-            width: 1.8rem;
-            height: 1.8rem;
+            border: 4rem solid black;
+            width: 18rem;
+            height: 18rem;
             background: rgb(115, 254, 73);
             border-radius: 50%;
             position: absolute;
@@ -806,8 +806,8 @@ export default {
 
 
         span {
-          width: 6.4rem;
-          font-size: 1.2rem;
+          width: 64rem;
+          font-size: 12rem;
           color: lightgray;
           display: block;
           text-align: center;
@@ -837,9 +837,9 @@ export default {
           position: relative;
 
           .head-image {
-            margin-left: 2rem;
-            margin-right: 1.5rem;
-            @width: 4.5rem;
+            margin-left: 20rem;
+            margin-right: 15rem;
+            @width: 45rem;
             width: @width;
             height: @width;
             border-radius: 50%;
@@ -847,14 +847,14 @@ export default {
 
           &.on-line::before {
             content: ' ';
-            border: .3rem solid black;
-            width: 1.2rem;
-            height: 1.2rem;
+            border: 3rem solid black;
+            width: 12rem;
+            height: 12rem;
             background: rgb(115, 254, 73);
             border-radius: 50%;
             position: absolute;
             bottom: 0;
-            right: 1.5rem;
+            right: 15rem;
           }
         }
 
@@ -863,38 +863,38 @@ export default {
           flex: 1;
           display: flex;
           justify-content: space-between;
-          @padding: 1.4rem;
+          @padding: 14rem;
           padding: @padding 0 @padding 0;
           border-bottom: 1px solid @line-color2;
 
           .left {
             .name {
-              font-size: 1.4rem;
+              font-size: 14rem;
               color: white;
               display: flex;
               align-items: flex-start;
 
               .tag {
-                margin-left: .5rem;
-                font-size: 1rem;
+                margin-left: 5rem;
+                font-size: 10rem;
                 background: @second-btn-color-tran;
                 color: @second-text-color;
-                padding: .2rem .5rem;
-                border-radius: .2rem;
+                padding: 2rem 5rem;
+                border-radius: 2rem;
               }
             }
 
             .detail {
               color: @second-text-color;
-              font-size: 1.2rem;
-              margin-top: .4rem;
+              font-size: 12rem;
+              margin-top: 4rem;
               display: flex;
               align-items: center;
 
               .point {
                 display: inline-block;
-                margin-left: .8rem;
-                margin-right: .8rem;
+                margin-left: 8rem;
+                margin-right: 8rem;
                 border-radius: 50%;
                 width: 1.5px;
                 height: 1.5px;
@@ -902,38 +902,34 @@ export default {
               }
 
               .sent {
-                width: 1rem;
-                height: 1rem;
+                width: 10rem;
+                height: 10rem;
               }
             }
           }
 
           .right {
-            margin-right: 3rem;
+            margin-right: 30rem;
             display: flex;
             align-items: center;
 
             .arrow {
-              width: 1.5rem;
-              height: 1.5rem;
+              width: 15rem;
+              height: 15rem;
             }
 
             .camera {
-              width: 2rem;
-              height: 2rem;
+              width: 20rem;
+              height: 20rem;
             }
-
-
-
           }
         }
-
       }
 
       .not-more {
         color: @second-text-color;
         text-align: center;
-        padding: 2rem;
+        padding: 20rem;
       }
     }
 
@@ -954,7 +950,7 @@ export default {
         background: white;
         width: 85vw;
         height: 80vh;
-        border-radius: 1.2rem;
+        border-radius: 12rem;
         overflow: hidden;
 
         .dialog-header {
@@ -970,13 +966,13 @@ export default {
             align-items: center;
 
             & > img {
-              margin-left: .3rem;
-              width: 1.5rem;
+              margin-left: 3rem;
+              width: 15rem;
             }
           }
 
           & > img {
-            width: 2rem;
+            width: 20rem;
           }
 
         }
@@ -984,11 +980,11 @@ export default {
         .dialog-body {
           padding: @padding-page;
           padding-top: 0;
-          height: calc(80vh - 5rem);
+          height: calc(80vh - 50rem);
           overflow: auto;
 
           .scroll {
-            height: calc(80vh - 5rem);
+            height: calc(80vh - 50rem);
           }
 
           .l-button {
@@ -1013,7 +1009,7 @@ export default {
     .sub-title {
       margin-top: @padding-page;
       color: @second-text-color;
-      font-size: 1.2rem;
+      font-size: 12rem;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -1034,11 +1030,11 @@ export default {
 
       .icon {
         border-radius: 50%;
-        padding: 1.3rem;
+        padding: 13rem;
         background: @second-btn-color-tran;
-        width: 2.2rem;
-        height: 2.2rem;
-        margin-right: 1rem;
+        width: 22rem;
+        height: 22rem;
+        margin-right: 10rem;
       }
 
       .right {
@@ -1053,7 +1049,7 @@ export default {
           justify-content: space-between;
 
           .second-text-color {
-            margin-top: .5rem;
+            margin-top: 5rem;
           }
         }
       }
diff --git a/src/pages/message/chat/Chat.vue b/src/pages/message/chat/Chat.vue
index acc1a83..a9bea50 100644
--- a/src/pages/message/chat/Chat.vue
+++ b/src/pages/message/chat/Chat.vue
@@ -550,7 +550,7 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
 
   .chat-content {
     > .header {
@@ -559,15 +559,15 @@ export default {
       width: 100%;
       box-sizing: border-box;
       height: @header-height;
-      padding: 0 1rem;
+      padding: 0 10rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
       border-bottom: 1px solid @line-color;
 
       img {
-        height: 2rem;
-        margin: 0 1rem;
+        height: 20rem;
+        margin: 0 10rem;
       }
 
       .left {
@@ -577,8 +577,8 @@ export default {
         align-items: center;
 
         .badge {
-          margin-right: 1rem;
-          font-size: 1.2rem;
+          margin-right: 10rem;
+          font-size: 12rem;
           display: block;
           padding: 1px 6px;
           border-radius: 10px;
@@ -593,11 +593,11 @@ export default {
     }
 
     .message-wrapper {
-      height: calc(100vh - 12.5rem);
+      height: calc(100vh - 125rem);
       overflow: auto;
 
       &.expand {
-        height: calc(100vh - (12.5rem + 30vh));
+        height: calc(100vh - (125rem + 30vh));
       }
     }
 
@@ -606,7 +606,7 @@ export default {
       @typing-bg-color: whitesmoke;
       background: @main-bg;
       @normal-bg-color: rgb(35, 38, 47);
-      padding: 1rem 0;
+      padding: 10rem 0;
       border-top: 1px solid @second-btn-color-tran;
 
       &.typing {
@@ -623,18 +623,18 @@ export default {
 
       .toolbar {
         box-sizing: border-box;
-        height: 4.4rem;
-        margin: 0 1rem;
-        padding: .5rem;
+        height: 44rem;
+        margin: 0 10rem;
+        padding: 5rem;
         background: @normal-bg-color;
-        border-radius: 2rem;
+        border-radius: 20rem;
         display: flex;
         align-items: center;
 
         img {
-          width: 2.4rem;
+          width: 24rem;
           border-radius: 50%;
-          margin-left: 1.5rem;
+          margin-left: 15rem;
         }
 
         input {
@@ -646,9 +646,9 @@ export default {
 
         .camera {
           margin-left: 0;
-          margin-right: .5rem;
-          width: 1.4rem;
-          padding: .5rem;
+          margin-right: 5rem;
+          width: 14rem;
+          padding: 5rem;
           border-radius: 50%;
           background: @chat-bg-color;
         }
@@ -657,35 +657,35 @@ export default {
 
       .record {
         box-sizing: border-box;
-        height: 4.4rem;
-        margin: 0 1rem;
-        padding: 1rem .5rem;
+        height: 44rem;
+        margin: 0 10rem;
+        padding: 10rem 5rem;
         background: @normal-bg-color;
-        border-radius: 2rem;
+        border-radius: 20rem;
         display: flex;
         align-items: center;
         justify-content: center;
         position: relative;
 
         img {
-          right: .5rem;
+          right: 5rem;
           position: absolute;
-          width: 2.4rem;
+          width: 24rem;
           border-radius: 50%;
-          margin-left: 1.5rem;
+          margin-left: 15rem;
         }
       }
 
       .options {
-        font-size: 1.4rem;
+        font-size: 14rem;
         width: 100vw;
-        padding: 1.5rem;
+        padding: 15rem;
         height: 30vh;
         box-sizing: border-box;
 
         .option-wrapper {
           box-sizing: border-box;
-          @grid-width: calc((100vw - 3rem) / 4);
+          @grid-width: calc((100vw - 30rem) / 4);
           color: black;
           display: grid;
           grid-template-columns:@grid-width @grid-width @grid-width @grid-width;
@@ -695,14 +695,14 @@ export default {
             justify-content: center;
             align-items: center;
             flex-direction: column;
-            margin-bottom: 1rem;
+            margin-bottom: 10rem;
 
             img {
-              border-radius: .4rem;
+              border-radius: 4rem;
               background: whitesmoke;
-              padding: 1rem;
-              width: 3rem;
-              margin-bottom: 1rem;
+              padding: 10rem;
+              width: 30rem;
+              margin-bottom: 10rem;
             }
           }
         }
@@ -727,7 +727,7 @@ export default {
       justify-content: space-between;
 
       img {
-        width: 2.2rem;
+        width: 22rem;
       }
     }
 
@@ -738,23 +738,23 @@ export default {
     left: 50%;
     margin-left: -33%;
     position: fixed;
-    font-size: 1.2rem;
-    border-radius: .6rem;
+    font-size: 12rem;
+    border-radius: 6rem;
     //padding: 1rem;
     background: rgb(55, 58, 67);
     display: flex;
 
     .options {
-      width: 4.5rem;
-      height: 6rem;
+      width: 45rem;
+      height: 60rem;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
 
       img {
-        margin-bottom: .4rem;
-        width: 1.8rem;
+        margin-bottom: 4rem;
+        width: 18rem;
       }
     }
 
@@ -766,15 +766,15 @@ export default {
       transform: translateX(-50%);
 
       &.bottom {
-        top: -1.4rem;
-        border: .7rem solid transparent;
-        border-bottom: .7rem solid @second-btn-color;
+        top: -14rem;
+        border: 7rem solid transparent;
+        border-bottom: 7rem solid @second-btn-color;
       }
 
       &.top {
-        bottom: -1.4rem;
-        border: .7rem solid transparent;
-        border-top: .7rem solid @second-btn-color;
+        bottom: -14rem;
+        border: 7rem solid transparent;
+        border-top: 7rem solid @second-btn-color;
       }
     }
   }
@@ -809,7 +809,7 @@ export default {
         width: 100%;
         height: 100%;
         box-sizing: border-box;
-        padding: 2rem;
+        padding: 20rem;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -825,41 +825,41 @@ export default {
         }
 
         .avatar {
-          margin-top: 6rem;
-          width: 5.5rem;
+          margin-top: 60rem;
+          width: 55rem;
           border-radius: 50%;
-          margin-bottom: 2rem;
+          margin-bottom: 20rem;
         }
 
         .money {
           color: rgb(193, 135, 79);
-          font-size: 4rem;
+          font-size: 40rem;
           font-weight: bold;
-          margin-top: 1.5rem;
-          margin-bottom: 6.5rem;
+          margin-top: 15rem;
+          margin-bottom: 65rem;
         }
 
 
         .belong {
-          font-size: 1.2rem;
-          margin-bottom: 3rem;
+          font-size: 12rem;
+          margin-bottom: 30rem;
         }
 
         .password {
-          font-size: 1.6rem;
+          font-size: 16rem;
         }
 
 
         .notice {
-          margin-top: 15rem;
-          font-size: 1.2rem;
+          margin-top: 150rem;
+          font-size: 12rem;
         }
 
         .l-button {
-          font-size: 1.6rem;
-          border-radius: .5rem;
-          margin-bottom: 3rem;
-          padding: 1.2rem 0;
+          font-size: 16rem;
+          border-radius: .50rem;
+          margin-bottom: 30rem;
+          padding: 12rem 0;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -872,8 +872,8 @@ export default {
             background: rgb(228, 77, 58);
 
             img {
-              width: 1.8rem;
-              margin-right: 1rem;
+              width: 18rem;
+              margin-right: 10rem;
               animation: animal .8s infinite linear;
 
               @keyframes animal {
@@ -887,13 +887,12 @@ export default {
             }
           }
         }
-
       }
 
       .close {
         bottom: -8vh;
         position: absolute;
-        width: 3rem;
+        width: 30rem;
       }
     }
 
diff --git a/src/pages/message/chat/ChatDetail.vue b/src/pages/message/chat/ChatDetail.vue
index c4de8b1..0f0b53a 100644
--- a/src/pages/message/chat/ChatDetail.vue
+++ b/src/pages/message/chat/ChatDetail.vue
@@ -138,13 +138,13 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
 
   .content {
-    padding-top: 6rem;
+    padding-top: 60rem;
 
     .peoples {
-      padding: 0 2rem;
+      padding: 0 20rem;
 
       .People {
         border-bottom: 1px solid @second-btn-color-tran;
@@ -153,16 +153,16 @@ export default {
       .add-people {
         transition: all 0.3s ease;
         width: 100%;
-        height: 7rem;
+        height: 70rem;
         display: flex;
         align-items: center;
         position: relative;
         border-bottom: 1px solid @second-btn-color-tran;
 
         .head-image {
-          margin-right: 1.5rem;
-          width: 4.5rem;
-          height: 4.5rem;
+          margin-right: 15rem;
+          width: 45rem;
+          height: 45rem;
           border-radius: 50%;
         }
       }
@@ -171,22 +171,20 @@ export default {
 
     .setting {
       .row {
-        padding-left: 2rem;
-        padding-right: 2rem;
+        padding-left: 20rem;
+        padding-right: 20rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
-        height: 4rem;
+        height: 40rem;
 
         .right {
           img {
-            height: 2rem;
+            height: 20rem;
           }
         }
       }
     }
   }
-
-
 }
 </style>
diff --git a/src/pages/people/components/People.vue b/src/pages/people/components/People.vue
index b0af304..7162355 100644
--- a/src/pages/people/components/People.vue
+++ b/src/pages/people/components/People.vue
@@ -200,7 +200,7 @@ export default {
 .People {
   transition: all 0.3s ease;
   width: 100%;
-  height: 7rem;
+  height: 70rem;
   display: flex;
   align-items: center;
   position: relative;
@@ -210,18 +210,18 @@ export default {
   }
 
   .head-image {
-    margin-right: 1.5rem;
-    width: 4.5rem;
-    height: 4.5rem;
+    margin-right: 15rem;
+    width: 45rem;
+    height: 45rem;
     border-radius: 50%;
   }
 
   .add {
     background: @second-btn-color-tran;
-    margin-right: 1.5rem;
-    padding: 1.5rem;
-    width: 1.8rem;
-    height: 1.8rem;
+    margin-right: 15rem;
+    padding: 15rem;
+    width: 18rem;
+    height: 18rem;
     border-radius: 50%;
   }
 
@@ -233,14 +233,14 @@ export default {
 
     .left {
       .name {
-        font-size: 1.4rem;
-        margin-bottom: .2rem;
+        font-size: 14rem;
+        margin-bottom: 2rem;
         color: white;
       }
 
       .detail {
         color: @second-text-color;
-        font-size: 1.2rem;
+        font-size: 12rem;
         margin-top: 4px;
       }
     }
@@ -250,18 +250,18 @@ export default {
       align-items: center;
 
       .l-button {
-        margin-left: .8rem;
-        border-radius: .2rem;
+        margin-left: 8rem;
+        border-radius: 2rem;
         background: rgb(58, 58, 67);
-        font-size: 1.2rem;
-        padding: .5rem 0;
+        font-size: 12rem;
+        padding: 5rem 0;
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 5.8rem;
+        width: 58rem;
 
         &:only-child {
-          width: 7rem;
+          width: 70rem;
         }
 
         &.red {
@@ -271,8 +271,8 @@ export default {
       }
 
       img {
-        height: 1.8rem;
-        margin-left: 2rem;
+        height: 18rem;
+        margin-left: 20rem;
       }
     }
   }
@@ -281,15 +281,15 @@ export default {
     z-index: 9;
     position: absolute;
     bottom: -100%;
-    right: 1rem;
-    border-radius: .8rem;
+    right: 10rem;
+    border-radius: 8rem;
     background: @second-btn-color;
 
     .item {
-      font-size: 1.4rem;
-      padding: 0 4rem 0 1rem;
+      font-size: 14rem;
+      padding: 0 40rem 0 10rem;
       display: flex;
-      height: 4rem;
+      height: 40rem;
       align-items: center;
       border-bottom: 1px solid @line-color;
 
@@ -299,19 +299,19 @@ export default {
       }
 
       img {
-        margin-right: 1rem;
-        height: 2rem;
+        margin-right: 10rem;
+        height: 20rem;
       }
     }
 
     .arrow {
       width: 0;
       height: 0;
-      border: .7rem solid transparent;
-      border-bottom: .7rem solid @second-btn-color;
+      border: 7rem solid transparent;
+      border-bottom: 7rem solid @second-btn-color;
       position: absolute;
-      right: 1rem;
-      top: -1.4rem;
+      right: 10rem;
+      top: -14rem;
     }
   }
 }