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

{extend name='admin@index/index'}

{block name='style'}
<style>
    body{min-width:500px}
    .news-container{position:relative}
    .news-container .news-item{top:0;left:0;width:232px;margin:10px;padding:5px;cursor:pointer;position:relative;border:1px solid #ccc;box-sizing:content-box}
    .news-container .news-item.active,.news-container .news-item:hover{border-color:#09c;box-shadow:1px 0 10px #09c}
    .news-container .news-item .news-articel-item{width:100%;height:150px;overflow:hidden;position:relative;background-size:100%;background-position:center center}
    .news-container .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-container .news-item .news-articel-item.other{height:50px;padding:5px 0}
    .news-container .news-item .news-articel-item .left-image{width:50px;height:50px;float:left;overflow:hidden;position:relative;background-size:100%;background-position:center center}
    .news-container .news-item .news-articel-item .right-text{float:left;width:172px;overflow:hidden;padding-right:10px;text-overflow:ellipsis}
    .news-container .news-item .hr-line-dashed:last-child{display:none}
    .news-container .hr-line-dashed{margin:6px 0 1px 0}
    .page-style{bottom:0;width:100%;height:50px;padding:0 10px;position:fixed;background:#fff}
    .page-style .pagination,.page-style .pagination-trigger{margin:10px 0!important;padding:0 10px!important}
</style>
{/block}

{block name="body"}
<div class="layui-clear news-container layui-hide">
    {foreach $list as $vo}
    <div class="news-item" data-news-id="{$vo.id}">
        {foreach $vo.articles as $k => $v}
        {if $k < 1}
        <div 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'>
            <div class='right-text'>{$v.title}</div>
            <div class='left-image' style='background-image:url("{$v.local_url}");'></div>
        </div>
        <div class="hr-line-dashed"></div>
        {/if}
        {/foreach}
    </div>
    {/foreach}
    {if empty($list)}<p class="notdata">没有记录哦！</p>{/if}
</div>
<div class="margin-bottom-20 margin-top-20"></div>
<div class="page-style">{if isset($pagehtml)}{$pagehtml|raw}{/if}</div>
{/block}

{block name="script"}
<script>
    require(['jquery.masonry'], function (Masonry) {
        $('.news-container.layui-hide').removeClass('layui-hide');
        var msnry = new Masonry($('.news-container').get(0), {itemSelector: '.news-item', columnWidth: 0});
        msnry.layout();
        // 事件处理
        $('.news-item').on('mouseenter', '.news-container', function () {
            $(this).addClass('active');
        }).on('mouseleave', '.news-container', function () {
            $(this).removeClass('active');
        });
        // 外部选择器
        var seletor = '[name="{$Think.get.field|decode|default=0}"]';
        if (seletor) {
            $('[data-news-id]').on('click', function () {
                window.top.$(seletor).val($(this).attr('data-news-id')).trigger('change');
                parent.layer.close(parent.layer.getFrameIndex(window.name))
            });
        }
        // 分页事件处理
        $('body').off('change', '.pagination-trigger select').on('change', '.pagination-trigger select', function () {
            var urls = this.options[this.selectedIndex].getAttribute('data-url').split('#');
            urls.shift();
            window.location.href = urls.join('#');
        }).off('click', '[data-open]').on('click', '[data-open]', function () {
            window.location.href = this.getAttribute('data-open');
        });
    });
</script>
{/block}