{extend name="common/common2" /}
{block name="main"}
<style>
    .line1 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: box;
        display: -webkit-box;
        line-clamp: 1;
        box-orient: vertical;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all;
    }
    .screen-box{
        width: 100%;
        height: 150px;
        position: relative;
        overflow: hidden;
        margin-bottom: 15px;
    }
    .screen-box:hover .screen-body{
        display: block;
    }
    .screen-box:hover .screen-body-title2{
        display: none;
    }
    .screen-box .screen-img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .screen-box .screen-body{
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5);
        color: #ffffff;
        padding: 15px;
        text-align: center;
        display: none;
    }
    .screen-body-title{
        font-size: 16px;
        font-weight: 600;
        padding-top: 30px;
        padding-bottom: 10px;
    }
    .screen-body-title2{
        position: absolute;
        z-index: 1;
        height: 40px;
        line-height: 40px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.6);
        color: #ffffff;
        padding: 0 15px;
        text-align: center;
    }
</style>
<div class="ibox">
    <div class="ibox-content">
        <div class="row">
            <div class="col-xs-3">
                <a href="{:url('add')}" class="btn btn-sm btn-primary">新增</a>
            </div>
        </div>
    </div>
    <div class="ibox-content">
        <div class="row">
            {volist name="lists" id="vo"}
            <div class="col-xs-3">
                <div class="screen-box">
                    <img class="screen-img" src="{$vo.img|default='/admin/img/screenbg.png'}" alt="">
                    <div class="screen-body">
                        <div class="screen-body-title">
                            {$vo.title}
                        </div>
                        <div class="screen-body-footer">
                            <a target="_blank" href="{$vo.surl}"><span class="label label-info" title="查看">查看</span></a>&nbsp;
                            <a href="{:url('add',['id'=>$vo['id']])}"><span class="label label-primary" title="编辑">编辑</span></a>&nbsp;
                            {if condition="$vo['org_id'] gt 0"}
                            <a href="{:url('del',['id'=>$vo['id']])}" {if !btnAuth(session("user_auth.id"),"Screen/del")} style="display:none"{/if} class="confirm ajax-get data-reload" data-confirm="确定要删除此记录吗?"><span class="label label-danger" title="删除">删除</span></a>
                            {/if}
                        </div>
                    </div>
                    <div class="screen-body-title2 line1">
                        {$vo.title}
                    </div>
                </div>
            </div>
            {/volist}
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    $(function () {

        $(window).bind("resize",function(){
            var width=$(".jqGrid_wrapper").width();
            $("#table").setGridWidth(width);
        });

        $.jgrid.defaults.styleUI="Bootstrap";
        $("#table").jqGrid({
            url:"{:url('index')}",
            datatype: "json",
            colModel:[
                {label:'编号',name:'id',index:'id',width:50,sortable: false},
                {label:'名称',name:'title',index:'title', sortable: false},
                {label:'模板',name:'temp_title',index:'temp_title', sortable: false},
                {label:'备注',name:'remark',index:'remark', sortable: false},
                {label:'操作',width:80,sortable: false,formatter: function (a, b, c) {
                    var editurl = "{:url('add',[],'')}/id/"+c.id;
                    var delurl = "{:url('del',[],'')}/id/"+c.id;
                    var btn = '<a target="_blank" href="'+c.surl+'"><span class="label label-info" title="查看">查看</span></a>&nbsp;';
                    btn += '<a href="'+editurl+'"><span class="label label-primary" title="编辑">编辑</span></a>&nbsp;';
                    btn += '<a href="'+delurl+'" class="confirm ajax-get" data-confirm="确定要删除此记录吗?" data-table="1"><span class="label label-danger" title="删除">删除</span></a>';
                        return btn;
                }},
            ],
            rowNum:10,
            rowList:[10,20,30,50,100],
            pager: '#pager',
            sortname: 'sort',
            viewrecords: true,
            autowidth:true,
            mtype: 'post',
            height: 'auto',
            emptyrecords: "暂无数据",
            sortorder: "asc",
            caption:"大屏列表",
            loadComplete: function (xhr) {
                if(xhr.code==0){
                    layer.msg(xhr.msg);
                    return false;
                }
            },
        });
    });

</script>
{/block}