{extend name="layout/layout" /}
{block name="title"}作者码字{/block}
{block name="css"}
<!-- 这里引入css -->
<link href="{:client_asset('/css/frontend/common.css')}" rel="stylesheet" type="text/css">
<link href="{:client_asset('/css/frontend/classify.css')}" rel="stylesheet" type="text/css">
<link href="{:client_asset('/css/frontend/recently.css')}" rel="stylesheet" type="text/css">

<style type="text/css">

	.body_sytle,
	.over_tiao{
		overflow: hidden;
		height: 100%;
		background-color: #fff;
		box-sizing: border-box;
		font-size: 0;
		text-align: center;
		white-space: nowrap;
	}
	.nie_box,
	.nie_jgb{
		display: inline-block;
		vertical-align: middle;
	}
	.nie_box{
		padding:.5rem 0;
	}
	.nie_jgb{		
		margin-left: -1px;
		height: 100%;
		width: 1px;
	}
	.f_main_box{
		width: 100%;
	}
	.nie_main,
	.nie_but_box{
		overflow: hidden;
	}
	.nie_img{
		margin: 0 auto .16rem;
	}
	.nie_img img{
		display: block;
		margin: 0 auto;
	}
	.nie_p_box{
		overflow: hidden;
		margin: 0 auto .3rem;
	}
	.nie_p_box p,
	.nie_p_box span{
		display: block;
		font-size: .15rem;
		color: #513d3d;
		text-align: center;
		line-height: .27rem;
	}
	.nie_but_box a{
		overflow: hidden;
		display: block;
		margin: 0 auto;
		width: 2.1rem;
		height: .4rem;
		background-color: #FFB473;
		text-align: center;
		font-size: .17rem;
		color: #fff;
		line-height: .4rem;
		border-radius: .4rem;
	}
	.nie_p_box span{
		padding-left: .46rem;
		text-align: left;
		color: #aeb4ca;
		font-size: .12rem;
	}
	
	.over_radius_box{
		margin: 0 auto;
		padding: .09rem;
		width: 1rem;
		height: 1rem;
		background-color: rgba(119,164,255,.3);
		box-sizing: border-box;
		border-radius: 1rem;
		-moz-animation: heartbeat 1s infinite;
		-webkit-animation: heartbeat 1s infinite;
		-o-animation: heartbeat 1s infinite;
		animation: heartbeat 1s infinite;
	}
	.over_radius_s{
		text-align: center;
		height: .82rem;
		width: .82rem;
		background-color: #77a4ff;
		border-radius: .82rem;
		line-height: .82rem;
		text-align: center;
	}
	.over_radius_s span{
		font-size: .24rem;
		color: #fff;
	}
	.over_radius_s strong{
		margin-left: .02rem;
		font-size: .13rem;
		color: #fff;
	}
	.over_radius_p{
		text-align: center;
		font-size: .15rem;
		color: #77a4ff;
		line-height: .48rem;
	}
	
	.over_book_list_box{
		overflow: hidden;
	}
	
	.o_book_tit{
		margin: 0 auto;
		padding: 0 .53rem;
		width: 3.14rem;
		height: .34rem;
		background:url({:client_asset('/img/frontend/icon/o_bg_icon.png')}) no-repeat center center / auto .03rem;
		line-height: .34rem;
		text-align: center;
		box-sizing: border-box;
	}
	
	.o_book_tit h2{
		display:inline-block;
		padding: 0 0 0 .2rem;
		height: .34rem;
		background: url({:client_asset('/img/frontend/icon/praise.png')}) no-repeat 0 .1rem/.15rem .15rem;
		font-size: .15rem;
		color: #5e6a94;
		line-height: .34rem;
	}
	
	.o_book_tit .love{
		background-image: url({:client_asset('/img/frontend/icon/love.png')});
	}
	
	.o_book_main{
		margin: .1rem .3rem;
	}
	.o_book_img{
		margin: 0 auto;
	}
	.o_book_img,
	.o_book_img a{
		overflow: hidden;
		display: block;
		width: 1.28rem;
	}
	.o_book_img img{
		display: block;
		width: 100%;
	}
	.o_book_main h3{
		margin-top: .1rem;
		line-height: .2rem;
		text-align: center;
	}
	.o_book_main h3 a{
		font-size: .15rem;
		color: #494a4c;		
	}
	@-moz-keyframes heartbeat{
		0%{transform: scale(0.8,0.8); opacity: 1;}
		25%{transform: scale(1,1); opacity: 0.8;}
		100%{transform: scale(0.8,0.8); opacity: 1;}
	}
	@-webkit-keyframes heartbeat{
		0%{transform: scale(0.8,0.8); opacity: 1;}
		25%{transform: scale(1,1); opacity: 0.8;}
		100%{transform: scale(0.8,0.8); opacity: 1;}
	}
	@-o-keyframes heartbeat{
		0%{transform: scale(0.8,0.8); opacity: 1;}
		25%{transform: scale(1,1); opacity: 0.8;}
		100%{transform: scale(0.8,0.8); opacity: 1;}
	}
	@keyframes heartbeat{
		0%{transform: scale(0.8,0.8); opacity: 1;}
		25%{transform: scale(1,1); opacity: 0.8;}
		100%{transform: scale(0.8,0.8); opacity: 1;}
	}
	
