Skip to content

B
beyond-clouds-front
Commit 968d4868 by yanju
Options

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

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