interest update

src/view/pc/home.vue

@@ -68,6 +68,11 @@ export default {
           key:'/force',
           desc:'原力分数的增减原则',
           url:'https://bbs.csdn.net/topics/602534373'
+        },
+        {
+          key:'/interest',
+          desc:'技术兴趣分数的增减原则',
+          url:'https://bbs.csdn.net/topics/602534373'
         }
       ],
       popoverItem:'',

src/view/pc/interest.vue

 <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"/>
+      <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'
-
+import RankList from "./interestRankList.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
+      rankList:[],
+      city:'全国',
+      dropdownList:[],
+      mapStyle:{
+        width:'1000',
+        height:'900',
+        tooltip:true,
+        zoom:1.5
       },
     }
   },
   methods: {
-    dropdownFn(val) {
+    dropdownFn (val){
       this.city = val
-      this.rankData = this.optionList.find(it => it.city == val).list
+      this.rankData = this.optionList.find(it=>it.city == val).list
     },
-    clear() {
+    clear(){
       this.rankData = this.rankList
       this.city = '全国'
     },
@@ -43,25 +44,23 @@ export default {
           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)
+          this.dropdownList = res.data.data.cityInfoList.map(it=>it.city)
         }
       }).catch(() => {
 
       })
     },
-    setrankList(data) {
+    setrankList(data){
       this.rankData = data.list
       this.city = data.city
     }
   },
