47 lines
1.6 KiB
HTML
47 lines
1.6 KiB
HTML
{extend name="iframe" /}
|
|
{block name="css"}
|
|
<style>
|
|
#select-image-list{}
|
|
#select-image-list .layui-card{position: relative;width: 120px;height: 120px;overflow: hidden;cursor: pointer;}
|
|
#select-image-list img {width: 120px;position: absolute;}
|
|
#select-image-list .layui-card span{display: none;}
|
|
#select-image-list .layui-card.active span{display:block;position: absolute;width: 100%;height: 100%;background: rgba(0,0,0,0.5);text-align: center;padding-top: 30px;box-sizing: border-box;}
|
|
#select-image-list .layui-card.active span i{font-size: 60px;color: #00ffa1;}
|
|
</style>
|
|
{/block}
|
|
{block name="body"}
|
|
<div class="layui-fluid" id="LAY-component-grid-list">
|
|
<div class="layui-row layui-col-space10" id="select-image-list">
|
|
{foreach name="list" item="vo"}
|
|
<div class="layui-col-sm2 layui-col-md2 layui-col-lg2">
|
|
<div class="layui-card">
|
|
<img src="{$vo.url}">
|
|
<span><i class="layui-icon layui-icon-ok"></i></span>
|
|
</div>
|
|
</div>
|
|
{/foreach}
|
|
</div>
|
|
<div class="pages">{$list|raw}</div>
|
|
</div>
|
|
{/block}
|
|
{block name="js"}
|
|
<script>
|
|
var num = {$num};
|
|
if( num == 1 ) {
|
|
$('.layui-card').click(function () {
|
|
$('#select-image-list .layui-card').removeClass('active');
|
|
$(this).addClass('active');
|
|
})
|
|
} else {
|
|
$('.layui-card').click(function () {
|
|
var class_name = $(this).attr('class');
|
|
if( class_name.indexOf('active') ===-1 ) {
|
|
$(this).addClass('active');
|
|
} else {
|
|
$(this).removeClass('active');
|
|
}
|
|
})
|
|
}
|
|
|
|
</script>
|
|
{/block} |