优化

src/assets/less/custom.less

@@ -74,66 +74,6 @@
   }
 }
 
-.button {
-  color: white;
-  height: 4rem;
-  line-height: 4rem;
-  text-align: center;
-  border-radius: .3rem;
-  //width: 100%;
-  font-size: 1.4rem;
-
-  &.primary {
-    background: @primary-btn-color;
-
-    &:active {
-      background: @disable-primary-btn-color;
-    }
-  }
-
-  &.no-active {
-    &:active {
-      &.primary {
-        background: @primary-btn-color;
-      }
-
-      &.dark {
-        background: @second-btn-color;
-      }
-
-      &.white {
-        background: white;
-      }
-    }
-  }
-
-  &.disabled {
-    &.primary {
-      background: gainsboro;
-      color: white;
-    }
-
-    &:active {
-      &.primary {
-        background: gainsboro;
-      }
-    }
-  }
-
-  &.dark {
-    background: @second-btn-color;
-
-    &:active {
-      background: @second-btn-color-tran;
-    }
-  }
-
-  &.white {
-    background: white;
-    color: black;
-    border: 1px solid gainsboro;
-  }
-}
 
 .not-read {
   @width: .7rem;

src/pages/me/Me.less

@@ -7,7 +7,7 @@
 
 .fade1-enter-from,
 .fade1-leave-to {
-  transform: translateY(10px);
+  transform: translateY(10rem);
   opacity: 0;
 }
 
@@ -15,7 +15,7 @@
   background: @main-bg;
   height: 100%;
   width: 100%;
-  font-size: 1.4rem;
+  font-size: 14rem;
 
   .preview-img {
     position: fixed;
@@ -35,11 +35,11 @@
 
     .download {
       position: absolute;
-      bottom: 2rem;
-      right: 2rem;
-      padding: .3rem;
+      bottom: 20rem;
+      right: 20rem;
+      padding: 3rem;
       background: @second-btn-color-tran;
-      width: 2rem;
+      width: 20rem;
     }
   }
 
@@ -56,33 +56,33 @@
   .scroll {
 
     .notice {
-      font-size: 1.2rem;
-      height: 4rem;
+      font-size: 12rem;
+      height: 40rem;
       color: @second-text-color;
       display: flex;
       justify-content: center;
       align-items: center;
 
       img {
-        height: 1.2rem;
-        margin-right: .5rem;
+        height: 12rem;
+        margin-right: 5rem;
       }
     }
 
     .collect {
-      padding: .7rem;
+      padding: 7rem;
 
       .video {
         background: @active-main-bg;
-        border-radius: .5rem;
-        padding: 1rem;
-        margin-bottom: .7rem;
+        border-radius: 5rem;
+        padding: 10rem;
+        margin-bottom: 7rem;
 
         .top {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          margin-bottom: 1rem;
+          margin-bottom: 10rem;
 
           .left {
             display: flex;
@@ -90,20 +90,20 @@
             color: gainsboro;
 
             img {
-              height: 2rem;
-              margin-right: .5rem;
+              height: 20rem;
+              margin-right: 5rem;
             }
           }
 
           .right {
-            font-size: 1.4rem;
+            font-size: 14rem;
             display: flex;
             align-items: center;
             color: @second-text-color;
 
             img {
-              height: 1.5rem;
-              width: 1.5rem;
+              height: 15rem;
+              width: 15rem;
             }
           }
         }
@@ -114,13 +114,13 @@
 
           .item {
             height: calc(33.33vw * 1.3);
-            padding: .2rem;
+            padding: 2rem;
             overflow: hidden;
             position: relative;
 
             .poster {
               object-fit: cover;
-              border-radius: .4rem;
+              border-radius: 4rem;
               width: 100%;
               height: 100%;
               display: block;
@@ -129,16 +129,16 @@
             .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;
               }
             }
           }
@@ -147,14 +147,14 @@
 
       .music {
         background: @active-main-bg;
-        border-radius: .5rem;
-        padding: 1rem;
+        border-radius: 5rem;
+        padding: 10rem;
 
         .top {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          margin-bottom: 1rem;
+          margin-bottom: 10rem;
 
           .left {
             display: flex;
@@ -162,8 +162,8 @@
             color: gainsboro;
 
             img {
-              height: 1.5rem;
-              margin-right: .5rem;
+              height: 15rem;
+              margin-right: 5rem;
             }
           }
 
@@ -173,8 +173,8 @@
             color: @second-text-color;
 
             img {
-              height: 1.5rem;
-              width: 1.5rem;
+              height: 15rem;
+              width: 15rem;
             }
           }
         }
@@ -184,19 +184,19 @@
           grid-template-columns: 33.33% 33.33% 33.33%;
 
           .item {
-            padding: .2rem;
+            padding: 2rem;
             overflow: hidden;
             position: relative;
 
             .poster {
-              border-radius: .4rem;
+              border-radius: 4rem;
               width: 100%;
-              height: calc((100vw - 3.4rem) / 3);
+              height: calc((100vw - 34rem) / 3);
               display: block;
             }
 
             .title {
-              margin-top: .5rem;
+              margin-top: 5rem;
               color: @second-text-color;
             }
           }
@@ -214,8 +214,8 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    height: 4.6rem;
-    padding: 0 1.5rem;
+    height: 46rem;
+    padding: 0 15rem;
     background: transparent;
     transition: all .2s;
 
@@ -232,28 +232,28 @@
     }
 
     .left {
-      font-size: 1.2rem;
-      height: 2.6rem;
+      font-size: 12rem;
+      height: 26rem;
       display: flex;
-      padding-right: 1.3rem;
-      padding-left: .5rem;
+      padding-right: 13rem;
+      padding-left: 5rem;
       align-items: center;
-      border-radius: 2rem;
+      border-radius: 20rem;
       background: rgba(82, 80, 80, 0.5);
 
       img {
-        padding: .6rem;
-        width: 1.8rem;
+        padding: 6rem;
+        width: 18rem;
       }
     }
 
     .right {
       img {
-        margin-left: 2rem;
+        margin-left: 20rem;
         border-radius: 50%;
         background: rgba(82, 80, 80, 0.5);
-        padding: .6rem;
-        width: 1.8rem;
+        padding: 6rem;
+        width: 18rem;
       }
     }
   }
@@ -261,7 +261,7 @@
   .desc {
     header {
       color: white;
-      height: 12rem;
+      height: 120rem;
       background-image: url('../../assets/img/header-bg.png');
       //background-image: url('data:image/jpeg;base64,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');
       background-size: cover;
@@ -272,10 +272,10 @@
     }
 
     .detail {
-      transform: translateY(-1rem);
+      transform: translateY(-10rem);
       background: @main-bg;
-      padding: 0 2rem 0 2rem;
-      border-radius: 1rem 1rem 0 0;
+      padding: 0 20rem 0 20rem;
+      border-radius: 10rem 10rem 0 0;
 
       .head {
         width: 100%;
@@ -283,34 +283,34 @@
         justify-content: space-between;
         align-items: center;
         box-sizing: border-box;
-        transform: translateY(-2rem);
+        transform: translateY(-20rem);
 
         .head-image {
           background: black;
           padding: 2px;
           border-radius: 50%;
-          width: 8rem;
-          height: 8rem;
+          width: 80rem;
+          height: 80rem;
         }
 
         .heat {
-          margin-top: 1rem;
-          width: calc(100% - 12rem);
+          margin-top: 10rem;
+          width: calc(100% - 120rem);
           color: @second-text-color;
           display: flex;
           align-items: center;
           justify-content: space-between;
 
           .num {
-            margin-top: .5rem;
+            margin-top: 5rem;
             color: white;
-            font-size: 1.6rem;
+            font-size: 16rem;
             font-weight: bold;
             margin-right: 3px;
           }
 
           .text {
-            font-size: 1.2rem;
+            font-size: 12rem;
             margin-right: 10px;
             display: flex;
             align-items: center;
@@ -322,20 +322,20 @@
       }
 
       .description {
-        font-size: 1.2rem;
+        font-size: 12rem;
         color: white;
-        transform: translateY(-2rem);
+        transform: translateY(-20rem);
 
         .number {
           color: @second-text-color;
-          padding-bottom: 1rem;
+          padding-bottom: 10rem;
           border-bottom: 1px solid @line-color;
           display: flex;
           align-items: center;
 
           img {
-            width: 1.4rem;
-            margin-left: .5rem;
+            width: 14rem;
+            margin-left: 5rem;
           }
         }
 
@@ -345,11 +345,11 @@
         color: @second-text-color;
         display: flex;
         align-items: center;
-        margin-bottom: .5rem;
+        margin-bottom: 5rem;
 
         img {
-          height: 1.2rem;
-          margin-left: .6rem;
+          height: 12rem;
+          margin-left: 6rem;
         }
 
         .text {
@@ -362,17 +362,17 @@
         display: flex;
 
         .item {
-          padding: .2rem .5rem;
-          border-radius: .2rem;
+          padding: 2rem 5rem;
+          border-radius: 2rem;
           background: @second-btn-color-tran;
-          font-size: 1rem;
+          font-size: 10rem;
           display: flex;
           align-items: center;
-          margin-right: .5rem;
+          margin-right: 5rem;
 
           img {
-            height: 1rem;
-            margin-right: .2rem;
+            height: 10rem;
+            margin-right: 2rem;
           }
         }
       }
@@ -384,17 +384,17 @@
         .button {
           position: relative;
           width: 49%;
-          font-size: 1.2rem;
+          font-size: 12rem;
           display: flex;
           align-items: center;
           justify-content: center;
-          border-radius: .2rem;
+          border-radius: 2rem;
           background: @second-btn-color;
-          height: 3rem;
+          height: 30rem;
           color: white;
 
           .not-read {
-            right: 4.5rem;
+            right: 45rem;
             position: absolute;
           }
         }
@@ -403,18 +403,18 @@
 
       .other {
         display: flex;
-        margin-bottom: 2rem;
+        margin-bottom: 20rem;
 
         .item {
-          margin-right: 2.5rem;
+          margin-right: 25rem;
           display: flex;
 
           img {
-            margin-right: .8rem;
-            border-radius: .4rem;
+            margin-right: 8rem;
+            border-radius: 4rem;
             background: @second-btn-color-tran;
-            padding: .8rem;
-            height: 2.2rem;
+            padding: 8rem;
+            height: 22rem;
           }
 
           .right {
@@ -424,12 +424,12 @@
 
             .top {
               color: white;
-              font-size: 1.4rem;
+              font-size: 14rem;
             }
 
             .bottom {
               color: @second-text-color;
-              font-size: 1.2rem;
+              font-size: 12rem;
             }
           }
         }
@@ -439,7 +439,7 @@
 
 
   .ul {
-    font-size: 1.4rem;
+    font-size: 14rem;
     width: 100%;
     height: 100%;
     overflow-y: auto;
@@ -461,11 +461,11 @@
       box-sizing: border-box;
       background: @main-bg;
       width: 100%;
-      padding: 1rem 2rem;
+      padding: 10rem 20rem;
       list-style: none;
       display: flex;
       align-items: center;
-      line-height: 4rem;
+      line-height: 40rem;
 
       &:nth-last-child(1) {
         margin-bottom: 90px;
@@ -485,13 +485,13 @@
 
   .more-function {
     box-sizing: border-box;
-    font-size: 1.2rem;
+    font-size: 12rem;
     width: 100%;
     position: absolute;
     background: @main-bg;
 
     .title {
-      padding: 2rem 0 1rem 2rem;
+      padding: 20rem 0 10rem 20rem;
       color: gray;
     }
 
@@ -511,8 +511,8 @@
         img {
           border-radius: 50%;
           background: @second-btn-color-tran;
-          padding: .6rem;
-          height: 1.6rem;
+          padding: 6rem;
+          height: 16rem;
           margin-bottom: 15px;
         }
       }
@@ -520,7 +520,7 @@
   }
 
   .button-ctn {
-    font-size: 1.4rem;
+    font-size: 14rem;
     z-index: 99999;
     width: 70vw;
     position: absolute;
@@ -529,10 +529,10 @@
 
     .button {
       box-sizing: border-box;
-      width: calc(100% - 4rem);
+      width: calc(100% - 40rem);
       background: @second-btn-color;
-      margin: 2rem;
-      height: 4.5rem;
+      margin: 20rem;
+      height: 45rem;
       border-radius: 3px;
       display: flex;
       align-items: center;
@@ -540,9 +540,9 @@
       color: white;
 
       img {
-        height: 25px;
-        width: 25px;
-        margin-right: 15px;
+        height: 25rem;
+        width: 25rem;
+        margin-right: 15rem;
       }
     }
   }

src/pages/me/Me.vue

@@ -420,7 +420,7 @@ export default {
       return this.$store.state.bodyWidth
     },
     videoSlideRowListStyle() {
-      return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(100vh - 14.6rem)'}
+      return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(100vh - 146rem)'}
     },
     SlideItemStyle() {
       if (this.tempScroll || this.isScroll) return {overflow: 'auto'}

src/pages/me/MyCard.vue

@@ -105,7 +105,7 @@ export default {
   bottom: 0;
   top: 0;
   overflow: auto;
-  font-size: 1.4rem;
+  font-size: 14rem;
 
   .header {
     position: fixed;
@@ -113,16 +113,16 @@ export default {
     top: 0;
     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;
 
     .share {
-      width: 2.4rem;
-      height: 2.4rem;
-      margin-left: 1.5rem;
+      width: 24rem;
+      height: 24rem;
+      margin-left: 15rem;
     }
   }
 
@@ -153,15 +153,15 @@ export default {
 
     .name {
       font-weight: bold;
-      margin-top: 2rem;
-      font-size: 1.6rem;
+      margin-top: 20rem;
+      font-size: 16rem;
       color: white;
     }
 
     .notice {
       color: white;
-      font-size: 1.4rem;
-      margin-top: 2rem;
+      font-size: 14rem;
+      margin-top: 20rem;
       opacity: .4;
     }
 
@@ -170,7 +170,7 @@ export default {
 
   .footer {
     position: absolute;
-    bottom: 3rem;
+    bottom: 30rem;
     display: flex;
     justify-content: space-around;
     width: 100%;
@@ -180,20 +180,20 @@ export default {
       display: flex;
       flex-direction: column;
       align-items: center;
-      font-size: 1.2rem;
+      font-size: 12rem;
 
       .wrapper {
         background: rgba(252, 250, 250, 0.3);
         border-radius: 50%;
         display: flex;
-        padding: 1.8rem;
+        padding: 18rem;
         align-items: center;
         justify-content: center;
-        margin-bottom: 1rem;
+        margin-bottom: 10rem;
       }
 
       img {
-        width: 2.6rem;
+        width: 26rem;
       }
     }
   }

src/pages/me/MyMusic.vue

@@ -211,14 +211,14 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
 
   .header {
     z-index: 9;
     position: fixed;
     width: 100vw;
     top: 0;
-    height: 5rem;
+    height: 50rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -236,17 +236,17 @@ export default {
   }
 
   .my-collect {
-    margin-top: 5rem;
+    margin-top: 50rem;
     color: rgba(88, 88, 96);
     position: relative;
 
     .wrapper {
       padding: @padding-page;
-      padding-bottom: 8rem;
+      padding-bottom: 80rem;
     }
 
     .play-all {
-      margin-bottom: 2rem;
+      margin-bottom: 20rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -257,19 +257,19 @@ export default {
         align-items: center;
 
         img {
-          width: 3rem;
-          margin-right: 1rem;
+          width: 30rem;
+          margin-right: 10rem;
         }
 
         .num {
-          font-size: 1.3rem;
+          font-size: 13rem;
           color: gray;
-          margin-left: .5rem;
+          margin-left: 5rem;
         }
       }
 
       .menu {
-        height: 2rem;
+        height: 20rem;
       }
     }
 
@@ -278,21 +278,21 @@ export default {
         color: white;
         display: flex;
         justify-content: space-between;
-        margin-bottom: 1.5rem;
+        margin-bottom: 15rem;
 
         .left {
           display: flex;
 
           .cover-wrapper {
-            margin-right: 1rem;
+            margin-right: 10rem;
             position: relative;
             display: flex;
             align-items: center;
             justify-content: center;
 
             .cover {
-              border-radius: .2rem;
-              @width: 6rem;
+              border-radius: 2rem;
+              @width: 60rem;
               width: @width;
               object-fit: cover;
               height: @width;
@@ -312,7 +312,7 @@ export default {
             }
 
             .author, .desc-bottom {
-              font-size: 1.2rem;
+              font-size: 12rem;
               color: @second-text-color;
             }
 
@@ -321,14 +321,14 @@ export default {
               align-items: center;
 
               .tag {
-                font-size: 1rem;
+                font-size: 10rem;
                 background: @second-btn-color-tran;
-                padding: .2rem .5rem;
-                margin-right: .5rem;
+                padding: 2rem 5rem;
+                margin-right: 5rem;
               }
 
               .duration {
-                margin-right: 1.4rem;
+                margin-right: 14rem;
                 position: relative;
               }
             }
@@ -340,14 +340,14 @@ export default {
           align-items: center;
 
           .playing-icon {
-            width: 2.4rem;
+            width: 24rem;
           }
 
           .collect-icon {
-            margin-left: 3rem;
+            margin-left: 30rem;
 
             img {
-              width: 2.4rem;
+              width: 24rem;
             }
           }
         }
@@ -357,7 +357,7 @@ export default {
 
     .recommend {
       color: white;
-      margin: 3rem 0;
+      margin: 30rem 0;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -368,9 +368,9 @@ export default {
         justify-content: space-between;
 
         .auto-play {
-          font-size: 1.3rem;
+          font-size: 13rem;
           color: @second-text-color;
-          margin-right: 1rem;
+          margin-right: 10rem;
         }
 
       }
@@ -386,7 +386,7 @@ export default {
       background: rgba(56, 59, 68);
 
       .playing-wrapper {
-        transform: translateY(-1rem);
+        transform: translateY(-10rem);
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -394,13 +394,13 @@ export default {
 
       .cover-wrapper {
         background: rgba(56, 59, 68);
-        padding: .7rem;
+        padding: 7rem;
         border-radius: 50%;
 
         .cover {
           background: rgba(97, 98, 103);
-          padding: .3rem;
-          @width: 5rem;
+          padding: 3rem;
+          @width: 50rem;
           height: @width;
           width: @width;
           object-fit: cover;
@@ -409,20 +409,20 @@ export default {
       }
 
       .name {
-        margin: 0 1rem;
+        margin: 0 10rem;
         flex: 1;
 
       }
 
       .option {
-        width: 3.8rem;
-        height: 3.8rem;
-        margin-right: 2rem;
+        width: 38rem;
+        height: 38rem;
+        margin-right: 20rem;
       }
 
       .menu-list {
-        width: 2.8rem;
-        height: 2.8rem;
+        width: 28rem;
+        height: 28rem;
       }
     }
   }
@@ -437,13 +437,13 @@ export default {
 
     .dialog-header {
       z-index: 9;
-      font-size: 1.6rem;
+      font-size: 16rem;
       position: fixed;
       top: 0;
       width: 100vw;
       padding: @padding-page;
       box-sizing: border-box;
-      height: 5rem;
+      height: 50rem;
       display: flex;
       align-items: center;
       justify-content: space-between;

src/pages/me/MyRequestUpdate.vue

@@ -50,17 +50,17 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
 
   .content {
-    padding: 6rem 1.5rem 6rem 1.5rem;
+    padding: 60rem 15rem 60rem 15rem;
 
 
     .request {
       .list {
 
         .item {
-          padding: 1rem 0;
+          padding: 10rem 0;
 
           display: flex;
           justify-content: space-between;
@@ -69,18 +69,18 @@ export default {
           .left {
             display: flex;
             align-items: center;
-            @width: 4.2rem;
+            @width: 42rem;
 
             img {
               width: @width;
               height: @width;
               border-radius: 50%;
-              margin-right: 1rem;
+              margin-right: 10rem;
             }
           }
 
           .time{
-            font-size: 1.2rem;
+            font-size: 12rem;
             color: @second-text-color;
           }
         }

src/pages/me/RequestUpdate.vue

@@ -6,7 +6,7 @@
       </template>
       <template v-slot:right>
         <div>
-          <img src="../../assets/img/icon/menu-gray.png" style="width: 2rem;" @click="isShowOption = true">
+          <img src="../../assets/img/icon/menu-gray.png" style="width: 20rem;" @click="isShowOption = true">
         </div>
       </template>
     </BaseHeader>
@@ -40,7 +40,7 @@
 
     <from-bottom-dialog
         page-id="RequestUpdate"
-        height="16rem"
+        height="160rem"
         :show-heng-gang="false"
         mode="white"
         v-model="isShowOption">
@@ -107,10 +107,10 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
 
   .content {
-    padding: 6rem 1.5rem 6rem 1.5rem;
+    padding: 60rem 15rem 60rem 15rem;
 
     .none {
       display: flex;
@@ -118,8 +118,8 @@ export default {
       align-items: center;
 
       img {
-        margin-top: 10rem;
-        height: 12rem;
+        margin-top: 100rem;
+        height: 120rem;
       }
     }
 
@@ -128,7 +128,7 @@ export default {
         margin-top: @padding-page;
 
         .item {
-          padding: 1rem 0;
+          padding: 10rem 0;
 
           display: flex;
           justify-content: space-between;
@@ -137,18 +137,18 @@ export default {
           .left {
             display: flex;
             align-items: center;
-            @width: 4.2rem;
+            @width: 42rem;
 
             img {
               width: @width;
               height: @width;
               border-radius: 50%;
-              margin-right: 1rem;
+              margin-right: 10rem;
             }
           }
 
           .time {
-            font-size: 1.2rem;
+            font-size: 12rem;
             color: @second-text-color;
           }
         }
@@ -156,19 +156,19 @@ export default {
     }
 
     .title {
-      margin-top: 1rem;
-      font-size: 1.6rem;
+      margin-top: 10rem;
+      font-size: 16rem;
     }
 
     .subtitle {
-      margin-top: 1rem;
-      font-size: 1.4rem;
+      margin-top: 10rem;
+      font-size: 14rem;
       color: @second-text-color;
     }
   }
 
   .l-row {
-    padding: 1.5rem;
+    padding: 15rem;
     color: black;
     text-align: center;
 
@@ -178,13 +178,13 @@ export default {
   }
 
   .space {
-    height: 1rem;
+    height: 10rem;
     background: whitesmoke;
   }
 
   .buttons {
     position: fixed;
-    padding: 0 1.5rem 1.5rem 1.5rem;
+    padding: 0 15rem 15rem 15rem;
     bottom: 0;
     left: 0;
     right: 0;
@@ -196,11 +196,11 @@ export default {
       flex: 1;
 
       &:nth-child(1) {
-        margin-right: 0.5rem;
+        margin-right: 5rem;
       }
 
       &:nth-child(2) {
-        margin-left: 0.5rem;
+        margin-left: 5rem;
       }
     }
   }

src/pages/me/Uploader.less

@@ -21,7 +21,7 @@
   background: @main-bg;
   height: 100%;
   width: 100%;
-  font-size: 1.4rem;
+  font-size: 14rem;
 
   .preview-img {
     z-index: 3;
@@ -40,11 +40,11 @@
 
     .download {
       position: absolute;
-      bottom: 2rem;
-      right: 2rem;
-      padding: .3rem;
+      bottom: 20rem;
+      right: 20rem;
+      padding: 3rem;
       background: @second-btn-color-tran;
-      width: 2rem;
+      width: 20rem;
     }
   }
 
@@ -60,33 +60,33 @@
 
   .scroll {
     .notice {
-      font-size: 1.2rem;
-      height: 4rem;
+      font-size: 12rem;
+      height: 40rem;
       color: @second-text-color;
       display: flex;
       justify-content: center;
       align-items: center;
 
       img {
-        height: 1.2rem;
-        margin-right: .5rem;
+        height: 12rem;
+        margin-right: 5rem;
       }
     }
 
     .collect {
-      padding: .7rem;
+      padding: 7rem;
 
       .video {
         background: @active-main-bg;
-        border-radius: .5rem;
-        padding: 1rem;
-        margin-bottom: .7rem;
+        border-radius: 5rem;
+        padding: 10rem;
+        margin-bottom: 7rem;
 
         .top {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          margin-bottom: 1rem;
+          margin-bottom: 10rem;
 
           .left {
             display: flex;
@@ -94,8 +94,8 @@
             color: gainsboro;
 
             img {
-              height: 2rem;
-              margin-right: .5rem;
+              height: 20rem;
+              margin-right: 5rem;
             }
           }
 
@@ -112,12 +112,12 @@
 
           .item {
             height: calc(33.33vw * 1.3);
-            padding: .2rem;
+            padding: 2rem;
             overflow: hidden;
             position: relative;
 
             .poster {
-              border-radius: .4rem;
+              border-radius: 4rem;
               width: 100%;
               height: 100%;
               display: block;
@@ -126,16 +126,16 @@
             .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;
               }
             }
           }
@@ -144,14 +144,14 @@
 
       .audio {
         background: @active-main-bg;
-        border-radius: .5rem;
-        padding: 1rem;
+        border-radius: 5rem;
+        padding: 10rem;
 
         .top {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          margin-bottom: 1rem;
+          margin-bottom: 10rem;
 
           .left {
             display: flex;
@@ -159,8 +159,8 @@
             color: gainsboro;
 
             img {
-              height: 1.5rem;
-              margin-right: .5rem;
+              height: 15rem;
+              margin-right: 5rem;
             }
           }
 
@@ -176,19 +176,19 @@
           grid-template-columns: 33.33% 33.33% 33.33%;
 
           .item {
-            padding: .2rem;
+            padding: 2rem;
             overflow: hidden;
             position: relative;
 
             .poster {
-              border-radius: .4rem;
+              border-radius: 4rem;
               width: 100%;
-              height: calc((100vw - 3.4rem) / 3);
+              height: calc((100vw - 34rem) / 3);
               display: block;
             }
 
             .title {
-              margin-top: .5rem;
+              margin-top: 5rem;
               color: @second-text-color;
             }
           }
@@ -205,8 +205,8 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    height: 4.6rem;
-    padding: 0 1.5rem;
+    height: 46rem;
+    padding: 0 15rem;
     background: transparent;
     transition: all .2s;
 
@@ -230,18 +230,18 @@
         transform: rotate(180deg);
         border-radius: 50%;
         background: rgba(82, 80, 80, 0.5);
-        padding: .6rem;
-        width: 1.8rem;
+        padding: 6rem;
+        width: 18rem;
       }
     }
 
     .follow-btn {
       color: white;
       position: absolute;
-      font-size: 1.2rem;
-      padding: .3rem 1.2rem;
-      border-radius: .2rem;
-      right: 6rem;
+      font-size: 12rem;
+      padding: 3rem 12rem;
+      border-radius: 2rem;
+      right: 60rem;
       background: @primary-btn-color;
 
       &.followed {
@@ -257,27 +257,27 @@
       position: relative;
 
       .request {
-        font-size: 1.2rem;
-        height: 2.6rem;
+        font-size: 12rem;
+        height: 26rem;
         display: flex;
-        padding-right: 1.3rem;
-        padding-left: .5rem;
+        padding-right: 13rem;
+        padding-left: 5rem;
         align-items: center;
-        border-radius: 2rem;
+        border-radius: 20rem;
         background: rgba(82, 80, 80, 0.5);
 
         img {
-          padding: .6rem;
-          width: 1.8rem;
+          padding: 6rem;
+          width: 18rem;
         }
       }
 
       .menu {
-        margin-left: 1.5rem;
+        margin-left: 15rem;
         border-radius: 50%;
         background: rgba(82, 80, 80, 0.5);
-        padding: .6rem;
-        width: 1.8rem;
+        padding: 6rem;
+        width: 18rem;
       }
     }
   }
@@ -285,7 +285,7 @@
   .desc {
     header {
       color: white;
-      height: 12rem;
+      height: 120rem;
       background-image: url('../../assets/img/header-bg.png');
       background-size: cover;
       background-position: center;
@@ -294,12 +294,12 @@
     }
 
     .detail {
-      transform: translateY(-1rem);
+      transform: translateY(-10rem);
       background: @main-bg;
-      border-radius: 1rem 1rem 0 0;
+      border-radius: 10rem 10rem 0 0;
 
       .detail-wrapper {
-        padding: 0 2rem 1.5rem 2rem;
+        padding: 0 20rem 15rem 20rem;
 
         .head {
           width: 100%;
@@ -307,34 +307,34 @@
           justify-content: space-between;
           align-items: center;
           box-sizing: border-box;
-          transform: translateY(-2rem);
+          transform: translateY(-20rem);
 
           .head-image {
             background: black;
             padding: 2px;
             border-radius: 50%;
-            width: 8rem;
-            height: 8rem;
+            width: 80rem;
+            height: 80rem;
           }
 
           .heat {
-            margin-top: 1rem;
-            width: calc(100% - 12rem);
+            margin-top: 10rem;
+            width: calc(100% - 120rem);
             color: @second-text-color;
             display: flex;
             align-items: center;
             justify-content: space-between;
 
             .num {
-              margin-top: .5rem;
+              margin-top: 5rem;
               color: white;
-              font-size: 1.6rem;
+              font-size: 16rem;
               font-weight: bold;
               margin-right: 3px;
             }
 
             .text {
-              font-size: 1.2rem;
+              font-size: 12rem;
               margin-right: 10px;
               display: flex;
               align-items: center;
@@ -345,20 +345,20 @@
         }
 
         .description {
-          font-size: 1.2rem;
+          font-size: 12rem;
           color: white;
-          transform: translateY(-2rem);
+          transform: translateY(-20rem);
 
           .number, .certification {
-            margin-bottom: 1rem;
-            padding-bottom: 1rem;
+            margin-bottom: 10rem;
+            padding-bottom: 10rem;
             border-bottom: 1px solid @line-color;
             display: flex;
             align-items: center;
 
             img {
-              width: 1.4rem;
-              margin-left: .5rem;
+              width: 14rem;
+              margin-left: 5rem;
             }
           }
 
@@ -366,14 +366,14 @@
             color: @second-text-color;
 
             img {
-              margin-left: .5rem;
+              margin-left: 5rem;
             }
           }
 
           .certification {
             img {
-              width: 1.4rem;
-              margin-right: .5rem;
+              width: 14rem;
+              margin-right: 5rem;
             }
           }
         }
@@ -382,11 +382,11 @@
           color: white;
           display: flex;
           align-items: center;
-          margin-bottom: .5rem;
+          margin-bottom: 5rem;
 
           img {
-            height: 1.2rem;
-            margin-left: .6rem;
+            height: 12rem;
+            margin-left: 6rem;
           }
 
           .text {
@@ -399,35 +399,35 @@
           display: flex;
 
           .item {
-            padding: .2rem .5rem;
-            border-radius: .2rem;
+            padding: 2rem 5rem;
+            border-radius: 2rem;
             background: @second-btn-color-tran;
-            font-size: 1rem;
+            font-size: 10rem;
             display: flex;
             align-items: center;
-            margin-right: .5rem;
+            margin-right: 5rem;
 
             img {
-              height: 1rem;
-              margin-right: .2rem;
+              height: 10rem;
+              margin-right: 2rem;
             }
           }
         }
 
         .other {
           display: flex;
-          margin-bottom: 2rem;
+          margin-bottom: 20rem;
 
           .item {
-            margin-right: 2.5rem;
+            margin-right: 25rem;
             display: flex;
 
             img {
-              margin-right: .8rem;
-              border-radius: .4rem;
+              margin-right: 8rem;
+              border-radius: 4rem;
               background: @second-btn-color-tran;
-              padding: .8rem;
-              height: 2.2rem;
+              padding: 8rem;
+              height: 22rem;
             }
 
             .right {
@@ -437,24 +437,24 @@
 
               .top {
                 color: white;
-                font-size: 1.4rem;
+                font-size: 14rem;
               }
 
               .bottom {
                 color: @second-text-color;
-                font-size: 1.2rem;
+                font-size: 12rem;
               }
             }
           }
         }
 
         .my-buttons {
-          margin-top: 2rem;
+          margin-top: 20rem;
           overflow: hidden;
           display: flex;
           justify-content: flex-end;
           align-items: center;
-          @width: 3.6rem;
+          @width: 36rem;
 
           .follow-display {
             flex: 1;
@@ -471,19 +471,19 @@
               }
 
               .no-follow {
-                width: calc(100% - 0.5rem);
+                width: calc(100% - 5rem);
                 color: white;
-                border-radius: .2rem;
+                border-radius: 2rem;
                 background: @primary-btn-color;
                 height: @width;
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                margin-right: .5rem;
+                margin-right: 5rem;
                 box-sizing: border-box;
 
                 span {
-                  margin-left: .2rem;
+                  margin-left: 2rem;
                 }
               }
 
@@ -495,18 +495,18 @@
 
                 .l-button {
                   color: white;
-                  border-radius: .2rem;
+                  border-radius: 2rem;
                   background: @second-btn-color;
                   height: @width;
                   width: 50%;
-                  margin-right: .5rem;
+                  margin-right: 5rem;
                   box-sizing: border-box;
                   display: flex;
                   align-items: center;
                   justify-content: center;
 
                   span {
-                    margin-left: .2rem;
+                    margin-left: 2rem;
                   }
 
                   img {
@@ -517,7 +517,7 @@
             }
 
             img {
-              @width: 1.4rem;
+              @width: 14rem;
               width: @width;
               height: @width;
             }
@@ -528,11 +528,11 @@
             position: relative;
             width: @width;
             height: @width;
-            font-size: 1.2rem;
+            font-size: 12rem;
             display: flex;
             align-items: center;
             justify-content: center;
-            border-radius: .2rem;
+            border-radius: 2rem;
             background: @second-btn-color;
             color: white;
 
@@ -544,7 +544,7 @@
           }
 
           .loading {
-            @width: 1.2rem;
+            @width: 12rem;
             width: @width;
             height: @width;
             animation: rotate .6s linear infinite;
@@ -562,7 +562,7 @@
           .arrow {
             transition: transform .3s ease;
             transform: rotate(180deg);
-            @width: 1.6rem;
+            @width: 16rem;
             width: @width;
             height: @width;
           }
@@ -573,7 +573,7 @@
 
       .recommend {
         transition: all .3s ease;
-        height: 22rem;
+        height: 220rem;
         overflow: hidden;
 
         &.hidden {
@@ -581,8 +581,8 @@
         }
 
         .title {
-          padding: 0 2rem 0 2rem;
-          font-size: 1.2rem;
+          padding: 0 20rem 0 20rem;
+          font-size: 12rem;
           color: @second-text-color;
           display: flex;
           justify-content: space-between;
@@ -593,9 +593,9 @@
           }
 
           img {
-            margin-left: .3rem;
-            width: 1.3rem;
-            height: 1.3rem;
+            margin-left: 3rem;
+            width: 13rem;
+            height: 13rem;
           }
 
           .right {
@@ -605,56 +605,56 @@
         }
 
         .friends {
-          padding-left: 2rem;
-          margin-top: 1rem;
+          padding-left: 20rem;
+          margin-top: 10rem;
           display: flex;
           overflow-x: scroll;
 
           .friend {
             position: relative;
             background: @second-btn-color-tran;
-            margin-right: 1rem;
-            padding: 1rem;
+            margin-right: 10rem;
+            padding: 10rem;
             display: flex;
             flex-direction: column;
             align-items: center;
 
             .avatar {
-              @width: 10rem;
+              @width: 100rem;
               border-radius: 50%;
               width: @width;
               height: @width;
             }
 
             .name {
-              margin-top: 1rem;
-              font-size: 1.2rem;
+              margin-top: 10rem;
+              font-size: 12rem;
               color: white;
             }
 
             .tips {
-              margin-top: .5rem;
-              font-size: 1.2rem;
+              margin-top: 5rem;
+              font-size: 12rem;
               color: @second-text-color;
             }
 
             .button {
-              margin-top: 1rem;
-              width: 15rem;
-              height: 2.6rem;
-              font-size: 1.2rem;
+              margin-top: 10rem;
+              width: 150rem;
+              height: 26rem;
+              font-size: 12rem;
             }
 
             .close {
               position: absolute;
-              top: .2rem;
-              right: .2rem;
+              top: 2rem;
+              right: 2rem;
             }
           }
 
           .more {
             .notice {
-              width: 10rem;
+              width: 100rem;
               height: 100%;
               display: flex;
               flex-direction: column;

src/pages/me/Uploader.vue

@@ -324,7 +324,7 @@ export default {
       return this.$store.state.bodyWidth
     },
     videoSlideRowListStyle() {
-      return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(100vh - 9.6rem)'}
+      return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(100vh - 96rem)'}
     },
     SlideItemStyle() {
       if (this.tempScroll || this.isScroll) return {overflow: 'auto'}

src/pages/me/VideoDetail.vue

@@ -389,16 +389,16 @@ export default {
   .search-wrapper {
     z-index: 9;
     position: fixed;
-    top: 1rem;
-    left: 1.5rem;
-    right: 1.5rem;
+    top: 10rem;
+    left: 15rem;
+    right: 15rem;
     display: flex;
     align-items: center;
 
     .back {
-      width: 2rem;
-      height: 2rem;
-      margin-right: 1rem;
+      width: 20rem;
+      height: 20rem;
+      margin-right: 10rem;
     }
 
     .search-ctn {
@@ -444,7 +444,7 @@ export default {
     .right {
       display: flex;
       align-items: center;
-      font-size: 1.4rem;
+      font-size: 14rem;
 
       img {
         margin-right: 10px;
@@ -465,12 +465,12 @@ export default {
   .share-dialog {
     .collection {
       background: white;
-      margin: 0 1rem 1rem 1rem;
-      width: calc(100% - 2rem);
+      margin: 0 10rem 10rem 10rem;
+      width: calc(100% - 20rem);
       border-radius: 6px;
       display: flex;
       align-items: center;
-      font-size: 1.6rem;
+      font-size: 16rem;
       font-weight: bold;
       padding: 10px;
       box-sizing: border-box;
@@ -485,8 +485,8 @@ export default {
     }
 
     .friends {
-      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;
 
@@ -507,14 +507,14 @@ export default {
 
         .right {
           margin: 0 5px 0 15px;
-          font-size: 1.6rem;
+          font-size: 16rem;
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: space-between;
 
           .share-btn {
-            font-size: 1.4rem;
+            font-size: 14rem;
             color: white;
             padding: 5px 20px;
             background: @primary-btn-color;
@@ -528,14 +528,14 @@ export default {
 
   .permission-dialog {
     .space {
-      height: 1rem;
+      height: 10rem;
       background: whitesmoke;
     }
 
     .setting {
       background: white;
       box-sizing: border-box;
-      padding: 1rem 2rem;
+      padding: 10rem 20rem;
       width: 100%;
       display: flex;
       align-items: center;
@@ -544,24 +544,24 @@ export default {
 
       img {
         border-radius: 50%;
-        width: 3rem;
-        height: 3rem;
+        width: 30rem;
+        height: 30rem;
       }
 
       .right {
-        margin: 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.4rem;
+          font-size: 14rem;
           color: white;
-          padding: .5rem 2rem;
+          padding: 5rem 20rem;
           background: @primary-btn-color;
-          border-radius: .2rem;
+          border-radius: 2rem;
         }
       }
     }

src/pages/me/collect/MusicCollect.vue

@@ -143,14 +143,14 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
 
   .content {
-    padding-top: 6rem;
+    padding-top: 60rem;
 
     .list {
       .item {
-        padding: 2rem 1.5rem;
+        padding: 20rem 15rem;
         padding-bottom: 0;
         display: flex;
         align-items: center;
@@ -160,21 +160,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;
@@ -194,7 +194,7 @@ export default {
             }
 
             .author, .desc-bottom {
-              font-size: 1.2rem;
+              font-size: 12rem;
               color: @second-text-color;
             }
 
@@ -202,7 +202,7 @@ export default {
               display: flex;
 
               .duration {
-                margin-right: 1.4rem;
+                margin-right: 14rem;
                 position: relative;
               }
             }
@@ -211,9 +211,9 @@ export default {
 
         .option {
           img {
-            width: 2rem;
-            height: 2rem;
-            margin-left: 2rem;
+            width: 20rem;
+            height: 20rem;
+            margin-left: 20rem;
           }
         }
 
@@ -242,7 +242,7 @@ export default {
     .music-wrapper {
       width: 100vw;
       border-top: 1px solid #414141;
-      padding: 1rem 1.5rem;
+      padding: 10rem 15rem;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -251,22 +251,22 @@ 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;
+            border-radius: 2rem;
             object-fit: cover;
-            @width: 5rem;
+            @width: 50rem;
             width: @width;
             height: @width;
           }
@@ -285,7 +285,7 @@ export default {
           }
 
           .author, .desc-bottom {
-            font-size: 1.2rem;
+            font-size: 12rem;
             color: @second-text-color;
           }
 
@@ -293,7 +293,7 @@ export default {
             display: flex;
 
             .duration {
-              margin-right: 1.4rem;
+              margin-right: 14rem;
               position: relative;
             }
           }

src/pages/me/collect/VideoCollect.vue

@@ -71,7 +71,7 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
 
   .content {
     padding-top: @header-height;

src/pages/me/components/CollectMusic.vue

@@ -18,7 +18,7 @@
     <from-bottom-dialog
         mask-mode="lightgray"
         page-id="CollectMusic"
-        border-radius="1.5rem 1.5rem 0 0"
+        border-radius="15rem 15rem 0 0"
         :show-heng-gang="false"
         height="70vh"
         v-model="isShowList">
@@ -169,7 +169,7 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
 }
 
 .music-list-dialog {
@@ -186,34 +186,34 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    height: 5rem;
+    height: 50rem;
     padding: 0 @padding-page;
-    border-radius: 1.5rem 1.5rem 0 0;
+    border-radius: 15rem 15rem 0 0;
     z-index: 9;
 
     .left {
-      font-size: 1.6rem;
+      font-size: 16rem;
     }
 
     .right {
       display: flex;
       align-items: center;
-      font-size: 1.2rem;
+      font-size: 12rem;
 
       img {
-        width: 2rem;
-        margin-right: .5rem;
+        width: 20rem;
+        margin-right: 5rem;
       }
     }
   }
 
   .wrapper {
-    padding-top: 5rem;
+    padding-top: 50rem;
   }
 
   .l-row {
     background: @bg-color;
-    height: 5rem;
+    height: 50rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -228,38 +228,38 @@ export default {
       align-items: center;
 
       .author {
-        font-size: 1.2rem;
+        font-size: 12rem;
         color: @second-text-color;
-        margin-left: 2rem;
+        margin-left: 20rem;
         position: relative;
         display: flex;
         align-items: center;
 
         &:after {
           content: '';
-          width: .6rem;
+          width: 6rem;
           height: .5px;
           background: @second-text-color;
           position: absolute;
-          left: -1.2rem;
+          left: -12rem;
         }
       }
 
       .play-icon {
-        width: 1.5rem;
-        margin-right: 1rem;
+        width: 15rem;
+        margin-right: 10rem;
       }
     }
 
     .right {
-      width: 1.5rem;
+      width: 15rem;
     }
   }
 
   .footer {
     background: @bg-color;
     border-top: 1px solid #2a2828;
-    height: 6rem;
+    height: 60rem;
     display: flex;
     align-items: center;
     justify-content: center;

src/pages/me/components/GuessMusic.vue

@@ -18,7 +18,7 @@
     <from-bottom-dialog
         mask-mode="lightgray"
         page-id="GuessMusic"
-        border-radius="1.5rem 1.5rem 0 0"
+        border-radius="15rem 15rem 0 0"
         :show-heng-gang="false"
         height="70vh"
         v-model="isShowList">
@@ -151,7 +151,7 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
 }
 
 .music-list-dialog {
@@ -168,34 +168,34 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    height: 5rem;
+    height: 50rem;
     padding: 0 @padding-page;
-    border-radius: 1.5rem 1.5rem 0 0;
+    border-radius: 15rem 15rem 0 0;
     z-index: 9;
 
     .left {
-      font-size: 1.6rem;
+      font-size: 16rem;
     }
 
     .right {
       display: flex;
       align-items: center;
-      font-size: 1.2rem;
+      font-size: 12rem;
 
       img {
-        width: 2rem;
-        margin-right: .5rem;
+        width: 20rem;
+        margin-right: 5rem;
       }
     }
   }
 
   .wrapper {
-    padding-top: 5rem;
+    padding-top: 50rem;
   }
 
   .l-row {
     background: @bg-color;
-    height: 5rem;
+    height: 50rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -210,38 +210,38 @@ export default {
       align-items: center;
 
       .author {
-        font-size: 1.2rem;
+        font-size: 12rem;
         color: @second-text-color;
-        margin-left: 2rem;
+        margin-left: 20rem;
         position: relative;
         display: flex;
         align-items: center;
 
         &:after {
           content: '';
-          width: .6rem;
+          width: 6rem;
           height: .5px;
           background: @second-text-color;
           position: absolute;
-          left: -1.2rem;
+          left: -12rem;
         }
       }
 
       .play-icon {
-        width: 1.5rem;
-        margin-right: 1rem;
+        width: 15rem;
+        margin-right: 10rem;
       }
     }
 
     .right {
-      width: 1.5rem;
+      width: 15rem;
     }
   }
 
   .footer {
     background: @bg-color;
     border-top: 1px solid #2a2828;
-    height: 6rem;
+    height: 60rem;
     display: flex;
     align-items: center;
     justify-content: center;

src/pages/me/components/SlideItemMusic.vue

@@ -286,7 +286,7 @@ export default {
 
 .SlideItemMusic {
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
   min-width: 100vw;
   min-height: 100%;
   display: flex;
@@ -297,34 +297,34 @@ export default {
 
 
   .cover {
-    margin-top: 8rem;
+    margin-top: 80rem;
     width: 80vw;
     height: 80vw;
 
     img {
-      border-radius: 2.5rem;
+      border-radius: 25rem;
       object-fit: cover;
       width: 100%;
       height: 100%;
-      box-shadow: 0 0 1.5rem .5rem #514f4f;
+      box-shadow: 0 0 15rem 5rem #514f4f;
     }
 
   }
 
   .lyrics-wrapper {
-    margin-top: 3rem;
+    margin-top: 30rem;
     overflow: auto;
-    height: 8rem;
+    height: 80rem;
 
     .container {
-      min-height: 8rem;
+      min-height: 80rem;
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
     }
 
     .lyrics {
-      height: 4rem;
+      height: 40rem;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -332,14 +332,14 @@ export default {
   }
 
   .lyrics-mask {
-    top: calc(80vw + 7rem);
-    height: 8rem;
+    top: calc(80vw + 70rem);
+    height: 80rem;
     width: 100vw;
     position: absolute;
   }
 
   .lyrics-full {
-    margin-top: 8rem;
+    margin-top: 80rem;
     width: 100vw;
     height: 60vh;
     display: flex;
@@ -351,7 +351,7 @@ export default {
       .item {
         display: flex;
         justify-content: center;
-        height: 4rem;
+        height: 40rem;
       }
     }
 
@@ -371,17 +371,17 @@ export default {
       align-items: flex-end;
 
       img {
-        width: 3.5rem;
+        width: 35rem;
       }
 
       .left {
         .name {
-          font-size: 1.8rem;
-          margin-bottom: .4rem;
+          font-size: 18rem;
+          margin-bottom: 4rem;
         }
 
         .author {
-          font-size: 1.4rem;
+          font-size: 14rem;
         }
       }
 
@@ -390,15 +390,15 @@ export default {
           display: flex;
           align-items: center;
           flex-direction: column;
-          margin-top: 2rem;
-          font-size: 1.2rem;
+          margin-top: 20rem;
+          font-size: 12rem;
         }
       }
     }
 
     .progress {
       width: 100vw;
-      font-size: 1.2rem;
+      font-size: 12rem;
       padding: 0 @padding-page;
       box-sizing: border-box;
       display: flex;
@@ -407,15 +407,15 @@ export default {
       color: gainsboro;
 
       .bar {
-        margin: 0 .6rem;
+        margin: 0 6rem;
         flex: 1;
         position: relative;
 
         .slide-bar {
           position: absolute;
-          height: 2rem;
+          height: 20rem;
           width: 100%;
-          top: -1rem;
+          top: -10rem;
           z-index: 9;
         }
 
@@ -444,8 +444,8 @@ export default {
           position: absolute;
           left: 50vw;
           top: -3px;
-          height: .8rem;
-          width: .8rem;
+          height: 8rem;
+          width: 8rem;
           border-radius: 50%;
           background: white;
         }
@@ -461,8 +461,8 @@ export default {
       justify-content: space-between;
 
       img {
-        width: 3.8rem;
-        height: 3.8rem;
+        width: 38rem;
+        height: 38rem;
       }
 
       .center {
@@ -470,12 +470,12 @@ export default {
         align-items: center;
 
         img {
-          margin: 0 1rem;
+          margin: 0 10rem;
         }
 
         .control {
-          width: 5.5rem;
-          height: 5.5rem;
+          width: 55rem;
+          height: 55rem;
         }
       }
     }

src/pages/me/rightMenu/LookHistory.vue

@@ -141,10 +141,10 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
 
   .content {
-    padding-top: 6rem;
+    padding-top: 60rem;
 
     .SlideRowList, .Scroll {
       height: calc(100vh - @indicator-height - @header-height) !important;
@@ -158,12 +158,12 @@ export default {
       flex-direction: column;
 
       img {
-        height: 12rem;
+        height: 120rem;
       }
 
       .title {
-        font-size: 1.3rem;
-        margin-top: 1rem;
+        font-size: 13rem;
+        margin-top: 10rem;
         color: @second-text-color;
       }
     }

src/pages/me/rightMenu/MinorProtection/DetailSetting.vue

@@ -96,7 +96,7 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
 
   .content {
     padding-top: @header-height;
@@ -104,29 +104,29 @@ export default {
 
   .footer {
     position: fixed;
-    bottom: 1.5rem;
-    left: 1rem;
-    right: 1rem;
+    bottom: 15rem;
+    left: 10rem;
+    right: 10rem;
 
     .notice {
-      font-size: 1.3rem;
-      margin-bottom: 1.5rem;
+      font-size: 13rem;
+      margin-bottom: 15rem;
     }
   }
 
   .type1 {
     .notice {
-      margin: 6rem 0;
+      margin: 60rem 0;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
-      font-size: 1.6rem;
+      font-size: 16rem;
       color: @second-text-color;
 
       img {
-        width: 1.5rem;
-        margin-bottom: 1.5rem;
+        width: 15rem;
+        margin-bottom: 15rem;
       }
 
     }
@@ -134,7 +134,7 @@ export default {
 
   .type2 {
     .desc {
-      margin-top: 4rem;
+      margin-top: 40rem;
       width: 100%;
     }
   }

src/pages/me/rightMenu/MinorProtection/Index.vue

@@ -54,10 +54,10 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
 
   .content {
-    padding-top: 6rem;
+    padding-top: 60rem;
   }
 }
 </style>

src/pages/me/rightMenu/MinorProtection/TriggerTime.vue

@@ -68,7 +68,7 @@ export default {
   color: white;
 
   .content {
-    padding-top: 6rem;
+    padding-top: 60rem;
   }
 }
 </style>

src/pages/me/rightMenu/Setting.vue

@@ -208,27 +208,27 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
-  font-size: 1.4rem;
+  font-size: 14rem;
 
   .content {
-    padding-top: 6rem;
+    padding-top: 60rem;
 
     .title {
       color: @second-text-color;
-      font-size: 1.3rem;
-      margin: 2rem 0 0 2rem;
+      font-size: 13rem;
+      margin: 20rem 0 0 20rem;
     }
 
     .version {
       color: @second-text-color;
-      font-size: 1.3rem;
-      margin: 4rem;
+      font-size: 13rem;
+      margin: 40rem;
       text-align: center;
     }
 
     .line {
-      width: calc(100% - 3rem);
-      margin-left: 1.5rem;
+      width: calc(100% - 30rem);
+      margin-left: 15rem;
       background: @line-color;
     }
   }

src/pages/me/userinfo/AddSchool.vue

@@ -173,7 +173,7 @@ export default {
   color: white;
 
   .content {
-    padding-top: 6rem;
+    padding-top: 60rem;
 
   }
 }

src/pages/me/userinfo/ChooseCity.vue

@@ -79,29 +79,29 @@ export default {
   overflow: auto;
 
   .content {
-    padding-top: 6rem;
+    padding-top: 60rem;
 
     .nearby {
 
       .title {
-        padding: 1rem 2rem;
+        padding: 10rem 20rem;
 
         img {
-          width: 1rem;
-          height: 1rem;
-          margin-right: .2rem;
+          width: 10rem;
+          height: 10rem;
+          margin-right: 2rem;
         }
       }
 
     }
 
     .row {
-      padding: 0 1.5rem;
+      padding: 0 15rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
-      height: 5rem;
-      font-size: 1.4rem;
+      height: 50rem;
+      font-size: 14rem;
       transition: all .1s;
       background: @main-bg;
 
@@ -112,7 +112,7 @@ export default {
         color: @second-text-color;
 
         img {
-          margin-left: 1rem;
+          margin-left: 10rem;
           width: 15px;
         }
       }

src/pages/me/userinfo/ChooseDepartment.vue

@@ -65,12 +65,12 @@ export default {
 
 
   .content {
-    padding-top: 6rem;
+    padding-top: 60rem;
 
     .item {
-      padding: 0 2rem;
-      font-size: 1.4rem;
-      height: 5rem;
+      padding: 0 20rem;
+      font-size: 14rem;
+      height: 50rem;
       display: flex;
       justify-content: space-between;
       align-items: center;

src/pages/me/userinfo/ChooseLocation.vue

@@ -1218,20 +1218,20 @@ export default {
   overflow: auto;
 
   .content {
-    padding-top: 6rem;
+    padding-top: 60rem;
 
     .nearby {
     }
 
     .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;
       }
     }
   }

src/pages/me/userinfo/ChooseProvince.vue

@@ -48,17 +48,17 @@ export default {
   overflow: auto;
 
   .content {
-    padding-top: 6rem;
+    padding-top: 60rem;
 
     .nearby {
 
       .title {
-        padding: 1rem 2rem;
+        padding: 10rem 20rem;
 
         img {
-          width: 1rem;
-          height: 1rem;
-          margin-right: .2rem;
+          width: 10rem;
+          height: 10rem;
+          margin-right: 2rem;
         }
       }
 

src/pages/me/userinfo/ChooseSchool.vue

@@ -29,7 +29,7 @@
         </div>
         <div v-else class="item">无法获取</div>
       </div>
-      <div class="line" style="width: calc(100% - 4rem);margin-left: 2rem;"></div>
+      <div class="line" style="width: calc(100% - 40rem);margin-left: 20rem;"></div>
       <div class="schools" v-if="!isSearch">
         <div class="item" v-for="item in schools"
              @click="setSchool(item)"
@@ -110,26 +110,26 @@ export default {
 
 
   .content {
-    padding-top: 12rem;
+    padding-top: 120rem;
 
     .nearby {
 
       .title {
-        padding: 1rem 2rem;
+        padding: 10rem 20rem;
 
         img {
-          width: 1rem;
-          height: 1rem;
-          margin-right: .2rem;
+          width: 10rem;
+          height: 10rem;
+          margin-right: 2rem;
         }
       }
 
     }
 
     .item {
-      padding: 0 2rem;
-      font-size: 1.4rem;
-      height: 5rem;
+      padding: 0 20rem;
+      font-size: 14rem;
+      height: 50rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -146,27 +146,27 @@ export default {
       text-align: center;
 
       .title {
-        margin-top: 6rem;
-        font-size: 1.8rem;
+        margin-top: 60rem;
+        font-size: 18rem;
       }
 
       .sub-title {
         color: @second-text-color;
-        margin-top: 2rem;
-        font-size: 1.4rem;
+        margin-top: 20rem;
+        font-size: 14rem;
       }
 
       img {
-        margin-top: 6rem;
-        height: 10rem;
+        margin-top: 60rem;
+        height: 100rem;
         border-radius: 50%;
       }
 
       .btn {
-        margin-top: 15rem;
+        margin-top: 150rem;
         display: inline-block;
         background: @second-btn-color;
-        padding: 1.5rem 4rem;
+        padding: 15rem 40rem;
         border-radius: 2px;
       }
     }

src/pages/me/userinfo/DeclareSchool.vue

@@ -69,7 +69,7 @@ export default {
 
 
   .content {
-    padding: 7rem 2rem 0 2rem;
+    padding: 70rem 20rem 0 20rem;
 
     .row {
       display: flex;
@@ -77,13 +77,13 @@ export default {
 
       .label {
         color: white;
-        font-size: 1.6rem;
-        margin-right: 3rem;
+        font-size: 16rem;
+        margin-right: 30rem;
       }
 
       input {
         flex: 1;
-        height: 4rem;
+        height: 40rem;
         background: transparent;
         outline: none;
         border-top: none;
@@ -101,19 +101,19 @@ export default {
 
       .label {
         color: white;
-        font-size: 1.6rem;
-        margin-right: 3rem;
+        font-size: 16rem;
+        margin-right: 30rem;
       }
 
       .right {
-        padding: 1.2rem 0;
+        padding: 12rem 0;
         display: flex;
         align-items: center;
         color: @second-text-color;
 
         img {
           margin-left: 5px;
-          width: 1.2rem;
+          width: 12rem;
         }
       }
 
@@ -121,20 +121,20 @@ export default {
     }
 
     .notice {
-      margin-top: 2rem;
+      margin-top: 20rem;
       color: @second-text-color;
     }
 
     .btn {
       position: fixed;
-      bottom: 2rem;
-      left: 2rem;
-      right: 2rem;
+      bottom: 20rem;
+      left: 20rem;
+      right: 20rem;
       color: white;
-      font-size: 1.6rem;
+      font-size: 16rem;
       background: @primary-btn-color;
       text-align: center;
-      padding: 1rem 0;
+      padding: 10rem 0;
       border-radius: 2px;
     }
   }

src/pages/me/userinfo/DisplayType.vue

@@ -63,7 +63,7 @@ export default {
   color: white;
 
   .content {
-    padding-top: 6rem;
+    padding-top: 60rem;
   }
 
 }

src/pages/me/userinfo/EditUserInfo.vue

@@ -169,7 +169,7 @@ export default {
   bottom: 0;
   top: 0;
   overflow: auto;
-  font-size: 1.4rem;
+  font-size: 14rem;
 }
 
 .title {
@@ -201,16 +201,16 @@ export default {
 
   .download {
     position: absolute;
-    bottom: 2rem;
-    right: 2rem;
-    padding: .3rem;
+    bottom: 20rem;
+    right: 20rem;
+    padding: 3rem;
     background: @second-btn-color-tran;
-    width: 2rem;
+    width: 20rem;
   }
 }
 
 .userinfo {
-  padding-top: 6rem;
+  padding-top: 60rem;
   color: white;
 
   .change-avatar {
@@ -218,15 +218,15 @@ export default {
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    margin: 3rem 0;
-    @avatar-width: 8rem;
+    margin: 30rem 0;
+    @avatar-width: 80rem;
 
     .avatar-ctn {
       position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
-      margin-bottom: 1rem;
+      margin-bottom: 10rem;
 
       width: @avatar-width;
       height: @avatar-width;
@@ -240,7 +240,7 @@ export default {
       }
 
       .change {
-        width: 2.8rem;
+        width: 28rem;
         z-index: 9;
         position: relative;
       }
@@ -265,13 +265,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 {

src/pages/me/userinfo/EditUserInfoItem.vue

@@ -27,7 +27,7 @@
       </div>
       <div class="l-row" v-if="type === 2">
         <div class="notice">我的抖音号</div>
-        <div class="input-ctn" style="margin-bottom: 1rem;">
+        <div class="input-ctn" style="margin-bottom: 10rem;">
           <input type="text" v-model="localUserinfo.unique_id">
           <img
               v-if="localUserinfo.unique_id" style="transform: scale(2)"
@@ -122,11 +122,11 @@ export default {
   }
 
   .content {
-    padding: 2rem;
-    padding-top: 7rem;
+    padding: 20rem;
+    padding-top: 70rem;
 
     .notice, .num {
-      font-size: 1.2rem;
+      font-size: 12rem;
       color: @second-text-color;
     }
 
@@ -137,9 +137,9 @@ export default {
       align-items: center;
 
       input {
-        margin: .5rem 0;
+        margin: 5rem 0;
         color: white;
-        height: 3rem;
+        height: 30rem;
         width: 100%;
         outline: none;
         border: none;
@@ -153,17 +153,17 @@ export default {
       .close {
         position: absolute;
         right: 0;
-        top: 1.5rem;
-        width: 1rem;
+        top: 15rem;
+        width: 10rem;
       }
     }
 
     .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;
 
 

src/pages/me/我的动态.vue

@@ -108,7 +108,7 @@ export default {
   color: #b8b9c1;
 
   header {
-    font-size: 1.5rem;
+    font-size: 15rem;
     height: 50px;
     display: flex;
     justify-content: center;