water_affairs/pages/facility/list.vue

<template>
    <My_listbox ref="List" :empty='empty' @getlist="getlist">
        <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>
</template>
<script>

export default {
    props: {
        list: Array,
        empty: Boolean,
        tabHeight: Number
    },
    name: "list",
    data() {
        return {
            uninitialized: true
        }
    },
    methods: {
        init() {
            this.uninitialized = false;
            setTimeout(() => this.$refs.List.setHeight("minus", this.tabHeight), 300)
        },
        getlist() {
            if (this.$Http.updateFacilityList) {
                this.$Http.updateFacilityList().then(res => this.$refs.List.RefreshToComplete())
            } else {
                this.$refs.List.RefreshToComplete();
            }
        },
    }
}
</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>