hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-12 20:36: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

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图效果不一样，也没有透明度，所以找一个相近的和谐的颜色