201206030/novel-plus
1
0
Fork 0
mirror of https://github.com/201206030/novel-plus.git synced 2025-04-27 01:30:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf(mobile): 加入书架按钮样式优化

Browse Source
This commit is contained in:
xiongxiaoyang 2023-10-10 19:29:26 +08:00
parent 4497dd1974
commit 8311681b23
1 changed files with 99 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
novel-front/src/main/resources/templates/mobile/book/book_detail.html
View File

@ -5,14 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title th:utext="${book.bookName}+'小说最新章节免费阅读和下载'"></title> <title th:utext="${book.bookName}+'小说最新章节免费阅读和下载'"></title>
<meta name="keywords" th:content="${book.bookName}+','+${book.bookName}+'最新章节,'+${book.bookName}+'免费阅读,'+${book.bookName}+'TXT下载'"> <meta name="keywords"
th:content="${book.bookName}+','+${book.bookName}+'最新章节,'+${book.bookName}+'免费阅读,'+${book.bookName}+'TXT下载'">
<meta name="description" <meta name="description"
th:content="${book.bookName}+'最新章节列表,'+${book.bookName}+'最新更新章节免费无广告无弹窗在线阅读,'+${book.bookName}+'小说TXT免费下载。'"> th:content="${book.bookName}+'最新章节列表,'+${book.bookName}+'最新更新章节免费无广告无弹窗在线阅读,'+${book.bookName}+'小说TXT免费下载。'">
<div th:include="mobile/common/css :: css"></div> <div th:include="mobile/common/css :: css"></div>
<style type="text/css"> <style type="text/css">
@ -43,6 +42,7 @@
margin-right: 8px; margin-right: 8px;
font-size: 12px; font-size: 12px;
} }
.tag-list .highlight { .tag-list .highlight {
padding: 5px 9px; padding: 5px 9px;
border: 1px solid #f90; border: 1px solid #f90;
@ -53,6 +53,7 @@
.tag-list .highlight .text { .tag-list .highlight .text {
color: #f90; color: #f90;
} }
.tag-list .tag .text { .tag-list .tag .text {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@ -74,6 +75,7 @@
.tag-list .highlight .icn { .tag-list .highlight .icn {
color: #f90; color: #f90;
} }
.tag-list .tag .icn { .tag-list .tag .icn {
margin-right: 5px; margin-right: 5px;
color: #ccc; color: #ccc;
@ -83,6 +85,7 @@
padding-left: 3px; padding-left: 3px;
color: #f90; color: #f90;
} }
.tag-list .tag .text { .tag-list .tag .text {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@ -115,7 +118,8 @@
<input type="hidden" id="bookNamedHidden" th:value="${book.bookName}"/> <input type="hidden" id="bookNamedHidden" th:value="${book.bookName}"/>
<input type="hidden" id="preContentId" th:value="${firstBookIndexId}"/> <input type="hidden" id="preContentId" th:value="${firstBookIndexId}"/>
<div style="height: 50px;line-height: 50px;text-align: center" class="layui-header header header-doc layui-bg-cyan"> <div style="height: 50px;line-height: 50px;text-align: center"
class="layui-header header header-doc layui-bg-cyan">
<div style="float: left;margin-left: 10px"> <div style="float: left;margin-left: 10px">
<a href="javascript:history.go(-1)"> <a href="javascript:history.go(-1)">
@ -132,25 +136,35 @@
<img style=" width:130px; height:auto; max-width:100%; max-height:100%;" th:src="${book.picUrl}"/> <img style=" width:130px; height:auto; max-width:100%; max-height:100%;" th:src="${book.picUrl}"/>
</div> </div>
<div style="position:relative;padding: 3px 10px 0px" class="layui-col-xs8 layui-col-sm8 layui-col-md8 layui-col-lg8"> <div style="position:relative;padding: 3px 10px 0px"
<a th:href="'javascript:searchBooks(\''+ ${book.authorName}+'\')'"><div style=";color: #444;" th:utext="'作者：'+ ${book.authorName}"></div></a> class="layui-col-xs8 layui-col-sm8 layui-col-md8 layui-col-lg8">
<a th:href="'/book/book_ranking.html?catId='+${book.catId}"><div style="margin-top: 5px;color: #444;" th:text="'类别：'+ ${book.catName}"></div></a> <a th:href="'javascript:searchBooks(\''+ ${book.authorName}+'\')'">
<div style=";color: #444;" th:utext="'作者：'+ ${book.authorName}"></div>
</a>
<a th:href="'/book/book_ranking.html?catId='+${book.catId}">
<div style="margin-top: 5px;color: #444;" th:text="'类别：'+ ${book.catName}"></div>
</a>
<div style="margin-top: 5px;color: #444;" th:text="'状态：'+ ${book.bookStatus==0?'连载':'完结'}"></div> <div style="margin-top: 5px;color: #444;" 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
<div style="margin-top: 5px;color: #444;">评分：<i style="font-weight:bold;color: red" th:text="${book.score} + '分'"></i></div> 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.visitCount}"></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> </div>
<div style="text-align: center;height: 45px;line-height: 45px"> <div style="text-align: center;height: 45px;line-height: 45px">
<a th:href="'/book/'+${book.id}+'/'+${firstBookIndexId}+'.html'" type="button" style="background-color:#ff8900!important" class="layui-btn layui-btn-sm layui-btn-radius">开始阅读</a> <a th:href="'/book/'+${book.id}+'/'+${firstBookIndexId}+'.html'" type="button"
<button type="button" id="cFavs" onclick="addInShell()" style="background-color:#ffA640!important" class="layui-btn layui-btn-sm layui-btn-radius ">加入书架</button> style="background-color:#ff8900!important" class="layui-btn layui-btn-sm layui-btn-radius">开始阅读</a>
<button type="button" id="cFavs" onclick="addInShell()"
style="border: 1px solid #f80;color: #f80;background-color:#fff!important"
class="layui-btn layui-btn-sm layui-btn-radius ">加入书架
</button>
<button type="button" onclick="location.href='/user/favorites.html'" style="background-color:#ffBE73!important" class="layui-btn layui-btn-sm layui-btn-radius ">我的书架</button>
<!-- <!--
<button type="button" onclick="downloadFile()" class="layui-btn layui-btn-sm layui-btn-radius layui-bg-normal">下载TXT</button> <button type="button" onclick="downloadFile()" class="layui-btn layui-btn-sm layui-btn-radius layui-bg-normal">下载TXT</button>
--> -->
@ -170,7 +184,6 @@
<div class="layui-colla-content layui-show indexP layui-row" id="indexList"> <div class="layui-colla-content layui-show indexP layui-row" id="indexList">
</div> </div>
</div> </div>
</div> </div>
@ -188,7 +201,6 @@
</div> </div>
</body> </body>
<div th:replace="mobile/common/js :: js"> <div th:replace="mobile/common/js :: js">
</div> </div>
@ -202,7 +214,7 @@
success: function (data) { success: function (data) {
if (data.code == 200) { if (data.code == 200) {
if (data.data) { if (data.data) {
$("#cFavs").html("<button type=\"button\" id=\"cFavs\" class=\"layui-btn layui-btn-sm layui-btn-radius layui-btn-warm\">已在书架</button>"); $("#cFavs").replaceWith("<button type=\"button\" id=\"cFavs\" style=\"border: 1px solid #f80;color: #f80;background-color:#fff!important\" class=\"layui-btn layui-btn-sm layui-btn-radius layui-btn-warm\">已在书架</button>");
} }
@ -236,7 +248,6 @@
$("#indexList").html(indexListHtml); $("#indexList").html(indexListHtml);
} else if (data.code == 1001) { } else if (data.code == 1001) {
//未登录 //未登录
@ -258,7 +269,7 @@
dataType: "json", dataType: "json",
success: function (data) { success: function (data) {
if (data.code == 200) { if (data.code == 200) {
$("#cFavs").html("<button type=\"button\" id=\"cFavs\" class=\"layui-btn layui-btn-sm layui-btn-radius layui-btn-warm\">已在书架</button>"); $("#cFavs").replaceWith("<button type=\"button\" id=\"cFavs\" style=\"border: 1px solid #f80;color: #f80;background-color:#fff!important\" class=\"layui-btn layui-btn-sm layui-btn-radius layui-btn-warm\">已在书架</button>");
} else if (data.code == 1001) { } else if (data.code == 1001) {
@ -278,8 +289,6 @@
} }
$("#content").css("min-height", ($(window).height() - 60) + "px"); $("#content").css("min-height", ($(window).height() - 60) + "px");
function downloadFile() { function downloadFile() {
@ -290,8 +299,6 @@
} }
function toMyCollect() { function toMyCollect() {
var token = localStorage.getItem("token"); var token = localStorage.getItem("token");
if (token) { if (token) {
@ -320,7 +327,6 @@
} }
} }