diff --git a/src/components/style/diySelect.less b/src/components/style/diySelect.less
index 3430e9d8..b0b066a5 100644
--- a/src/components/style/diySelect.less
+++ b/src/components/style/diySelect.less
@@ -1,25 +1,26 @@
 @diySelect-prefix: diy-select;
-.@{diySelect-prefix}{
+.@{diySelect-prefix} {
   display: inline-block;
   width: 280px;
   background: #fff;
   height: 90px;
   position: relative;
-  &--label{
+  &--label {
     padding: 20px;
     height: 100%;
     line-height: 90-40px;
     position: relative;
-    &:after{
-      content: '▼';
+    &:after {
+      content: "▼";
       position: absolute;
       right: 20px;
-      transition: all .3s ease;
+      transition: all 0.3s ease;
       transform-origin: center;
+      transform: scale(0.6);
     }
   }
 
-  &--options{
+  &--options {
     background-color: #fff;
     position: absolute;
     left: 0;
@@ -27,49 +28,16 @@
     box-shadow: -1px 0 3px #ededed;
   }
 
-  &--option{
+  &--option {
     padding: 0 20px;
     height: 90px;
     border-top: 1px solid #ededed; /*no*/
     line-height: 90px;
   }
 
-  .open &--label{
-    &::after{
-      transform: rotate(180deg);
+  .open &--label {
+    &::after {
+      transform: scale(0.6) rotate(180deg);
     }
   }
 }
-
-
-
-// &-select{
-//   position: absolute;
-//   top: 0;
-//   left: 0;
-//   right: 0;
-//   bottom: 0;
-//   margin: auto;
-//   &--label{
-//     margin: 0;
-//     text-align: center;
-//     &::after{
-//       content: "▼"
-//     }
-//   }
-//   &--options{
-//     position: fixed;
-//     top: 90px;
-//     left: 0;
-//     right: 0;
-//     bottom: 0;
-//     background-color: rgba(0, 0, 0, .3);
-//   }
-//   &--option{
-//     width: 100%;
-//     height: 90px;
-//     text-align: center;
-//     background-color: #fff;
-//     border-bottom: 1px solid #ededed;
-//   }
-// }
diff --git a/src/page/message/children/notification.vue b/src/page/message/children/notification.vue
index 16025908..24e28169 100644
--- a/src/page/message/children/notification.vue
+++ b/src/page/message/children/notification.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="`${prefixCls}`">
-        <header slot="head" class="m-box m-justify-bet m-aln-center m-head-top m-pos-f m-main">
+        <header slot="head" class="m-box m-justify-bet m-aln-center m-head-top m-pos-f m-main m-bb1">
             <div class="m-box m-flex-grow1 m-aln-center m-flex-base0">
                 <svg class='m-style-svg m-svg-def' @click='goBack'>
                     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-back"></use>
@@ -20,9 +20,9 @@
                 ref='loadmore'
                 :class="`${prefixCls}-loadmore`"
         >
-            <section :class="`${prefixCls}-item`" v-for="notification in notifications" :key="notification.id">
-                <h5>{{ notification.data.content }}</h5>
-                <p>{{ notification.created_at | time2tips }}</p>
+            <section class="m-box m-aln-st m-main m-bb1 notification-item" v-for="notification in notifications" :key="notification.id">
+                <h5 class="m-flex-grow1 m-flex-shrink1">{{ notification.data.content }}</h5>
+                <p class="m-flex-grow0 m-flex-shrink0">{{ notification.created_at | time2tips }}</p>
             </section>
         </load-more>
     </div>
@@ -77,4 +77,17 @@ export default {
 };
 </script>
 <style lang="less">
+.notification-item {
+  padding: 30px;
+  h5 {
+    color: #333;
+    font-size: 30px;
+    font-weight: 400;
+  }
+  p {
+    margin-left: 30px;
+    color: #999;
+    font-size: 24px;
+  }
+}
 </style>
diff --git a/src/page/message/list/audits.vue b/src/page/message/list/audits.vue
index 17665144..0441926b 100644
--- a/src/page/message/list/audits.vue
+++ b/src/page/message/list/audits.vue
@@ -1,9 +1,17 @@
 <template>
   <div :class="`${prefixCls}`">
-    <head-top :go-back='goBack'>
-      <diy-select slot='nav' v-model='currentType' :options='options' placeholder='动态评论置顶'></diy-select>
-    </head-top>
-    <div :class="`${prefixCls}-container`">
+    <header class="m-box m-head-top m-pos-f m-main m-bb1">
+      <div class="m-box m-aln-center m-flex-grow1 m-flex-base0">
+        <svg class="m-style-svg m-svg-def" @click="goBack">
+          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-back"></use>
+        </svg>
+      </div>
+      <div class="m-box m-aln-center m-flex-grow2 m-flex-base2 m-justify-center">
+        <diy-select slot='nav' v-model='currentType' :options='options' placeholder='动态评论置顶'></diy-select>
+      </div>
+      <div class="m-box m-aln-center m-flex-grow1 m-flex-base0 m-justify-end"></div>
+    </header>
+    <div :class="`${prefixCls}-container`" style="padding-top: 0.9rem">
       <router-view></router-view>
     </div>
   </div>
diff --git a/src/page/message/style.less b/src/page/message/style.less
index 5446f00b..d320c491 100644
--- a/src/page/message/style.less
+++ b/src/page/message/style.less
@@ -1,26 +1,6 @@
 @message-prefix: message;
 @msg-prefix: msg;
 @msgList-prefix: msgList;
-@notification-prefix: notification;
-/**** 通知页面 ****/
-.@{notification-prefix} {
-    &-item {
-        padding: 20px;
-        background-color: #fff;
-        border-bottom: 1px solid #f6f6f6;
-        h5 {
-            font-size: 30px;
-            margin: 0;
-            color: #333;
-            font-weight: 400;
-        }
-        p {
-            font-size: 24px;
-            color: #999;
-            margin: 20px 0 0;
-        }
-    }
-}
 
 /**** message页面 ****/
 .@{message-prefix} {
diff --git a/src/page/rank/lists/balanceList.vue b/src/page/rank/lists/balanceList.vue
index 885f4a52..79293edc 100644
--- a/src/page/rank/lists/balanceList.vue
+++ b/src/page/rank/lists/balanceList.vue
@@ -1,10 +1,18 @@
 <template>
   <div :class="prefixCls">
-    <head-top :go-back='cancel' append='true' title='财富达人排行榜'>
-      <div slot='append'>
-        
+    <header slot="head" class="m-box m-justify-bet m-aln-center m-head-top m-pos-f m-main m-bb1">
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0">
+        <svg class='m-style-svg m-svg-def' @click='cancel'>
+          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-back"></use>
+        </svg>
       </div>
-    </head-top>
+      <div class="m-box-model m-flex-grow1 m-aln-center m-flex-base0 m-head-top-title">
+        <span>财富达人排行榜</span>
+      </div>
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0 m-justify-end">
+
+      </div>
+    </header>
     <div :class="`${prefixCls}-list`">
       <div :class="`${prefixCls}-list-item`" v-for="(user, index) in users" :key="user.id">
         <span :class="{ top: index < 3 }" class="rank">{{ index + 1 }}</span>
@@ -15,7 +23,9 @@
           </div>
         </div>
         <template>
-            <v-icon :type='`base-${isFollow(user.id)}`' class='find-item-follow-icon' @click.native='followUser(user.id)'></v-icon>
+            <svg class="m-style-svg m-svg-big" @click.stop="followUser(user, isFollow(user))">
+              <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="`#base-${isFollow(user)}`"></use>
+            </svg>
         </template>
       </div>
     </div>
@@ -24,13 +34,14 @@
 
 <script>
 import HeadTop from "../../../components/HeadTop";
+import { followUserByStatus } from "@/api/user.js";
+
 const prefixCls = "rankItem";
 export default {
   components: {
     HeadTop
   },
   name: "balanceList",
-  props: {},
   data() {
     return {
       prefixCls,
@@ -45,12 +56,13 @@ export default {
   },
 
   methods: {
-    isFollow(id) {
-      let user = this.$store.getters.getUserById(id);
+    isFollow(user) {
       const { follower = false, following = false } = user;
       return follower && following
         ? "eachFollow"
-        : follower ? "follow" : "unFollow";
+        : follower
+          ? "follow"
+          : "unFollow";
     },
     cancel() {
       this.to("/rank/users");
@@ -61,18 +73,12 @@ export default {
         this.$router.push(path);
       }
     },
-    followUser(id) {
+    followUser(user, status) {
       if (this.loading) return;
       this.loading = true;
-      let user = this.$store.getters.getUserById(id);
-      this.$store
-        .dispatch("FOLLOW_USER", {
-          id,
-          status: this.isFollow(id)
-        })
-        .then(({ follower }) => {
-          user.follower = follower;
-          this.$store.commit("SAVE_USER", user);
+      followUserByStatus({ status, id: user.id })
+        .then(state => {
+          user.follower = state;
           this.loading = false;
         })
         .catch(err => {
@@ -83,9 +89,7 @@ export default {
           this.loading = false;
         });
     }
-  },
-
-  created() {}
+  }
 };
 </script>
 
diff --git a/src/page/rank/lists/checkinList.vue b/src/page/rank/lists/checkinList.vue
index 3ac339cd..611f8e10 100644
--- a/src/page/rank/lists/checkinList.vue
+++ b/src/page/rank/lists/checkinList.vue
@@ -1,10 +1,18 @@
 <template>
   <div :class="prefixCls">
-    <head-top :go-back='cancel' append='true' title='社区签到排行榜'>
-      <div slot='append'>
-        
+    <header slot="head" class="m-box m-justify-bet m-aln-center m-head-top m-pos-f m-main m-bb1">
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0">
+        <svg class='m-style-svg m-svg-def' @click='cancel'>
+          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-back"></use>
+        </svg>
       </div>
-    </head-top>
+      <div class="m-box-model m-flex-grow1 m-aln-center m-flex-base0 m-head-top-title">
+        <span>社区签到排行榜</span>
+      </div>
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0 m-justify-end">
+
+      </div>
+    </header>
     <div :class="`${prefixCls}-list`">
       <div :class="`${prefixCls}-list-item`" v-for="(user, index) in users" :key="user.id">
         <span :class="{ top: index < 3 }" class="rank">{{ index + 1 }}</span>
@@ -16,7 +24,9 @@
           </div>
         </div>
         <template>
-            <v-icon :type='`base-${isFollow(user.id)}`' class='find-item-follow-icon' @click.native='followUser(user.id)'></v-icon>
+          <svg class="m-style-svg m-svg-big" @click.stop="followUser(user, isFollow(user))">
+            <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="`#base-${isFollow(user)}`"></use>
+          </svg>
         </template>
       </div>
     </div>
@@ -25,6 +35,7 @@
 
 <script>
 import HeadTop from "../../../components/HeadTop";
+import { followUserByStatus } from "@/api/user.js";
 const prefixCls = "rankItem";
 export default {
   components: {
@@ -46,12 +57,13 @@ export default {
   },
 
   methods: {
-    isFollow(id) {
-      let user = this.$store.getters.getUserById(id);
+    isFollow(user) {
       const { follower = false, following = false } = user;
       return follower && following
         ? "eachFollow"
-        : follower ? "follow" : "unFollow";
+        : follower
+          ? "follow"
+          : "unFollow";
     },
     cancel() {
       this.to("/rank/users");
@@ -62,18 +74,12 @@ export default {
         this.$router.push(path);
       }
     },
-    followUser(id) {
+    followUser(user, status) {
       if (this.loading) return;
       this.loading = true;
-      let user = this.$store.getters.getUserById(id);
-      this.$store
-        .dispatch("FOLLOW_USER", {
-          id,
-          status: this.isFollow(id)
-        })
-        .then(({ follower }) => {
-          user.follower = follower;
-          this.$store.commit("SAVE_USER", user);
+      followUserByStatus({ status, id: user.id })
+        .then(state => {
+          user.follower = state;
           this.loading = false;
         })
         .catch(err => {
diff --git a/src/page/rank/lists/exportList.vue b/src/page/rank/lists/exportList.vue
index 856c5c01..23dd44fb 100644
--- a/src/page/rank/lists/exportList.vue
+++ b/src/page/rank/lists/exportList.vue
@@ -1,10 +1,18 @@
 <template>
   <div :class="prefixCls">
-    <head-top :go-back='cancel' append='true' title='社区专家排行榜'>
-      <div slot='append'>
-        
+    <header slot="head" class="m-box m-justify-bet m-aln-center m-head-top m-pos-f m-main m-bb1">
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0">
+        <svg class='m-style-svg m-svg-def' @click='cancel'>
+          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-back"></use>
+        </svg>
       </div>
-    </head-top>
+      <div class="m-box-model m-flex-grow1 m-aln-center m-flex-base0 m-head-top-title">
+        <span>社区专家排行榜</span>
+      </div>
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0 m-justify-end">
+
+      </div>
+    </header>
     <div :class="`${prefixCls}-list`">
       <div :class="`${prefixCls}-list-item`" v-for="(user, index) in users" :key="user.id">
         <span :class="{ top: index < 3 }" class="rank">{{ index + 1 }}</span>
@@ -15,7 +23,9 @@
           </div>
         </div>
         <template>
-            <v-icon :type='`base-${isFollow(user.id)}`' class='find-item-follow-icon' @click.native='followUser(user.id)'></v-icon>
+          <svg class="m-style-svg m-svg-big" @click.stop="followUser(user, isFollow(user))">
+            <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="`#base-${isFollow(user)}`"></use>
+          </svg>
         </template>
       </div>
     </div>
@@ -24,6 +34,7 @@
 
 <script>
 import HeadTop from "../../../components/HeadTop";
+import { followUserByStatus } from "@/api/user.js";
 const prefixCls = "rankItem";
 export default {
   components: {
@@ -45,12 +56,13 @@ export default {
   },
 
   methods: {
-    isFollow(id) {
-      let user = this.$store.getters.getUserById(id);
+    isFollow(user) {
       const { follower = false, following = false } = user;
       return follower && following
         ? "eachFollow"
-        : follower ? "follow" : "unFollow";
+        : follower
+          ? "follow"
+          : "unFollow";
     },
     cancel() {
       this.to("/rank/users");
@@ -61,18 +73,12 @@ export default {
         this.$router.push(path);
       }
     },
-    followUser(id) {
+    followUser(user, status) {
       if (this.loading) return;
       this.loading = true;
-      let user = this.$store.getters.getUserById(id);
-      this.$store
-        .dispatch("FOLLOW_USER", {
-          id,
-          status: this.isFollow(id)
-        })
-        .then(({ follower }) => {
-          user.follower = follower;
-          this.$store.commit("SAVE_USER", user);
+      followUserByStatus({ status, id: user.id })
+        .then(state => {
+          user.follower = state;
           this.loading = false;
         })
         .catch(err => {
diff --git a/src/page/rank/lists/fansList.vue b/src/page/rank/lists/fansList.vue
index e163055d..3ff5c36a 100644
--- a/src/page/rank/lists/fansList.vue
+++ b/src/page/rank/lists/fansList.vue
@@ -1,10 +1,18 @@
 <template>
   <div :class="prefixCls">
-    <head-top :go-back='cancel' append='true' title='全站粉丝排行榜'>
-      <div slot='append'>
-        
+    <header slot="head" class="m-box m-justify-bet m-aln-center m-head-top m-pos-f m-main m-bb1">
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0">
+        <svg class='m-style-svg m-svg-def' @click='cancel'>
+          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-back"></use>
+        </svg>
       </div>
-    </head-top>
+      <div class="m-box-model m-flex-grow1 m-aln-center m-flex-base0 m-head-top-title">
+        <span>全站粉丝排行榜</span>
+      </div>
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0 m-justify-end">
+
+      </div>
+    </header>
     <div :class="`${prefixCls}-list`">
       <div :class="`${prefixCls}-list-item`" v-for="(user, index) in users" :key="user.id">
         <span :class="{ top: index < 3 }" class="rank">{{ index + 1 }}</span>
@@ -16,7 +24,9 @@
           </div>
         </div>
         <template>
-            <v-icon :type='`base-${isFollow(user.id)}`' class='find-item-follow-icon' @click.native='followUser(user.id)'></v-icon>
+          <svg class="m-style-svg m-svg-big" @click.stop="followUser(user, isFollow(user))">
+            <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="`#base-${isFollow(user)}`"></use>
+          </svg>
         </template>
       </div>
     </div>
@@ -25,6 +35,7 @@
 
 <script>
 import HeadTop from "../../../components/HeadTop";
+import { followUserByStatus } from "@/api/user.js";
 const prefixCls = "rankItem";
 export default {
   components: {
@@ -46,12 +57,13 @@ export default {
   },
 
   methods: {
-    isFollow(id) {
-      let user = this.$store.getters.getUserById(id);
+    isFollow(user) {
       const { follower = false, following = false } = user;
       return follower && following
         ? "eachFollow"
-        : follower ? "follow" : "unFollow";
+        : follower
+          ? "follow"
+          : "unFollow";
     },
     cancel() {
       this.to("/rank/users");
@@ -62,18 +74,12 @@ export default {
         this.$router.push(path);
       }
     },
-    followUser(id) {
+    followUser(user, status) {
       if (this.loading) return;
       this.loading = true;
-      let user = this.$store.getters.getUserById(id);
-      this.$store
-        .dispatch("FOLLOW_USER", {
-          id,
-          status: this.isFollow(id)
-        })
-        .then(({ follower }) => {
-          user.follower = follower;
-          this.$store.commit("SAVE_USER", user);
+      followUserByStatus({ status, id: user.id })
+        .then(state => {
+          user.follower = state;
           this.loading = false;
         })
         .catch(err => {
diff --git a/src/page/rank/lists/incomeList.vue b/src/page/rank/lists/incomeList.vue
index 96876cf3..6744a2b0 100644
--- a/src/page/rank/lists/incomeList.vue
+++ b/src/page/rank/lists/incomeList.vue
@@ -1,10 +1,18 @@
 <template>
   <div :class="prefixCls">
-    <head-top :go-back='cancel' append='true' title='收入达人排行榜'>
-      <div slot='append'>
-        
+    <header slot="head" class="m-box m-justify-bet m-aln-center m-head-top m-pos-f m-main m-bb1">
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0">
+        <svg class='m-style-svg m-svg-def' @click='cancel'>
+          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-back"></use>
+        </svg>
       </div>
-    </head-top>
+      <div class="m-box-model m-flex-grow1 m-aln-center m-flex-base0 m-head-top-title">
+        <span>收入达人排行榜</span>
+      </div>
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0 m-justify-end">
+
+      </div>
+    </header>
     <div :class="`${prefixCls}-list`">
       <div :class="`${prefixCls}-list-item`" v-for="(user, index) in users" :key="user.id">
         <span :class="{ top: index < 3 }" class="rank">{{ index + 1 }}</span>
@@ -15,7 +23,9 @@
           </div>
         </div>
         <template>
-            <v-icon :type='`base-${isFollow(user.id)}`' class='find-item-follow-icon' @click.native='followUser(user.id)'></v-icon>
+          <svg class="m-style-svg m-svg-big" @click.stop="followUser(user, isFollow(user))">
+            <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="`#base-${isFollow(user)}`"></use>
+          </svg>
         </template>
       </div>
     </div>
@@ -24,6 +34,7 @@
 
 <script>
 import HeadTop from "../../../components/HeadTop";
+import { followUserByStatus } from "@/api/user.js";
 const prefixCls = "rankItem";
 export default {
   components: {
@@ -45,12 +56,13 @@ export default {
   },
 
   methods: {
-    isFollow(id) {
-      let user = this.$store.getters.getUserById(id);
+    isFollow(user) {
       const { follower = false, following = false } = user;
       return follower && following
         ? "eachFollow"
-        : follower ? "follow" : "unFollow";
+        : follower
+          ? "follow"
+          : "unFollow";
     },
     cancel() {
       this.to("/rank/users");
@@ -61,18 +73,12 @@ export default {
         this.$router.push(path);
       }
     },
-    followUser(id) {
+    followUser(user, status) {
       if (this.loading) return;
       this.loading = true;
-      let user = this.$store.getters.getUserById(id);
-      this.$store
-        .dispatch("FOLLOW_USER", {
-          id,
-          status: this.isFollow(id)
-        })
-        .then(({ follower }) => {
-          user.follower = follower;
-          this.$store.commit("SAVE_USER", user);
+      followUserByStatus({ status, id: user.id })
+        .then(state => {
+          user.follower = state;
           this.loading = false;
         })
         .catch(err => {
diff --git a/src/page/rank/lists/questionLikesList.vue b/src/page/rank/lists/questionLikesList.vue
index c81e5a91..fc0271e2 100644
--- a/src/page/rank/lists/questionLikesList.vue
+++ b/src/page/rank/lists/questionLikesList.vue
@@ -1,10 +1,18 @@
 <template>
   <div :class="prefixCls">
-    <head-top :go-back='cancel' append='true' title='问答达人排行榜'>
-      <div slot='append'>
-        
+    <header slot="head" class="m-box m-justify-bet m-aln-center m-head-top m-pos-f m-main m-bb1">
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0">
+        <svg class='m-style-svg m-svg-def' @click='cancel'>
+          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-back"></use>
+        </svg>
       </div>
-    </head-top>
+      <div class="m-box-model m-flex-grow1 m-aln-center m-flex-base0 m-head-top-title">
+        <span>问答达人排行榜</span>
+      </div>
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0 m-justify-end">
+
+      </div>
+    </header>
     <div :class="`${prefixCls}-list`">
       <div :class="`${prefixCls}-list-item`" v-for="(user, index) in users" :key="user.id">
         <span :class="{ top: index < 3 }" class="rank">{{ index + 1 }}</span>
@@ -16,7 +24,9 @@
           </div>
         </div>
         <template>
-            <v-icon :type='`base-${isFollow(user.id)}`' class='find-item-follow-icon' @click.native='followUser(user.id)'></v-icon>
+          <svg class="m-style-svg m-svg-big" @click.stop="followUser(user, isFollow(user))">
+            <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="`#base-${isFollow(user)}`"></use>
+          </svg>
         </template>
       </div>
     </div>
@@ -25,6 +35,7 @@
 
 <script>
 import HeadTop from "../../../components/HeadTop";
+import { followUserByStatus } from "@/api/user.js";
 const prefixCls = "rankItem";
 export default {
   components: {
@@ -46,12 +57,13 @@ export default {
   },
 
   methods: {
-    isFollow(id) {
-      let user = this.$store.getters.getUserById(id);
+    isFollow(user) {
       const { follower = false, following = false } = user;
       return follower && following
         ? "eachFollow"
-        : follower ? "follow" : "unFollow";
+        : follower
+          ? "follow"
+          : "unFollow";
     },
     cancel() {
       this.to("/rank/users");
@@ -62,18 +74,12 @@ export default {
         this.$router.push(path);
       }
     },
-    followUser(id) {
+    followUser(user, status) {
       if (this.loading) return;
       this.loading = true;
-      let user = this.$store.getters.getUserById(id);
-      this.$store
-        .dispatch("FOLLOW_USER", {
-          id,
-          status: this.isFollow(id)
-        })
-        .then(({ follower }) => {
-          user.follower = follower;
-          this.$store.commit("SAVE_USER", user);
+      followUserByStatus({ status, id: user.id })
+        .then(state => {
+          user.follower = state;
           this.loading = false;
         })
         .catch(err => {
diff --git a/src/page/rank/lists/rankFeedList.vue b/src/page/rank/lists/rankFeedList.vue
index ae76900d..cbb8fb77 100644
--- a/src/page/rank/lists/rankFeedList.vue
+++ b/src/page/rank/lists/rankFeedList.vue
@@ -1,10 +1,18 @@
 <template>
   <div :class="prefixCls">
-    <head-top :go-back='cancel' append='true' :title='`${title}动态排行榜`'>
-      <div slot='append'>
-        
+    <header slot="head" class="m-box m-justify-bet m-aln-center m-head-top m-pos-f m-main m-bb1">
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0">
+        <svg class='m-style-svg m-svg-def' @click='cancel'>
+          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-back"></use>
+        </svg>
       </div>
-    </head-top>
+      <div class="m-box-model m-flex-grow1 m-aln-center m-flex-base0 m-head-top-title">
+        <span>{{title}}动态排行榜</span>
+      </div>
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0 m-justify-end">
+
+      </div>
+    </header>
     <div :class="`${prefixCls}-list`">
       <div :class="`${prefixCls}-list-item`" v-for="(user, index) in users" :key="user.id">
         <span :class="{ top: index < 3 }" class="rank">{{ index + 1 }}</span>
@@ -16,7 +24,9 @@
           </div>
         </div>
         <template>
-            <v-icon :type='`base-${isFollow(user.id)}`' class='find-item-follow-icon' @click.native='followUser(user.id)'></v-icon>
+          <svg class="m-style-svg m-svg-big" @click.stop="followUser(user, isFollow(user))">
+            <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="`#base-${isFollow(user)}`"></use>
+          </svg>
         </template>
       </div>
     </div>
@@ -25,6 +35,7 @@
 
 <script>
 import HeadTop from "../../../components/HeadTop";
+import { followUserByStatus } from "@/api/user.js";
 const prefixCls = "rankItem";
 const api = "/feeds/ranks";
 const config = {
@@ -69,12 +80,13 @@ export default {
   },
 
   methods: {
-    isFollow(id) {
-      let user = this.$store.getters.getUserById(id);
+    isFollow(user) {
       const { follower = false, following = false } = user;
       return follower && following
         ? "eachFollow"
-        : follower ? "follow" : "unFollow";
+        : follower
+          ? "follow"
+          : "unFollow";
     },
     cancel() {
       this.to("/rank/feeds");
@@ -85,18 +97,12 @@ export default {
         this.$router.push(path);
       }
     },
-    followUser(id) {
+    followUser(user, status) {
       if (this.loading) return;
       this.loading = true;
-      let user = this.$store.getters.getUserById(id);
-      this.$store
-        .dispatch("FOLLOW_USER", {
-          id,
-          status: this.isFollow(id)
-        })
-        .then(({ follower }) => {
-          user.follower = follower;
-          this.$store.commit("SAVE_USER", user);
+      followUserByStatus({ status, id: user.id })
+        .then(state => {
+          user.follower = state;
           this.loading = false;
         })
         .catch(err => {
diff --git a/src/page/rank/lists/rankNewsList.vue b/src/page/rank/lists/rankNewsList.vue
index fbda3204..24c360c7 100644
--- a/src/page/rank/lists/rankNewsList.vue
+++ b/src/page/rank/lists/rankNewsList.vue
@@ -1,10 +1,18 @@
 <template>
   <div :class="prefixCls">
-    <head-top :go-back='cancel' append='true' :title='`${title}资讯排行榜`'>
-      <div slot='append'>
-        
+    <header slot="head" class="m-box m-justify-bet m-aln-center m-head-top m-pos-f m-main m-bb1">
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0">
+        <svg class='m-style-svg m-svg-def' @click='cancel'>
+          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-back"></use>
+        </svg>
       </div>
-    </head-top>
+      <div class="m-box-model m-flex-grow1 m-aln-center m-flex-base0 m-head-top-title">
+        <span>{{title}}资讯排行榜</span>
+      </div>
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0 m-justify-end">
+
+      </div>
+    </header>
     <div :class="`${prefixCls}-list`">
       <div :class="`${prefixCls}-list-item`" v-for="(user, index) in users" :key="user.id">
         <span :class="{ top: index < 3 }" class="rank">{{ index + 1 }}</span>
@@ -16,7 +24,9 @@
           </div>
         </div>
         <template>
-            <v-icon :type='`base-${isFollow(user.id)}`' class='find-item-follow-icon' @click.native='followUser(user.id)'></v-icon>
+          <svg class="m-style-svg m-svg-big" @click.stop="followUser(user, isFollow(user))">
+            <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="`#base-${isFollow(user)}`"></use>
+          </svg>
         </template>
       </div>
     </div>
@@ -25,6 +35,7 @@
 
 <script>
 import HeadTop from "../../../components/HeadTop";
+import { followUserByStatus } from "@/api/user.js";
 const prefixCls = "rankItem";
 const api = "/news/ranks";
 const config = {
@@ -68,12 +79,13 @@ export default {
   },
 
   methods: {
-    isFollow(id) {
-      let user = this.$store.getters.getUserById(id);
+    isFollow(user) {
       const { follower = false, following = false } = user;
       return follower && following
         ? "eachFollow"
-        : follower ? "follow" : "unFollow";
+        : follower
+          ? "follow"
+          : "unFollow";
     },
     cancel() {
       this.to("/rank/news");
@@ -84,18 +96,12 @@ export default {
         this.$router.push(path);
       }
     },
-    followUser(id) {
+    followUser(user, status) {
       if (this.loading) return;
       this.loading = true;
-      let user = this.$store.getters.getUserById(id);
-      this.$store
-        .dispatch("FOLLOW_USER", {
-          id,
-          status: this.isFollow(id)
-        })
-        .then(({ follower }) => {
-          user.follower = follower;
-          this.$store.commit("SAVE_USER", user);
+      followUserByStatus({ status, id: user.id })
+        .then(state => {
+          user.follower = state;
           this.loading = false;
         })
         .catch(err => {
diff --git a/src/page/rank/lists/rankQuestionList.vue b/src/page/rank/lists/rankQuestionList.vue
index 5652cf25..0b079510 100644
--- a/src/page/rank/lists/rankQuestionList.vue
+++ b/src/page/rank/lists/rankQuestionList.vue
@@ -1,10 +1,18 @@
 <template>
   <div :class="prefixCls">
-    <head-top :go-back='cancel' append='true' :title='`${title}解答排行榜`'>
-      <div slot='append'>
-        
+    <header slot="head" class="m-box m-justify-bet m-aln-center m-head-top m-pos-f m-main m-bb1">
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0">
+        <svg class='m-style-svg m-svg-def' @click='cancel'>
+          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-back"></use>
+        </svg>
       </div>
-    </head-top>
+      <div class="m-box-model m-flex-grow1 m-aln-center m-flex-base0 m-head-top-title">
+        <span>{{title}}解答排行榜</span>
+      </div>
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0 m-justify-end">
+
+      </div>
+    </header>
     <div :class="`${prefixCls}-list`">
       <div :class="`${prefixCls}-list-item`" v-for="(user, index) in users" :key="user.id">
         <span :class="{ top: index < 3 }" class="rank">{{ index + 1 }}</span>
@@ -16,7 +24,9 @@
           </div>
         </div>
         <template>
-            <v-icon :type='`base-${isFollow(user.id)}`' class='find-item-follow-icon' @click.native='followUser(user.id)'></v-icon>
+          <svg class="m-style-svg m-svg-big" @click.stop="followUser(user, isFollow(user))">
+            <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="`#base-${isFollow(user)}`"></use>
+          </svg>
         </template>
       </div>
     </div>
@@ -25,6 +35,7 @@
 
 <script>
 import HeadTop from "../../../components/HeadTop";
+import { followUserByStatus } from "@/api/user.js";
 const prefixCls = "rankItem";
 const api = "/question-ranks/answers";
 const config = {
@@ -68,12 +79,13 @@ export default {
   },
 
   methods: {
-    isFollow(id) {
-      let user = this.$store.getters.getUserById(id);
+    isFollow(user) {
       const { follower = false, following = false } = user;
       return follower && following
         ? "eachFollow"
-        : follower ? "follow" : "unFollow";
+        : follower
+          ? "follow"
+          : "unFollow";
     },
     cancel() {
       this.to("/rank/questions");
@@ -84,18 +96,12 @@ export default {
         this.$router.push(path);
       }
     },
-    followUser(id) {
+    followUser(user, status) {
       if (this.loading) return;
       this.loading = true;
-      let user = this.$store.getters.getUserById(id);
-      this.$store
-        .dispatch("FOLLOW_USER", {
-          id,
-          status: this.isFollow(id)
-        })
-        .then(({ follower }) => {
-          user.follower = follower;
-          this.$store.commit("SAVE_USER", user);
+      followUserByStatus({ status, id: user.id })
+        .then(state => {
+          user.follower = state;
           this.loading = false;
         })
         .catch(err => {
diff --git a/src/page/rank/rank.vue b/src/page/rank/rank.vue
index 97d1ff98..b7e48a74 100644
--- a/src/page/rank/rank.vue
+++ b/src/page/rank/rank.vue
@@ -1,10 +1,18 @@
 <template>
   <div>
-    <head-top :go-back='cancel' append='true' title='排行榜'>
-      <div slot='append'>
-        
+    <header slot="head" class="m-box m-justify-bet m-aln-center m-head-top m-pos-f m-main m-bb1">
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0">
+        <svg class='m-style-svg m-svg-def' @click='cancel'>
+          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-back"></use>
+        </svg>
       </div>
-    </head-top>
+      <div class="m-box-model m-flex-grow1 m-aln-center m-flex-base0 m-head-top-title">
+        <span>排行榜</span>
+      </div>
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0 m-justify-end">
+
+      </div>
+    </header>
     <div class="rank-nav">
       <router-link tag='div' class='rank-nav-item' to='/rank/users'>用户</router-link>
       <router-link tag='div' class='rank-nav-item' to='/rank/questions'>问答</router-link>
diff --git a/src/page/wallet/WalletDetail.vue b/src/page/wallet/WalletDetail.vue
index 14c5ccf0..fd1f65f8 100644
--- a/src/page/wallet/WalletDetail.vue
+++ b/src/page/wallet/WalletDetail.vue
@@ -125,25 +125,6 @@ export default {
   .m-head-top {
     overflow: initial;
   }
-  .diy-select {
-    text-align: center;
-    height: 100%;
-  }
-  .diy-select--label:after {
-    display: inline-block;
-    position: initial;
-  }
-  .diy-select--options {
-    position: fixed;
-    top: 90px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.2);
-    .diy-select--option {
-      background-color: #fff;
-    }
-  }
   .m-wallet-list {
     padding-top: 90px;
   }
diff --git a/src/style/common.less b/src/style/common.less
index 9d6b4bb0..505852ab 100644
--- a/src/style/common.less
+++ b/src/style/common.less
@@ -79,6 +79,26 @@
     white-space: nowrap;
     font-size: 36px;
   }
+  .diy-select {
+    text-align: center;
+    height: 100%;
+  }
+  .diy-select--label:after {
+    display: inline-block;
+    position: initial;
+    color: #ccc;
+  }
+  .diy-select--options {
+    position: fixed;
+    top: 90px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.2);
+    .diy-select--option {
+      background-color: #fff;
+    }
+  }
   .m-head-nav {
     height: 100%;
     font-size: 36px;