-  created() {
+  created(){
     this.mapStyle.width = document.documentElement.clientWidth
-    this.mapStyle.height = document.documentElement.clientHeight - 66
-    console.log("cnmcnmcnmcnm")
+    this.mapStyle.height = document.documentElement.clientHeight-66
   },
   mounted() {
     this.getlist()
-    console.log("mounted")
   },
   components: {
     ForceMap,
@@ -75,7 +74,6 @@ export default {
   display: flex;
   justify-content: space-between;
   position: relative;
-
   .user-rank-list {
     top: 40px;
     position: absolute;

src/view/pc/interestRankList.vue

+<template>
+  <div class="rank-list-box">
+    <div class="force-slide" :style="!slideopen?'right:-10px':''" >
+      <!-- <div class="force-slide"  v-if="userItem || ( title !== '铁粉榜' && city !=='全国')" @click="clear"> -->
+      <img src="@/assets/img/go-back.png" style="margin-bottom:16px;" v-if="slideopen &&(userItem || (city !=='全国'))" @click="clear" alt="">
+      <div class="force-slide-open" @click="slideopen = !slideopen">
+        <img src="@/assets/img/rank-open.png" alt="">
+        <span>{{slideopen?'折叠榜单':'展开榜单'}}</span>
+      </div>
+    </div>
+    <div class="rank-list" v-if="slideopen" :style="`height:${listHeight}px;`" ref="rank-list">
+
+      <div class="title">
+        <span>{{ title }}</span>
+        <!-- <span class="clear" @click="clear" v-if="cityObj">回退</span> -->
+        <!-- <p v-if="city" @click="cityFlag=!cityFlag"><img src="@/assets/img/place-pc.png" alt="" /><span style="font-size: 16px;">{{city}}</span></p>
+        <div class="city-list" v-show="city&&cityFlag">
+          <p>全国</p>
+        </div> -->
+        <el-dropdown  v-if="city&&!userItem" trigger="click" class="dropdown" @visible-change="(val)=>{cityFlag = val}" @command="dropdownFn" :hide-on-click="true">
+          <p><span>地区：</span><span style="font-size: 16px;">{{city}}</span> <i :class="!cityFlag?'el-icon-arrow-down':'el-icon-arrow-up'"></i>  </p>
+          <el-dropdown-menu class="rank-dropdown" slot="dropdown" >
+            <el-dropdown-item :command="it" v-for="(it,index) in dropdownList" :key="index">{{it}}</el-dropdown-item>
+
+          </el-dropdown-menu>
+        </el-dropdown>
+
+        <p v-if="userItem"><img src="@/assets/img/user.png" alt="" /><a target="_blank" :href="`https://blog.csdn.net/${userItem.username}`">{{userItem.nickname||userItem.username}}</a></p>
+      </div>
+      <div class="rank-list-nav border">
+        <span class="mar">排名</span>
+        <p><span>技术领域</span></p>
+        <span>兴趣值</span>
+      </div>
+      <ul class="user-list" ref="user-list">
+        <li class="rank-list-nav active" v-for="(item,index) in rankData" :key="index" @click="rankAdd(item)">
+          <span class="mar">{{index+1}}</span>
+          <p>
+            <img :src="item.avatar" alt="" /><span
+          >{{item.nickname || item.username}}</span
+          >
+          </p>
+          <span>{{item.score}}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+      userItem:'',
+      listHeight:'',
+      cityFlag:false,
+      slideopen:true
+    }
+  },
+  methods: {
+    dropdownFn(val) {
+      this.$emit('dropdownFn',val)
+
+    },
+    clear () {
+      if(!this.userItem){
+        this.$emit('clear')
+      } else {
+        this.userItem = null;
+        this.$emit('clearRank');
+      }
+    },
+    rankAdd(item){
+      if (this.title == '用户原力月榜') {
+        window.open(`https://blog.csdn.net/`+item.username)
+      }else{
+        this.userItem = item
+        this.$emit('rankFans',item)
+      }
+    }
+  },
+  watch: {
+    rankData() {
+      this.$refs['user-list'].scrollTop = 0
+    },
+  },
+  props: ['title','rankData','city','listTitle','cityObj','dropdownList'],
+  mounted(){
+    this.listHeight = document.documentElement.clientHeight - 120
+    window.addEventListener("resize", () => {
+      this.listHeight = document.documentElement.clientHeight - 120
+    });
+    document.addEventListener("click",()=>{
+      this.cityFlag = false
+    })
+  },
+  beforeDestroy(){
+
+  }
+}
+</script>
+<style lang="scss">
+.rank-dropdown{
+  padding:4px 0;
+  width: 110px;
+  height:260px;
+  background: #1B2B4F;
+  box-shadow: 0px 2px 20px 0px rgba(17,27,51,0.7);
+  border: 1px solid #578AC5;
+  border-radius: 0px;
+  overflow: auto;
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #375a87;
+    border-radius: 3px;
+    transition: background-color 0.3s ease-in-out;
+  }
+  .popper__arrow{
+    display: none;
+  }
+  .el-dropdown-menu__item{
+    height: 36px;
+    text-align: center;
+    color: #77C0FF;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    word-break: break-all;
+    &:focus{
+      background: #2E4974;
+    }
+    &:hover{
+      background: #2E4974;
+      opacity: 0.9;
+    }
+  }
+}
+</style>
+<style scoped lang="scss">
+.rank-list-box{
+  position: relative;
+  .force-slide{
+    // padding: 10px;
+    position: absolute;
+    top: 10px;
+    right: 410px;
+    // left: 20px;
+    font-size: 14px;
+
+    img{
+      width: 28px;
+      height: 28px;
+      cursor: pointer;
+    }
+    .force-slide-open{
+      cursor: pointer;
+
+      font-size: 14px;
+      font-weight: 500;
+      color: #97ADC6;
+      display: flex;
+      flex-direction: column;
+      span{
+        margin-top: 8px;
+      }
+    }
+  }
+}
+.rank-list {
+  width: 400px;
+  height: 800px;
+  min-height: 500px;
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    display: flex;
+    justify-content: space-between;
+    height: 50px;
+    align-items: center;
+    background-image: url("@/assets/img/rank-right.png");
+    background-size: cover;
+    padding: 8px 28px 0px 24px;
+
+    span {
+      font-size: 20px;
+      font-weight: 500;
+      color: #77c0ff;
+    }
+    .clear{
+      cursor: pointer;
+    }
+    .iconfont{
+      background-image: url("@/assets/img/rank-right.png");
+      background-size: cover;
+    }
+    p {
+      display: flex;
+      align-items: center;
+      max-width: 200px;
+      font-size: 16px;
+      color:#77C0FF ;
+      span{
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        word-break: break-all;
+      }
+      &>span:nth-child(1){
+        width: 70px;
+      }
+      cursor: pointer;
+      img {
+        width: 18px;
+        height: 18px;
+        margin-right: 4px;
+      }
+      a {
+        color: #77C0FF;
+        flex: 1;
+        font-size: 16px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        word-break: break-all;
+      }
+    }
+  }
+  li,.rank-list-nav {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    padding: 0 24px;
+    &.border {
+      border-bottom: 1px solid #2b4670;
+    }
+    &.active:hover {
+      background: #141f38;
+      cursor: pointer;
+    }
+    p {
+      width: 188px;
+      display: flex;
+      align-items: center;
+      img {
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        margin-right: 10px;
+      }
+    }
+    & > span:nth-child(1) {
+      margin-right: 14px;
+      width: 40px;
+      text-align: center;
+    }
+    & > span:nth-child(3) {
+      margin-right: 10px;
+      width: 60px;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      word-break: break-all;
+    }
+    &>span:nth-child(4) {
+      width: 60px;
+      text-align: center;
+    }
+    &.active > span:nth-child(4) {
+      font-size: 14px;
+      font-weight: 500;
+      color: rgba(41, 255, 163, 0.8);
+    }
+    &.active > span {
+      font-size: 14px;
+    }
+    & > p {
+      // flex: 1;
+      margin-right: 10px;
+      span {
+        // width:160px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        word-break: break-all;
+      }
+    }
+    span {
+      font-size: 16px;
+      // font-weight: 500;
+      color: #77c0ff;
+    }
+  }
+  .border{
+    border-left: 2px solid #5F97D5;
+    border-right: 2px solid #5F97D5;
+    background: #192645;
+  }
+  .user-list {
+    flex: 1;
+    overflow: auto;
+    border:2px solid #5F97D5 ;
+    background: #192645;
+    border-top:none;
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: #375a87;
+      border-radius: 3px;
+      transition: background-color 0.3s ease-in-out;
+    }
+  }
+}
+@media screen and (max-width:1600px){
+  .rank-list {
+    // width: 368px;
+    height: 640px;
+    // .title{
+    //   height: 40px;
+    // }
+    // .user-list li,.rank-list-nav{
+    //   &>span:nth-child(1) {
+    //     margin-right: 10px !important;
+    //     width: 52px !important;
+    //   }
+    //   &>span:nth-child(4) {
+    //     width: 64px !important;
+    //   }
+    // }
+  }
+}
+</style>
\ No newline at end of file