<div id="message-view" class="layui-card-body layui-tab layui-tab-brief" style="padding: 5px 0;margin: 0;">
    <ul class="layui-tab-title" style="text-align: center;">
        <li class="layui-this">通知({{notices.length}})</li>
        <li>私信({{messages.length}})</li>
        <li>待办({{schedules.length}})</li>
    </ul>
    <div class="layui-tab-content" style="padding: 5px 0;">
        <div class="layui-tab-item message-list layui-show" p-each="notices">
            <a class="message-list-item" href="javascript:;">
                <img class="message-item-icon" p-bind="src:{{icon}}">
                <div class="message-item-right">
                    <h2 class="message-item-title">{{title}}</h2>
                    <p class="message-item-text">{{time}}</p>
                </div>
            </a>
        </div>
        <div class="layui-tab-item" p-each="messages">
            <a class="message-list-item" href="javascript:;">
                <img class="message-item-icon" p-bind="src:{{icon}}">
                <div class="message-item-right">
                    <h2 class="message-item-title">{{title}}</h2>
                    <p class="message-item-text">{{content}}</p>
                    <p class="message-item-text">{{time}}</p>
                </div>
            </a>
        </div>
        <div class="layui-tab-item" p-each="schedules">
            <a class="message-list-item" href="javascript:;">
                <div class="message-item-right">
                    <span class="layui-badge pull-right" p-if="{{state}}==1">待完成</span>
                    <span class="layui-badge layui-bg-gray pull-right" p-if="{{state}}==2">已完成</span>
                    <h2 class="message-item-title">{{title}}</h2>
                    <p class="message-item-text">{{time}}</p>
                </div>
            </a>
        </div>
    </div>
</div>

<script>
    var dataList = {
        notices: [{
            icon: 'assets/images/message.png',
            title: '你收到了14份新周报',
            time: '10个月前'
        }, {
            icon: 'assets/images/message.png',
            title: '你收到了14份新周报',
            time: '10个月前'
        }],
        messages: [{
            icon: 'assets/images/head.png',
            title: 'xx评论了你',
            content: '哈哈哈哈哈哈',
            time: '10个月前'
        }, {
            icon: 'assets/images/head.png',
            title: 'xx评论了你',
            content: '哈哈哈哈哈哈',
            time: '10个月前'
        }],
        schedules: [{
            title: '你收到了14份新周报',
            time: '10个月前',
            state: 1
        }, {
            title: '你收到了14份新周报',
            time: '10个月前',
            state: 2
        }]
    };

    layui.use('element', function () {
        var element = layui.element;

        $('#message-view').vm(dataList);
    });
</script>