From 8311681b230c53661b6ce545da8fc042fff8b51c Mon Sep 17 00:00:00 2001
From: xiongxiaoyang <1179705413@qq.com>
Date: Tue, 10 Oct 2023 19:29:26 +0800
Subject: [PATCH] =?UTF-8?q?perf(mobile):=20=E5=8A=A0=E5=85=A5=E4=B9=A6?=
 =?UTF-8?q?=E6=9E=B6=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/mobile/book/book_detail.html    | 192 +++++++++---------
 1 file changed, 99 insertions(+), 93 deletions(-)
diff --git a/novel-front/src/main/resources/templates/mobile/book/book_detail.html b/novel-front/src/main/resources/templates/mobile/book/book_detail.html
index 1f6ea6e..705646c 100644
--- a/novel-front/src/main/resources/templates/mobile/book/book_detail.html
+++ b/novel-front/src/main/resources/templates/mobile/book/book_detail.html
@@ -5,30 +5,29 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <title th:utext="${book.bookName}+'小说最新章节免费阅读和下载'"></title>
 
-    <meta name="keywords" th:content="${book.bookName}+','+${book.bookName}+'最新章节,'+${book.bookName}+'免费阅读,'+${book.bookName}+'TXT下载'">
+    <meta name="keywords"
+          th:content="${book.bookName}+','+${book.bookName}+'最新章节,'+${book.bookName}+'免费阅读,'+${book.bookName}+'TXT下载'">
 
     <meta name="description"
           th:content="${book.bookName}+'最新章节列表,'+${book.bookName}+'最新更新章节免费无广告无弹窗在线阅读,'+${book.bookName}+'小说TXT免费下载。'">
 
 
-
-
     <div th:include="mobile/common/css :: css"></div>
 
     <style type="text/css">
 
