ThinkAdmin/application/wechat/view/news.index.html
2017-04-25 15:58:32 +08:00

119 lines
4.6 KiB
PHP

{extend name='extra@admin/content' /}
{block name="button"}
<div class="nowrap pull-right" style="margin-top:10px">
<button data-open="{:url('add')}" class='layui-btn layui-btn-small'>添加图文</button>
</div>
{/block}
{block name='content'}
{foreach $list as $key=>$vo}
<!--<div class="graphic web-design cbp-item" style="border:1px solid #eee;padding:8px 8px 0 8px;">-->
<!--<div class="cbp-caption">-->
<!--{foreach $vo.articles as $key=>$value}-->
<!--{if $key < 1}-->
<!--<div class="cbp-caption-defaultWrap">-->
<!--<img src="{$value.local_url}?imageMogr2/thumbnail/!338x180r/gravity/Center/crop/338x180/interlace/1">-->
<!--<span class="news-title">{$value.title}</span>-->
<!--</div>-->
<!--{else}-->
<!--<div class="cbp-caption-defaultWrap" style="background:#fff">-->
<!--<hr style="margin:10px 0 0 0">-->
<!--<div class="row">-->
<!--<div class="col-xs-8" style="padding-right:0">-->
<!--<span style="display:inline-block;max-height:4em;overflow:hidden;margin:10px 0">-->
<!--{$value.title}-->
<!--</span>-->
<!--</div>-->
<!--<div class="col-xs-4" style="padding-left:0">-->
<!--<img style="margin:10px 0"-->
<!--src="{$value.local_url}?imageMogr2/thumbnail/!338x260r/gravity/Center/crop/338x260/interlace/1"-->
<!--alt="">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--{/if}-->
<!--{/foreach}-->
<!--<div class="cbp-caption-activeWrap">-->
<!--<div class="cbp-l-caption-alignCenter">-->
<!--<div class="cbp-l-caption-body">-->
<!--<a class="btn red uppercase btn red uppercase" data-tips-text="预览" data-tips-placement="bottom"-->
<!--data-phone-view='{:url("wechat/review/index")}?type=news&content={$vo.id}'>-->
<!--<i class="fa fa-eye"></i>-->
<!--</a>-->
<!--<a class="btn red uppercase btn red uppercase" data-tips-text="推送" data-title='图文推送'-->
<!--data-tips-placement="bottom" data-iframe='{"@wechat/news/push/`$vo.id`"|app_url}'><i-->
<!--class="fa fa-weixin"></i></a>-->
<!--<a class="btn red uppercase btn red uppercase" data-tips-text="编辑" data-tips-placement="bottom"-->
<!--href='{"@wechat/news/edit/`$vo.id`"|app_url}'><i class="fa fa-pencil"></i></a>-->
<!--<a class="btn red uppercase btn red uppercase" data-tips-text="删除" data-tips-placement="bottom"-->
<!--data-news-del='{$vo.id}'><i class="fa fa-trash"></i></a>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
{/foreach}
<style>
#news_box {position:relative;}
#news_box .news_item {position:relative;left:0;top:0;padding:5px;border:1px solid #ccc;box-sizing:content-box;margin:10px;width: 300px}
#news_box .news_item .news_articel_item{
background-position:center center;
background-size:100%;position:relative;height:150px;width:100%;overflow:hidden;
}
#news_box .news_item .news_articel_item p {
padding:5px;font-size:12px;color:#fff;
white-space:nowrap;overflow:hidden;text-overflow: ellipsis;
background: rgba(0, 0, 0, 0.7);position:absolute;width: 100%;bottom:0
}
#news_box .news_item .news_articel_item.other{
height:80px;padding:5px 0;
}
#news_box .news_item .hr-line-dashed:last-child{
display:none
}
#news_box .news_item .news_articel_item .left-image{
width:100px;height:75px;position:relative;float:left;
background-position:center center;background-size:100%;overflow:hidden;
}
#news_box .news_item .news_articel_item .right-text{
float:left;width:200px;padding-left: 5px;
}
</style>
<div id="news_box">
{foreach $list as $vo}
<div class="news_item">
{foreach $vo.articles as $k => $v}
{if $k < 1}
<div class='news_articel_item first' style='background-image:url("{$v.local_url}")'>
{if $v.title}<p>{$v.title}</p>{/if}
</div>
<div style='margin:6px 0 1px 0' class="hr-line-dashed"></div>
{else}
<div class='news_articel_item other'>
<div class='left-image' style='background-image:url("{$v.local_url}");'></div>
<div class='right-text'>{$v.title}</div>
</div>
<div style='margin:6px 0 1px 0' class="hr-line-dashed"></div>
{/if}
{/foreach}
</div>
{/foreach}
<div style="clear:both"></div>
</div>
{/block}
{block name='script'}
<script>
require(['jquery.masonry', 'template'], function (Masonry, tpl) {
var container = document.querySelector('#news_box');
var msnry = new Masonry(container, {itemSelector: '.news_item', columnWidth: 0});
msnry.layout();
});
</script>
{/block}