diff --git a/doc/develop.md b/doc/develop.md
index 1f9b8cff91f8ae86ebed2a25a84b632c9044daf0..9d1fdc43f0909fe58355b796f604509db3874014 100644
--- a/doc/develop.md
+++ b/doc/develop.md
@@ -1,4 +1,4 @@
-# 开发文档
+npm instasll# 开发文档
 
 ## 环境准备
 ### 云IDE
diff --git a/src/router.js b/src/router.js
index 189930ec5c296bc7641bfbd530edca388c773303..a7d9bb72d480bb4a4694121f17d505ec64c15dc1 100644
--- a/src/router.js
+++ b/src/router.js
@@ -43,6 +43,16 @@ const routes = [
             pageSpm: '1011.2266'
           }
         },
+        {
+          path: 'similar',
+          component: () => import('./view/pc/similar.vue'),
+          meta: {
+            title: '与我相似的用户 - 开源实验室',
+            navTitle:'相似用户',
+            name:'全网博主原力月度排名',
+            pageSpm: '1011.2266'
+          }
+        },
       ]
     },
     {
diff --git a/src/view/pc/similar.vue b/src/view/pc/similar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7ae9bc2e176820ee850dae480edddfdb112176df
--- /dev/null
+++ b/src/view/pc/similar.vue
@@ -0,0 +1,83 @@
+<template>
+  <!--  -->
+  <div class="force">
+    <div class="map">
+      <ForceMap :optionList="optionList" :mapStyle="mapStyle" title="原力值" @setrankList="setrankList"/>
+    </div>
+    <div class="user-rank-list">
+      <RankList title="用户原力月榜" @clear="clear" :dropdownList="dropdownList" listTitle="原力值" @dropdownFn="dropdownFn" :city="city" :rankData="rankData"/>
+    </div>
+  </div>
+</template>
+<script>
+import ForceMap from './mapForce.vue'
+import RankList from "./rankList.vue";
+import { getForceInfo } from '@/server/screen-data'
+export default {
+  data() {
+    return {
+      optionList: [],
+      rankData: [],
+      rankList:[],
+      city:'全国',
+      dropdownList:[],
+      mapStyle:{
+        width:'1000',
+        height:'900',
+        tooltip:true,
+        zoom:1.5
+      },
+    }
+  },
+  methods: {
+    dropdownFn (val){
+      this.city = val
+      this.rankData = this.optionList.find(it=>it.city == val).list
+    },
+    clear(){
+      this.rankData = this.rankList
+      this.city = '全国'
+    },
+    getlist() {
+      getForceInfo().then((res) => {
+        if (res.status == 200) {
+          this.optionList = res.data.data.cityInfoList
+          this.rankData = res.data.data.countryTop
+          this.rankList = res.data.data.countryTop
+          this.dropdownList = res.data.data.cityInfoList.map(it=>it.city)
+        }
+      }).catch(() => {
+
+      })
+    },
+    setrankList(data){
+      this.rankData = data.list
+      this.city = data.city
+    }
+  },
+  created(){
+    this.mapStyle.width = document.documentElement.clientWidth
+    this.mapStyle.height = document.documentElement.clientHeight-66
+  },
+  mounted() {
+    this.getlist()
+  },
+  components: {
+    ForceMap,
+    RankList
+  },
+}
+</script>
+<style scoped lang="scss">
+.force {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  .user-rank-list {
+    top: 40px;
+    position: absolute;
+    right: 40px;
+  }
+}
+</style>
\ No newline at end of file