Skip to content

B
beyond-clouds-front
Commit e6102ae7 by yanju
Options

修复动态评论样式

parent f99b6995
Showing with 89 additions and 78 deletions
components/pc/answerCard.vue
<template> <template>
<div class="answer-card__wrap"> <div class="answer-card__wrap" v-if="showCard">
<div class="answer-card" @click="$router.push('/answer/detail/'+questionId)"> <div class="answer-card" @click="$router.push('/answer/detail/'+questionId)">
<div class="answer-card__left" v-if="!solved"> <div class="answer-card__left" v-if="!solved">
<div> <div>
...@@ -39,13 +39,12 @@ ...@@ -39,13 +39,12 @@
<div class="answer-card__abs" v-if="isMy"> <div class="answer-card__abs" v-if="isMy">
<div class="container__abs"> <div class="container__abs">
<div class="deleteButton" @click="dataDeleteItem(questionId)"> <div class="deleteButton" @click="showAlert(questionId)">
<yun-icon name="close1" size="12px" pb="3px"></yun-icon> <yun-icon name="close1" size="12px" pb="3px"></yun-icon>
</div> </div>
<nuxt-link :to="{path:'/answer/release',query:{id:questionId}}" tag="div" class="editButton"> <nuxt-link :to="{path:'/answer/release',query:{id:questionId}}" tag="div" class="editButton">
<yun-icon name="project" size="12px"></yun-icon> <yun-icon name="project" size="12px"></yun-icon>
</nuxt-link> </nuxt-link>
</div> </div>
</div> </div>
...@@ -79,6 +78,7 @@ ...@@ -79,6 +78,7 @@
tags:[], tags:[],
userNick:'', userNick:'',
viewNumber:'', viewNumber:'',
showCard:true,
} }
}, },
...@@ -101,10 +101,21 @@ ...@@ -101,10 +101,21 @@
this.viewNumber = info.viewNumber; this.viewNumber = info.viewNumber;
} }
}, },
showAlert(id){
this.$alert('确认删除？', '', {
confirmButtonText: '确定',
callback: action => {
this.dataDeleteItem(id)
}
});
},
dataDeleteItem(id){ dataDeleteItem(id){
this.$axios.$delete(config.api.delete.Question.delete+id).then((response)=>{ this.$axios.$delete(config.api.delete.Question.delete+id).then((response)=>{
if(response.code===0){ if(response.code===0){
this.cardId=''; this.showCard=false;
this.$message({ this.$message({
type:'success', type:'success',
message:'项目删除成功!' message:'项目删除成功!'
......
components/pc/comment/commentCon.vue
<template> <template>
<div> <div>
<div class="article-comment"> <div class="article-comment" :style="type==='dynamic'?{width:'816px'}:''">
<textarea v-model="commentContent" name="" id="" cols="30" rows="10" class="release-area"></textarea> <textarea v-model="commentContent" name="" id="" cols="30" rows="10" class="release-area"></textarea>
<div class="button-box"> <div class="button-box">
<p @click="dataPostComment" v-if="type!=='question'">评论</p> <p @click="dataPostComment" v-if="type!=='question'">评论</p>
...@@ -20,8 +20,8 @@ ...@@ -20,8 +20,8 @@
</div> </div>
</div> </div>
<card :questionUser="questionUser" @listenCommentReget1="dataGetComment" :type="type" :id="id" v-for="(val,index) in commentList" :key="val.commentId||val.replyId" :info="val"></card> <card :questionUser="questionUser" @listenCommentReget1="dataGetComment" :type="type" :id="id" v-for="(val,index) in commentList" :key="val.commentId||val.replyId" :info="val"></card>
<p class="comment-more" @click="clickToGetMore" v-if="currentPage<pages">查看更多</p> <p class="comment-more" @click="clickToGetMore" v-if="currentPage<pages" :style="type==='dynamic'?{width:'816px'}:''">查看更多</p>
<p class="comment-more" v-if="commentList.length===0">暂无评论</p> <p class="comment-more" v-if="commentList.length===0" :style="type==='dynamic'?{width:'816px'}:''">暂无评论</p>
</div> </div>
</template> </template>
......
components/pc/projectCard.vue
...@@ -208,79 +208,13 @@ ...@@ -208,79 +208,13 @@
<style lang="scss"> <style lang="scss">
.project-card__wrap{ .project-card__wrap{
background-color: #fff;
position:relative;
.project-card__abs{
position: absolute;
top:0;
right:0;
width:200*$length;
height:100%;
background-color: transparent;
overflow: hidden;
.container__abs{
position: absolute;
top:-100*$length;
right:-100*$length;
width:200*$length;
height:200*$length;
border-radius: 50%;
background-color: rgba(34,34,34,.4);
transform: rotateZ(90deg);
transition: 1s all;
opacity: 0;
.deleteButton{
position: absolute;
bottom:60*$length;
left:30*$length;
width:30*$length;
height:30*$length;
border-radius: 50%;
background-color:#ff4949;
@extend %cursorPointer;
@extend %flex-row-center;
@extend %animate-transition;
&:hover{
filter:brightness(1.1);
transform: scale(1.03);
}
i{
color:#fff;
}
}
.editButton{
position: absolute;
bottom:30*$length;
left:60*$length;
width:30*$length;
height:30*$length;
border-radius: 50%;
background-color: #13ce66;
@extend %cursorPointer;
@extend %flex-row-center;
@extend %animate-transition;
&:hover{
filter:brightness(1.1);
transform: scale(1.03);
}
i{
color:#fff;
}
}
}
}
.project-card{ .project-card{
position:relative; position:relative;
@extend %cursorPointer; @extend %cursorPointer;
box-sizing:border-box; box-sizing:border-box;
padding:21*$length 20*$length 24*$length; padding:21*$length 20*$length 24*$length;
// width:938*$length; // width:938*$length;
border-bottom:1px dashed #EFEFEF; border-bottom:1px dashed #EFEFEF;
@extend %flex-row-spb; @extend %flex-row-spb;
align-items: flex-start; align-items: flex-start;
...@@ -425,6 +359,74 @@ ...@@ -425,6 +359,74 @@
} }
background-color: #fff;
position:relative;
.project-card__abs{
position: absolute;
top:0;
right:0;
width:200*$length;
height:100%;
background-color: transparent;
overflow: hidden;
.container__abs{
position: absolute;
top:-100*$length;
right:-100*$length;
width:200*$length;
height:200*$length;
border-radius: 50%;
background-color: rgba(34,34,34,.4);
transform: rotateZ(90deg);
transition: 1s all;
opacity: 0;
.deleteButton{
position: absolute;
bottom:60*$length;
left:30*$length;
width:30*$length;
height:30*$length;
border-radius: 50%;
background-color:#ff4949;
@extend %cursorPointer;
@extend %flex-row-center;
@extend %animate-transition;
&:hover{
filter:brightness(1.1);
transform: scale(1.03);
}
i{
color:#fff;
}
}
.editButton{
position: absolute;
bottom:30*$length;
left:60*$length;
width:30*$length;
height:30*$length;
border-radius: 50%;
background-color: #13ce66;
@extend %cursorPointer;
@extend %flex-row-center;
@extend %animate-transition;
&:hover{
filter:brightness(1.1);
transform: scale(1.03);
}
i{
color:#fff;
}
}
}
}
&:hover{ &:hover{
.project-card__abs{ .project-card__abs{
.container__abs{ .container__abs{
......
pages/personal-center/home/answer.vue
<template> <template>
<div> <div>
<card-container key="container3" style="margin-top: 16px" :title="rightConTitle" label="换一换"> <card-container key="container3" style="margin-top: 16px" :title="rightConTitle" label="换一换">
<answer-card v-if="rightList.length>0" :isMy="$route.query.type==='my'&&$store.state.userProfile.userId===$route.query.user" v-for="(val,index) in rightList" :key="val.questionId" :info="val"></answer-card> <answer-card :isMy="true" v-if="rightList.length>0" v-for="(val,index) in rightList" :key="val.questionId" :info="val"></answer-card>
<empty-card v-if="rightList.length===0" height="556px"></empty-card> <empty-card v-if="rightList.length===0" height="556px"></empty-card>
</card-container> </card-container>
......
pages/personal-center/home/dynamic.vue
<template> <template>
<div > <div>
<release-card style="margin-top: 16px" @listenReleaseState="dataGetDynamic(1)"></release-card> <release-card style="margin-top: 16px" @listenReleaseState="dataGetDynamic(1)"></release-card>
<social-card pageType="my" @listenSocialCardState="dataGetDynamic(1)" v-for="(val,index) in rightList" :key="val.postId" :info="val"></social-card> <social-card pageType="my" @listenSocialCardState="dataGetDynamic(1)" v-for="(val,index) in rightList" :key="val.postId" :info="val"></social-card>
<empty-card v-if="rightList.length===0" height="556px"></empty-card>
<pagination key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination> <pagination key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
</div> </div>
</template> </template>
......
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