201206030/novel-plus
1
0
Fork 0
mirror of https://github.com/201206030/novel-plus.git synced 2025-07-29 14:38:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

模版更新

Browse Source
This commit is contained in:
xiongxiaoyang 2025-07-25 12:58:18 +08:00
parent d4e1126873
commit d4e8fb1cc7
5 changed files with 367 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

216
templates/green/html/book/book_comment_reply.html Normal file
View File

@ -0,0 +1,216 @@
<!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 th:replace="common/header :: common_head(~{::title},~{},~{::link},~{})">
<title th:text="'评论回复区'"></title>
<link href="/css/main.css" rel="stylesheet"/>
<link href="/css/book.css" rel="stylesheet"/>
</head>
<body>
<input type="hidden" id="commentId" th:value="${commentId}"/>
<div th:replace="common/top :: top('')">
</div>
<div class="main box_center cf mb50">
<div class="channelBookContent cf">
<!--left start-->
<div class="wrap_left fl">
<div class="wrap_bg">
<div class="pad20">
<div class="bookComment">
<div class="book_tit">
<div class="fl">
<h3>评论回复区</h3><span id="bookCommentTotal">(0条)</span>
</div>
<a class="fr" href="#txtComment">发表回复</a>
</div>
<blockquote class="layui-elem-quote" th:utext="${commentContent}">
</blockquote>
<div class="no_comment" id="noCommentPanel" style="display: none;">
<img src="/images/no_comment.png" alt=""/>
<span class="block">暂无回复</span>
</div>
<div class="commentBar" id="commentPanel">
</div>
<div class="pageBox cf mt15 mr10" id="commentPage">
</div>
<div class="reply_bar" id="reply_bar">
<div class="tit">
<span class="fl font16">发表回复</span>
<!--未登录状态下不可发表评论，显示以下链接-->
<span class="fr black9" style="display:none; ">请先 <a class="orange"
href="/user/login.html">登录</a><em
class="ml10 mr10">|</em><a class="orange"
href="/user/register.html">注册</a></span>
</div>
<textarea name="txtComment" rows="2" cols="20" id="txtComment" class="replay_text"
placeholder="我来说两句..."></textarea>
<div class="reply_btn">
<span class="fl black9"><em class="ml5" id="emCommentNum">0/1000</em> 字</span>
<span class="fr"><a class="btn_ora" href="javascript:void(0);"
onclick="javascript:BookDetail.SaveCommentReply(37,0,$('#txtComment').val());">发表</a></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!--left end-->
<!--right start-->
<!--right end-->
</div>
</div>
<div th:replace="common/footer :: footer">
</div>
<div th:replace="common/js :: js"></div>
<script src="/javascript/bookdetail.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$('#txtComment').on('input propertychange', function () {
var count = $(this).val().length;
$('#emCommentNum').html(count + "/1000");
if (count > 1000) {
$('#txtComment').val($('#txtComment').val().substring(0, 1000));
}
});
loadCommentList(1, 20);
function loadCommentList(curr, limit) {
$.ajax({
type: "get",
url: "/book/listCommentReplyByPage",
data: {'commentId': $("#commentId").val(), 'curr': curr, 'limit': limit},
dataType: "json",
success: function (data) {
if (data.code == 200) {
if (data.data.total == 0) {
$("#noCommentPanel").css("display", "block");
$("#commentPanel").css("display", "none");
return;
}
$("#noCommentPanel").css("display", "none");
$("#commentPanel").css("display", "block");
var commentList = data.data.list;
if (commentList.length > 0) {
$("#bookCommentTotal").html("(" + data.data.total + "条)");
var commentListHtml = "";
for (var i = 0; i < commentList.length; i++) {
var comment = commentList[i];
commentListHtml += ("<div class=\"comment_list cf\">" +
"<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) + "<span style='padding-left: 10px' class=\"other\">" + (comment.location ? comment.location + "读者" : '') + "</span></li><li class=\"dec\">" +
comment.replyContent +
"</li><li class=\"other cf\">" +
"<span class=\"time fl\" style='padding-right: 10px'>" + (data.data.total - ((curr - 1) * limit + i)) + "楼</span>" +
"<span class=\"time fl\">" + comment.createTime + "</span>" +
"<span class=\"fr\"><a href=\"javascript:toggleCommentUnLike('"+comment.id+"')\" class=\"zan\" style=\"padding-left: 10px\">踩<i class=\"num\" id='unLikeCount"+comment.id+"'>("+comment.unLikesCount+")</i></a></span>" +
"<span class=\"fr\"><a href=\"javascript:toggleCommentLike('"+comment.id+"')\" class=\"zan\" style=\"padding-left: 10px\">赞<i class=\"num\" id='likeCount"+comment.id+"'>("+comment.likesCount+")</i></a></span>" +
"</li>\t\t</ul>\t</div>");
}
$("#commentPanel").html(commentListHtml);
layui.use('laypage', function () {
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'commentPage' //注意，这里的 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) {
loadCommentList(obj.curr, obj.limit);
} else {
}
}
});
});
}
} else {
layer.alert(data.msg);
}
},
error: function () {
layer.alert('网络异常');
}
})
}
function toggleCommentLike(replyId) {
$.ajax({
type: "post",
url: "/book/toggleReplyLike",
data: {'replyId': replyId},
dataType: "json",
success: function (data) {
if (data.code == 200) {
$("#likeCount"+replyId).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('网络异常');
}
})
}
function toggleCommentUnLike(replyId) {
$.ajax({
type: "post",
url: "/book/toggleReplyUnLike",
data: {'replyId': replyId},
dataType: "json",
success: function (data) {
if (data.code == 200) {
$("#unLikeCount"+replyId).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('网络异常');
}
})
}
</script>
</body>
</html>

25
templates/green/html/mobile/book/book_ranking.html
View File

@ -1,6 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@ -16,8 +14,6 @@
<div th:include="mobile/common/css :: css"></div>
</div>
<style type="text/css">
@ -62,6 +58,15 @@
height: 180px;
}
.book_desc {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
white-space: pre-wrap;
}
</style>
</head>
<body>
@ -187,19 +192,19 @@
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" +
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-xs6 layui-col-sm3 layui-col-md2 layui-col-lg2\" style=\"text-align: center\">\n" +
" <img style='width: 130px;height: 180px' align=\"center\"\n" +
" <div class=\"layui-col-xs5 layui-col-sm3 layui-col-md2 layui-col-lg2\" style=\"text-align: center\">\n" +
" <img style='width: 130px;height: 190px' align=\"center\"\n" +
" src=\"" + book.picUrl + "\"/>\n" +
"\n" +
" </div>\n" +
" </a>\n" +
" <div style=\"padding: 10px\" class=\"layui-col-xs6 layui-col-sm8 layui-col-md8 layui-col-lg8\">\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=\";color: #4c6978;float: right;\"><i style=\"color: red\"></i></div>\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" +
@ -207,7 +212,7 @@
" <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" +
" <div class='book_desc' style=\"margin-top: 5px;color: #a6a6a6;\">简介：" + (book.bookDesc) + "</div>\n" +
"\n" +
"\n" +
" </div>\n" +

9
templates/green/html/mobile/common/css.html
View File

@ -26,6 +26,15 @@
}
}
.book_name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: pre-wrap;
}
#footer {
position: absolute;
bottom: 0px;

