<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title th:text="${application.seoConfig.page['index.title']}"></title>

    <meta name="keywords" th:content="${application.seoConfig.page['index.keyword']}">

    <meta name="description"
          th:content="${application.seoConfig.page['index.description']}">

    <meta property="og:type" content="novel_index"/>
    <meta property="og:title" th:content="${application.seoConfig.page['index.title']}"/>
    <meta property="og:description"
          th:content="${application.seoConfig.page['index.description']}"/>

    <div th:include="common/css :: css"></div>

    <style>

        .line-limit-length {

            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;

        }

        .layui-nav .layui-nav-item {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            line-height: 50px;
        }

        body ul.layui-nav li.layui-nav-item a {
            display: block;
            transition: all .3s;
            -webkit-transition: all .3s;
        }

    </style>

    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?2cf01edbc2b27cd3a143e17948167d77";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

</head>
<body>


<!-- 你的HTML代码 -->
<a name="top"></a>
<ul class="layui-nav" lay-filter="" style="padding:0 36px;text-align: center">
    <li class="layui-nav-item"><a href="/book/search?catId=1">玄幻小说</a></li>
    <li class="layui-nav-item"><a href="/book/search?catId=2">修真小说</a></li>
    <li class="layui-nav-item"><a href="/book/search?catId=3">都市小说</a></li>
    <li class="layui-nav-item"><a href="/book/search?catId=4">历史小说</a></li>
    <li class="layui-nav-item"><a href="/book/search?catId=6">网游小说</a></li>
    <li class="layui-nav-item"><a href="/book/search?catId=5">科幻小说</a></li>
    <li class="layui-nav-item"><a href="/book/search?catId=7">女频小说</a></li>
    <li class="layui-nav-item"><a>完本小说</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd><a href="/book/search?bookStatus=完成">全部小说</a></dd>
            <dd><a href="/book/search?bookStatus=完成&catId=1">玄幻小说</a></dd>
            <dd><a href="/book/search?bookStatus=完成&catId=2">修真小说</a></dd>
            <dd><a href="/book/search?bookStatus=完成&catId=3">都市小说</a></dd>
            <dd><a href="/book/search?bookStatus=完成&catId=4">历史小说</a></dd>
            <dd><a href="/book/search?bookStatus=完成&catId=6">网游小说</a></dd>
            <dd><a href="/book/search?bookStatus=完成&catId=5">科幻小说</a></dd>
            <dd><a href="/book/search?bookStatus=完成&catId=7">女频小说</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a>小说排行</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd><a href="/book/search?sortBy=score">全部小说</a></dd>
            <dd><a href="/book/search?sortBy=score&catId=1">玄幻小说</a></dd>
            <dd><a href="/book/search?sortBy=score&catId=2">修真小说</a></dd>
            <dd><a href="/book/search?sortBy=score&catId=3">都市小说</a></dd>
            <dd><a href="/book/search?sortBy=score&catId=4">历史小说</a></dd>
            <dd><a href="/book/search?sortBy=score&catId=6">网游小说</a></dd>
            <dd><a href="/book/search?sortBy=score&catId=5">科幻小说</a></dd>
            <dd><a href="/book/search?sortBy=score&catId=7">女频小说</a></dd>
        </dl>
    </li>

</ul>

<div class="layui-container">
    <div class="layui-row">

        <div class="layui-col-xs10 layui-col-sm10 layui-col-md11 layui-col-lg11" style="padding-top:1%">
            <input id="title" type="text" name="title" required lay-verify="required" placeholder="请输入书名·作者"
                   autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-col-xs1" style="padding: 1%">
            <button onclick="searchBooks()" class="layui-btn" lay-submit lay-filter="formDemo">搜索</button>
        </div>
    </div>

