89 lines
2.9 KiB
Vue
89 lines
2.9 KiB
Vue
<template>
|
|
<div class="articleList" @click="goArticleDetail">
|
|
<div style="display: flex;flex-direction: column;">
|
|
<div class="articleTitle" style="display: flex;justify-content: flex-start">
|
|
<span style="font-size: 16px;color: black;font-weight: bold">{{articleList.ArticleTitle}}</span>
|
|
</div>
|
|
<span v-text="brief" style="display: flex;justify-content:flex-start;text-align: left;margin-top: 10px;font-size: 13px;color: #9ca3af">
|
|
|
|
</span>
|
|
<div style="margin-top: 10px;display: flex;flex-direction: row;flex-wrap: wrap;align-items: center;font-size: 12px;color: #1f2937">
|
|
<span style="display: flex;justify-content: flex-start"> 作者: </span>
|
|
<span v-if="articleList.username" style="margin-left: 5px"> {{articleList.username}} </span>
|
|
<span style="margin-left: 5px">●</span>
|
|
<span style="margin-left: 5px">发布于 </span>
|
|
<span v-if="articleList.publishtime" style="margin-left: 5px">{{articleList.publishtime}}</span>
|
|
<span style="margin-left: 5px">●</span>
|
|
<span style="margin-left: 5px">阅读: </span>
|
|
<span v-if="articleList.ReadCount" style="margin-left: 5px">{{ formatNumber(articleList.ReadCount) }}</span>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100px;height: 100px;margin-right: 10px">
|
|
<el-avatar v-if="articleList.articleico" :size="100" shape="square" :src="articleList.articleico"></el-avatar>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "ArticleList",
|
|
props: {
|
|
articleList: Object
|
|
},
|
|
data(){
|
|
return {
|
|
}
|
|
|
|
},
|
|
computed:{
|
|
brief: function() {
|
|
if(this.articleList.ArticleContent){
|
|
return this.articleList.ArticleContent.substr(0, 100) + '...';
|
|
}else{
|
|
return false;
|
|
}
|
|
},
|
|
},
|
|
methods:{
|
|
formatNumber(num) {
|
|
return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
|
|
},
|
|
goArticleDetail(){
|
|
if(this.articleList.ArticleId){
|
|
this.$router.push({
|
|
path:'/ArticleDetail',
|
|
query: {
|
|
id: this.articleList.ArticleId,
|
|
refresh: true
|
|
}})
|
|
}else{
|
|
return false;
|
|
}
|
|
|
|
// console.log(this.$route.query.id)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.articleList{
|
|
height: 15vh;
|
|
width: 100%;
|
|
/*background-color: #59A3A4;*/
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
}
|
|
.articleList:hover {
|
|
background-color: #eeeeee;
|
|
}
|
|
.articleTitle :hover{
|
|
color: #42b983;
|
|
}
|
|
</style> |