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:hover,
    .news-container .news-item.active {
        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, 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="help-block text-center well">没 有 记 录 哦！</p>{/if}
</div>
<div style="height:50px"></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}