127
templates/green/html/mobile/index.html
View File

@ -53,6 +53,44 @@
color: #3eaf7c;
}
.container {
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 */
}
.container::-webkit-scrollbar {
width: 0;
height: 0;
}
.container::-webkit-scrollbar-track,
.container::-webkit-scrollbar-thumb {
display: none;
}
.item {
flex: 0 0 calc(100% / 10); /* 每个元素宽度为容器的十分之一 */
scroll-snap-align: start;
box-sizing: border-box;
text-align: center;
border-radius: 5px;
margin-right: 5px;
}
.book_desc {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
white-space: pre-wrap;
}
</style>
@ -107,60 +145,58 @@
精品推荐
</blockquote>
<div class="container" style="padding-bottom: 10px">
<div class="layui-container" style="padding: 0px">
<div class="item" style="position: relative;padding:1%;" th:if="${bookMap['4']}" th:each="book,iterStat:${bookMap['4']}">
<a th:href="'/book/'+${book.bookId}+'.html'">
<div class="layui-row" style="text-align: center" id="currentWeek" th:if="${bookMap['4']}">
<span th:each="book,iterStat : ${bookMap['4']}" th:if="${iterStat.index<3}">
<a th:href="'/book/'+${book.bookId}+'.html'">
<div style="padding: 1%" class="layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4">
<img style=" width:100px; height:125px; max-width:100%; max-height:100%;"
th:src="${book.picUrl}">
<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>
<br>
<span th:text="${#strings.length(book.bookName) > 5}? (${#strings.substring(book.bookName,0,5)}+'...'): ${book.bookName} "></span>
</a>
</div>
</a>
</span>
</div>
</div>
</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-xs5 layui-col-sm4 layui-col-md4 layui-col-lg4">
<img style=" width:100px; height:125px;" th:src="${book.picUrl}">
</div>
<div class="layui-col-xs5 layui-col-sm6 layui-col-md6 layui-col-lg6">
<ul>
<li style="padding-bottom: 2px" class="line-limit-length"
th:text="${book.bookName}"></li>
<li style="padding-bottom: 2px;color: #a6a6a6" th:text="'作者：'+${book.authorName}"></li>
<li style="color: #a6a6a6;width: 180px;height:60px;overflow: hidden"
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>
<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>
@ -184,7 +220,6 @@
</div>
</div>
</div>
<div style="clear: both"></div>
<div th:replace="mobile/common/footer :: footer">
@ -226,7 +261,7 @@
"\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 + "" +
" class=\"layui-elip layui-col-md11 layui-col-sm11 layui-col-lg11\">简介：" + updateRankBook.bookDesc + "" +
" </div></a>\n" +
" </div>");

46
templates/green/static/javascript/bookdetail.js
View File

@ -133,6 +133,52 @@
})
},
SaveCommentReply: function (cmtBId, cmtCId, cmtDetail) {
if (!isLogin) {
layer.alert('请先登录');
return;
}
var cmtDetailTemp = cmtDetail.replace(/(^\s*)/g, "");
if (cmtDetailTemp == '') {
layer.alert('回复内容必须填写');
return;
}
if (cmtDetailTemp.length < 5) {
layer.alert('回复内容必须大于5个字');
return;
}
if (cmtDetail.length < 5) {
layer.alert('回复内容必须大于5个字');
return;
}
$.ajax({
type: "POST",
url: "/book/addCommentReply",
data: {'commentId': $("#commentId").val(), 'replyContent': cmtDetail},
dataType: "json",
success: function (data) {
if (data.code == 200) {
$('#txtComment').val("")
layer.alert('回复成功！');
loadCommentList(1, 20);
} else if (data.code == 1001) {
//未登录
location.href = '/user/login.html?originUrl=' + encodeURIComponent(location.href);
} else {
layer.alert(data.msg);
}
},
error: function () {
layer.alert('网络异常');
}
})
},
GetFavoritesBook: function (BId) {
},