<!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.website.name}"></title>

    <meta name="keywords" th:content="${application.website.keyword}"/>
    <meta name="description"
          th:content="${application.website.description}"/>


    <div th:include="mobile/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;
        }

        .user_link {
            vertical-align: middle;
            line-height: 40px;
            float: right;
            color: #3eaf7c;
            padding: 11px 12px 0;
        }

        .user_link a {

            color: #3eaf7c;
        }

        .container {
            display: flex;
            overflow-x: auto; /* 允许内容水平滚动 */
            white-space: nowrap; /* 禁止换行 */
            scroll-snap-type: x mandatory; /* 在滚动时强制对齐 snap-points */
            -ms-overflow-style: none; /* Internet Explorer 10+ */
            scrollbar-width: none; /* Firefox */
        }

        .container::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        .container::-webkit-scrollbar-track,
        .container::-webkit-scrollbar-thumb {
            display: none;
        }


        .item {
            flex: 0 0 calc(100% / 10); /* 每个元素宽度为容器的十分之一 */
            scroll-snap-align: start;
            box-sizing: border-box;
            text-align: center;
            border-radius: 5px;
            margin-right: 5px;
        }

        .book_desc {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            white-space: pre-wrap;
        }

    </style>


</head>
<body>


<!-- 你的HTML代码 -->
<a name="top"></a>
<div style="height: 40px;">
    <div style="line-height: 50px;width: 120px;float:left;padding-left: 10px"><img style="width: 150px;"
                                                                                   th:src="${application.website.logo}">
    </div>
    <div class="user_link">
        <a style="padding-right: 3px" href="/user/favorites.html">
            <svg t="1693622464904" class="icon" viewBox="0 0 1097 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="3653" width="23px" height="23px">
                <path d="M998.58390632 852.14701166H126.84569332A41.51236 41.51236 0 0 0 85.33333332 893.65937166v62.26854a41.51236 41.51236 0 0 0 41.51236 41.51236h871.738213a41.51236 41.51236 0 0 0 41.51236-41.51236v-62.26854a41.51236 41.51236 0 0 0-41.51236-41.51236z m-29.293426 83.014048h-813.172704a8.537246 8.537246 0 0 1-8.537246-8.537246v-3.681687a8.537246 8.537246 0 0 1 8.537246-8.537247h813.172704a8.537246 8.537246 0 0 1 8.537246 8.537247v3.681687a8.537246 8.537246 0 0 1-8.537246 8.537246zM126.84569332 810.63465166h124.537079a41.51236 41.51236 0 0 0 41.51236-41.51236V229.47228566a41.51236 41.51236 0 0 0-41.51236-41.51236H126.84569332A41.51236 41.51236 0 0 0 85.33333332 229.47228566v539.650006a41.51236 41.51236 0 0 0 41.51236 41.51236zM156.72605532 246.49342066h64.883071a12.805869 12.805869 0 0 1 12.805869 12.805869v479.995998a12.805869 12.805869 0 0 1-12.805869 12.80587H156.72605532a12.805869 12.805869 0 0 1-12.80587-12.80587V259.29928966a12.805869 12.805869 0 0 1 12.80587-12.805869z m239.939305 564.141231h124.53708a41.51236 41.51236 0 0 0 41.51236-41.51236V278.62548066l291.653674 510.335237 0.266789 0.480221a41.619075 41.619075 0 0 0 56.826045 15.527116l107.932136-62.962191A42.600859 42.600859 0 0 0 1034.18422332 684.02729066L727.73976932 147.49337866l-0.266789-0.48022a41.619075 41.619075 0 0 0-56.826045-15.527116l-107.932135 62.962191V84.17902666A41.51236 41.51236 0 0 0 521.20244032 42.66666666h-124.53708a41.51236 41.51236 0 0 0-41.51236 41.51236v684.943265a41.51236 41.51236 0 0 0 41.51236 41.51236z m296.295802-597.938055a3.735045 3.735045 0 0 1 5.122348 1.376631l259.841761 454.608363a12.805869 12.805869 0 0 1-4.663471 17.415982l-56.271124 32.825712a12.805869 12.805869 0 0 1-17.544041-4.663471L624.11894332 267.59109066a12.805869 12.805869 0 0 1 4.663471-17.415983zM426.49236432 101.20016166h64.883072a12.805869 12.805869 0 0 1 12.805869 12.805869v625.289257a12.805869 12.805869 0 0 1-12.805869 12.80587h-64.883072a12.805869 12.805869 0 0 1-12.805869-12.80587V114.00603066a12.805869 12.805869 0 0 1 12.805869-12.805869z m0 0"
                      p-id="3654" fill="#3eaf7c"></path>
            </svg>
        </a>
        <a href="/user/userinfo.html">
            <svg t="1698639187751" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="4190" width="23" height="23">
                <path d="M704 329.152C704 209.365333 622.848 128 512 128s-192 81.365333-192 201.152C320 454.762667 407.146667 554.666667 512 554.666667s192-99.904 192-225.514667z m42.666667 0C746.666667 476.714667 642.176 597.333333 512 597.333333s-234.666667-120.618667-234.666667-268.181333C277.333333 181.546667 381.824 85.333333 512 85.333333s234.666667 96.213333 234.666667 243.818667zM512.106667 640c408.96 0 404.864 256.512 404.864 256.512 3.093333 23.274667-13.482667 42.154667-37.098667 42.154667H144.32c-23.573333 0-41.088-19.136-37.077333-42.154667 0 0-4.096-256.512 404.864-256.512zM149.909333 896l0.064 3.861333-0.704 3.968c0.682667-3.882667-2.837333-7.829333-4.949333-7.829333H879.872c-2.154667 0-5.504 3.818667-5.205333 6.144l-0.426667-3.157333 0.064-3.157334c0-0.853333-0.128-3.349333-0.533333-7.125333a161.813333 161.813333 0 0 0-4.266667-23.082667 192.96 192.96 0 0 0-35.242667-71.104C780.330667 725.461333 678.634667 682.666667 512.106667 682.666667c-166.549333 0-268.224 42.794667-322.176 111.850666a192.96 192.96 0 0 0-35.242667 71.104c-2.176 8.426667-3.541333 16.192-4.266667 23.082667a81.045333 81.045333 0 0 0-0.512 7.296z"
                      fill="#3eaf7c" p-id="4191"></path>
            </svg>
        </a>

    </div>
