{include file="common/head"/}
<div class="layui-container body-container">
    <div class="layui-row layui-col-space15">
        <div class="fly-main" style="overflow: hidden;">
            <div class="fly-tab-border fly-case-tab layui-hide-xs">
        <span>
            <a href="javascript:;" class="options tab-this" data-options="all">全部</a>
            {volist name="options" id="v"}
                <a href="javascript:;" class="options" data-options="{$v.key}" title="{$v.val}">{$v.val}</a>
            {/volist}
        </span>
            </div>
            <ul class="fly-case-list" >
                {volist name="lists" id="vo"}
                <li class="fly-case-list-li photos" data-id="{$vo.group}" >
                    <div class="fly-case-img" >
                        <img src="{$vo.pic}" alt="{$vo.title}">
                    </div>
                    <h2><a href="javascript:;">{$vo.title}</a></h2>
                    {$vo.content|raw}
                </li>
                {/volist}
            </ul>
        </div>
    </div>
</div>

{include file="common/footer"/}
<script>
    layui.config({
        version: "3.0.0"
        ,base: '__HOME__/mods/' //这里实际使用时，建议改成绝对路径
    }).extend({
        fly: 'index'
    }).use('fly',function(){
        var $ = layui.$;
        layer.photos({
            photos: '.photos'
            ,zIndex: 9999999999
            ,anim: -1
        });
        $('.options').click(function () {
            $(this).addClass('tab-this');
            $(this).siblings().removeClass('tab-this');
            var options = $(this).attr('data-options');
            if(options=='all'){
                $('.fly-case-list-li').fadeIn();
            }else{
                $('.fly-case-list-li').each(function(k,v){
                    if($(this).attr('data-id')!=options){
                        $(this).fadeOut();
                    }else{
                        $(this).fadeIn();
                    }
                });
            }
        })
    });
</script>
</body>
</html>