<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>{$tkd.title|parseTpl}</title>
    <meta name="keywords" content="{$tkd.keywords|parseTpl}">
    <meta name="description" content="{$tkd.description|parseTpl}">
	<link rel="stylesheet" href="{$kx.config.resurl}/template/kxmobileno1/css/global.css"/>
	<script src="{$kx.config.resurl}/template/kxmobileno1/js/flexible.min.js"></script>
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
    <meta name="author" content="www.ptcms.com">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width" />
    <meta name="applicable-device" content="pc">
    <meta http-equiv="mobile-agent" content="format=html5; url={$kx.config.mobileurl}__SELF__">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta http-equiv="Cache-Control" content="no-transform" />
    <link rel="canonical" href="{$kx.config.pcurl}__SELF__" />
	<style>
        .pt-search{
            width:100%;
            padding:0.20rem ;
            border-radius:0.02rem;
        }
        .pt-search-box{
            width:80vw;
            height:0.30rem;
            background-color: #f2f2f7;
            padding-left: 0.13rem;
        }
        .pt-recall{
            font-size: 0.1rem;
        }
        .history {
            background-color: #fff;
            margin: 10px;
            padding: 10px;
        }
        .history h1{
            font-size: 16px;
            color: #666;
            margin-bottom: 10px;
        }
        .history h1 span{
            font-size: 12px;
            float: right;
        }
        .history ul li{
            display: inline-block;
            background-color: #f0f0f0;
            padding: 3px 10px;
            border-radius: 4px;
            margin: 5px;
        }
        .pt-pages{
            bottom: 0;
            height: 50px;
            text-align: center;
            border-top: 1px solid #E9E9E9;
        }
        .pt-pages-select{
            border-color: #F55!important;
            background-color: #F55!important;
            color: #fff!important;
        }
        .pt-pages span {
            width: 24px;
            height: 24px;
            border: 1px solid #fff;
            text-align: center;
            line-height: 24px;
            margin-right: 10px;
        }
        .flex-item{max-width: 2.65rem}
	</style>
</head>
<body>
    <form action="{link=novel.search.result}" class="searchForm">
        <div class="w100 bg-white flex-wrp flex-between flex-align-center pt-search">
            <div class="flex-wrp flex-align-center pt-search-box" style="width: 80vw;">
                <img src="{$kx.config.resurl}/template/kxmobileno1/images/search.png" class="mr10 pt-search-icon" >
                <input type="text" name="searchkey" class="size12 color4" style="width: 100%" placeholder="请输入您要搜索的关键书名" value="{$searchkey}">
            </div>
            <div class="pt-recall">取消</div>
        </div>
    </form>
	<!-- 站长推荐 -->
	<div class="w100 bg-white lh100 pt-recomment">
        {block method="search" name=result searchkey=$searchkey page=$page num=$pagesize}
        {block method="pagination" name="paginate" page=$page limit=$pagesize count=$result.count maxpage=50 section=3}
        {if $result.count > 0 }
        {section loop=$result.items item=$loop}
        <div class="pt-recomment-cont">
            <div class="flex-wrp pt-recomment-item">
                <a href="{link=novel.novel.index novelid=$loop.novel.id pinyin=$loop.novel.pinyin}">
                    <img src="{$loop.novel.cover}" class="mr15" alt="{$loop.novel.name}">
                </a>
                <div class="flex-item pt5">
                    <div class="flex-wrp flex-between">
                        <div class="size14 color7">
                            <a title="{$loop.novel.name}" href="{link=novel.novel.index novelid=$loop.novel.id pinyin=$loop.novel.pinyin}">{$loop.novel.name}</a>
                        </div>
                        <div class="color2 size14">{$loop.data.mark} <span class="size12">人在追</span></div>
                    </div>
                    <div class="size12 compulsory-row mb10 mt10 lh130 color4">{$loop.novel.intro|showIntroLine}</div>
                    <div class="flex-wrp flex-between">
                        <div class="color5 size12">
                            <a title="{$loop.author.name}" href="{link=author.space.index authorid=$loop.author.id pinyin=$loop.author.pinyin name=$loop.author.name}">[ {$loop.author.name} ]</a>
                        </div>
                        <div class="pt-recomment-label">
                            <a title="{$loop.category.name}" href="{link=novel.category.list id=$loop.category.id key=$loop.category.key}">{$loop.category.name}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {/section}
        {if $paginate.total>1}
        <div class="pt-pages">
            <div class="pt30 color5">
                {if $paginate.prev}
                <a href="{link=novel.search.result searchkey=$kx.get.searchkey page=$paginate.prev}"><span><</span></a>
                {else}
                <span class="disable"><</span>
                {/if}
                {loop=paginate.items}
                <a href="{link=novel.search.result searchkey=$kx.get.searchkey page=$loop.num}">
                    <span class="{$loop.status|default='','pt-pages-select'}">{$loop.num}</span>
                </a>
                {/loop}
                {if $paginate.next}
                <a href="{link=novel.search.result searchkey=$kx.get.searchkey page=$paginate.next}"><span>></span></a>
                {else}
                <span class="disable">></span>
                {/if}
            </div>
        </div>
        {/if}
        {else}
        <div class="pt-recomment-cont"  style="text-align: center;padding: 25px 0;">
            <img src="{$kx.config.resurl}/template/kxmobileno1/images/no-data-img.png" style="width: 120px;height: 120px;">
            <h1 class="size18 color5 mt10 mb15">没有输入有效关键词</h1>
            <span class="size16 ">你也可以去 <a href="/" class="color2">全部作品</a> 找书</span>
        </div>
        <div class="history">
            <h1>历史搜索 <span>清空</span></h1>
            <ul></ul>
        </div>
        {/if}
	</div>

    <!-- 底部版权 -->
    {include file="/system/footer"}
	<!-- js -->
    <script src="{$kx.config.resurl}/template/kxmobileno1/js/jquery-3.3.1.js"></script>
	<script>
        var historyStr = window.localStorage.getItem('search_history');
        historyList = typeof historyStr === 'string' ? historyStr.split('|||') : [];
        $.each(historyList, function (k, v) {
            if(v){
                $('.history ul').append('<li><a href="{link=novel.search.result}?searchkey=' + encodeURI(v) + '">' + v + '</a></li>');
            }
        });
        $('.searchForm').submit(function () {
            historyList.push($('.searchForm input[name=searchkey]').val());
            var uniqueArr = [];
            $.each(historyList, function(i, el){
                if($.inArray(el, uniqueArr) === -1) uniqueArr.push(el);
            });
            window.localStorage.setItem('search_history', uniqueArr.join('|||'));
        });
        $('.history h1 span').click(function () {
            $('.history ul li').remove();
            window.localStorage.removeItem('search_history');
        });
	</script>
</body>
</html>