Delivery-merchant/components/NewsInfo.vue

<template>
    <div
        class="news-info"
    >
        <div class="icon">
            <!-- <div class="dot" v-if="dot">{{ dot }}</div> -->
						<image style="width: 50px;height: 50px;border-radius: 50%;" src="https://bpic.588ku.com/illus_water_img/21/07/05/ecab6de5a7b2972500459ba95cf97deb.jpg" mode=""></image>
        </div>
        <div class="content">
            <div class="text1">
                333
            </div>
            <span class="time">1111</span>
            <div class="text2">222</div>
        </div>
    </div>
</template>

<script>
// import { mapState } from 'vuex';
// import dayjs from 'dayjs';
// import * as relativeTime from 'dayjs/plugin/relativeTime';
// import 'dayjs/locale/zh-cn';
// dayjs.locale('zh-cn');
// dayjs.extend(relativeTime);

export default {
    name: 'NewsInfo',
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        },
        dot: {
            type: Number,
            default: 0
        }
    },
};
</script>

<style lang="scss" scoped>
.news-info {
    // .flex();
		display: flex;
		align-items: center;
    padding: 20px 0;
    overflow: hidden;
		border-bottom: 1px solid #F5F7FA;
    .icon {
        flex-shrink: 0;
        margin-right: 8px;
        position: relative;
        .dot {
            min-width: 6px;
            height: 18px;
            font-size: 13px;
            color: #ffffff;
            line-height: 18px;
            padding: 0 6px;
            text-align: center;
            position: absolute;
            left: 36px;
            top: -6px;
            // background: @prim;
            border-radius: 9px;
        }
    }

    .content {
        flex-grow: 1;
        overflow: hidden;
        position: relative;
        .text1 {
            font-size: 16px;
            font-weight: bold;
            color: #000000;
            line-height: 26px;
        }

        .text2 {
            font-size: 14px;
            color: #c8c9cc;
            line-height: 24px;
            // .ellipsis();
        }

        .time {
            font-size: 13px;
            color: #c8c9cc;
            line-height: 24px;
            position: absolute;
            right: 0px;
            top: 0;
        }
    }

    &:active {
        background-color: rgba(0, 0, 0, 0.1);
    }
}
</style>