ThinkAdmin/application/wechat/view/news/index.html

{extend name='admin@main'}

{block name="button"}
<button data-open="{:url('add')}" class='layui-btn layui-btn-sm layui-btn-primary'>添加图文</button>
{/block}

{block name='content'}
<div class="think-box-shadow">
    <div id="news-box" class="layui-clear">
        {foreach $list as $vo}
        <div class="news-item">
            <div class='news-tools layui-hide'>
                <a data-phone-view="{:url('@wechat/api.review/news/'.$vo.id)}" href='javascript:void(0)'>预览</a>
                <a data-open='{:url("edit")}?id={$vo.id}' href='javascript:void(0)'>编辑</a>
                <a data-news-del="{$vo.id}" href='javascript:void(0)'>删除</a>
            </div>
            {foreach $vo.articles as $k => $v}
            {if $k < 1}
            <div data-tips-image='{$v.local_url}' class='news-articel-item' style='background-image:url("{$v.local_url}")'>
                {if $v.title}<p>{$v.title}</p>{/if}
            </div>
            <div class="hr-line-dashed"></div>
            {else}
            <div class='news-articel-item other'>
                <span>{$v.title}</span>
                <div data-tips-image='{$v.local_url}' style='background-image:url("{$v.local_url}");'></div>
            </div>
            <div class="hr-line-dashed"></div>
            {/if}
            {/foreach}
        </div>
        {/foreach}
    </div>
    {empty name='list'}<span class="notdata">没有记录哦</span>{else}{$pagehtml|raw|default=''}{/empty}
</div>
{/block}

{block name='script'}
<script>

    $('body').on('mouseenter', '.news-item', function () {
        $(this).find('.news-tools').removeClass('layui-hide');
    }).on('mouseleave', '.news-item', function () {
        $(this).find('.news-tools').addClass('layui-hide');
    });

    require(['jquery.masonry'], function (Masonry) {
        var item = document.querySelector('#news-box');
        var msnry = new Masonry(item, {itemSelector: '.news-item', columnWidth: 0});
        msnry.layout();
        $('body').on('click', '[data-news-del]', function () {
            var that = this;
            var dialogIndex = $.msg.confirm('确定要删除图文吗？', function () {
                $.form.load('{:url("del")}', {value: 0, field: 'delete', id: that.getAttribute('data-news-del')}, 'post', function (ret) {
                    if (ret.code) {
                        $(that).parents('.news-item').remove();
                        return $.msg.success(ret.msg), msnry.layout(), false;
                    }
                    return $.msg.error(ret.msg), false;
                });
                $.msg.close(dialogIndex);
            });
        });
    });

</script>
{/block}

{block name="style"}
<style>
    #news-box{position:relative}
    #news-box .news-item{top:0;left:0;padding:5px;margin:10px;width:300px;position:relative;border:1px solid #ccc;box-sizing:content-box}
    #news-box .news-item .news-articel-item{width:100%;height:150px;overflow:hidden;position:relative;background-size:100%;background-position:center center}
    #news-box .news-item .news-articel-item p{bottom:0;width:100%;color:#fff;padding:5px;max-height:5em;font-size:12px;overflow:hidden;position:absolute;text-overflow:ellipsis;background:rgba(0,0,0,.7)}
    #news-box .news-item .news-articel-item.other{height:50px;padding:5px 0}
    #news-box .news-item .news-articel-item span{width:245px;overflow:hidden;line-height:50px;white-space:nowrap;display:inline-block;text-overflow:ellipsis}
    #news-box .news-item .news-articel-item div{width:50px;height:50px;float:right;overflow:hidden;position:relative;background-size:100%;background-position:center center}
    #news-box .hr-line-dashed{margin:6px 0 1px 0}
    #news-box .news-item .hr-line-dashed:last-child{display:none}
    #news-box .news-tools{top:0;z-index:80;color:#fff;width:302px;padding:0 5px;margin-left:-6px;line-height:38px;text-align:right;position:absolute;background:rgba(0,0,0,.7)}
    #news-box .news-tools a{color:#fff;margin-left:10px}
</style>
{/block}