<div id="select_box">
    <style>
        /*买家必读弹窗 begin*/
        .buyer-must-read dt,
        .seller_notice dt{
            font-size: 0.5rem;
            color: #343434;
            margin-bottom: 0.4rem;
        }

        .buyer-must-read dd,
        .seller_notice dd{
            font-size: 0.38rem;
            color: #717171;
            margin-bottom: 0.16rem;
        }
        .buyer-must-read .notice dd,
        .seller_notice .notice dd{
            counter-increment: item;
        }

        .buyer-must-read .notice dd::before,
        .seller_notice .notice dd::before{
            content: counter(item);
            display: inline-block;
            width: 0.46rem;
            height: 0.46rem;
            border-radius: 100%;
            font-size: 0.35rem;
            color: #fff;
            text-align: center;
            background-color: #999;
            margin-right: 0.16rem;
        }
        /*end 买家必读弹窗*/
        /*卖家须知弹窗 begin*/
        .seller_notice{

        }
        .seller_notice .xg-checkbox-wrapper{
            margin-bottom: 0.5rem;
        }
        .seller_notice .control{
            margin-bottom: 0.5rem;
            border-radius: 8px;
            padding: 0.2rem 0.14rem;
            background-color: #f3f2f3;
            line-height: 0.68rem;
        }
        .control .code{
            float: left;
            width: 40%;
            font-size: 0.36rem;
            padding: 0.16rem 0.16rem;
            background-color: transparent;
            outline: none;
        }
        .control .xg-btn{
            float: right;
            padding: 0.16rem 0.16rem;
        }
        .seller_notice .info{
            font-size: 0.32rem;
            color:#d94131;
            margin-bottom: 0.5rem;
        }
        .seller_notice .xg-form{
            margin-bottom: 0.5rem;
        }

        /*end 卖家须知弹窗*/
        .is-read{
            margin-top: 0.4rem;
        }
        /*选择游戏 begin*/
        .icon_what{
            width: 1.1rem;
            height: 1.1rem;
            right: 0;
            background:url("__IMG__/trade1/icon_normal_wenhao@3x.png") no-repeat center center;
            background-size: 0.6rem 0.6rem;
        }
        .choose_gameli{padding: 0.24rem 0;}
        .choose_gameli .add_play{
            height: 1.06rem;
            line-height: 1.06rem;
        }
        .choose_gameli .play-right{height:1.06rem;line-height:1.06rem;}
        .choose_img{height:1.06rem;width:1.06rem;}
        .icon.icon-notice.icon_warm {
            background: url(__IMG__/trade1/icon_normal_tishi@3x.png) no-repeat left center;
            background-size: 0.6rem;
        }
        .warm_prompt .notice{color:#979797;}
        .xg-mask.warm_prompt > .mask-container{margin:6rem auto;}
        .first_dd{margin-bottom: 0.3rem;color:#666;}
        .dd_num{display: inline-block;
            height: 0.4rem;
            width: 0.4rem;
            line-height: 0.4rem;
            background-color: #666668;
            color: #fff;
            border-radius: 50%;
            text-align: center;
            margin-right: 0.2rem;}
        .mask-container > .mask-footer.warm_footer{
            border-top: 2px solid #ededed;
            padding: 0;
            height: 1.15rem;
            background-color: #fff;
        }
        .i_know{
            width: 100%;
            height: 100%;
            background-color: #fff;
            color: #676767;
        }
				
        /*end! 选择游戏 */
    </style>
		<div style="max-width:640px;width:100%;margin:0 auto;">
<header class="header">
    <a class="xg-back" id="jsselectgame" href="javascript:;"></a>
    <h1 class="xg-title">选择游戏</h1>
    <a class="btn_detail icon_what js_tips" href="javascript:;">
    </a>
</header>
<div style="line-height:1.1rem;">&nbsp;</div>
<main class="xg-main2" style="background-color: transparent;max-width:640px;margin:0 auto;">
    <div class="xg-container2" style="background-color:#f2f2f2;">
			<empty name="gamelists">
        <!-- 暂无游戏 begin!-->
        <div class="no_data">
            <div class="nodata_content">
                <img class="nogame_img" src="__IMG__/trade1/icon_normal_game@3x.png" alt="" height="" width="">
                <p class="nodata_txt">暂无游戏，逛逛其他地方吧~</p>
            </div>
        </div>
        <!--end! 暂无游戏 -->
			<else />
        <!--选择游戏 begin-->
        <div class="xg-addyx">
            <ul class="add_item" id="ajaxContainer2" currentpage="{$gamepage}" maxpage="{$gametotalpage}">
							<volist name="gamelists" id="vo">
                <li class="add_li choose_gameli jsselect_small" data-url="{$vo.url}">
                    <a class="add_lia" href="javascript:;">
                        <span><img class="choose_img" src="<notempty name='vo.icon'>{$vo.icon}<else />__IMG__/trade1/pic_shangpin@3x.png</notempty>" alt=""></span>
                        <span class="add_play">{$vo.game_name}</span>
                        <span class="play-right"><i class="icon-go"></i></span>
                    </a>
                </li>
							</volist>
            </ul>
        </div>
        <!--end 选择游戏-->
				<div class="loading ms-none hidden" id="moreBtn"><a href="javascript:" class="link"></a></div>
			</empty>
    </div>
</main>
<!--温馨提示 begin-->
<div class="xg-mask warm_prompt" style="display: none;">
    <div class="mask-container">
        <h2 class="mask-header">
            <span class="header-text icon icon-notice icon_warm">温馨提示</span>

        </h2>
        <div class="mask-body">
            <dl class="notice ">
                <dd class="first_dd">以下情况暂时无法提供角色出售服务：</dd>
                <dd><span class="dd_num">1</span>单机游戏和H5游戏暂不支持交易;</dd>
                <dd><span class="dd_num">2</span>已下线的游戏，角色无法出售;</dd>
                <dd><span class="dd_num">3</span>部分低版本老游戏无法交易(无小号等...)</dd>
            </dl>
        </div>
        <div class="mask-footer warm_footer">
                    <button  class="i_know js_iknow" type="button" class="">我知道了</button>
        </div>
    </div>
</div>
<!--end 温馨提示-->
<div class="popmsg2 pop-dialog"></div>
<div class="popwin2 pop-window" style="background:#FFF;"><div class="pop-page"><div class="pop-wrap"></div></div></div>

<script>
	var popmsg2 = $('.popmsg2').pop();
	var popwin2 = $('.popwin2').pop();
	$(function() {
    //---------------@author   zwm--------------------//
    //---------------date  2018-07-30-----------------//
    //点击右上角的问号，弹出弹出层弹出框
    $(".js_tips").click(function () {
        $(".warm_prompt").show();
    })
    //点击我知道了按钮关闭弹出层
    $(".js_iknow").click(function () {
        $(".warm_prompt").hide();
    });
		$('#jsselectgame').click(function() {
			var p = $('.popwin').fadeOut(200);
			setTimeout(function(){p.find('#select_box').remove();},210);
			return false;
		});
		
		
    $("#select_box .no_data").css({'height':($(window).height()-$("#select_box .header").height())});
		
		var ac = $('#ajaxContainer2');
			var popmsg = $('.loading').pop();
		if(parseInt(ac.attr('currentpage'))<parseInt(ac.attr('maxpage'))) {
			ajaxload('{:U("ajax_select_game")}',{},function(data) {
				if(parseInt(data.status) == 1) {
					ac.attr('currentpage',data.current);
					var html = '',d = data.lists;
					for (var i in d) {
						var item = d[i];
						html += '<li class="add_li choose_gameli jsselect_small" data-url="'+item.url+'">';
						html += '		<a class="add_lia" href="javascript:;">';
						html += '				<span><img class="choose_img" src="'+(item.icon?item.icon:'__IMG__/trade1/pic_shangpin@3x.png')+'" alt=""></span>';
						html += '				<span class="add_play">'+item.game_name+'</span>';
						html += '				<span class="play-right"><i class="icon-go"></i></span>';
						html += '		</a>';
						html += '</li>';
						
					}
					
					ac.append(html);
					
					$('.jsselect_small').on('click',function() {
						var that = $(this);var url = that.attr('data-url');
						$.ajax({
							type:'post',
							dataType:'json',
							url:url,
							data:{},
							success:function(data){
								popwin2.open(800,data.html);
							},
							error:function(){popmsg2.msg('服务器故障，请稍后再试');},
						});
						return false;
					});
					
					$('.loading').addClass('ms-none');
					$('#moreBtn').removeClass('ms-none');loads=false;
				} else {
					$('.loading').addClass('ms-none');
					popmsg.msg('已经到底了~');
				}
			});
		}
		
		$('.jsselect_small').on('click',function() {
			var that = $(this);var url = that.attr('data-url');
			$.ajax({
				type:'post',
				dataType:'json',
				url:url,
				data:{},
				success:function(data){
					popwin2.open(800,data.html);
				},
				error:function(){popmsg2.msg('服务器故障，请稍后再试');},
			});
			return false;
		});
		
  });

	
</script>
</div>
</div>