Skip to content

B
beyond-clouds-front
Commit 1690c91c by yanju
Options

修复粉丝卡片 添加话题热搜榜页面

parent 4406a42e
Showing with 278 additions and 26 deletions
components/pc/fanCard.vue
<template> <template>
<div class="fan-card__warp" v-if="id&&showCard"> <div class="fan-card__warp" v-if="id&&showCard">
<div class="fan-card" @click="$router.push('/u/'+id+'/project')"> <div class="fan-card">
<div class="fan-card__left"> <div class="fan-card__left">
<div class="left__head-portrait"> <div class="left__head-portrait">
<yun-avatar :src="userAvatar"></yun-avatar> <yun-avatar :user-id="id" :src="userAvatar"></yun-avatar>
</div> </div>
<div class="left__content"> <div class="left__content">
<div class="content-name"> <div class="content-name">
...@@ -13,10 +13,23 @@ ...@@ -13,10 +13,23 @@
</div> </div>
<div class="content-label"> <div class="content-label">
<div class="content-label__left"> <div class="content-label__left">
<span>人气 <span class="label-number">{{statistics.visitedNum}}</span> · 粉丝 <span class="label-number">{{statistics.fansNum}}</span> · 关注 <span class="label-number">{{statistics.followedNum}}</span></span> <p><span @click="changeRoute('/project')">人气 <span class="label-number">{{statistics.visitedNum}}</span></span>
·
<span @click="changeRoute('/fans')">粉丝 <span class="label-number">{{statistics.fansNum}}</span></span>
·
<span @click="changeRoute('/following')">关注 <span class="label-number">{{statistics.followedNum}}</span></span>
</p>
</div> </div>
<div class="content-label__right"> <div class="content-label__right">
<span>项目 <span class="label-number">{{statistics.projectNum}}</span> · 博客 <span>{{statistics.blogNum}}</span> · 回答 <span class="label-number">{{statistics.questionReplyNum}}</span> · 动态 <span class="label-number">{{statistics.postNum}}</span></span> <p>
<span @click="changeRoute('/project')">项目 <span class="label-number">{{statistics.projectNum}}</span> </span>
·
<span @click="changeRoute('/blog')">博客 <span class="label-number">{{statistics.blogNum}}</span></span>
·
<span @click="changeRoute('/answer')">回答 <span class="label-number">{{statistics.questionReplyNum}}</span></span>
·
<span @click="changeRoute('/dynamic')">动态 <span class="label-number">{{statistics.postNum}}</span></span>
</p>
</div> </div>
</div> </div>
<p class="content-main"> <p class="content-main">
...@@ -65,7 +78,10 @@ export default { ...@@ -65,7 +78,10 @@ export default {
}, },
props:{ props:{
info:Object, info:{
type:Object,
default: ()=>({})
},
cardType:String, cardType:String,
from:{ from:{
type:String, type:String,
...@@ -78,6 +94,15 @@ export default { ...@@ -78,6 +94,15 @@ export default {
}, },
methods:{ methods:{
changeRoute(path){
this.$router.push(this.dataGet2Path(path));
},
dataGet2Path(path){
console.log(this.id);
return '/u/'+this.id+path
},
dataGet2Info(){ dataGet2Info(){
let info = this.info; let info = this.info;
if(info.userId){ if(info.userId){
...@@ -273,7 +298,7 @@ export default { ...@@ -273,7 +298,7 @@ export default {
width: 136*$length; width: 136*$length;
box-shadow: 0 6*$length 20*$length rgba(0,0,0,.08); box-shadow: 0 6*$length 20*$length rgba(0,0,0,.08);
@include border-radius(4*$length); @include border-radius(4*$length);
z-index: 100; z-index: 300;
li{ li{
@extend %animate-transition; @extend %animate-transition;
@include fontStyle(14,20,500,#666,center); @include fontStyle(14,20,500,#666,center);
......
components/pc/topicListCard.vue
<template> <template>
<div class="topic-list-card__wrap"> <div class="topic-list-card__wrap">
<div class="topic-list-card"> <nuxt-link :to="'/topic/detail/'+info.topicName" class="topic-list-card">
<div class="topic-list-card__left">{{info.list}}</div> <div class="topic-list-card__left">{{number}}</div>
<div class="topic-list-card__center"> <div class="topic-list-card__center">
<span>{{info.title}}</span> <span>{{info.topicName}}</span>
<span>{{info.number}}</span> <span>{{info.referenceCount}}</span>
</div> </div>
<div class="topic-list-card__right"> <div class="topic-list-card__right">
<div class="icon-box" v-if="isTop"> <div class="icon-box" v-if="number===1">
<yun-icon name="top" size="13px"></yun-icon> <yun-icon name="top" size="13px"></yun-icon>
</div> </div>
<div class="icon-box" v-for="(item,key) in info.label" :key="key"> <div class="word-box" v-if="number===3||number===6||number===9" v-for="(item,key) in label" :key="key">
<span>{{item}}</span> <span>{{item}}</span>
</div> </div>
</div> </div>
</div> </nuxt-link>
</div> </div>
</template> </template>
...@@ -24,14 +24,17 @@ export default { ...@@ -24,14 +24,17 @@ export default {
data(){ data(){
return{ return{
isTop: false, isTop: false,
info:{ label:['新','热']
list: 1,
title: '你好你好你好你好',
number: 213412312,
label: ['新', '热']
}
} }
} },
props:{
info:{
type:Object,
default:()=>({})
},
number:Number
},
} }
</script> </script>
...@@ -57,8 +60,8 @@ export default { ...@@ -57,8 +60,8 @@ export default {
} }
} }
.topic-list-card__left{ .topic-list-card__left{
margin-left: 107*$length; width: 110*$length;
@include fontStyle(12,12,500,#222,left); @include fontStyle(12,12,500,#222,right);
} }
.topic-list-card__center{ .topic-list-card__center{
width: 424*$length; width: 424*$length;
...@@ -73,14 +76,26 @@ export default { ...@@ -73,14 +76,26 @@ export default {
} }
} }
.topic-list-card__right{ .topic-list-card__right{
@extend %flex-row-center;
justify-content: flex-start;
.icon-box{ .icon-box{
display: inline-block;
width: 22*$length; width: 22*$length;
height: 22*$length; height: 22*$length;
margin-right: 5*$length; margin-right: 5*$length;
color: #fff; color: #fff;
background-color: #00AAE6; background-color: #00AAE6;
@include border-radius(2*$length); @include border-radius(2*$length);
@extend %flex-row-center;
@extend %cursorPointer;
}
.word-box{
width: 22*$length;
height: 22*$length;
margin-right: 5*$length;
color: #fff;
background-color: #F8A06F;
@include border-radius(2*$length);
@extend %flex-row-center;
@extend %cursorPointer; @extend %cursorPointer;
} }
} }
......
pages/dynamic/index.vue
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</div> </div>
<div class="dynamic-container__right"> <div class="dynamic-container__right">
<card-container title="话题热搜榜" label="实时更新" @listenCardConMore="$router.push('/topic')" more="更多"> <card-container title="话题热搜榜" label="实时更新" @listenCardConMore="$router.push('/topic/rank')" more="更多">
<nuxt-link tag="div" :to="'/topic/detail/'+val.topicName" class="topic-content__c" v-for="(val,index) in topicList" :key="val.topicId" > <nuxt-link tag="div" :to="'/topic/detail/'+val.topicName" class="topic-content__c" v-for="(val,index) in topicList" :key="val.topicId" >
<p>#{{val.topicName}}#</p> <p>#{{val.topicName}}#</p>
<h6>{{val.referenceCount}}</h6> <h6>{{val.referenceCount}}</h6>
......
pages/index.vue
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<p class="information-content">{{val.title}}</p> <p class="information-content">{{val.title}}</p>
</div> </div>
</card-container> </card-container>
<card-container style="margin-top: 16px" title="话题热搜榜" label="实时更新" more="更多" @listenCardConMore="changeRoute('/topic')"> <card-container style="margin-top: 16px" title="话题热搜榜" label="实时更新" more="更多" @listenCardConMore="$router.push('/topic/rank')" >
<nuxt-link tag="div" :to="'/topic/detail/'+val.topicName" class="topic-content__c" v-for="(val,index) in topicList" :key="val.topicId" > <nuxt-link tag="div" :to="'/topic/detail/'+val.topicName" class="topic-content__c" v-for="(val,index) in topicList" :key="val.topicId" >
<p>#{{val.topicName}}#</p> <p>#{{val.topicName}}#</p>
<h6>{{val.referenceCount}}</h6> <h6>{{val.referenceCount}}</h6>
......
pages/personal-center/person.vue
...@@ -72,7 +72,6 @@ ...@@ -72,7 +72,6 @@
width:302*$length; width:302*$length;
} }
.message-container__r{ .message-container__r{
overflow:hidden;
width:938*$length; width:938*$length;
margin-top:16*$length; margin-top:16*$length;
border-radius: 4*$length; border-radius: 4*$length;
......
pages/topic/index.vue
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
title="话题热搜榜" title="话题热搜榜"
label="实时更新" label="实时更新"
more="更多" more="更多"
@listenCardConMore="$router.push('/topic/rank')"
width="302px"> width="302px">
<nuxt-link tag="div" :to="'/topic/detail/'+val.topicName" class="topic-content__c" v-for="(val,index) in hotTopicList" :key="val.topicId" > <nuxt-link tag="div" :to="'/topic/detail/'+val.topicName" class="topic-content__c" v-for="(val,index) in hotTopicList" :key="val.topicId" >
<p>#{{val.topicName}}#</p> <p>#{{val.topicName}}#</p>
......
pages/topic/rank.vue 0 → 100644
<template>
<div class="topic-detail-container">
<div class="topic-detail-container__search">
<div class="search-box">
<div class="search-box__hidden" ref="hideSearchCard" v-if="searchWord&&showHideCard">
<nuxt-link tag="div" :to="'/topic/detail/'+val.topicName" class="search-box__hidden-item" v-for="(val,index) in topicList" :key="val.topicId">
<p>#{{val.topicName}}#</p>
<h6>{{val.referenceCount}}</h6>
</nuxt-link>
<div class="search-box__hidden-item" v-if="topicList.length===0">
<p style="color:#6d61bee8">找不到该话题</p>
</div>
</div>
<input ref="searchInput" placeholder="请输入话题名称" type="text" v-model="searchWord"/>
<div class="icon-box">
<yun-icon name="search"></yun-icon>
</div>
</div>
</div>
<div class="topic-detail-container__main">
<div class="topic-list-card">
<div class="topic-list-card__left">序号</div>
<div class="topic-list-card__center">
话题
</div>
<div class="topic-list-card__right">
实时更新
</div>
</div>
<topic-list v-for="(val,index) in hotSearchList" :info="val" :number="index+1" :key="val.topicId" ></topic-list>
</div>
</div>
</template>
<script>
import NavWrap from "../../components/pc/nav/navWrap";
import TopicList from "../../components/pc/topicListCard";
import config from '../../action/config'
export default {
components: {NavWrap, TopicList},
data(){
return{
topicList:[],
pages:1,
hotSearchList:[],
searchWord:'',
showHideCard:true,
}
},
created() {
this.dataGetHotTopic();
if(process.browser){
document.addEventListener('click',(e)=>{
if(this.$refs.hideSearchCard){
if(!this.$refs.hideSearchCard.contains(e.target)){
this.showHideCard = false;
}
}
})
}
},
watch:{
searchWord(val){
this.dataGetSearchTopic(val)
this.showHideCard = true;
},
},
methods:{
dataGetSearchTopic(e){
this.$axios.$get(config.api.get.Topic.search,{
params:{
page:1,
size:10,
keywords:e,
}
}).then((response)=>{
this.topicList = response.data.dataList;
})
},
dataGetHotTopic(){
this.$axios.$get(config.api.get.Topic.hotSearch,{
params:{
page:1,
size:30
}
}).then((response)=>{
this.hotSearchList = response.data.dataList;
})
},
},
}
</script>
<style lang="scss" scoped>
.topic-detail-container{
.topic-detail-container__search{
width: 100%;
height:160*$length;
background-image: url("../../assets/img/search_bg.png");
background-position: 50% 50%;
background-size: 100% 100%;
background-repeat: repeat;
@extend %flex-row-center;
.search-box{
width:408*$length;
height:40*$length;
@extend %flex-row-spb;
border-radius: 4*$length;
position: relative;
input{
width: 318*$length;
height:40*$length;
padding:12*$length 16*$length;
@include fontStyle(12,40,500,#333,left);
}
.icon-box{
width:90*$length;
height:40*$length;
@extend %flex-row-center;
background-color: #00AAE6;
@include fontStyle(12,40,500,#333,left);
@extend %cursorPointer;
i{
color:#fff;
font-size: 12*$font-size;
}
}
.search-box__hidden{
position: absolute;
width:408*$length;
padding: 6*$length 10*$length;
box-sizing: border-box;
top:48*$length;
background-color: #fff;
z-index: 100;
.search-box__hidden-item{
@extend %flex-row-spb;
padding: 5px 10px;
background-color: #fff;
&:hover{
background-color: #F5F7FA;
}
p{
width:350*$length;
@include fontStyle(12,24,500,#333,left);
@extend %animate-transition;
cursor: pointer;
overflow: hidden;
b{
font-weight: 700;
}
}
h6{
@include fontStyle(12,24,500,#333,left);
}
}
}
}
}
.topic-detail-container__main{
width: $pageWidth;
box-sizing: border-box;
padding:0 106*$length;
margin: 30*$length auto;
padding-bottom: 32*$length;
background-color: #fff;
.topic-list-card{
width: 1044*$length;
padding-top: 23*$length;
height: 35*$length;
margin-bottom: 50*$length;
@extend %flex-row-spb;
justify-content: flex-start;
.topic-list-card__left{
width: 110*$length;
@include fontStyle(12,12,500,#222,right);
}
.topic-list-card__center{
width: 424*$length;
margin-left: 99*$length;
@include fontStyle(12,17,500,#222,left);
> span{
@extend %animate-transition;
&:last-child{
margin-left: 24*$length;
@include fontStyle(12,12,500,#999,left);
}
}
}
.topic-list-card__right{
flex: 1;
@include fontStyle(12,12,500,#999,right);
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment