vue 详情组件；动态换行；动态显示不同颜色；

效果

 html

<div class="left">
    <span class="overview">实时监控</span>
    <div class="descrip-list">
        <div class="descrip-item" :style="{ width: item.large ? '100%' : '50%' }"
           v-for="item in list">
              <div class="lbl">{{ item.label }}</div>
              <div class="txt" :class="item.status == 'online' ? 'online' : item.status == 'offline' ? 'offline' : item.status == 'alarm' ? 'alarm' : item.status == 'abnormal' ? 'abnormal' : ''">{{item.value }}</div>
        </div>
     </div>
</div>

js

  props: {
        list: {
            type: Array,
            default: function () {
                return [
                    {
                        label: '水位(m)',
                        value: 0.34,
                        large: true,
                        status: 'online'
                    },
                    {
                        label: '1小时雨量(mm)',
                        value: 0.34,
                        status: 'offline'
                    },
                    {
                        label: '3小时雨量(mm)',
                        value: 0.34,
                        status: 'alarm'
                    },
                    {
                        label: '6小时雨量(mm)',
                        value: 0.34,
                        status: 'abnormal'
                    },
                    {
                        label: '12小时雨量(mm)',
                        value: 0.34,
                        status: 'online'
                    },
                    {
                        label: '最新上报时间',
                        value: 0.34,
                        large: true,
                    },

                ]
            }
        }
    },

css

.content {
    display: flex;
    justify-content: space-between;

    .left,
    .right {
        width: 589px;
        background: #fcfcfc;
        border: 1px solid rgba(151, 151, 151, 0.15);
    }

    .left {
        position: relative;
        .overview {
            margin-left: 50px;
            box-sizing: border-box;
            padding-top: 16px;
            display: inline-block;
        }
        .overview::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 20px;
            background-color: #117dee;
            left: 19px;
            border-radius: 10px;
        }
        .descrip-list {
            box-sizing: border-box;
            margin: 15px;
            display: flex;
            flex-wrap: wrap;
            .descrip-item {
                display: flex;
                border-bottom: 1px solid #f0f0f0;
                .lbl {
                    width: 140px;
                    height: 46px;
                    background: rgba(0, 0, 0, 0.02);
                    display: inline-block;
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC-Regular;
                    font-weight: 400;
                    text-align: left;
                    color: #000;
                    line-height: 46px;
                    padding-left: 25px;
                    box-sizing: border-box;
                }
                .txt {
                    height: 45px;
                    line-height: 45px;
                    padding-left: 25px;
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC-Medium;
                    font-weight: 500;
                    text-align: left;
                    color: #0a84ff;
                    box-sizing: border-box;
                    display: inline-block;
                    background: #fff;
                    flex: 1;

                    &.online {
                        color: #67c23a;
                    }

                    &.offline {
                        color: #666666;
                    }

                    &.alarm {
                        color: #ff4d4f;
                    }

                    &.abnormal {
                        color: #faad14;
                    }
                }
            }

        }
        .descrip-item:first-child {
            border-top: 1px solid #f0f0f0;
        }
    }

}