</div>


<div class="layui-container" style="padding-left: 2%">
    <div class="layui-row">

        <div class="layui-col-xs10 layui-col-sm10 layui-col-md11 layui-col-lg11">
            <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: 0 1% 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">
        <blockquote class="layui-elem-quote" style="text-align: left;font-size: 16px">
            精品推荐
        </blockquote>

        <div class="container" style="padding-bottom: 10px">

            <div class="item" style="position: relative;padding:1%;" th:if="${bookMap['4']}" th:each="book,iterStat:${bookMap['4']}">
                <a th:href="'/book/'+${book.bookId}+'.html'">

                    <img style=" width:100px; height:125px; max-width:100%; max-height:100%;"
                         th:src="${book.picUrl}">
                    <br>
                    <span style="width: 100px" class="book_name" th:text="${book.bookName}"></span>

                </a>

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


</div>
<div style="clear: both"></div>
<div class="layui-colla-item">
    <blockquote class="layui-elem-quote" style="text-align: left;font-size: 16px">
        热门推荐
    </blockquote>

    <div class="layui-container">
        <div class="layui-row" id="hotRecBooks" th:if="${bookMap['3']}">
            <div th:each="book,iterStat : ${bookMap['3']}" th:if="${iterStat.index<6}" style="margin-bottom: 5px"
                 class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg4">
                <a th:href="'/book/'+${book.bookId}+'.html'">
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4">
                        <img style=" width:100px; height:125px;" th:src="${book.picUrl}">

                    </div>
                    <div class="layui-col-xs8 layui-col-sm8 layui-col-md8 layui-col-lg8">
                        <ul>
                            <li style="padding-bottom: 5px" class="line-limit-length"
                                th:text="${book.bookName}"></li>
                            <li style="padding-bottom: 5px;color: #a6a6a6" th:text="'作者：'+${book.authorName}"></li>
                            <li class='book_desc' style="color: #a6a6a6;padding-right:10px;"
                                th:utext="${book.bookDesc}"></li>
                        </ul>
                    </div>
                    <div style="font-style: italic;color: red"
                         class="layui-col-xs2 layui-col-sm2 layui-col-md2 layui-col-lg2"></div>
                </a>
            </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()">
    <blockquote class="layui-elem-quote" style="text-align: left;color: #000;font-size: 16px">最新更新
        <div style="float: right; margin-right: 20px"><i style="font-size: 14px;color:#666"
                                                         class="layui-icon">更多&#xe65b;</i>
        </div>
    </blockquote>
