{extend name="layout/layout" /}
{block name="title"}分类{/block}
{block name="css"}
<!-- 这里引入css -->
<link href="{:asset('/css/frontend/common.css')}" rel="stylesheet" type="text/css">
<link href="{:asset('/css/frontend/classify.css')}" rel="stylesheet" type="text/css">
<link href="{:asset('/css/frontend/swiper/swiper.min.css')}" rel="stylesheet" type="text/css">
<link href="{:asset('/css/frontend/ad/swiper.css')}" rel="stylesheet" type="text/css">
<link href="{:asset('/css/frontend/ad/image.css')}" rel="stylesheet" type="text/css">
<style type="text/css">
	.read_popup_box, .custom_popup_box{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		z-index: 999;
		background-color: rgba(0,0,0,.5);
		font-size: 0;
		text-align: center;
		white-space: nowrap;
	}
	.rpb_main,
	.rpb_jgb{
		display: inline-block;
		vertical-align: middle;
	}
	.rpb_jgb{
		overflow: hidden;
		height: 100%;
		margin-left: -1px;
		width: 1px;
	}
	.rpb_main{
		overflow: hidden;
		width: 100%;
	}
	.rpbm_box{
		padding: .3rem .16rem .1rem;
		position: relative;
		left: 0;
		top: 0;
		overflow: hidden;
		background-color: #fff;
		margin: .14rem .48rem;
		border-radius: .16rem;
		white-space: normal;
		-webkit-box-shadow: 0 .03rem .1rem rgba(0, 0, 0, 1);
		box-shadow: 0 .03rem .1rem rgba(0, 0, 0, 1);
	}
	.rpbm_box a{
		display: block;
	}
	.rpb_img{
		overflow: hidden;
		margin: 0 auto .16rem;
		height: 1.39rem;
		width: 1.04rem;
		border-radius: .04rem;
		-webkit-box-shadow: 0 0 .1rem rgba(0, 0, 0, 0.4);
		box-shadow: 0 0 .1rem rgba(0, 0, 0, 0.4);
	}
	.rpb_img a,
	.rpb_img img{
		overflow: hidden;
		display: block;
		width: 100%;
		height: 100%;
		border-radius: .04rem;
	}
	.rpb_tit{
		overflow: hidden;
		margin: 0 0 .16rem;
		height: .26rem;
		font-size: .18rem;
		color: #000;
		line-height: .26rem;
	}
	.rpb_tit a{
		overflow: hidden;
		display: block;
		height: .26rem;
		font-size: .18rem;
		color: #000;
		line-height: .26rem;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.rpb_p{
		margin-bottom: .1rem;
		overflow: hidden;
		max-height: .72rem;
	}
	.rpb_p a{
		overflow: hidden;
		display: block;
		font-size: .14rem;
		color: rgba(0,0,0,.5);
		text-align: left;
		line-height: .24rem;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}
	.rpb_but{
		text-align: center;
		height: .3rem;
	}
	.rpb_but a{
		display: block;
		height: .3rem;
		text-align: center;
		font-size: .16rem;
		color: #007aff;
		line-height: .3rem;
	}

	.rpbm_close_but{
		display: block;
		position: absolute;
		right: .1rem;
		top: .1rem;
		height: .2rem;
		width: .2rem;
		background: url(/assets/img/frontend/icon/cha_icon_2.png) no-repeat center center;
		background-size: .14rem .14rem;
		border-radius: .2rem;
	}

</style>
{/block}
{block name="zepto"}
<!-- 这是zepto插件 -->
{/block}
{block name="menu_title"}分类{/block}
{block name="main"}


<!-- 这是正文 -->

<div class="body_sytle">

	<div class="c_list_box">

		<div class="c_list_tab_box">
			<a href="javascript:;" {neq name="sex" value="2"} class="hover" {/neq} sex="1">男生</a>
			<a href="javascript:;" {eq name="sex" value="2"} class="hover" {/eq} sex="2">女生</a>
		</div>

		<ul class="c_list_ul"></ul>
		<!--广告 分类首页-->
		<div class="ad_position_15"></div>
	</div>

</div>



{/block}
{block name="footer"}
<!-- 这里引入底部footer -->

<!--活动弹框-->
<div {empty name="activityRes"}style="display: none;" {else /}data-type="1"{/empty} class="christmas_popup_box">
<div class="christmas_body">
	<div class="christmas_main">
		<a href="javascript:;" class="christmas_close_2"></a>
		{notempty name="$activityRes"}
		<a href="/s/0?rid={$activityRes.id}&aid={$activityRes.aid}" class="christmas_main_but"><img src="{$activityRes.popimage}" /></a>
		{/notempty}
	</div>
</div>
<div class="christmas_jgb"></div>
</div>

<!--继续阅读弹框-->
{notempty name="$continueData"}
<div class="read_popup_box">
	<div class="rpb_main">
		<div class="rpbm_box">
			<a href="javascript:;" class="rpbm_close_but"></a>
			<div class="rpb_img"><a href="{$continueData.url}"><img src="{$continueData.image}" /></a> </div>
			<div class="rpb_tit"><a href="{$continueData.url}">{$continueData.book_name}</a></div>
			<div class="rpb_p"><a href="{$continueData.url}">{$continueData.description}</a> </div>
			<div class="rpb_but"><a href="{$continueData.url}">继续阅读 ></a> </div>
		</div>
	</div>
	<div class="rpb_jgb"></div>
</div>
{/notempty}

<!--客服消息弹框-->
{notempty name="$customData"}
<div class="custom_popup_box" data-resouce_id="{$customData.custom_id}">
	<div class="rpb_main">
		<div class="rpbm_box">
			<a href="javascript:;" class="rpbm_close_but"></a>
			<div class="rpb_img"><a href="{$customData.url}"><img src="{$customData.image}" /></a> </div>
			<div class="rpb_tit"><a href="{$customData.url}">{$customData.book_name}</a></div>
			<div class="rpb_p"><a href="{$customData.url}">{$customData.description}</a> </div>
			<div class="rpb_but"><a href="{$customData.url}">继续阅读 ></a> </div>
		</div>
	</div>
	<div class="rpb_jgb"></div>
</div>
{/notempty}

{/block}
{block name="js"}
<!-- 这里引入js -->
<script type="text/javascript">
	$(function(){
		var sex  = {$sex};
		loadCategories(sex);
		$(".c_list_tab_box > a").click(function(){
			$(this).addClass("hover");
			$(this).siblings().removeClass("hover");
			var sex = $(this).attr("sex");
			loadCategories(sex);
		});
	})

	function loadCategories(sex){
		var opposite = (sex==1) ? 2 : 1;
		$(".sex_"+opposite).hide();
		if(!$(".sex_"+sex).length){
			makeCategoryHtml(sex);
		}
		$(".sex_"+sex).show();
	}

	function makeCategoryHtml(sex){
		$.get("/api/category/channelcategoriesapi",{'sex':sex},function(data){
			$.each(data,function(key,value){
			    var imgList = [
			        "{:asset('/img/frontend/banner/classify_icon_1.png')}",
			        "{:asset('/img/frontend/banner/classify_icon_2.png')}",
			        "{:asset('/img/frontend/banner/classify_icon_3.png')}",
			        "{:asset('/img/frontend/banner/classify_icon_4.png')}",
			        "{:asset('/img/frontend/banner/classify_icon_5.png')}",
			        "{:asset('/img/frontend/banner/classify_icon_6.png')}",
			        "{:asset('/img/frontend/banner/classify_icon_7.png')}"
                ];
				var simg = imgList[(key % 7)];
				if(value.image){
					simg = value.image;
				}
				var item = '<li class="sex_'+sex+'">';
					item +='<a href="/index/category/books?book_category_id='+value.id+'&sex='+sex+'" category-id="'+value.id+'">';
					item +='<span>' +value.name+ '</span>';
					item +='<img src="'+simg+'" />';
					item +='</a>';
					item +='</li>';
				$("ul.c_list_ul").append(item);
			});
		});
	}
</script>
<script type="text/javascript" src="{:asset('/js/frontend/swiper/swiper.min.js')}"></script>
<!-- 多条广告如下脚本只需引入一次 -->
{if condition="$isAdPick"}
{include file="public/ad_common_js"}
{/if}
<script>
	window.$isAdPick = '{$isAdPick}'
	window.$adLatestVersion = '{$ad_latest_version}'
	$(function(){
		window.$isAdPick == '1' && window.simpleAD.render(window.AD_PAGE_CODE.CATEGORY_MAIN)
	})
</script>
{/block}