hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-21 16:56:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

案例

Browse Source
This commit is contained in:
zhangsir
2024-09-10 16:07:18 +08:00
parent a59d1cea93
commit 1278260812
24 changed files with 176 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Portal/authorInfo.vue
View File

@@ -15,7 +15,7 @@
<div v-if="!onlyAvatar" style="padding-left: 14px;padding-top: 6px;font-size: 14px;">
<span style="color: #333333;font-weight: 600;font-size: 16px;">{{userName}}</span>
<span class="author-text" v-if="userInfo && userInfo!=''"> {{userInfo}} </span>
<span style="margin-right: 15px;" class="comWords" v-if="authorTags.length != 0" v-for="tag in authorTags">{{tag}}</span>
<span style="margin-left: 15px;" class="comWords" v-if="authorTags.length != 0" v-for="tag in authorTags">{{tag}}</span>
</div>
<slot />
</div>

36
src/components/Portal/comments.vue
View File

@@ -92,11 +92,19 @@
<div class="comment-btns">
<!-- <a><svg-icon icon-class="like"></svg-icon><span>66</span></a> -->
<div v-show="btnsShowRowId==com.id">
<div style="display: flex" v-show="btnsShowRowId==com.id">
<a @click="showReply(com)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a>
<a style="display: flex;align-items: center;" @click="showReply(com)">
<!-- <svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon> -->
<div class="is_comment"></div>
<span>回复</span>
</a>
<!--必须当前登录人是一个人-->
<a v-if="userInfo.aid==com.sysCreateAid" @click="delCommnet(com,comIdx)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a>
<a style="display: flex;align-items: center;" v-if="userInfo.aid==com.sysCreateAid" @click="delCommnet(com,comIdx)">
<!-- <svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon> -->
<div class="is_remove"></div>
<span>删除</span>
</a>
<a v-if="com.replyList && com.replyList.length==5" @click="showMoreReply(com)" ><svg-icon icon-class="all" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>全部</span></a>
</div>
</div>
@@ -960,6 +968,28 @@
line-height: 35px;
a{
margin-right:15px;
&:hover{
.is_comment{
background: url('../../assets/images/case/Frame(9).png');
background-size: 100%;
}
.is_remove{
background: url('../../assets/images/case/Frame(15).png');
background-size: 100%;
}
}
.is_comment{
width: 16px;
height: 16px;
background: url('../../assets/images/case/Frame.png');
background-size: 100%;
}
.is_remove{
width: 16px;
height: 16px;
background: url('../../assets/images/case/Frame(8).png');
background-size: 100%;
}
span{
margin-left: 6px;
color: #8590A6;

89
src/components/Portal/interactBar.vue
View File

@@ -10,7 +10,8 @@
<el-tooltip effect="light" :content="type == 4 || type == 5 ?'回答':'回复'" placement="left" :visible-arrow="false" popper-class="text-tooltip">
<!-- <svg-icon style="margin-right: 0;" icon-class="comment"></svg-icon> -->
<!-- <img style="width:16px;height:14px;vertical-align: middle;" :src="require('@/assets/images/icon/answers.png')"> -->
<svg-icon style="margin-right: 0;font-size: 14px;" icon-class="comment"></svg-icon>
<!-- <svg-icon style="margin-right: 0;font-size: 14px;" icon-class="comment"></svg-icon> -->
<div class="is_comment"></div>
</el-tooltip>
<span class="interact-bar-value"> {{ data.answers? data.answers:0}}</span>
</div>
@@ -23,14 +24,16 @@
</div>
<div v-if="comments" class="interact-bar-btn" :style="`min-width: ${nodeWidth};`" :class="{cursor:!readonly}">
<el-tooltip effect="light" content="评论" placement="left" :visible-arrow="false" popper-class="text-tooltip">
<svg-icon style="margin-right: 0;font-size: 14px;" icon-class="comment"></svg-icon>
<!-- <svg-icon style="margin-right: 0;font-size: 14px;" icon-class="comment"></svg-icon> -->
<div class="is_comment"></div>
</el-tooltip>
<span class="interact-bar-value"> {{data.comments? data.comments:0}}</span>
</div>
<div v-if="praises" @click="addPraise()" :style="`min-width: ${nodeWidth};`" class="interact-bar-btn" :class="{cursor:!readonly}">
<el-tooltip effect="light" content="点赞" placement="top" :visible-arrow="false" popper-class="text-tooltip">
<svg-icon style="margin-right: 0;font-size: 14px;" :icon-class="isPraise?'praised':'like'"></svg-icon>
<!-- <svg-icon style="margin-right: 0;font-size: 14px;" :icon-class="isPraise?'praised':'like'"></svg-icon> -->
<div class="is_praise" :class="isPraise?'is_praise_a':'is_praise'"></div>
</el-tooltip>
<span class="interact-bar-value"> {{ data.praises? data.praises:0}}</span>
</div>
@@ -38,19 +41,22 @@
<div v-if="favorites" @click.stop="addFavorite()" :style="`min-width: ${nodeWidth};`" class="interact-bar-btn" :class="{cursor:!readonly}">
<el-tooltip effect="light" content="收藏" placement="top" :visible-arrow="false" popper-class="text-tooltip">
<svg-icon v-if="courseExclusive" style="font-size: 32px;margin-right: 0;" :icon-class="isFavorite?'collectedCourse':'collectionCourse'"></svg-icon>
<svg-icon v-else style="margin-right: 0;" :style="{'font-size':(size+2)+'px'}" :icon-class="isFavorite?'scactive2':'xihuan'"></svg-icon>
<!-- <svg-icon v-else style="margin-right: 0;" :style="{'font-size':(size+2)+'px'}" :icon-class="isFavorite?'scactive2':'xihuan'"></svg-icon> -->
<div v-else class="is_favorite" :class="isFavorite?'is_favorite_a':'is_favorite'"></div>
</el-tooltip>
<span v-if="!courseExclusive" class="interact-bar-value"> {{ data.favorites? data.favorites:0}}</span>
</div>
<div v-if="shares" @click="addShare()" :style="`min-width: ${nodeWidth};`" class="interact-bar-btn" :class="{cursor:!readonly}">
<el-tooltip effect="light" content="分享" placement="top" :visible-arrow="false" popper-class="text-tooltip">
<svg-icon icon-class="share" style="margin-right: 0;" :style="{'font-size':(size+2)+'px'}"></svg-icon>
<!-- <svg-icon icon-class="share" style="margin-right: 0;" :style="{'font-size':(size+2)+'px'}"></svg-icon> -->
<div class="is_share"></div>
</el-tooltip>
<span class="interact-bar-value"> {{data.shares}}</span>
</div>
<div v-if="views" style="cursor: default;" :style="`min-width: ${nodeWidth};margin-left:${data.views>1000? '20px':'20px'}`" class="interact-bar-btn ese-view" :class="{cursor:!readonly}">
<el-tooltip effect="light" content="浏览量" placement="top" :visible-arrow="false" popper-class="text-tooltip">
<svg-icon style="margin-right: 0; font-size:22px;" icon-class="eyes"></svg-icon>
<!-- <svg-icon style="margin-right: 0; font-size:22px;" icon-class="eyes"></svg-icon> -->
<div class="is_view"></div>
</el-tooltip>
<!-- <div style="float:right;margin-left:8px"> -->
<span class="interact-bar-value eyes-view" > {{ formatNum(data.views)}}</span>
@@ -713,6 +719,77 @@ export default {
justify-content: flex-end;
.interact-bar-btn {
margin: 0 0 0 15px;
display: flex;
justify-content: end;
align-items: center;
&:hover{
.is_praise{
background: url('../../assets/images/case/Frame\(10\).png');
}
.is_favorite{
background: url('../../assets/images/case/Frame\(11\).png');
background-size: 100%;
}
.is_share{
background: url('../../assets/images/case/Frame\(14\).png');
background-size: 100%;
}
.is_view{
background: url('../../assets/images/case/Frame\(12\).png');
background-size: 100%;
}
.is_comment{
background: url('../../assets/images/case/Frame\(9\).png');
background-size: 100%;
}
}
.is_comment{
width: 16px;
height: 16px;
background: url('../../assets/images/case/Frame.png');
background-size: 100%;
margin-right: 4px;
}
.is_view{
width: 17px;
height: 17px;
background: url('../../assets/images/case/Frame\(5\).png');
background-size: 100%;
margin-right: 4px;
}
.is_share{
width: 16px;
height: 16px;
background: url('../../assets/images/case/Frame\(7\).png');
background-size: 100%;
margin-right: 4px;
}
.is_praise{
width: 14px;
height: 14px;
background: url('../../assets/images/case/Frame\(1\).png');
margin-right: 4px;
}
.is_praise_a{
width: 14px;
height: 14px;
background: url('../../assets/images/case/Frame\(10\).png');
margin-right: 4px;
}
.is_favorite{
width: 16px;
height: 16px;
background: url('../../assets/images/case/Frame\(2\).png');
background-size: 100%;
margin-right: 4px;
}
.is_favorite_a{
width: 16px;
height: 16px;
background: url('../../assets/images/case/Frame\(11\).png');
background-size: 100%;
margin-right: 4px;
}
}
.interact-bar-value{
// color:#6E7B84; ui图给的颜色，但是效果于ui图效果不一样，也没有透明度，所以找一个相近的和谐的颜色