</a>
    <div class="layui-colla-content layui-show">

        <div class="layui-container" style="padding-left: 2px;padding-right: 5px">
            <div class="layui-row" id="updateRankBooks">


            </div>
        </div>

    </div>
</div>

<div style="clear: both"></div>
<div th:replace="mobile/common/footer :: footer">
</div>
<div th:replace="mobile/common/js :: js">
</div>

<script src="/mobile/js/wap_collect.js"></script>


<script>


    //更新榜单查询
    $.ajax({
        type: "get",
        url: "/book/listUpdateRank",
        data: {},
        dataType: "json",
        success: function (data) {
            if (data.code == 200) {
                var updateRankBooks = data.data;
                var updateRankBookHtml = "";
                for (var i = 0; i < updateRankBooks.length; i++) {

                    var updateRankBook = updateRankBooks[i];
                    if (updateRankBook.bookDesc) {
                        updateRankBook.bookDesc = updateRankBook.bookDesc.replace(/<[^>]+>/g, "").replace(/\s+/g, "");
                    }

                    updateRankBookHtml += ("<div style=\"padding-bottom: 30px\"\n" +
                        "                     class=\"layui-col-xs12 layui-col-sm6 layui-col-md6 layui-col-lg6\">\n" +
                        "\n" +
                        "                    <a href=\"/book/" + updateRankBook.id + ".html\">\n" +
                        "                        <div class=\"line-limit-length layui-col-xs8 layui-col-sm6 layui-col-md6 layui-col-lg6\"><span '>" + (i + 1) + "." + updateRankBook.bookName + "</span> - <span class=\"layui-elip\" style='color: #a6a6a6;'>" + updateRankBook.authorName + "</span>\n" +
                        "                        </div>\n" +
                        "                        <div class=\"layui-col-sm3 layui-col-md3 layui-col-lg3\"\n" +
                        "                             style=\"color: #FF5722;float: right;margin-right:5px\"><i>" + updateRankBook.lastIndexUpdateTime + "</i></div>\n" +
                        "\n" +
                        "                        <div style=\"clear: both\"></div>\n" +
                        "                        <div style=\"color: #a6a6a6;padding-left: 5px;padding-top: 5px\"\n" +
                        "                             class=\"layui-elip layui-col-md11 layui-col-sm11 layui-col-lg11\">简介：" + updateRankBook.bookDesc + "" +
                        "                    </div></a>\n" +
                        "                </div>");


                }
                $("#updateRankBooks").html(updateRankBookHtml);
            } else {
                layer.alert(data.msg);
            }

        }
        ,
        error: function () {
            layer.alert('网络异常');
        }
    })


    function moreNewBooks(event) {
        window.location.href = "/book/book_ranking.html?sortBy=last_index_update_time";
    }

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

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

</script>


</body>
</html>