gganli/application/admin/view/weixin/news/index.html

<div class="panel panel-default panel-intro">
    
    <div class="panel-heading">
        {:build_heading(null,FALSE)}
        <ul class="nav nav-tabs" data-field="status">
            <li class="active"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>
            {foreach name="statusList" item="vo"}
            <li><a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$vo}</a></li>
            {/foreach}
        </ul>
    </div>

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
                        <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('weixin/news/add')?'':'hide'}" data-area='["1200px","680px"]' title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('weixin/news/edit')}" 
                           data-operate-del="{:$auth->check('weixin/news/del')}" 
                           width="100%">
                    </table>
                </div>
            </div>

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


<style type="text/css">
    .example {
        height:100%;position: relative;
        padding:9px;
    }
    .example > span {
        position:absolute;left:15px;top:15px;
    }
    .news-item-title {
        position: relative;
        width: 100%;
        height: 70px;
        overflow: hidden;
        border: 1px solid #ccc;
        background-size: cover;
        background-position: center center;
    }
    .right-text {
        float: left;
        width: 80%;
        height: 100%;
        padding: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .left-image {
        width: 18%;
        float: left;
        overflow: hidden;
        position: relative;
        background-size: 100%;
        background-position: center center;
    }
    .news-item {
        position: relative;
        width: 100%;
        overflow: hidden;
        border: 1px solid #ccc;
        background-size: cover;
        background-position: center center;
        margin-bottom: 15px;
    }
</style>

<script id="itemtpl" type="text/html">
    <% var labelarr = ['primary', 'success', 'info', 'danger', 'warning']; %>
    <% var label = labelarr[i % 5]; %>
    <div class="col-sm-4 col-md-3" style="width: 20%;">
        <div class="thumbnail example">
            <div class="news-item-title" style="margin-bottom: 15px;">
                <div class="right-text"><h4><%=item.cate_name?item.cate_name:'无'%></h4></div>
                <img class="left-image" src="<%=item.image%>" alt="<%=item.cate_name%>">
            </div>
            <div class="caption" style="padding: 0;">
                <p>
                    <!--如果需要响应编辑或删除事件，可以给元素添加 btn-edit或btn-del的类和data-id这个属性值-->
                    <a href="#" class="btn btn-primary btn-edit" data-area='["1200px","680px"]' data-id="<%=item.id%>"><i class="fa fa-pencil"></i> 编辑</a>
                    <a href="#" class="btn btn-danger btn-del" data-id="<%=item.id%>"><i class="fa fa-times"></i> 删除</a>
                </p>
            </div>
        </div>
    </div>
</script>