From 251211e8dfdaf710c5784f277146767d129ecb47 Mon Sep 17 00:00:00 2001
From: xiongxiaoyang <1179705413@qq.com>
Date: Mon, 19 Oct 2026 21:19:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(mobile):=20=E4=BC=98=E5=8C=96=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=B0=8F=E8=AF=B4=E7=AD=9B=E9=80=89=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/mobile/book/bookclass.html      | 223 +++++++++++++-----
 1 file changed, 162 insertions(+), 61 deletions(-)

diff --git a/novel-front/src/main/resources/templates/mobile/book/bookclass.html b/novel-front/src/main/resources/templates/mobile/book/bookclass.html
index 10e89f1..1eb18e4 100644
--- a/novel-front/src/main/resources/templates/mobile/book/bookclass.html
+++ b/novel-front/src/main/resources/templates/mobile/book/bookclass.html
@@ -16,55 +16,171 @@
 
     <style type="text/css">
 
-
         .line-limit-length {
-
             overflow: hidden;
-
             text-overflow: ellipsis;
-
             white-space: nowrap;
-
-        }
-
-        .indexP p a {
-            color: #4c6978;
-        }
-
-        .Readarea {
-            font-size: 18px;
-            line-height: 35px;
-            padding: 10px;
-            color: #333;
         }
 
         div, p {
-            wrap-work: break-word;
-            word-break: break-all;
-            word-wrap: break-word;
-            word-break: normal;
             -moz-box-sizing: border-box;
             -webkit-box-sizing: border-box;
             box-sizing: border-box;
-            -ms-box-sizing: border-box;
         }
 
-        .indexDiv a {
-            margin-left: 20px;
+        /* 搜索条：胶囊输入框 + 主题色等高按钮 */
+        .search-bar {
+            display: -webkit-flex;
+            display: flex;
+            padding: 10px 12px;
         }
 
-        img {
-            width: 130px;
-            height: 180px;
+        .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;
+        }
+
+        /* 筛选面板：卡片化，与主题色衔接 */
+        .layui-collapse {
+            margin: 0 12px;
+            border: none;
+        }
+
+        .layui-collapse .layui-colla-item {
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 2px 8px rgba(62, 175, 124, .08);
+        }
+
+        .layui-collapse .layui-colla-title {
+            background: #fff;
+            color: #2c8a61;
+            font-weight: 600;
+        }
+
+        .layui-collapse .layui-colla-content {
+            background: #fff;
+            border-top: 1px solid #f0f5f2;
+        }
+
+        .layui-collapse .layui-form-label {
+            color: #5c6b64;
+        }
+
+        /* 书籍列表卡片 */
+        #bookList {
+            padding: 10px 12px 0;
+        }
+
+        .book-card {
+            display: -webkit-flex;
+            display: flex;
+            background: #fff;
+            border-radius: 10px;
+            padding: 12px;
+            margin-bottom: 10px;
+            box-shadow: 0 2px 8px rgba(62, 175, 124, .08);
+        }
+
+        .book-card .book-cover img {
+            width: 96px;
+            height: 128px;
+            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: 16px;
+            font-weight: 600;
+            line-height: 22px;
+        }
+
+        .book-card .book-meta {
+            margin-top: 6px;
+            font-size: 12px;
+            color: #98a8a1;
+        }
+
+        .book-card .book-meta span {
+            margin-right: 8px;
+        }
+
+        .book-card .book-tag {
+            display: inline-block;
+            padding: 0 6px;
+            line-height: 18px;
+            border-radius: 9px;
+            font-size: 11px;
+            margin-right: 8px;
+            vertical-align: middle;
+        }
+
+        .book-card .book-tag-0 {
+            color: #3eaf7c;
+            background: rgba(62, 175, 124, .12);
+        }
+
+        .book-card .book-tag-1 {
+            color: #8a968f;
+            background: #f0f2f1;
+        }
+
+        .book-card .book-author {
+            margin-top: 5px;
+            font-size: 12px;
+            color: #98a8a1;
         }
 
         .book_desc {
             overflow: hidden;
             text-overflow: ellipsis;
             display: -webkit-box;
-            -webkit-line-clamp: 3;
+            -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
             white-space: pre-wrap;
+            margin-top: 6px;
+            font-size: 12px;
+            line-height: 18px;
+            color: #98a8a1;
+        }
+
+        /* 分页留白 */
+        #books {
+            padding: 10px 0 20px;
         }
 
     </style>
