Commit 968d4868 by yanju

new func icon对齐 用户链接跳转到主页博客 动态点赞

parent d1528f17
......@@ -50,17 +50,20 @@
return ''
}
else{
return '/u/'+this.userId+'/project'
return '/u/'+this.userId+'/blog'
}
}
},
methods:{
changeRoute2(r){
if(r){
let routeUrl = this.$router.resolve({
path: r
});
window.open(routeUrl.href,'_blank')
}
},
}
}
......
......@@ -52,7 +52,7 @@
i{
transition:.5s ease;
display:inline-block;
padding-bottom: 2*$length;
padding-bottom: 0 !important;
&:before{
display: inline-block;
height:100%;
......
......@@ -8,7 +8,7 @@
<yun-avatar :userId="userId" :src="userAvatar" :name="userNick"></yun-avatar>
<div class="header-l__info">
<div class="header-l__info-top">
<p class="name" @click="$router.push('/u/'+userId+'/project')">{{userNick}}</p>
<p class="name" @click="changeRoute2('/u/'+userId+'/blog')">{{userNick}}</p>
<p class="follow1" v-if="followedAuthor&&$store.state.userProfile.userId!==userId" >
<yun-icon name="right"></yun-icon>已关注
</p>
......@@ -90,9 +90,9 @@
<yun-icon name="comment" size="12px" ></yun-icon>
<p class="comment">评论({{commentNumber}})</p>
</div>
<div class="footer-item4" @click="MessageAlert">
<div :class="returnItem4Class" @click="clickToPraise">
<yun-icon name="like1" size="12px" ></yun-icon>
<p class="like1"> 点赞</p>
<p class="like1">赞({{praiseNum}})</p>
</div>
</div>
......@@ -139,7 +139,7 @@
return {
showCard:true, //展示卡片
src:'https://s2.ax1x.com/2020/01/15/lO2kIf.png',
src:'',
showDrop:false,
name:'我我欸',
postId:'',
......@@ -161,6 +161,8 @@
followLoading:false,
showCommentCon:false,
status:0,
praiseNum:0,
praised:false,
}
},
......@@ -226,6 +228,9 @@
},
returnItem4Class(){
return this.praised ?'footer-item4-active':'footer-item4'
}
},
created(){
......@@ -250,18 +255,22 @@
},
methods:{
changeRoute2(r){
let routeUrl = this.$router.resolve({
path: r
});
window.open(routeUrl.href,'_blank')
},
dataGet2ComNum(n){
this.commentNumber = this.commentNumber +n
},
MessageAlert(){
this.$message({
type:'info',
message:'该功能尚未启用'
})
},
clickToOpenBanner(index){
this.showBanner = true;
this.currentImg = index
......@@ -283,6 +292,8 @@
this.followedAuthor = info.followedAuthor;
this.commentNumber = info.commentNumber;
this.status = info.status;
this.praiseNum = info.praiseNum;
this.praised = info.praised;
}
},
......@@ -295,9 +306,6 @@
}
});
},
dateDeleteCard(id){
this.$axios.$delete(config.api.delete.Post.delete+id).then((response)=>{
if(response.code===0){
......@@ -317,7 +325,6 @@
},
dataPostFollowUser(){
this.followLoading = true;
this.$axios.$post(config.api.post.User.follow+this.userId+'/follower').then((response)=>{
......@@ -338,6 +345,53 @@
}
})
},
clickToPraise(){
if(this.praised){
this.dataDeletePraise();
}else{
this.dataPostPraise()
}
},
dataPostPraise(){
this.$axios.$post(config.api.post.PostPraise.praise+this.postId+'/praise').then((response)=>{
if(response.code===0){
this.$message({
type:'success',
message:'点赞成功'
})
this.praised = true;
this.praiseNum = this.praiseNum +1;
}else if(response.code===1000){
this.$message({
type:'warning',
message:'请在登陆后操作'
})
}
})
},
dataDeletePraise(){
this.$axios.$delete(config.api.delete.PostPraise.praise+this.postId+'/praise').then((response)=>{
if(response.code===0){
this.$message({
type:'success',
message:'取消点赞'
})
this.praised = false;
this.praiseNum = this.praiseNum -1;
}else if(response.code===1000){
this.$message({
type:'warning',
message:'请在登陆后操作'
})
}
})
}
......@@ -636,7 +690,7 @@
}
i{
color:#ccc;
padding-bottom: 3px;
padding-bottom: 2px;
}
}
.footer-item3{
......@@ -658,7 +712,7 @@
}
i{
color:#ccc;
padding-bottom: 3px;
padding-bottom: 2px;
}
}
.footer-item4{
......@@ -679,7 +733,23 @@
}
i{
color:#ccc;
padding-bottom: 3px;
padding-bottom: 2px;
}
}
.footer-item4-active{
@extend %cursorPointer;
width:25%;
@extend %flex-row-center;
p{
margin-left:8*$length;
@include fontStyle(12,16,500,#FF7474,center);
}
i{
color:#FF7474;
padding-bottom: 2px;
}
......
......@@ -3,7 +3,7 @@
<div class="user-card1">
<yun-avatar :userId="userId1" style="margin:40px auto 0;" :src="userAvatar" size="84px"></yun-avatar>
<div class="info1">
<p class="name" @click="$router.push('/u/'+userId+'/project')">{{nickName}}</p>
<p class="name" @click="changeRoute2('blog')">{{nickName}}</p>
<yun-icon name="sex_man" size="12px" color="#00AAE6" v-if="gender===1"></yun-icon>
<yun-icon name="sex_woman" size="12px" color="#F08E8E" v-if="gender===2"></yun-icon>
</div>
......@@ -224,7 +224,7 @@
},
changeRoute2(r){
let routeUrl = this.$router.resolve({
path: r
path: this.dataGet2Path(r)
});
window.open(routeUrl.href,'_blank')
},
......
......@@ -4,7 +4,7 @@
<yun-avatar size="48px" border-r="24px" :userId="userId" :src="userAvatar" :name="nickName"></yun-avatar>
<div class="right__user-item__content">
<div class="content">
<p @click="changeRoute2('/u/'+userId+'/project')">{{nickName}}</p>
<p @click="changeRoute2('/u/'+userId+'/blog')">{{nickName}}</p>
<h6>人气{{statistics.visitedNum}}·粉丝{{statistics.fansNum}}</h6>
</div>
<div v-if="userId!==$store.state.userProfile.userId&&followedUser" class="follow1" @click="dataPostToCancelFollow">
......
......@@ -417,27 +417,32 @@
}
}
.egg{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 62*$length;
color:#EFEFEF;
padding-bottom: 16*$length;
@extend %animate-transition;
z-index: 100;
}
.heart{
position: absolute;
position: relative;
font-size: 18*$length;
color:#CCCCCC;
left:24*$length;
top:10*$length;
@extend %animate-transition;
z-index: 101;
}
.num{
position: absolute;
position: relative;
@include fontStyle(12,19,500,#999,center);
left:0;
width:100%;
top:38*$length;
@extend %animate-transition;
z-index: 101;
}
......@@ -461,31 +466,35 @@
}
}
.egg{
color:#FF7474;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 62*$length;
color:#FF7474;
padding-bottom: 16*$length;
@extend %animate-transition;
z-index: 100;
}
.heart{
position: absolute;
position: relative;
font-size: 18*$length;
color:#fff;
left:24*$length;
top:10*$length;
@extend %animate-transition;
z-index: 101;
}
.num{
position: absolute;
position: relative;
@include fontStyle(12,19,500,#fff,center);
left:0;
width:100%;
top:38*$length;
@extend %animate-transition;
z-index: 101;
}
}
.article__footer{
......
......@@ -410,27 +410,32 @@
}
}
.egg{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 62*$length;
color:#EFEFEF;
padding-bottom: 16*$length;
@extend %animate-transition;
z-index: 100;
}
.heart{
position: absolute;
position: relative;
font-size: 18*$length;
color:#CCCCCC;
left:24*$length;
top:10*$length;
@extend %animate-transition;
z-index: 101;
}
.num{
position: absolute;
position: relative;
@include fontStyle(12,19,500,#999,center);
left:0;
width:100%;
top:38*$length;
@extend %animate-transition;
z-index: 101;
}
......@@ -454,31 +459,35 @@
}
}
.egg{
color:#FF7474;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 62*$length;
color:#FF7474;
padding-bottom: 16*$length;
@extend %animate-transition;
z-index: 100;
}
.heart{
position: absolute;
position: relative;
font-size: 18*$length;
color:#fff;
left:24*$length;
top:10*$length;
@extend %animate-transition;
z-index: 101;
}
.num{
position: absolute;
position: relative;
@include fontStyle(12,19,500,#fff,center);
left:0;
width:100%;
top:38*$length;
@extend %animate-transition;
z-index: 101;
}
}
.article__footer{
......
......@@ -425,27 +425,32 @@
}
}
.egg{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 62*$length;
color:#EFEFEF;
padding-bottom: 16*$length;
@extend %animate-transition;
z-index: 100;
}
.heart{
position: absolute;
position: relative;
font-size: 18*$length;
color:#CCCCCC;
left:24*$length;
top:10*$length;
@extend %animate-transition;
z-index: 101;
}
.num{
position: absolute;
position: relative;
@include fontStyle(12,19,500,#999,center);
left:0;
width:100%;
top:38*$length;
@extend %animate-transition;
z-index: 101;
}
......@@ -469,31 +474,35 @@
}
}
.egg{
color:#FF7474;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 62*$length;
color:#FF7474;
padding-bottom: 16*$length;
@extend %animate-transition;
z-index: 100;
}
.heart{
position: absolute;
position: relative;
font-size: 18*$length;
color:#fff;
left:24*$length;
top:10*$length;
@extend %animate-transition;
z-index: 101;
}
.num{
position: absolute;
position: relative;
@include fontStyle(12,19,500,#fff,center);
left:0;
width:100%;
top:38*$length;
@extend %animate-transition;
z-index: 101;
}
}
.article__footer{
......
......@@ -142,19 +142,19 @@
</p>
</div>
<div>
<p><span>生日:</span>{{userInfo.birthday}}</p>
<p><span>生日:</span>{{userInfo.birthday?userInfo.birthday:'未公开'}}</p>
</div>
<div>
<p><span>签名:</span>{{userInfo.signature ? userInfo.signature : '暂无'}}</p>
</div>
<div>
<p><span>微信:</span>{{userInfo.wxNumber ? userInfo.wxNumber : '暂无'}}</p>
<p><span>微信:</span>{{userInfo.wxNumber ? userInfo.wxNumber : '未公开'}}</p>
</div>
<div>
<p><span>QQ号:</span>{{userInfo.qqNumber ? userInfo.qqNumber : '暂无'}}</p>
<p><span>QQ号:</span>{{userInfo.qqNumber ? userInfo.qqNumber : '未公开'}}</p>
</div>
<div>
<p><span>手机号:</span>{{userInfo.mobile ? userInfo.mobile : '暂无'}}</p>
<p><span>手机号:</span>{{userInfo.mobile ? userInfo.mobile : '未公开'}}</p>
</div>
</div>
......
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