</style>
{/block}
{block name="zepto"}
<!-- 这是zepto插件 -->
{/block}
{block name="menu_title"}作者码字{/block}
{block name="main"}
<!--推荐书籍ID-->
{notempty name="$book.recommand_book_id"}
<div class="body_sytle">
	<div class="nie_box">

		<div class="nie_main">
			<div class="over_radius_box">
				<div class="over_radius_s">
					<span id="second_num" data-book_id='{$book.recommand_book_id}'>3</span>
<!--					<strong>秒</strong>-->
				</div>
			</div>
			<div class="over_radius_p">精彩内容马上呈现……</div>
		</div>
		<!--作者码字-->

	</div>

	<div class="nie_jgb"></div>
</div>


<div class="over_book_list_box">
	<div class="o_book_tit">
		<h2>好书连连看，精彩不中断</h2>
	</div>
	<div class="o_book_main">
		
		<div class="o_book_img">
			<a href="/clientweb/book/chapter?book_id={$book.recommand_book_id}"><img src="{$book.recommand_book_image}" /></a>
		</div>
		<h3><a href="/clientweb/book/chapter?book_id={$book.recommand_book_id}">{$book.recommand_book_name}</a></h3>
		
		
	</div>
</div>


<script type="text/javascript">
	window.onload=function(){
		var CDDOM={			
			countdowntime:null,
			ncountdownnum:3,
			ocountdown : document.getElementById('second_num'),
			nsecond:1000
		}
		function countdown(){
			clearTimeout(CDDOM.countdowntime);

			if(CDDOM.ncountdownnum<=2){
				CDDOM.ocountdown.innerHTML=1;
				window.location.href = '/index/book/chapter?book_id=' + CDDOM.ocountdown.dataset.book_id;
			}else{
				CDDOM.ncountdownnum --;
				CDDOM.ocountdown.innerHTML = CDDOM.ncountdownnum;
			}
			CDDOM.countdowntime = setTimeout(countdown,CDDOM.nsecond);
		}
		CDDOM.countdowntime = setTimeout(countdown,CDDOM.nsecond);
	}
</script>
{else /}
<!--无推荐书籍ID 显示列表-->









<div class="body_sytle">
	
	<div class="nie_box">

		<div class="nie_main">
			<div class="nie_img"><img src="{:client_asset('/img/frontend/icon/notice_5.png')}" style="width: 1.05rem" /></div>
			<div class="nie_p_box">
				<p>本书未完结，作者努力码字中</p>
				<p>后续剧情更精彩，敬请期待后续更新吧！</p>
			</div>
			<div class="nie_but_box">
				<a href="/">去首页看看</a>
			</div>
		</div>
		<!--作者码字-->

	</div>

	<div class="nie_jgb"></div>
</div>
<!--body_sytle-->
<div class="r_img_list_other" >
	<div class="r_img_list_other_tit">
		<h2>为你推荐</h2>
	</div>
	<ul class="r_img_ul">
		{volist name="$ranklist['idx']" id="data" offset="0" length='10'}
		<li>
			<a href="/clientweb/book/info?book_id={$data.id}">
				<div class="r_img">
					<img src="{$data.image}" />
					<span></span>
				</div>
				<div class="r_img_text">
					<h3>{$data.name}</h3>
					<p>{$data.description}</p>
					<div class="r_img_other">
						<i>{$data.author}</i>
					</div>
				</div>
			</a>
		</li>
		{/volist}
	</ul>
</div>
{/notempty}

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