mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-14 13:26:44 +08:00
142 lines
3.3 KiB
Vue
142 lines
3.3 KiB
Vue
<template>
|
||
<div style="cursor: pointer;">
|
||
<div class="article-list" v-for="(item, idx) in items" :key="idx">
|
||
<div class="article-info-date"></div>
|
||
<div @click="jump(item)">
|
||
<div class="article-info">
|
||
<div class="article-info-title one-line-ellipsis">
|
||
{{ item.title }}
|
||
</div>
|
||
<div class="article-info-summary two-line-ellipsis">{{ item.summary || item.content}}</div>
|
||
<div class="article-info-tools">
|
||
<authorInfo :avatar="item.avatar" :name="item.name" :info="item.orgInfo" :sex="item.sex"> </authorInfo>
|
||
<span>发布时间：{{ item.sysCreateTime || item.publishTime || item.favoritesTime | timeFilter }}</span>
|
||
<span>收藏时间：{{ item.time || item.favoritesTime | timeFilter }}</span>
|
||
<el-button @click.stop="delItem(item)" type="text" style="color: #8590A6" icon="el-icon-remove">取消收藏</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import interactBar from '@/components/Portal/interactBar.vue';
|
||
import authorInfo from '@/components/Portal/authorInfo.vue';
|
||
export default {
|
||
name: 'articleItems',
|
||
props: {
|
||
items: {
|
||
//name,
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
data() {
|
||
return {};
|
||
},
|
||
components: {
|
||
interactBar,
|
||
authorInfo
|
||
},
|
||
filters: {
|
||
timeFilter(item) {
|
||
return item.split(' ')[0];
|
||
}
|
||
},
|
||
methods: {
|
||
jump(item) {
|
||
this.$router.push({path:'/article/detail',query:{id:item.articleId || item.id}})
|
||
},
|
||
delItem(item) {
|
||
this.$confirm('您确定要取消收藏所选文章吗？', '删除提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
})
|
||
.then(() => {
|
||
this.$emit('confirm', item);
|
||
})
|
||
.catch(() => {});
|
||
},
|
||
// jump(item){
|
||
// this.$router.push({path:'/article/detail',query:{id:item.articleId}})
|
||
// // window.open('/article/detail?id=' + item.articleId)
|
||
// }
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.article-status1 {
|
||
padding: 3px;
|
||
border: 1px dotted #1ea0fa;
|
||
color: #1ea0fa;
|
||
}
|
||
.article-status2 {
|
||
padding: 3px;
|
||
border: 1px dotted #00aa00;
|
||
color: #00aa00;
|
||
}
|
||
.article-status3 {
|
||
padding: 3px;
|
||
border: 1px dotted #ff0000;
|
||
color: #ff0000;
|
||
}
|
||
.article-list {
|
||
position: relative;
|
||
margin: 5px 0;
|
||
padding-bottom: 15px;
|
||
padding-top: 10px;
|
||
// border: 1px solid #dddddd;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
}
|
||
.article-info-date {
|
||
position: absolute;
|
||
top: 80px;
|
||
left: 93%;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
float: right;
|
||
font-weight: 200;
|
||
color: #666;
|
||
margin-bottom: 10px;
|
||
margin-top: 10px;
|
||
i {
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
.article-info {
|
||
.article-info-title {
|
||
font-size: 18px;
|
||
font-weight: 400;
|
||
margin-bottom: 5px;
|
||
color: #333;
|
||
}
|
||
.article-info-summary {
|
||
// height: 65px;
|
||
color: #999999;
|
||
margin-bottom: 15px;
|
||
margin-top: 10px;
|
||
|
||
line-height: 25px;
|
||
}
|
||
.article-info-tools {
|
||
color: #999999;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
> span {
|
||
font-size: 14px;
|
||
margin-top: 2px;
|
||
margin-left: 10px;
|
||
color: #747474;
|
||
}
|
||
> span:last-of-type {
|
||
// margin-top: -4px;
|
||
margin-right: auto;
|
||
}
|
||
}
|
||
}
|
||
</style>
|