imt-micro/src/components/News/Row.vue

<template>
    <div class="news" @click="navigateTo('/pagesNews/Detail?id=' + info.id, false)">
        <van-image :src="info.img" fit="cover" width="280rpx" height="200rpx" custom-class="my-img" />
        <div class="news-info">
            <div class="text1">
                <van-tag type="warning" v-if="isList && info.top">置顶</van-tag>
                <span> {{ info.title }}</span>
            </div>
            <p>{{ info.createdAt }}</p>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        },
        isList: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {};
    }
};
</script>
<style lang="less" scoped>
.news {
    display: flex;
    background-color: @bgw;
    border-radius: 4px;
    overflow: hidden;
    .news-info {
        padding: 12px 10px;
        flex-grow: 1;
        overflow: hidden;
        .text1 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            font-size: 16px;
            color: #000000;
            line-height: 24px;
            ._van-tag {
                vertical-align: middle;
            }
            span {
                vertical-align: middle;
            }
        }

        p {
            color: #acb3bf;
            margin-top: 6px;
        }
    }
    // &:active {
    //     background-color: darken(#fff, 10);
    // }
}

.text1 {
    ._van-tag {
        vertical-align: middle;
        height: 16px;
        display: inline-block;
        margin-right: 3px;
        line-height: 32rpx;
        --tag-warning-color: #ef8207;
    }
    span {
        vertical-align: middle;
    }
}
</style>
<style lang="less">
.my-img {
    --image-placeholder-background-color: #ccc;
}
</style>