-        .indexP p a{
-            color:#4c6978;
+        .indexP p a {
+            color: #4c6978;
         }
 
         .tag-list {
             padding-top: 0px;
             padding-bottom: 20px;
             position: fixed;
-            top:50px;
+            top: 50px;
             right: 0px;
             width: 120px;
-            z-index:100000;
+            z-index: 100000;
         }
 
         .tag-list .tag {
@@ -43,6 +42,7 @@
             margin-right: 8px;
             font-size: 12px;
         }
+
         .tag-list .highlight {
             padding: 5px 9px;
             border: 1px solid #f90;
@@ -53,6 +53,7 @@
         .tag-list .highlight .text {
             color: #f90;
         }
+
         .tag-list .tag .text {
             display: inline-block;
             vertical-align: middle;
@@ -74,6 +75,7 @@
         .tag-list .highlight .icn {
             color: #f90;
         }
+
         .tag-list .tag .icn {
             margin-right: 5px;
             color: #ccc;
@@ -83,6 +85,7 @@
             padding-left: 3px;
             color: #f90;
         }
+
         .tag-list .tag .text {
             display: inline-block;
             vertical-align: middle;
@@ -106,89 +109,98 @@
 <body>
 <div id="content">
 
-<ul class="tag-list clearfix" id="tagLi">
+    <ul class="tag-list clearfix" id="tagLi">
 
-</ul>
+    </ul>
 
 
-<input type="hidden" id="bookIdHidden" th:value="${bookId}"/>
-<input type="hidden" id="bookNamedHidden" th:value="${book.bookName}"/>
+    <input type="hidden" id="bookIdHidden" th:value="${bookId}"/>
+    <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 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 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>
-    <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 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></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>
+        <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>
+            </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 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:#ff8900!important" class="layui-btn layui-btn-sm layui-btn-radius">开始阅读</a>
+        <button type="button" id="cFavs" onclick="addInShell()"
+                style="border: 1px solid #f80;color: #f80;background-color:#fff!important"
+                class="layui-btn layui-btn-sm layui-btn-radius ">加入书架
+        </button>
 
-<div style="text-align: center;height: 45px;line-height: 45px">
-    <a th:href="'/book/'+${book.id}+'/'+${firstBookIndexId}+'.html'"  type="button" style="background-color:#ff8900!important" class="layui-btn layui-btn-sm layui-btn-radius">开始阅读</a>
-    <button type="button" id="cFavs" onclick="addInShell()" style="background-color:#ffA640!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}">
 
-    <button type="button" onclick="location.href='/user/favorites.html'" style="background-color:#ffBE73!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>
 
-</p>
-
-<div class="layui-collapse">
-    <div class="layui-colla-item" >
-        <h2 class="layui-colla-title">
-            <span>最新章节</span>
-            <span style="margin-left: 30px">
+    <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">
-
+            </h2>
+            <div class="layui-colla-content layui-show indexP layui-row" id="indexList">
 
 
+            </div>
         </div>
     </div>
-</div>
-<div style="height: 42px;color:#4c6978;line-height: 42px;padding-left: 30px;background: #f2f2f2" >
+    <div style="height: 42px;color:#4c6978;line-height: 42px;padding-left: 30px;background: #f2f2f2">
 
-    <a th:href="'/book/indexList-'+${book.id}+'.html'">查看完整目录</a>
-</div>
+        <a th:href="'/book/indexList-'+${book.id}+'.html'">查看完整目录</a>
+    </div>
 
-<!--
-<div style="position: fixed;top:0px;left:0px;z-index:-100;opacity: 0" th:utext="${attacDivForSearch}"></div>
--->
+    <!--
+    <div style="position: fixed;top:0px;left:0px;z-index:-100;opacity: 0" th:utext="${attacDivForSearch}"></div>
+    -->
 </div>
 
 <div th:replace="mobile/common/footer :: footer">
 </div>
 
 
-
 </body>
 <div th:replace="mobile/common/js :: js">
 </div>
@@ -202,7 +214,7 @@
         success: function (data) {
             if (data.code == 200) {
                 if (data.data) {
-                    $("#cFavs").html("<button type=\"button\" id=\"cFavs\"  class=\"layui-btn layui-btn-sm layui-btn-radius layui-btn-warm\">已在书架</button>");
+                    $("#cFavs").replaceWith("<button type=\"button\" id=\"cFavs\" style=\"border: 1px solid #f80;color: #f80;background-color:#fff!important\"  class=\"layui-btn layui-btn-sm layui-btn-radius layui-btn-warm\">已在书架</button>");
                 }
 
 
@@ -228,15 +240,14 @@
         success: function (data) {
             if (data.code == 200) {
                 var indexListHtml = "";
-                for(var i = 0 ; i < data.data.length ; i++){
+                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 += ("<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>");
                 }
 
                 $("#indexList").html(indexListHtml);
 
 
-
             } else if (data.code == 1001) {
                 //未登录
 
@@ -258,7 +269,7 @@
             dataType: "json",
             success: function (data) {
                 if (data.code == 200) {
-                        $("#cFavs").html("<button type=\"button\" id=\"cFavs\"  class=\"layui-btn layui-btn-sm layui-btn-radius layui-btn-warm\">已在书架</button>");
+                    $("#cFavs").replaceWith("<button type=\"button\" id=\"cFavs\" style=\"border: 1px solid #f80;color: #f80;background-color:#fff!important\"  class=\"layui-btn layui-btn-sm layui-btn-radius layui-btn-warm\">已在书架</button>");
 
 
                 } else if (data.code == 1001) {
@@ -278,59 +289,54 @@
     }
 
 
-
-
-    $("#content").css("min-height",($(window).height()-60)+"px");
+    $("#content").css("min-height", ($(window).height() - 60) + "px");
 
     function downloadFile() {
-        var fileUrl = '/book/download?bookId='+$("#bookIdHidden").val()+'&bookName='+$("#bookNamedHidden").val();
-        window.location.href=fileUrl;
+        var fileUrl = '/book/download?bookId=' + $("#bookIdHidden").val() + '&bookName=' + $("#bookNamedHidden").val();
+        window.location.href = fileUrl;
 
 
     }
 
 
-
-
-    function toMyCollect(){
+    function toMyCollect() {
         var token = localStorage.getItem("token");
-        if(token) {
+        if (token) {
             window.location.href = "/book/search?token=" + token;
-        }else{
+        } else {
             window.location.href = "/user/login.html";
         }
     }
 
-    function addToCollect(){
+    function addToCollect() {
         var token = localStorage.getItem("token");
 
-        if(token) {
-            $.get("/user/addToCollect",{"bookId":$("#bookIdHidden").val(),"token":token},function(data){
-                    layer.alert(data.desc);
-                    if(data.code == 1) {
-                        $('#collectButton').unbind("click");
-                        $("#collectButton").text("撤下书架");
-                        $("#collectButton").click(function () {
-                            cancelToCollect();
-                        });
-                    }
+        if (token) {
+            $.get("/user/addToCollect", {"bookId": $("#bookIdHidden").val(), "token": token}, function (data) {
+                layer.alert(data.desc);
+                if (data.code == 1) {
+                    $('#collectButton').unbind("click");
+                    $("#collectButton").text("撤下书架");
+                    $("#collectButton").click(function () {
+                        cancelToCollect();
+                    });
+                }
             });
-        }else{
-            window.location.href = "/user/login.html?bookId="+$("#bookIdHidden").val();
+        } else {
+            window.location.href = "/user/login.html?bookId=" + $("#bookIdHidden").val();
         }
 
 
-
     }
 
 
-    function cancelToCollect(){
+    function cancelToCollect() {
         var token = localStorage.getItem("token");
 
-        if(token) {
-            $.get("/user/cancelToCollect",{"bookId":$("#bookIdHidden").val(),"token":token},function(data){
-                    layer.alert(data.desc);
-                if(data.code == 1) {
+        if (token) {
+            $.get("/user/cancelToCollect", {"bookId": $("#bookIdHidden").val(), "token": token}, function (data) {
+                layer.alert(data.desc);
+                if (data.code == 1) {
                     $('#collectButton').unbind("click");
                     $("#collectButton").text("加入书架");
                     $("#collectButton").click(function () {
@@ -339,8 +345,8 @@
                 }
 
             });
-        }else{
-            window.location.href = "/user/login.html?bookId="+$("#bookIdHidden").val();
+        } else {
+            window.location.href = "/user/login.html?bookId=" + $("#bookIdHidden").val();
         }
 
     }
