idsci/application/index/view/user/unread.html

<style>
    .profile-avatar-container {
        position: relative;
        width: 100px;
    }

    .profile-avatar-container .profile-user-img {
        width: 100px;
        height: 100px;
    }

    .profile-avatar-container .profile-avatar-text {
        display: none;
    }

    .profile-avatar-container:hover .profile-avatar-text {
        display: block;
        position: absolute;
        height: 100px;
        width: 100px;
        background: #444;
        opacity: .6;
        color: #fff;
        top: 0;
        left: 0;
        line-height: 100px;
        text-align: center;
    }

    .profile-avatar-container button {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        opacity: 0;
    }
</style>
<link href="__CDN__/assets/css/user/inbox.css?v={$Think.config.site.version|htmlentities}" rel="stylesheet">
<div class="common-bg">
    <div class="common-font">
        My Unread
    </div>
</div>
<div id="content-container" class="container">
    <div class="row">
        <div class="col-md-3">
            {include file="common/sidenav" /}
        </div>
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-body">
                    <h2 class="page-header">
                        My Unread
                    </h2>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{:url('user/inbox')}">Inbox</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">
                                Unread
                            </li>
                        </ol>
                    </nav>
                    {:token()}

                    <!-- 邮箱列表页 -->
                    <div class="table-responsive">
                        <table class="table inbox-table">
                            <thead style="background: #FAFAFA;" class="thead">
                            <tr>
                                <th>Sender</th>
                                <th>Content</th>
                                <th>Creation time</th>
                                <th>Operate</th>
                            </tr>
                            </thead>
                            <tbody class="tbody">
                            {foreach name="list" item="vo"}
                            <tr>
                                <td><a href="#">{$vo.user.nickname}</a></td>
                                <td>{$vo.content}</td>
                                <td>{$vo.createtime}</td>
                                <td><a href="javascript:;" data-id="{$vo.id}" id="read-button">READ</a></td>
                            </tr>
                            {/foreach}
                            </tbody>
                        </table>
                    </div>

                    <!--@formatter:off-->

                    <!-- S 分页栏 -->
                    <div class="pager">
                        {$list->render()}
                    </div>
                    <!-- E 分页栏 -->
                    <!--@formatter:on-->

                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="emailtpl">
    <form id="email-form" class="form-horizontal form-layer" method="POST" action="{:url('api/user/changeemail')}">
        <div class="form-body">
            <input type="hidden" name="action" value="changeemail"/>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-3">{:__('New Email')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input type="text" class="form-control" id="email" name="email" value=""
                           data-rule="required;email;remote({:url('api/validate/check_email_available')}, event=changeemail, id={$user.id})"
                           placeholder="{:__('New email')}">
                    <span class="msg-box"></span>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-3">{:__('Captcha')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <div class="input-group">
                        <input type="text" name="captcha" id="email-captcha" class="form-control"
                               data-rule="required;length({$Think.config.captcha.length});digits;remote({:url('api/validate/check_ems_correct')}, event=changeemail, email:#email)"/>
                        <span class="input-group-btn" style="padding:0;border:none;">
                            <a href="javascript:;" class="btn btn-info btn-captcha" data-url="{:url('api/ems/send')}"
                               data-type="email" data-event="changeemail">获取验证码</a>
                        </span>
                    </div>
                    <span class="msg-box"></span>
                </div>
            </div>
        </div>
        <div class="form-footer">
            <div class="form-group" style="margin-bottom:0;">
                <label class="control-label col-xs-12 col-sm-3"></label>
                <div class="col-xs-12 col-sm-8">
                    <button type="submit" class="btn btn-md btn-primary">{:__('Submit')}</button>
                </div>
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="mobiletpl">
    <form id="mobile-form" class="form-horizontal form-layer" method="POST" action="{:url('api/user/changemobile')}">
        <div class="form-body">
            <input type="hidden" name="action" value="changemobile"/>
            <div class="form-group">
                <label for="c-mobile" class="control-label col-xs-12 col-sm-3">{:__('New mobile')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input type="text" class="form-control" id="mobile" name="mobile" value=""
                           data-rule="required;mobile;remote({:url('api/validate/check_mobile_available')}, event=changemobile, id={$user.id})"
                           placeholder="{:__('New mobile')}">
                    <span class="msg-box"></span>
                </div>
            </div>
            <div class="form-group">
                <label for="mobile-captcha" class="control-label col-xs-12 col-sm-3">{:__('Captcha')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <div class="input-group">
                        <input type="text" name="captcha" id="mobile-captcha" class="form-control"
                               data-rule="required;length({$Think.config.captcha.length});digits;remote({:url('api/validate/check_sms_correct')}, event=changemobile, mobile:#mobile)"/>
                        <span class="input-group-btn" style="padding:0;border:none;">
                            <a href="javascript:;" class="btn btn-info btn-captcha" data-url="{:url('api/sms/send')}"
                               data-type="mobile" data-event="changemobile">获取验证码</a>
                        </span>
                    </div>
                    <span class="msg-box"></span>
                </div>
            </div>
        </div>
        <div class="form-footer">
            <div class="form-group" style="margin-bottom:0;">
                <label class="control-label col-xs-12 col-sm-3"></label>
                <div class="col-xs-12 col-sm-8">
                    <button type="submit" class="btn btn-md btn-primary">{:__('Submit')}</button>
                </div>
            </div>
        </div>
    </form>
</script>
<style>
    .form-layer {
        height: 100%;
        min-height: 150px;
        min-width: 300px;
    }

    .form-body {
        width: 100%;
        overflow: auto;
        top: 0;
        position: absolute;
        z-index: 10;
        bottom: 50px;
        padding: 15px;
    }

    .form-layer .form-footer {
        height: 50px;
        line-height: 50px;
        background-color: #ecf0f1;
        width: 100%;
        position: absolute;
        z-index: 200;
        bottom: 0;
        margin: 0;
    }

    .form-footer .form-group {
        margin-left: 0;
        margin-right: 0;
    }
</style>