water_affairs/pages/facility/list.vue

<template>
    <view>
        <My_listbox ref="List" :pullDown="false" :empty='empty'>
            <navigator v-for="item in list" :key="item.w_deviceid" class="item"
                :url="'/pages/facility/detail?id=' + item.w_deviceid">
                <view class="name u-line-1">设备：{{ item.devicename || ' --' }}</view>
                <view class="row u-line-1">产品名称：<text>{{ item.prodname || ' --' }}</text></view>
                <view class="row u-line-1">设备编号：<text>{{ item.serialnumber || ' --' }}</text></view>
                <view class="row u-line-1">设备地址：<text>{{ (item.province + item.city + item.county + item.address) || ' --'
                }}</text>
                </view>
                <view class="status" :style="{ background: item.bgColor }">{{ item.status }}</view>
            </navigator>
            <view style="height: 20px;" />
        </My_listbox>
    </view>
</template>
<script>
export default {
    props: {
        list: Array,
        empty: Boolean
    },
    name: "list",
    data() {
        return {
            uninitialized: true
        }
    },
    methods: {
        init() {
            this.uninitialized = false;
            this.$refs.List.setHeight();
        }
    }
}
</script>

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

    .name {
        width: 300px;
        line-height: 21px;
        font-size: 15px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: bold;
        color: #333333;
        margin-bottom: 10px;
    }

    .row {
        line-height: 17px;
        font-size: 12px;
        color: #666666;
        margin-bottom: 5px;

        text {
            line-height: 17px;
            font-size: 12px;
            color: #0A3971;
        }
    }

    .status {
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 0px 4px 0px 4px;
        background: red;
        text-align: center;
        line-height: 24px;
        padding: 0 10px;
        font-size: 12px;
        font-family: PingFang SC-Regular, PingFang SC;
        color: #FFFFFF;
    }
}
</style>