water_affairs/packageA/alerts/modules/list.vue

<template>
    <view>
        <navigator :url="'/packageA/alerts/detail?id=' + item.w_event_logid" class="item" hover-class="navigator-hover"
            v-for="item in list " :key="item.w_event_logid">
            <view class="tag" :style="{
                color: tagStyleList[item.lasteventlevel - 1].color,
                backgroundColor: tagStyleList[item.lasteventlevel - 1].backgroundColor,
            }">{{ tagStyleList[item.lasteventlevel - 1].name }}</view>
            <view class="title u-line-1">{{ item.eventname || "--" }}</view>
            <view class="row u-line-1">产品名称：{{ item.prodname || ' --' }}</view>
            <view class="row u-line-1">告警描述：{{ item.showValue || ' --' }}</view>
            <view class="time">最新告警时间：{{ item.lasteventtime }}</view>
        </navigator>
    </view>
</template>
<script>
import { styleList } from "./styleList";
export default {
    name: 'List',
    props: {
        list: Array
    },
    data() {
        return {
            tagStyleList: styleList
        }
    },
}
</script>

<style lang="scss" scoped>
.item {
    position: relative;
    width: 355px;
    padding: 0 10px;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 0 auto;
    margin-bottom: 10px;
    background: #fff;
    overflow: hidden;

    .title {
        color: #004684;
        font-weight: bold;
        line-height: 20px;
        text-indent: 34px;
        margin-top: 4px;
    }

    .tag {
        position: absolute;
        top: 0;
        left: 0;
        padding: 2px 6px;
        font-size: 14px;
        border-radius: 0 0 4px 0;
    }

    .row {
        font-size: 12px;
        color: #666;
        line-height: 24px;
    }

    .time {
        margin-top: 2px;
        padding: 8px 0;
        color: #555;
        font-size: 12px;
        border-top: 1px solid #999;
    }
}
</style>