2018-03-15 20:47:29 +08:00

80 lines
3.7 KiB
HTML

{extend name='admin@public/main'}
{block name='style'}
<style>
body{min-width:500px}
#news_box{position:relative;}
#news_box .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_box .news_item:hover,
#news_box .news_item.active{box-shadow:1px 0 10px #09c;border-color:#09c;}
#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, 0.7);}
#news_box .news_item .news_articel_item.other{height:50px;padding:5px 0;}
#news_box .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_box .news_item .news_articel_item .right-text{float:left;width:180px;padding-right:10px;overflow:hidden;text-overflow:ellipsis;}
#news_box .news_item .hr-line-dashed:last-child{display:none}
#news_box .hr-line-dashed{margin:6px 0 1px 0}
.page-style{bottom:0;width:100%;padding:0 10px;position:fixed;background:#fff;height:50px}
.page-style .pagination,.page-style .pagination-trigger{margin:10px 0!important;padding:0 10px!important;}
</style>
{/block}
{block name="body"}
<div class="news-container" id='news_box'>
{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}
<div style="clear:both"></div>
{if empty($list)}<p class="help-block text-center well">没 有 记 录 哦!</p>{/if}
</div>
<div style="height:50px"></div>
<div class="page-style">{if isset($page)}{$page|raw}{/if}</div>
{/block}
{block name="script"}
<script>
require(['jquery.masonry'], function (Masonry){
var container = document.querySelector('#news_box');
var msnry = new Masonry(container,{itemSelector:'.news_item', columnWidth:0});
msnry.layout();
/* 事件处理 */
$('.news_item').on('mouseenter', '.news-box', function (){
$(this).addClass('active');
}).on('mouseleave', '.news-box', 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 (){
var url = this.getAttribute('data-open');
window.location.href = url;
});
});
</script>
{/block}