info-item

 

<template v-for="(item, index) in data1" :key="index">
    <div class="info-item">
        <div class="info-item-left">{{item.time}}</div>
        <div class="info-item-right">
            <div class="dian"></div>
            <div class="info-item-right-type" :class="'infotype'+item.type">{{item.typeText}}</div>
            <div class="info-item-right-info">{{item.info}}</div>

        </div>

    </div>
</template>

.info-item {
    display: flex;
    font-size: 12px;

    .info-item-left {
        width: 150px;
        padding-top: 5px;

    }

    .info-item-right {
        display: flex;
        margin-left: 7px;
        padding-top: 5px;

        border-left: 1px #ccc solid;
        .dian{
            width: 12px;
            height: 10px;
            border-radius: 50%;
            border: 1px blue solid;
            margin-left: -6px;
            background: #fff;
        }
        .info-item-right-type {
            padding: 1px 3px;
            margin-left: 10px;
            height: 15px;
            margin-right: 10px;
            width: 50px;
            text-align: center;
        }
        .infotype3{
            border: 1px #FAC858 solid;
            color: #FAC858;
        }

        .infotype4{
            border: 1px red solid;
            color: red;
        }

        .info-item-right-info{
            white-space:pre-line;
            text-align: left;
            padding-bottom: 10px;
        }
    }
}