@@ -95,25 +211,17 @@
     </div>
 </div>
 
-<div class="layui-container">
-    <div class="layui-row">
-
-        <div class="layui-col-xs10 layui-col-sm10 layui-col-md11 layui-col-lg11" style="padding-top:1%">
-            <input id="title" type="text" name="title" required lay-verify="required" placeholder="请输入书名·作者"
-                   autocomplete="off"
-                   class="layui-input" th:value="${keyword}">
-        </div>
-        <div class="layui-col-xs1" style="padding: 1%">
-            <button onclick="search(1,20)" class="layui-btn" lay-submit lay-filter="formDemo">搜索</button>
-        </div>
-    </div>
-
+<div class="search-bar">
+    <input id="title" type="text" name="title" required lay-verify="required" placeholder="请输入书名·作者"
+           autocomplete="off" th:value="${keyword}">
+    <button type="button" onclick="search(1,20)" lay-submit lay-filter="formDemo">搜索</button>
 </div>
+
 <div class="layui-collapse">
     <div class="layui-colla-item" style="margin-bottom: 0px">
         <h2 class="layui-colla-title">小说筛选</h2>
         <div class="layui-colla-content ">
-            <div class="layui-container" style="padding: 10px 50px 0px 10px">
+            <div class="layui-container" style="padding: 10px 15px 0px 10px">
                 <div class="layui-form">
                     <div class="layui-form-item" id="channelItem">
                         <label class="layui-form-label">作品频道</label>
@@ -291,31 +399,24 @@
                             book.bookDesc = book.bookDesc.replace(/<[^>]+>/g, "").replace(/\s+/g, "").replace(/&nbsp;/g, "");
                         }
 
-                        bookListHtml += ("<div class=\"layui-row\" style=\"margin-bottom:10px;padding:5px 0px;background: #f2f2f2\">\n" +
-                            "        <a href=\"/book/" + book.id + ".html\">\n" +
-                            "            <div class=\"layui-col-xs5 layui-col-sm3 layui-col-md2 layui-col-lg2\" style=\"text-align: center\">\n" +
-                            "                <img style='width: 130px;height: 190px' align=\"center\"\n" +
-                            "                     src=\"" + book.picUrl + "\"/>\n" +
-                            "\n" +
-                            "            </div>\n" +
+                        bookListHtml += ("<div class=\"book-card\">\n" +
+                            "        <a class=\"book-cover\" href=\"/book/" + book.id + ".html\">\n" +
+                            "            <img src=\"" + book.picUrl + "\"/>\n" +
                             "        </a>\n" +
-                            "        <div style=\"padding: 0px 10px 0px 0px\" class=\"layui-col-xs7 layui-col-sm9 layui-col-md10 layui-col-lg10\">\n" +
+                            "        <div class=\"book-info\">\n" +
                             "            <a href=\"/book/" + book.id + ".html\">\n" +
-                            "                <div class=\"line-limit-length\" style=\";color: #000;font-size: 15px\">" + book.bookName + "</div>\n" +
+                            "                <div class=\"book-name line-limit-length\">" + book.bookName + "</div>\n" +
                             "            </a>\n" +
-                            "            <div style=\"height: 5px;color: #4c6978;\"><i style=\"color: red\"></i></div>\n" +
-                            "            <a href=\"/book/bookclass.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 class=\"book-meta line-limit-length\">\n" +
+                            "                <span class=\"book-tag book-tag-" + book.bookStatus + "\">" + (book.bookStatus == 0 ? '连载' : '完结') + "</span>\n" +
+                            "                <span>" + book.catName + "</span>\n" +
+                            "                <span>" + book.lastIndexUpdateTime.substr(0, 11) + "更新</span>\n" +
                             "            </div>\n" +
-                            "            <div class='book_desc' style=\"margin-top: 5px;color: #a6a6a6;\">简介：" + (book.bookDesc) + "</div>\n" +
-                            "\n" +
-                            "\n" +
+                            "            <a href=\"/book/bookclass.html?keyword=" + encodeURI(book.authorName) + "\">\n" +
+                            "                <div class=\"book-author line-limit-length\">作者：" + book.authorName + "</div>\n" +
+                            "            </a>\n" +
+                            "            <div class='book_desc'>简介：" + (book.bookDesc) + "</div>\n" +
                             "        </div>\n" +
-                            "\n" +
                             "    </div>");
                     }
                     $("#bookList").html(bookListHtml);