proginn-frontend/pages/frontend/personal/component/article-item.vue

<template>
<div class="article-item-container">
    <div class="article-main">
        <div class="article-author-info">
            <span>{{articleUserInfo.nickname}}</span>
            <span class="article-time">2021-12-4</span>
            <span class="article-job">{{articleUserInfo.direction_op_name}}@{{articleUserInfo.company}}</span>
        </div>
        <div class="article-title">{{info.title}}</div>
        <div class="article-content">
            {{info.excerpt}}
        </div>
        <div class="article-count">
            <div class="article-count-item read">{{info.view_count}}</div>
            <div class="article-count-item like">{{info.like_count}}</div>
            <div class="article-count-item comment">{{info.reply_count}}</div>
        </div>
    </div>
    <div class="article-cover" v-if="info.cover_url">
        <el-image style="width:174px;height:116px" fit="cover" :src="info.cover_url"></el-image>
    </div>
</div>
</template>

<script>
export default {
    props: ["info"],
    computed: {
        articleUserInfo() {
            return this.info.user_info || {};
        }
    }
};
</script>

<style lang="scss" scoped>
.article-item-container {
    margin-left: 34px;
    margin-right: 34px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ebeced;

    // &:nth-last-child(1) {
        // border-bottom: none;
    // }
}

.article-main {
    flex: 1;
    padding: 30px 0 36px;
}

.article-cover {
    width: 174px;
    height: 116px;
    margin-left: 36px;
}

.article-author-info {
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #828c99;
    line-height: 18px;

    .article-time {
        margin-left: 16px;
    }

    .article-job {
        margin-left: 16px;
    }
}

.article-title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #0b111a;
    line-height: 21px;
    margin-top: 14px;
}

.article-content {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4b5d73;
    line-height: 21px;
    margin-top: 6px;
}

.article-count {
    margin-top: 16px;
}

.article-count-item {
    margin-right: 20px;
    display: inline-block;
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #828c99;
    line-height: 17px;
    padding-left: 16px;

    background-size: 14px auto;
    background-repeat: no-repeat;
    background-position: left center;

    cursor: pointer;

    &.read {
        background-image: url("~@/assets/img/frontend/personal/read.png");
    }

    &.like {
        background-image: url("~@/assets/img/frontend/personal/like.png");
    }

    &.comment {
        background-image: url("~@/assets/img/frontend/personal/comment.png");
    }
}
</style>