我的收藏案例

This commit is contained in:
lmj
2022-06-07 19:13:33 +08:00
parent 5efe874e99
commit 8a416cc8a7
3 changed files with 51 additions and 24 deletions

View File

@@ -1,21 +1,21 @@
<template>
<div style="">
<div class="article-list" v-for="(item,idx) in items" :key="idx">
<div class="article-info">
<div class="article-info-title">
<router-link :to="'/case/detail?id='+item.cases.id" target="_blank" style="padding-left: 5px;">{{item.cases.title}}</router-link>
<div class="article-info ">
<div class="article-info-title title-line-ellipsis" >
<router-link :to="'/case/detail?id='+item.cases.id" target="_blank" >{{item.cases.title}}</router-link>
<div class="article-info-date">
<el-button @click="delItem(item)" type="text" icon="el-icon-remove">取消收藏</el-button>
</div>
</div>
<div class="article-info-summary">
<div class="article-info-summary three-line-ellipsis">
{{item.cases.summary}}
</div>
<div class="article-info-tools">
<authorInfo :avatar="item.avatar" :name="item.name" :info="item.orgInfo"></authorInfo>
<span>发布时间{{ item.cases.sysCreateTime | timeFilter }}</span>
<span>收藏时间{{ item.time | timeFilter }}</span>
<interactBar :type="0" :data="item.cases" :shares="false" :views="false"></interactBar>
<!-- <interactBar :type="0" :data="item.cases" :shares="false" :views="false"></interactBar> -->
</div>
</div>
</div>
@@ -58,6 +58,26 @@
</script>
<style lang="scss" scoped>
.title-line-ellipsis{
width: 100%;
display: -webkit-box;
overflow: hidden;
text-overflow:ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
box-sizing: border-box;
word-break:break-all;
}
.three-line-ellipsis{
width: 100%;
display: -webkit-box;
overflow: hidden;
text-overflow:ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
box-sizing: border-box;
word-break:break-all;
}
.article-status1{
padding: 3px;
border: 1px dotted #1EA0FA;
@@ -75,8 +95,8 @@
}
.article-list {
margin: 5px 0;
border: 1px solid #dddddd;
padding: 10px;
border-bottom: 1px solid #dddddd;
padding: 0px;
}
.article-info {
@@ -97,10 +117,12 @@
}
}
.article-info-summary {
height: 65px;
line-height: 25px;
color: #999999;
}
.article-info-tools {
height: 45px;
color: #999999;
display: flex;
justify-content: flex-start;