diff --git a/README.md b/README.md
index c961b1e..a6cf877 100644
--- a/README.md
+++ b/README.md
@@ -14,11 +14,9 @@
 
 ## 项目介绍
 
-novel-plus 是一个功能完善的原创文学 CMS 系统，支持 PC、WAP 等多端阅读，集小说阅读、内容管理、自动采集与 AI 创作于一体。
-
-项目由前台门户、作家后台、平台管理后台和爬虫管理系统等多个子系统组成，提供小说推荐、作品检索、小说排行、在线阅读、小说书评、段落评论、小说书单、会员中心、作家专区等丰富功能。
-
-系统支持自定义多套模板、阅读主题切换，以及可扩展的小说内容存储方式，内置数据库分表存储和 TXT 文本存储方案。同时支持测试内容的自动采集与更新、AI 长篇小说创作、会员充值、内容订阅和新闻发布，帮助用户灵活搭建和运营原创文学平台。
+novel-plus 是一个多端（PC、WAP）阅读，功能完善的原创文学 CMS
+系统。由前台门户系统、作家后台管理系统、平台后台管理系统和爬虫管理系统等多个子系统构成，包括小说推荐、作品检索、小说排行、小说阅读、小说书评、段落评论、小说书单、会员中心、作家专区等功能，支持自定义多模版、可拓展的多种小说内容存储方式（内置数据库分表存储和
+TXT 文本存储）、阅读主题切换、自动采集和更新测试数据、AI写作、会员充值、订阅模式、新闻发布和实时统计报表。
 
 ## 项目地址
 
diff --git a/novel-crawl/src/main/build/scripts/novel-crawl.bat b/novel-crawl/src/main/build/scripts/novel-crawl.bat
index c0d7873..d3b5c09 100644
--- a/novel-crawl/src/main/build/scripts/novel-crawl.bat
+++ b/novel-crawl/src/main/build/scripts/novel-crawl.bat
@@ -1,4 +1,4 @@
 @echo off
 cd /d "%~dp0.."
 java -jar -Dspring.profiles.active=prod novel-crawl.jar
-pause
\ No newline at end of file
+pause
diff --git a/novel-front/src/main/build/scripts/novel-front.bat b/novel-front/src/main/build/scripts/novel-front.bat
index 0589f30..dbb5aea 100644
--- a/novel-front/src/main/build/scripts/novel-front.bat
+++ b/novel-front/src/main/build/scripts/novel-front.bat
@@ -1,4 +1,4 @@
 @echo off
 cd /d "%~dp0.."
 java -jar -Dspring.profiles.active=prod novel-front.jar
-pause
\ No newline at end of file
+pause
diff --git a/templates/green/html/author/book_add.html b/templates/green/html/author/book_add.html
index fae9649..25a00cb 100644
--- a/templates/green/html/author/book_add.html
+++ b/templates/green/html/author/book_add.html
@@ -48,20 +48,14 @@
                             <ul class="log_list">
                                 <li><span id="LabErr"></span></li>
                                 <b>作品方向：</b>
-                                <li><select class="s_input" id="workDirection" name="workDirection">
+                                <li><select class="s_input" id="workDirection" name="workDirection" onchange="changeCatSelect(this.value)">
                                     <option value="0">男频</option>
                                     <option value="1">女频</option>
                                 </select>
                                 </li>
                                 <b>分类：</b>
                                 <li><select class="s_input" id="catId" name="catId">
-                                    <option value="1">玄幻奇幻</option>
-                                    <option value="2">武侠仙侠</option>
-                                    <option value="3">都市言情</option>
-                                    <option value="4">历史军事</option>
-                                    <option value="5">科幻灵异</option>
-                                    <option value="6">网游竞技</option>
-                                    <option value="7">女生频道</option>
+
                                 </select></li>
                                 <input type="hidden" id="catName" name="catName" value="玄幻奇幻"/>
                                 <b>小说名：</b>
@@ -133,6 +127,10 @@
 <script src="/javascript/common.js" type="text/javascript"></script>
 <script language="javascript" type="text/javascript">
 
+    var categoryList = [];
+
+    changeCatSelect(0);
+
     function picChange() {
         var file = $("#file0").val(); //文件名称
         if (file != "") {
@@ -204,8 +202,8 @@
             type: "POST",
             url: "/author/addBook",
             data: {'workDirection': $("#workDirection").val(),
-            'catId':$("#catId").val(),'catName':$("#catId").find("option[value="+$("#catId").val()+"]").html(),
-            'bookName':bookName,'picUrl':picUrl,'bookDesc':bookDesc},
+                'catId':$("#catId").val(),'catName':$("#catId").find("option[value="+$("#catId").val()+"]").html(),
+                'bookName':bookName,'picUrl':picUrl,'bookDesc':bookDesc},
             dataType: "json",
             success: function (data) {
                 if (data.code == 200) {
@@ -226,6 +224,42 @@
         })
 
     }
+    
+    function renderCategoryOptions(workdirection) {
+        var categoryListHtml = "";
+        for (var i = 0; i < categoryList.length; i++) {
+            var category = categoryList[i];
+            if (category.workDirection == workdirection) {
+                categoryListHtml += ("<option value=\"" + category.id + "\">" + category.name + "</option>");
+            }
+        }
+        $("#catId").html(categoryListHtml);
+    }
+
+    function changeCatSelect(workdirection){
+        if(categoryList.length > 0){
+            renderCategoryOptions(workdirection);
+            return;
+        }
+        $.ajax({
+            type: "get",
+            url: "/book/listBookCategory",
+            data: {},
+            dataType: "json",
+            success: function (data) {
+                if (data.code == 200) {
+                    categoryList = data.data;
+                    renderCategoryOptions(workdirection);
+                } else {
+                    layer.alert(data.msg);
+                }
+
+            },
+            error: function () {
+                layer.alert('网络异常');
+            }
+        })
+    }
 
 </script>
 </html>
diff --git a/templates/green/html/author/index.html b/templates/green/html/author/index.html
index 843b982..5ff7543 100644
--- a/templates/green/html/author/index.html
+++ b/templates/green/html/author/index.html
@@ -8,23 +8,10 @@
         <title>作家管理系统-小说精品屋</title>
         <link rel="stylesheet" href="/css/base.css?v=1"/>
         <link rel="stylesheet" href="/css/user.css"/>
-        <style type="text/css">
-            .redBtn {
-                padding: 5px;
-                border-radius: 20px;
-                border: 1px solid #3eaf7c;
-                background: #3eaf7c;
-                color: #fff;
-            }
-
-            a.redBtn:hover {
-
-                color: #fff;
-            }
-        </style>
+        <link rel="stylesheet" href="/css/author.css"/>
     </head>
 </head>
-<body class="">
+<body class="author_zone">
 
 <div class="header">
     <div class="mainNav" id="mainNav">
@@ -50,38 +37,43 @@
         </div>
         <div class="my_r">
             <div id="noContentDiv">
-                <div class="tc" style="margin-top: 200px"><a href="/author/book_add.html" class="btn_red">创建作品</a></div>
-
+                <div class="empty_box">
+                    <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#3eaf7c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M12 7.5C10.5 6 8 5.4 4.5 5.7v12C8 17.5 10.5 18 12 19.5M12 7.5c1.5-1.5 4-2.1 7.5-1.8v12c-3.5-.2-6 .3-7.5 1.8"/>
+                    </svg>
+                    <p>还没有作品，快去创建一部吧～</p>
+                    <a href="/author/book_add.html" class="btn_main">创建作品</a>
+                </div>
             </div>
             <div class="my_bookshelf" id="hasContentDiv" style="display: none">
                 <div class="title cf">
                     <h2 class="fl">小说列表</h2>
-                    <div class="fr"><a href="/author/book_add.html" class="btn_red">发布小说</a></div>
+                    <div class="fr"><a href="/author/book_add.html" class="btn_main">＋ 发布小说</a></div>
                 </div>
 
                 <div id="divData" class="updateTable">
                     <table cellpadding="0" cellspacing="0">
                         <thead>
                         <tr>
-                            <th class="goread">
-                                书名
+                            <th class="name">
+                                作品
                             </th>
-                            <th class="goread">
-                                分类
-                            </th>
-                            <th class="goread">
+                            <th class="goread col_visit">
                                 点击量
                             </th>
-                            <th class="goread">
-                                昨日订阅数
+                            <th class="goread col_buy">
+                                昨日订阅
                             </th>
-                            <th class="goread">
+                            <th class="goread col_time">
                                 更新时间
                             </th>
-                            <th class="goread">
+                            <th class="goread col_word">
                                 总字数
                             </th>
-                            <th class="goread">
+                            <th class="goread col_status">
+                                状态
+                            </th>
+                            <th class="goread col_opt">
                                 操作
                             </th>
                         </tr>
@@ -94,37 +86,6 @@
                     <div class="pageBox cf" id="shellPage">
                     </div>
                 </div>
-                <!--<div id="divData" class="updateTable">
-                    <table cellpadding="0" cellspacing="0">
-                        <thead>
-                        <tr>
-
-                            <th class="name">
-                                爬虫源（已开启的爬虫源）
-                            </th>
-                            <th class="chapter">
-                                成功爬取数量（websocket实现）
-                            </th>
-                            <th class="time">
-                            目标爬取数量
-                            </th>
-                            <th class="goread">
-                                状态（正在运行，已停止）（一次只能运行一个爬虫源）
-                            </th>
-                            <th class="goread">
-                                操作（启动，停止）
-                            </th>
-                        </tr>
-                        </thead>
-                        <tbody id="bookShelfList">
-
-
-
-                        </tbody>
-                    </table>
-                    <div class="pageBox cf" id="shellPage">
-                    </div>
-                </div>-->
             </div>
         </div>
     </div>
@@ -143,7 +104,27 @@
 <script language="javascript" type="text/javascript">
     var coverUpdateInterval;
 
