ConstructionCost/web/common/html/header.html

<nav class="navbar navbar-toggleable-lg navbar-light bg-faded p-0 justify-content-between">
    <span class="header-logo px-2">Smartcost</span>
    <div class="navbar-text"><a href="/pm">项目管理</a></div>
    <div class="float-lg-right navbar-text pt-0">
        <div class="dropdown d-inline-block">
            <button class="btn btn-link btn-sm dropdown-toggle" type="button" data-toggle="dropdown"><%= sessionUser.email %></button>
            <div class="dropdown-menu dropdown-menu-right">
                <a class="dropdown-item" href="user-info.html" target="_blank">账号资料</a>
                <a class="dropdown-item" href="user-buy.html" target="_blank">产品购买</a>
                <a class="dropdown-item" href="user-set.html" target="_blank">偏好设置</a>
            </div>
        </div>
        <a class="btn btn-link btn-sm <% if (unreadCount > 0) { %>new-msg<% } %>" id="message" data-toggle="modal" data-target="#msg" href="javacript:void(0);">
            <i class="fa fa-envelope-o" aria-hidden="true"></i>&nbsp;<span id="unread-num"><%= unreadCount %></span>
        </a>
        <a class="btn btn-link btn-sm" href="/logout">注销</a>
    </div>
</nav>
<!--弹出消息-->
<div class="modal fade" id="msg" data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa fa-envelope-o"></i> 消息通知</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body modal-auto-height">
                <div id="message-loading" style="text-align: center; padding-top: 100px;"></div>
                <!--消息列表 默认显示10条-->
                <table class="table table-bordered" id="message-list" style="display: none;">
                    <thead>
                        <tr>
                            <th>标题<a href="javascript:void(0);" id="set-all-read" class="float-right btn btn-sm">设置全部已读</a></th>
                            <th width="120">发布时间</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <div id="message-content" style="display: none;">
                    <!--点击标题查看内容-->
                    <a href="javascript:void(0);" class="back">返回</a>
                    <h4 class="text-center title"></h4>
                    <p class="text-center time"></p>
                    <div class="mx-3 mb-5 content"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<script src="/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/web/building_saas/js/moment.min.js"></script>
<script type="text/javascript" src="/web/building_saas/js/message.js"></script>