模版更新
This commit is contained in:
xiongxiaoyang committed
1 parent
a2db4a6b16
commit
55f59632e9
25 files changed
+3510
-1570
No files matched your search
@@ -14,11 +14,9 @@
|
||||
|
||||
## 项目介绍
|
||||
|
||||
novel-plus 是一个功能完善的原创文学 CMS 系统，支持 PC、WAP 等多端阅读，集小说阅读、内容管理、自动采集与 AI 创作于一体。
|
||||
|
||||
项目由前台门户、作家后台、平台管理后台和爬虫管理系统等多个子系统组成，提供小说推荐、作品检索、小说排行、在线阅读、小说书评、段落评论、小说书单、会员中心、作家专区等丰富功能。
|
||||
|
||||
系统支持自定义多套模板、阅读主题切换，以及可扩展的小说内容存储方式，内置数据库分表存储和 TXT 文本存储方案。同时支持测试内容的自动采集与更新、AI 长篇小说创作、会员充值、内容订阅和新闻发布，帮助用户灵活搭建和运营原创文学平台。
|
||||
novel-plus 是一个多端（PC、WAP）阅读，功能完善的原创文学 CMS
|
||||
系统。由前台门户系统、作家后台管理系统、平台后台管理系统和爬虫管理系统等多个子系统构成，包括小说推荐、作品检索、小说排行、小说阅读、小说书评、段落评论、小说书单、会员中心、作家专区等功能，支持自定义多模版、可拓展的多种小说内容存储方式（内置数据库分表存储和
|
||||
TXT 文本存储）、阅读主题切换、自动采集和更新测试数据、AI写作、会员充值、订阅模式、新闻发布和实时统计报表。
|
||||
|
||||
## 项目地址
|
||||
|
||||
|
||||
@@ -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) {
|
||||
@@ -227,5 +225,41 @@
|
||||
|
||||
}
|
||||
|
||||
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>
|
||||
@@ -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, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
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>
|
||||
@@ -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, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
//时间两行展示：日期 + 时刻
|
||||
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('网络异常');
|
||||
}
|
||||
})
|
||||
|
||||
});*/
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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("validate");">
|
||||
<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>
|
||||
| 已有账号？<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>
|
||||
|
||||
@@ -166,7 +166,7 @@
|
||||
|
||||
//首次不执行
|
||||
if (!first) {
|
||||
searchComments(obj.curr, obj.limit);
|
||||
loadCommentList(obj.curr, obj.limit);
|
||||
} else {
|
||||
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 th:replace="mobile/common/header :: pageHeader(${bookIndex.indexName} + ' ' + ${book.bookName}, '/book/'+${book.id}+'.html')"></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"></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"></i>
|
||||
</a>
|
||||
</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>
|
||||
字体：<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(/ /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"></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>
|
||||
|
||||
|
||||
|
||||
@@ -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"></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"></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 () {
|
||||
|
||||
@@ -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"></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"></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">
|
||||
|
||||
@@ -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"></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"></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(/ /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,65 +209,6 @@
|
||||
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>
|
||||
|
||||
|
||||
@@ -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"></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"></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">
|
||||
|
||||
@@ -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>
|
||||
@@ -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 "></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>
|
||||
@@ -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"></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">更多</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";
|
||||
}
|
||||
|
||||
@@ -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"></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"></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> 余额：<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"));
|
||||
|
||||
|
||||
@@ -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"></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"></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(/ /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>
|
||||
|
||||
@@ -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"></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"></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}"/>
|
||||
|
||||
@@ -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"></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"></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(/ /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;
|
||||
|
||||
@@ -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"></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"></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}"/>
|
||||
|
||||
@@ -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"></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"></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"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-card">
|
||||
<a class="menu-item" href="/pay/index.html">
|
||||
<span class="mi-icon"><i class="layui-icon"></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"></i>
|
||||
</div>
|
||||
</div>
|
||||
<a class="menu-item" href="/user/favorites.html">
|
||||
<span class="mi-icon"><i class="layui-icon"></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"></i>
|
||||
</div>
|
||||
</div>
|
||||
<a class="menu-item" href="/user/read_history.html">
|
||||
<span class="mi-icon"><i class="layui-icon"></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">
|
||||
</i>
|
||||
我的书评
|
||||
<div style="float: right; margin-right: 20px"><i style="font-size: 14px;color:#666"
|
||||
class="layui-icon"></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"></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"></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"></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"></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"></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";
|
||||
}
|
||||
|
||||
@@ -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>" +
|
||||
|
||||
@@ -155,4 +155,3 @@ function checkPicUpload(file) {
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -197,5 +197,3 @@ String.prototype.isNickName = function () {
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
|
||||
@@ -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";
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user