<template>
    <div>
        <div style="padding: 10px 10px 0 10px;font-size:14px;line-height:19px;">
            <div class="arrow_box" :style="{borderLeft:GetColor()}">
                <mu-row>
                    <mu-col span="10">{{ item.title }}</mu-col>
                    <mu-col span="2" style="font-weight: bold;text-align: right;">
                        <mu-badge :content="item.readflag > 0 ? '已读' : '未读'" :color="item.readflag > 0 ?'#8dc026':'#ff0000'"></mu-badge>
                    </mu-col>
                </mu-row>
                <mu-row style="margin: 5px 0 10px 0;">
                    <mu-col span="12">{{ item.tcontent }}</mu-col>
                </mu-row>
                <mu-row>
                    <mu-col span="8" style="font-size:13px;color:#888">
                        <span>{{item.opdate | timeFilter}}</span>
                    </mu-col>
                    <mu-col span="4" style="font-weight: bold;text-align: right;">
                        <mu-badge :content="item.reltype"></mu-badge>
                    </mu-col>
                </mu-row>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "push-msg-item",
        props: {
            item: {
                // 传入数据
                type: Object
            }
        },
        data() {
            return {}
        },
        methods: {
            GetColor() {
                return "5px solid #46a4da";
            },
        }
    }
</script>
<style>
    .arrow_box {
        position: relative;
        padding: 5px 5px 5px 10px;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
        background: #fff;
        margin-bottom: 8px;
    }

    .order_conner {
        position: absolute;
        right: 0px;
        top: 0px;
        /* color: #888; */
        font-size: 12px;
        padding: 4px 10px;
        /* background-color: #ececec; */
        line-height: 12px;
        width: 36px;
        text-align: center;
        font-weight: bold;
    }
</style>