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

<template>
<div class="dynamic-item-container">
    <div class="dynamic-item-avatar">
        <img :src="dynamicUserInfo.icon_url" alt="" />
    </div>
    <div class="dynamic-main">
        <div class="dynamic-user-name">{{ dynamicUserInfo.nickname }}</div>
        <div class="dynamic-user-login-info" v-if="dynamicUserInfo.tag.length > 0">
            <span>{{ dynamicUserInfo.tag[0].name }}</span>
            <span v-if="dynamicUserInfo.tag[1]">· {{ dynamicUserInfo.tag[1].name }}</span>
        </div>
        <p class="dynamic-content">
            {{ info.title }}
        </p>
        <!-- <div class="dynamic-more">
        展开
      </div> -->
        <div class="dynamic-link"  @click.capture.stop="clickResource(dynamicResources)"  v-if="dynamicResources.resources_status == 1">
            <div class="dynamic-link-content">
                <p class="dynamic-link-title">
                    {{ dynamicResources.resources_title }}
                </p>
                <p class="dynamic-link-herf">{{ dynamicResources.resources_url }}</p>
            </div>
            <div class="dynamic-link-img">
                <img :src="dynamicResources.resources_img" alt="" />
            </div>
        </div>
        <div class="dynamic-images" v-if="dynamicImg.length > 0">
            <div v-for="(item, index) in dynamicImg" :key="index" class="dynamic-image-item">
                <el-image style="width:90px;height:90px" fit="cover" :src="item.img" :preview-src-list="dynamicImgBig">
                </el-image>
            </div>
        </div>
        <div class="dynamic-type">
            {{ info.type_text }}
        </div>
        <div class="dynamic-operation">
            <div class="dynamic-operation-btn share" @click="gotoAppTips">分享</div>
            <div class="dynamic-operation-btn like" @click="gotoAppTips">点赞</div>
            <div class="dynamic-operation-btn comment" @click="gotoAppTips">
                评论
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    props: ["info"],
    computed: {
        dynamicUserInfo() {
            return this.info.user_info || {};
        },
        dynamicResources() {
            return this.info.resources || {};
        },
        dynamicImg() {
            return this.info.img || [];
        },
        dynamicImgBig() {
            let imgList = this.info.img || [];
            imgList = imgList.map(item => {
                return item.img
            })
            return imgList
        }
    },
    methods: {
        gotoAppTips() {
            this.checkLogin(true);
            this.$message("请前往APP查看");
        },
        clickResource(resources){
            if(resources.resources_status != 1){
                this.$message.info(resources.resources_text)
            }else{
                location.href = resources.resources_url
            }
        },
    }
};
</script>

<style lang="scss" scoped>
.dynamic-item-container {
    padding: 29px 24px 16px;
    border-bottom: 1px solid #ebeced;
    display: flex;

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

.dynamic-item-avatar {
    width: 24px;
    height: 24px;
    margin-right: 10px;

    img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
    }
}

.dynamic-main {
    flex: 1;
}

.dynamic-user-name {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #0b121a;
    line-height: 20px;
}

.dynamic-user-login-info {
    margin-top: 3px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #828c99;
    line-height: 17px;
}

.dynamic-content {
    margin-top: 12px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #0b111a;
    line-height: 21px;
    margin-bottom: 16px;
}

.dynamic-more {
    margin-top: 6px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #308eff;
    line-height: 21px;
}

.dynamic-link {
    margin-top: 16px;
    background: #f7f8fa;
    padding: 12px 14px;
    display: flex;
    margin-bottom: 16px;
    cursor: pointer;
}

.dynamic-link-content {
    flex: 1;
}

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

.dynamic-link-herf {
    margin-top: 21px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #828c99;
    line-height: 20px;
}

.dynamic-link-img {
    width: 66px;
    height: 66px;
    margin-left: 20px;

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

.dynamic-images {
    display: flex;
    //   justify-content: space-between;
    flex-wrap: wrap;
}

.dynamic-image-item {
    width: 90px;
    height: 90px;
    margin-right: 10px;
    margin-bottom: 16px;

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

.dynamic-type {
    margin-top: 16px;
    width: 80px;
    height: 23px;
    background: #ebf4ff;
    border-radius: 12px;
    text-align: center;
    line-height: 23px;

    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #288bff;
}

.dynamic-operation {
    display: flex;
    margin-top: 26px;
    justify-content: space-around;
}

.dynamic-operation-btn {
    // flex: 1;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    padding-left: 26px;

    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left center;
    cursor: pointer;

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

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

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