diff --git a/novel-front/src/main/java/com/java2nb/novel/controller/page/PageController.java b/novel-front/src/main/java/com/java2nb/novel/controller/page/PageController.java
index 3c2eeba..2b67db3 100644
--- a/novel-front/src/main/java/com/java2nb/novel/controller/page/PageController.java
+++ b/novel-front/src/main/java/com/java2nb/novel/controller/page/PageController.java
@@ -153,7 +153,7 @@ public class PageController extends BaseController {
      */
     @RequestMapping("book/bookclass.html")
     public String bookClass() {
-        return "book/bookclass";
+        return ThreadLocalUtil.getTemplateDir() + "book/bookclass";
     }
 
     /**
diff --git a/novel-front/src/main/resources/templates/mobile/book/book_detail.html b/novel-front/src/main/resources/templates/mobile/book/book_detail.html
index 824d863..574662d 100644
--- a/novel-front/src/main/resources/templates/mobile/book/book_detail.html
+++ b/novel-front/src/main/resources/templates/mobile/book/book_detail.html
@@ -141,7 +141,7 @@
             <a th:href="'javascript:searchBooks(\''+ ${book.authorName}+'\')'">
                 <div style=";color: #444;" th:utext="'作者：'+ ${book.authorName}"></div>
             </a>
-            <a th:href="'/book/book_ranking.html?catId='+${book.catId}">
+            <a th:href="'/book/bookclass.html?catId='+${book.catId}">
                 <div style="margin-top: 5px;color: #444;" th:text="'类别：'+ ${book.catName}"></div>
             </a>
             <div style="margin-top: 5px;color: #444;" th:text="'状态：'+ ${book.bookStatus==0?'连载':'完结'}"></div>
@@ -350,7 +350,7 @@
     }
 
     function searchBooks(keyword) {
-        window.location.href = "/book/book_ranking.html?keyword=" + encodeURI(keyword);
+        window.location.href = "/book/bookclass.html?keyword=" + encodeURI(keyword);
     }
 
     $.post("/book/addVisitCount", {"bookId": $("#bookIdHidden").val()}, function () {
diff --git a/novel-front/src/main/resources/templates/mobile/book/bookclass.html b/novel-front/src/main/resources/templates/mobile/book/bookclass.html
new file mode 100644
index 0000000..44f8800
--- /dev/null
+++ b/novel-front/src/main/resources/templates/mobile/book/bookclass.html
@@ -0,0 +1,463 @@
+<!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.name}+',精品小说,弹幕网站,弹幕,弹幕小说网站,免费小说,小说阅读,小说排行,轻小说,txt小说下载,电子书下载,动漫轻小说,日本轻小说'">
+
+    <meta name="description"
+          th:content="${application.website.name}+'是国内优秀的小说弹幕网站,'+${application.website.name}+'提供海量热门网络小说,日本轻小说,国产轻小说,动漫小说,轻小说在线阅读和TXT小说下载,致力于网络精品小说的收集,智能计算小说评分,打造小说精品排行榜,致力于无广告无弹窗的小说阅读环境。'">
+
+
+    <div th:include="mobile/common/css :: css"></div>
+
+    <style type="text/css">
+
+
+        .line-limit-length {
+
+            overflow: hidden;
+
+            text-overflow: ellipsis;
+
+            white-space: nowrap;
+
+        }
+
+        .indexP p a {
+            color: #4c6978;
+        }
+
+        .Readarea {
+            font-size: 18px;
+            line-height: 35px;
+            padding: 10px;
+            color: #333;
+        }
+
+        div, p {
+            wrap-work: break-word;
+            word-break: break-all;
+            word-wrap: break-word;
+            word-break: normal;
+            -moz-box-sizing: border-box;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            -ms-box-sizing: border-box;
+        }
+
+        .indexDiv a {
+            margin-left: 20px;
+        }
+
+        img {
+            width: 130px;
+            height: 180px;
+        }
+
+        .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>
+
+
+<input type="hidden" id="limit" th:value="${limit}"/>
+<input type="hidden" id="curr" th:value="${curr}"/>
+<input type="hidden" id="total" th:value="${total}"/>
+<input type="hidden" id="ids" th:value="${ids}"/>
+<input type="hidden" id="bookStatus" th:value="${bookStatus}"/>
+<input type="hidden" id="token" th:value="${token}"/>
+<input type="hidden" id="keyword" th:value="${keyword}"/>
+<input type="hidden" id="catId" th:value="${catId}"/>
+<input type="hidden" id="sortBy" th:value="${sortBy}"/>
+<input type="hidden" id="sort" th:value="${sort}"/>
+
+<div style="height: 50px;line-height: 50px;text-align: center" class="layui-header header header-doc  layui-bg-cyan">
+
+    <div style="float: left;margin-left: 10px">
+        <a href="javascript:history.go(-1)">
+            <i style="font-size: 20px;color: #fff;" class="layui-icon">&#xe65c;</i></a>
+    </div>
+    <b class="layui-icon">小说列表</b>
+    <div style="float: right;margin-right: 10px">
+        <a href="/"><i style="font-size: 20px;color: #fff;" class="layui-icon">&#xe68e;</i></a>
+    </div>
+</div>
+
+<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" th:value="${keyword}">
+        </div>
+        <div class="layui-col-xs1" style="padding: 1%">
+            <button onclick="search(1,20)" class="layui-btn" lay-submit lay-filter="formDemo">搜索</button>
+        </div>
+    </div>
+
+</div>
+<div class="layui-collapse">
+    <div class="layui-colla-item" style="margin-bottom: 0px">
+        <h2 class="layui-colla-title">小说筛选</h2>
+        <div class="layui-colla-content ">
+            <div class="layui-container" style="padding: 10px 50px 0px 10px">
+                <div class="layui-form">
+                    <div class="layui-form-item" id="channelItem">
+                        <label class="layui-form-label">作品频道</label>
+                        <div class="layui-input-block">
+                            <select id="channel" lay-filter="channel">
+                                <option value="0">男频</option>
+                                <option value="1">女频</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="layui-form-item" id="categoryItem">
+                        <label class="layui-form-label">作品分类</label>
+                        <div class="layui-input-block">
+                            <select id="category">
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">是否完结</label>
+                        <div class="layui-input-block">
+                            <select id="status">
+                                <option value="">不限</option>
+                                <option value="0">连载中</option>
+                                <option value="1">已完结</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">作品字数</label>
+                        <div class="layui-input-block">
+                            <select id="wordCount">
+                                <option value="">不限</option>
+                                <option value="-300000">30万字以下</option>
+                                <option value="300000-500000">30-50万字</option>
+                                <option value="500000-1000000">50-100万字</option>
+                                <option value="1000000-">100万字以上</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">更新时间</label>
+                        <div class="layui-input-block">
+                            <select id="updateTime">
+                                <option value="">不限</option>
+                                <option value="3">3日内</option>
+                                <option value="7">7日内</option>
+                                <option value="15">半月内</option>
+                                <option value="30">一月内</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">排序方式</label>
+                        <div class="layui-input-block">
+                            <select id="by">
+                                <option value="">不限</option>
+                                <option value="last_index_update_time">更新时间</option>
+                                <option value="word_count">总字数</option>
+                                <option value="visit_count">点击量</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="novel-list">
+                    <!-- Novel items will be dynamically loaded here -->
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div id="bookList">
+
+
+</div>
+
+
+<div id="books" style="text-align: center"></div>
+
+
+<div th:replace="mobile/common/footer :: footer">
+</div>
+
+<a name="buttom"></a>
+</body>
+
+<div th:replace="mobile/common/js :: js"></div>
+
+<script>
+
+    var catId = getQueryVariable("catId");
+    var bookStatus = getQueryVariable("bookStatus");
+    var sortBy = getQueryVariable("sortBy");
+    var keyword = getQueryVariable("keyword");
+
+    if (keyword) {
+        $("#title").val(decodeURI(keyword));
+        $("#channelItem").remove();
+        $("#categoryItem").remove();
+    } else {
+        keyword = "";
+    }
+
+    if (bookStatus) {
+        $("#status").val(bookStatus);
+        layui.form.render('select');
+    }
+
+    function search(curr, limit) {
+
+
+        var searchData = {};
+
+        searchData.curr = curr;
+        searchData.limit = limit;
+
+        keyword = $("#title").val();
+
+        if (keyword) {
+            searchData.keyword = keyword;
+        }
+
+
+        var workDirection = $("#channel").val();
+        searchData.workDirection = workDirection;
+
+        var category = $("#category").val()
+        if (category !== "") {
+            searchData.catId = category;
+        }
+
+        var bookStatus = $("#status").val()
+        if (bookStatus !== "") {
+            searchData.bookStatus = bookStatus;
+        }
+
+        var wordCount = $("#wordCount").val().split("-");
+        var wordCountMin = wordCount[0];
+        if (wordCountMin !== "") {
+            searchData.wordCountMin = wordCountMin;
+        }
+        var wordCountMax = wordCount[1];
+        if (wordCountMax !== "") {
+            searchData.wordCountMax = wordCountMax;
+        }
+
+        var updatePeriod = $("#updateTime").val();
+        if (updatePeriod !== "") {
+            searchData.updatePeriod = updatePeriod;
+        }
+
+        var sort = $("#by").val();
+        if (sort !== "") {
+            searchData.sort = sort;
+        }
+
+        $.ajax({
+            type: "get",
+            url: "/book/searchByPage",
+            data: searchData,
+            dataType: "json",
+            success: function (data) {
+                if (data.code == 200) {
+                    var bookList = data.data.list;
+                    var bookListHtml = "";
+                    for (var i = 0; i < bookList.length; i++) {
+                        var book = bookList[i];
+
+                        if (book.bookDesc) {
+                            book.bookDesc = book.bookDesc.replace(/<[^>]+>/g, "").replace(/\s+/g, "").replace(/&nbsp;/g, "");
+                        }
+
+                        bookListHtml += ("<div class=\"layui-row\" style=\"margin-bottom:10px;padding:5px 0px;background: #f2f2f2\">\n" +
+                            "        <a href=\"/book/" + book.id + ".html\">\n" +
+                            "            <div class=\"layui-col-xs5 layui-col-sm3 layui-col-md2 layui-col-lg2\" style=\"text-align: center\">\n" +
+                            "                <img style='width: 130px;height: 190px' align=\"center\"\n" +
+                            "                     src=\"" + book.picUrl + "\"/>\n" +
+                            "\n" +
+                            "            </div>\n" +
+                            "        </a>\n" +
+                            "        <div style=\"padding: 0px 10px 0px 0px\" class=\"layui-col-xs7 layui-col-sm9 layui-col-md10 layui-col-lg10\">\n" +
+                            "            <a href=\"/book/" + book.id + ".html\">\n" +
+                            "                <div class=\"line-limit-length\" style=\";color: #000;font-size: 15px\">" + book.bookName + "</div>\n" +
+                            "            </a>\n" +
+                            "            <div style=\"height: 5px;color: #4c6978;\"><i style=\"color: red\"></i></div>\n" +
+                            "            <a href=\"/book/book_ranking.html?keyword=" + encodeURI(book.authorName) + "\">\n" +
+                            "                <div style=\";color: #a6a6a6;\" class=\"line-limit-length\">作者：" + book.authorName + "</div>\n" +
+                            "            </a>\n" +
+                            "            <div style=\"margin-top: 5px;color: #a6a6a6;\">类别：" + book.catName + "</div>\n" +
+                            "            <div style=\"margin-top: 5px;color: #a6a6a6;\">状态：" + (book.bookStatus == 0 ? '连载' : '完结') + "</div>\n" +
+                            "            <div style=\"margin-top: 5px;color: #a6a6a6;\">更新：<i style='color: red'>" + book.lastIndexUpdateTime.substr(0, 11) + "</i>\n" +
+                            "            </div>\n" +
+                            "            <div class='book_desc' style=\"margin-top: 5px;color: #a6a6a6;\">简介：" + (book.bookDesc) + "</div>\n" +
+                            "\n" +
+                            "\n" +
+                            "        </div>\n" +
+                            "\n" +
+                            "    </div>");
+                    }
+                    $("#bookList").html(bookListHtml);
+
+                    layui.use('laypage', function () {
+                        var laypage = layui.laypage;
+
+                        //执行一个laypage实例
+                        laypage.render({
+                            elem: 'books' //注意，这里的 test1 是 ID，不用加 # 号
+                            , count: data.data.total //数据总数，从服务端得到,
+                            , curr: data.data.pageNum
+                            , limit: data.data.pageSize
+                            , jump: function (obj, first) {
+
+
+                                //obj包含了当前分页的所有参数，比如：
+                                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
+                                console.log(obj.limit); //得到每页显示的条数
+
+
+                                //首次不执行
+                                if (!first) {
+                                    search(obj.curr, obj.limit);
+                                } else {
+
+                                }
+                            }
+                        });
+                    });
+                } else {
+                    layer.alert(data.msg);
+                }
+
+            },
+            error: function () {
+                layer.alert('网络异常');
+            }
+        })
+
+    }
+
+    var categoryList;
+    $.ajax({
+        type: 'get', url: '/book/listBookCategory', data: {}, success: function (data) {
+            categoryList = data.data;
+            layui.form.on('select(channel)', function (data) {
+                changeChannel(data.value);
+            });
+            var workdirection = "0";
+            for (var i = 0; i < categoryList.length; i++) {
+                var category = categoryList[i];
+                if (category.id == catId) {
+                    workdirection = category.workDirection;
+                    break;
+                }
+            }
+            $("#channel").val(workdirection);
+            changeChannel(workdirection);
+        },
+        error: function () {
+            layer.alert('网络异常');
+        }
+    });
+
+    layui.form.on('select', function (data) {
+        search(1, 20)
+    });
+
+    function changeChannel(selected) {
+        var options = '<option value="">不限</option>';
+        for (var i = 0; i < categoryList.length; i++) {
+            var category = categoryList[i];
+            if (category.workDirection == selected) {
+                options += ('<option value="' + category.id + '">' + category.name + '</option>');
+            }
+        }
+        $('#category').html(options);
+        if (catId) {
+            $('#category').val(catId);
+        }
+        layui.form.render('select');
+        search(1, 20)
+    }
+
+    function searchByAllCondition(curr, limit, newKeyword) {
+        var toUrl = "/book/search?curr=" + curr + "&limit=" + limit;
+        var ids = $("#ids").val();
+        if (ids) {
+            toUrl += ("&historyBookIds=" + ids);
+        }
+        var token = $("#token").val();
+        if (token) {
+            toUrl += ("&token=" + token);
+        }
+        var keyword = $("#keyword").val();
+        if (newKeyword) {
+            toUrl += encodeURI("&keyword=" + newKeyword);
+        } else if (keyword) {
+            toUrl += encodeURI("&keyword=" + keyword);
+        }
+        var bookStatus = $("#bookStatus").val();
+        if (bookStatus) {
+            toUrl += ("&bookStatus=" + bookStatus);
+        }
+        var catId = $("#catId").val();
+        if (catId) {
+            toUrl += ("&catId=" + catId);
+        }
+
+        var sortBy = $("#sortBy").val();
+        if (sortBy) {
+            toUrl += ("&sortBy=" + sortBy);
+        }
+
+        var sort = $("#sort").val();
+        if (sort) {
+            toUrl += ("&sort=" + sort);
+        }
+
+        window.location.href = toUrl;
+    }
+
+    function searchBooks() {
+        var keywords = $("#title").val();
+        $("#keyword").val("");
+        searchByAllCondition(1, 20, keywords);
+    }
+
+</script>
+<script>
+
+
+    function toMyCollect() {
+        var token = localStorage.getItem("token");
+        if (token) {
+            window.location.href = "/book/search?token=" + token;
+        } else {
+            window.location.href = "/user/login.html";
+        }
+    }
+</script>
+
+
+</html>
\ No newline at end of file
diff --git a/novel-front/src/main/resources/templates/mobile/index.html b/novel-front/src/main/resources/templates/mobile/index.html
index 799ca61..af59ebd 100644
--- a/novel-front/src/main/resources/templates/mobile/index.html
+++ b/novel-front/src/main/resources/templates/mobile/index.html
@@ -281,12 +281,12 @@
 
 
     function moreNewBooks(event) {
-        window.location.href = "/book/book_ranking.html?sortBy=last_index_update_time";
+        window.location.href = "/book/bookclass.html?sortBy=last_index_update_time";
     }
 
     function searchBooks() {
         var keywords = $("#title").val();
-        window.location.href = "/book/book_ranking.html?keyword=" + encodeURI(keywords);
+        window.location.href = "/book/bookclass.html?keyword=" + encodeURI(keywords);
     }
 
     function toMyCollect() {