water_affairs/pages/message/list.vue

<template>
    <view><!-- :url="'/pages/message/detail?id=' + item.messageid" -->
        <navigator v-for="item in list" :key="item.messageid" class="item" @tap="read(item)" url="#">
            <view class="title u-line-1">{{ item.title || ' --' }}</view>
            <view class="content u-line-3">{{ item.message || ' --' }}</view>
            <view class="time">{{ item.readdate || ' --' }}</view>
            <view class="unread" v-if="item.isread == 0" />
        </navigator>
    </view>
</template>

<script>
export default {
    name: "List",
    props: {
        list: Array,
        onReadMsg: Function
    },
    methods: {
        read(item) {
            if (item.isread == 0) this.$emit("onReadMsg", item)
        }
    },
}
</script>

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

    .title {
        font-size: 14px;
        margin-bottom: 6px;
    }

    .content {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .time {
        font-size: 10px;
        color: #666;
    }

    .unread {
        position: absolute;
        top: 3px;
        right: 3px;
        width: 8px;
        height: 8px;
        background: #FF3B30;
        border-radius: 50%;
    }
}
</style>