{extend name="layout/base" /}

{block name="header"}
<link rel="stylesheet" href="__STATIC__/css/game-list.css">
<link rel="stylesheet" href="__STATIC__/lib/layui/css/layui.css">
{/block}

{block name="content"}

<!-- 页面导航 -->
<div class="curLoc">
    <div class="container">
        <span class="txt">当前位置：</span><a href="/" title="祈盟文化游戏">首页</a> &gt; <span>找游戏</span>
    </div>
</div>
<!-- 推荐广告位 -->
<div class="rec">
    <div class="layui-carousel" id="test2">
        <div carousel-item>
            {volist name="topBannerList" id="bvo"}
            <div class="swiper-slide">
                <a href="{$bvo.url}" title="{$bvo.title}" target="_blank"><img src="{$Think.STATIC_DOMAIN}{$bvo.image}"
                        width="1200px" height="486"></a>
                <div class="txt"> <a href="{$bvo.url}" title="{$bvo.title}" target="_blank">
                        <p>{$bvo.title}</p>
                    </a></div>
            </div>
            {/volist}
        </div>
    </div>
</div>
<!-- 游戏类别 -->
<div>
    <div class="allgames container">
        <ul class="shgame">
            <li>
                <div class="tit"><span>游戏类型<input id="J_gametype" hidden="hidden" value="{:input('type')}"></span></div>
                <div class="gametype">
                    <div {if(input('type')=='0' || input('type')=='' )} class="selon" {/if}> <a
                        href="javascript:void(0);" onclick="searchGame('J_gametype','');">全部</a></div>
                    {volist name="gameTypeList" id="gtvo"}
                    <div {if(input('type')==$gtvo.id)}class="selon" {/if}> <a href="javascript:void(0);"
                        onclick="searchGame('J_gametype',{$gtvo.id});">{$gtvo.name}</a></div>
                    {/volist}
                </div>
            </li>
            <li>
                <div class="tit"><span>游戏题材<input id="J_gamesubject" hidden="hidden" value="{:input('subject')}"></span>
                </div>
                <div class="gametype">
                    <div {if(input('subject')=='0' || input('subject')=='' )}class="selon" {/if}> <a
                        href="javascript:void(0);" onclick="searchGame('J_gamesubject','');">全部</a></div>
                    {volist name="gameSubjectList" id="gsvo"}
                    <div {if(input('subject')==$gsvo.id)}class="selon" {/if}> <a href="javascript:void(0);"
                        onclick="searchGame('J_gamesubject',{$gsvo.id});">{$gsvo.name}</a></div>
                    {/volist}
                </div>
            </li>
        </ul>

        <!-- 游戏列表 -->
        <ul class="list">
            {volist name="list" id="vo"}
            <li>
                <div><a href="{$vo.url}" title="{$vo.nickname}" target="_blank"><img lazy-src="{$vo.icon}"
                            src="__STATIC__/images/icon/150-150.png" class="smallIcon"></a></div>
                <div class="game_name"><a href="{$vo.url}" title="{$vo.nickname}" target="_blank">{$vo.nickname}</a>
                </div>
                <p>{$vo.size}</p>
                <p>{if(isset($gameSubject[$vo.subject]))}{$gameSubject[$vo.subject]}{else}未知{/if}<span>|</span>{if(isset($gameType[$vo.type]))}{$gameType[$vo.type]}{else}未知{/if}
                </p>
                <div class="code_url">
                    {if($vo['download'])}
                    <button class="download">立即下载</button>
                    <span id="code_url" style="display: none;">{$vo.download}</span>
                    <span id="code_title" style="display: none;">{$vo.nickname}</span>
                    <span id="download-page"
                        style="display: none;">http://wl.weilongwl.com/download/{$vo.id}.html</span>
                    {else}
                    <button class="no_download">立即下载</button>
                    {/if}
                </div>
            </li>
            {/volist}
        </ul>

        <div class="no_content">
            <img src="__STATIC__/images/icon/no-game.png">
            <p>暂无相关游戏~</p>
        </div>

        <div class="page ">
            {$page}
            <div class="rows">共 <b class="strip">{$list->total()}</b>条 / <b>{$list->toArray()['last_page']}</b>页 记录
            </div>
        </div>
    </div>


    <!-- 下载弹窗 start -->
    <div class="warp_download_popup">
        <div class="download_popup">
            <div class="download_title"><span>下载</span></div>
            <div class="game_title">
                <p>传奇帝国之荣耀骑士传奇，传奇帝国之荣耀骑士传奇传奇帝国之荣耀骑士传奇...</p>
            </div>
            <div class="az_download">
                <div class="az_hover">
                    <a href="">
                        <img src="__STATIC__/images/home/SVG-07.png">
                        <span>安卓版本下载</span>
                    </a>
                </div>
                <div class="az_code"><img src="__STATIC__/images/home/SVG-10.png"></div>
            </div>
            <div class="big_az_code">

                <div id="qrcode"></div>
                <div class="scan_code">
                    <img src="__STATIC__/images/icon/scan.png">
                    <span>扫码立即下载</span>
                </div>
                <div class="border-left-empty">
                    <span></span>
                </div>
            </div>
            <div class="close">
            </div>
        </div>
    </div>
    <div class="warp_no_download_popup">
        <div class="no_download_popup">
            <div class="tip"><span>提示</span>
                <div class="close">
                </div>
            </div>
            <div class="tip_txt">
                <p>该游戏暂无下载链接，稍后再试</p>
                <div class="tip_btn">
                    <div class="determine"><span>确定</span></div>
                    <div class="cancel"><span>取消</span></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 下载弹窗 end -->



    {/block}

    {block name="detail_js"}
    <script src="__STATIC__/js/common.js"></script>
    <script src="__STATIC__/js/qrcode.min.js"></script>
    <script src="__STATIC__/js/game/index.js"></script>
    <script src="__STATIC__/lib/layui/layui.js"></script>
    <script>
        // 轮番图
        layui.use('carousel', function () {
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test2',
                width: '100%',
                height: '486px',
                arrow: 'hover',
                interval: "5000",
                trigger: 'hover'
            });

        });
    </script>
    {/block}