</div>
<div style="height: 1px" class="layui-col-lg1"></div><div class="layui-collapse layui-col-lg10">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">本站推荐</h2>
        <div class="layui-colla-content layui-show">


            <div class="layui-container" style="padding: 0px">

                <div class="layui-row" style="text-align: center">
                    <span th:each="recBook : ${recBooks}">
                    <a th:href="'/book/' + ${recBook.id} + '.html'">
                        <div style="padding: 1%" class="layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4">
                            <img style=" width:80%; height:auto; max-width:100%; max-height:100%;"
                                  class="lazyload" th:attr="data-src=${recBook.picUrl}" />
                            <br/>
                            <span th:text="${recBook.bookName}"></span>

                        </div>
                    </a>
                        </span>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">热门小说推荐</h2>
        <div class="layui-colla-content layui-show">

            <div class="layui-container">
                <div class="layui-row">
                    <div style="margin-bottom: 5px" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg4"
                         th:each="hotBook : ${hotBooks}">
                        <a th:href="'/book/' + ${hotBook.id} + '.html'">
                            <div class="layui-col-xs5 layui-col-sm4 layui-col-md4 layui-col-lg4">
                                <img style=" width:100px; height:125px;"
                                     class="lazyload" th:attr="data-src=${hotBook.picUrl}"/>
                            </div>
                            <div class="layui-col-xs5 layui-col-sm6 layui-col-md6 layui-col-lg6">
                                <ul>
                                    <li class="line-limit-length" style="font-weight: bold"
                                        th:text="${hotBook.bookName}"></li>
                                    <li th:text="'作者：'+ ${hotBook.author}"></li>
                                    <li style="width: 180px;height:40px;overflow: hidden"
                                        th:text="'简介：'+ ${hotBook.bookDesc}"></li>
                                </ul>
                            </div>
                            <div style="font-style: italic;color: red"
                                 class="layui-col-xs2 layui-col-sm2 layui-col-md2 layui-col-lg2"
                                 th:text="${hotBook.score} + '分'"></div>
                        </a>
                    </div>

                    <!--<div th:each="hotBook : ${hotBooks}" style="margin-top: 1%"
                     class="layui-col-xs12 layui-col-sm6 layui-col-md6 layui-col-lg6">
                    <a th:href="'/book/'+${hotBook.id}+'.html'">
                        <div class="layui-col-xs5 layui-col-sm3 layui-col-md3 layui-col-lg3">
                            <img style=" width:100px; height:125px;"
                                 th:src="${hotBook.picUrl}"/>
                        </div>

                        <div class="layui-col-xs7 layui-col-sm6 layui-col-md7 layui-col-lg7"
                             style="float: left;padding-right: 10px">
                            <div><b th:text="${hotBook.bookName}"></b></div>
                            <div class="layui-col-xs8 layui-col-sm9 layui-col-md10 layui-col-lg10"
                                 th:text="'作者：'+ ${hotBook.author}"></div>
                            <div class="layui-col-xs3 layui-col-sm2 layui-col-md1 layui-col-lg1" style="text-align: right;">
                            <b><i style="color: red"
                                  th:text="${hotBook.score} + '分'"></i></b></div>
                           </div>
                            <div class="layui-elip layui-col-xs12 layui-col-sm9 layui-col-md10 layui-col-lg10 layui-col-sm9 layui-col-md10 layui-col-lg10"
                                 th:text="${hotBook.bookDesc}">
                            </div>



                    </a>
                </div>-->
                </div>
            </div>

        </div>

    </div>
</div>
</div>
<div style="clear: both"></div>
<div style="height: 1px" class="layui-col-lg1"></div>
    <div class="layui-colla-item layui-col-lg10" style="border-width: 1px;border-style: solid;border-radius: 2px;border-top-width: 0px"><a href="javascript:moreNewBooks()">
    <h2 class="layui-colla-title">最近更新小说
        <div style="float: right; margin-right: 20px"><i style="font-size: 14px;"
                                                         class="layui-icon">更多&#xe65b;</i>
        </div>
    </h2>
</a>
    <div class="layui-colla-content layui-show">

        <div class="layui-container" style="padding-left: 2px;padding-right: 5px">
            <div class="layui-row">
                <div th:each="newBook,bookStat : ${newBooks}" style="padding-bottom: 30px"
                     class="layui-col-xs12 layui-col-sm6 layui-col-md6 layui-col-lg6">

                    <a th:href="'/book/'+${newBook.id}+'.html'">
                        <div class="line-limit-length layui-col-xs8 layui-col-sm6 layui-col-md6 layui-col-lg6"><b
                                th:text="${bookStat.index}+1+'.'+${newBook.bookName}"></b> - <span class="layui-elip"
                                                                                                   th:text="${newBook.author}"></span>
                        </div>
                        <div class="layui-col-sm3 layui-col-md3 layui-col-lg3"
                             style="color: #FF5722;float: right;margin-right:5px"><i
                                th:text="${#dates.format(newBook.updateTime, 'MM-dd HH:mm')}"></i></div>

                        <div style="clear: both"></div>
                        <div style="padding-left: 5px;padding-top: 5px"
                             class="layui-elip layui-col-md11 layui-col-sm11 layui-col-lg11"
                             th:text="'简介：'+ ${newBook.bookDesc}">

                        </div>
                    </a>
                </div>


            </div>
        </div>

    </div>
</div>
</div>
<div style="clear: both"></div>
<div th:replace="common/footer :: footer">
</div>
<div th:replace="common/js :: js">
</div>
<script src="/js/lazyload.js"></script>

<script src="/js/wap_collect.js"></script>
<script>
    lazyload();
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>


<script>

    function moreNewBooks(event) {
        window.location.href = "/book/search";
    }

    function searchBooks() {
        var keywords = $("#title").val();
        window.location.href = "/book/search?keyword=" + encodeURI(keywords);
    }

    function toMyCollect() {
        var token = localStorage.getItem("token");
        if (token) {
            window.location.href = "/book/search?token=" + token;
        } else {
            window.location.href = "/user/login.html";
        }
    }

</script>


</body>
</html>