okooooooo/novel-plus
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mobile): 优化移动端小说筛选页面

Browse Source
This commit is contained in:
xiongxiaoyang committed 2026-10-19 21:19:57 +08:00
1 parent 4a667a5cc1
commit 251211e8df
1 file changed
+162 -61
Download Patch File Download Diff File Expand all files Collapse all files
novel-front/src/main/resources/templates/mobile/book/bookclass.html
+162 -61
View File
@@ -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);