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

<template>
<div class="course-item-container" @click='linkTo'>
    <div class="course-main">
        <div class="course-title">{{info.title}}</div>
        <div class="course-content">
            {{info.desc}}
        </div>
        <div class="course-author">
            <img class="course-author-avatar" :src="courseUserInfo.icon_url" alt="" />
            <div class="course-author-name">{{courseUserInfo.nickname}}</div>
            <div class="course-author-title">{{courseUserInfo.direction_op_name}}@{{courseUserInfo.company}}</div>
        </div>
        <div class="course-bug-info">
            <div class="course-price">¥{{info.price}}</div>
            <div class="course-lesson-count">共{{info.zj_num}}小节 · {{info.buy_num}}人已购买</div>
        </div>
    </div>
    <div class="course-cover" v-if="info.img_icon">
        <el-image style="width:100%;height:100%" fit="cover" :src="info.img_icon"></el-image>
    </div>
</div>
</template>

<script>
export default {
    props: ["info"],
    computed: {
        courseUserInfo() {
            return this.info.user_info || {};
        },
    },
    methods:{
        linkTo(){
            window.open(this.info.link,'view_window');
        }
    }
};
</script>

<style lang="scss" scoped>
.course-item-container {
    margin-left: 34px;
    margin-right: 34px;
    padding-top: 30px;
    padding-bottom: 32px;
    border-bottom: 1px solid #ebeced;
    display: flex;
    align-items: center;
    cursor: pointer;

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

.course-main {
    flex: 1;
}

.course-cover {
    width: 200px;
    height: 116px;
    margin-left: 38px;

    img {
        width: 100%;
        height: 100%;
    }
}

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

.course-content {
    margin-top: 8px;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #828c99;
    line-height: 18px;
}

.course-author {
    display: flex;
    margin-top: 16px;
    align-items: center;
}

.course-author-avatar {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    overflow: hidden;
    margin-right: 8px;
}

.course-author-name {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #0b121a;
    margin-right: 16px;
}

.course-author-title {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #828c99;
}

.course-bug-info {
    margin-top: 30px;
    display: flex;
    align-items: center;
}

.course-price {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff7640;

    margin-right: 16px;
}

.course-lesson-count {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #828C99;
    margin-right: 14px;
}
</style>