-    search(1, 5);
+    search(1, 10);
+
+    //数字缩写：超过10万用“万”作单位，避免数字过长撑宽列
+    function fmtNum(n) {
+        var num = Number(n || 0);
+        if (isNaN(num)) {
+            num = 0;
+        }
+        return num >= 100000 ? (num / 10000).toFixed(1).replace(/\.0$/, '') + '万' : String(num);
+    }
+
+    //时间两行展示：日期 + 时刻
+    function fmtTime(t) {
+        var d = new Date(Date.parse(t));
+        return d.Format('yyyy-MM-dd') + '<br>' + d.Format('hh:mm');
+    }
+
+    //HTML转义，防止书名/章节名破坏表格结构
+    function escapeHtml(str) {
+        return String(str == null ? '' : str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
 
     function search(curr, limit) {
         clearInterval(coverUpdateInterval);
@@ -156,20 +137,20 @@
                 if (data.code == 200) {
                     var bookList = data.data.list;
                     if (bookList.length > 0) {
-                        if(curr == 1 && bookList[0].picUrl == '/images/default.gif'){
-                            coverUpdateInterval = setInterval(function(){
+                        if (curr == 1 && bookList[0].picUrl == '/images/default.gif') {
+                            coverUpdateInterval = setInterval(function () {
                                 $.ajax({
                                     type: "get",
                                     url: "/author/queryAiGenPic",
                                     data: {'bookId': bookList[0].id},
                                     dataType: "json",
                                     success: function (data) {
-                                        if(data.code == 200 && data.data){
-                                            $("#cover"+bookList[0].id).attr("src", data.data);
+                                        if (data.code == 200 && data.data) {
+                                            $("#cover" + bookList[0].id).attr("src", data.data);
                                             clearInterval(coverUpdateInterval);
                                         }
                                     }
-                                  });
+                                });
                             }, 3000);
                             setTimeout(() => {
                                 clearInterval(coverUpdateInterval);
@@ -180,40 +161,32 @@
                         var bookListHtml = "";
                         for (var i = 0; i < bookList.length; i++) {
                             var book = bookList[i];
-                            bookListHtml += (" <tr class=\"book_list\" vals=\"291\">\n" +
-                                /* "                            <td class=\"style bookclass\">\n" +
-                                 "                                ["+(i+1)+"]\n" +
-                                 "                            </td>\n" +*/
-
-                                "                            <td style=\"position: relative\" class=\"goread\">\n" +
-                                "<input class=\"opacity\" onchange=\"picChange('" + book.id + "')\"\n" +
-                                "                                           type=\"file\" id=\"file" + book.id + "\" name=\"file\"\n" +
-                                "                                           title=\"点击上传图片\"\n" +
-                                "                                           style=\"z-index: 100;cursor: pointer;left: 30px; top: 0px; width: 60px; height: 80px; opacity: 0; position: absolute;  \"\n" +
-                                "                                    />" +
-                                "<img id=\"cover" + book.id + "\" width='50' height='70' src='" + book.picUrl + "'/><br/>" +                                "                                " + book.bookName + "</td>\n" +
-                                "                            <td class=\"goread\" >"
-                                + book.catName + "</td>\n" +
-
-                                "                            <td class=\"goread\" valsc=\"291|2037554|1\">"
-                                + book.visitCount + "</td>\n" +
-
-                                "                            <td class=\"goread\" valsc=\"291|2037554|1\">"
-                                + book.yesterdayBuy + "</td>\n" +
-
-                                "                            <td class=\"goread\">\n" +
-                                "                                " + new Date(Date.parse(book.lastIndexUpdateTime ? book.lastIndexUpdateTime : book.updateTime)).Format("yyyy-MM-dd hh:mm") + "更新\n" +
-                                "                            </td>\n" +
-
-                                "                            <td class=\"goread\" valsc=\"291|2037554|1\">"
-                                + book.wordCount + "</td>\n" +
-
-                                " <td class=\"goread\" id='opt" + book.id + "'>" +
-                                "<a target='_blank' class='redBtn' href='/author/index_list.html?bookId=" + book.id + "'>章节管理  </a><br/>" +
-                                "<a class='redBtn' href='/author/ai_assistant.html?bookId=" + book.id + "'>AI创作  </a><br/>" +
-                                "<a target='_blank' href='/author/author_income_detail.html?bookId=" + book.id + "'>薪酬查询  </a><br/>" +
-                                "<a target='_blank' href='/book/" + book.id + ".html'>作品信息</a>" +
-                                "</td>                     </tr>");
+                            var updTime = fmtTime(book.lastIndexUpdateTime ? book.lastIndexUpdateTime : book.updateTime);
+                            bookListHtml += '<tr class="book_list">'
+                                + '<td class="name">'
+                                + '  <div class="book_cell">'
+                                + '    <div class="cover_wrap">'
+                                + '      <input type="file" id="file' + book.id + '" name="file" title="点击更换封面" onchange="picChange(\'' + book.id + '\')" />'
+                                + '      <img id="cover' + book.id + '" src="' + book.picUrl + '" alt="封面"/>'
+                                + '      <span class="cover_mask">更换封面</span>'
+                                + '    </div>'
+                                + '    <div class="book_info">'
+                                + '      <a class="book_name" target="_blank" href="/book/' + book.id + '.html" title="' + escapeHtml(book.bookName) + '">' + escapeHtml(book.bookName) + '</a>'
+                                + '      <p class="book_cat">' + escapeHtml(book.catName || '') + '</p>'
+                                + '    </div>'
+                                + '  </div>'
+                                + '</td>'
+                                + '<td class="goread"><span class="num">' + fmtNum(book.visitCount) + '</span></td>'
+                                + '<td class="goread"><span class="num">' + fmtNum(book.yesterdayBuy) + '</span></td>'
+                                + '<td class="goread time_cell">' + updTime + '</td>'
+                                + '<td class="goread"><span class="num">' + fmtNum(book.wordCount) + '</span></td>'
+                                + '<td class="goread">' + (book.bookStatus == 0 ? '<span class="tag tag_serial">连载中</span>' : '<span class="tag tag_done">已完结</span>') + '</td>'
+                                + '<td class="goread opt" id="opt' + book.id + '">'
+                                + '<a target="_blank" href="/author/index_list.html?bookId=' + book.id + '">章节管理</a>'
+                                + '<a href="/author/ai_assistant.html?bookId=' + book.id + '">AI创作</a>'
+                                + '<a target="_blank" href="/author/author_income_detail.html?bookId=' + book.id + '">薪酬查询</a>'
+                                + (book.bookStatus == 0 ? '<a class="opt_del" href="javascript:finishBook(\'' + book.id + '\')">设为完结</a>' : '')
+                                + '</td></tr>';
                         }
                         $("#bookList").html(bookListHtml);
 
@@ -223,22 +196,14 @@
                             //执行一个laypage实例
                             laypage.render({
                                 elem: 'shellPage' //注意，这里的 test1 是 ID，不用加 # 号
-                                , count: data.data.total //数据总数，从服务端得到,
+                                , count: data.data.total //数据总数，从服务端得到
                                 , curr: data.data.pageNum
                                 , limit: data.data.pageSize
+                                , theme: '#3eaf7c'
                                 , jump: function (obj, first) {
-
-
-                                    //obj包含了当前分页的所有参数，比如：
-                                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
-                                    console.log(obj.limit); //得到每页显示的条数
-
-
                                     //首次不执行
                                     if (!first) {
                                         search(obj.curr, obj.limit);
-                                    } else {
-
                                     }
                                 }
                             });
@@ -295,7 +260,7 @@
     }
 
 
-   function picChange(bookId) {
+    function picChange(bookId) {
         var file = $("#file" + bookId).val(); //文件名称
         if (file != "") {
             if (checkPicUpload($("#file" + bookId)[0])) {
@@ -316,7 +281,7 @@
                                 dataType: "json",
                                 success: function (data) {
                                     if (data.code == 200) {
-                                        $("#cover"+bookId).attr("src", picUrl);
+                                        $("#cover" + bookId).attr("src", picUrl);
                                     } else {
                                         layer.alert(data.msg);
                                     }
@@ -340,6 +305,42 @@
         }
 
 
+    }
+
+    function finishBook(bookId) {
+
+        layer.confirm('确认要完结作品吗？该操作不可逆！', {
+            btn: ['确定', '取消']//按钮
+        }, function (index) {
+
+            layer.close(index);
+            $.ajax({
+                type: "post",
+                url: "/author/finishBook",
+                data: {"bookId": bookId},
+                dataType: "json",
+                success: function (data) {
+                    if (data.code == 200) {
+
+                        location.reload();
+
+
+                    } else if (data.code == 1001) {
+                        //未登录
+                        location.href = '/user/login.html?originUrl=' + encodeURIComponent(location.href);
+
+                    } else {
+                        layer.alert(data.msg);
+                    }
+
+                },
+                error: function () {
+                    layer.alert('网络异常');
+                }
+            })
+        });
+
+
     }
 </script>
 </html>
diff --git a/templates/green/html/author/index_list.html b/templates/green/html/author/index_list.html
index 8c8884c..089eab0 100644
--- a/templates/green/html/author/index_list.html
+++ b/templates/green/html/author/index_list.html
@@ -8,23 +8,10 @@
         <title>作家管理系统-小说精品屋</title>
         <link rel="stylesheet" href="/css/base.css?v=1"/>
         <link rel="stylesheet" href="/css/user.css"/>
-        <style type="text/css">
-            .redBtn {
-                padding: 5px;
-                border-radius: 20px;
-                border: 1px solid #3eaf7c;
-                background: #3eaf7c;
-                color: #fff;
-            }
-
-            a.redBtn:hover {
-
-                color: #fff;
-            }
-        </style>
+        <link rel="stylesheet" href="/css/author.css"/>
     </head>
 </head>
-<body class="">
+<body class="author_zone">
 
 <div class="header">
     <div class="mainNav" id="mainNav">
@@ -49,34 +36,45 @@
 
         </div>
         <div class="my_r">
+            <div class="book_brief cf" id="bookBrief">
+                <a href="/author/index.html" class="back_link">← 返回小说列表</a>
+                <img id="briefCover" src="" alt="封面"/>
+                <h3 id="briefName"></h3>
+                <p id="briefSub"></p>
+            </div>
             <div id="noContentDiv">
-                <div class="tc" style="margin-top: 200px"><a href="javascript:addContent()" class="btn_red">新建章节</a>
+                <div class="empty_box">
+                    <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#3eaf7c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M8 4h9a2 2 0 0 1 2 2v13l-3-2-3 2-3-2-3 2V6a2 2 0 0 1 2-2z"/>
+                        <path d="M9.5 9h6M9.5 12.5h4"/>
+                    </svg>
+                    <p>还没有章节，从第一章开始创作吧～</p>
+                    <a href="javascript:addContent()" class="btn_main">新建章节</a>
                 </div>
-
             </div>
             <div class="my_bookshelf" id="hasContentDiv" style="display: none">
                 <div class="title cf">
-                    <h2 class="fl">章节列表</h2>
-                    <div class="fr"><a href="javascript:addContent()" class="btn_red">新建章节</a></div>
+                    <h2 class="fl">章节列表<span class="sub" id="indexTotal"></span></h2>
+                    <div class="fr"><a href="javascript:addContent()" class="btn_main">＋ 新建章节</a></div>
                 </div>
 
                 <div id="divData" class="updateTable">
                     <table cellpadding="0" cellspacing="0">
                         <thead>
                         <tr>
-                            <!-- <th class="style">
-                                 序号
-                             </th>-->
+                            <th class="goread col_idx">
+                                序号
+                            </th>
                             <th class="name">
                                 章节名
                             </th>
-                            <th class="goread">
+                            <th class="goread col_time">
                                 更新时间
                             </th>
-                            <th class="goread">
+                            <th class="goread col_vip">
                                 是否收费
                             </th>
-                            <th class="goread">
+                            <th class="goread col_opt">
                                 操作
                             </th>
                         </tr>
@@ -89,37 +87,6 @@
                     <div class="pageBox cf" id="shellPage">
                     </div>
                 </div>
-                <!--<div id="divData" class="updateTable">
-                    <table cellpadding="0" cellspacing="0">
-                        <thead>
-                        <tr>
-
-                            <th class="name">
-                                爬虫源（已开启的爬虫源）
-                            </th>
-                            <th class="chapter">
-                                成功爬取数量（websocket实现）
-                            </th>
-                            <th class="time">
-                            目标爬取数量
-                            </th>
-                            <th class="goread">
-                                状态（正在运行，已停止）（一次只能运行一个爬虫源）
-                            </th>
-                            <th class="goread">
-                                操作（启动，停止）
-                            </th>
-                        </tr>
-                        </thead>
-                        <tbody id="bookShelfList">
-
-
-
-                        </tbody>
-                    </table>
-                    <div class="pageBox cf" id="shellPage">
-                    </div>
-                </div>-->
             </div>
         </div>
     </div>
@@ -140,7 +107,45 @@
 
     var indexCount = 0;
 
-    search(1, 5);
+    //HTML转义，防止章节名破坏表格结构
+    function escapeHtml(str) {
+        return String(str == null ? '' : str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+
+    //时间两行展示：日期 + 时刻
+    function fmtTime(t) {
+        var d = new Date(Date.parse(t));
+        return d.Format('yyyy-MM-dd') + '<br>' + d.Format('hh:mm');
+    }
+
+    //加载顶部作品信息栏
+    function loadBookBrief() {
+        if (!bookId) {
+            return;
+        }
+        $.ajax({
+            type: "get",
+            url: "/book/queryBookDetail/" + bookId,
+            data: {},
+            dataType: "json",
+            success: function (data) {
+                if (data.code == 200 && data.data) {
+                    var book = data.data;
+                    $("#briefCover").attr("src", book.picUrl);
+                    $("#briefName").text(book.bookName);
+                    var sub = (book.catName ? book.catName + ' · ' : '')
+                        + (book.bookStatus == 0 ? '连载中' : '已完结')
+                        + ' · 已发布 ' + (data.data.wordCount || 0) + ' 字';
+                    $("#briefSub").text(sub);
+                    $("#bookBrief").show();
+                }
+            }
+        });
+    }
+
+    loadBookBrief();
+
+    search(1, 20);
 
     function search(curr, limit) {
 
@@ -153,32 +158,22 @@
                 if (data.code == 200) {
                     var bookList = data.data.list;
                     if (bookList.length > 0) {
-                        indexCount = bookList.length;
+                        indexCount = data.data.total;
+                        $("#indexTotal").text('共 ' + data.data.total + ' 章');
                         $("#hasContentDiv").css("display", "block");
                         $("#noContentDiv").css("display", "none");
                         var bookListHtml = "";
                         for (var i = 0; i < bookList.length; i++) {
                             var book = bookList[i];
-                            bookListHtml += (" <tr class=\"book_list\" vals=\"291\">\n" +
-                                /*  "                            <td class=\"style bookclass\">\n" +
-                                  "                                ["+(i+1)+"]\n" +
-                                  "                            </td>\n" +*/
-
-                                "                            <td id='name" + book.id + "' class=\"name\">\n" +
-                                "                                " + book.indexName + "</td>\n" +
-
-
-                                "                            <td class=\"goread\">\n" +
-                                "                                " + new Date(Date.parse(book.updateTime)).Format("yyyy-MM-dd hh:mm") + "<br/>更新\n" +
-                                "                            </td>\n" +
-
-                                "                            <td class=\"goread\" valsc=\"291|2037554|1\">"
-                                + (book.isVip == 1 ? '收费' : '免费') + "</td>\n" +
-
-                                " <td class=\"goread\" id='opt" + book.id + "'>" +
-                                "<a  class='redBtn' href='javascript:updateIndex(\"" + book.id + "\"," + book.isVip + ")'>修改  </a><br/>" +
-                                "<a  href='javascript:deleteIndex(\"" + book.id + "\")'>删除  </a><br/>" +
-                                "</td>                     </tr>");
+                            bookListHtml += '<tr class="book_list">'
+                                + '<td class="goread"><span class="idx_no">' + book.indexNum + '</span></td>'
+                                + '<td class="name" id="name' + book.id + '" title="' + escapeHtml(book.indexName) + '">' + escapeHtml(book.indexName) + '</td>'
+                                + '<td class="goread time_cell">' + fmtTime(book.updateTime) + '</td>'
+                                + '<td class="goread">' + (book.isVip == 1 ? '<span class="tag tag_vip">收费</span>' : '<span class="tag tag_free">免费</span>') + '</td>'
+                                + '<td class="goread opt" id="opt' + book.id + '">'
+                                + '<a href="javascript:updateIndex(\'' + book.id + '\',' + book.isVip + ')">修改</a>'
+                                + '<a class="opt_del" href="javascript:deleteIndex(\'' + book.id + '\')">删除</a>'
+                                + '</td></tr>';
                         }
                         $("#bookList").html(bookListHtml);
 
@@ -188,22 +183,14 @@
                             //执行一个laypage实例
                             laypage.render({
                                 elem: 'shellPage' //注意，这里的 test1 是 ID，不用加 # 号
-                                , count: data.data.total //数据总数，从服务端得到,
+                                , count: data.data.total //数据总数，从服务端得到
                                 , curr: data.data.pageNum
                                 , limit: data.data.pageSize
+                                , theme: '#3eaf7c'
                                 , jump: function (obj, first) {
-
-
-                                    //obj包含了当前分页的所有参数，比如：
-                                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
-                                    console.log(obj.limit); //得到每页显示的条数
-
-
                                     //首次不执行
                                     if (!first) {
                                         search(obj.curr, obj.limit);
-                                    } else {
-
                                     }
                                 }
                             });
@@ -243,52 +230,6 @@
             + "&indexName=" + encodeURI(encodeURI(indexName))
             + "&isVip=" + isVip;
 
-
-        /*
-                var indexName = $("#name"+indexId).text();
-
-                var htmlStr = "<input type=\"text\" value=\""+$.trim(indexName)+"\">";
-
-                $("#name"+indexId).html(htmlStr);
-                $("#name"+indexId).find("input").focus();
-                $("#name"+indexId).find("input").select();
-
-                $("#name"+indexId).find("input").keyup(function(event){
-                    if(event.keyCode ==13){
-                        $(this).blur();
-                    }
-                });
-
-                $("#name"+indexId).find("input").blur(function () {
-                    var indexName = $(this).val();
-                    $.ajax({
-                        type: "POST",
-                        url: "/author/updateIndexName",
-                        data: {'indexId':indexId,'indexName':indexName},
-                        dataType: "json",
-                        success: function (data) {
-                            if (data.code == 200) {
-
-                                $("#name"+indexId).html(indexName);
-
-
-                            } else if (data.code == 1001) {
-                                //未登录
-                                location.href = '/user/login.html?originUrl=' + encodeURIComponent(location.href);
-
-                            }else {
-                                layer.alert(data.msg);
-                            }
-
-                        },
-                        error: function () {
-                            layer.alert('网络异常');
-                        }
-                    })
-
-                });*/
-
-
     }
 
 
diff --git a/templates/green/html/author/register.html b/templates/green/html/author/register.html
index 255d337..d3c41a6 100644
--- a/templates/green/html/author/register.html
+++ b/templates/green/html/author/register.html
@@ -1,169 +1,650 @@
-
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head id="Head1"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>
-    申请作者
-</title><link rel="stylesheet" type="text/css" href="/css/easyui.css" />
-    <link href="/css/public.css" rel="stylesheet" type="text/css" />
-    <script type="text/javascript" src="/javascript/jquery-1.8.0.min.js"></script>
-    <script type="text/javascript" src="/javascript/jquery.easyui.min.js"></script>
-    <script type="text/javascript" src="/javascript/easyui-lang-zh_CN.js"></script>
-    <script src="/javascript/YT.js" type="text/javascript"></script>
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title th:text="'申请签约作者_'+${application.website.name}+'小说'">申请签约作者</title>
+    <link rel="stylesheet" href="/css/base.css?v=1"/>
+    <link rel="stylesheet" href="/css/author.css"/>
     <style type="text/css">
-        .ipage a
-        {
-            border: 1px dotted #cccccc;
-            color: #555555;
-            display: block;
-            float: left;
-            height: 30px;
-            line-height: 30px;
-            margin: 0 15px 0 0;
-            text-align: center;
-            width: 122px;
+        .author_reg {
+            min-height: 100vh;
+            background: linear-gradient(135deg, #eef8f3 0%, #f7fbf9 45%, #e6f4ec 100%);
+            padding: 40px 20px 60px;
+            box-sizing: border-box;
         }
-        .ipage a:hover,.ahover
-        {
-            background-color: #fff; color: #f00!important; border:1px solid #f00!important
+
+        .author_reg .reg_topbar {
+            max-width: 1060px;
+            margin: 0 auto 18px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .author_reg .reg_back {
+            font-size: 13px;
+            color: #5c6b64;
+            text-decoration: none;
+        }
+
+        .author_reg .reg_back:hover { color: #3eaf7c }
+
+        .author_reg .reg_brand {
+            font-size: 15px;
+            color: #2c8a61;
+            font-weight: 600;
+        }
+
+        .author_reg .reg_card {
+            max-width: 1060px;
+            margin: 0 auto;
+            background: #fff;
+            border-radius: 16px;
+            border: 1px solid #e6f0ea;
+            box-shadow: 0 12px 40px rgba(62, 175, 124, .12);
+            overflow: hidden;
+            display: flex;
+        }
+
+        /* 左侧介绍区 */
+        .author_reg .reg_side {
+            width: 380px;
+            flex: none;
+            padding: 42px 34px;
+            box-sizing: border-box;
+            background: linear-gradient(160deg, #3eaf7c 0%, #2c8a61 100%);
+            color: #fff;
+        }
+
+        .author_reg .side_logo {
+            display: flex;
+            align-items: center;
+            font-size: 15px;
+            font-weight: 600;
+            letter-spacing: 1px;
+            opacity: .95;
+        }
+
+        .author_reg .side_logo svg { margin-right: 8px }
+
+        .author_reg .side_title {
+            margin: 26px 0 12px;
+            font-size: 25px;
+            line-height: 1.4;
+            font-weight: 600;
+        }
+
+        .author_reg .side_desc {
+            font-size: 13px;
+            line-height: 1.9;
+            color: rgba(255, 255, 255, .85);
+        }
+
+        .author_reg .side_list { margin: 28px 0 0 }
+
+        .author_reg .side_list li {
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+            line-height: 1.6;
+            margin-bottom: 16px;
+            color: rgba(255, 255, 255, .92);
+        }
+
+        .author_reg .side_list .ico {
+            flex: none;
+            width: 30px;
+            height: 30px;
+            margin-right: 12px;
+            border-radius: 8px;
+            background: rgba(255, 255, 255, .18);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .author_reg .side_list .ico svg {
+            display: block;
+            width: 15px;
+            height: 15px;
+        }
+
+        .author_reg .side_steps {
+            margin-top: 30px;
+            padding-top: 24px;
+            border-top: 1px solid rgba(255, 255, 255, .22);
+        }
+
+        .author_reg .side_steps h4 { font-size: 13px; margin-bottom: 14px; opacity: .9 }
+
+        .author_reg .side_steps .stp {
+            display: flex;
+            align-items: center;
+            font-size: 12px;
+            color: rgba(255, 255, 255, .88);
+        }
+
+        .author_reg .side_steps .num_ {
+            width: 22px;
+            height: 22px;
+            flex: none;
+            line-height: 22px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, .22);
+            text-align: center;
+            margin-right: 10px;
+        }
+
+        .author_reg .side_steps .line {
+            width: 22px;
+            height: 1px;
+            margin: 6px 0 6px 32px;
+            background: rgba(255, 255, 255, .35);
+        }
+
+        /* 右侧表单区 */
+        .author_reg .reg_main {
+            flex: 1;
+            min-width: 0;
+            padding: 42px 46px;
+            box-sizing: border-box;
+        }
+
+        .author_reg .reg_title { font-size: 22px; color: #333; font-weight: 600 }
+
+        .author_reg .reg_sub {
+            font-size: 13px;
+            color: #99a59e;
+            margin: 10px 0 24px;
+        }
+
+        .author_reg .reg_sub .req { color: #3eaf7c; font-weight: 600 }
+
+        .author_reg .reg_err {
+            padding: 11px 16px;
+            margin-bottom: 20px;
+            border-radius: 8px;
+            background: #fef0f0;
+            border: 1px solid #fbc4c4;
+            color: #d9544f;
+            font-size: 13px;
+            line-height: 1.6;
+        }
+
+        .author_reg .field { margin-bottom: 20px }
+
+        .author_reg .field label.fl {
+            display: block;
+            font-size: 13px;
+            color: #5c6b64;
+            margin-bottom: 8px;
+        }
+
+        .author_reg .field label.fl b { color: #3eaf7c; font-weight: 600 }
+
+        .author_reg .ipt_wrap {
+            display: flex;
+            align-items: center;
+            box-sizing: border-box;
+            height: 42px;
+            padding: 0 14px 0 13px;
+            border: 1px solid #dfe9e4;
+            border-radius: 8px;
+            background: #fbfdfc;
+            outline: none;
+            transition: border-color .2s, background .2s, box-shadow .2s;
+        }
+
+        .author_reg .ipt_wrap .picon {
+            flex: none;
+            display: block;
+            width: 16px;
+            height: 16px;
+            margin-right: 8px;
+            color: #a9b8b1;
+        }
+
+        .author_reg .ipt {
+            flex: 1;
+            min-width: 0;
+            height: 40px;
+            line-height: 40px;
+            padding: 0;
+            border: 0;
+            font-size: 13px;
+            color: #333;
+            background: transparent;
+            outline: none;
+        }
+
+        .author_reg .ipt::placeholder, .author_reg .ipt::-webkit-input-placeholder {
+            color: #b3c0b9
+        }
+
+        .author_reg .ipt_wrap:focus-within {
+            border-color: #3eaf7c;
+            background: #fff;
+            box-shadow: 0 0 0 3px rgba(62, 175, 124, .12);
+        }
+
+        .author_reg .field.error .ipt_wrap { border-color: #f56c6c; background: #fff }
+
+        .author_reg .fhint {
+            font-size: 12px;
+            color: #99a59e;
+            line-height: 1;
+            margin-top: 8px;
+        }
+
+        .author_reg .field.error .fhint { color: #d9544f }
+
+        .author_reg .field.ok .fhint { color: #2c8a61 }
+
+        /* 方向选择 */
+        .author_reg .dir_box { display: flex; position: relative }
+
+        .author_reg .dir_box input[type="radio"] {
+            position: absolute;
+            opacity: 0;
+            width: 0;
+            height: 0;
+            pointer-events: none;
+        }
+
+        .author_reg .dir_card {
+            flex: 1;
+            margin-right: 14px;
+            padding: 14px 16px;
+            box-sizing: border-box;
+            border: 1px solid #dfe9e4;
+            border-radius: 10px;
+            background: #fbfdfc;
+            cursor: pointer;
+            transition: all .2s;
+        }
+
+        .author_reg .dir_card:last-child { margin-right: 0 }
+
+        .author_reg .dir_card .dt {
+            display: block;
+            font-size: 14px;
+            color: #333;
+            font-weight: 600;
+            line-height: 1;
+        }
+
+        .author_reg .dir_card .dd {
+            display: block;
+            font-size: 12px;
+            color: #99a59e;
+            margin-top: 8px;
+            line-height: 1.5;
+        }
+
+        .author_reg .dir_box input[type="radio"]:checked + .dir_card {
+            border-color: #3eaf7c;
+            background: #f2faf6;
+            box-shadow: 0 0 0 3px rgba(62, 175, 124, .1);
+        }
+
+        .author_reg .dir_box input[type="radio"]:checked + .dir_card .dt { color: #2c8a61 }
+
+        .author_reg .dir_box input[type="radio"]:focus-visible + .dir_card {
+            border-color: #3eaf7c;
+            box-shadow: 0 0 0 3px rgba(62, 175, 124, .18);
+        }
+
+        .author_reg .field.error .dir_card { border-color: #f56c6c }
+
+        .author_reg .btn_submit {
+            display: block;
+            width: 100%;
+            height: 46px;
+            line-height: 44px;
+            margin-top: 26px;
+            box-sizing: border-box;
+            border: 1px solid #3eaf7c;
+            border-radius: 23px;
+            background: #3eaf7c;
+            color: #fff;
+            font-size: 15px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all .2s;
+        }
+
+        .author_reg .btn_submit:hover { background: #2c8a61; border-color: #2c8a61 }
+
+        .author_reg .btn_submit:disabled {
+            background: #c8ead9;
+            border-color: #c8ead9;
+            color: #fff;
+            cursor: not-allowed;
+        }
+
+        .author_reg .reg_foot {
+            margin-top: 18px;
+            font-size: 12px;
+            color: #99a59e;
+            text-align: center;
+        }
+
+        .author_reg .reg_foot a { color: #2c8a61; text-decoration: none }
+
+        .author_reg .reg_foot a:hover { text-decoration: underline }
+
+        @media screen and (max-width: 900px) {
+            .author_reg { padding: 20px 12px 40px }
+
+            .author_reg .reg_card { display: block }
+
+            .author_reg .reg_side { width: auto; padding: 28px 22px }
+
+            .author_reg .side_title { font-size: 20px; margin-top: 18px }
+
+            .author_reg .side_steps { display: none }
+
+            .author_reg .reg_main { padding: 28px 22px }
+
+            .author_reg .dir_box { display: block }
+
+            .author_reg .dir_card { margin: 0 0 12px }
         }
     </style>
-    <script src="/javascript/ycUtils.js" type="text/javascript"></script>
 </head>
-<body style="background-color: #444;">
-<div style="width: 800px; margin-left: auto; margin-right: auto; margin-top: 150px;">
-    <form method="post" action="/author/register.html" id="form1" onsubmit="return $(this).form(&quot;validate&quot;);">
-        <div id="main">
-            <table width="100%" border="0" cellpadding="8" cellspacing="0" class="tableBasic" style="line-height:40px;">
-                <tr>
-                    <td colspan="3" style="text-align: left;">
-                        <div style="padding-left: 15px; height: 40px; line-height: 40px;">
-                            我是网络小说写手，我要注册为小说精品屋签约作者：</div>
-                    </td>
-                </tr>
-                <tr><td align="right">邀请码：</td><td><input name="inviteCode" th:value="${author.inviteCode}" type="text" maxlength="12" id="TxtGetCode" class="easyui-validatebox inpMain" data-options="required:true" /></td>
-                    <td>
-                        <span class="notes"> *</span> 小说精品屋分配给作者的邀请码
-                    </td>
-                </tr>
-                <tr>
-                    <td align="right">
-                        作者笔名：
-                    </td>
-                    <td>
-                        <input name="penName" th:value="${author.penName}" type="text" maxlength="8" id="TxtNiceName" class="easyui-validatebox inpMain" data-options="required:true" validType="checkPenName" />
+<body class="author_reg">
 
-                    </td>
-                    <td>
-                        <span class="notes"> *</span> 长度为2到8位的中英文
-                    </td>
-                </tr>
-                <tr>
-                    <td align="right">
-                        手机号码：
-                    </td>
-                    <td>
-                        <input name="telPhone" th:value="${author.telPhone}" type="text" id="TxtMobile" class="easyui-validatebox inpMain" data-options="required:true" validType="chinaMobile" />
-                    </td>
-                    <td>
-                        <span class="notes"> *</span> 小说精品屋的编辑会通过这个号码与您联系
-                    </td>
-                </tr>
-                <tr>
-                    <td align="right">
-                        QQ或微信：
-                    </td>
-                    <td>
-                        <input name="chatAccount" th:value="${author.chatAccount}" type="text" id="TxtQQ" class="easyui-validatebox inpMain" data-options="required:true" />
-                    </td>
-                    <td>
-                        <span class="notes"> *</span> 小说精品屋的编辑会通过这个号码与您联系
-                    </td>
-                </tr>
-                <tr>
-                    <td align="right">
-                        电子邮箱：
-                    </td>
-                    <td>
-                        <input name="email" th:value="${author.email}" type="text" id="TxtEmail" class="easyui-validatebox inpMain w300" data-options="required:true" validType="email" />
-                    </td>
-                    <td>
-                        <span class="notes"> *</span> 长度为2到15位的中英文，数字
-                    </td>
-                </tr>
-                <tr>
-                    <td align="right">
-                        男女主角：
-                    </td>
-                    <td>
-                        <div>
-                            <ul class="ipage">
-                                <input type="hidden" name="workDirection" id="HidSexclass" /><!-- th:attr="class=${author.workDirection} == '0'? 'ahover':''"-->
-                                <a href="javascript:void(0);" val="0">男性主角选男频</a>
-                                <a href="javascript:void(0);" val="1">
-                                女性主角选女频</a>
-                                <div class="clear">
-                                </div>
-                            </ul>
-                        </div>
-                    </td>
-                    <td>
-                        <span class="notes"> *</span> 请选择作品方向
-                    </td>
-                </tr>
-            </table>
-        </div>
-        <table width="100%" border="0" cellpadding="8" cellspacing="0" class="tableBasic">
-            <tr>
-                <td>
-                    <div style="padding-left: 110px; margin-top: 10px; margin-bottom: 5px;">
-
-                        <input type="submit" name="btnSubmit" value="立即开始您的作者生涯" id="btnSubmit" class="btnGray" />
-                    </div>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span id="LabErr" th:text="${LabErr}"></span>
-
-                </td>
-            </tr>
-        </table>
-        <input type="hidden" name="HidUId" id="HidUId" value="1095" />
-    </form>
+<div class="reg_topbar">
+    <a class="reg_back" href="/">← 返回书城首页</a>
+    <span class="reg_brand" th:text="${application.website.name}+'作家中心'">小说精品屋作家中心</span>
 </div>
-<script language="javascript" type="text/javascript">
 
+<div class="reg_card">
+    <div class="reg_side">
+        <div class="side_logo">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8"
+                 stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 7.5C10.5 6 8 5.4 4.5 5.7v12C8 17.5 10.5 18 12 19.5M12 7.5c1.5-1.5 4-2.1 7.5-1.8v12c-3.5-.2-6 .3-7.5 1.8"/>
+            </svg>
+            <span>成为签约作者</span>
+        </div>
+        <h2 class="side_title">让每一个好故事<br/>都被读者看见</h2>
+        <p class="side_desc">提交真实资料，编辑审核通过后即可开通作家后台，在线创建作品、连载更新、查看稿费收入。</p>
+
+        <ul class="side_list">
+            <li>
+                <span class="ico">
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8"
+                         stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M20 6L9 17l-5-5"/>
+                    </svg>
+                </span>
+                <span>专属作家后台，发布章节、管理作品一站完成</span>
+            </li>
+            <li>
+                <span class="ico">
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8"
+                         stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M12 1v22M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/>
+                    </svg>
+                </span>
+                <span>订阅稿费按月结算，收入明细随时查询</span>
+            </li>
+            <li>
+                <span class="ico">
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8"
+                         stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M12 20h9M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4z"/>
+                    </svg>
+                </span>
+                <span>编辑一对一沟通，作品方向与签约指导</span>
+            </li>
+            <li>
+                <span class="ico">
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8"
+                         stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M12 2l2.4 5.4L20 9l-4.4 3.3L16.6 18 12 15.2 7.4 18l1-5.7L4 9l5.6-1.6z"/>
+                    </svg>
+                </span>
+                <span>作品推荐位与书单曝光，帮助新书冷启动</span>
+            </li>
+        </ul>
+
+        <div class="side_steps">
+            <h4>注册流程</h4>
+            <div class="stp"><span class="num_">1</span>填写邀请码与联系资料</div>
+            <div class="line"></div>
+            <div class="stp"><span class="num_">2</span>编辑审核笔名与作品方向</div>
+            <div class="line"></div>
+            <div class="stp"><span class="num_">3</span>开通后台，开始创作连载</div>
+        </div>
+    </div>
+
+    <div class="reg_main">
+        <h3 class="reg_title">申请作者资料</h3>
+        <p class="reg_sub">带 <span class="req">*</span> 的项为必填，请确保联系方式真实有效</p>
+
+        <div class="reg_err" th:if="${!#strings.isEmpty(LabErr)}" th:text="${LabErr}"></div>
+
+        <form method="post" action="/author/register.html" id="regForm">
+            <div class="field" id="fInvite">
+                <label class="fl" for="inviteCode">邀请码 <b>*</b></label>
+                <div class="ipt_wrap">
+                    <svg class="picon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+                         stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M15 7a2 2 0 012 2v2a2 2 0 01-2 2H9a2 2 0 01-2 2v2H5v-2.5A4.5 4.5 0 019.5 7z"/>
+                    </svg>
+                    <input class="ipt" type="text" name="inviteCode" id="inviteCode" maxlength="12" autocomplete="off"
+                           th:value="${author?.inviteCode}" placeholder="小说精品屋分配给作者的邀请码"/>
+                </div>
+                <p class="fhint">邀请码由平台分配，请填写 12 位以内的编码</p>
+            </div>
+
+            <div class="field" id="fPenName">
+                <label class="fl" for="penName">作者笔名 <b>*</b></label>
+                <div class="ipt_wrap">
+                    <svg class="picon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+                         stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/>
+                        <circle cx="12" cy="7" r="4"/>
+                    </svg>
+                    <input class="ipt" type="text" name="penName" id="penName" maxlength="8" autocomplete="off"
+                           th:value="${author?.penName}" placeholder="2-8位中文或英文笔名"/>
+                </div>
+                <p class="fhint" id="penHint">笔名将展示在作品页面，提交时会校验是否已被占用</p>
+            </div>
+
+            <div class="field" id="fTel">
+                <label class="fl" for="telPhone">手机号码 <b>*</b></label>
+                <div class="ipt_wrap">
+                    <svg class="picon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+                         stroke-linecap="round" stroke-linejoin="round">
+                        <rect x="7" y="2" width="10" height="20" rx="2"/>
+                        <path d="M11 18h2"/>
+                    </svg>
+                    <input class="ipt" type="text" name="telPhone" id="telPhone" maxlength="11" autocomplete="off"
+                           th:value="${author?.telPhone}" placeholder="便于编辑与您联系"/>
+                </div>
+                <p class="fhint">请填写 11 位中国大陆手机号</p>
+            </div>
+
+            <div class="field" id="fChat">
+                <label class="fl" for="chatAccount">QQ 或微信 <b>*</b></label>
+                <div class="ipt_wrap">
+                    <svg class="picon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+                         stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 11.5a8.38 8.38 0 01-9 8.5L3 21l1-4.5a8.5 8.5 0 112-5z"/>
+                    </svg>
+                    <input class="ipt" type="text" name="chatAccount" id="chatAccount" maxlength="20"
+                           autocomplete="off" th:value="${author?.chatAccount}" placeholder="请填写QQ号或微信号"/>
+                </div>
+                <p class="fhint">编辑会通过该号码与您沟通签约事宜</p>
+            </div>
+
+            <div class="field" id="fEmail">
+                <label class="fl" for="email">电子邮箱 <b>*</b></label>
+                <div class="ipt_wrap">
+                    <svg class="picon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+                         stroke-linecap="round" stroke-linejoin="round">
+                        <rect x="3" y="5" width="18" height="14" rx="2"/>
+                        <path d="M3 7l9 6 9-6"/>
+                    </svg>
+                    <input class="ipt" type="text" name="email" id="email" maxlength="50" autocomplete="off"
+                           th:value="${author?.email}" placeholder="example@mail.com"/>
+                </div>
+                <p class="fhint">用于接收审核结果与平台通知</p>
+            </div>
+
+            <div class="field" id="fDirection">
+                <label class="fl">作品方向 <b>*</b></label>
+                <div class="dir_box">
+                    <input type="radio" name="workDirection" id="dirMale" value="0"
+                           th:checked="${author != null and author.workDirection != null and author.workDirection == 0}"/>
+                    <label class="dir_card" for="dirMale">
+                        <span class="dt">男频</span>
+                        <span class="dd">男主角视角，玄幻 / 都市 / 历史等</span>
+                    </label>
+
+                    <input type="radio" name="workDirection" id="dirFemale" value="1"
+                           th:checked="${author != null and author.workDirection != null and author.workDirection == 1}"/>
+                    <label class="dir_card" for="dirFemale">
+                        <span class="dt">女频</span>
+                        <span class="dd">女主角视角，言情 / 总裁 / 古言等</span>
+                    </label>
+                </div>
+                <p class="fhint">请选择主要创作的作品方向</p>
+            </div>
+
+            <button type="submit" class="btn_submit" id="btnSubmit">立即开始您的作者生涯</button>
+
+            <p class="reg_foot">
+                还不是书城会员？<a href="/user/register.html">先注册会员</a>
+                &nbsp;|&nbsp; 已有账号？<a href="/user/login.html?originUrl=/author/register.html">去登录</a>
+            </p>
+        </form>
+    </div>
+</div>
+
+</body>
+<script src="/javascript/jquery-1.8.0.min.js" type="text/javascript"></script>
+<script type="text/javascript">
     $(function () {
-        $(".ipage a").click(function () {
-            $(".ipage a").each(function () {
-                $(this).removeClass("ahover");
-            });
-            $(this).addClass("ahover");
-            $("#HidSexclass").val($(this).attr("val"));
-            $("#btnSubmit").removeAttr("disabled");
-            $("#btnSubmit").removeClass("btnGray");
-            $("#btnSubmit").addClass("btn");
+        var $form = $('#regForm');
+        var $btn = $('#btnSubmit');
 
-        });
+        function setError(fieldId, msg) {
+            var $field = $('#' + fieldId);
+            $field.removeClass('ok').addClass('error');
+            $field.find('.fhint').text(msg);
+            return false;
+        }
 
-        var sexClass = $("#HidSexclass").val();
-        if (sexClass == 1 || sexClass == 2) {
-            $(".ipage a").each(function () {
-                $(this).removeClass("ahover");
-                if (sexClass == $(this).attr("val")) {
-                    $(this).addClass("ahover");
+        function setOk(fieldId, msg) {
+            var $field = $('#' + fieldId);
+            $field.removeClass('error').addClass('ok');
+            $field.find('.fhint').text(msg);
+            return true;
+        }
+
+        function resetHint(fieldId, msg) {
+            var $field = $('#' + fieldId);
+            $field.removeClass('error ok');
+            $field.find('.fhint').text(msg);
+        }
+
+        //校验笔名格式
+        function checkPenNameFormat() {
+            var penName = $.trim($('#penName').val());
+            if (!penName) {
+                return setError('fPenName', '请填写作者笔名');
+            }
+            if (!/^[\u4e00-\u9fa5a-zA-Z]{2,8}$/.test(penName)) {
+                return setError('fPenName', '笔名需为2到8位的中文或英文字母');
+            }
+            return setOk('fPenName', '格式正确，提交时校验是否重复');
+        }
+
+        //异步校验笔名是否被占用
+        function checkPenNameRepeat(callback) {
+            var penName = $.trim($('#penName').val());
+            $btn.prop('disabled', true).text('正在校验笔名…');
+            $.ajax({
+                type: 'get',
+                url: '/author/checkPenName',
+                data: {penName: penName},
+                dataType: 'json',
+                cache: false,
+                success: function (result) {
+                    $btn.prop('disabled', false).text('立即开始您的作者生涯');
+                    if (result && result.data) {
+                        setError('fPenName', '笔名已被使用，请更换一个');
+                        callback(false);
+                    } else {
+                        setOk('fPenName', '笔名可以使用');
+                        callback(true);
+                    }
+                },
+                error: function () {
+                    $btn.prop('disabled', false).text('立即开始您的作者生涯');
+                    setError('fPenName', '笔名校验失败，请稍后重试');
+                    callback(false);
                 }
             });
-            $("#btnSubmit").removeClass("btnGray");
-            $("#btnSubmit").addClass("btn");
-        }
-        else {
-            $("#btnSubmit").attr("disabled", "disabled");
         }
+
+        $('#penName').on('blur', function () {
+            if (checkPenNameFormat()) {
+                checkPenNameRepeat(function () {
+                });
+            }
+        }).on('focus', function () {
+            resetHint('fPenName', '笔名将展示在作品页面，提交时会校验是否已被占用');
+        });
+
+        $form.on('submit', function () {
+            var inviteCode = $.trim($('#inviteCode').val());
+            var telPhone = $.trim($('#telPhone').val());
+            var chatAccount = $.trim($('#chatAccount').val());
+            var email = $.trim($('#email').val());
+            var penName = $.trim($('#penName').val());
+
+            if (!inviteCode) {
+                return setError('fInvite', '请填写小说精品屋分配的邀请码');
+            }
+            if (!penName || !/^[\u4e00-\u9fa5a-zA-Z]{2,8}$/.test(penName)) {
+                return setError('fPenName', '笔名需为2到8位的中文或英文字母');
+            }
+            if (!/^1[3-9]\d{9}$/.test(telPhone)) {
+                return setError('fTel', '请填写正确的11位手机号码');
+            }
+            if (!chatAccount) {
+                return setError('fChat', '请填写QQ号或微信号');
+            }
+            if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+                return setError('fEmail', '请填写正确的电子邮箱');
+            }
+            if (!$('input[name="workDirection"]:checked').val()) {
+                return setError('fDirection', '请选择作品方向');
+            }
+
+            //格式通过后，最后再校验笔名重复，避免无效请求
+            checkPenNameRepeat(function (usable) {
+                if (usable) {
+                    //笔名可用，走原生提交，避免再次触发校验
+                    $form[0].submit();
+                } else {
+                    $btn.prop('disabled', false).text('立即开始您的作者生涯');
+                }
+            });
+            return false;
+        });
+
+        //服务端返回错误后，重新聚焦输入框即清除错误态
+        $('.ipt').on('focus', function () {
+            $(this).closest('.field').removeClass('error ok');
+        });
     });
-
 </script>
-</body>
 </html>
-
diff --git a/templates/green/html/book/book_comment.html b/templates/green/html/book/book_comment.html
index 9aad11f..3aaf484 100644
--- a/templates/green/html/book/book_comment.html
+++ b/templates/green/html/book/book_comment.html
@@ -166,7 +166,7 @@
 
                                     //首次不执行
                                     if (!first) {
-                                        searchComments(obj.curr, obj.limit);
+                                        loadCommentList(obj.curr, obj.limit);
                                     } else {
 
                                     }
diff --git a/templates/green/html/book/book_detail.html b/templates/green/html/book/book_detail.html
index 8028f32..c711623 100644
--- a/templates/green/html/book/book_detail.html
+++ b/templates/green/html/book/book_detail.html
@@ -109,7 +109,7 @@
                                                                        style="display: none;">见习</span></div>
                                 <ul class="pl_bar fr">
                                     <li class="name"><span
-                                            th:text="${#strings.substring(comment.createUserName,0,4)}+'****'+${#strings.substring(comment.createUserName,#strings.length(comment.createUserName)-3,#strings.length(comment.createUserName))}"></span><span
+                                            th:text="${T(com.java2nb.novel.core.utils.NameMaskUtil).maskIfNeeded(comment.createUserName)}"></span><span
                                             style="padding-left: 10px" class="other" th:if="${comment.location}"
                                             th:text="${comment.location} + '读者'"></span></span></li>
                                     <li class="dec" th:utext="${comment.commentContent}"></li>
diff --git a/templates/green/html/mobile/book/book_content.html b/templates/green/html/mobile/book/book_content.html
index 46fbe77..f5f033a 100644
--- a/templates/green/html/mobile/book/book_content.html
+++ b/templates/green/html/mobile/book/book_content.html
@@ -29,7 +29,6 @@
     </script>
     <script th:fragment="js" src="/mobile/js/jquery-1.9.1.js"></script>
     <script th:fragment="js" src="/mobile/layui/layui.all.js"></script>
-    </div>
 
     <style type="text/css">
         .line-limit-length {
@@ -42,39 +41,101 @@
 
         }
 
-        .indexP p a {
-            color: #4c6978;
+        /* 上一章/目录/下一章导航 */
+        .read-nav {
+            display: -webkit-flex;
+            display: flex;
+            padding: 10px 8px;
         }
 
+        .read-nav a {
+            -webkit-flex: 1;
+            flex: 1;
+            height: 36px;
+            line-height: 36px;
+            margin: 0 4px;
+            text-align: center;
+            background: #f2f6f4;
+            color: #5c6b64;
+            font-size: 14px;
+            border-radius: 18px;
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        .read-nav a:active {
+            background: rgba(62, 175, 124, .15);
+            color: #2e8b62;
+        }
+
+        /* 章节标题 */
+        .chapter-title {
+            padding: 6px 18px 14px;
+            border-bottom: 1px solid #f0f5f2;
+            margin-bottom: 6px;
+        }
+
+        .chapter-title h1 {
+            font-size: 20px;
+            font-weight: 600;
+            color: #1f2d26;
+            line-height: 28px;
+        }
+
+        .chapter-title .ct-sub {
+            display: block;
+            margin-top: 4px;
+            font-size: 12px;
+            color: #98a8a1;
+        }
+
+        /* 正文 */
         .Readarea {
             font-size: 18px;
-            line-height: 35px;
-            padding: 10px;
+            line-height: 2em;
             color: #333;
+            padding: 0 0 16px;
         }
 
-        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;
-        }
-
-        .Readpage {
-            font-size: 14px;
-            padding: 0;
-            background: #d4eaf2;
-            height: 40px;
-            line-height: 40px;
+        /* VIP 购买块 */
+        .vip-panel {
+            margin: 24px 12px;
+            padding: 26px 16px;
+            background: #fbf8ef;
+            border: 1px solid #f0e2c8;
+            border-radius: 10px;
             text-align: center;
+            font-size: 14px;
+            color: #5c6b64;
+        }
+
+        .vip-panel .vip-title {
+            font-size: 16px;
+            font-weight: 600;
+            color: #8a6d1a;
+            margin-bottom: 8px;
+        }
+
+        .vip-panel .vip-price {
+            color: #e05c6e;
+        }
+
+        .btn-buy {
+            display: inline-block;
+            margin-top: 16px;
+            min-width: 120px;
+            height: 38px;
+            line-height: 38px;
+            text-align: center;
+            background: #3eaf7c;
+            color: #fff;
+            font-size: 14px;
+            border-radius: 19px;
+            box-shadow: 0 4px 10px rgba(62, 175, 124, .25);
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        .btn-buy:active {
+            opacity: .85;
         }
 
         div, p {
@@ -82,60 +143,12 @@
             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;
         }
 
         * {
             margin: 0;
             padding: 0;
-            /* background-attachment: fixed; */
-        }
-
-        user agent stylesheet
-        p {
-            display: block;
-            -webkit-margin-before: 1em;
-            -webkit-margin-after: 1em;
-            -webkit-margin-start: 0px;
-            -webkit-margin-end: 0px;
-        }
-
-        .huyanon {
-            border: 1px solid #64c878;
-            box-shadow: 0 1px 2px #b9ecc4 inset, 0 -1px 0 #6c9f76 inset, 0 -2px 3px #b9ecc4 inset;
-            background: -webkit-linear-gradient(top, #90dfa2, #84d494);
-            background: -moz-linear-gradient(top, #90dfa2, #84d494);
-            background: linear-gradient(top, #90dfa2, #84d494);
-        }
-
-        .Readpage a {
-            font-size: 16px;
-            padding: 2px 2px;
-            line-height: 35px;
-        }
-
-        .lightoff, .huyanoff, .sizebgon {
-            border: 1px solid #333;
-            box-shadow: 0 1px 2px #8b8b8b inset, 0 -1px 0 #3d3d3d inset, 0 -2px 3px #8b8b8b inset;
-            background: -webkit-linear-gradient(top, #656565, #4c4c4c);
-            background: -moz-linear-gradient(top, #656565, #4a4a4a);
-            background: linear-gradient(top, #656565, #4a4a4a);
-        }
-
-        .button {
-            width: 40px;
-            line-height: 38px;
-            text-align: center;
-            font-weight: bold;
-            color: #fff;
-            text-shadow: 1px 1px 1px #333;
-            border-radius: 5px;
-            margin: 3px 0px 0px 0;
-            position: relative;
-            overflow: hidden;
         }
 
         a {
@@ -145,20 +158,228 @@
             cursor: pointer;
         }
 
-        .lighton {
-            border: 1px solid #d2a000;
-            box-shadow: 0 1px 2px #fedd71 inset, 0 -1px 0 #a38b39 inset, 0 -2px 3px #fedd71 inset;
-            background: -webkit-linear-gradient(top, #fece34, #d8a605);
-            background: -moz-linear-gradient(top, #fece34, #d8a605);
-            background: linear-gradient(top, #fece34, #d8a605);
+        /* 禁止左右滑动：气泡等元素允许挂在正文外，但页面整体横向裁剪 */
+        html, body {
+            overflow-x: hidden;
         }
 
-        .screen_toolbar {
-            position: fixed;
-            width: 100%;
-            left: 0px;
-            bottom: 100px;
+        /* ---------- 段落评论 ---------- */
+        /* 正文段落左右留白由段落列表自己控制，右侧留给气泡 */
+        #paragraphList {
+            padding: 0 18px;
+        }
+
+        .para-item {
+            position: relative;
+            padding: 2px 0 6px;
+        }
+
+        .para-text {
+            text-indent: 2em;
+        }
+
+        /* 段落入口：纯气泡+数字，绝对定位在段落底部最右侧（挂进右侧留白区） */
+        .para-comment-btn {
+            position: absolute;
+            right: -24px;
+            bottom: 6px;
+            display: inline-flex;
+            align-items: center;
+            font-size: 13px;
+            line-height: 22px;
+            color: #c9c9c9;
+            background: transparent;
+            border: none;
+            padding: 0 4px;
+            cursor: pointer;
+        }
+
+        .para-comment-btn .layui-icon {
+            font-size: 26px;
+        }
+
+        /* 评论数嵌在气泡图标内部居中 */
+        .para-comment-btn .para-comment-num {
+            position: absolute;
+            top: 46%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-style: normal;
+            font-weight: bold;
+            font-size: 11px;
+            line-height: 1;
+        }
+
+        .para-comment-btn.has {
+            color: #3eaf7c;
+        }
+
+        .pc-panel {
+            padding: 10px;
+            height: 100%;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .pc-list {
+            flex: 1;
+            overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
+        }
+
+        .pc-empty {
             text-align: center;
+            color: #999;
+            font-size: 14px;
+            padding: 30px 0;
+        }
+
+        .pc-item {
+            padding: 10px 2px;
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .pc-item .pc-user {
+            font-size: 13px;
+            color: #999;
+            margin-bottom: 4px;
+        }
+
+        .pc-item .pc-user .pc-name {
+            color: #3eaf7c;
+            margin-right: 8px;
+        }
+
+        .pc-item .pc-user .pc-loc {
+            color: #bbb;
+            margin-right: 8px;
+            font-size: 12px;
+        }
+
+        .pc-item .pc-content {
+            font-size: 15px;
+            color: #333;
+            line-height: 22px;
+            word-break: break-all;
+        }
+
+        .pc-item .pc-op-bar {
+            margin-top: 4px;
+            text-align: right;
+            font-size: 12px;
+        }
+
+        .pc-item .pc-reply-btn {
+            color: #3eaf7c;
+            cursor: pointer;
+        }
+
+        .pc-item .pc-reply-num {
+            float: left;
+            color: #999;
+            line-height: 24px;
+        }
+
+        /* 回复列表（嵌在顶层评论下） */
+        .pc-reply-list {
+            margin-top: 6px;
+            background-color: #fafafa;
+            border-radius: 6px;
+            padding: 2px 10px;
+        }
+
+        .pc-reply-item {
+            padding: 8px 0;
+            border-bottom: 1px solid #f0f0f0;
+            font-size: 14px;
+        }
+
+        .pc-reply-item:last-child {
+            border-bottom: none;
+        }
+
+        .pc-reply-item .pc-r-user {
+            font-size: 12px;
+            color: #999;
+            margin-bottom: 3px;
+        }
+
+        .pc-reply-item .pc-r-user .pc-name {
+            color: #3eaf7c;
+            margin-right: 6px;
+        }
+
+        .pc-reply-item .pc-r-user .pc-to {
+            color: #666;
+            margin-right: 6px;
+        }
+
+        .pc-reply-item .pc-r-content {
+            color: #333;
+            line-height: 20px;
+            word-break: break-all;
+        }
+
+        .pc-reply-item .pc-op-bar {
+            text-align: right;
+            font-size: 12px;
+        }
+
+        .pc-reply-item .pc-reply-btn {
+            color: #3eaf7c;
+            cursor: pointer;
+        }
+
+        /* 回复目标提示条 */
+        #pcReplyHint {
+            display: none;
+            background-color: rgba(62, 175, 124, 0.08);
+            border-radius: 4px;
+            padding: 5px 8px;
+            margin-bottom: 6px;
+            font-size: 12px;
+            color: #3eaf7c;
+        }
+
+        #pcReplyHint .pc-cancel-reply {
+            float: right;
+            color: #999;
+            cursor: pointer;
+        }
+
+        .pc-input-box {
+            border-top: 1px solid #eee;
+            padding-top: 8px;
+        }
+
+        .pc-textarea {
+            width: 100%;
+            height: 60px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            padding: 6px 8px;
+            font-size: 14px;
+            box-sizing: border-box;
+            resize: none;
+            outline: none;
+        }
+
+        .pc-input-bar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 6px;
+        }
+
+        .pc-input-bar #pcNum {
+            font-size: 12px;
+            color: #999;
+        }
+
+        .pc-input-bar .layui-btn {
+            background-color: #3eaf7c !important;
+            border-color: #3eaf7c !important;
         }
 
 
@@ -182,56 +403,18 @@
         var token = localStorage.getItem("token");
     </script>
 
-    <div style="height: 50px;line-height: 50px;text-align: center"
-         class="layui-header header header-doc  layui-bg-cyan">
-
-        <div style="width:10%;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>
-        <a style="color: #ffffff;" th:href="'/book/'+ ${book.id} + '.html'"><b
-                style="padding-left: 5%;float: left;width: 69%" class="line-limit-length"
-                th:utext="${bookIndex.indexName}+' '+${book.bookName}"></b></a>
-        <div style="width:10%;float: right;margin-right: 10px"><a href="/">
-            <i style="font-size: 20px;color: #fff;" class="layui-icon">&#xe68e;</i>
-        </a>
-        </div>
+    <div th:replace="mobile/common/header :: pageHeader(${bookIndex.indexName} + ' ' + ${book.bookName}, '/book/'+${book.id}+'.html')"></div>
+    
+    
+    <div class="read-nav">
+        <a th:href="'javascript:enterPreIndexPage(\''+${book.id}+'\',\''+${preBookIndexId}+'\');'">上一章</a>
+        <a th:href="'/book/indexList-'+${book.id}+'.html'">目录</a>
+        <a th:href="'javascript:enterNextIndexPage(\''+${book.id}+'\',\''+${nextBookIndexId}+'\');'">下一章</a>
     </div>
-
-
-    <p class="Readpage" style="background:#FFFFFF;padding:2px;">
-        <a id="lightdiv" class="button lightoff" onclick="nr_setbg('light')">关灯</a>
-        <a id="huyandiv" class="button huyanon" onclick="nr_setbg('huyan')">护眼</a>&nbsp;&nbsp;&nbsp;&nbsp;
-        字体：<a id="fontbig" class="sizebg" onclick="nr_setbg('big')">大</a> <a id="fontmiddle" class="button sizebgon"
-                                                                             onclick="nr_setbg('middle')">中</a> <a
-            id="fontsmall" class="sizebg" onclick="nr_setbg('small')">小</a>
-        <a href="javascript:speakChapter()" style="margin-left: 10px">
-            <svg t="1707099868768" class="icon" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg"
-                 p-id="1783" id="mx_n_1707099868769" width="22" height="22">
-                <path d="M393.707231 292.571429L343.13933 487.619048l46.955908 234.779541-97.523809-45.149912-66.82187-108.359788-21.671958-86.687831 66.82187-113.777778z"
-                      fill="#3eaf7c" p-id="1784"></path>
-                <path d="M451.499118 509.291005a104.747795 61.40388 90 1 0 122.80776 0 104.747795 61.40388 90 1 0-122.80776 0Z"
-                      fill="#3eaf7c" p-id="1785"></path>
-                <path d="M426.215168 781.996473c-3.611993 0-7.223986-1.805996-10.835979-3.611993l-117.389771-86.687831c-36.119929-23.477954-65.015873-57.791887-83.075838-99.329806-10.835979-25.283951-16.253968-52.373898-16.253968-81.269841s5.417989-55.985891 16.253968-81.269842c16.253968-41.537919 45.149912-74.045855 83.075838-97.523809l110.165785-77.657848c9.029982-5.417989 19.865961-3.611993 25.28395 3.611993 5.417989 9.029982 3.611993 19.865961-3.611993 25.28395L319.661376 361.199295c-32.507937 19.865961-55.985891 48.761905-70.433863 81.269841-9.029982 21.671958-14.447972 45.149912-14.447972 68.627866 0 23.477954 3.611993 45.149912 12.641976 66.821869 14.447972 34.313933 37.925926 63.209877 68.627866 83.075838l117.38977 86.687831c7.223986 5.417989 9.029982 18.059965 3.611993 25.28395 0 5.417989-5.417989 9.029982-10.835978 9.029983z"
-                      fill="#3eaf7c" p-id="1786"></path>
-                <path d="M523.738977 830.758377c-108.359788 0-193.241623-140.867725-193.241623-317.855379S415.379189 193.241623 523.738977 193.241623c25.283951 0 50.567901 7.223986 74.045855 23.477954 9.029982 5.417989 10.835979 16.253968 5.41799 25.28395s-16.253968 10.835979-25.283951 5.41799c-18.059965-10.835979-34.313933-18.059965-54.179894-18.059965-84.881834 0-157.121693 130.031746-157.121693 281.73545S438.857143 794.638448 523.738977 794.638448s157.121693-130.031746 157.121693-281.73545c0-74.045855-16.253968-146.285714-46.955908-198.659612-5.417989-9.029982-1.805996-19.865961 7.223986-25.28395 9.029982-5.417989 19.865961-1.805996 25.28395 7.223986 32.507937 59.597884 50.567901 135.449735 50.567902 216.719576C718.786596 689.890653 633.904762 830.758377 523.738977 830.758377z"
-                      fill="#3eaf7c" p-id="1787"></path>
-                <path d="M523.738977 646.546737c-48.761905 0-86.687831-59.597884-86.687831-133.643739S474.977072 379.259259 523.738977 379.259259s86.687831 59.597884 86.687831 133.643739-37.925926 133.643739-86.687831 133.643739z m0-232.973545c-23.477954 0-50.567901 39.731922-50.567901 97.52381s27.089947 97.52381 50.567901 97.523809 50.567901-39.731922 50.567901-97.523809-27.089947-97.52381-50.567901-97.52381z"
-                      fill="#3eaf7c" p-id="1788"></path>
-                <path d="M523.738977 413.573192h-1.805996l-92.105821-10.835979c-9.029982-1.805996-16.253968-10.835979-16.253968-19.865961 1.805996-9.029982 10.835979-16.253968 19.865961-16.253968l92.105821 10.835979c9.029982 1.805996 16.253968 10.835979 16.253968 19.865961 0 9.029982-9.029982 16.253968-18.059965 16.253968zM372.035273 662.800705c-9.029982 0-16.253968-7.223986-18.059964-16.253968-1.805996-9.029982 5.417989-18.059965 16.253968-19.865961l153.5097-16.253968c9.029982-1.805996 18.059965 5.417989 19.865961 16.253968 1.805996 9.029982-5.417989 18.059965-16.253968 19.865961l-153.5097 16.253968h-1.805997z"
-                      fill="#3eaf7c" p-id="1789"></path>
-                <path d="M763.936508 364.811287c-5.417989 0-9.029982-1.805996-12.641975-5.417989-7.223986-7.223986-7.223986-18.059965 0-25.283951l25.28395-25.28395c7.223986-7.223986 18.059965-7.223986 25.283951 0s7.223986 18.059965 0 25.28395L776.578483 359.393298c-3.611993 3.611993-9.029982 5.417989-12.641975 5.417989zM771.160494 720.592593c-5.417989 0-9.029982-1.805996-12.641975-5.41799l-25.283951-25.28395c-7.223986-7.223986-7.223986-18.059965 0-25.283951s18.059965-7.223986 25.283951 0l25.28395 25.283951c7.223986 7.223986 7.223986 18.059965 0 25.28395-3.611993 3.611993-7.223986 5.417989-12.641975 5.41799zM819.922399 529.156966h-54.179895c-10.835979 0-18.059965-7.223986-18.059964-18.059964s7.223986-18.059965 18.059964-18.059965h54.179895c10.835979 0 18.059965 7.223986 18.059964 18.059965s-9.029982 18.059965-18.059964 18.059964z"
-                      fill="#3eaf7c" p-id="1790"></path>
-            </svg>
-        </a>
-
-    </p>
-    <div class="indexDiv" style="height: 42px;line-height: 42px;text-align:center;background: #f2f2f2">
-
-        <a style="color: #333" th:href="'javascript:enterPreIndexPage(\''+${book.id}+'\',\''+${preBookIndexId}+'\');'">上一章</a>
-        <a style="color: #333" th:href="'/book/indexList-'+${book.id}+'.html'">目录</a>
-        <a style="color: #333"
-           th:href="'javascript:enterNextIndexPage(\''+${book.id}+'\',\''+${nextBookIndexId}+'\');'">下一章</a>
+    
+    <div class="chapter-title">
+        <h1 th:utext="${bookIndex.indexName}"></h1>
+        <span class="ct-sub" th:utext="${book.bookName}"></span>
     </div>
     <!--<div id="screenInput" class="screen_toolbar" style="display: none">
         <div style="height: 5px" class="layui-col-xs2 layui-col-sm3 layui-col-md3 layui-col-lg3"></div>
@@ -254,26 +437,21 @@
     </form>-->
     <div th:replace="mobile/common/js :: js">
     </div>
-    <div id="chaptercontent" class="Readarea ReadAjax_content screen_container"
-         style="color: rgb(0, 0, 0); font-size: 20px;" th:if="${!needBuy}">
-        <p style="width:100%;text-alight:center; overflow: auto;-webkit-overflow-scrolling:touch;">
-            <span
-                    th:utext="${bookContent.content}"></span></p>
+    <div id="chaptercontent" class="Readarea ReadAjax_content screen_container" th:if="${!needBuy}">
+        <div id="contentRaw" style="display: none" th:utext="${bookContent.content}"></div>
+        <div id="paragraphList"></div>
     </div>
-    <div class="Readarea ReadAjax_content screen_container"
-         style="color: rgb(0, 0, 0); font-size: 20px;background-color: #fff" th:if="${needBuy}">
-        <h5>此章为VIP章节，需要订阅后才能继续阅读</h5>
-        价格：<span style="color: red" th:text="${bookIndex.bookPrice}+'屋币(1元=100屋币)'"></span><br/>
-        <a href="javascript:buyBookIndex()" type="button" class="layui-btn layui-btn-sm layui-btn-radius">购买</a>
-
+    <div class="vip-panel" th:if="${needBuy}">
+        <div class="vip-title">此章为VIP章节，需要订阅后才能继续阅读</div>
+        价格：<span class="vip-price" th:text="${bookIndex.bookPrice}+'屋币(1元=100屋币)'"></span>
+        <br/>
+        <a href="javascript:buyBookIndex()" class="btn-buy">购买</a>
     </div>
-    <div class="indexDiv" style="height: 42px;line-height: 42px;text-align:center;background: #f2f2f2">
-
-        <a style="color: #333" th:href="'javascript:enterPreIndexPage(\''+${book.id}+'\',\''+${preBookIndexId}+'\');'">上一章</a>
-        <a style="color: #333" th:href="'/book/indexList-'+${book.id}+'.html'">目录</a>
-        <a style="color: #333"
-           th:href="'javascript:enterNextIndexPage(\''+${book.id}+'\',\''+${nextBookIndexId}+'\');'">下一章</a>
-
+    
+    <div class="read-nav">
+        <a th:href="'javascript:enterPreIndexPage(\''+${book.id}+'\',\''+${preBookIndexId}+'\');'">上一章</a>
+        <a th:href="'/book/indexList-'+${book.id}+'.html'">目录</a>
+        <a th:href="'javascript:enterNextIndexPage(\''+${book.id}+'\',\''+${nextBookIndexId}+'\');'">下一章</a>
     </div>
 
 
@@ -321,9 +499,6 @@
 
 </script>
 
-<script src="/mobile/js/read.js"></script>
-<script language="javascript">getset()</script>
-<script language="javascript">getset1()</script>
 <script language="javascript">
     var books = localStorage.getItem("historyBooks");
     var item = parseInt($("#bookIdHidden").val());
@@ -422,7 +597,7 @@
             speechSynthesis.resume();
         }
         speak({
-            'text': $('#chaptercontent').text(),
+            'text': getSpeakText(),
             'speechRate': 0.5,
             'pitch': 1,
             'lang': 'zh-CN'
@@ -475,6 +650,380 @@
         return speechUtterance;
     }
 
+    /**
+     * 朗读只取正文段落文本，排除段落评论入口等附加元素
+     */
+    function getSpeakText() {
+        var $paras = $('#paragraphList .para-text');
+        if ($paras.length > 0) {
+            return $paras.map(function () {
+                return $(this).text();
+            }).get().join('\n');
+        }
+        return $('#chaptercontent').text();
+    }
+
+
+    /************************************ 段落评论 ************************************/
+    // 接口：/book/listParagraphCommentCounts、/book/listParagraphComment、/book/addParagraphComment
+    // 段落序号 paragraphIdx 由前端拆分正文顺序确定，同一章节内容不变则稳定
+    var BPC_BOOK_ID = $("#bookIdHidden").val();
+    var BPC_INDEX_ID = $("#contentIdHidden").val();
+    var paraCountMap = {};
+
+    // 段落评论接口层（统一返回 Promise）
+    var ParagraphApi = {
+        // 拉取各段落评论数 {paragraphIdx: count}
+        loadCounts: function () {
+            var dfd = $.Deferred();
+            $.ajax({
+                type: "get",
+                url: "/book/listParagraphCommentCounts",
+                data: {'bookIndexId': BPC_INDEX_ID},
+                dataType: "json",
+                success: function (data) {
+                    dfd.resolve(data.code == 200 && data.data ? data.data : {});
+                },
+                error: function () {
+                    dfd.resolve({});
+                }
+            });
+            return dfd.promise();
+        },
+        // 拉取某段评论列表（服务端按时间倒序返回）
+        list: function (idx) {
+            var dfd = $.Deferred();
+            $.ajax({
+                type: "get",
+                url: "/book/listParagraphComment",
+                data: {'bookIndexId': BPC_INDEX_ID, 'paragraphIdx': idx},
+                dataType: "json",
+                success: function (data) {
+                    if (data.code == 200) {
+                        dfd.resolve(data.data || []);
+                    } else {
+                        layer.alert(data.msg);
+                        dfd.resolve([]);
+                    }
+                },
+                error: function () {
+                    layer.alert('网络异常');
+                    dfd.resolve([]);
+                }
+            });
+            return dfd.promise();
+        },
+        // 发表段落评论/回复（rootId>0表示回复），resolve 完整 RestResult
+        add: function (idx, content, rootId, replyUserName, replyUserId) {
+            var dfd = $.Deferred();
+            $.ajax({
+                type: "POST",
+                url: "/book/addParagraphComment",
+                data: {
+                    'bookId': BPC_BOOK_ID,
+                    'bookIndexId': BPC_INDEX_ID,
+                    'paragraphIdx': idx,
+                    'rootId': rootId || 0,
+                    'replyUserName': replyUserName || '',
+                    'replyUserId': replyUserId || '',
+                    'commentContent': content
+                },
+                dataType: "json",
+                success: function (data) {
+                    dfd.resolve(data);
+                },
+                error: function () {
+                    dfd.resolve({code: 500, msg: '网络异常，发表失败'});
+                }
+            });
+            return dfd.promise();
+        }
+    };
+
+    // 把整章HTML拆成段落（正文中的<br>、<p>、<div>均作为段落分隔，其余标签剥除）
+    function splitParagraphs() {
+        var rawHtml = $('#contentRaw').html() || '';
+        var text = rawHtml
+            .replace(/<\s*\/?\s*(p|div)[^>]*>/gi, '<br>')
+            .replace(/<\s*br\s*\/?>|<\/\s*p\s*>/gi, '\n')
+            .replace(/&nbsp;/gi, '\u00A0')
+            .replace(/<[^>]+>/g, '');
+        var lines = text.split(/\n+/);
+        var paras = [];
+        for (var i = 0; i < lines.length; i++) {
+            var line = $.trim(lines[i]);
+            if (line !== '') {
+                paras.push(line);
+            }
+        }
+        return paras;
+    }
+
+    // 渲染段落列表，每段尾部挂评论入口
+    function renderParagraphs() {
+        var paras = splitParagraphs();
+        var $list = $('#paragraphList').empty();
+        for (var i = 0; i < paras.length; i++) {
+            var $item = $('<div class="para-item"></div>');
+            // 用.text()插入，避免正文内容作为HTML二次解析
+            var $p = $('<p class="para-text"></p>').text(paras[i]).appendTo($item);
+            var $btn = $('<span class="para-comment-btn" data-idx="' + i + '"></span>');
+            // 纯气泡图标，数字角标由 refreshCountChips 填充；float:right 贴在段落最后一行右侧
+            $btn.append('<i class="layui-icon">&#xe606;</i>');
+            $btn.append('<em class="para-comment-num"></em>');
+            $p.append($btn);
+            $list.append($item);
+        }
+        refreshCountChips();
+    }
+
+    // 刷新每段气泡角标：有评论高亮并显示总数（含回复），无评论置灰无数字
+    function refreshCountChips() {
+        ParagraphApi.loadCounts().then(function (counts) {
+            paraCountMap = counts || {};
+            $('.para-comment-btn').each(function () {
+                var num = paraCountMap[String($(this).data('idx'))] || 0;
+                $(this).toggleClass('has', num > 0);
+                $(this).find('.para-comment-num').text(num > 0 ? num : '');
+            });
+        });
+    }
+
+    // 当前回复目标 {rootId, name}，null表示发表顶层评论
+    var pcReplyTarget = null;
+
+    // 打开底部评论面板
+    function openCommentPanel(idx) {
+        pcReplyTarget = null;
+        var panelHtml = '' +
+            '<div class="pc-panel">' +
+            '  <div class="pc-list" id="pcList"><div class="pc-empty">加载中...</div></div>' +
+            '  <div class="pc-input-box">' +
+            '    <div id="pcReplyHint"><span class="pc-cancel-reply">取消</span><span id="pcReplyHintText"></span></div>' +
+            '    <textarea id="pcContent" class="pc-textarea" maxlength="200" placeholder="说说你对这段话的看法~（至少5个字）"></textarea>' +
+            '    <div class="pc-input-bar">' +
+            '      <span id="pcNum">0/200</span>' +
+            '      <button type="button" id="pcSubmitBtn" class="layui-btn layui-btn-sm">发表</button>' +
+            '    </div>' +
+            '  </div>' +
+            '</div>';
+        layer.open({
+            type: 1,
+            title: '段落评论',
+            closeBtn: 1,
+            offset: 'b',
+            area: ['100%', '60%'],
+            content: panelHtml,
+            success: function (layero) {
+                lockBodyScroll();
+                loadCommentList(idx);
+                $('#pcContent').on('input propertychange', function () {
+                    $('#pcNum').html($(this).val().length + '/200');
+                });
+                $('#pcSubmitBtn').on('click', function () {
+                    submitParagraphComment(idx);
+                });
+                // 事件委派：点任意层级的“回复”设为回复目标
+                $('#pcList').on('click', '.pc-reply-btn', function () {
+                    pcReplyTarget = {
+                        rootId: $(this).data('root'),
+                        name: String($(this).data('name') || ''),
+                        uid: $(this).data('uid')
+                    };
+                    $('#pcReplyHintText').text('回复 @' + pcReplyTarget.name);
+                    $('#pcReplyHint').show();
+                    focusNoScroll($('#pcContent'));
+                });
+                $('#pcReplyHint .pc-cancel-reply').on('click', function () {
+                    clearReplyTarget();
+                });
+                kbFixCleanup = fixPanelKeyboard(layero);
+            },
+            end: function () {
+                // 面板销毁：解除页面锁定并移除键盘监听
+                unlockBodyScroll();
+                if (kbFixCleanup) {
+                    kbFixCleanup();
+                    kbFixCleanup = null;
+                }
+            }
+        });
+    }
+
+    // 面板打开期间锁定body滚动：部分浏览器(iOS/WebView)聚焦输入框会强行滚动document去"露出"输入框，
+    // 锁住后document不可滚，页面位置不会变；关闭时用记录的scrollTop还原
+    var pcBodyLockTop = 0;
+
+    function lockBodyScroll() {
+        pcBodyLockTop = $(window).scrollTop();
+        $('body').css({
+            position: 'fixed',
+            top: -pcBodyLockTop + 'px',
+            left: 0,
+            right: 0,
+            width: '100%',
+            overflow: 'hidden'
+        });
+    }
+
+    function unlockBodyScroll() {
+        $('body').css({position: '', top: '', left: '', right: '', width: '', overflow: ''});
+        $(window).scrollTop(pcBodyLockTop);
+    }
+
+    // 软键盘弹出时把评论面板整体上提，保证输入框不被键盘遮挡（页面已被锁定不会跟着动）
+    var kbFixCleanup = null;
+
+    function fixPanelKeyboard(layero) {
+        var vv = window.visualViewport;
+        if (!vv) {
+            return null;
+        }
+        var handler = function () {
+            // 键盘高度 = 布局视口高 - 可视化视口高 - 视口偏移
+            var kbH = Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
+            layero.css('transform', kbH > 80 ? 'translateY(-' + kbH + 'px)' : '');
+        };
+        vv.addEventListener('resize', handler);
+        vv.addEventListener('scroll', handler);
+        handler();
+        return function () {
+            vv.removeEventListener('resize', handler);
+            vv.removeEventListener('scroll', handler);
+            layero.css('transform', '');
+        };
+    }
+
+    function clearReplyTarget() {
+        pcReplyTarget = null;
+        $('#pcReplyHint').hide();
+    }
+
+    // 聚焦但不滚动：focus默认会把元素滚进视野，导致页面下移；旧内核不支持preventScroll时手动恢复滚动位置
+    function focusNoScroll($el) {
+        var st = $(window).scrollTop();
+        try {
+            $el[0].focus({preventScroll: true});
+        } catch (e) {
+            $el.focus();
+        }
+        if ($(window).scrollTop() !== st) {
+            $(window).scrollTop(st);
+        }
+    }
+
+    // 加载某段评论列表（后端返回两级树：顶层倒序，replies正序；createTime已格式化为相对时间）
+    function loadCommentList(idx) {
+        ParagraphApi.list(idx).then(function (list) {
+            var $box = $('#pcList').empty();
+            if (!list || list.length == 0) {
+                $box.append('<div class="pc-empty">还没有人评论这段话，抢占沙发~</div>');
+                return;
+            }
+            for (var i = 0; i < list.length; i++) {
+                $box.append(buildPcItem(list[i]));
+            }
+        });
+    }
+
+    // 构建单条顶层评论（含回复子列表），全部用jQuery .text()填充避免HTML注入
+    function buildPcItem(item) {
+        var $item = $('<div class="pc-item"></div>');
+        var $user = $('<div class="pc-user"></div>');
+        $user.append($('<span class="pc-name"></span>').text(item.createUserName));
+        if (item.location) {
+            $user.append($('<span class="pc-loc"></span>').text(item.location + '读者'));
+        }
+        $user.append($('<span class="pc-time" style="float:right"></span>').text(item.createTime));
+        $item.append($user);
+        $item.append($('<div class="pc-content"></div>').text(item.commentContent));
+
+        var replies = item.replies || [];
+        if (replies.length > 0) {
+            var $rep = $('<div class="pc-reply-list"></div>');
+            for (var j = 0; j < replies.length; j++) {
+                $rep.append(buildPcReplyItem(item.id, replies[j]));
+            }
+            $item.append($rep);
+        }
+        var $op = $('<div class="pc-op-bar"></div>');
+        if (replies.length > 0) {
+            $op.append($('<span class="pc-reply-num"></span>').text(replies.length + '条回复'));
+        }
+        $op.append($('<span class="pc-reply-btn">回复</span>').data('root', item.id).data('name', item.createUserName).data('uid', item.createUserId));
+        $item.append($op);
+        return $item;
+    }
+
+    // 构建单条回复（回复目标始终是所属顶层评论）
+    function buildPcReplyItem(rootId, r) {
+        var $ri = $('<div class="pc-reply-item"></div>');
+        var $ru = $('<div class="pc-r-user"></div>');
+        $ru.append($('<span class="pc-name"></span>').text(r.createUserName));
+        if (r.replyUserName) {
+            $ru.append($('<span class="pc-to"></span>').text('回复 ' + r.replyUserName));
+        }
+        $ru.append($('<span style="float:right"></span>').text(r.createTime));
+        $ri.append($ru);
+        $ri.append($('<div class="pc-r-content"></div>').text(r.commentContent));
+        $ri.append($('<div class="pc-op-bar"></div>')
+            .append($('<span class="pc-reply-btn">回复</span>').data('root', rootId).data('name', r.createUserName).data('uid', r.createUserId)));
+        return $ri;
+    }
+
+    // 防重复提交标志
+    var pcSubmitting = false;
+
+    // 发表段落评论
+    function submitParagraphComment(idx) {
+        if (pcSubmitting) {
+            return;
+        }
+        if (!isLogin) {
+            location.href = '/user/login.html?originUrl=' + encodeURIComponent(location.href);
+            return;
+        }
+        var content = $.trim($('#pcContent').val());
+        if (content == '') {
+            layer.alert('评论内容必须填写');
+            return;
+        }
+        if (content.length < 5) {
+            layer.alert('评论内容必须大于5个字');
+            return;
+        }
+        pcSubmitting = true;
+        var $btn = $('#pcSubmitBtn');
+        $btn.addClass('layui-btn-disabled').attr('disabled', 'disabled').text('提交中...');
+        var rootId = pcReplyTarget ? pcReplyTarget.rootId : 0;
+        var replyUserName = pcReplyTarget ? pcReplyTarget.name : '';
+        var replyUserId = pcReplyTarget ? pcReplyTarget.uid : '';
+        ParagraphApi.add(idx, content, rootId, replyUserName, replyUserId).then(function (res) {
+            pcSubmitting = false;
+            $btn.removeClass('layui-btn-disabled').removeAttr('disabled').text('发表');
+            if (res.code == 200) {
+                $('#pcContent').val('');
+                $('#pcNum').html('0/200');
+                clearReplyTarget();
+                loadCommentList(idx);
+                // 重新拉取各段气泡角标
+                refreshCountChips();
+            } else if (res.code == 1001) {
+                location.href = '/user/login.html?originUrl=' + encodeURIComponent(location.href);
+            } else {
+                layer.alert(res.msg || '发表失败');
+            }
+        });
+    }
+
+    // 评论入口事件委派
+    $('#paragraphList').on('click', '.para-comment-btn', function () {
+        openCommentPanel(parseInt($(this).data('idx')));
+    });
+
+    // 页面加载：拆分段落并初始化评论入口（VIP未购买章节无正文，自动跳过）
+    renderParagraphs();
+
 </script>
 
 
diff --git a/templates/green/html/mobile/book/book_detail.html b/templates/green/html/mobile/book/book_detail.html
index 824d863..bbf1d9e 100644
--- a/templates/green/html/mobile/book/book_detail.html
+++ b/templates/green/html/mobile/book/book_detail.html
@@ -16,8 +16,219 @@
 
     <style type="text/css">
 
-        .indexP p a {
-            color: #4c6978;
+        body {
+            background: #f5f7f6;
+        }
+
+        /* 书籍信息卡 */
+        .book-info-card {
+            display: -webkit-flex;
+            display: flex;
+            background: #fff;
+            margin: 12px;
+            padding: 14px;
+            border-radius: 10px;
+            box-shadow: 0 2px 8px rgba(62, 175, 124, .08);
+        }
+
+        .book-info-card .cover {
+            -webkit-flex: 0 0 auto;
+            flex: 0 0 auto;
+            width: 92px;
+            height: 124px;
+            object-fit: cover;
+            border-radius: 6px;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
+            display: block;
+        }
+
+        .book-info-card .info {
+            -webkit-flex: 1;
+            flex: 1;
+            min-width: 0;
+            margin-left: 12px;
+        }
+
+        .book-info-card .book-name {
+            font-size: 17px;
+            font-weight: 600;
+            color: #1f2d26;
+            line-height: 24px;
+        }
+
+        .book-info-card .author {
+            display: inline-block;
+            margin-top: 4px;
+            font-size: 13px;
+            color: #5c6b64;
+        }
+
+        .book-info-card .tag-row {
+            margin-top: 8px;
+        }
+
+        .book-info-card .tag-pill {
+            display: inline-block;
+            font-size: 11px;
+            line-height: 18px;
+            padding: 0 8px;
+            border-radius: 9px;
+            background: rgba(62, 175, 124, .12);
+            color: #2e8b62;
+            margin-right: 6px;
+        }
+
+        .book-info-card .tag-pill.gray {
+            background: #f0f2f1;
+            color: #8a968f;
+        }
+
+        .book-info-card .data-row {
+            margin-top: 10px;
+            font-size: 12px;
+            color: #98a8a1;
+        }
+
+        .book-info-card .data-row span {
+            margin-right: 12px;
+        }
+
+        .book-info-card .data-row b {
+            color: #e05c6e;
+            font-weight: 600;
+        }
+
+        /* 操作按钮栏 */
+        .action-bar {
+            display: -webkit-flex;
+            display: flex;
+            margin: 0 12px 12px;
+        }
+
+        .action-bar .btn-read {
+            -webkit-flex: 2;
+            flex: 2;
+            height: 42px;
+            line-height: 42px;
+            text-align: center;
+            border-radius: 21px;
+            background: #3eaf7c;
+            color: #fff;
+            font-size: 15px;
+            font-weight: 600;
+            box-shadow: 0 4px 10px rgba(62, 175, 124, .25);
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        .action-bar .btn-read:active {
+            opacity: .85;
+        }
+
+        .action-bar .btn-ghost {
+            -webkit-flex: 1;
+            flex: 1;
+            height: 42px;
+            line-height: 40px;
+            text-align: center;
+            border-radius: 21px;
+            background: #fff;
+            border: 1px solid #3eaf7c;
+            color: #2e8b62;
+            font-size: 14px;
+            margin-left: 10px;
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        .action-bar .btn-ghost:active {
+            background: rgba(62, 175, 124, .08);
+        }
+
+        .action-bar .btn-ghost.in-shelf {
+            border-color: #d5ded9;
+            color: #98a8a1;
+            background: #f7f9f8;
+        }
+
+        /* 区块卡片 */
+        .sec-card {
+            background: #fff;
+            margin: 0 12px 12px;
+            border-radius: 10px;
+            padding: 14px;
+            box-shadow: 0 2px 8px rgba(62, 175, 124, .08);
+        }
+
+        .sec-title {
+            display: -webkit-flex;
+            display: flex;
+            -webkit-align-items: center;
+            align-items: center;
+            font-size: 16px;
+            font-weight: 600;
+            color: #1f2d26;
+            line-height: 20px;
+            margin-bottom: 10px;
+        }
+
+        .sec-title:before {
+            content: "";
+            -webkit-flex: 0 0 auto;
+            flex: 0 0 auto;
+            width: 4px;
+            height: 16px;
+            background: #3eaf7c;
+            border-radius: 2px;
+            margin-right: 8px;
+        }
+
+        .sec-title .sec-sub {
+            margin-left: 8px;
+            font-size: 12px;
+            font-weight: normal;
+            color: #98a8a1;
+        }
+
+        .sec-title .sec-more {
+            margin-left: auto;
+            font-size: 12px;
+            font-weight: normal;
+            color: #2e8b62;
+            background: rgba(62, 175, 124, .08);
+            border-radius: 12px;
+            padding: 2px 10px;
+        }
+
+        .desc-text {
+            font-size: 13px;
+            line-height: 22px;
+            color: #5c6b64;
+        }
+
+        /* 最新章节列表 */
+        .idx-item {
+            display: block;
+            height: 40px;
+            line-height: 40px;
+            font-size: 14px;
+            color: #333;
+            border-bottom: 1px solid #f5f7f6;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .idx-item:last-child {
+            border-bottom: none;
+        }
+
+        .to-index-all {
+            display: block;
+            margin-top: 6px;
+            text-align: center;
+            line-height: 40px;
+            font-size: 14px;
+            color: #2e8b62;
+            border-top: 1px solid #f0f5f2;
         }
 
         .tag-list {
@@ -102,6 +313,38 @@
 
         }
 
+        /* 加书单弹层的书单单选行 */
+        .bl-list-radio {
+            display: block;
+            padding: 10px 12px;
+            border: 1px solid #eee;
+            border-radius: 6px;
+            margin-bottom: 8px;
+            font-size: 14px;
+            color: #333;
+        }
+
+        .bl-list-radio.checked {
+            border-color: #3eaf7c;
+            background: rgba(62, 175, 124, 0.08);
+        }
+
+        .bl-list-radio input {
+            margin-right: 8px;
+            vertical-align: middle;
+        }
+
+        .bl-list-radio .bl-list-name {
+            vertical-align: middle;
+        }
+
+        .bl-list-radio .bl-list-count {
+            float: right;
+            color: #999;
+            font-size: 12px;
+            line-height: 20px;
+        }
+
     </style>
 
 
@@ -118,80 +361,107 @@
     <input type="hidden" id="bookNamedHidden" th:value="${book.bookName}"/>
     <input type="hidden" id="preContentId" th:value="${firstBookIndexId}"/>
 
-    <div style="height: 50px;line-height: 50px;text-align: center"
-         class="layui-header header header-doc  layui-bg-cyan">
+    <div th:replace="mobile/common/header :: pageHeader(${book.bookName}, null)"></div>
 
-        <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" th:utext="${book.bookName}"></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-row" style="background: #f2f2f2">
-        <div style="padding: 3px" class="layui-col-xs4 layui-col-sm2 layui-col-md2 layui-col-lg2">
-            <img style=" width:130px; height:auto; max-width:100%; max-height:100%;" th:src="${book.picUrl}"/>
-
-        </div>
-        <div style="position:relative;padding: 3px 10px 0px"
-             class="layui-col-xs8 layui-col-sm8 layui-col-md8 layui-col-lg8">
-            <a th:href="'javascript:searchBooks(\''+ ${book.authorName}+'\')'">
-                <div style=";color: #444;" th:utext="'作者：'+ ${book.authorName}"></div>
+    <div class="book-info-card">
+        <img class="cover" th:src="${book.picUrl}" alt="">
+        <div class="info">
+            <div class="book-name" th:utext="${book.bookName}"></div>
+            <a class="author" th:href="'javascript:searchBooks(\''+ ${book.authorName}+'\')'">
+                <span th:text="'作者：'+ ${book.authorName}"></span>
             </a>
-            <a th:href="'/book/book_ranking.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>
-            <div style="margin-top: 5px;color: #444;">更新：<i
-                    th:text="${#dates.format(book.lastIndexUpdateTime, 'yy-MM-dd')}"></i></div>
-            <div style="margin-top: 5px;color: #444;">评分：<i style="font-weight:bold;color: red"
-                                                            th:text="${book.score} + '分'"></i></div>
-            <div style="margin-top: 5px;color: #444;">点击：<i style="font-weight:bold;color: red"
-                                                            th:text="${book.visitCount}"></i></div>
-
-
-        </div>
-    </div>
-
-
-    <div style="text-align: center;height: 45px;line-height: 45px">
-        <a th:href="'/book/'+${book.id}+'/'+${firstBookIndexId}+'.html'" type="button"
-           style="background-color:#3eaf7c!important" class="layui-btn layui-btn-sm layui-btn-radius">开始阅读</a>
-        <button type="button" id="cFavs" onclick="addInShell()"
-                style="border: 1px solid #3eaf7c;color: #3eaf7c;background-color:#fff!important"
-                class="layui-btn layui-btn-sm layui-btn-radius ">加入书架
-        </button>
-
-        <!--
-            <button type="button" onclick="downloadFile()" class="layui-btn layui-btn-sm layui-btn-radius layui-bg-normal">下载TXT</button>
-        -->
-    </div>
-    <p style="line-height: 23px;padding: 10px;font-size: 14px;color: #333;" th:utext="${book.bookDesc}">
-
-    </p>
-
-    <div class="layui-collapse">
-        <div class="layui-colla-item">
-            <h2 class="layui-colla-title">
-                <span>最新章节</span>
-                <span style="margin-left: 30px">
-                更新： <i th:text="${#dates.format(book.lastIndexUpdateTime, 'yy-MM-dd HH:mm:ss')}"></i>
-            </span>
-            </h2>
-            <div class="layui-colla-content layui-show indexP layui-row" id="indexList">
-
-
+            <div class="tag-row">
+                <a class="tag-pill" th:href="'/book/bookclass.html?catId='+${book.catId}" th:text="${book.catName}"></a>
+                <span class="tag-pill gray" th:text="${book.bookStatus==0?'连载中':'已完结'}"></span>
+            </div>
+            <div class="data-row">
+                <span>点击 <b th:text="${book.visitCount}"></b></span>
+                <span th:text="'更新：'+${#dates.format(book.lastIndexUpdateTime, 'yy-MM-dd')}"></span>
             </div>
         </div>
     </div>
-    <div style="height: 42px;color:#4c6978;line-height: 42px;padding-left: 30px;background: #f2f2f2">
 
-        <a th:href="'/book/indexList-'+${book.id}+'.html'">查看完整目录</a>
+
+    <div class="action-bar">
+        <a class="btn-read" th:href="'/book/'+${book.id}+'/'+${firstBookIndexId}+'.html'">开始阅读</a>
+        <button type="button" id="cFavs" class="btn-ghost" onclick="addInShell()">加入书架</button>
+        <button type="button" class="btn-ghost" onclick="openAddToList()">加书单</button>
+
+        <!--
+            <button type="button" onclick="downloadFile()" class="btn-ghost">下载TXT</button>
+        -->
     </div>
 
+    <div class="sec-card">
+        <div class="sec-title">简介</div>
+        <div class="desc-text" th:utext="${book.bookDesc}"></div>
+    </div>
+
+    <div class="sec-card">
+        <div class="sec-title">最新章节<span class="sec-sub"
+                                           th:text="'更新于 '+${#dates.format(book.lastIndexUpdateTime, 'yy-MM-dd HH:mm')}"></span></div>
+        <div id="indexList"></div>
+        <a class="to-index-all" th:href="'/book/indexList-'+${book.id}+'.html'">查看完整目录</a>
+    </div>
+
+    <!--作品评论区 start-->
+    <div class="sec-card">
+        <div class="sec-title">作品评论区<span id="bookCommentTotal" class="sec-sub"
+                                              th:text="'('+${bookCommentPageBean.total}+'条)'"></span><a class="sec-more"
+                                                                                                        th:href="'/book/comment-'+${book.id}+'.html'">查看全部</a></div>
+        <div>
+            <div>
+                <div id="noCommentPanel"
+                     th:style="${bookCommentPageBean.total > 0}? 'display:none'">
+                    <p style="text-align:center;color:#999;padding:20px 0;">暂无评论，快来抢沙发~</p>
+                </div>
+                <div id="commentPanel">
+                    <div th:each="comment : ${bookCommentPageBean.list}"
+                         style="padding:12px 0;border-bottom:1px solid #eee;overflow:hidden;">
+                        <img th:src="${#strings.isEmpty(comment.createUserPhoto)} ? '/images/man.png' : ${comment.createUserPhoto}"
+                             onerror="this.src='/images/man.png'"
+                             style="width:40px;height:40px;border-radius:50%;float:left;object-fit:cover;">
+                        <div style="margin-left:52px;">
+                            <div style="font-size:14px;">
+                                <span style="color:#444;"
+                                      th:text="${T(com.java2nb.novel.core.utils.NameMaskUtil).maskIfNeeded(comment.createUserName)}"></span>
+                                <span th:if="${comment.location}" style="color:#999;margin-left:8px;"
+                                      th:text="${comment.location}+'读者'"></span>
+                                <span style="color:#999;float:right;font-size:12px;"
+                                      th:text="${comment.createTimeFormat}"></span>
+                            </div>
+                            <div style="color:#333;margin-top:6px;line-height:20px;word-break:break-all;"
+                                 th:utext="${comment.commentContent}"></div>
+                            <div style="margin-top:8px;text-align:right;font-size:13px;">
+                                <a href="javascript:;" th:onclick="'toggleCommentLike(\''+${comment.id}+'\')'"
+                                   style="color:#3eaf7c;margin-right:15px;">赞(<span
+                                        th:id="'likeCount'+${comment.id}" th:text="${comment.likesCount}">0</span>)</a>
+                                <a href="javascript:;" th:onclick="'toggleCommentUnLike(\''+${comment.id}+'\')'"
+                                   style="color:#999;margin-right:15px;">踩(<span
+                                        th:id="'unLikeCount'+${comment.id}" th:text="${comment.unLikesCount}">0</span>)</a>
+                                <a th:href="'/book/reply-'+${comment.id}+'.html'" style="color:#4c6978;">回复(<span
+                                        th:text="${comment.replyCount}">0</span>)</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div style="padding:12px 0 4px;">
+                    <textarea id="txtComment" class="layui-textarea" maxlength="1000"
+                              placeholder="我来说两句..."></textarea>
+                    <div style="margin-top:8px;overflow:hidden;text-align:right;">
+                        <span id="emCommentNum"
+                              style="float:left;color:#999;font-size:12px;line-height:30px;">0/1000</span>
+                        <button type="button" id="commentSubmitBtn" onclick="saveBookComment()"
+                                style="background-color:#3eaf7c!important;border-color:#3eaf7c!important;"
+                                class="layui-btn layui-btn-sm layui-btn-normal fr">发表
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--作品评论区 end-->
+
     <!--
     <div style="position: fixed;top:0px;left:0px;z-index:-100;opacity: 0" th:utext="${attacDivForSearch}"></div>
     -->
@@ -214,7 +484,7 @@
         success: function (data) {
             if (data.code == 200) {
                 if (data.data) {
-                    $("#cFavs").replaceWith("<button type=\"button\" id=\"cFavs\" style=\"border: 1px solid #3eaf7c;color: #3eaf7c;background-color:#fff!important\"  class=\"layui-btn layui-btn-sm layui-btn-radius layui-btn-warm\">已在书架</button>");
+                    $("#cFavs").replaceWith("<button type=\"button\" id=\"cFavs\" class=\"btn-ghost in-shelf\">已在书架</button>");
                 }
 
 
@@ -242,7 +512,7 @@
                 var indexListHtml = "";
                 for (var i = 0; i < data.data.length; i++) {
                     var bookIndex = data.data[i];
-                    indexListHtml += ("<p class=\"line-limit-length layui-col-xs12 layui-col-sm4 layui-col-md3 layui-col-lg2\" style=\"padding-left:10px;height: 50px;line-height: 50px;\"><a href=\"/book/" + $("#bookIdHidden").val() + "/" + bookIndex.id + ".html\" style='color: #333'>" + bookIndex.indexName + "</a></p>");
+                    indexListHtml += ("<a class=\"idx-item\" href=\"/book/" + $("#bookIdHidden").val() + "/" + bookIndex.id + ".html\">" + bookIndex.indexName + "</a>");
                 }
 
                 $("#indexList").html(indexListHtml);
@@ -269,7 +539,7 @@
             dataType: "json",
             success: function (data) {
                 if (data.code == 200) {
-                    $("#cFavs").replaceWith("<button type=\"button\" id=\"cFavs\" style=\"border: 1px solid #3eaf7c;color: #3eaf7c;background-color:#fff!important\"  class=\"layui-btn layui-btn-sm layui-btn-radius layui-btn-warm\">已在书架</button>");
+                    $("#cFavs").replaceWith("<button type=\"button\" id=\"cFavs\" class=\"btn-ghost in-shelf\">已在书架</button>");
 
 
                 } else if (data.code == 1001) {
@@ -350,7 +620,272 @@
     }
 
     function searchBooks(keyword) {
-        window.location.href = "/book/book_ranking.html?keyword=" + encodeURI(keyword);
+        window.location.href = "/book/bookclass.html?keyword=" + encodeURI(keyword);
+    }
+
+    // 发表评论字数统计
+    $('#txtComment').on('input propertychange', function () {
+        $('#emCommentNum').html($(this).val().length + "/1000");
+    });
+
+    // 防重复提交标志
+    var commentSubmitting = false;
+
+    // 发表评论
+    function saveBookComment() {
+        if (commentSubmitting) {
+            return;
+        }
+        if (!isLogin) {
+            location.href = '/user/login.html?originUrl=' + encodeURIComponent(location.href);
+            return;
+        }
+        var content = $.trim($('#txtComment').val());
+        if (content == '') {
+            layer.alert('评论内容必须填写');
+            return;
+        }
+        if (content.length < 5) {
+            layer.alert('评论内容必须大于5个字');
+            return;
+        }
+        commentSubmitting = true;
+        var $btn = $('#commentSubmitBtn');
+        $btn.addClass('layui-btn-disabled').attr('disabled', 'disabled').text('提交中...');
+        $.ajax({
+            type: "POST",
+            url: "/book/addBookComment",
+            data: {'bookId': $("#bookIdHidden").val(), 'commentContent': content},
+            dataType: "json",
+            success: function (data) {
+                if (data.code == 200) {
+                    $('#txtComment').val("");
+                    $('#emCommentNum').html("0/1000");
+                    layer.msg('发表成功！');
+                    loadCommentList();
+                } else if (data.code == 1001) {
+                    location.href = '/user/login.html?originUrl=' + encodeURIComponent(location.href);
+                } else {
+                    layer.alert(data.msg);
+                }
+            },
+            error: function () {
+                layer.alert('网络异常');
+            },
+            complete: function () {
+                commentSubmitting = false;
+                $btn.removeClass('layui-btn-disabled').removeAttr('disabled').text('发表');
+            }
+        });
+    }
+
+    // 加载评论列表（取第一页）
+    function loadCommentList() {
+        $.ajax({
+            type: "get",
+            url: "/book/listCommentByPage",
+            data: {'bookId': $("#bookIdHidden").val()},
+            dataType: "json",
+            success: function (data) {
+                if (data.code == 200) {
+                    renderCommentList(data.data);
+                } else {
+                    layer.alert(data.msg);
+                }
+            },
+            error: function () {
+                layer.alert('网络异常');
+            }
+        });
+    }
+
+    function renderCommentList(pageBean) {
+        var commentList = pageBean.list;
+        $("#bookCommentTotal").html("(" + pageBean.total + "条)");
+        if (!commentList || commentList.length == 0) {
+            $("#commentPanel").html("");
+            $("#noCommentPanel").show();
+            return;
+        }
+        $("#noCommentPanel").hide();
+        var html = "";
+        for (var i = 0; i < commentList.length; i++) {
+            var comment = commentList[i];
+            html += buildCommentItem(comment);
+        }
+        $("#commentPanel").html(html);
+    }
+
+    function buildCommentItem(comment) {
+        var photo = comment.createUserPhoto ? comment.createUserPhoto : '/images/man.png';
+        var location = comment.location ? '<span style="color:#999;margin-left:8px;">' + comment.location + '读者</span>' : '';
+        return ('<div style="padding:12px 0;border-bottom:1px solid #eee;overflow:hidden;">' +
+            '<img src="' + photo + '" onerror="this.src=\'/images/man.png\'" style="width:40px;height:40px;border-radius:50%;float:left;object-fit:cover;">' +
+            '<div style="margin-left:52px;">' +
+            '<div style="font-size:14px;">' +
+            '<span style="color:#444;">' + comment.createUserName + '</span>' + location +
+            '<span style="color:#999;float:right;font-size:12px;">' + comment.createTime + '</span>' +
+            '</div>' +
+            '<div style="color:#333;margin-top:6px;line-height:20px;word-break:break-all;">' + comment.commentContent + '</div>' +
+            '<div style="margin-top:8px;text-align:right;font-size:13px;">' +
+            '<a href="javascript:;" onclick="toggleCommentLike(\'' + comment.id + '\')" style="color:#3eaf7c;margin-right:15px;">赞(<span id="likeCount' + comment.id + '">' + comment.likesCount + '</span>)</a>' +
+            '<a href="javascript:;" onclick="toggleCommentUnLike(\'' + comment.id + '\')" style="color:#999;margin-right:15px;">踩(<span id="unLikeCount' + comment.id + '">' + comment.unLikesCount + '</span>)</a>' +
+            '<a href="/book/reply-' + comment.id + '.html" style="color:#4c6978;">回复(<span>' + comment.replyCount + '</span>)</a>' +
+            '</div>' +
+            '</div>' +
+            '</div>');
+    }
+
+    function toggleCommentLike(commentId) {
+        toggleLike(commentId, "/book/toggleCommentLike", "likeCount");
+    }
+
+    //加书单 start -----------------------------------------------------------------
+    var addToListSubmitting = false;
+
+    //弹出加书单面板：选择书单+推荐语
+    function openAddToList() {
+        if (!isLogin) {
+            location.href = '/user/login.html?originUrl=' + encodeURIComponent(location.href);
+            return;
+        }
+        var loadIndex = layer.load(2);
+        $.ajax({
+            type: "get",
+            url: "/bookList/mine",
+            data: {'curr': 1, 'limit': 200},
+            dataType: "json",
+            success: function (data) {
+                layer.close(loadIndex);
+                if (data.code == 200) {
+                    var lists = data.data.list;
+                    if (!lists || lists.length == 0) {
+                        layer.confirm('你还没有创建书单，前往创建？', {
+                            title: '加书单'
+                        }, function (index) {
+                            layer.close(index);
+                            location.href = '/booklist/mine.html';
+                        });
+                        return;
+                    }
+                    renderAddToListPanel(lists);
+                } else if (data.code == 1001) {
+                    location.href = '/user/login.html?originUrl=' + encodeURIComponent(location.href);
+                } else {
+                    layer.alert(data.msg);
+                }
+
+            },
+            error: function () {
+                layer.close(loadIndex);
+                layer.alert('网络异常');
+            }
+        })
+    }
+
+    function renderAddToListPanel(lists) {
+        var html = '<div style="padding:10px 15px;max-height:320px;overflow-y:auto;">';
+        for (var i = 0; i < lists.length; i++) {
+            var item = lists[i];
+            html += '<label class="bl-list-radio" data-id="' + item.id + '">';
+            html += '<input type="radio" name="blListRadio" value="' + item.id + '">';
+            html += '<span class="bl-list-name">' + escapeBlHtml(item.listName) + '</span>';
+            html += '<span class="bl-list-count">' + item.bookCount + '本</span></label>';
+        }
+        html += '<textarea id="blRemark" class="layui-textarea" style="margin-top:10px;height:60px;" maxlength="100" placeholder="推荐语（选填，100字以内）"></textarea>';
+        html += '</div>';
+        layer.open({
+            type: 1,
+            title: '加入到我的书单',
+            area: ['92%', 'auto'],
+            content: html,
+            btn: ['加入', '取消'],
+            success: function (layero) {
+                layero.on('click', '.bl-list-radio', function () {
+                    layero.find('.bl-list-radio').removeClass('checked');
+                    $(this).addClass('checked');
+                    $(this).find('input').prop('checked', true);
+                });
+            },
+            yes: function (index, layero) {
+                submitAddToList(index, layero);
+            }
+        });
+    }
+
+    //提交加书单（防重复提交）
+    function submitAddToList(layerIndex, layero) {
+        if (addToListSubmitting) {
+            return;
+        }
+        var listId = layero.find('input[name=blListRadio]:checked').val();
+        if (!listId) {
+            layer.alert('请先选择一个书单');
+            return;
+        }
+        var remark = $.trim(layero.find('#blRemark').val());
+        addToListSubmitting = true;
+        var $yesBtn = layero.find('.layui-layer-btn0');
+        $yesBtn.addClass('layui-btn-disabled').css('pointer-events', 'none').text('提交中...');
+        $.ajax({
+            type: "POST",
+            url: "/bookList/addBook",
+            data: {'listId': listId, 'bookId': $("#bookIdHidden").val(), 'remark': remark},
+            dataType: "json",
+            success: function (data) {
+                if (data.code == 200) {
+                    layer.close(layerIndex);
+                    layer.msg('已加入书单！');
+                } else if (data.code == 1001) {
+                    layer.close(layerIndex);
+                    location.href = '/user/login.html?originUrl=' + encodeURIComponent(location.href);
+                } else {
+                    layer.alert(data.msg);
+                }
+
+            },
+            error: function () {
+                layer.alert('网络异常');
+            },
+            complete: function () {
+                addToListSubmitting = false;
+                $yesBtn.removeClass('layui-btn-disabled').css('pointer-events', '').text('加入');
+            }
+        })
+    }
+
+    //HTML转义，防止内容破坏页面结构
+    function escapeBlHtml(str) {
+        if (str == null) {
+            return '';
+        }
+        return $('<div></div>').text(String(str)).html();
+    }
+    //加书单 end -------------------------------------------------------------------
+
+    function toggleCommentUnLike(commentId) {
+        toggleLike(commentId, "/book/toggleCommentUnLike", "unLikeCount");
+    }
+
+    function toggleLike(id, url, prefix) {
+        $.ajax({
+            type: "post",
+            url: url,
+            data: {'commentId': id},
+            dataType: "json",
+            success: function (data) {
+                if (data.code == 200) {
+                    $("#" + prefix + id).text(data.data);
+                } else if (data.code == 1001) {
+                    location.href = '/user/login.html?originUrl=' + encodeURIComponent(location.href);
+                } else {
+                    layer.alert(data.msg);
+                }
+            },
+            error: function () {
+                layer.alert('网络异常');
+            }
+        });
     }
 
     $.post("/book/addVisitCount", {"bookId": $("#bookIdHidden").val()}, function () {
diff --git a/templates/green/html/mobile/book/book_index.html b/templates/green/html/mobile/book/book_index.html
index e9cd2c1..a11de5f 100644
--- a/templates/green/html/mobile/book/book_index.html
+++ b/templates/green/html/mobile/book/book_index.html
@@ -41,19 +41,7 @@
 
 <div id="content">
     <input type="hidden" id="bookIdHidden" th:value="${book.id}"/>
-    <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>
-        <a style="color: #ffffff;" th:href="'/book/'+ ${book.id} + '.html'"><b class="layui-icon"
-                                                                               th:utext="${book.bookName}"></b></a>
-        <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 th:replace="mobile/common/header :: pageHeader(${book.bookName}, '/book/'+${book.id}+'.html')"></div>
 
 
     <p style="height: 30px;line-height: 30px;padding: 10px">
diff --git a/templates/green/html/mobile/book/book_ranking.html b/templates/green/html/mobile/book/book_ranking.html
index 18de2e8..3f4e64c 100644
--- a/templates/green/html/mobile/book/book_ranking.html
+++ b/templates/green/html/mobile/book/book_ranking.html
@@ -3,68 +3,124 @@
 <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>
+    <title th:text="'小说排行榜_'+${application.website.name}"></title>
 
     <meta name="keywords"
-          th:content="${application.website.name}+',精品小说,弹幕网站,弹幕,弹幕小说网站,免费小说,小说阅读,小说排行,轻小说,txt小说下载,电子书下载,动漫轻小说,日本轻小说'">
+          content="小说排行榜,热门小说榜,小说排行榜完结版,完结小说排行榜,完本小说排行榜,最新小说排行榜,网络小说排行榜,排行榜,点击榜,新书榜,推荐榜"/>
 
     <meta name="description"
-          th:content="${application.website.name}+'是国内优秀的小说弹幕网站,'+${application.website.name}+'提供海量热门网络小说,日本轻小说,国产轻小说,动漫小说,轻小说在线阅读和TXT小说下载,致力于网络精品小说的收集,智能计算小说评分,打造小说精品排行榜,致力于无广告无弹窗的小说阅读环境。'">
-
+          th:content="'最新热门网络小说排行榜,包含各类热门小说榜,小说排行榜上都是受用户喜爱的小说作品,精彩尽在'+${application.website.name}+'。'">
 
     <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;
+        /* 榜单类型选项卡 */
+        .rank-tabs {
+            display: flex;
+            background: #fff;
+            border-bottom: 1px solid #eee;
         }
 
-        .Readarea {
-            font-size: 18px;
-            line-height: 35px;
-            padding: 10px;
-            color: #333;
+        .rank-tabs a {
+            flex: 1;
+            text-align: center;
+            line-height: 44px;
+            font-size: 15px;
+            color: #666;
+            position: relative;
         }
 
-        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;
+        .rank-tabs a.on {
+            color: #3eaf7c;
+            font-weight: bold;
         }
 
-        .indexDiv a {
-            margin-left: 20px;
+        .rank-tabs a.on:after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            bottom: 0;
+            transform: translateX(-50%);
+            width: 40px;
+            height: 3px;
+            background: #3eaf7c;
+            border-radius: 2px;
         }
 
-        img {
-            width: 130px;
-            height: 180px;
+        /* 榜单当前名称 */
+        .rank-title {
+            padding: 12px 5px 6px 5px;
+            font-size: 16px;
+            color: #000;
+            font-weight: bold;
         }
 
-        .book_desc {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            -webkit-line-clamp: 3;
-            -webkit-box-orient: vertical;
-            white-space: pre-wrap;
+        /* 榜单条目 */
+        .rank-item {
+            padding: 10px 5px;
+            border-bottom: 1px solid #f2f2f2;
+            background: #fff;
+        }
+
+        .rank-item .rank-name {
+            color: #000;
+            font-size: 15px;
+        }
+
+        .rank-item .rank-word {
+            float: right;
+            color: #a6a6a6;
+            font-size: 12px;
+            line-height: 24px;
+        }
+
+        .rank-item .rank-meta {
+            margin-top: 6px;
+            color: #a6a6a6;
+            font-size: 13px;
+        }
+
+        .rank-item .rank-meta .rank-chapter {
+            margin-top: 4px;
+            display: block;
+        }
+
+        /* 排名序号 */
+        .rank-num {
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+            line-height: 24px;
+            text-align: center;
+            font-size: 12px;
+            color: #999;
+            background: #f2f2f2;
+            border-radius: 3px;
+            margin-right: 8px;
+            vertical-align: middle;
+            font-style: normal;
+        }
+
+        .rank-num-1 {
+            color: #fff;
+            background: #ff5722;
+        }
+
+        .rank-num-2 {
+            color: #fff;
+            background: #ffb800;
+        }
+
+        .rank-num-3 {
+            color: #fff;
+            background: #3eaf7c;
         }
 
     </style>
@@ -72,52 +128,23 @@
 <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 th:replace="mobile/common/header :: pageHeader('小说排行榜', null)"></div>
 
-<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 class="rank-tabs" id="rankType">
+    <a href="javascript:listRank(0)">点击榜</a>
+    <a href="javascript:listRank(1)">新书榜</a>
+    <a href="javascript:listRank(2)">更新榜</a>
+    <a href="javascript:listRank(3)">评论榜</a>
 </div>
 
-<div class="layui-container">
-    <div class="layui-row">
+<div class="layui-container" style="padding: 0 5px">
 
-        <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 class="rank-title" id="rankName">点击榜</div>
+
+    <div id="bookRankList"></div>
 
 </div>
 
-<div id="bookList">
-
-
-</div>
-
-
-<div id="books" style="text-align: center"></div>
-
 
 <div th:replace="mobile/common/footer :: footer">
 </div>
@@ -127,126 +154,52 @@
 
 <div th:replace="mobile/common/js :: js"></div>
 
-<script>
+<script type="text/javascript">
 
-    var catId = getQueryVariable("catId");
-    var bookStatus = getQueryVariable("bookStatus");
-    var sortBy = getQueryVariable("sortBy");
-    var keyword = getQueryVariable("keyword");
+    var rankNames = ["点击榜", "新书榜", "更新榜", "评论榜"];
 
-    if (keyword != false) {
-        $("#title").val(decodeURI(keyword));
+    // 支持通过 ?type= 直接定位榜单，与PC端参数保持一致
+    var rankType = getQueryVariable("type");
+    if (rankType === false || rankType === undefined || isNaN(parseInt(rankType))) {
+        rankType = 0;
     } else {
-        keyword = "";
+        rankType = parseInt(rankType);
     }
+    if (rankType < 0 || rankType >= rankNames.length) {
+        rankType = 0;
+    }
+    listRank(rankType);
 
-
-    search(1, 20);
-
-    function search(curr, limit) {
-
-
-        var searchData = {};
-
-        searchData.curr = curr;
-        searchData.limit = limit;
-
-        keyword = $("#title").val();
-
-        if (catId != false) {
-            searchData.catId = catId;
-        }
-
-        if (bookStatus != false) {
-            searchData.bookStatus = bookStatus;
-        }
-
-        if (sortBy != false) {
-            searchData.sort = sortBy;
-        } else if (!keyword) {
-            sortBy = "last_index_update_time";
-        }
-
-        if (keyword) {
-            searchData.keyword = keyword;
-        }
+    function listRank(rankType) {
+        // 选项卡高亮及榜单标题
+        $("#rankType a").removeClass("on");
+        $("#rankType a").eq(rankType).addClass("on");
+        $("#rankName").html(rankNames[rankType]);
 
         $.ajax({
             type: "get",
-            url: "/book/searchByPage",
-            data: searchData,
+            url: "/book/listRank",
+            data: {'type': rankType, 'limit': 30},
             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];
-
-                        /*var end = book.bookDesc.indexOf("<");
-                        if(end != -1) {
-                            book.bookDesc = book.bookDesc.substring(0,end);
-                        }*/
-
-                        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" +
+                    var bookRankList = data.data;
+                    var bookRankListHtml = "";
+                    for (var i = 0; i < bookRankList.length; i++) {
+                        var book = bookRankList[i];
+                        bookRankListHtml += ("<div class=\"rank-item\">\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" +
+                            "            <i class=\"rank-num rank-num-" + (i + 1) + "\">" + (i + 1) + "</i>\n" +
+                            "            <span class=\"rank-name line-limit-length\" style=\"max-width: 55%\">" + book.bookName + "</span>\n" +
+                            "            <span class=\"rank-word\">" + (book.wordCount / 10000).toFixed(2) + "万字</span>\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 class=\"rank-meta\">\n" +
+                            "            <a href=\"/book/bookclass.html?catId=" + book.catId + "\">[" + book.catName + "]</a> · " + book.authorName + "\n" +
+                            "            <a class=\"rank-chapter line-limit-length\" href=\"/book/" + book.id + ".html\">最新章节：" + book.lastIndexName + "</a>\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 {
-
-                                }
-                            }
-                        });
-                    });
+                    $("#bookRankList").html(bookRankListHtml);
                 } else {
                     layer.alert(data.msg);
                 }
@@ -256,67 +209,8 @@
                 layer.alert('网络异常');
             }
         })
-
-    }
-
-
-    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
+</html>
diff --git a/templates/green/html/mobile/book/book_submit.html b/templates/green/html/mobile/book/book_submit.html
index b420e63..2ea9696 100644
--- a/templates/green/html/mobile/book/book_submit.html
+++ b/templates/green/html/mobile/book/book_submit.html
@@ -16,18 +16,7 @@
 
 </div>
 
-<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: #92B8B1;" 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: #92B8B1;" class="layui-icon">&#xe68e;</i>
-    </a>
-    </div>
-</div>
+<div th:replace="mobile/common/header :: pageHeader('单本小说提交', null)"></div>
 <div style="height: 800px;padding: 20px;border: 1px solid #eee;">
 <form  class="layui-form" action="">
     <div class="layui-form-item">
diff --git a/templates/green/html/mobile/common/css.html b/templates/green/html/mobile/common/css.html
index a6da973..783ca13 100644
--- a/templates/green/html/mobile/common/css.html
+++ b/templates/green/html/mobile/common/css.html
@@ -35,14 +35,95 @@
             white-space: pre-wrap;
         }
 
+        /* ===== 全局页头（mobile/common/header 片段的样式）：主题绿渐变，吸顶 ===== */
+        .page-header {
+            position: -webkit-sticky;
+            position: sticky;
+            top: 0;
+            z-index: 999;
+            display: -webkit-flex;
+            display: flex;
+            -webkit-align-items: center;
+            align-items: center;
+            height: 44px;
+            padding: 0 4px;
+            background: linear-gradient(90deg, #3eaf7c, #2c8a61);
+            box-shadow: 0 2px 6px rgba(44, 138, 97, .25);
+            color: #fff;
+        }
+
+        .page-header .ph-btn {
+            -webkit-flex: 0 0 auto;
+            flex: 0 0 auto;
+            width: 40px;
+            height: 44px;
+            display: -webkit-flex;
+            display: flex;
+            -webkit-align-items: center;
+            align-items: center;
+            -webkit-justify-content: center;
+            justify-content: center;
+            color: #fff;
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        .page-header .ph-btn svg {
+            width: 20px;
+            height: 20px;
+        }
+
+        .page-header .ph-btn:active {
+            opacity: .6;
+        }
+
+        .page-header .ph-title {
+            -webkit-flex: 1;
+            flex: 1;
+            min-width: 0;
+            text-align: center;
+            font-size: 16px;
+            font-weight: 600;
+            color: #fff;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        /* ===== 全局页尾：白底 flex 导航栏 ===== */
         #footer {
             position: absolute;
             bottom: 0px;
             left: 0;
             right: 0;
             height: 50px;
-            line-height: 48px;
-            text-align: center;
+            display: -webkit-flex;
+            display: flex;
+            background: #fff;
+            border-top: 1px solid #eef3f0;
+            box-shadow: 0 -2px 8px rgba(62, 175, 124, .06);
+        }
+
+        #footer .ft-item {
+            -webkit-flex: 1;
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 13px;
+            color: #5c6b64;
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        #footer .ft-item:active {
+            color: #3eaf7c;
+        }
+
+        #footer .ft-divider {
+            -webkit-flex: 0 0 auto;
+            flex: 0 0 auto;
+            width: 1px;
+            background: #f0f5f2;
+            margin: 14px 0;
         }
     </style>
 </div>
\ No newline at end of file
diff --git a/templates/green/html/mobile/common/footer.html b/templates/green/html/mobile/common/footer.html
index 0d6cada..bdcac25 100644
--- a/templates/green/html/mobile/common/footer.html
+++ b/templates/green/html/mobile/common/footer.html
@@ -1,19 +1,14 @@
 <div th:fragment="footer">
     <div style="height: 50px"></div>
-    <div id="footer"
-         class="layui-footer footer footer-demo layui-bg-cyan">
-        <!--<a href="/mobile/book/searchSoftBook.html" style="font-size: 14px;color: #fff;">轻小说</a>
-        <a href="/mobile/book/searchSoftBook.html?catId=9" style="font-size: 14px;color: #fff;margin-left: 8px">漫画</a>-->
-        <!--<a href="/?to=pc" style="font-size: 14px;color: #fff;margin-left: 8px">电脑站</a>-->
-        <a href="/" style="font-size: 16px;color: #fff;">首页</a>
-        <a href="/user/read_history.html" style="font-size: 16px;color: #fff;margin-left: 18px">阅读记录</a>
-        <a href="/user/favorites.html" style="font-size: 16px;color: #fff;margin-left: 18px">书架</a>
-        <!--<a href="/mobile/fiction_house.apk" style="font-size: 14px;color: #fff;margin-left: 8px">客户端</a>-->
-        <!--<a href="https://www.zinglizingli.xyz/me/index.html" style="font-size: 14px;color: #fff;margin-left: 8px">开发者</a>-->
-
-
-        <div style="margin-top:-3px;float: right"><a href="#top"><i class="layui-icon"
-                                                                    style="margin-right:15px;font-size: 25px;color:#fff ">&#xe604;</i></a>
-        </div>
+    <div id="footer" class="layui-footer footer footer-demo">
+        <a class="ft-item" href="/">首页</a>
+        <div class="ft-divider"></div>
+        <a class="ft-item" href="/book/book_ranking.html">排行榜</a>
+        <div class="ft-divider"></div>
+        <a class="ft-item" href="/user/read_history.html">阅读记录</a>
+        <div class="ft-divider"></div>
+        <a class="ft-item" href="/user/favorites.html">书架</a>
+        <div class="ft-divider"></div>
+        <a class="ft-item" href="#top">回顶部</a>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/green/html/mobile/index.html b/templates/green/html/mobile/index.html
index 799ca61..f913c90 100644
--- a/templates/green/html/mobile/index.html
+++ b/templates/green/html/mobile/index.html
@@ -40,55 +40,396 @@
             -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 {
+        /* 顶部 Logo：等比缩放不溢出；右侧消息入口 */
+        .site-header {
+            display: -webkit-flex;
             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 */
+            -webkit-align-items: center;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px 12px 0;
         }
 
-        .container::-webkit-scrollbar {
+        .site-logo {
+            max-height: 40px;
+            max-width: 140px;
+        }
+
+        /* 右上角未读消息：铃铛圆形入口 + 主题绿渐变角标，白描边与图标区分层 */
+        .header-msg {
+            position: relative;
+            -webkit-flex: 0 0 auto;
+            flex: 0 0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            background: #fff;
+            box-shadow: 0 2px 8px rgba(62, 175, 124, .10);
+            color: #3eaf7c;
+        }
+
+        .header-msg .layui-icon {
+            font-size: 20px;
+        }
+
+        .header-msg .hm-badge {
+            position: absolute;
+            top: -5px;
+            right: -5px;
+            display: none;
+            min-width: 16px;
+            padding: 0 4px;
+            line-height: 15px;
+            text-align: center;
+            font-size: 10px;
+            color: #fff;
+            background: linear-gradient(135deg, #3eaf7c, #6cc798);
+            border: 1.5px solid #fff;
+            border-radius: 9px;
+            box-shadow: 0 2px 4px rgba(62, 175, 124, .30);
+        }
+
+        /* 搜索条：胶囊输入框 + 主题色等高按钮 */
+        .search-bar {
+            display: -webkit-flex;
+            display: flex;
+            padding: 10px 12px 12px;
+        }
+
+        .search-bar input {
+            -webkit-flex: 1;
+            flex: 1;
+            height: 40px;
+            line-height: 40px;
+            border: 1px solid #e2ece7;
+            border-radius: 20px;
+            background: #fff;
+            padding: 0 15px;
+            font-size: 14px;
+            color: #333;
+            outline: none;
+            min-width: 0;
+        }
+
+        .search-bar input::-webkit-input-placeholder {
+            color: #b8c4bf;
+        }
+
+        .search-bar button {
+            width: 66px;
+            height: 40px;
+            margin-left: 8px;
+            border: none;
+            border-radius: 20px;
+            background: #3eaf7c;
+            color: #fff;
+            font-size: 14px;
+        }
+
+        /* 快捷入口卡片：白底圆角浅投影 */
+        .quick-entry-card {
+            background: #fff;
+            margin: 0 12px 12px;
+            border-radius: 10px;
+            padding: 14px 6px 10px;
+            box-shadow: 0 2px 8px rgba(62, 175, 124, .10);
+        }
+
+        /* 区块卡片 */
+        .sec-block {
+            background: #fff;
+            border-radius: 10px;
+            padding: 14px;
+            margin: 0 12px 12px;
+            box-shadow: 0 2px 8px rgba(62, 175, 124, .08);
+        }
+
+        .sec-title {
+            font-size: 16px;
+            font-weight: 600;
+            color: #1f2d26;
+            line-height: 20px;
+            margin-bottom: 12px;
+        }
+
+        .sec-title:before {
+            content: "";
+            display: inline-block;
+            width: 4px;
+            height: 16px;
+            background: #3eaf7c;
+            border-radius: 2px;
+            margin-right: 8px;
+            vertical-align: -2px;
+        }
+
+        /* 「更多」胶囊按钮：仅作用于链接自身 */
+        .sec-title .sec-more {
+            float: right;
+            font-size: 12px;
+            font-weight: normal;
+            color: #2e8b62;
+            background: rgba(62, 175, 124, .08);
+            border-radius: 12px;
+            padding: 2px 10px;
+        }
+
+        .sec-title .sec-more .layui-icon {
+            font-size: 12px;
+            margin-left: 2px;
+        }
+
+        a.sec-title {
+            display: block;
+            color: #1f2d26;
+        }
+
+        /* 按压反馈 */
+        a.sec-title:active .sec-more {
+            background: rgba(62, 175, 124, .18);
+        }
+
+        /* 精品推荐：横向滚动封面条 */
+        .rec-scroll {
+            display: flex;
+            overflow-x: auto;
+            white-space: nowrap;
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+
+        .rec-scroll::-webkit-scrollbar {
             width: 0;
             height: 0;
         }
 
-        .container::-webkit-scrollbar-track,
-        .container::-webkit-scrollbar-thumb {
-            display: none;
+        .rec-item {
+            flex: 0 0 auto;
+            width: 90px;
+            text-align: center;
+            margin-right: 10px;
         }
 
+        .rec-item:last-child {
+            margin-right: 0;
+        }
 
-        .item {
-            flex: 0 0 calc(100% / 10); /* 每个元素宽度为容器的十分之一 */
-            scroll-snap-align: start;
-            box-sizing: border-box;
+        .rec-item .rec-cover {
+            width: 90px;
+            height: 118px;
+            object-fit: cover;
+            border-radius: 6px;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
+        }
+
+        .rec-item .rec-name {
+            margin-top: 6px;
+            font-size: 12px;
+            color: #5c6b64;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        /* 书籍卡片（热门推荐） */
+        .book-card {
+            display: -webkit-flex;
+            display: flex;
+            padding: 10px 0;
+            border-bottom: 1px solid #f5f7f6;
+        }
+
+        .book-card:first-child {
+            padding-top: 0;
+        }
+
+        .book-card:last-child {
+            border-bottom: none;
+            padding-bottom: 0;
+        }
+
+        .book-card .book-cover img {
+            width: 88px;
+            height: 116px;
+            object-fit: cover;
+            border-radius: 6px;
+            display: block;
+        }
+
+        .book-card .book-info {
+            -webkit-flex: 1;
+            flex: 1;
+            min-width: 0;
+            margin-left: 12px;
+        }
+
+        .book-card .book-name {
+            color: #000;
+            font-size: 15px;
+            font-weight: 600;
+            line-height: 22px;
+        }
+
+        .book-card .book-author {
+            margin-top: 4px;
+            font-size: 12px;
+            color: #98a8a1;
+        }
+
+        /* 更新日期榜列表 */
+        .ur-item {
+            display: -webkit-flex;
+            display: flex;
+            -webkit-align-items: center;
+            align-items: center;
+            padding: 9px 0;
+            border-bottom: 1px solid #f5f7f6;
+        }
+
+        .ur-item:last-child {
+            border-bottom: none;
+            padding-bottom: 0;
+        }
+
+        .ur-item:first-child {
+            padding-top: 0;
+        }
+
+        .ur-num {
+            flex: 0 0 auto;
+            -webkit-flex: 0 0 auto;
+            width: 20px;
             text-align: center;
-            border-radius: 5px;
-            margin-right: 5px;
+            font-size: 14px;
+            font-style: italic;
+            font-weight: 700;
+            color: #c0cac5;
+        }
+
+        .ur-num-1 {
+            color: #e05c6e;
+        }
+
+        .ur-num-2 {
+            color: #ff9e57;
+        }
+
+        .ur-num-3 {
+            color: #3eaf7c;
+        }
+
+        .ur-info {
+            -webkit-flex: 1;
+            flex: 1;
+            min-width: 0;
+            margin-left: 8px;
+        }
+
+        .ur-top {
+            display: block;
+            font-size: 14px;
+            color: #333;
+        }
+
+        .ur-top .ur-author {
+            font-size: 12px;
+            color: #98a8a1;
+            margin-left: 8px;
+        }
+
+        .ur-sub {
+            margin-top: 3px;
+            font-size: 12px;
+            color: #b8c4bf;
+        }
+
+        .ur-time {
+            flex: 0 0 auto;
+            -webkit-flex: 0 0 auto;
+            font-size: 12px;
+            color: #b8c4bf;
+            margin-left: 10px;
         }
 
         .book_desc {
-            overflow: hidden;
-            text-overflow: ellipsis;
             display: -webkit-box;
             -webkit-line-clamp: 3;
             -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
             white-space: pre-wrap;
+            margin-top: 4px;
+            font-size: 12px;
+            line-height: 18px;
+            color: #98a8a1;
+        }
+
+        /* 快捷入口：上图标下文字，包裹在卡片内 */
+        .quick-entry {
+            display: flex;
+        }
+
+        .quick-entry .qe-item {
+            flex: 1;
+            display: block;
+            text-align: center;
+            color: #5c6b64;
+        }
+
+        .quick-entry .qe-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 52px;
+            height: 52px;
+            margin: 0 auto 6px auto;
+            border-radius: 50%;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, .10);
+        }
+
+        .quick-entry .qe-icon svg {
+            width: 26px;
+            height: 26px;
+        }
+
+        .quick-entry .qe-icon-lib {
+            background: linear-gradient(135deg, #3eaf7c, #6cc798);
+        }
+
+        .quick-entry .qe-icon-list {
+            background: linear-gradient(135deg, #ff9e57, #ffc184);
+        }
+
+        .quick-entry .qe-icon-user {
+            background: linear-gradient(135deg, #5aa4f4, #8cc3ff);
+        }
+
+        .quick-entry .qe-icon-rank {
+            background: linear-gradient(135deg, #ff6b81, #ff9d94);
+        }
+
+        /* 文字颜色随各自图标主色加深 */
+        .quick-entry .qe-item:nth-child(1) .qe-text {
+            color: #2e8b62;
+        }
+
+        .quick-entry .qe-item:nth-child(2) .qe-text {
+            color: #d97b3f;
+        }
+
+        .quick-entry .qe-item:nth-child(3) .qe-text {
+            color: #e05c6e;
+        }
+
+        .quick-entry .qe-item:nth-child(4) .qe-text {
+            color: #4a86cc;
+        }
+
+        .quick-entry .qe-text {
+            font-size: 13px;
         }
 
     </style>
@@ -100,128 +441,100 @@
 
 <!-- 你的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>
+<div class="site-header">
+    <img class="site-logo" th:src="${application.website.logo}" alt="logo">
+    <a class="header-msg" href="/user/message.html">
+        <i class="layui-icon">&#xe667;</i>
+        <span class="hm-badge" id="headerMsgBadge"></span>
+    </a>
+</div>
+
+<div class="search-bar">
+    <input id="title" type="text" placeholder="请输入书名·作者" autocomplete="off">
+    <button type="button" onclick="searchBooks()">搜索</button>
+</div>
+
+<div class="quick-entry-card">
+    <div class="quick-entry">
+    <a href="/book/bookclass.html" class="qe-item">
+        <span class="qe-icon qe-icon-lib">
+            <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
+                <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></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>
+        </span>
+        <span class="qe-text">书库</span>
+    </a>
+    <a href="/booklist/plaza.html" class="qe-item">
+        <span class="qe-icon qe-icon-list">
+            <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="8" y1="6" x2="21" y2="6"></line>
+                <line x1="8" y1="12" x2="21" y2="12"></line>
+                <line x1="8" y1="18" x2="21" y2="18"></line>
+                <line x1="3" y1="6" x2="3.01" y2="6"></line>
+                <line x1="3" y1="12" x2="3.01" y2="12"></line>
+                <line x1="3" y1="18" x2="3.01" y2="18"></line>
             </svg>
-        </a>
+        </span>
+        <span class="qe-text">书单</span>
+    </a>
+    <a href="/book/book_ranking.html" class="qe-item">
+        <span class="qe-icon qe-icon-rank">
+            <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
+                <polyline points="17 6 23 6 23 12"></polyline>
+            </svg>
+        </span>
+        <span class="qe-text">排行</span>
+    </a>
+    <a href="/user/userinfo.html" class="qe-item">
+        <span class="qe-icon qe-icon-user">
+            <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                <circle cx="12" cy="7" r="4"></circle>
+            </svg>
+        </span>
+        <span class="qe-text">个人中心</span>
+    </a>
+    </div>
+</div>
+<div class="sec-block">
+    <div class="sec-title">精品推荐</div>
 
+    <div class="rec-scroll" th:if="${bookMap['4']}">
+        <div class="rec-item" th:each="book,iterStat:${bookMap['4']}">
+            <a th:href="'/book/'+${book.bookId}+'.html'">
+                <img class="rec-cover" th:src="${book.picUrl}" alt="">
+                <div class="rec-name" th:text="${book.bookName}"></div>
+            </a>
+        </div>
     </div>
 </div>
 
+<div class="sec-block">
+    <div class="sec-title">热门推荐</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']}">
+    <div id="hotRecBooks" th:if="${bookMap['3']}">
+        <div class="book-card" th:each="book,iterStat : ${bookMap['3']}" th:if="${iterStat.index<6}">
+            <a class="book-cover" th:href="'/book/'+${book.bookId}+'.html'">
+                <img th:src="${book.picUrl}" alt="">
+            </a>
+            <div class="book-info">
                 <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>
-
+                    <div class="book-name line-limit-length" th:text="${book.bookName}"></div>
                 </a>
-
+                <div class="book-author line-limit-length" th:text="'作者：'+${book.authorName}"></div>
+                <div class="book_desc" th:utext="${book.bookDesc}"></div>
             </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 class="sec-block">
+    <a class="sec-title" href="javascript:moreNewBooks()">最新更新<span class="sec-more">更多</span></a>
+    <div id="updateRankBooks"></div>
+</div>
+
 <div th:replace="mobile/common/footer :: footer">
 </div>
 <div th:replace="mobile/common/js :: js">
@@ -233,6 +546,19 @@
 <script>
 
 
+    // 右上角未读消息角标（未登录或无未读时不显示，点击进消息页会自动引导登录）
+    $.ajax({
+        type: "get",
+        url: "/user/message/unreadCount",
+        data: {},
+        dataType: "json",
+        success: function (data) {
+            if (data.code == 200 && data.data > 0) {
+                $("#headerMsgBadge").text(data.data > 99 ? '99+' : data.data).show();
+            }
+        }
+    });
+
     //更新榜单查询
     $.ajax({
         type: "get",
@@ -250,20 +576,14 @@
                         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>");
+                    updateRankBookHtml += ("<div class=\"ur-item\">\n" +
+                        "        <span class=\"ur-num" + (i < 3 ? " ur-num-" + (i + 1) : "") + "\">" + (i + 1) + "</span>\n" +
+                        "        <div class=\"ur-info\">\n" +
+                        "            <a class=\"ur-top line-limit-length\" href=\"/book/" + updateRankBook.id + ".html\">" + updateRankBook.bookName + "<span class=\"ur-author\">" + updateRankBook.authorName + "</span></a>\n" +
+                        "            <div class=\"ur-sub line-limit-length\">" + (updateRankBook.bookDesc || "") + "</div>\n" +
+                        "        </div>\n" +
+                        "        <span class=\"ur-time\">" + updateRankBook.lastIndexUpdateTime.substr(0, 11) + "</span>\n" +
+                        "    </div>");
 
 
                 }
@@ -281,18 +601,25 @@
 
 
     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);
     }
 
+    // 回车触发搜索
+    $("#title").keypress(function (e) {
+        if (e.which == 13) {
+            searchBooks();
+        }
+    });
+
     function toMyCollect() {
         var token = localStorage.getItem("token");
         if (token) {
-            window.location.href = "/book/book_ranking.html?token=" + token;
+            window.location.href = "/user/favorites.html";
         } else {
             window.location.href = "/user/login.html";
         }
diff --git a/templates/green/html/mobile/pay/index.html b/templates/green/html/mobile/pay/index.html
index 98a0a97..7cad43b 100644
--- a/templates/green/html/mobile/pay/index.html
+++ b/templates/green/html/mobile/pay/index.html
@@ -1,6 +1,4 @@
 <!DOCTYPE html>
-<html lang="en">
-<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
@@ -17,68 +15,105 @@
     <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;
+        body {
+            background: #f5f7f6;
         }
 
         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;
+        /* 账户卡片 */
+        .account-card {
+            margin: 12px;
+            padding: 16px;
+            background: linear-gradient(135deg, #3eaf7c, #2c8a61);
+            border-radius: 10px;
+            color: #fff;
+            box-shadow: 0 4px 12px rgba(62, 175, 124, .25);
         }
 
-        img {
-            width: 130px;
-            height: 180px;
+        .account-card .acc-row {
+            font-size: 13px;
+            opacity: .9;
         }
 
-        .payHead {
-            height: 36px;
-            line-height: 36px;
-            padding: 20px 0 50px;
-            margin: 0 24px;
-            font-size: 16px;
-            border-bottom: 1px solid #eaeaea;
-            zoom: 1;
+        .account-card .acc-bal {
+            margin-top: 14px;
+            font-size: 12px;
+            opacity: .85;
         }
 
-        .pay_way li {
+        .account-card .acc-num {
+            margin-top: 2px;
+            font-size: 28px;
+            font-weight: 600;
+            line-height: 34px;
+        }
+
+        /* 区块标题 */
+        .section-label {
+            margin: 16px 12px 4px;
+            font-size: 15px;
+            font-weight: 600;
+            color: #1f2d26;
+        }
+
+        /* 金额九宫格 */
+        .amount-grid {
+            display: -webkit-flex;
+            display: flex;
+            -webkit-flex-wrap: wrap;
+            flex-wrap: wrap;
+            padding: 4px 8px;
+        }
+
+        .amount-item {
+            -webkit-flex: 0 0 31%;
+            flex: 0 0 31%;
+            width: 31%;
+            margin: 8px 1.16%;
+            padding: 14px 0 12px;
+            background: #fff;
+            border: 1px solid #e6ece9;
+            border-radius: 10px;
             text-align: center;
             cursor: pointer;
-            border: 2px solid #eee;
-            margin: 20px 0px 3px 43px;
-            padding-top: 20px;
-            padding-bottom: 20px;
+            -webkit-tap-highlight-color: transparent;
         }
 
+        .amount-item strong {
+            display: block;
+            font-size: 17px;
+            font-weight: 600;
+            color: #1f2d26;
+        }
+
+        .amount-item .pay_mn {
+            display: block;
+            margin-top: 4px;
+            font-size: 11px;
+            color: #98a8a1;
+        }
+
+        .amount-item:active {
+            border-color: #3eaf7c;
+            background: rgba(62, 175, 124, .06);
+        }
+
+        .amount-item:active strong {
+            color: #2e8b62;
+        }
+
+        /* 汇率提示 */
+        .pay-tip {
+            margin: 10px 12px 20px;
+            text-align: center;
+            font-size: 12px;
+            color: #98a8a1;
+        }
     </style>
 </head>
 <body>
@@ -95,59 +130,24 @@
 <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="width:10%;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="width:10%;float: right;margin-right: 10px"><a href="/">
-        <i style="font-size: 20px;color: #fff;" class="layui-icon">&#xe68e;</i>
-    </a>
-    </div>
-</div>
-<div id="body" class="layui-row">
-    <div class="payHead cf">
-        <div class="fl">
-            充值账号：<span class="user_name" id="my_name">13560421324</span>&nbsp;&nbsp;&nbsp;&nbsp;余额：<em
-                style="color: #3eaf7c" id="accountBalance">10</em> 屋币<!--<em class="red">+0</em>代金券-->
-        </div>
-    </div>
-    <div id="payAmount" class="pay_way layui-row" style="text-align: center;padding-top: 20px;">
-        <h5>选择充值金额</h5>
-        <li vals="10" class="layui-col-xs4 layui-col-sm3 layui-col-md2">
-            <div class="layui-panel">
-                <div><strong>10元</strong><br><span class="pay_mn">1000屋币</span></div>
-            </div>
-        </li>
-        <li vals="30" class="layui-col-xs4 layui-col-sm3 layui-col-md2">
-            <div class="layui-panel">
-                <div><strong>30元</strong><br><span class="pay_mn">3000屋币</span></div>
-            </div>
-        </li>
-        <li vals="50" class="layui-col-xs4 layui-col-sm3 layui-col-md2">
-            <div class="layui-panel">
-                <div><strong>50元</strong><br><span class="pay_mn">5000屋币</span></div>
-            </div>
-        </li>
-        <li vals="100" class="layui-col-xs4 layui-col-sm3 layui-col-md2">
-            <div class="layui-panel">
-                <div><strong>100元</strong><br><span class="pay_mn">10000屋币</span></div>
-            </div>
-        </li>
-        <li vals="200" class="layui-col-xs4 layui-col-sm3 layui-col-md2">
-            <div class="layui-panel">
-                <div><strong>200元</strong><br><span class="pay_mn">20000屋币</span></div>
-            </div>
-        </li>
-        <li vals="500" class="layui-col-xs4 layui-col-sm3 layui-col-md2">
-            <div class="layui-panel">
-                <div><strong>500元</strong><br><span class="pay_mn">50000屋币</span></div>
-            </div>
-        </li>
+<div th:replace="mobile/common/header :: pageHeader('充值', null)"></div>
+<div id="body">
+    <div class="account-card">
+        <div class="acc-row">充值账号：<span id="my_name">-</span></div>
+        <div class="acc-bal">当前余额（屋币）</div>
+        <div class="acc-num"><span id="accountBalance">0</span></div>
+    </div>
 
+    <div class="section-label">选择充值金额</div>
+    <div id="payAmount" class="amount-grid">
+        <div class="amount-item" vals="10"><strong>10元</strong><span class="pay_mn">1000屋币</span></div>
+        <div class="amount-item" vals="30"><strong>30元</strong><span class="pay_mn">3000屋币</span></div>
+        <div class="amount-item" vals="50"><strong>50元</strong><span class="pay_mn">5000屋币</span></div>
+        <div class="amount-item" vals="100"><strong>100元</strong><span class="pay_mn">10000屋币</span></div>
+        <div class="amount-item" vals="200"><strong>200元</strong><span class="pay_mn">20000屋币</span></div>
+        <div class="amount-item" vals="500"><strong>500元</strong><span class="pay_mn">50000屋币</span></div>
     </div>
+    <div class="pay-tip">当前汇率：1元 = 100屋币，点击金额即可通过支付宝支付</div>
 
     <form action="/pay/aliPay" method="post" id="payform" name="payform">
 
@@ -196,7 +196,7 @@
         }
     })
 
-    $("#payAmount").find("li").click(function () {
+    $("#payAmount").find(".amount-item").click(function () {
 
         $("#pValue").val($(this).attr("vals"));
 
diff --git a/templates/green/html/mobile/user/favorites.html b/templates/green/html/mobile/user/favorites.html
index 3630485..0e8f018 100644
--- a/templates/green/html/mobile/user/favorites.html
+++ b/templates/green/html/mobile/user/favorites.html
@@ -1,6 +1,4 @@
 <!DOCTYPE html>
-<html lang="en">
-<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
@@ -16,46 +14,19 @@
 
     <div th:include="mobile/common/css :: css"></div>
 
-    </div>
-
     <style type="text/css">
 
         body {
-
-            -webkit-user-select: none; /* Chrome, Safari, Opera */
-
-
-            -moz-user-select: none; /* Firefox */
-
-
-            -ms-user-select: none; /* Internet Explorer/Edge */
-
-
-            user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera, and Firefox */
-
-
+            background: #f5f7f6;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
         }
 
 
-        .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;
+        #bookList {
+            padding-top: 10px;
         }
 
         div, p {
@@ -63,30 +34,146 @@
             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;
+        /* 书架书卡片 */
+        .shelf-item {
+            display: -webkit-flex;
+            display: flex;
+            margin: 0 12px 10px;
+            padding: 12px;
+            background: #fff;
+            border-radius: 10px;
+            box-shadow: 0 2px 8px rgba(62, 175, 124, .08);
+            -webkit-tap-highlight-color: transparent;
         }
 
-        img {
-            width: 130px;
-            height: 180px;
+        .shelf-item:active {
+            opacity: .88;
         }
 
-        #tipLayer {
-            display: none;
-            position: absolute;
-            background-color: rgba(255, 0, 0, 0.8);
-            color: white;
-            padding: 5px 10px;
-            border-radius: 3px;
+        .shelf-item .cover {
+            -webkit-flex: 0 0 auto;
+            flex: 0 0 auto;
+            width: 64px;
+            height: 88px;
+            border-radius: 4px;
+            object-fit: cover;
+            background: #f0f2f1;
+        }
+
+        .shelf-item .info {
+            -webkit-flex: 1;
+            flex: 1;
+            min-width: 0;
+            margin-left: 10px;
+        }
+
+        .shelf-item .book-name {
+            font-size: 15px;
+            font-weight: 600;
+            color: #1f2d26;
+            line-height: 22px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .shelf-item .meta-row {
+            display: -webkit-flex;
+            display: flex;
+            -webkit-align-items: center;
+            align-items: center;
+            margin-top: 6px;
+        }
+
+        .shelf-item .tag-pill {
+            font-size: 10px;
+            line-height: 16px;
+            padding: 0 7px;
+            border-radius: 8px;
+            background: rgba(62, 175, 124, .12);
+            color: #2e8b62;
+            margin-right: 6px;
+        }
+
+        .shelf-item .tag-pill.gray {
+            background: #f0f2f1;
+            color: #8a968f;
+        }
+
+        .shelf-item .update-time {
+            margin-left: auto;
+            font-size: 11px;
+            color: #98a8a1;
+        }
+
+        .shelf-item .author {
+            margin-top: 5px;
+            font-size: 12px;
+            color: #8a968f;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .shelf-item .desc {
+            margin-top: 5px;
+            font-size: 12px;
+            color: #98a8a1;
+            line-height: 17px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        /* 空书架 */
+        .empty-tip {
+            text-align: center;
+            color: #98a8a1;
+            font-size: 14px;
+            line-height: 24px;
+            padding: 60px 20px;
+        }
+
+        .empty-tip .empty-link {
+            display: inline-block;
+            margin-top: 12px;
+            padding: 6px 20px;
+            background: rgba(62, 175, 124, .1);
+            color: #2e8b62;
+            font-size: 13px;
+            border-radius: 16px;
+        }
+
+        /* 分页 */
+        .page-box {
+            text-align: center;
+            padding: 6px 12px 16px;
+        }
+
+        /* 固定移出按钮 */
+        .shelf-item .card-foot {
+            margin-top: 8px;
+            text-align: right;
+        }
+
+        .btn-remove {
+            display: inline-block;
+            font-size: 11px;
+            line-height: 20px;
+            padding: 0 12px;
+            border-radius: 11px;
+            border: 1px solid #eabfc6;
+            color: #e05c6e;
+            background: #fff;
             cursor: pointer;
-            z-index: 1000;
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        .btn-remove:active {
+            background: rgba(224, 92, 110, .08);
         }
 
     </style>
@@ -104,30 +191,13 @@
 <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="width:10%;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="width:10%;float: right;margin-right: 10px"><a href="/">
-        <i style="font-size: 20px;color: #fff;" class="layui-icon">&#xe68e;</i>
-    </a>
-    </div>
-</div>
+<div th:replace="mobile/common/header :: pageHeader('我的书架', null)"></div>
 <div id="body">
     <div id="bookList">
 
 
     </div>
-    <div id="tipLayer"
-         style="display:none; position:absolute; background-color:rgba(255, 0, 0, 0.8); color:white; padding:5px; border-radius:3px; cursor:pointer;">
-        移出书架
-    </div>
-
-
-    <div id="books" style="text-align: center;"></div>
+    <div id="books" class="page-box"></div>
 
 </div>
 <div th:replace="mobile/common/footer :: footer">
@@ -139,8 +209,6 @@
 
 <script>
 
-    var timeout, isLongPress = false;
-
     search(1, 20);
 
     function search(curr, limit) {
@@ -167,61 +235,30 @@
                             book.bookDesc = book.bookDesc.replace(/<[^>]+>/g, "").replace(/\s+/g, "").replace(/&nbsp;/g, "");
                         }
 
-                        bookListHtml += ("<div id='" + book.bookId + "' onclick='read(\"" + book.bookId + "\",\"" + book.preContentId + "\")' class=\"item layui-row\" style=\"margin-bottom:10px;padding:10px;background: #f2f2f2\">\n" +
-                            "            <div class=\"layui-col-xs6 layui-col-sm3 layui-col-md2 layui-col-lg2\" style=\"text-align: center\">\n" +
-                            "                <img style='width: 130px;height: 180px' align=\"center\"\n" +
-                            "                     src=\"" + book.picUrl + "\"/>\n" +
-                            "            </div>\n" +
-                            "        \n" +
-                            "        <div style=\"padding: 10px\" class=\"layui-col-xs6 layui-col-sm8 layui-col-md8 layui-col-lg8\">\n" +
-                            "                <div class=\"line-limit-length\" style=\";color: #000;font-size: 15px\">" + book.bookName + "</div>\n" +
-                            "            <div style=\";color: #4c6978;float: right;\"><i style=\"color: red\"></i></div>\n" +
-                            "                <div style=\";color: #a6a6a6;\" class=\"line-limit-length\">作者：" + book.authorName + "</div>\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 style=\"margin-top: 5px;color: #a6a6a6;\">简介：" + (book.bookDesc ? (book.bookDesc.length > 15 ? (book.bookDesc.substr(0, 15) + "...") : book.bookDesc) : book.bookDesc) + "</div>\n" +
-                            "\n" +
-                            "\n" +
+                        bookListHtml += ("<div id='" + book.bookId + "' class=\"item shelf-item\" onclick='read(\"" + book.bookId + "\",\"" + book.preContentId + "\")'" +
+                            ">\n" +
+                            "    <img class=\"cover\" src=\"" + book.picUrl + "\"/>\n" +
+                            "    <div class=\"info\">\n" +
+                            "        <div class=\"book-name\">" + book.bookName + "</div>\n" +
+                            "        <div class=\"meta-row\">\n" +
+                            "            <span class=\"tag-pill\">" + book.catName + "</span>\n" +
+                            "            <span class=\"tag-pill gray\">" + (book.bookStatus == 0 ? '连载' : '完结') + "</span>\n" +
+                            "            <span class=\"update-time\">" + book.lastIndexUpdateTime.substr(0, 11) + " 更新</span>\n" +
                             "        </div>\n" +
-                            "\n" +
-                            "    </div>");
+                            "        <div class=\"author\">作者：" + book.authorName + "</div>\n" +
+                            "        <div class=\"desc\">简介：" + (book.bookDesc ? book.bookDesc : '暂无简介') + "</div>\n" +
+                            "        <div class=\"card-foot\"><span class=\"btn-remove\">移出书架</span></div>\n" +
+                            "    </div>\n" +
+                            "</div>");
                     }
-                    $("#bookList").html(bookListHtml);
+                    $("#bookList").html(bookListHtml || "<div class=\"empty-tip\">书架空空如也，先去书城挑几本好书吧~<br><a href=\"/\" class=\"empty-link\">去书城逛逛</a></div>");
 
 
-                    $(".item").on('touchstart', function (e) {
-                        var element = $(this);
-                        // 清除可能存在的定时器
-                        clearTimeout(timeout);
-                        isLongPress = false;
-
-                        // 获取触摸点位置
-                        var touch = e.originalEvent.touches[0];
-
-                        // 设置一个定时器，在500ms后触发（可以根据需要调整时间）
-                        timeout = setTimeout(function () {
-                            e.preventDefault();
-                            showTip(touch, element);
-                        }, 1000);
-                    }).on('touchend', function (e) {
-                        if (!isLongPress) {
-                            // 如果没有发生长按，则执行点击事件的逻辑
-                            clearTimeout(timeout);
-                        }
-                    }).on('touchmove', function () {
-                        clearTimeout(timeout);
-                        hideTip();
-                    }).on('contextmenu', function (e) {
-                        e.preventDefault();
-                    });
-
-                    $('#tipLayer').click(function () {
-                        // 点击tips层时删除对应的.item元素
-                        removeFromBookShelf($(this).data('target').attr("id"));
-                        $(this).data('target').remove();
-                        hideTip();
+                    $(".btn-remove").on('click', function (e) {
+                        e.stopPropagation(); // 不触发卡片的继续阅读跳转
+                        var $item = $(this).closest('.item');
+                        removeFromBookShelf($item.attr('id'));
+                        $item.remove();
                     });
 
 
@@ -263,24 +300,6 @@
 
     }
 
-    function showTip(touchEvent, element) {
-        isLongPress = true;
-        // 根据触摸点位置设置弹出层的位置
-        $('#tipLayer')
-            .css({
-                top: touchEvent.pageY - 100, // 调整这个值以改变弹出层相对于触摸点的位置
-                left: touchEvent.pageX - ($('#tipLayer').outerWidth() / 2)
-            })
-            .data('target', element) // 存储目标元素以便后续操作
-            .show();
-    }
-
-    function hideTip() {
-        isLongPress = false;
-        $('#tipLayer').hide().removeData('target'); // 隐藏tips并清除数据
-    }
-
-
     function searchByAllCondition(curr, limit, newKeyword) {
         var toUrl = "/book/search?curr=" + curr + "&limit=" + limit;
         var ids = $("#ids").val();
@@ -326,11 +345,7 @@
     }
 
     function read(bookId, contentId) {
-        if (isLongPress) {
-            return false;
-        }
         location.href = '/book/' + bookId + "/" + contentId + ".html"
-        hideTip();
     }
 
 </script>
diff --git a/templates/green/html/mobile/user/login.html b/templates/green/html/mobile/user/login.html
index b5849d9..1980e2a 100644
--- a/templates/green/html/mobile/user/login.html
+++ b/templates/green/html/mobile/user/login.html
@@ -13,18 +13,7 @@
 </head>
 <body id="read">
 
-<div style="height: 50px;line-height: 50px;text-align: center" class="layui-header header header-doc  layui-bg-cyan">
-
-    <div style="width:10%;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="width:10%;float: right;margin-right: 10px"><a href="/">
-        <i style="font-size: 20px;color: #fff;" class="layui-icon">&#xe68e;</i>
-    </a>
-    </div>
-</div>
+<div th:replace="mobile/common/header :: pageHeader('登录', null)"></div>
 <form lay-filter="loginForm" id="form1" style="height: 500px;padding-top:30px;padding-right: 20px" class="layui-form"
       action="">
     <input type="hidden" id="bookIdHidden" name="bookId" th:value="${bookId}"/>
diff --git a/templates/green/html/mobile/user/read_history.html b/templates/green/html/mobile/user/read_history.html
index 77365bf..23909e6 100644
--- a/templates/green/html/mobile/user/read_history.html
+++ b/templates/green/html/mobile/user/read_history.html
@@ -1,6 +1,4 @@
 <!DOCTYPE html>
-<html lang="en">
-<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
@@ -16,30 +14,13 @@
 
     <div th:include="mobile/common/css :: css"></div>
 
-    </div>
-
     <style type="text/css">
-
-
-        .line-limit-length {
-
-            overflow: hidden;
-
-            text-overflow: ellipsis;
-
-            white-space: nowrap;
-
+        body {
+            background: #f5f7f6;
         }
 
-        .indexP p a {
-            color: #4c6978;
-        }
-
-        .Readarea {
-            font-size: 18px;
-            line-height: 35px;
-            padding: 10px;
-            color: #333;
+        #bookList {
+            padding-top: 10px;
         }
 
         div, p {
@@ -47,21 +28,125 @@
             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;
+        /* 历史书卡片：整卡一个链接 */
+        .history-item {
+            display: -webkit-flex;
+            display: flex;
+            margin: 0 12px 10px;
+            padding: 12px;
+            background: #fff;
+            border-radius: 10px;
+            box-shadow: 0 2px 8px rgba(62, 175, 124, .08);
+            -webkit-tap-highlight-color: transparent;
+            color: #1f2d26;
         }
 
-        img {
-            width: 130px;
-            height: 180px;
+        .history-item:active {
+            opacity: .88;
         }
 
+        .history-item .cover {
+            -webkit-flex: 0 0 auto;
+            flex: 0 0 auto;
+            width: 64px;
+            height: 88px;
+            border-radius: 4px;
+            object-fit: cover;
+            background: #f0f2f1;
+        }
+
+        .history-item .info {
+            -webkit-flex: 1;
+            flex: 1;
+            min-width: 0;
+            margin-left: 10px;
+        }
+
+        .history-item .book-name {
+            font-size: 15px;
+            font-weight: 600;
+            color: #1f2d26;
+            line-height: 22px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .history-item .meta-row {
+            display: -webkit-flex;
+            display: flex;
+            -webkit-align-items: center;
+            align-items: center;
+            margin-top: 6px;
+        }
+
+        .history-item .tag-pill {
+            font-size: 10px;
+            line-height: 16px;
+            padding: 0 7px;
+            border-radius: 8px;
+            background: rgba(62, 175, 124, .12);
+            color: #2e8b62;
+            margin-right: 6px;
+        }
+
+        .history-item .tag-pill.gray {
+            background: #f0f2f1;
+            color: #8a968f;
+        }
+
+        .history-item .update-time {
+            margin-left: auto;
+            font-size: 11px;
+            color: #98a8a1;
+        }
+
+        .history-item .author {
+            margin-top: 5px;
+            font-size: 12px;
+            color: #8a968f;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .history-item .desc {
+            margin-top: 5px;
+            font-size: 12px;
+            color: #98a8a1;
+            line-height: 17px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        /* 空记录 */
+        .empty-tip {
+            text-align: center;
+            color: #98a8a1;
+            font-size: 14px;
+            line-height: 24px;
+            padding: 60px 20px;
+        }
+
+        .empty-tip .empty-link {
+            display: inline-block;
+            margin-top: 12px;
+            padding: 6px 20px;
+            background: rgba(62, 175, 124, .1);
+            color: #2e8b62;
+            font-size: 13px;
+            border-radius: 16px;
+        }
+
+        /* 分页 */
+        .page-box {
+            text-align: center;
+            padding: 6px 12px 16px;
+        }
     </style>
 </head>
 <body>
@@ -78,18 +163,7 @@
 <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="width:10%;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="width:10%;float: right;margin-right: 10px"><a href="/">
-        <i style="font-size: 20px;color: #fff;" class="layui-icon">&#xe68e;</i>
-    </a>
-    </div>
-</div>
+<div th:replace="mobile/common/header :: pageHeader('阅读历史', null)"></div>
 <div id="body">
     <div id="bookList">
 
@@ -97,7 +171,7 @@
     </div>
 
 
-    <div id="books" style="text-align: center;"></div>
+    <div id="books" class="page-box"></div>
 
 </div>
 <div th:replace="mobile/common/footer :: footer">
@@ -136,34 +210,21 @@
                             book.bookDesc = book.bookDesc.replace(/<[^>]+>/g, "").replace(/\s+/g, "").replace(/&nbsp;/g, "");
                         }
 
-                        bookListHtml += ("<div class=\"layui-row\" style=\"margin-bottom:10px;padding:10px;background: #f2f2f2\">\n" +
-                            "        <a href='/book/" + book.bookId + "/" + book.preContentId + ".html'>\n" +
-                            "            <div class=\"layui-col-xs6 layui-col-sm3 layui-col-md2 layui-col-lg2\" style=\"text-align: center\">\n" +
-                            "                <img style='width: 130px;height: 180px' align=\"center\"\n" +
-                            "                     src=\"" + book.picUrl + "\"/>\n" +
-                            "\n" +
-                            "            </div>\n" +
-                            "        </a>\n" +
-                            "        <div style=\"padding: 10px\" class=\"layui-col-xs6 layui-col-sm8 layui-col-md8 layui-col-lg8\">\n" +
-                            "            <a href='/book/" + book.bookId + "/" + book.preContentId + ".html'>\n" +
-                            "                <div class=\"line-limit-length\" style=\";color: #000;font-size: 15px\">" + book.bookName + "</div>\n" +
-                            "            </a>\n" +
-                            "            <div style=\";color: #4c6978;float: right;\"><i style=\"color: red\"></i></div>\n" +
-                            "            <a href='/book/" + book.bookId + "/" + book.preContentId + ".html'>\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 style=\"margin-top: 5px;color: #a6a6a6;\">简介：" + (book.bookDesc ? (book.bookDesc.length > 15 ? (book.bookDesc.substr(0, 15) + "...") : book.bookDesc) : book.bookDesc) + "</div>\n" +
-                            "\n" +
-                            "\n" +
+                        bookListHtml += ("<a class=\"history-item\" href='/book/" + book.bookId + "/" + book.preContentId + ".html'>\n" +
+                            "    <img class=\"cover\" src=\"" + book.picUrl + "\"/>\n" +
+                            "    <div class=\"info\">\n" +
+                            "        <div class=\"book-name\">" + book.bookName + "</div>\n" +
+                            "        <div class=\"meta-row\">\n" +
+                            "            <span class=\"tag-pill\">" + book.catName + "</span>\n" +
+                            "            <span class=\"tag-pill gray\">" + (book.bookStatus == 0 ? '连载' : '完结') + "</span>\n" +
+                            "            <span class=\"update-time\">" + book.lastIndexUpdateTime.substr(0, 11) + " 更新</span>\n" +
                             "        </div>\n" +
-                            "\n" +
-                            "    </div>");
+                            "        <div class=\"author\">作者：" + book.authorName + "</div>\n" +
+                            "        <div class=\"desc\">简介：" + (book.bookDesc ? book.bookDesc : '暂无简介') + "</div>\n" +
+                            "    </div>\n" +
+                            "</a>");
                     }
-                    $("#bookList").html(bookListHtml);
+                    $("#bookList").html(bookListHtml || "<div class=\"empty-tip\">还没有阅读记录，去书城发现好书吧~<br><a href=\"/\" class=\"empty-link\">去书城逛逛</a></div>");
 
                     layui.use('laypage', function () {
                         var laypage = layui.laypage;
diff --git a/templates/green/html/mobile/user/register.html b/templates/green/html/mobile/user/register.html
index e192633..121d783 100644
--- a/templates/green/html/mobile/user/register.html
+++ b/templates/green/html/mobile/user/register.html
@@ -13,18 +13,7 @@
 </head>
 <body id="read">
 
-<div style="height: 50px;line-height: 50px;text-align: center" class="layui-header header header-doc  layui-bg-cyan">
-
-    <div style="width:10%;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="width:10%;float: right;margin-right: 10px"><a href="/">
-        <i style="font-size: 20px;color: #fff;" class="layui-icon">&#xe68e;</i>
-    </a>
-    </div>
-</div>
+<div th:replace="mobile/common/header :: pageHeader('注册', null)"></div>
 <form lay-filter="loginForm" id="form1" style="height: 500px;padding-top:30px;padding-right: 20px" class="layui-form"
       action="">
     <input type="hidden" id="bookIdHidden" name="bookId" th:value="${bookId}"/>
diff --git a/templates/green/html/mobile/user/userinfo.html b/templates/green/html/mobile/user/userinfo.html
index 38e9716..d2f2845 100644
--- a/templates/green/html/mobile/user/userinfo.html
+++ b/templates/green/html/mobile/user/userinfo.html
@@ -16,51 +16,164 @@
     <div th:include="mobile/common/css :: css"></div>
 
     <style>
-
-        .line-limit-length {
-
-            overflow: hidden;
-
-            text-overflow: ellipsis;
-
-            white-space: nowrap;
-
+        body {
+            background: #f5f7f6;
         }
 
-        .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 {
-            position: relative;
-            display: inline-block;
-            vertical-align: middle;
-            line-height: 50px;
-            padding: 0 20px;
+        /* 资料卡 */
+        .profile-card {
+            display: -webkit-flex;
+            display: flex;
+            -webkit-align-items: center;
+            align-items: center;
+            margin: 12px;
+            padding: 16px;
+            background: linear-gradient(135deg, #3eaf7c, #2c8a61);
+            border-radius: 10px;
             color: #fff;
-            float: right;
+            box-shadow: 0 4px 12px rgba(62, 175, 124, .25);
         }
 
-        .user_link a {
-
-            color: #fff;
-        }
-
-        .user_big_head {
-            width: 80px;
-            height: 80px;
+        .profile-card .avatar {
+            -webkit-flex: 0 0 auto;
+            flex: 0 0 auto;
+            width: 64px;
+            height: 64px;
             border-radius: 50%;
+            object-fit: cover;
+            border: 2px solid rgba(255, 255, 255, .5);
+            background: #fff;
         }
 
+        .profile-card .p-info {
+            -webkit-flex: 1;
+            flex: 1;
+            min-width: 0;
+            margin-left: 12px;
+        }
+
+        .profile-card .p-name {
+            font-size: 17px;
+            font-weight: 600;
+            line-height: 24px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .profile-card .p-name svg {
+            vertical-align: middle;
+            margin-left: 4px;
+        }
+
+        .profile-card .p-bal {
+            margin-top: 6px;
+            font-size: 12px;
+            opacity: .9;
+        }
+
+        .profile-card .p-bal em {
+            font-style: normal;
+            font-weight: 600;
+            font-size: 15px;
+        }
+
+        /* 功能列表 */
+        .menu-card {
+            margin: 0 12px 12px;
+            background: #fff;
+            border-radius: 10px;
+            box-shadow: 0 2px 8px rgba(62, 175, 124, .08);
+            overflow: hidden;
+        }
+
+        .menu-item {
+            display: -webkit-flex;
+            display: flex;
+            -webkit-align-items: center;
+            align-items: center;
+            height: 50px;
+            padding: 0 14px;
+            font-size: 15px;
+            color: #1f2d26;
+            border-bottom: 1px solid #f5f7f6;
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        .menu-item:last-child {
+            border-bottom: none;
+        }
+
+        .menu-item:active {
+            background: #f7f9f8;
+        }
+
+        .menu-item .mi-icon {
+            -webkit-flex: 0 0 auto;
+            flex: 0 0 auto;
+            width: 28px;
+            text-align: center;
+            line-height: 1;
+        }
+
+        .menu-item .mi-icon .layui-icon {
+            font-size: 22px;
+            color: #3eaf7c;
+        }
+
+        .menu-item .mi-text {
+            -webkit-flex: 1;
+            flex: 1;
+            min-width: 0;
+            margin-left: 10px;
+        }
+
+        .menu-item .mi-arrow {
+            -webkit-flex: 0 0 auto;
+            flex: 0 0 auto;
+            width: 7px;
+            height: 7px;
+            border-right: 1.5px solid #c4cec9;
+            border-top: 1.5px solid #c4cec9;
+            -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+        }
+
+        /* 菜单未读消息角标：主题绿渐变，与首页消息角标同体系 */
+        .menu-item .mi-badge {
+            -webkit-flex: 0 0 auto;
+            flex: 0 0 auto;
+            display: none;
+            min-width: 18px;
+            padding: 0 5px;
+            margin-right: 8px;
+            line-height: 18px;
+            text-align: center;
+            font-size: 11px;
+            color: #fff;
+            background: linear-gradient(135deg, #3eaf7c, #6cc798);
+            border-radius: 9px;
+            box-shadow: 0 2px 4px rgba(62, 175, 124, .30);
+        }
+
+        /* 退出登录 */
+        .logout-card {
+            display: block;
+            margin: 0 12px 12px;
+            height: 46px;
+            line-height: 46px;
+            text-align: center;
+            font-size: 15px;
+            color: #e05c6e;
+            background: #fff;
+            border-radius: 10px;
+            box-shadow: 0 2px 8px rgba(62, 175, 124, .08);
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        .logout-card:active {
+            background: #fdf3f4;
+        }
     </style>
 
 
@@ -69,25 +182,12 @@
 <div id="body">
 
     <!-- 你的HTML代码 -->
-    <div style="height: 50px;line-height: 50px;text-align: center"
-         class="layui-header header header-doc  layui-bg-cyan">
+    <div th:replace="mobile/common/header :: pageHeader('用户中心', null)"></div>
 
-        <div style="width:10%;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="width:10%;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-colla-item">
-
-        <div class="layui-container" style="padding: 50px;text-align: center">
-            <img id="imgLogo" class="user_big_head" src="/images/man.png">
-            <div style="padding: 10px;font-size: 18px"><span id="my_name">梦入神机</span>
+    <div class="profile-card">
+        <img id="imgLogo" class="avatar" src="/images/man.png">
+        <div class="p-info">
+            <div class="p-name"><span id="my_name">未登录</span>
                 <svg id="boyIcon" style="display: none" t="1693635090733" class="icon" viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
@@ -103,110 +203,69 @@
                           fill="#d4237a" p-id="3687"></path>
                 </svg>
             </div>
-            <div style="padding: 5px;">账户余额：<span id="accountBalance" style="color: #3eaf7c">3000</span> 屋币</div>
-
+            <div class="p-bal">账户余额：<em id="accountBalance">0</em> 屋币</div>
         </div>
     </div>
 
-
-    <div style="clear: both"></div>
-    <a
-            href="/pay/index.html">
-
-        <div
-                style="background-color:#fafafa;text-align: left;padding:20px 10px 30px;color: #000;font-size: 16px">
-            <div style="float: left;">
-                <svg t="1697073258970" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                     xmlns="http://www.w3.org/2000/svg" p-id="4079" width="25px" height="25px">
-                    <path d="M768 30.72 283.306667 30.72c-51.2 0-98.986667 44.373333-98.986667 98.986667l0 747.52c0 51.2 44.373333 95.573333 98.986667 95.573333l300.373333 0c0 0 71.68 0 116.053333 23.893333 3.413333 0 3.413333 3.413333 6.826667 3.413333 6.826667 0 10.24-3.413333 13.653333-6.826667 3.413333-6.826667 0-17.066667-6.826667-20.48-51.2-30.72-126.293333-30.72-129.706667-30.72L283.306667 942.08c-37.546667 0-64.853333-30.72-64.853333-64.853333L218.453333 129.706667c0-37.546667 30.72-64.853333 64.853333-64.853333l484.693333 0c37.546667 0 68.266667 30.72 68.266667 64.853333l0 747.52c0 37.546667-30.72 64.853333-68.266667 64.853333-6.826667 0-17.066667 6.826667-17.066667 17.066667s6.826667 17.066667 17.066667 17.066667c51.2 0 98.986667-44.373333 98.986667-95.573333L866.986667 129.706667C866.986667 78.506667 819.2 30.72 768 30.72z"
-                          fill="#3eaf7c" p-id="4080"></path>
-                    <path d="M604.16 102.4 443.733333 102.4c-6.826667 0-17.066667 6.826667-17.066667 17.066667S436.906667 136.533333 443.733333 136.533333l160.426667 0c6.826667 0 17.066667-6.826667 17.066667-17.066667S610.986667 102.4 604.16 102.4z"
-                          fill="#3eaf7c" p-id="4081"></path>
-                    <path d="M344.746667 307.2c-6.826667 6.826667-6.826667 17.066667 0 20.48l81.92 81.92c3.413333 3.413333 6.826667 3.413333 10.24 3.413333s6.826667 0 10.24-3.413333c6.826667-6.826667 6.826667-17.066667 0-20.48L365.226667 307.2C358.4 300.373333 351.573333 300.373333 344.746667 307.2z"
-                          fill="#3eaf7c" p-id="4082"></path>
-                    <path d="M604.16 409.6c3.413333 3.413333 6.826667 3.413333 10.24 3.413333s6.826667 0 10.24-3.413333l81.92-81.92c6.826667-6.826667 6.826667-17.066667 0-20.48s-17.066667-6.826667-20.48 0l-81.92 81.92C597.333333 395.946667 597.333333 402.773333 604.16 409.6z"
-                          fill="#3eaf7c" p-id="4083"></path>
-                    <path d="M716.8 460.8c6.826667 0 17.066667-6.826667 17.066667-17.066667s-6.826667-17.066667-17.066667-17.066667L334.506667 426.666667c-6.826667 0-17.066667 6.826667-17.066667 17.066667s6.826667 17.066667 17.066667 17.066667L512 460.8l0 105.813333L334.506667 566.613333c-6.826667 0-17.066667 6.826667-17.066667 17.066667s6.826667 17.066667 17.066667 17.066667L512 600.746667l0 139.946667c0 6.826667 6.826667 17.066667 17.066667 17.066667s17.066667-6.826667 17.066667-17.066667l0-139.946667L716.8 600.746667c6.826667 0 17.066667-6.826667 17.066667-17.066667s-6.826667-17.066667-17.066667-17.066667l-174.08 0 0-105.813333L716.8 460.8z"
-                          fill="#3eaf7c" p-id="4084"></path>
-                </svg>
-            </div>
-            <div style="float: left; margin-left: 20px">充值</div>
-            <div style="float: right; margin-right: 20px"><i style="font-size: 14px;color:#666"
-                                                             class="layui-icon">&#xe602;</i>
-            </div>
-        </div>
+    <div class="menu-card">
+    <a class="menu-item" href="/pay/index.html">
+        <span class="mi-icon"><i class="layui-icon">&#xe65e;</i></span>
+        <span class="mi-text">充值</span>
+        <span class="mi-arrow"></span>
     </a>
 
-    <a
-            href="/user/favorites.html">
-
-        <div
-                style="background-color:#fafafa;text-align: left;padding:30px 10px;color: #000;font-size: 16px">
-            <div style="float: left;">
-                <svg t="1693622464904" class="icon" viewBox="0 0 1097 1024" version="1.1"
-                     xmlns="http://www.w3.org/2000/svg" p-id="3653" width="25px" height="25px">
-                    <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>
-            </div>
-            <div style="float: left; margin-left: 20px">我的书架</div>
-            <div style="float: right; margin-right: 20px"><i style="font-size: 14px;color:#666"
-                                                             class="layui-icon">&#xe602;</i>
-            </div>
-        </div>
+    <a class="menu-item" href="/user/favorites.html">
+        <span class="mi-icon"><i class="layui-icon">&#xe705;</i></span>
+        <span class="mi-text">我的书架</span>
+        <span class="mi-arrow"></span>
     </a>
 
-    <a
-            href="/user/read_history.html">
-
-        <div
-                style="background-color:#fafafa;text-align: left;padding:30px 10px 50px;color: #000;font-size: 16px">
-            <div style="float: left;">
-                <svg t="1693621172669" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                     xmlns="http://www.w3.org/2000/svg"
-                     p-id="1877" width="25px" height="25px">
-                    <path d="M876.8 709.12H738.56V591.36c0-15.36-10.24-25.6-25.6-25.6-15.36 0-25.6 10.24-25.6 25.6v143.36c0 15.36 10.24 25.6 25.6 25.6H876.8c15.36 0 25.6-10.24 25.6-25.6s-12.8-25.6-25.6-25.6zM705.28 463.36c-153.6 0-279.04 125.44-279.04 279.04 0 153.6 125.44 279.04 279.04 279.04 153.6 0 279.04-125.44 279.04-279.04 0-153.6-125.44-276.48-279.04-279.04z m0 506.88c-125.44 0-227.84-102.4-227.84-227.84s102.4-227.84 227.84-227.84 227.84 102.4 227.84 227.84c-2.56 128-102.4 227.84-227.84 227.84z m25.6-622.08c0-15.36-10.24-25.6-25.6-25.6h-473.6c-15.36 0-25.6 10.24-25.6 25.6 0 15.36 10.24 25.6 25.6 25.6h473.6c12.8 0 25.6-10.24 25.6-25.6z m-307.2 207.36c0-15.36-10.24-25.6-25.6-25.6h-166.4c-15.36 0-25.6 10.24-25.6 25.6s10.24 25.6 25.6 25.6h166.4c15.36 0 25.6-12.8 25.6-25.6z m-192 153.6c-15.36 0-25.6 10.24-25.6 25.6s10.24 25.6 25.6 25.6h128c15.36 0 25.6-10.24 25.6-25.6s-10.24-25.6-25.6-25.6h-128zM482.56 972.8H90.88V51.2h174.08v38.4c0 33.28 25.6 64 58.88 64 12.8 0 343.04 2.56 373.76 0 33.28 0 58.88-28.16 56.32-61.44v-38.4H928v437.76c0 15.36 10.24 25.6 25.6 25.6 15.36 0 25.6-10.24 25.6-25.6V28.16c0-15.36-10.24-25.6-25.6-25.6H728.32c-15.36 0-25.6 10.24-25.6 25.6v64c0 7.68-5.12 12.8-10.24 12.8H326.4c-7.68 0-12.8-5.12-12.8-12.8V25.6C313.6 10.24 303.36 0 288 0H65.28c-15.36 0-25.6 10.24-25.6 25.6v972.8c0 15.36 10.24 25.6 25.6 25.6h417.28c15.36 0 25.6-10.24 25.6-25.6 0-15.36-12.8-25.6-25.6-25.6zM395.52 51.2h230.4c15.36 0 25.6-10.24 25.6-25.6 0-15.36-10.24-25.6-25.6-25.6h-230.4c-15.36 0-25.6 10.24-25.6 25.6 0 15.36 12.8 25.6 25.6 25.6z"
-                          fill="#3eaf7c" p-id="1878"></path>
-                </svg>
-            </div>
-            <div style="float: left; margin-left: 20px">阅读历史</div>
-            <div style="float: right; margin-right: 20px"><i style="font-size: 14px;color:#666"
-                                                             class="layui-icon">&#xe602;</i>
-            </div>
-        </div>
+    <a class="menu-item" href="/user/read_history.html">
+        <span class="mi-icon"><i class="layui-icon">&#xe637;</i></span>
+        <span class="mi-text">阅读历史</span>
+        <span class="mi-arrow"></span>
     </a>
 
-    <!--<a
-            href="/user/comment.html">
-
-        <blockquote class="layui-elem-quote"
-                    style="background-color:#fafafa;border-left:0px;margin-bottom: 0px;text-align: left;padding:15px 10px;color: #000;font-size: 18px">
-            <i style="font-size: 25px;padding-right: 20px;color:#3eaf7c"
-               class="layui-icon">&#xe611;
-            </i>
-            我的书评
-            <div style="float: right; margin-right: 20px"><i style="font-size: 14px;color:#666"
-                                                             class="layui-icon">&#xe602;</i>
-            </div>
-        </blockquote>
-    </a>-->
-
-
-    <a
-            href="javascript:logout()">
-
-        <blockquote class="layui-elem-quote"
-                    style="background-color:#fafafa;border-left:0px;margin-top:10px;margin-bottom: 10px;text-align: center;padding:15px 10px;color: #3eaf7c;font-size: 16px">
-
-            退出登录
-        </blockquote>
+    <a class="menu-item" href="/user/message.html">
+        <span class="mi-icon"><i class="layui-icon">&#xe667;</i></span>
+        <span class="mi-text">我的消息</span>
+        <span class="mi-badge" id="msgUnreadBadge"></span>
+        <span class="mi-arrow"></span>
     </a>
 
+    <a class="menu-item" href="/user/comment.html">
+        <span class="mi-icon"><i class="layui-icon">&#xe611;</i></span>
+        <span class="mi-text">我的书评</span>
+        <span class="mi-arrow"></span>
+    </a>
+
+    <a class="menu-item" href="/user/paragraph_comment.html">
+        <span class="mi-icon"><i class="layui-icon">&#xe63a;</i></span>
+        <span class="mi-text">我的段评</span>
+        <span class="mi-arrow"></span>
+    </a>
+
+
+    <a class="menu-item" href="/booklist/mine.html">
+        <span class="mi-icon"><i class="layui-icon">&#xe60a;</i></span>
+        <span class="mi-text">我的书单</span>
+        <span class="mi-arrow"></span>
+    </a>
+
+
+    <a class="menu-item" href="/user/setup.html">
+        <span class="mi-icon"><i class="layui-icon">&#xe716;</i></span>
+        <span class="mi-text">账号设置</span>
+        <span class="mi-arrow"></span>
+    </a>
+    </div>
+
+    <a class="logout-card" href="javascript:logout()">退出登录</a>
+
 </div>
 
 <div th:replace="mobile/common/footer :: footer">
 </div>
-</body>
 
 <div th:replace="mobile/common/js :: js">
 </div>
@@ -231,16 +290,18 @@
                     $("#my_name").html(data.data.username);
                 }
 
-                if (data.data.userSex === '0') {
+                if (String(data.data.userSex) === '0') {
                     $("#boyIcon").css("display", "inline")
                 }
 
-                if (data.data.userSex === '1') {
+                if (String(data.data.userSex) === '1') {
                     $("#girlIcon").css("display", "inline")
                 }
 
                 $("#accountBalance").html(data.data.accountBalance);
 
+                loadUnreadMsgCount();
+
             } else if (data.code == 1001) {
                 //未登录
                 location.href = '/user/login.html?originUrl=' + encodeURIComponent(location.href);
@@ -257,18 +318,33 @@
 
 
     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";
+    }
+
+    // 拉取未读消息数，在“我的消息”菜单展示角标（超过99显示 99+）
+    function loadUnreadMsgCount() {
+        $.ajax({
+            type: "get",
+            url: "/user/message/unreadCount",
+            data: {},
+            dataType: "json",
+            success: function (data) {
+                if (data.code == 200 && data.data > 0) {
+                    $("#msgUnreadBadge").text(data.data > 99 ? '99+' : data.data).show();
+                }
+            }
+        });
     }
 
     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() {
         var token = localStorage.getItem("token");
         if (token) {
-            window.location.href = "/book/book_ranking.html?token=" + token;
+            window.location.href = "/user/favorites.html";
         } else {
             window.location.href = "/user/login.html";
         }
diff --git a/templates/green/html/user/comment.html b/templates/green/html/user/comment.html
index 449e5f5..c7e70a8 100644
--- a/templates/green/html/user/comment.html
+++ b/templates/green/html/user/comment.html
@@ -69,7 +69,7 @@
                                 "<div class=\"user_heads fl\" vals=\"389\">" +
                                 "<img src=\"" + (comment.createUserPhoto ? comment.createUserPhoto : '/images/man.png') + "\" class=\"user_head\" alt=\"\">" +
                                 "<span class=\"user_level1\" style=\"display: none;\">见习</span></div>" +
-                                "<ul class=\"pl_bar fr\">\t\t\t<li class=\"name\">" + (comment.createUserName.substr(0, 4) + "****" + comment.createUserName.substr(comment.createUserName.length - 3, 3)) + "</li><li class=\"dec\">" +
+                                "<ul class=\"pl_bar fr\">\t\t\t<li class=\"name\">" + (comment.createUserName) + "</li><li class=\"dec\">" +
                                 comment.commentContent +
                                 "</li><li class=\"other cf\">" +
                                 "<span class=\"time fl\">" + comment.createTime + "</span>" +
diff --git a/templates/green/static/css/base.css b/templates/green/static/css/base.css
index a340870..5debbda 100644
--- a/templates/green/static/css/base.css
+++ b/templates/green/static/css/base.css
@@ -974,4 +974,4 @@ i.vip_b {
     border-left: 5px solid #16b777;
     border-radius: 0 2px 2px 0;
     background-color: #fafafa;
-}
\ No newline at end of file
+}
diff --git a/templates/green/static/javascript/common.js b/templates/green/static/javascript/common.js
index f7f2c0a..29d16fa 100644
--- a/templates/green/static/javascript/common.js
+++ b/templates/green/static/javascript/common.js
@@ -155,4 +155,3 @@ function checkPicUpload(file) {
     }
     return true;
 }
-
diff --git a/templates/green/static/mobile/js/common.js b/templates/green/static/mobile/js/common.js
index fc19f68..8d3e635 100644
--- a/templates/green/static/mobile/js/common.js
+++ b/templates/green/static/mobile/js/common.js
@@ -197,5 +197,3 @@ String.prototype.isNickName = function () {
     }
     return false;
 };
-
-
diff --git a/templates/green/static/mobile/js/read.js b/templates/green/static/mobile/js/read.js
index ddbc718..f9d6190 100644
--- a/templates/green/static/mobile/js/read.js
+++ b/templates/green/static/mobile/js/read.js
@@ -177,13 +177,13 @@ function set(intype,p){
         fontsmall.className="sizebg";
         if(p == "big"){
             fontbig.className="button sizebgon";
-            nr1.style.fontSize="25px";
+            nr1.style.fontSize="28px";
             fontmiddle.className="sizebg";
             fontsmall.className="sizebg";
         }
         if(p == "middle"){
             fontmiddle.className="button sizebgon";
-            nr1.style.fontSize = "20px";
+            nr1.style.fontSize = "22px";
             fontbig.className="sizebg";
             fontsmall.className="sizebg";
         }