diff --git a/package.json b/package.json
index 52aaf81..af85f78 100644
--- a/package.json
+++ b/package.json
@@ -28,9 +28,9 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^7.0.0",
-    "mobile-select": "^1.1.2",
-    "node-sass": "^4.9.3",
-    "sass-loader": "^7.1.0"
+    "less": "^4.1.1",
+    "less-loader": "^7.0.0",
+    "mobile-select": "^1.1.2"
   },
   "eslintConfig": {
     "root": false,
diff --git a/src/App.vue b/src/App.vue
index 1197922..4417fdd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -87,7 +87,7 @@ export default {
   },
 }
 </script>
-<style lang="scss">
+<style lang="less">
 
 .base-slide-item {
   min-width: 100vw;
@@ -136,5 +136,4 @@ export default {
 .fade-leave-to {
   opacity: 0;
 }
-
 </style>
diff --git a/src/assets/scss/anim.scss b/src/assets/scss/anim.less
similarity index 100%
rename from src/assets/scss/anim.scss
rename to src/assets/scss/anim.less
diff --git a/src/assets/scss/color.less b/src/assets/scss/color.less
new file mode 100644
index 0000000..8b77e69
--- /dev/null
+++ b/src/assets/scss/color.less
@@ -0,0 +1,14 @@
+@main-bg: rgb(22, 26, 37);
+@active-main-bg: rgb(31, 37, 52);
+@second-text-color: rgb(143, 143, 158);
+@second-btn-color: rgb(58, 58, 70);
+@second-btn-color-tran: rgba(58, 58, 70, .4);
+@line-color: rgb(37, 45, 66);
+
+
+@primary-btn-color: rgb(252, 47, 86);
+@disable-primary-btn-color: rgba(252, 47, 86, .5);
+
+.second-text-color {
+  color: @second-text-color;
+}
diff --git a/src/assets/scss/color.scss b/src/assets/scss/color.scss
deleted file mode 100644
index 797a180..0000000
--- a/src/assets/scss/color.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-$main-bg: rgb(22, 26, 37);
-$active-main-bg: rgb(31, 37, 52);
-$second-text-color: rgb(143, 143, 158);
-$second-btn-color: rgb(58, 58, 70);
-$second-btn-color-tran: rgba(58, 58, 70, .4);
-$line-color: rgb(37, 45, 66);
-
-
-$primary-btn-color: rgb(252, 47, 86);
-$disable-primary-btn-color: rgba(252, 47, 86, .5);
-
-.second-text-color {
-  color: $second-text-color;
-}
diff --git a/src/assets/scss/custom.scss b/src/assets/scss/custom.less
similarity index 79%
rename from src/assets/scss/custom.scss
rename to src/assets/scss/custom.less
index 0000c93..1c6f2dc 100644
--- a/src/assets/scss/custom.scss
+++ b/src/assets/scss/custom.less
@@ -26,7 +26,7 @@
 
   &.no-active {
     &:active {
-      background: $main-bg;
+      background: @main-bg;
     }
   }
 
@@ -35,11 +35,11 @@
   }
 
   &.border {
-    border-bottom: 1px solid $line-color;
+    border-bottom: 1px solid @line-color;
   }
 
   &:active {
-    background: $active-main-bg;
+    background: @active-main-bg;
   }
 
   .left {
@@ -58,7 +58,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    color: $second-text-color;
+    color: @second-text-color;
 
     img {
       margin-left: .5rem;
@@ -77,21 +77,21 @@
   font-size: 1.4rem;
 
   &.primary {
-    background: $primary-btn-color;
+    background: @primary-btn-color;
 
     &:active {
-      background: $disable-primary-btn-color;
+      background: @disable-primary-btn-color;
     }
   }
 
   &.no-active {
     &:active {
       &.primary {
-        background: $primary-btn-color;
+        background: @primary-btn-color;
       }
 
       &.dark {
-        background: $second-btn-color;
+        background: @second-btn-color;
       }
 
       &.white {
@@ -113,10 +113,10 @@
   }
 
   &.dark {
-    background: $second-btn-color;
+    background: @second-btn-color;
 
     &:active {
-      background: $second-btn-color-tran;
+      background: @second-btn-color-tran;
     }
   }
 
@@ -134,7 +134,7 @@ p {
 
 .line {
   height: 1px;
-  background: $line-color;
+  background: @line-color;
   width: 100%;
 }
 
diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.less
similarity index 94%
rename from src/assets/scss/index.scss
rename to src/assets/scss/index.less
index f0ad56f..84d901d 100644
--- a/src/assets/scss/index.scss
+++ b/src/assets/scss/index.less
@@ -15,7 +15,7 @@ html, body {
   width: 100%;
   height: 100%;
   //background: #2e3244;
-  background: $main-bg;
+  background: @main-bg;
   font-size: 62.5%;
   //letter-spacing: .11rem;
   margin: 0;
diff --git a/src/assets/scss/layout.scss b/src/assets/scss/layout.less
similarity index 100%
rename from src/assets/scss/layout.scss
rename to src/assets/scss/layout.less
diff --git a/src/assets/scss/utils.less b/src/assets/scss/utils.less
new file mode 100644
index 0000000..b72ef5e
--- /dev/null
+++ b/src/assets/scss/utils.less
@@ -0,0 +1,140 @@
+@use "sass:math";
+
+
+///*
+//
+//width
+//
+//*/
+//$width: 500;
+//@while $width >= 0 {
+//  .w#{$width}p {
+//    width: #{$width}px !important;
+//  }
+//  $width: $width - 10;
+//}
+//
+//
+//$width: 100;
+//@while $width >= 0 {
+//  .w#{$width} {
+//    //width: math.percentage($width / 100) !important;
+//  }
+//  $width: $width - 1;
+//}
+//
+///*
+//
+//$height
+//
+//*/
+//$height: 500;
+//@while $height >= 0 {
+//  .h#{$height}p {
+//    height: #{$height}px !important;
+//  }
+//  $height: $height - 10;
+//}
+//
+//
+//$height: 100;
+//@while $height >= 0 {
+//  .h#{$height} {
+//    //height: math.percentage($height / 100) !important;
+//  }
+//  $height: $height - 1;
+//}
+//
+
+/*
+
+margin
+
+*/
+
+
+.ml(5);
+.ml(@n, @i: 1) when (@i =< @n) {
+  .ml@{i}r {
+    margin-left: (1rem * @i) !important;
+  }
+  .ml(@n, (@i + 1));
+}
+
+.mr(5);
+.mr(@n, @i: 1) when (@i =< @n) {
+  .mr@{i}r {
+    margin-left: (1rem * @i) !important;
+  }
+  .mr(@n, (@i + 1));
+}
+
+.mt(5);
+.mt(@n, @i: 1) when (@i =< @n) {
+  .mt@{i}r {
+    margin-left: (1rem * @i) !important;
+  }
+  .mt(@n, (@i + 1));
+}
+
+.mb(5);
+.mb(@n, @i: 1) when (@i =< @n) {
+  .mb@{i}r {
+    margin-left: (1rem * @i) !important;
+  }
+  .mb(@n, (@i + 1));
+}
+
+
+/*
+padding
+*/
+
+
+.pb(5);
+.pb(@n, @i: 1) when (@i =< @n) {
+  .pb@{i}r {
+    margin-left: (1rem * @i) !important;
+  }
+  .pb(@n, (@i + 1));
+}
+
+.pt(5);
+.pt(@n, @i: 1) when (@i =< @n) {
+  .pt@{i}r {
+    margin-left: (1rem * @i) !important;
+  }
+  .pt(@n, (@i + 1));
+}
+
+.pl(5);
+.pl(@n, @i: 1) when (@i =< @n) {
+  .pl@{i}r {
+    margin-left: (1rem * @i) !important;
+  }
+  .pl(@n, (@i + 1));
+}
+
+.pr(5);
+.pr(@n, @i: 1) when (@i =< @n) {
+  .pr@{i}r {
+    margin-left: (1rem * @i) !important;
+  }
+  .pr(@n, (@i + 1));
+}
+
+
+/*
+
+font
+
+*/
+
+.f(40);
+.f(@n, @i: 10) when (@i =< @n) {
+  .f@{i} {
+    margin-left: (1px * @i) !important;
+  }
+  .f(@n, (@i + 1));
+}
+
diff --git a/src/assets/scss/utils.scss b/src/assets/scss/utils.scss
deleted file mode 100644
index fa258af..0000000
--- a/src/assets/scss/utils.scss
+++ /dev/null
@@ -1,157 +0,0 @@
-@use "sass:math";
-
-
-///*
-//
-//width
-//
-//*/
-//$width: 500;
-//@while $width >= 0 {
-//  .w#{$width}p {
-//    width: #{$width}px !important;
-//  }
-//  $width: $width - 10;
-//}
-//
-//
-//$width: 100;
-//@while $width >= 0 {
-//  .w#{$width} {
-//    //width: math.percentage($width / 100) !important;
-//  }
-//  $width: $width - 1;
-//}
-//
-///*
-//
-//$height
-//
-//*/
-//$height: 500;
-//@while $height >= 0 {
-//  .h#{$height}p {
-//    height: #{$height}px !important;
-//  }
-//  $height: $height - 10;
-//}
-//
-//
-//$height: 100;
-//@while $height >= 0 {
-//  .h#{$height} {
-//    //height: math.percentage($height / 100) !important;
-//  }
-//  $height: $height - 1;
-//}
-//
-
-/*
-
-margin
-
-*/
-$margin: 5;
-
-@while $margin >= 0 {
-  .ml#{$margin}r {
-    margin-left: #{$margin}rem !important;
-  }
-  $margin: $margin - 1;
-}
-
-$margin: 5;
-@while $margin >= 0 {
-  .mr#{$margin}r {
-    margin-right: #{$margin}rem !important;
-  }
-  $margin: $margin - 1;
-}
-
-$margin: 5;
-@while $margin >=0 {
-  .mt#{$margin}r {
-    margin-top: #{$margin}rem !important;
-  }
-  $margin: $margin - 1;
-}
-
-$margin: 5;
-@while $margin >= 0 {
-  .mb#{$margin}r {
-    margin-bottom: #{$margin}rem !important;
-  }
-  $margin: $margin - 1;
-}
-
-$margin: 5;
-@while $margin >= 0 {
-  .m#{$margin}r {
-    margin: #{$margin}rem !important;
-  }
-  $margin: $margin - 1;
-}
-
-
-/*
-
-padding
-
-*/
-
-
-$padding: 5;
-@while $padding >= 0 {
-  .pl#{$padding}r {
-    padding-left: #{$padding}rem !important;
-  }
-  $padding: $padding - 1;
-}
-
-$padding: 5;
-@while $padding >= 0 {
-  .pr#{$padding}r {
-    padding-right: #{$padding}rem !important;
-  }
-  $padding: $padding - 1;
-}
-
-$padding: 5;
-@while $padding >= 0 {
-  .pt#{$padding}r {
-    padding-top: #{$padding}rem !important;
-  }
-  $padding: $padding - 1;
-}
-
-$padding: 5;
-@while $padding >= 0 {
-  .pb#{$padding}r {
-    padding-bottom: #{$padding}rem !important;
-  }
-  $padding: $padding - 1;
-}
-
-$padding: 5;
-@while $padding >= 0 {
-  .p#{$padding}r {
-    padding: #{$padding}rem !important;
-  }
-  $padding: $padding - 1;
-}
-
-
-/*
-
-font
-
-*/
-
-$font: 40;
-@while $font >=10 {
-  .f#{$font} {
-    font-size: #{$font}px !important;
-  }
-  $font: $font - 1;
-}
-
diff --git a/src/assets/scss/variables.less b/src/assets/scss/variables.less
new file mode 100644
index 0000000..35ca1d5
--- /dev/null
+++ b/src/assets/scss/variables.less
@@ -0,0 +1,2 @@
+@footer-height: 6rem;
+@header-height: 6rem;
\ No newline at end of file
diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss
deleted file mode 100644
index 3063082..0000000
--- a/src/assets/scss/variables.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$footer-height: 6rem;
-$header-height: 6rem;
\ No newline at end of file
diff --git a/src/components/Back.vue b/src/components/Back.vue
index 302ff30..c80f8c3 100644
--- a/src/components/Back.vue
+++ b/src/components/Back.vue
@@ -37,7 +37,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 img {
   width: 2rem;
 }
diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index ad8c354..7594592 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -55,7 +55,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../assets/scss/index";
 
 .button {
@@ -85,21 +85,21 @@ export default {
   }
 
   &.primary {
-    background: $primary-btn-color;
+    background: @primary-btn-color;
 
     &:active {
-      background: $disable-primary-btn-color;
+      background: @disable-primary-btn-color;
     }
   }
 
   &.no-active {
     &:active {
       &.primary {
-        background: $primary-btn-color;
+        background: @primary-btn-color;
       }
 
       &.dark {
-        background: $second-btn-color;
+        background: @second-btn-color;
       }
 
       &.white {
@@ -122,10 +122,10 @@ export default {
   }
 
   &.dark {
-    background: $second-btn-color;
+    background: @second-btn-color;
 
     &:active {
-      background: $second-btn-color-tran;
+      background: @second-btn-color-tran;
     }
   }
 
diff --git a/src/components/BaseHeader.vue b/src/components/BaseHeader.vue
index d0dd41c..1825bd4 100644
--- a/src/components/BaseHeader.vue
+++ b/src/components/BaseHeader.vue
@@ -53,7 +53,7 @@ export default {
 }
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="less">
 @import "../assets/scss/index";
 
 #BaseHeader {
@@ -67,7 +67,7 @@ export default {
   }
 
   &.dark {
-    background: $main-bg;
+    background: @main-bg;
     color: white;
   }
 
diff --git a/src/components/Check.vue b/src/components/Check.vue
index 7f7e319..c663dd7 100644
--- a/src/components/Check.vue
+++ b/src/components/Check.vue
@@ -28,7 +28,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../assets/scss/index";
 
 .Check {
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index d6d0216..da198c3 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -61,7 +61,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 
 .comment {
   position: fixed;
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 5ee87d2..7c605ca 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -66,7 +66,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 
 .footer {
   font-size: 1.5rem;
@@ -105,10 +105,10 @@ export default {
     }
 
     .add-ctn {
-      $height: 2.7rem;
-      $width: 4rem;
-      height: $height;
-      width: $width;
+      @height: 2.7rem;
+      @width: 4rem;
+      height: @height;
+      width: @width;
       background: linear-gradient(to right, #59dcdf, #ff5f75);
       border-radius: .5rem;
       box-sizing: border-box;
diff --git a/src/components/Indicator.vue b/src/components/Indicator.vue
index 6555379..0700905 100644
--- a/src/components/Indicator.vue
+++ b/src/components/Indicator.vue
@@ -95,7 +95,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../assets/scss/index";
 
 .indicator-ctn {
@@ -106,7 +106,7 @@ export default {
   left: 0;
   right: 0;
   z-index: 1;
-  background: $main-bg;
+  background: @main-bg;
 
   .tabs {
     display: flex;
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
index 5b40f7b..0942cc2 100644
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@@ -16,7 +16,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../assets/scss/index";
 
 .Loading {
@@ -52,7 +52,7 @@ export default {
   }
 
   .red {
-    background: $primary-btn-color;
+    background: @primary-btn-color;
     animation: anim-red .4s ease-in-out 0s infinite alternate;
   }
 
diff --git a/src/components/Mask.vue b/src/components/Mask.vue
index 30c62b5..1c88afc 100644
--- a/src/components/Mask.vue
+++ b/src/components/Mask.vue
@@ -15,7 +15,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 
 .Mask {
   z-index: 3;
diff --git a/src/components/NoMore.vue b/src/components/NoMore.vue
index 1f688e1..5a3ac32 100644
--- a/src/components/NoMore.vue
+++ b/src/components/NoMore.vue
@@ -15,7 +15,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../assets/scss/index";
 
 .NoMore {
@@ -24,6 +24,6 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: $second-text-color;
+  color: @second-text-color;
 }
 </style>
diff --git a/src/components/Other.vue b/src/components/Other.vue
index 368fc2f..a9e9209 100644
--- a/src/components/Other.vue
+++ b/src/components/Other.vue
@@ -121,7 +121,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 .me {
   color: white;
 
diff --git a/src/components/Posters.vue b/src/components/Posters.vue
index d730147..119c72d 100644
--- a/src/components/Posters.vue
+++ b/src/components/Posters.vue
@@ -69,7 +69,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 .posters {
   display: grid;
   grid-template-columns: 33.33vw 33.33vw 33.33vw;
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 5eee74f..bd1bc41 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -60,7 +60,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../assets/scss/color";
 
 .search-ctn {
@@ -100,7 +100,7 @@ export default {
       background: transparent;
 
       &::-webkit-input-placeholder {
-        color: $second-text-color;
+        color: @second-text-color;
       }
     }
 
diff --git a/src/components/Share.vue b/src/components/Share.vue
index f9ca4c1..3a63635 100644
--- a/src/components/Share.vue
+++ b/src/components/Share.vue
@@ -99,7 +99,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .share {
   position: fixed;
   /*top: 200px;*/
diff --git a/src/components/Video.vue b/src/components/Video.vue
index 9393af1..04c9c5b 100644
--- a/src/components/Video.vue
+++ b/src/components/Video.vue
@@ -298,7 +298,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../assets/scss/color";
 
 .fade-enter-active,
@@ -573,7 +573,7 @@ export default {
 
               .right {
                 margin: 0 10px;
-                color: $second-text-color;
+                color: @second-text-color;
 
                 .name {
                   margin-right: 10px;
diff --git a/src/components/common/Music.vue b/src/components/common/Music.vue
index 67bdbfd..5a9253a 100644
--- a/src/components/common/Music.vue
+++ b/src/components/common/Music.vue
@@ -68,7 +68,7 @@
     }
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="less">
     .Music {
         header {
             background: #454b66;
diff --git a/src/components/dialog/ConfirmDialog.vue b/src/components/dialog/ConfirmDialog.vue
index cd633fc..43b620e 100644
--- a/src/components/dialog/ConfirmDialog.vue
+++ b/src/components/dialog/ConfirmDialog.vue
@@ -67,7 +67,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 .ConfirmDialog {
@@ -105,7 +105,7 @@ export default {
         font-size: 1.3rem;
 
         &.gray {
-          color: $second-text-color;
+          color: @second-text-color;
         }
       }
     }
@@ -131,7 +131,7 @@ export default {
         border-right: 1px solid whitesmoke;
 
         &.gray {
-          color: $second-text-color;
+          color: @second-text-color;
         }
       }
 
diff --git a/src/components/dialog/FadeDialog.vue b/src/components/dialog/FadeDialog.vue
index 5448506..308db27 100644
--- a/src/components/dialog/FadeDialog.vue
+++ b/src/components/dialog/FadeDialog.vue
@@ -16,7 +16,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 .FadeDialog {
diff --git a/src/components/dialog/FromBottomDialog.vue b/src/components/dialog/FromBottomDialog.vue
index 00073ec..5893bf4 100644
--- a/src/components/dialog/FromBottomDialog.vue
+++ b/src/components/dialog/FromBottomDialog.vue
@@ -156,7 +156,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 .FromBottomDialog {
@@ -171,7 +171,7 @@ export default {
   border-radius: .5rem .5rem 0 0;
 
   &.dark {
-    background: $main-bg;
+    background: @main-bg;
   }
 
   &.light {
@@ -198,10 +198,10 @@ export default {
     align-items: center;
 
     &.dark {
-      background: $main-bg;
+      background: @main-bg;
 
       .content {
-        background: $second-btn-color;
+        background: @second-btn-color;
       }
     }
 
diff --git a/src/components/dialog/NoticeDialog.vue b/src/components/dialog/NoticeDialog.vue
index 55134d7..1ab0586 100644
--- a/src/components/dialog/NoticeDialog.vue
+++ b/src/components/dialog/NoticeDialog.vue
@@ -53,7 +53,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 .NoticeDialog {
@@ -91,7 +91,7 @@ export default {
         font-size: 1.3rem;
 
         &.gray{
-          color: $second-text-color;
+          color: @second-text-color;
         }
       }
     }
diff --git a/src/components/dialog/SelectDialog.vue b/src/components/dialog/SelectDialog.vue
index 078731c..069b98e 100644
--- a/src/components/dialog/SelectDialog.vue
+++ b/src/components/dialog/SelectDialog.vue
@@ -26,7 +26,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 .SelectDialog {
   z-index: 10;
   position: absolute;
diff --git a/src/components/dialog/SimpleConfirmDialog.vue b/src/components/dialog/SimpleConfirmDialog.vue
index bc876f4..7caa765 100644
--- a/src/components/dialog/SimpleConfirmDialog.vue
+++ b/src/components/dialog/SimpleConfirmDialog.vue
@@ -33,7 +33,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 
 .SimpleConfirmDialog {
   z-index: 10;
diff --git a/src/components/home/home3.vue b/src/components/home/home3.vue
index 3636f62..1cf1765 100644
--- a/src/components/home/home3.vue
+++ b/src/components/home/home3.vue
@@ -397,7 +397,7 @@ export default {
 
 }
 </script>
-<style scoped lang="scss">
+<style scoped lang="less">
 #home-index {
   position: fixed;
   width: 100%;
@@ -553,7 +553,7 @@ export default {
   }
 }
 </style>
-<style scoped lang="scss">
+<style scoped lang="less">
 
 .pause-enter-active {
   transition: all .3s ease;
diff --git a/src/components/slide/SlideColumnList.vue b/src/components/slide/SlideColumnList.vue
index c9419d2..598a3a5 100644
--- a/src/components/slide/SlideColumnList.vue
+++ b/src/components/slide/SlideColumnList.vue
@@ -271,7 +271,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 #base-slide-wrapper {
diff --git a/src/components/slide/SlideItem.vue b/src/components/slide/SlideItem.vue
index 51ce8f7..5b3ee9e 100644
--- a/src/components/slide/SlideItem.vue
+++ b/src/components/slide/SlideItem.vue
@@ -10,7 +10,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 .base-slide-item {
   min-width: 100vw;
   //min-height: 100vh;
diff --git a/src/components/slide/SlideList.vue b/src/components/slide/SlideList.vue
index c23721a..74fc0f6 100644
--- a/src/components/slide/SlideList.vue
+++ b/src/components/slide/SlideList.vue
@@ -413,7 +413,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 #base-slide-wrapper {
@@ -506,7 +506,7 @@ export default {
     left: 0;
     right: 0;
     z-index: 999;
-    background: $main-bg;
+    background: @main-bg;
 
     .tabs {
       display: flex;
diff --git a/src/components/slide/SlideRowList.vue b/src/components/slide/SlideRowList.vue
index a5e329d..859f55e 100644
--- a/src/components/slide/SlideRowList.vue
+++ b/src/components/slide/SlideRowList.vue
@@ -321,7 +321,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 #base-slide-wrapper {
diff --git a/src/main.js b/src/main.js
index 83dfb1d..c31cb6a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,7 @@
 import * as Vue from 'vue'
 import App from './App.vue'
 import mitt from 'mitt'
-import './assets/scss/index.scss'
+import './assets/scss/index.less'
 // import './mock'// 导入 mock 数据处理
 import api from './api'
 import router from "./router";
diff --git a/src/pages/home/Attention.vue b/src/pages/home/Attention.vue
index 32d8087..1384aa1 100644
--- a/src/pages/home/Attention.vue
+++ b/src/pages/home/Attention.vue
@@ -4,173 +4,175 @@
       <span @click="$nav('/country-choose')">双流</span>
       <div class="arrow"></div>
     </header>
-    <div class="scroll-wrapper"
-         ref="scroll-wrapper"
+    <div class="scroller"
+         ref="scroller"
          @touchstart="start"
          @touchmove="move"
          @touchend="end"
-         @scroll="scroll"
     >
-      <div class="header" ref="header">
-        <Loading :isFullScreen="false"></Loading>
-      </div>
-      <div class="ad" v-if="false">
-        <div class="title">超值卖场 次日达</div>
-        <div class="good-ctn">
+      <div ref="wrapper" class="wrapper">
+        <div class="header" ref="header">
+          <Loading :isFullScreen="false"></Loading>
+        </div>
+        <div class="ad" v-if="false">
+          <div class="title">超值卖场 次日达</div>
+          <div class="good-ctn">
+            <div class="left">
+              <div class="left-title">
+                <span>限量秒杀</span>
+                <div>低至0.99元</div>
+              </div>
+              <div class="goods">
+                <div class="good">
+                  <img class="good-img" src="../../assets/img/poster/1.jpg"/>
+                  <div class="name">每日坚果5包</div>
+                  <div class="price">￥0.99</div>
+                </div>
+                <div class="good">
+                  <img class="good-img" src="../../assets/img/poster/1.jpg"/>
+                  <div class="name">每日坚果5包</div>
+                  <div class="price">￥0.99</div>
+                </div>
+              </div>
+            </div>
+            <div class="right">
+              <div class="goods">
+                <div class="good">
+                  <div class="notice">
+                    <div class="ad-name">低价疯抢</div>
+                    <div class="ad-desc">统一方便面</div>
+                  </div>
+                  <img class="good-img" src="../../assets/img/poster/1.jpg"/>
+                </div>
+                <div class="good">
+                  <div class="notice">
+                    <div class="ad-name">低价疯抢</div>
+                    <div class="ad-desc">统一方便面</div>
+                  </div>
+                  <img class="good-img" src="../../assets/img/poster/1.jpg"/>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div ref="content" class="content">
           <div class="left">
-            <div class="left-title">
-              <span>限量秒杀</span>
-              <div>低至0.99元</div>
-            </div>
-            <div class="goods">
-              <div class="good">
-                <img class="good-img" src="../../assets/img/poster/1.jpg"/>
-                <div class="name">每日坚果5包</div>
-                <div class="price">￥0.99</div>
-              </div>
-              <div class="good">
-                <img class="good-img" src="../../assets/img/poster/1.jpg"/>
-                <div class="name">每日坚果5包</div>
-                <div class="price">￥0.99</div>
-              </div>
+            <div class="item" v-for="item in left">
+              <template v-if="item.type === 0">
+                <div class="wrapper">
+                  <img class="poster" :src="item.src"/>
+                  <img :src="item.author" alt="" class="author">
+                </div>
+                <div class="location" v-if="item.address">
+                  <div class="top">
+                    <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
+                    <div class="name">{{ item.address.name }}</div>
+                  </div>
+                  <div class="bottom">
+                    <div class="type">{{ item.address.type }}</div>
+                    <div class="line"></div>
+                    <div class="other">{{ item.address.number }}人想去</div>
+                  </div>
+                </div>
+              </template>
+              <template v-if="item.type === 1">
+                <div class="wrapper" style="height: 49vw;overflow:hidden;">
+                  <img class="poster" :src="item.src"/>
+                </div>
+              </template>
+              <template v-if="item.type === 2">
+                <div class="ranking-list">
+                  <div class="desc">
+                    <div class="top">
+                      <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
+                      <div class="name">{{ item.desc }}</div>
+                    </div>
+                    <div class="bottom">
+                      基于6亿抖音用户真实数据...
+                    </div>
+                  </div>
+                  <div class="ads">
+                    <div class="ad" v-for="(ad,index) in item.ads">
+                      <div class="left">
+                        <img class="ad-logo" :src="ad.src"/>
+                      </div>
+                      <div class="right">
+                        <div class="rank">TOP{{ index + 1 }}</div>
+                        <div class="name">{{ ad.name }}</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+              <template v-if="item.type === 3">
+                <div class="wrapper">
+                  <img class="poster" :src="item.src"/>
+                  <img :src="item.author" alt="" class="author">
+                  <div class="live">直播中</div>
+                </div>
+              </template>
             </div>
+
           </div>
           <div class="right">
-            <div class="goods">
-              <div class="good">
-                <div class="notice">
-                  <div class="ad-name">低价疯抢</div>
-                  <div class="ad-desc">统一方便面</div>
+            <div class="item" v-for="item in right">
+              <template v-if="item.type === 0">
+                <div class="wrapper">
+                  <img class="poster" :src="item.src"/>
+                  <img :src="item.author" alt="" class="author">
                 </div>
-                <img class="good-img" src="../../assets/img/poster/1.jpg"/>
-              </div>
-              <div class="good">
-                <div class="notice">
-                  <div class="ad-name">低价疯抢</div>
-                  <div class="ad-desc">统一方便面</div>
+                <div class="location" v-if="item.address">
+                  <div class="top">
+                    <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
+                    <div class="name">{{ item.address.name }}</div>
+                  </div>
+                  <div class="bottom">
+                    <div class="type">{{ item.address.type }}</div>
+                    <div class="line"></div>
+                    <div class="other">{{ item.address.number }}人想去</div>
+                  </div>
                 </div>
-                <img class="good-img" src="../../assets/img/poster/1.jpg"/>
-              </div>
+              </template>
+              <template v-if="item.type === 1">
+                <div class="wrapper" style="height: 49vw;overflow:hidden;">
+                  <img class="poster" :src="item.src"/>
+                </div>
+              </template>
+              <template v-if="item.type === 2">
+                <div class="ranking-list">
+                  <div class="desc">
+                    <div class="top">
+                      <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
+                      <div class="name">{{ item.desc }}</div>
+                    </div>
+                    <div class="bottom">
+                      基于6亿抖音用户真实数据...
+                    </div>
+                  </div>
+                  <div class="ads">
+                    <div class="ad" v-for="(ad,index) in item.ads">
+                      <div class="left">
+                        <img class="ad-logo" :src="ad.src"/>
+                      </div>
+                      <div class="right">
+                        <div class="rank">TOP{{ index + 1 }}</div>
+                        <div class="name">{{ ad.name }}</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+              <template v-if="item.type === 3">
+                <div class="wrapper">
+                  <img class="poster" :src="item.src"/>
+                  <img :src="item.author" alt="" class="author">
+                  <div class="live">直播中</div>
+                </div>
+              </template>
             </div>
           </div>
         </div>
-      </div>
-      <div ref="content" class="content">
-        <div class="left">
-          <div class="item" v-for="item in left">
-            <template v-if="item.type === 0">
-              <div class="wrapper">
-                <img class="poster" :src="item.src"/>
-                <img :src="item.author" alt="" class="author">
-              </div>
-              <div class="location" v-if="item.address">
-                <div class="top">
-                  <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
-                  <div class="name">{{ item.address.name }}</div>
-                </div>
-                <div class="bottom">
-                  <div class="type">{{ item.address.type }}</div>
-                  <div class="line"></div>
-                  <div class="other">{{ item.address.number }}人想去</div>
-                </div>
-              </div>
-            </template>
-            <template v-if="item.type === 1">
-              <div class="wrapper" style="height: 49vw;overflow:hidden;">
-                <img class="poster" :src="item.src"/>
-              </div>
-            </template>
-            <template v-if="item.type === 2">
-              <div class="ranking-list">
-                <div class="desc">
-                  <div class="top">
-                    <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
-                    <div class="name">{{ item.desc }}</div>
-                  </div>
-                  <div class="bottom">
-                    基于6亿抖音用户真实数据...
-                  </div>
-                </div>
-                <div class="ads">
-                  <div class="ad" v-for="(ad,index) in item.ads">
-                    <div class="left">
-                      <img class="ad-logo" :src="ad.src"/>
-                    </div>
-                    <div class="right">
-                      <div class="rank">TOP{{ index + 1 }}</div>
-                      <div class="name">{{ ad.name }}</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </template>
-            <template v-if="item.type === 3">
-              <div class="wrapper">
-                <img class="poster" :src="item.src"/>
-                <img :src="item.author" alt="" class="author">
-                <div class="live">直播中</div>
-              </div>
-            </template>
-          </div>
-
-        </div>
-        <div class="right">
-          <div class="item" v-for="item in right">
-            <template v-if="item.type === 0">
-              <div class="wrapper">
-                <img class="poster" :src="item.src"/>
-                <img :src="item.author" alt="" class="author">
-              </div>
-              <div class="location" v-if="item.address">
-                <div class="top">
-                  <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
-                  <div class="name">{{ item.address.name }}</div>
-                </div>
-                <div class="bottom">
-                  <div class="type">{{ item.address.type }}</div>
-                  <div class="line"></div>
-                  <div class="other">{{ item.address.number }}人想去</div>
-                </div>
-              </div>
-            </template>
-            <template v-if="item.type === 1">
-              <div class="wrapper" style="height: 49vw;overflow:hidden;">
-                <img class="poster" :src="item.src"/>
-              </div>
-            </template>
-            <template v-if="item.type === 2">
-              <div class="ranking-list">
-                <div class="desc">
-                  <div class="top">
-                    <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
-                    <div class="name">{{ item.desc }}</div>
-                  </div>
-                  <div class="bottom">
-                    基于6亿抖音用户真实数据...
-                  </div>
-                </div>
-                <div class="ads">
-                  <div class="ad" v-for="(ad,index) in item.ads">
-                    <div class="left">
-                      <img class="ad-logo" :src="ad.src"/>
-                    </div>
-                    <div class="right">
-                      <div class="rank">TOP{{ index + 1 }}</div>
-                      <div class="name">{{ ad.name }}</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </template>
-            <template v-if="item.type === 3">
-              <div class="wrapper">
-                <img class="poster" :src="item.src"/>
-                <img :src="item.author" alt="" class="author">
-                <div class="live">直播中</div>
-              </div>
-            </template>
-          </div>
-        </div>
+        <Loading :isFullScreen="false"></Loading>
       </div>
     </div>
     <Footer v-bind:init-tab="2" style="position: fixed;"/>
@@ -267,26 +269,28 @@ export default {
   },
   methods: {
     start(e) {
-      let wrapper = this.$refs["scroll-wrapper"]
+      let wrapper = this.$refs["wrapper"]
       wrapper.style.transition = `none`
       this.startLocationY = e.touches[0].pageY
     },
     move(e) {
-      let wrapper = this.$refs["scroll-wrapper"]
+      let scroller = this.$refs["scroller"]
+      let wrapper = this.$refs["wrapper"]
       let header = this.$refs["header"]
-      this.isTop = wrapper.scrollTop === 0
-      console.log('scrollTop', wrapper.scrollTop)
+      this.isTop = scroller.scrollTop === 0
+      // console.log('scrollTop', scroller.scrollTop)
       let touchMoveDistance = e.touches[0].pageY - this.startLocationY
       console.log('touchMoveDistance', touchMoveDistance)
-
+      //
+      let headerHeight = 80
       if (this.isTop) {
         // this.$setCss(wrapper,'tr')
         if (touchMoveDistance > 0) {
           let transformY = this.$getTransform(header)
-          header.style.transform = `translate3d(0,${touchMoveDistance > 40 ? 40 : touchMoveDistance}px,0)`
-          wrapper.style.transform = `translate3d(0,${touchMoveDistance > 40 ? 40 : touchMoveDistance}px,0)`
-        }else {
-          wrapper.style.transform = `translate3d(0,${touchMoveDistance < -40 ? -40 : touchMoveDistance}px,0)`
+          // header.style.transform = `translate3d(0,${touchMoveDistance > 40 ? 40 : touchMoveDistance}px,0)`
+          wrapper.style.transform = `translate3d(0,${touchMoveDistance > headerHeight ? headerHeight : touchMoveDistance}px,0)`
+        } else {
+          wrapper.style.transform = `translate3d(0,${touchMoveDistance < -headerHeight ? -headerHeight : touchMoveDistance}px,0)`
         }
       } else {
         // wrapper.style.height = '100vh'
@@ -295,7 +299,7 @@ export default {
       console.log('isTop', this.isTop)
     },
     end() {
-      let wrapper = this.$refs["scroll-wrapper"]
+      let wrapper = this.$refs["wrapper"]
       // wrapper.style.transition = `all .3s`
       // wrapper.style.transform = `translate3d(0,0,0)`
     },
@@ -308,15 +312,15 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 #attention {
   /*background: rgb(22，24，34);*/
   /*background: #161822;*/
   //抖音原色，感觉很暗
-  $douyin-bg: #2e3244;
-  background: $douyin-bg;
+  @douyin-bg: #2e3244;
+  background: @douyin-bg;
   color: #b8b9c1;
   position: fixed;
   left: 0;
@@ -325,17 +329,22 @@ export default {
   top: 0;
   //overflow: auto;
 
-  .scroll-wrapper {
+  .scroller {
     height: calc(100vh - 10rem);
     position: relative;
     overflow: scroll;
+    background: black;
 
-    .header {
+    > .wrapper {
       position: absolute;
-      top: -4rem;
+      top: -8rem;
       left: 0;
       width: 100%;
       z-index: 2;
+
+      > .header {
+        height: 8rem;
+      }
     }
   }
 
@@ -346,7 +355,7 @@ export default {
     justify-content: center;
     align-items: center;
 
-    $arrow-width: 5px;
+    @arrow-width: 5px;
 
     .arrow {
       position: relative;
@@ -354,10 +363,10 @@ export default {
       left: 5px;
       width: 0;
       height: 0;
-      border-top: $arrow-width solid white;
-      border-right: $arrow-width solid transparent;
-      border-bottom: $arrow-width solid transparent;
-      border-left: $arrow-width solid transparent;
+      border-top: @arrow-width solid white;
+      border-right: @arrow-width solid transparent;
+      border-bottom: @arrow-width solid transparent;
+      border-left: @arrow-width solid transparent;
     }
   }
 
@@ -519,13 +528,13 @@ export default {
           top: 1rem;
           left: 1rem;
           color: white;
-          background: $primary-btn-color;
+          background: @primary-btn-color;
         }
       }
 
       .location {
         padding: 8px 10px 10px 10px;
-        background: $douyin-bg;
+        background: @douyin-bg;
 
         .top, .bottom {
           font-size: 1.4rem;
@@ -558,7 +567,7 @@ export default {
 
       .ranking-list {
         padding: 2rem 1rem;
-        background: $douyin-bg;
+        background: @douyin-bg;
 
         .desc {
           .top {
@@ -582,7 +591,7 @@ export default {
           font-size: 1.2rem;
 
           .ad {
-            background: $second-btn-color;
+            background: @second-btn-color;
             display: flex;
             margin-top: 1rem;
 
@@ -601,7 +610,7 @@ export default {
               justify-content: center;
 
               .rank {
-                color: $second-text-color;
+                color: @second-text-color;
                 margin-bottom: .2rem;
               }
             }
diff --git a/src/pages/home/Attention2.vue b/src/pages/home/Attention2.vue
new file mode 100644
index 0000000..29a79f5
--- /dev/null
+++ b/src/pages/home/Attention2.vue
@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite">
+      <ul>
+        <li v-for="(item,index) in 50" >{{item.name}}</li>
+        <li v-for="(item,index) in 5" >{{item.name}}</li>
+      </ul>
+    </v-scroll>
+  </div>
+</template>
+<script>
+import Scroll from './testt';
+
+export default{
+  data () {
+    return {
+      counter : 1, //默认已经显示出15条数据 count等于一是让从16条开始加载
+      num : 15,  // 一次显示多少条
+      pageStart : 0, // 开始页数
+      pageEnd : 0, // 结束页数
+      listdata: [], // 下拉更新数据存放数组
+      downdata: []  // 上拉更多的数据存放数组
+    }
+  },
+  mounted : function(){
+    this.getList();
+  },
+  methods: {
+    getList(){
+      let vm = this;
+      // vm.$http.get('https://api.github.com/repos/typecho-fans/plugins/contents/').then((response) => {
+      //   vm.listdata = response.data.slice(0,15);
+      // }, (response) => {
+      //   console.log('error');
+      // });
+    },
+    onRefresh(done) {
+      done()
+      return  console.log('onRefresh')
+      this.getList();
+      done() // call done
+
+    },
+    onInfinite(done) {
+      return  console.log('onInfinite')
+      let vm = this;
+      vm.$http.get('https://api.github.com/repos/typecho-fans/plugins/contents/').then((response) => {
+        vm.counter++;
+        vm.pageEnd = vm.num * vm.counter;
+        vm.pageStart = vm.pageEnd - vm.num;
+        let arr = response.data;
+        let i = vm.pageStart;
+        let end = vm.pageEnd;
+        for(; i<end; i++){
+          let obj ={};
+          obj["name"] = arr[i].name;
+          vm.downdata.push(obj);
+          if((i + 1) >= response.data.length){
+            this.$el.querySelector('.load-more').style.display = 'none';
+            return;
+          }
+        }
+        done() // call done
+      }, (response) => {
+        console.log('error');
+      });
+    }
+  },
+  components : {
+    'v-scroll': Scroll
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/pages/home/Index 布局完成.vue b/src/pages/home/Index 布局完成.vue
index e8400e2..fbae2c0 100644
--- a/src/pages/home/Index 布局完成.vue	
+++ b/src/pages/home/Index 布局完成.vue	
@@ -587,7 +587,7 @@ export default {
 
 }
 </script>
-<style scoped lang="scss">
+<style scoped lang="less">
 #home-index {
   height: 100%;
   width: 100%;
diff --git a/src/pages/home/Index.vue b/src/pages/home/Index.vue
index c64d0b9..819298f 100644
--- a/src/pages/home/Index.vue
+++ b/src/pages/home/Index.vue
@@ -295,7 +295,7 @@ export default {
   },
 }
 </script>
-<style scoped lang="scss">
+<style scoped lang="less">
 #home-index {
   height: 100%;
   width: 100%;
diff --git a/src/pages/home/Index2.vue b/src/pages/home/Index2.vue
index 9eb1bb9..d944165 100644
--- a/src/pages/home/Index2.vue
+++ b/src/pages/home/Index2.vue
@@ -575,7 +575,7 @@ export default {
   }
 }
 </script>
-<style scoped lang="scss">
+<style scoped lang="less">
 #home-index {
   height: 100%;
   width: 100%;
diff --git a/src/pages/home/Publish.vue b/src/pages/home/Publish.vue
index becffad..38929ec 100644
--- a/src/pages/home/Publish.vue
+++ b/src/pages/home/Publish.vue
@@ -84,7 +84,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 .Publish {
@@ -100,7 +100,7 @@ export default {
   .footer {
     font-size: 1.5rem;
     font-weight: bold;
-    color: $second-text-color;
+    color: @second-text-color;
 
     .base-slide-item {
       display: flex;
diff --git a/src/pages/home/Test.vue b/src/pages/home/Test.vue
index 10aacea..367f46b 100644
--- a/src/pages/home/Test.vue
+++ b/src/pages/home/Test.vue
@@ -17,7 +17,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 .Test {
diff --git a/src/pages/home/testt.vue b/src/pages/home/testt.vue
new file mode 100644
index 0000000..1567da2
--- /dev/null
+++ b/src/pages/home/testt.vue
@@ -0,0 +1,191 @@
+<template lang="html">
+  <div class="yo-scroll"
+       :class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}"
+       @touchstart="touchStart($event)"
+       @touchmove="touchMove($event)"
+       @touchend="touchEnd($event)"
+       @scroll="(onInfinite || infiniteLoading) ? onScroll($event) : undefined">
+    <section class="inner" :style="{ transform: 'translate3d(0, ' + top + 'px, 0)' }">
+      <header class="pull-refresh">
+        <slot name="pull-refresh">
+          <span class="down-tip">下拉更新</span>
+          <span class="up-tip">松开更新</span>
+          <span class="refresh-tip">更新中</span>
+        </slot>
+      </header>
+      <slot></slot>
+      <footer class="load-more">
+        <slot name="load-more">
+          <span>加载中……</span>
+        </slot>
+      </footer>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    offset: {
+      type: Number,
+      default: 40
+    },
+    enableInfinite: {
+      type: Boolean,
+      default: true
+    },
+    enableRefresh: {
+      type: Boolean,
+      default: true
+    },
+    onRefresh: {
+      type: Function,
+      default: undefined,
+      required: false
+    },
+    onInfinite: {
+      type: Function,
+      default: undefined,
+      require: false
+    }
+  },
+  data() {
+    return {
+      top: 0,
+      state: 0,
+      startY: 0,
+      touching: false,
+      infiniteLoading: false
+    }
+  },
+  methods: {
+    touchStart(e) {
+      this.startY = e.targetTouches[0].pageY
+      this.startScroll = this.$el.scrollTop || 0
+      this.touching = true
+    },
+    touchMove(e) {
+      if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) {
+        return
+      }
+      let diff = e.targetTouches[0].pageY - this.startY - this.startScroll
+      if (diff > 0) e.preventDefault()
+      this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0)
+
+      if (this.state === 2) { // in refreshing
+        return
+      }
+      if (this.top >= this.offset) {
+        this.state = 1
+      } else {
+        this.state = 0
+      }
+    },
+    touchEnd(e) {
+      if (!this.enableRefresh) return
+      this.touching = false
+      if (this.state === 2) { // in refreshing
+        this.state = 2
+        this.top = this.offset
+        return
+      }
+      if (this.top >= this.offset) { // do refresh
+        this.refresh()
+      } else { // cancel refresh
+        this.state = 0
+        this.top = 0
+      }
+    },
+    refresh() {
+      this.state = 2
+      this.top = this.offset
+      this.onRefresh(this.refreshDone)
+    },
+    refreshDone() {
+      this.state = 0
+      this.top = 0
+    },
+
+    infinite() {
+      this.infiniteLoading = true
+      this.onInfinite(this.infiniteDone)
+    },
+
+    infiniteDone() {
+      this.infiniteLoading = false
+    },
+
+    onScroll(e) {
+      if (!this.enableInfinite || this.infiniteLoading) {
+        return
+      }
+      let outerHeight = this.$el.clientHeight
+      let innerHeight = this.$el.querySelector('.inner').clientHeight
+      let scrollTop = this.$el.scrollTop
+      let ptrHeight = this.onRefresh ? this.$el.querySelector('.pull-refresh').clientHeight : 0
+      let infiniteHeight = this.$el.querySelector('.load-more').clientHeight
+      let bottom = innerHeight - outerHeight - scrollTop - ptrHeight
+      if (bottom < infiniteHeight) this.infinite()
+    }
+  }
+}
+</script>
+<style>
+.yo-scroll {
+  position: absolute;
+  top: 2.5rem;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  background-color: #ddd
+}
+
+.yo-scroll .inner {
+  position: absolute;
+  top: -2rem;
+  width: 100%;
+  transition-duration: 300ms;
+}
+
+.yo-scroll .pull-refresh {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.yo-scroll.touch .inner {
+  transition-duration: 0ms;
+}
+
+.yo-scroll.down .down-tip {
+  display: block;
+}
+
+.yo-scroll.up .up-tip {
+  display: block;
+}
+
+.yo-scroll.refresh .refresh-tip {
+  display: block;
+}
+
+.yo-scroll .down-tip,
+.yo-scroll .refresh-tip,
+.yo-scroll .up-tip {
+  display: none;
+}
+
+.yo-scroll .load-more {
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/login/Base.scss b/src/pages/login/Base.scss
index 5a1e38b..bc71912 100644
--- a/src/pages/login/Base.scss
+++ b/src/pages/login/Base.scss
@@ -19,14 +19,14 @@
 
     .sub-title {
       font-size: 1.2rem;
-      color: $second-text-color;
+      color: @second-text-color;
     }
   }
 
   .notice {
     margin-top: 1rem;
     font-size: 1.3rem;
-    color: $primary-btn-color;
+    color: @primary-btn-color;
   }
 
   .button {
diff --git a/src/pages/login/Help.vue b/src/pages/login/Help.vue
index f36137b..2d009b9 100644
--- a/src/pages/login/Help.vue
+++ b/src/pages/login/Help.vue
@@ -27,7 +27,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 .Help {
diff --git a/src/pages/login/Login.vue b/src/pages/login/Login.vue
index e8276b3..78d6285 100644
--- a/src/pages/login/Login.vue
+++ b/src/pages/login/Login.vue
@@ -94,7 +94,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 .login {
@@ -130,7 +130,7 @@ export default {
 
       .sub-title {
         font-size: 1.2rem;
-        color: $second-text-color;
+        color: @second-text-color;
       }
     }
 
diff --git a/src/pages/login/OtherLogin.vue b/src/pages/login/OtherLogin.vue
index a6c3a8e..aff26f6 100644
--- a/src/pages/login/OtherLogin.vue
+++ b/src/pages/login/OtherLogin.vue
@@ -115,7 +115,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 @import "Base.scss";
 
diff --git a/src/pages/login/PasswordLogin.vue b/src/pages/login/PasswordLogin.vue
index a1694f3..68bf541 100644
--- a/src/pages/login/PasswordLogin.vue
+++ b/src/pages/login/PasswordLogin.vue
@@ -84,7 +84,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 @import "Base.scss";
 
diff --git a/src/pages/login/RetrievePassword.vue b/src/pages/login/RetrievePassword.vue
index 6ef6289..c8cc449 100644
--- a/src/pages/login/RetrievePassword.vue
+++ b/src/pages/login/RetrievePassword.vue
@@ -128,7 +128,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 @import "Base.scss";
 
diff --git a/src/pages/login/VerificationCode.vue b/src/pages/login/VerificationCode.vue
index 3df0b95..05bee70 100644
--- a/src/pages/login/VerificationCode.vue
+++ b/src/pages/login/VerificationCode.vue
@@ -90,7 +90,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 @import "Base.scss";
 
diff --git a/src/pages/login/components/LoginInput.vue b/src/pages/login/components/LoginInput.vue
index 466d09d..c52cc16 100644
--- a/src/pages/login/components/LoginInput.vue
+++ b/src/pages/login/components/LoginInput.vue
@@ -115,7 +115,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../../assets/scss/index";
 
 .input-number {
@@ -189,7 +189,7 @@ export default {
     }
 
     .disabled {
-      color: $second-text-color;
+      color: @second-text-color;
     }
   }
 
diff --git a/src/pages/login/components/Tooltip.vue b/src/pages/login/components/Tooltip.vue
index 3135d61..ae1d4d0 100644
--- a/src/pages/login/components/Tooltip.vue
+++ b/src/pages/login/components/Tooltip.vue
@@ -25,7 +25,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../../assets/scss/index";
 
 .scale-enter-active,
diff --git a/src/pages/login/countryChoose.vue b/src/pages/login/countryChoose.vue
index 5c8ddc7..7ef735e 100644
--- a/src/pages/login/countryChoose.vue
+++ b/src/pages/login/countryChoose.vue
@@ -2432,7 +2432,7 @@ export default {
 }
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 .countryChoose {
@@ -2464,7 +2464,7 @@ export default {
       justify-content: space-between;
 
       div {
-        color: $second-text-color;
+        color: @second-text-color;
         //transition: all .3s;
         font-size: 1rem;
         padding: .1rem;
@@ -2475,7 +2475,7 @@ export default {
         width: 0;
         height: 0;
         border: .5rem solid transparent;
-        border-bottom: 1rem solid $second-text-color;
+        border-bottom: 1rem solid @second-text-color;
       }
     }
   }
@@ -2498,7 +2498,7 @@ export default {
 
     .top {
       padding-bottom: 1rem;
-      border-bottom: 1px solid $line-color;
+      border-bottom: 1px solid @line-color;
 
       .cities {
         .city {
@@ -2507,7 +2507,7 @@ export default {
           border-radius: .2rem;
           height: 4rem;
           line-height: 4rem;
-          background: $second-btn-color-tran;
+          background: @second-btn-color-tran;
           display: inline-block;
           width: 32%;
           text-align: center;
@@ -2519,7 +2519,7 @@ export default {
       //padding-right: 2.5rem;
 
       .row {
-        background: $main-bg;
+        background: @main-bg;
       }
     }
   }
diff --git a/src/pages/me/Me.vue b/src/pages/me/Me.vue
index 55c61ed..f9d56a6 100644
--- a/src/pages/me/Me.vue
+++ b/src/pages/me/Me.vue
@@ -301,7 +301,7 @@ export default {
 }
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 .fade-enter-active,
@@ -316,7 +316,7 @@ export default {
 }
 
 .Me {
-  background: $main-bg;
+  background: @main-bg;
   height: 100%;
   width: 100%;
 
@@ -370,7 +370,7 @@ export default {
     }
 
     .detail {
-      background: $main-bg;
+      background: @main-bg;
       padding: 0 20px;
 
       .head {
@@ -397,7 +397,7 @@ export default {
             justify-content: center;
             float: left;
             border-radius: 2px;
-            background: $second-btn-color;
+            background: @second-btn-color;
             margin-left: 5px;
             padding: 0 10px;
             height: 30px;
@@ -422,9 +422,9 @@ export default {
         transform: translateY(-20px);
 
         .number {
-          color: $second-text-color;
+          color: @second-text-color;
           padding-bottom: 2rem;
-          border-bottom: 1px solid $line-color;
+          border-bottom: 1px solid @line-color;
           display: flex;
           align-items: center;
 
@@ -466,7 +466,7 @@ export default {
     margin: 0;
     position: absolute;
     color: white;
-    background: $main-bg;
+    background: @main-bg;
 
     .line {
       height: 1px;
@@ -477,7 +477,7 @@ export default {
 
     .li {
       box-sizing: border-box;
-      background: $main-bg;
+      background: @main-bg;
       width: 100%;
       padding: 1rem 2rem;
       list-style: none;
@@ -506,7 +506,7 @@ export default {
     font-size: 1.2rem;
     width: 100%;
     position: absolute;
-    background: $main-bg;
+    background: @main-bg;
 
     .title {
       padding: 2rem 0 1rem 2rem;
@@ -528,7 +528,7 @@ export default {
 
         img {
           border-radius: 50%;
-          background: $second-btn-color-tran;
+          background: @second-btn-color-tran;
           padding: .6rem;
           height: 1.6rem;
           margin-bottom: 15px;
@@ -543,12 +543,12 @@ export default {
     width: 70vw;
     position: absolute;
     bottom: 0;
-    background: $main-bg;
+    background: @main-bg;
 
     .button {
       box-sizing: border-box;
       width: calc(100% - 4rem);
-      background: $second-btn-color;
+      background: @second-btn-color;
       margin: 2rem;
       height: 4.5rem;
       border-radius: 3px;
diff --git a/src/pages/me/Me2.vue b/src/pages/me/Me2.vue
index 64c90f7..ca85ab1 100644
--- a/src/pages/me/Me2.vue
+++ b/src/pages/me/Me2.vue
@@ -755,7 +755,7 @@ export default {
 }
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 .fade1-enter-active,
@@ -770,7 +770,7 @@ export default {
 }
 
 .Me {
-  background: $main-bg;
+  background: @main-bg;
   height: 100%;
   width: 100%;
   font-size: 1.4rem;
@@ -790,7 +790,7 @@ export default {
     .notice {
       font-size: 1.2rem;
       height: 4rem;
-      color: $second-text-color;
+      color: @second-text-color;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -805,7 +805,7 @@ export default {
       padding: .7rem;
 
       .video {
-        background: $active-main-bg;
+        background: @active-main-bg;
         border-radius: .5rem;
         padding: 1rem;
         margin-bottom: .7rem;
@@ -830,7 +830,7 @@ export default {
           .right {
             display: flex;
             align-items: center;
-            color: $second-text-color;
+            color: @second-text-color;
           }
         }
 
@@ -871,7 +871,7 @@ export default {
       }
 
       .audio {
-        background: $active-main-bg;
+        background: @active-main-bg;
         border-radius: .5rem;
         padding: 1rem;
 
@@ -895,7 +895,7 @@ export default {
           .right {
             display: flex;
             align-items: center;
-            color: $second-text-color;
+            color: @second-text-color;
           }
         }
 
@@ -917,7 +917,7 @@ export default {
 
             .title {
               margin-top: .5rem;
-              color: $second-text-color;
+              color: @second-text-color;
             }
           }
         }
@@ -945,10 +945,10 @@ export default {
     }
 
     &.fixed {
-      background: $main-bg;
+      background: @main-bg;
 
       img {
-        background: $main-bg !important;
+        background: @main-bg !important;
       }
     }
 
@@ -991,7 +991,7 @@ export default {
     }
 
     .detail {
-      background: $main-bg;
+      background: @main-bg;
       padding: 0 2rem;
 
       .head {
@@ -1022,7 +1022,7 @@ export default {
             justify-content: center;
             float: left;
             border-radius: .2rem;
-            background: $second-btn-color;
+            background: @second-btn-color;
             margin-left: .5rem;
             padding: 0 1rem;
             height: 3rem;
@@ -1052,7 +1052,7 @@ export default {
         transform: translateY(-2rem);
 
         .signature {
-          //color: $second-text-color;
+          //color: @second-text-color;
           color: white;
           font-size: 1.3rem;
           display: flex;
@@ -1066,13 +1066,13 @@ export default {
         }
 
         .more {
-          color: $second-text-color;
+          color: @second-text-color;
           display: flex;
 
           .item {
             padding: .2rem .5rem;
             border-radius: .2rem;
-            background: $second-btn-color-tran;
+            background: @second-btn-color-tran;
             font-size: 1rem;
             display: flex;
             align-items: center;
@@ -1086,9 +1086,9 @@ export default {
         }
 
         .number {
-          color: $second-text-color;
+          color: @second-text-color;
           padding-bottom: 2rem;
-          border-bottom: 1px solid $line-color;
+          border-bottom: 1px solid @line-color;
           display: flex;
           align-items: center;
 
@@ -1129,7 +1129,7 @@ export default {
           img {
             margin-right: .8rem;
             border-radius: .4rem;
-            background: $second-btn-color-tran;
+            background: @second-btn-color-tran;
             padding: .8rem;
             height: 2.2rem;
           }
@@ -1145,7 +1145,7 @@ export default {
             }
 
             .bottom {
-              color: $second-text-color;
+              color: @second-text-color;
               font-size: 1.2rem;
             }
           }
@@ -1164,7 +1164,7 @@ export default {
     margin: 0;
     position: absolute;
     color: white;
-    background: $main-bg;
+    background: @main-bg;
 
     .line {
       height: 1px;
@@ -1175,7 +1175,7 @@ export default {
 
     .li {
       box-sizing: border-box;
-      background: $main-bg;
+      background: @main-bg;
       width: 100%;
       padding: 1rem 2rem;
       list-style: none;
@@ -1204,7 +1204,7 @@ export default {
     font-size: 1.2rem;
     width: 100%;
     position: absolute;
-    background: $main-bg;
+    background: @main-bg;
 
     .title {
       padding: 2rem 0 1rem 2rem;
@@ -1226,7 +1226,7 @@ export default {
 
         img {
           border-radius: 50%;
-          background: $second-btn-color-tran;
+          background: @second-btn-color-tran;
           padding: .6rem;
           height: 1.6rem;
           margin-bottom: 15px;
@@ -1241,12 +1241,12 @@ export default {
     width: 70vw;
     position: absolute;
     bottom: 0;
-    background: $main-bg;
+    background: @main-bg;
 
     .button {
       box-sizing: border-box;
       width: calc(100% - 4rem);
-      background: $second-btn-color;
+      background: @second-btn-color;
       margin: 2rem;
       height: 4.5rem;
       border-radius: 3px;
diff --git a/src/pages/me/Me3.vue b/src/pages/me/Me3.vue
index 5efb248..4661082 100644
--- a/src/pages/me/Me3.vue
+++ b/src/pages/me/Me3.vue
@@ -734,7 +734,7 @@ export default {
 }
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 .fade1-enter-active,
@@ -749,7 +749,7 @@ export default {
 }
 
 .Me {
-  background: $main-bg;
+  background: @main-bg;
   height: 100%;
   width: 100%;
   font-size: 1.4rem;
@@ -759,7 +759,7 @@ export default {
     .notice {
       font-size: 1.2rem;
       height: 4rem;
-      color: $second-text-color;
+      color: @second-text-color;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -774,7 +774,7 @@ export default {
       padding: .7rem;
 
       .video {
-        background: $active-main-bg;
+        background: @active-main-bg;
         border-radius: .5rem;
         padding: 1rem;
         margin-bottom: .7rem;
@@ -799,7 +799,7 @@ export default {
           .right {
             display: flex;
             align-items: center;
-            color: $second-text-color;
+            color: @second-text-color;
           }
         }
 
@@ -840,7 +840,7 @@ export default {
       }
 
       .audio {
-        background: $active-main-bg;
+        background: @active-main-bg;
         border-radius: .5rem;
         padding: 1rem;
 
@@ -864,7 +864,7 @@ export default {
           .right {
             display: flex;
             align-items: center;
-            color: $second-text-color;
+            color: @second-text-color;
           }
         }
 
@@ -886,7 +886,7 @@ export default {
 
             .title {
               margin-top: .5rem;
-              color: $second-text-color;
+              color: @second-text-color;
             }
           }
         }
@@ -914,10 +914,10 @@ export default {
     }
 
     &.fixed {
-      background: $main-bg;
+      background: @main-bg;
 
       img {
-        background: $main-bg !important;
+        background: @main-bg !important;
       }
     }
 
@@ -962,7 +962,7 @@ export default {
     }
 
     .detail {
-      background: $main-bg;
+      background: @main-bg;
       padding: 0 2rem;
 
       .head {
@@ -984,7 +984,7 @@ export default {
         .heat {
           margin-top: 1rem;
           width: calc(100% - 12rem);
-          color: $second-text-color;
+          color: @second-text-color;
           display: flex;
           align-items: center;
           justify-content: space-between;
@@ -1015,9 +1015,9 @@ export default {
         transform: translateY(-2rem);
 
         .number {
-          color: $second-text-color;
+          color: @second-text-color;
           padding-bottom: 2rem;
-          border-bottom: 1px solid $line-color;
+          border-bottom: 1px solid @line-color;
           display: flex;
           align-items: center;
 
@@ -1030,7 +1030,7 @@ export default {
       }
 
       .signature {
-        color: $second-text-color;
+        color: @second-text-color;
         display: flex;
         align-items: center;
         margin-bottom: .5rem;
@@ -1042,13 +1042,13 @@ export default {
       }
 
       .more {
-        color: $second-text-color;
+        color: @second-text-color;
         display: flex;
 
         .item {
           padding: .2rem .5rem;
           border-radius: .2rem;
-          background: $second-btn-color-tran;
+          background: @second-btn-color-tran;
           font-size: 1rem;
           display: flex;
           align-items: center;
@@ -1072,7 +1072,7 @@ export default {
           align-items: center;
           justify-content: center;
           border-radius: .2rem;
-          background: $second-btn-color;
+          background: @second-btn-color;
           height: 3rem;
           color: white;
         }
@@ -1091,7 +1091,7 @@ export default {
     margin: 0;
     position: absolute;
     color: white;
-    background: $main-bg;
+    background: @main-bg;
 
     .line {
       height: 1px;
@@ -1102,7 +1102,7 @@ export default {
 
     .li {
       box-sizing: border-box;
-      background: $main-bg;
+      background: @main-bg;
       width: 100%;
       padding: 1rem 2rem;
       list-style: none;
@@ -1131,7 +1131,7 @@ export default {
     font-size: 1.2rem;
     width: 100%;
     position: absolute;
-    background: $main-bg;
+    background: @main-bg;
 
     .title {
       padding: 2rem 0 1rem 2rem;
@@ -1153,7 +1153,7 @@ export default {
 
         img {
           border-radius: 50%;
-          background: $second-btn-color-tran;
+          background: @second-btn-color-tran;
           padding: .6rem;
           height: 1.6rem;
           margin-bottom: 15px;
@@ -1168,12 +1168,12 @@ export default {
     width: 70vw;
     position: absolute;
     bottom: 0;
-    background: $main-bg;
+    background: @main-bg;
 
     .button {
       box-sizing: border-box;
       width: calc(100% - 4rem);
-      background: $second-btn-color;
+      background: @second-btn-color;
       margin: 2rem;
       height: 4.5rem;
       border-radius: 3px;
diff --git a/src/pages/me/MyCard.vue b/src/pages/me/MyCard.vue
index e796721..710f7da 100644
--- a/src/pages/me/MyCard.vue
+++ b/src/pages/me/MyCard.vue
@@ -45,7 +45,7 @@ export default {
 }
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 #MyCard {
@@ -59,7 +59,7 @@ export default {
 
 
   .content {
-    padding-top: $header-height;
+    padding-top: @header-height;
 
     .card {
       margin: 3rem;
@@ -128,5 +128,4 @@ export default {
   }
 }
 
-
 </style>
diff --git a/src/pages/me/MyCollect.vue b/src/pages/me/MyCollect.vue
index 58bebc8..89d2904 100644
--- a/src/pages/me/MyCollect.vue
+++ b/src/pages/me/MyCollect.vue
@@ -137,7 +137,7 @@
     }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
     #MyCollect {
         width: 100vw;
         height: 100%;
diff --git a/src/pages/me/VideoDetail.vue b/src/pages/me/VideoDetail.vue
index d4e1961..a493008 100644
--- a/src/pages/me/VideoDetail.vue
+++ b/src/pages/me/VideoDetail.vue
@@ -370,7 +370,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 
@@ -405,8 +405,8 @@ export default {
   }
 
   .share-to-friend {
-    color: $second-text-color;
-    height: $footer-height;
+    color: @second-text-color;
+    height: @footer-height;
     z-index: 9;
     position: fixed;
     bottom: 0;
@@ -427,8 +427,8 @@ export default {
   }
 
   .permission-setting {
-    color: $second-text-color;
-    height: $footer-height;
+    color: @second-text-color;
+    height: @footer-height;
     z-index: 9;
     position: fixed;
     bottom: 0;
@@ -516,7 +516,7 @@ export default {
             font-size: 1.4rem;
             color: white;
             padding: 5px 20px;
-            background: $primary-btn-color;
+            background: @primary-btn-color;
             border-radius: 2px;
           }
         }
@@ -559,7 +559,7 @@ export default {
           font-size: 1.4rem;
           color: white;
           padding: 5px 20px;
-          background: $primary-btn-color;
+          background: @primary-btn-color;
           border-radius: 2px;
         }
       }
diff --git a/src/pages/me/rightMenu/LookHistory.vue b/src/pages/me/rightMenu/LookHistory.vue
index abe8119..68db25c 100644
--- a/src/pages/me/rightMenu/LookHistory.vue
+++ b/src/pages/me/rightMenu/LookHistory.vue
@@ -63,7 +63,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../../assets/scss/index";
 
 .lookHistory {
@@ -94,7 +94,7 @@ export default {
       .subtitle {
         font-size: 1.3rem;
         margin-top: 1rem;
-        color: $second-text-color;
+        color: @second-text-color;
       }
     }
   }
diff --git a/src/pages/me/rightMenu/MinorProtection/DetailSetting.vue b/src/pages/me/rightMenu/MinorProtection/DetailSetting.vue
index 16aaf50..053f3c2 100644
--- a/src/pages/me/rightMenu/MinorProtection/DetailSetting.vue
+++ b/src/pages/me/rightMenu/MinorProtection/DetailSetting.vue
@@ -85,7 +85,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../../../assets/scss/index";
 
 .DetailSetting {
@@ -99,7 +99,7 @@ export default {
   font-size: 1.4rem;
 
   .content {
-    padding-top: $header-height;
+    padding-top: @header-height;
   }
 
   .footer {
@@ -122,7 +122,7 @@ export default {
       align-items: center;
       flex-direction: column;
       font-size: 1.6rem;
-      color: $second-text-color;
+      color: @second-text-color;
 
       img {
         width: 1.5rem;
diff --git a/src/pages/me/rightMenu/MinorProtection/Index.vue b/src/pages/me/rightMenu/MinorProtection/Index.vue
index 181ce4b..f862f90 100644
--- a/src/pages/me/rightMenu/MinorProtection/Index.vue
+++ b/src/pages/me/rightMenu/MinorProtection/Index.vue
@@ -43,7 +43,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../../../assets/scss/index";
 
 .index {
diff --git a/src/pages/me/rightMenu/MinorProtection/TriggerTime.vue b/src/pages/me/rightMenu/MinorProtection/TriggerTime.vue
index b367a2b..fcb338b 100644
--- a/src/pages/me/rightMenu/MinorProtection/TriggerTime.vue
+++ b/src/pages/me/rightMenu/MinorProtection/TriggerTime.vue
@@ -56,7 +56,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../../../assets/scss/index";
 
 .TriggerTime {
diff --git a/src/pages/me/rightMenu/Setting.vue b/src/pages/me/rightMenu/Setting.vue
index af58e24..4aba910 100644
--- a/src/pages/me/rightMenu/Setting.vue
+++ b/src/pages/me/rightMenu/Setting.vue
@@ -197,7 +197,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../../assets/scss/index";
 
 .Setting {
@@ -214,13 +214,13 @@ export default {
     padding-top: 6rem;
 
     .title {
-      color: $second-text-color;
+      color: @second-text-color;
       font-size: 1.3rem;
       margin: 2rem 0 0 2rem;
     }
 
     .version {
-      color: $second-text-color;
+      color: @second-text-color;
       font-size: 1.3rem;
       margin: 4rem;
       text-align: center;
@@ -229,7 +229,7 @@ export default {
     .line {
       width: calc(100% - 3rem);
       margin-left: 1.5rem;
-      background: $line-color;
+      background: @line-color;
     }
   }
 }
diff --git a/src/pages/me/userinfo/AddSchool.vue b/src/pages/me/userinfo/AddSchool.vue
index 0e28b63..0a23940 100644
--- a/src/pages/me/userinfo/AddSchool.vue
+++ b/src/pages/me/userinfo/AddSchool.vue
@@ -161,7 +161,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../../assets/scss/index";
 
 .school {
@@ -179,11 +179,11 @@ export default {
 }
 
 .save-yes {
-  color: $primary-btn-color;
+  color: @primary-btn-color;
 }
 
 .save-no {
-  color: $disable-primary-btn-color;
+  color: @disable-primary-btn-color;
 }
 
 
diff --git a/src/pages/me/userinfo/ChooseCity.vue b/src/pages/me/userinfo/ChooseCity.vue
index 5f3f860..16b3968 100644
--- a/src/pages/me/userinfo/ChooseCity.vue
+++ b/src/pages/me/userinfo/ChooseCity.vue
@@ -66,7 +66,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../../assets/scss/index";
 
 .choose-location {
@@ -103,13 +103,13 @@ export default {
       height: 5rem;
       font-size: 1.4rem;
       transition: all .1s;
-      background: $main-bg;
+      background: @main-bg;
 
       .right {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        color: $second-text-color;
+        color: @second-text-color;
 
         img {
           margin-left: 1rem;
@@ -118,8 +118,8 @@ export default {
       }
 
       &:active {
-        background: $active-main-bg;
-        color: $second-text-color;
+        background: @active-main-bg;
+        color: @second-text-color;
       }
     }
   }
diff --git a/src/pages/me/userinfo/ChooseDepartment.vue b/src/pages/me/userinfo/ChooseDepartment.vue
index 06d8b93..679a7ee 100644
--- a/src/pages/me/userinfo/ChooseDepartment.vue
+++ b/src/pages/me/userinfo/ChooseDepartment.vue
@@ -51,7 +51,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../../assets/scss/index";
 
 .choose-school {
@@ -75,11 +75,11 @@ export default {
       justify-content: space-between;
       align-items: center;
       transition: all .1s;
-      background: $main-bg;
+      background: @main-bg;
 
       &:active {
-        background: $active-main-bg;
-        color: $second-text-color;
+        background: @active-main-bg;
+        color: @second-text-color;
       }
     }
   }
diff --git a/src/pages/me/userinfo/ChooseLocation.vue b/src/pages/me/userinfo/ChooseLocation.vue
index a4fd993..97b19b7 100644
--- a/src/pages/me/userinfo/ChooseLocation.vue
+++ b/src/pages/me/userinfo/ChooseLocation.vue
@@ -1205,7 +1205,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../../assets/scss/index";
 
 .choose-location {
@@ -1226,7 +1226,7 @@ export default {
     .title {
       font-size: 1.2rem;
       padding: 1rem 1.5rem;
-      color: $second-text-color;
+      color: @second-text-color;
 
       img {
         width: 1rem;
@@ -1243,13 +1243,13 @@ export default {
       height: 5rem;
       font-size: 1.4rem;
       transition: all .1s;
-      background: $main-bg;
+      background: @main-bg;
 
       .right {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        color: $second-text-color;
+        color: @second-text-color;
 
         img {
           margin-left: 1rem;
@@ -1258,8 +1258,8 @@ export default {
       }
 
       &:active {
-        background: $active-main-bg;
-        color: $second-text-color;
+        background: @active-main-bg;
+        color: @second-text-color;
       }
     }
   }
diff --git a/src/pages/me/userinfo/ChooseProvince.vue b/src/pages/me/userinfo/ChooseProvince.vue
index 11e4632..7dc5051 100644
--- a/src/pages/me/userinfo/ChooseProvince.vue
+++ b/src/pages/me/userinfo/ChooseProvince.vue
@@ -35,7 +35,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../../assets/scss/index";
 
 .choose-location {
@@ -72,13 +72,13 @@ export default {
       height: 5rem;
       font-size: 1.4rem;
       transition: all .1s;
-      background: $main-bg;
+      background: @main-bg;
 
       .right {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        color: $second-text-color;
+        color: @second-text-color;
 
         img {
           margin-left: 1rem;
@@ -87,8 +87,8 @@ export default {
       }
 
       &:active {
-        background: $active-main-bg;
-        color: $second-text-color;
+        background: @active-main-bg;
+        color: @second-text-color;
       }
     }
   }
diff --git a/src/pages/me/userinfo/ChooseSchool.vue b/src/pages/me/userinfo/ChooseSchool.vue
index 6f22c43..53997f7 100644
--- a/src/pages/me/userinfo/ChooseSchool.vue
+++ b/src/pages/me/userinfo/ChooseSchool.vue
@@ -96,7 +96,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../../assets/scss/index";
 
 .choose-school {
@@ -134,11 +134,11 @@ export default {
       justify-content: space-between;
       align-items: center;
       transition: all .1s;
-      background: $main-bg;
+      background: @main-bg;
 
       &:active {
-        background: $active-main-bg;
-        color: $second-text-color;
+        background: @active-main-bg;
+        color: @second-text-color;
       }
     }
 
@@ -151,7 +151,7 @@ export default {
       }
 
       .sub-title {
-        color: $second-text-color;
+        color: @second-text-color;
         margin-top: 2rem;
         font-size: 1.4rem;
       }
@@ -165,7 +165,7 @@ export default {
       .btn {
         margin-top: 15rem;
         display: inline-block;
-        background: $second-btn-color;
+        background: @second-btn-color;
         padding: 1.5rem 4rem;
         border-radius: 2px;
       }
diff --git a/src/pages/me/userinfo/DeclareSchool.vue b/src/pages/me/userinfo/DeclareSchool.vue
index 744d757..f4bbb24 100644
--- a/src/pages/me/userinfo/DeclareSchool.vue
+++ b/src/pages/me/userinfo/DeclareSchool.vue
@@ -57,7 +57,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../../assets/scss/index";
 
 .declare-school {
@@ -89,7 +89,7 @@ export default {
         border-top: none;
         border-right: none;
         border-left: none;
-        border-bottom: 1px solid $line-color;
+        border-bottom: 1px solid @line-color;
         color: white;
       }
     }
@@ -109,7 +109,7 @@ export default {
         padding: 1.2rem 0;
         display: flex;
         align-items: center;
-        color: $second-text-color;
+        color: @second-text-color;
 
         img {
           margin-left: 5px;
@@ -122,7 +122,7 @@ export default {
 
     .notice {
       margin-top: 2rem;
-      color: $second-text-color;
+      color: @second-text-color;
     }
 
     .btn {
@@ -132,7 +132,7 @@ export default {
       right: 2rem;
       color: white;
       font-size: 1.6rem;
-      background: $primary-btn-color;
+      background: @primary-btn-color;
       text-align: center;
       padding: 1rem 0;
       border-radius: 2px;
diff --git a/src/pages/me/userinfo/DisplayType.vue b/src/pages/me/userinfo/DisplayType.vue
index 26285a1..e6cafbe 100644
--- a/src/pages/me/userinfo/DisplayType.vue
+++ b/src/pages/me/userinfo/DisplayType.vue
@@ -51,7 +51,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../../assets/scss/index";
 
 .DisplayType {
diff --git a/src/pages/me/userinfo/EditUserInfo.vue b/src/pages/me/userinfo/EditUserInfo.vue
index 32ef352..d71a5bc 100644
--- a/src/pages/me/userinfo/EditUserInfo.vue
+++ b/src/pages/me/userinfo/EditUserInfo.vue
@@ -146,7 +146,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../../assets/scss/index";
 
 .edit {
@@ -165,7 +165,7 @@ export default {
   align-items: center;
 
   .sub {
-    color: $second-text-color;
+    color: @second-text-color;
   }
 }
 
@@ -179,7 +179,7 @@ export default {
     align-items: center;
     flex-direction: column;
     margin: 3rem 0;
-    $avatar-width: 7rem;
+    @avatar-width: 7rem;
 
     .avatar-ctn {
       position: relative;
@@ -188,14 +188,14 @@ export default {
       align-items: center;
       margin-bottom: 1rem;
 
-      width: $avatar-width;
-      height: $avatar-width;
+      width: @avatar-width;
+      height: @avatar-width;
 
       .avatar {
         opacity: .5;
         position: absolute;
-        width: $avatar-width;
-        height: $avatar-width;
+        width: @avatar-width;
+        height: @avatar-width;
         border-radius: 50%;
       }
 
diff --git a/src/pages/me/userinfo/EditUserInfoItem.vue b/src/pages/me/userinfo/EditUserInfoItem.vue
index e9c9e82..21475ae 100644
--- a/src/pages/me/userinfo/EditUserInfoItem.vue
+++ b/src/pages/me/userinfo/EditUserInfoItem.vue
@@ -103,7 +103,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../../assets/scss/index";
 
 .edit-item {
@@ -114,11 +114,11 @@ export default {
   top: 0;
 
   .save-yes {
-    color: $primary-btn-color;
+    color: @primary-btn-color;
   }
 
   .save-no {
-    color: $disable-primary-btn-color;
+    color: @disable-primary-btn-color;
   }
 
   .content {
@@ -127,12 +127,12 @@ export default {
 
     .notice, .num {
       font-size: 1.2rem;
-      color: $second-text-color;
+      color: @second-text-color;
     }
 
     .input-ctn {
       position: relative;
-      border-bottom: 1px solid $line-color;
+      border-bottom: 1px solid @line-color;
       display: flex;
       align-items: center;
 
@@ -146,7 +146,7 @@ export default {
         background: transparent;
 
         &::placeholder {
-          color: $second-text-color;
+          color: @second-text-color;
         }
       }
 
@@ -160,7 +160,7 @@ export default {
 
     .textarea-ctn {
       width: 100%;
-      background: $active-main-bg;
+      background: @active-main-bg;
       padding: 1.5rem;
       box-sizing: border-box;
       margin-top: 1rem;
@@ -176,7 +176,7 @@ export default {
         color: white;
 
         &::placeholder {
-          color: $second-text-color;
+          color: @second-text-color;
         }
       }
     }
diff --git a/src/pages/me/我的动态.vue b/src/pages/me/我的动态.vue
index dd61a43..fce51e6 100644
--- a/src/pages/me/我的动态.vue
+++ b/src/pages/me/我的动态.vue
@@ -99,7 +99,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 #attention {
   /*background: rgb(22，24，34);*/
   /*background: #161822;*/
@@ -114,7 +114,7 @@ export default {
     justify-content: center;
     align-items: center;
 
-    $arrow-width: 5px;
+    @arrow-width: 5px;
 
     .arrow {
       position: relative;
@@ -122,10 +122,10 @@ export default {
       left: 5px;
       width: 0;
       height: 0;
-      border-top: $arrow-width solid white;
-      border-right: $arrow-width solid transparent;
-      border-bottom: $arrow-width solid transparent;
-      border-left: $arrow-width solid transparent;
+      border-top: @arrow-width solid white;
+      border-right: @arrow-width solid transparent;
+      border-bottom: @arrow-width solid transparent;
+      border-left: @arrow-width solid transparent;
     }
   }
 
diff --git a/src/pages/message/Chat.vue b/src/pages/message/Chat.vue
index 01bb1b3..729205a 100644
--- a/src/pages/message/Chat.vue
+++ b/src/pages/message/Chat.vue
@@ -386,7 +386,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 .Chat {
@@ -400,16 +400,16 @@ export default {
 
   .header {
     z-index: 2;
-    background: $main-bg;
+    background: @main-bg;
     position: fixed;
     width: 100%;
     box-sizing: border-box;
-    height: $header-height;
+    height: @header-height;
     padding: 0 1rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid $line-color;
+    border-bottom: 1px solid @line-color;
 
     img {
       height: 2rem;
@@ -429,7 +429,7 @@ export default {
         padding: 1px 6px;
         border-radius: 10px;
         color: white;
-        background: $second-btn-color;
+        background: @second-btn-color;
       }
     }
   }
@@ -445,22 +445,22 @@ export default {
   }
 
   .footer {
-    $chat-bg-color: rgb(105, 143, 244);
-    $typing-bg-color: whitesmoke;
-    background: $main-bg;
-    $normal-bg-color: rgb(35, 38, 47);
+    @chat-bg-color: rgb(105, 143, 244);
+    @typing-bg-color: whitesmoke;
+    background: @main-bg;
+    @normal-bg-color: rgb(35, 38, 47);
     padding: 1rem 0;
-    border-top: 1px solid $second-btn-color-tran;
+    border-top: 1px solid @second-btn-color-tran;
 
     &.typing {
       background: white;
 
       .toolbar {
-        background: $typing-bg-color;
+        background: @typing-bg-color;
       }
 
       input {
-        background: $typing-bg-color !important;
+        background: @typing-bg-color !important;
       }
     }
 
@@ -469,7 +469,7 @@ export default {
       height: 4.4rem;
       margin: 0 1rem;
       padding: .5rem;
-      background: $normal-bg-color;
+      background: @normal-bg-color;
       border-radius: 2rem;
       display: flex;
       align-items: center;
@@ -484,7 +484,7 @@ export default {
         flex: 1;
         outline: none;
         border: none;
-        background: $normal-bg-color;
+        background: @normal-bg-color;
       }
 
       .camera {
@@ -493,7 +493,7 @@ export default {
         width: 1.4rem;
         padding: .5rem;
         border-radius: 50%;
-        background: $chat-bg-color;
+        background: @chat-bg-color;
       }
 
     }
@@ -503,7 +503,7 @@ export default {
       height: 4.4rem;
       margin: 0 1rem;
       padding: 1rem .5rem;
-      background: $normal-bg-color;
+      background: @normal-bg-color;
       border-radius: 2rem;
       display: flex;
       align-items: center;
@@ -528,10 +528,10 @@ export default {
 
       .option-wrapper {
         box-sizing: border-box;
-        $grid-width: calc((100vw - 3rem) / 4);
+        @grid-width: calc((100vw - 3rem) / 4);
         color: black;
         display: grid;
-        grid-template-columns:$grid-width $grid-width $grid-width $grid-width;
+        grid-template-columns:@grid-width @grid-width @grid-width @grid-width;
 
         .option {
           display: flex;
diff --git a/src/pages/message/ChatDetail.vue b/src/pages/message/ChatDetail.vue
index 72ba2e7..7ed1f69 100644
--- a/src/pages/message/ChatDetail.vue
+++ b/src/pages/message/ChatDetail.vue
@@ -100,7 +100,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 .ChatDetail {
@@ -120,7 +120,7 @@ export default {
       padding: 0 2rem;
 
       .People {
-        border-bottom: 1px solid $second-btn-color-tran;
+        border-bottom: 1px solid @second-btn-color-tran;
       }
     }
 
@@ -146,7 +146,7 @@ export default {
     color: black;
 
     .notice {
-      color: $second-text-color;
+      color: @second-text-color;
       font-size: 1.2rem;
       height: 4rem;
       display: flex;
@@ -166,7 +166,7 @@ export default {
       }
 
       &.red{
-        color: $primary-btn-color;
+        color: @primary-btn-color;
       }
     }
 
diff --git a/src/pages/message/Message.vue b/src/pages/message/Message.vue
index e8d31c5..093f122 100644
--- a/src/pages/message/Message.vue
+++ b/src/pages/message/Message.vue
@@ -236,7 +236,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 #Message {
@@ -248,7 +248,7 @@ export default {
   //height: 100%;
   //width: 100%;
   overflow: auto;
-  background: $main-bg;
+  background: @main-bg;
   padding-bottom: 6rem;
   color: white;
 
@@ -256,7 +256,7 @@ export default {
     padding-bottom: 6rem;
 
     .joined-chat {
-      border-bottom: 1px solid $line-color;
+      border-bottom: 1px solid @line-color;
       height: 5rem;
       padding: 0 2rem;
       display: flex;
@@ -327,7 +327,7 @@ export default {
       bottom: 0;
       left: 0;
       right: 0;
-      background: $main-bg;
+      background: @main-bg;
       //background: red;
       display: flex;
       align-items: center;
@@ -345,7 +345,7 @@ export default {
         border-radius: .2rem;
 
         &.primary {
-          background: $primary-btn-color;
+          background: @primary-btn-color;
         }
       }
     }
@@ -386,7 +386,7 @@ export default {
 
             .account {
               font-size: 1.3rem;
-              color: $second-text-color;
+              color: @second-text-color;
             }
           }
 
@@ -411,7 +411,7 @@ export default {
       .notice-h2 {
         margin-top: 1rem;
         font-size: 1.4rem;
-        color: $second-text-color;
+        color: @second-text-color;
       }
 
     }
@@ -472,7 +472,7 @@ export default {
 
             .num {
               margin-left: .5rem;
-              color: $second-text-color;
+              color: @second-text-color;
             }
           }
 
@@ -543,7 +543,7 @@ export default {
 
 
       span {
-        color: $second-text-color;
+        color: @second-text-color;
         display: block;
         text-align: center;
         word-break: break-all;
@@ -552,7 +552,7 @@ export default {
   }
 
   .line {
-    border-top: 1px solid $line-color;
+    border-top: 1px solid @line-color;
   }
 
   .requests {
@@ -562,7 +562,7 @@ export default {
     padding: 20px 0;
     display: flex;
     justify-content: space-between;
-    border-bottom: 1px solid $line-color;
+    border-bottom: 1px solid @line-color;
 
     .right {
       display: flex;
@@ -627,7 +627,7 @@ export default {
         display: flex;
         justify-content: space-between;
         padding: 15px 0 15px 0;
-        border-bottom: 1px solid $line-color;
+        border-bottom: 1px solid @line-color;
 
         .left {
           .name {
@@ -639,14 +639,14 @@ export default {
             .tag {
               margin-left: 5px;
               font-size: 1rem;
-              background: $line-color;
+              background: @line-color;
               padding: 2px 5px;
               border-radius: 2px;
             }
           }
 
           .detail {
-            color: $second-text-color;
+            color: @second-text-color;
             font-size: 1.2rem;
             margin-top: 4px;
 
@@ -693,7 +693,7 @@ export default {
     }
 
     .not-more {
-      color: $second-text-color;
+      color: @second-text-color;
       text-align: center;
       padding: 20px;
     }
@@ -707,7 +707,7 @@ export default {
       align-items: center;
 
       .left {
-        color: $second-text-color;
+        color: @second-text-color;
 
         img {
           width: 10px;
@@ -717,7 +717,7 @@ export default {
 
       .right {
         border-radius: 50%;
-        background: $second-text-color;
+        background: @second-text-color;
         padding: 5px;
         width: 10px;
         height: 10px;
@@ -757,7 +757,7 @@ export default {
           }
 
           .detail {
-            color: $second-text-color;
+            color: @second-text-color;
             font-size: 1.2rem;
             margin-top: 4px;
           }
@@ -769,7 +769,7 @@ export default {
           align-items: center;
 
           .button {
-            background: $primary-btn-color;
+            background: @primary-btn-color;
             margin-left: 8px;
             padding: 8px 20px;
             border-radius: 3px;
diff --git a/src/pages/message/SetRemark.vue b/src/pages/message/SetRemark.vue
index 8e85688..58206df 100644
--- a/src/pages/message/SetRemark.vue
+++ b/src/pages/message/SetRemark.vue
@@ -62,7 +62,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 .edit-item {
@@ -73,11 +73,11 @@ export default {
   top: 0;
 
   .save-yes {
-    color: $primary-btn-color;
+    color: @primary-btn-color;
   }
 
   .save-no {
-    color: $disable-primary-btn-color;
+    color: @disable-primary-btn-color;
   }
 
   .content {
@@ -86,12 +86,12 @@ export default {
 
     .notice, .num {
       font-size: 1.2rem;
-      color: $second-text-color;
+      color: @second-text-color;
     }
 
     .input-ctn {
       position: relative;
-      border-bottom: 1px solid $line-color;
+      border-bottom: 1px solid @line-color;
       display: flex;
       align-items: center;
 
@@ -105,7 +105,7 @@ export default {
         background: transparent;
 
         &::placeholder {
-          color: $second-text-color;
+          color: @second-text-color;
         }
       }
 
diff --git a/src/pages/message/components/ChatMessage.vue b/src/pages/message/components/ChatMessage.vue
index a5f41ab..b9d012a 100644
--- a/src/pages/message/components/ChatMessage.vue
+++ b/src/pages/message/components/ChatMessage.vue
@@ -159,15 +159,15 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../../assets/scss/index";
 
 .ChatMessage {
   padding: 0 1rem;
   margin-bottom: 2rem;
   display: flex;
-  //$chat-bg-color: dodgerblue;
-  $chat-bg-color: rgb(105, 143, 244);
+  //@chat-bg-color: dodgerblue;
+  @chat-bg-color: rgb(105, 143, 244);
 
   &.right {
     justify-content: flex-end;
@@ -199,7 +199,7 @@ export default {
 
   .time {
     width: 100%;
-    color: $second-text-color;
+    color: @second-text-color;
     text-align: center;
     height: 4rem;
     line-height: 4rem;
@@ -207,16 +207,16 @@ export default {
 
   .red_packet {
     border-radius: .3rem;
-    $not-received: rgb(253, 92, 72);
-    $received: rgba(253, 92, 72, .8);
+    @not-received: rgb(253, 92, 72);
+    @received: rgba(253, 92, 72, .8);
     width: 60vw;
-    background: $not-received;
+    background: @not-received;
     display: flex;
     flex-direction: column;
     color: rgb(255, 231, 206);
 
     &.invalid {
-      background: $received;
+      background: @received;
     }
 
     .top {
@@ -267,7 +267,7 @@ export default {
     display: flex;
     align-items: center;
     font-size: 1.4rem;
-    background: $chat-bg-color;
+    background: @chat-bg-color;
 
     .resolve {
       display: flex;
@@ -315,7 +315,7 @@ export default {
     align-items: center;
     justify-content: space-between;
     font-size: 1.4rem;
-    background: $chat-bg-color;
+    background: @chat-bg-color;
 
     .horn {
       width: 5rem;
@@ -390,7 +390,7 @@ export default {
     display: flex;
     align-items: center;
     font-size: 1.4rem;
-    background: $chat-bg-color;
+    background: @chat-bg-color;
   }
 
 
diff --git a/src/pages/message/components/swtich/switches.less b/src/pages/message/components/swtich/switches.less
new file mode 100644
index 0000000..3714b98
--- /dev/null
+++ b/src/pages/message/components/swtich/switches.less
@@ -0,0 +1,394 @@
+
+// Color variables (appears count calculates by raw css)
+@color0: #f5f5f5; // Appears 3 times
+@color1: #5e91e3; // Appears 2 times
+@color2: #05ffda; // Appears 2 times
+@color3: #f0f0f0; // Appears 2 times
+@color4: #80c780; // Appears 2 times
+@color5: #77c88d; // Appears 2 times
+@color6: #ffe78a; // Appears 2 times
+@color7: #c89577; // Appears 2 times
+@color8: #85d0e7; // Appears 2 times
+@color9: #c9c377; // Appears 2 times
+@color10: #4f93ce; // Appears 2 times
+@color11: #f4c37d; // Appears 2 times
+@color12: #c87777; // Appears 2 times
+@color13: #ff6b89; // Appears 2 times
+@color14: #77b0c8; // Appears 2 times
+@color15: #d9534f; // Appears 2 times
+@color16: #3dde75; // Appears 2 times
+
+
+
+.vue-switcher {
+    display: inline-block;
+    position: relative;
+    input {
+        cursor: pointer;
+        height: 100%;
+        opacity: 0;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+    }
+    div {
+        align-items: center;
+        border-radius: 30px;
+        cursor: pointer;
+        display: -ms-flex;
+        display: -webkit-flex;
+        display: flex;
+        height: 15px;
+        justify-content: flex-start;
+        position: relative;
+        transition: linear 0.2s, background-color linear 0.2s;
+        width: 36px;
+        &:after {
+            border-radius: 100px;
+            box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
+            content: '';
+            cursor: pointer;
+            display: block;
+            height: 20px;
+            left: 100%;
+            margin-left: -18px;
+            position: absolute;
+            top: -3px;
+            transition: linear 0.15s, background-color linear 0.15s;
+            width: 20px;
+        }
+    }
+}
+.vue-switcher__label {
+    display: block;
+    font-size: 10px;
+    margin-bottom: 5px;
+}
+.vue-switcher--unchecked {
+    div {
+        justify-content: flex-end;
+        &:after {
+            left: 15px;
+        }
+    }
+}
+.vue-switcher--disabled {
+    div {
+        opacity: 0.3;
+    }
+    input {
+        cursor: not-allowed;
+    }
+}
+.vue-switcher--bold {
+    div {
+        height: 26px;
+        top: -8px;
+        width: 51px;
+        &:after {
+            margin-left: -24px;
+            top: 3px;
+        }
+    }
+    .vue-switcher__label {
+        span {
+            display: inline-block;
+            padding-bottom: 7px;
+        }
+    }
+}
+.vue-switcher--bold--unchecked {
+    div {
+        &:after {
+            left: 28px;
+        }
+    }
+}
+.vue-switcher-theme--default.vue-switcher-color--default {
+    div {
+        background-color: #b7b7b7;
+        &:after {
+            background-color: #9d9d9d;
+        }
+    }
+}
+.vue-switcher-theme--default.vue-switcher-color--default.vue-switcher--unchecked {
+    div {
+        background-color: #aaaaaa;
+        &:after {
+            background-color: #c4c4c4;
+        }
+    }
+}
+.vue-switcher-theme--default.vue-switcher-color--blue {
+    div {
+        background-color: @color14;
+        &:after {
+            background-color: #539bb9;
+        }
+    }
+}
+.vue-switcher-theme--default.vue-switcher-color--blue.vue-switcher--unchecked {
+    div {
+        background-color: #c0dae5;
+        &:after {
+            background-color: @color14;
+        }
+    }
+}
+.vue-switcher-theme--default.vue-switcher-color--red {
+    div {
+        background-color: @color12;
+        &:after {
+            background-color: #b95353;
+        }
+    }
+}
+.vue-switcher-theme--default.vue-switcher-color--red.vue-switcher--unchecked {
+    div {
+        background-color: #e5c0c0;
+        &:after {
+            background-color: @color12;
+        }
+    }
+}
+.vue-switcher-theme--default.vue-switcher-color--yellow {
+    div {
+        background-color: @color9;
+        &:after {
+            background-color: #bab353;
+        }
+    }
+}
+.vue-switcher-theme--default.vue-switcher-color--yellow.vue-switcher--unchecked {
+    div {
+        background-color: #e6e3c0;
+        &:after {
+            background-color: @color9;
+        }
+    }
+}
+.vue-switcher-theme--default.vue-switcher-color--orange {
+    div {
+        background-color: @color7;
+        &:after {
+            background-color: #b97953;
+        }
+    }
+}
+.vue-switcher-theme--default.vue-switcher-color--orange.vue-switcher--unchecked {
+    div {
+        background-color: #e5cec0;
+        &:after {
+            background-color: @color7;
+        }
+    }
+}
+.vue-switcher-theme--default.vue-switcher-color--green {
+    div {
+        background-color: @color5;
+        &:after {
+            background-color: #53b96e;
+        }
+    }
+}
+.vue-switcher-theme--default.vue-switcher-color--green.vue-switcher--unchecked {
+    div {
+        background-color: #c0e5ca;
+        &:after {
+            background-color: @color5;
+        }
+    }
+}
+.vue-switcher-theme--bulma.vue-switcher-color--default {
+    div {
+        background-color: #dcdcdc;
+        &:after {
+            background-color: @color0;
+        }
+    }
+}
+.vue-switcher-theme--bulma.vue-switcher-color--default.vue-switcher--unchecked {
+    div {
+        background-color: #e8e8e8;
+        &:after {
+            background-color: @color0;
+        }
+    }
+}
+.vue-switcher-theme--bulma.vue-switcher-color--primary {
+    div {
+        background-color: @color2;
+        &:after {
+            background-color: #00d1b2;
+        }
+    }
+}
+.vue-switcher-theme--bulma.vue-switcher-color--primary.vue-switcher--unchecked {
+    div {
+        background-color: #6bffe9;
+        &:after {
+            background-color: @color2;
+        }
+    }
+}
+.vue-switcher-theme--bulma.vue-switcher-color--blue {
+    div {
+        background-color: @color1;
+        &:after {
+            background-color: #3273dc;
+        }
+    }
+}
+.vue-switcher-theme--bulma.vue-switcher-color--blue.vue-switcher--unchecked {
+    div {
+        background-color: #b5ccf2;
+        &:after {
+            background-color: @color1;
+        }
+    }
+}
+.vue-switcher-theme--bulma.vue-switcher-color--red {
+    div {
+        background-color: @color13;
+        &:after {
+            background-color: #ff3860;
+        }
+    }
+}
+.vue-switcher-theme--bulma.vue-switcher-color--red.vue-switcher--unchecked {
+    div {
+        background-color: #ffd1da;
+        &:after {
+            background-color: @color13;
+        }
+    }
+}
+.vue-switcher-theme--bulma.vue-switcher-color--yellow {
+    div {
+        background-color: @color6;
+        &:after {
+            background-color: #ffdd57;
+        }
+    }
+}
+.vue-switcher-theme--bulma.vue-switcher-color--yellow.vue-switcher--unchecked {
+    div {
+        background-color: #fffcf0;
+        &:after {
+            background-color: @color6;
+        }
+    }
+}
+.vue-switcher-theme--bulma.vue-switcher-color--green {
+    div {
+        background-color: @color16;
+        &:after {
+            background-color: #22c65b;
+        }
+    }
+}
+.vue-switcher-theme--bulma.vue-switcher-color--green.vue-switcher--unchecked {
+    div {
+        background-color: #94edb3;
+        &:after {
+            background-color: @color16;
+        }
+    }
+}
+.vue-switcher-theme--bootstrap.vue-switcher-color--default {
+    div {
+        background-color: #e6e6e6;
+        &:after {
+            background-color: @color3;
+        }
+    }
+}
+.vue-switcher-theme--bootstrap.vue-switcher-color--default.vue-switcher--unchecked {
+    div {
+        background-color: @color0;
+        &:after {
+            background-color: @color3;
+        }
+    }
+}
+.vue-switcher-theme--bootstrap.vue-switcher-color--primary {
+    div {
+        background-color: @color10;
+        &:after {
+            background-color: #337ab7;
+        }
+    }
+}
+.vue-switcher-theme--bootstrap.vue-switcher-color--primary.vue-switcher--unchecked {
+    div {
+        background-color: #9fc4e4;
+        &:after {
+            background-color: @color10;
+        }
+    }
+}
+.vue-switcher-theme--bootstrap.vue-switcher-color--success {
+    div {
+        background-color: @color4;
+        &:after {
+            background-color: #5cb85c;
+        }
+    }
+}
+.vue-switcher-theme--bootstrap.vue-switcher-color--success.vue-switcher--unchecked {
+    div {
+        background-color: #c7e6c7;
+        &:after {
+            background-color: @color4;
+        }
+    }
+}
+.vue-switcher-theme--bootstrap.vue-switcher-color--info {
+    div {
+        background-color: @color8;
+        &:after {
+            background-color: #5bc0de;
+        }
+    }
+}
+.vue-switcher-theme--bootstrap.vue-switcher-color--info.vue-switcher--unchecked {
+    div {
+        background-color: #daf1f8;
+        &:after {
+            background-color: @color8;
+        }
+    }
+}
+.vue-switcher-theme--bootstrap.vue-switcher-color--warning {
+    div {
+        background-color: @color11;
+        &:after {
+            background-color: #f0ad4e;
+        }
+    }
+}
+.vue-switcher-theme--bootstrap.vue-switcher-color--warning.vue-switcher--unchecked {
+    div {
+        background-color: #fceedb;
+        &:after {
+            background-color: @color11;
+        }
+    }
+}
+.vue-switcher-theme--bootstrap.vue-switcher-color--danger {
+    div {
+        background-color: @color15;
+        &:after {
+            background-color: #c9302c;
+        }
+    }
+}
+.vue-switcher-theme--bootstrap.vue-switcher-color--danger.vue-switcher--unchecked {
+    div {
+        background-color: #eba5a3;
+        &:after {
+            background-color: @color15;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/pages/message/components/swtich/switches.scss b/src/pages/message/components/swtich/switches.scss
deleted file mode 100644
index 2112d0e..0000000
--- a/src/pages/message/components/swtich/switches.scss
+++ /dev/null
@@ -1,275 +0,0 @@
-/**
- * Default
- */
-$color-default-default: #aaa;
-$color-default-green: #53b96e;
-$color-default-blue: #539bb9;
-$color-default-red: #b95353;
-$color-default-orange: #b97953;
-$color-default-yellow: #bab353;
-
-$theme-default-colors: (
-    default : $color-default-default,
-    blue    : $color-default-blue,
-    red     : $color-default-red,
-    yellow  : $color-default-yellow,
-    orange  : $color-default-orange,
-    green   : $color-default-green
-);
-
-/**
- * Bulma
- */
-$color-bulma-default: #f5f5f5;
-$color-bulma-primary: #00d1b2;
-$color-bulma-blue: #3273dc;
-$color-bulma-red: #ff3860;
-$color-bulma-yellow: #ffdd57;
-$color-bulma-green: #22c65b;
-
-$theme-bulma-colors: (
-    default : $color-bulma-default,
-    primary : $color-bulma-primary,
-    blue    : $color-bulma-blue,
-    red     : $color-bulma-red,
-    yellow  : $color-bulma-yellow,
-    green   : $color-bulma-green
-);
-
-/**
- * Bootstrap
- */
-$color-bootstrap-default: #fff;
-$color-bootstrap-primary: #337ab7;
-$color-bootstrap-success: #5cb85c;
-$color-bootstrap-info: #5bc0de;
-$color-bootstrap-warning: #f0ad4e;
-$color-bootstrap-danger: #c9302c;
-
-$theme-bootstrap-colors: (
-    default : $color-bootstrap-default,
-    primary : $color-bootstrap-primary,
-    success : $color-bootstrap-success,
-    info    : $color-bootstrap-info,
-    warning : $color-bootstrap-warning,
-    danger  : $color-bootstrap-danger
-);
-
-.vue-switcher {
-    position: relative;
-    display: inline-block;
-
-    &__label {
-        display: block;
-        font-size: 10px;
-        margin-bottom: 5px;
-    }
-
-    input {
-        opacity: 0;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        z-index: 1;
-        cursor: pointer;
-    }
-
-    div {
-        height: 15px;
-        width: 36px;
-        position: relative;
-        border-radius: 30px;
-        display: -webkit-flex;
-        display: -ms-flex;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        cursor: pointer;
-        transition: linear .2s, background-color linear .2s;
-
-        &:after {
-            content: '';
-            height: 20px;
-            width: 20px;
-            border-radius: 100px;
-            display: block;
-            transition: linear .15s, background-color linear .15s;
-            position: absolute;
-            left: 100%;
-            margin-left: -18px;
-            cursor: pointer;
-            top: -3px;
-            box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
-        }
-    }
-
-    &--unchecked {
-        div {
-            justify-content: flex-end;
-
-            &:after {
-                left: 15px;
-            }
-        }
-    }
-
-    &--disabled {
-        div {
-            opacity: .3;
-        }
-
-        input {
-            cursor: not-allowed;
-        }
-    }
-
-    &--bold {
-        div {
-            top: -8px;
-            height: 26px;
-            width: 51px;
-
-            &:after {
-                margin-left: -24px;
-                top: 3px;
-            }
-        }
-
-        &--unchecked {
-            div {
-                &:after {
-                    left: 28px;
-                }
-            }
-        }
-
-        .vue-switcher__label {
-            span {
-                padding-bottom: 7px;
-                display: inline-block;
-            }
-        }
-    }
-
-    &-theme--default {
-        @each $colorName, $color in $theme-default-colors {
-            &.vue-switcher-color--#{$colorName} {
-
-                div {
-                    @if $colorName == 'default' {
-                        background-color: lighten($color, 5%);
-                    } @else {
-                        background-color: lighten($color, 10%);
-                    }
-
-                    &:after {
-                        @if $colorName == 'default' {
-                            background-color: darken($color, 5%);
-                        } @else {
-                            background-color: $color
-                        }
-                    }
-                }
-
-                &.vue-switcher--unchecked {
-                    div {
-
-                        @if $colorName == 'default' {
-                            background-color: $color;
-                        } @else {
-                            background-color: lighten($color, 30%);
-                        }
-
-                        &:after {
-                            background-color: lighten($color, 10%);
-                        }
-                    }
-                }
-
-            }
-        }
-    }
-
-    &-theme--bulma {
-        @each $colorName, $color in $theme-bulma-colors {
-            &.vue-switcher-color--#{$colorName} {
-
-                div {
-                    @if $colorName == 'default' {
-                        background-color: darken($color, 10%);
-                    } @else {
-                        background-color: lighten($color, 10%);
-                    }
-
-                    &:after {
-                        background-color: $color;
-                    }
-                }
-
-                &.vue-switcher--unchecked {
-                    div {
-
-                        @if $colorName == 'default' or $colorName == 'yellow' {
-                            background-color: darken($color, 5%);
-                        } @else {
-                            background-color: lighten($color, 30%);
-                        }
-
-                        &:after {
-
-                            @if $colorName == 'default' {
-                                background-color: $color;
-                            } @else {
-                                background-color: lighten($color, 10%);
-                            }
-                        }
-                    }
-                }
-
-            }
-        }
-    }
-
-    &-theme--bootstrap {
-        @each $colorName, $color in $theme-bootstrap-colors {
-            &.vue-switcher-color--#{$colorName} {
-                div {
-                    @if $colorName == 'default' {
-                        background-color: darken($color, 10%);
-                    } @else {
-                        background-color: lighten($color, 10%);
-                    }
-
-                    &:after {
-                        @if $colorName == 'default' {
-                            background-color: darken($color, 6%);
-                        } @else {
-                            background-color: $color;
-                        }
-                    }
-                }
-
-                &.vue-switcher--unchecked {
-                    div {
-
-                        @if $colorName == 'default' {
-                            background-color: darken($color, 4%);
-                        } @else {
-                            background-color: lighten($color, 30%);
-                        }
-
-                        &:after {
-
-                            @if $colorName == 'default' {
-                                background-color: darken($color, 6%);
-                            } @else {
-                                background-color: lighten($color, 10%);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-}
diff --git a/src/pages/message/components/swtich/switches.vue b/src/pages/message/components/swtich/switches.vue
index e91d626..4361cec 100644
--- a/src/pages/message/components/swtich/switches.vue
+++ b/src/pages/message/components/swtich/switches.vue
@@ -91,4 +91,4 @@ export default {
 
 </script>
 
-<style src="./switches.scss" lang="scss"></style>
+<!--<style src="./switches.less" lang="less"></style>-->
diff --git a/src/pages/other/ServiceProtocol.vue b/src/pages/other/ServiceProtocol.vue
index 94e6962..7081a85 100644
--- a/src/pages/other/ServiceProtocol.vue
+++ b/src/pages/other/ServiceProtocol.vue
@@ -1614,7 +1614,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 .ServiceProtocol {
diff --git a/src/pages/people/AddressList.vue b/src/pages/people/AddressList.vue
index e5dcedb..5481d98 100644
--- a/src/pages/people/AddressList.vue
+++ b/src/pages/people/AddressList.vue
@@ -43,7 +43,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 .AddressList {
@@ -66,7 +66,7 @@ export default {
         align-items: center;
 
         .left {
-          color: $second-text-color;
+          color: @second-text-color;
 
           img {
             width: 10px;
@@ -76,7 +76,7 @@ export default {
 
         .right {
           border-radius: 50%;
-          background: $second-text-color;
+          background: @second-text-color;
           padding: 5px;
           width: 10px;
           height: 10px;
@@ -88,7 +88,7 @@ export default {
       text-align: center;
       line-height: 6rem;
       height: 6rem;
-      color: $second-text-color;
+      color: @second-text-color;
 
     }
 
diff --git a/src/pages/people/FaceToFace.vue b/src/pages/people/FaceToFace.vue
index 5d2cb4a..d295aae 100644
--- a/src/pages/people/FaceToFace.vue
+++ b/src/pages/people/FaceToFace.vue
@@ -23,7 +23,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 .FaceToFace {
diff --git a/src/pages/people/FindAcquaintance.vue b/src/pages/people/FindAcquaintance.vue
index bff0ee5..5503ca8 100644
--- a/src/pages/people/FindAcquaintance.vue
+++ b/src/pages/people/FindAcquaintance.vue
@@ -200,7 +200,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 .from-bottom-enter-active,
@@ -229,7 +229,7 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid $line-color;
+    border-bottom: 1px solid @line-color;
 
     img {
       height: 2rem;
@@ -242,7 +242,7 @@ export default {
 
     .title {
       margin-top: 2rem;
-      color: $second-text-color;
+      color: @second-text-color;
       font-size: 1.2rem;
     }
   }
@@ -253,7 +253,7 @@ export default {
       align-items: center;
       margin-top: 2rem;
       margin-bottom: 1rem;
-      color: $second-text-color;
+      color: @second-text-color;
       font-size: 1.2rem;
 
       img {
@@ -271,7 +271,7 @@ export default {
         align-items: center;
 
         .left {
-          background: $second-btn-color;
+          background: @second-btn-color;
           border-radius: 50%;
           padding: 1rem;
           width: 2.4rem;
@@ -297,7 +297,7 @@ export default {
 
             .text2 {
               font-size: 1.2rem;
-              color: $second-text-color;
+              color: @second-text-color;
             }
           }
         }
@@ -312,7 +312,7 @@ export default {
         margin-top: 2rem;
         display: flex;
         align-items: center;
-        color: $second-text-color;
+        color: @second-text-color;
 
         img {
           margin-right: 1rem;
@@ -368,13 +368,13 @@ export default {
       }
     }
 
-    $footer-border-color: #eaeaf1;
+    @footer-border-color: #eaeaf1;
 
     .footer {
       width: 100%;
       display: flex;
       height: 4rem;
-      border-top: 1px solid $footer-border-color;
+      border-top: 1px solid @footer-border-color;
       font-size: 1.4rem;
 
       div {
@@ -383,7 +383,7 @@ export default {
         justify-content: center;
         width: 49%;
         text-align: center;
-        border-right: 1px solid $footer-border-color;
+        border-right: 1px solid @footer-border-color;
         opacity: .5;
 
         &:nth-last-child(1) {
@@ -441,7 +441,7 @@ export default {
       top: 1rem;
       right: 1rem;
       position: absolute;
-      background: $second-btn-color-tran;
+      background: @second-btn-color-tran;
       padding: .4rem;
       width: 1rem;
       border-radius: 50%;
@@ -457,7 +457,7 @@ export default {
       margin-top: 2rem;
       display: flex;
       align-items: center;
-      color: $second-text-color;
+      color: @second-text-color;
 
       img {
         margin-right: 1rem;
diff --git a/src/pages/people/Scan.vue b/src/pages/people/Scan.vue
index 5a1276e..2b9c7d8 100644
--- a/src/pages/people/Scan.vue
+++ b/src/pages/people/Scan.vue
@@ -37,7 +37,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../assets/scss/index";
 
 .Scan {
@@ -71,7 +71,7 @@ export default {
 
       img {
         border-radius: 50%;
-        background: $second-btn-color-tran;
+        background: @second-btn-color-tran;
         padding: 1.6rem;
         height: 2.4rem;
         margin-bottom: 1rem;
diff --git a/src/pages/people/components/People.vue b/src/pages/people/components/People.vue
index fd6c71d..de14b93 100644
--- a/src/pages/people/components/People.vue
+++ b/src/pages/people/components/People.vue
@@ -70,7 +70,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 @import "../../../assets/scss/index";
 
 .scale-enter-active,
@@ -103,7 +103,7 @@ export default {
   }
 
   .add {
-    background: $second-btn-color-tran;
+    background: @second-btn-color-tran;
     margin-right: 1.5rem;
     padding: 1.5rem;
     width: 1.8rem;
@@ -124,7 +124,7 @@ export default {
       }
 
       .detail {
-        color: $second-text-color;
+        color: @second-text-color;
         font-size: 1.2rem;
         margin-top: 4px;
       }
@@ -145,7 +145,7 @@ export default {
         }
 
         &.red {
-          background: $primary-btn-color;
+          background: @primary-btn-color;
         }
 
       }
@@ -163,7 +163,7 @@ export default {
     bottom: -100%;
     right: 1rem;
     border-radius: .8rem;
-    background: $second-btn-color;
+    background: @second-btn-color;
 
     .item {
       font-size: 1.4rem;
@@ -171,11 +171,11 @@ export default {
       display: flex;
       height: 4rem;
       align-items: center;
-      border-bottom: 1px solid $line-color;
+      border-bottom: 1px solid @line-color;
 
       &:nth-last-child(1) {
         border-bottom: none;
-        color: $primary-btn-color;
+        color: @primary-btn-color;
       }
 
       img {
@@ -188,7 +188,7 @@ export default {
       width: 0;
       height: 0;
       border: .7rem solid transparent;
-      border-bottom: .7rem solid $second-btn-color;
+      border-bottom: .7rem solid @second-btn-color;
       position: absolute;
       right: 1rem;
       top: -1.4rem;
diff --git a/src/router/index.js b/src/router/index.js
index 5439db8..ef6d359 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -42,6 +42,7 @@ import PasswordLogin from "../pages/login/PasswordLogin";
 import VerificationCode from "../pages/login/VerificationCode";
 import RetrievePassword from "../pages/login/RetrievePassword";
 import Help from "../pages/login/Help";
+import Attention2 from "../pages/home/Attention2";
 
 const routes = [
   // {path: '', component: Music},
@@ -49,6 +50,7 @@ const routes = [
   {path: '/', component: Index2},
   {path: '/home', component: Index},
   {path: '/attention', component: Attention},
+  // {path: '/attention', component: Attention2},
   {path: '/publish', component: Publish},
   {path: '/test', component: Test},
   {path: '/message', component: Message},