Skip to content

B
beyond-clouds-front
Commit b32ff9f6 by yanju
Options

动态点赞修改

parent e9ccddeb
Showing with 30 additions and 547 deletions
assets/base.scss
...@@ -317,6 +317,9 @@ ...@@ -317,6 +317,9 @@
@extend %cursorPointer; @extend %cursorPointer;
@extend %animate-transition; @extend %animate-transition;
@include fontStyle(14,34,500,#fff,center); @include fontStyle(14,34,500,#fff,center);
a{
color:#fff
}
&:hover{ &:hover{
filter:brightness(1.1); filter:brightness(1.1);
} }
......
components/pc/socialContactCard.vue
...@@ -106,15 +106,16 @@ ...@@ -106,15 +106,16 @@
</div> </div>
<transition name="fade" > <transition name="fade" >
<comment-con @listioncommentConNumber="dataGet2ComNum" style="margin-top: -16px" v-if="showCommentCon" :id="postId" type="dynamic"></comment-con>
</transition>
<transition name="fade" >
<div class="article__praise-member" v-if="showPraiseCon&&praiseNum>0"> <div class="article__praise-member" v-if="showPraiseCon&&praiseNum>0">
<yun-icon style="margin-bottom: 8px" name="like2" size="12px" color="#FF7474"></yun-icon> <yun-icon style="margin-bottom: 8px;margin-right:15px" name="like2" size="12px" color="#FF7474"></yun-icon>
<p class="praise-member-name" @click="changeRoute2('/u/'+val.userId+'/blog')" :key="val.userId" v-for="(val,index) in praiseList">{{val.nickName}}<span v-if="praiseTotal!==index+1">,</span></p> <p class="praise-member-name" @click="changeRoute2('/u/'+val.userId+'/blog')" :key="val.userId" v-for="(val,index) in praiseList">{{val.nickName}}<span v-if="praiseTotal!==index+1">、</span></p>
<p class="more-member" v-if="!showAllPraise" @click="dataGetAllPraiseList">...</p> <p class="more-member" v-if="!showAllPraise" @click="dataGetAllPraiseList">...</p>
</div> </div>
</transition> </transition>
<transition name="fade" >
<comment-con @listioncommentConNumber="dataGet2ComNum" style="margin-top: -11px" v-if="showCommentCon" :id="postId" type="dynamic"></comment-con>
</transition>
</div> </div>
</transition> </transition>
</template> </template>
...@@ -873,8 +874,9 @@ ...@@ -873,8 +874,9 @@
.article__praise-member{ .article__praise-member{
box-sizing: border-box; box-sizing: border-box;
width:816*$length; width:816*$length;
padding:40*$length; padding:20*$length 40*$length;
margin-top: 5*$length; margin-top: 5*$length;
border-radius:4*$length;
background-color: #Fff; background-color: #Fff;
@extend %flex-row-spb; @extend %flex-row-spb;
justify-content: flex-start; justify-content: flex-start;
...@@ -886,7 +888,7 @@ ...@@ -886,7 +888,7 @@
@include fontStyle(12,22,500,#00AAE6,center); @include fontStyle(12,22,500,#00AAE6,center);
@extend %cursorPointer; @extend %cursorPointer;
@extend %animate-transition; @extend %animate-transition;
margin-left: 20*$length; margin-left: 8*$length;
span{ span{
color:#000; color:#000;
......
pages/news/detail/_id.vue
...@@ -220,469 +220,16 @@ ...@@ -220,469 +220,16 @@
<style lang="scss" > <style lang="scss" >
.detail-container {
.detail-container{
width: $pageWidth; width: $pageWidth;
margin:16*$length auto; margin: 16*$length auto;
@extend %flex-row-spb; @extend %flex-row-spb;
align-items: flex-start; align-items: flex-start;
.detail-container__left{ @extend %detail-container;
.article-container{
width:938*$length;
padding:35*$length 24*$length;
box-sizing: border-box;
background-color: #fff;
border-radius: 4*$length;
overflow: hidden;
.article__header{
@extend %flex-row-spb;
.header-info{
width:100%;
@extend %flex-column-spb;
align-items:flex-start;
.title{
@extend %flex-row-spb;
justify-content: flex-start;
@include fontStyle(24,28,500,#222,left);
height:auto;
.solved{
@include fontStyle(14,19,500,#222,left);
height:auto;
margin-left:20*$length;
padding:3*$length 5*$length;
background-color:
#e7faf0;
border: 1px solid
#d0f5e0;
color:
#13ce66;
border-radius: 4*$length;
}
.unsolved{
@include fontStyle(14,19,500,#222,left);
height:auto;
margin-left:20*$length;
padding:3*$length 5*$length;
background-color:#f4f4f5;
border:1px solid #e9e9eb;
color:#909399;
border-radius: 4*$length;
}
} }
.infos{
margin-top: 13*$length;
@extend %flex-row-spb;
width:100%;
.info-left{
@extend %flex-row-spb;
justify-content: flex-start;
flex: 1;
> .icon-box{
margin-right:15*$length;
@extend %flex-row-spb;
justify-content: flex-start;
> .icon{
margin-right:10*$length;
width:20*$length;
height:20*$length;
border-radius:2*$length;
@extend %flex-column-center;
background-color: #FF7474;
}
}
> .label-box{
flex-wrap: wrap;
margin-left:5*$length;
@extend %flex-row-spb;
justify-content: flex-start;
> p{
margin-bottom: 8*$length;
margin-right:10*$length;
padding:2*$length 8*$length;
background-color: #F4F8FA;
@include fontStyle(12,16,500,#999,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
background-color:rgba(0,170,230,.2);
color:rgba(0,170,230,1);
}
}
}
}
.info-right{
@extend %flex-row-spb;
flex-shrink: 0;
.left{
@include fontStyle(12,16,500,#999,left);
> span{
margin: 0 3*$length;
}
}
.right{
margin-left: 38*$length;
@extend %flex-row-spb;
justify-content: flex-start;
.icon-box{
@extend %inlineBlockV;
margin-right: 17*$length;
> span{
@include fontStyle(14,19,500,#ccc,left);
margin-left:5*$length;
vertical-align: top;
}
}
}
}
}
}
}
.article__introduce{
@include fontStyle(14,24,500,#666,left);
height:auto;
box-sizing: border-box;
padding:14*$length 14*$length;
margin-top:32*$length;
background-color: #F4F8FA;
border-radius: 4*$length;
}
.article__content{
@extend %markdown;
padding:30*$length 0;
word-wrap: break-word;
overflow: hidden;
color:#333;
font-size: 14*$font-size;
line-height:24*$length;
letter-spacing: 2*$length;
*{
word-wrap: break-word;
width:100%;
overflow: auto;
color:#333;
font-size: 14*$font-size;
line-height:24*$length;
letter-spacing: 2*$length;
font-weight: 400;
}
b, strong{
font-weight: bold;
}
li,ul,ol{
list-style: disc inside;
}
ul,ol{
padding-left:40*$length;
line-height: 1.75;
font-weight: 400;
font-size: 15px;
}
h1,h2,h3,h4,h5,h6{
color:#333;
line-height: 1.5;
margin-top: 35px;
margin-bottom: 10px;
}
h1{
padding-bottom: 12px;
font-size: 26px;
line-height: 1.75;
font-weight: 400;
border-bottom: 1px solid #ececec;
}
h2{
padding-bottom: 12px;
font-size: 24px;
line-height: 1.75;
font-weight: 400;
border-bottom: 1px solid #ececec;
}
h3{
padding-bottom: 12px;
font-size: 22px;
line-height: 1.75;
font-weight: 400;
border-bottom: 1px solid #ececec;
}
h4{
padding-bottom: 18px;
font-size: 22px;
line-height: 1.75;
font-weight: 400;
border-bottom: 1px solid #ececec;
}
a{
color:#00AAE6;
}
p{
font-size: 15*$length;
line-height: 1.75;
font-weight: 400;
margin:22*$length 0;
color:#333;
}
li{
font-size: 15*$length;
line-height: 1.75;
font-weight: 400;
margin:11*$length 0;
color:#333;
}
code{
width:100%;
background-color: #f1f1f1;
color:#000;
border-radius: 3*$length;
padding:3*$length 5*$length;
margin:22*$length 0;
}
pre{
line-height: 1.5;
padding: 15px;
background-color: #f1f1f1;
border-radius: 5px;
}
blockquote{
display: block;
border-left: 8*$length solid #d0e5f2;
padding: 5*$length 10*$length;
line-height: 1.4;
font-size: 100%;
background-color: #f1f1f1;
margin:22*$length 0;
}
table{
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
font-size: 14*$font-size;
margin:22*$length 0;
& tbody{
& tr{
}
}
}
img,
audio,
video{
max-width: 100%;
height: auto;
}
td {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3*$length 5*$length;
}
th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3*$length 5*$length;
}
}
.article__like{
margin:60*$length auto;
width:66*$length;
height:64*$length;
position: relative;
@extend %cursorPointer;
@extend %flex-column-center;
&:hover{
.egg{
color:#FF7474;
}
.heart{
color:#fff;
}
.num{
color:#fff;
}
}
.egg{
font-size: 62*$length;
color:#EFEFEF;
padding-bottom: 16*$length;
@extend %animate-transition;
}
.heart{
position: absolute;
font-size: 18*$length;
color:#CCCCCC;
left:24*$length;
top:10*$length;
@extend %animate-transition;
}
.num{
position: absolute;
@include fontStyle(12,19,500,#999,center);
left:0;
width:100%;
top:38*$length;
@extend %animate-transition;
}
}
.article__footer{
height:34*$length;
width:100%;
position:relative;
@extend %flex-row-spb;
.link{
@include fontStyle(12,34,500,#666,left);
a{
&:hover{
color:#00AAE6
}
}
}
.report{
@extend %cursorPointer;
@include fontStyle(12,34,500,#999,left);
&:hover{
color:#00AAE6
}
}
.project{
position:absolute;
left:0;
right:0;
width:332*$length;
margin:0 auto;
@extend %flex-row-spb;
p{
width: 100*$length;
height:34*$length;
border-radius: 4*$length;
background-color: #00AAE6;
@extend %cursorPointer;
@extend %animate-transition;
@include fontStyle(14,34,500,#fff,center);
&:hover{
filter:brightness(1.1);
}
}
}
}
}
.article-comment{
width:938*$length;
padding:18*$length 24*$length;
box-sizing: border-box;
background-color: #fff;
border-radius: 4*$length;
overflow: hidden;
margin-top: 16*$length;
.release-area{
width:890*$length;
padding:14*$length 16*$length;
background-color: #F4F8FA;
border:1px solid #EFEFEF;
border-radius:4*$length;
@include fontStyle(12,22,500,#666666,left);
height:66*$length;
}
.button-box{
height:34*$length;
@extend %flex-row-spb;
justify-content: flex-end;
margin-top: 16*$length;
p{
width:100*$length;
background-color: #00AAE6;
border-radius: 4*$length;
@include fontStyle(12,34,500,#fff,center);
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
filter: brightness(110%);
}
}
}
.comments-header{
padding-top: 16*$length;
margin-top: 24*$length;
border-top: 1px solid #EFEFEF;
@extend %flex-row-spb;
.left{
@include fontStyle(12,16,500,#A7A7A7,left);
span{
margin-right: 8*$length;
}
}
.right{
@extend %flex-row-spb;
p{
@include fontStyle(12,16,500,#A7A7A7,left);
margin-left:20*$length;
@extend %cursorPointer;
&:hover{
color:#000;
}
}
}
}
}
}
.detail-container__right{
width:302*$length;
.tags-wrap{ .tags-wrap{
padding: 10*$length 10*$length 30*$length; padding: 10*$length 10*$length 30*$length;
.tag-box{ .tag-box{
...@@ -732,77 +279,5 @@ ...@@ -732,77 +279,5 @@
} }
} }
}
.article-option{
position:fixed;
top:50%;
left:calc((100% - 1256px)/2 - 56px);
height:356*$length;
width:40*$length;
margin-top:-178*$length;
@extend %flex-column-spb;
.option-item{
width:40*$length;
height:40*$length;
border-radius: 4*$length;
background-color: #fff;
@extend %cursorPointer;
@extend %flex-row-center;
i{
@extend %animate-transition;
color:#CCCCCC;
font-size: 12px;
}
&:hover{
.star{
color:#F8A06F
}
.like{
color:#FF7474
}
.comment{
color:#59CBF4
}
}
embed{
@extend %cursorPointer;
filter:grayscale(0%);
@extend %animate-transition;
&:hover{
filter:grayscale(0%);
}
}
.star{
&:hover{
color:#F8A06F
}
}
.like{
&:hover{
color:#FF7474
}
}
.comment{
&:hover{
color:#59CBF4
}
}
}
.share-word{
@include fontStyle(12,16,500,#B4B4B4,center)
}
}
}
</style> </style>
pages/project/detail/_id.vue
...@@ -50,19 +50,8 @@ ...@@ -50,19 +50,8 @@
<div class="article__content" v-html="articleDetail.contentHtml"> <div class="article__content" v-html="articleDetail.contentHtml">
</div> </div>
<div :class="returnArticleLikeClass" @click="clickToPraise">
<yun-icon name="like_egg" class="egg"></yun-icon>
<yun-icon name="like1" class="heart"></yun-icon>
<p class="num">{{articleDetail.praiseNum}}</p>
</div>
<div class="article__praise-member">
<yun-avatar :key="val.userId" class="more-member" :style="{marginRight:(index+1)%10===0?'0px':'28px'}" size="40px" borderR="20px" v-for="(val,index) in praiseList" :userId="val.userId" :src="val.userAvatar" :name="val.nickName"></yun-avatar>
<p class="more-member" v-if="!showAllPraise" @click="dataGetAllPraiseList">更多</p>
</div>
<div class="article__footer"> <div class="article__footer">
<p class="link" v-if="!articleDetail.projectId">原文链接：<a target="_blank" :href="articleDetail.sourceLink"> <span>{{articleDetail.sourceLink}}</span></a></p>
<p></p>
<p class="report" @click="$router.push({path:'/web/report',query:{type:'project',id:articleDetail.projectId}})">举报</p>
<div class="project" v-if="articleDetail.projectId"> <div class="project" v-if="articleDetail.projectId">
<p> <p>
<yun-icon name="home" size="12px" style="margin-right: 5px"></yun-icon> <yun-icon name="home" size="12px" style="margin-right: 5px"></yun-icon>
...@@ -75,7 +64,21 @@ ...@@ -75,7 +64,21 @@
<yun-icon name="download" size="12px" style="margin-right: 5px"></yun-icon>项目下载 <yun-icon name="download" size="12px" style="margin-right: 5px"></yun-icon>项目下载
</p> </p>
</div> </div>
</div>
<div :class="returnArticleLikeClass" @click="clickToPraise">
<yun-icon name="like_egg" class="egg"></yun-icon>
<yun-icon name="like1" class="heart"></yun-icon>
<p class="num">{{articleDetail.praiseNum}}</p>
</div>
<div class="article__praise-member">
<yun-avatar :key="val.userId" class="more-member" :style="{marginRight:(index+1)%10===0?'0px':'28px'}" size="40px" borderR="20px" v-for="(val,index) in praiseList" :userId="val.userId" :src="val.userAvatar" :name="val.nickName"></yun-avatar>
<p class="more-member" v-if="!showAllPraise" @click="dataGetAllPraiseList">更多</p>
</div>
<div class="article__footer">
<p></p>
<p class="report" @click="$router.push({path:'/web/report',query:{type:'project',id:articleDetail.projectId}})">举报</p>
</div> </div>
</div> </div>
<comment-con :id="articleDetail.projectId" type="project"></comment-con> <comment-con :id="articleDetail.projectId" type="project"></comment-con>
......
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