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

feat(mobile): 优化移动端首页UI

Browse Source
This commit is contained in:
xiongxiaoyang committed 2026-10-19 21:02:00 +08:00
1 parent 67e6d10d70
commit 4a667a5cc1
1 file changed
+161 -69
Download Patch File Download Diff File Expand all files Collapse all files
novel-front/src/main/resources/templates/mobile/index.html
+161 -69
View File
@@ -40,17 +40,60 @@
-webkit-transition: all .3s;
}
.user_link {
vertical-align: middle;
line-height: 40px;
float: right;
color: #3eaf7c;
padding: 11px 12px 0;
/* 顶部 Logo：等比缩放不溢出 */
.site-header {
padding: 10px 12px 0;
}
.user_link a {
.site-logo {
max-height: 40px;
max-width: 140px;
}
color: #3eaf7c;
/* 搜索条：胶囊输入框 + 主题色等高按钮 */
.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);
}
.container {
@@ -91,33 +134,68 @@
white-space: pre-wrap;
}
/* 书单广场入口条 */
.bl-entry {
/* 快捷入口：上图标下文字，包裹在卡片内 */
.quick-entry {
display: flex;
}
.quick-entry .qe-item {
flex: 1;
display: block;
background-color: #fff;
border: 1px solid rgba(62, 175, 124, 0.35);
border-radius: 6px;
padding: 12px 15px;
color: #000;
font-size: 15px;
text-align: center;
color: #5c6b64;
}
.bl-entry .layui-icon {
font-size: 20px;
color: #3eaf7c;
vertical-align: middle;
margin-right: 6px;
.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);
}
.bl-entry .bl-entry-sub {
color: #999;
font-size: 12px;
margin-left: 8px;
.quick-entry .qe-icon svg {
width: 26px;
height: 26px;
}
.bl-entry .bl-entry-go {
float: right;
color: #3eaf7c;
.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;
}
@@ -130,51 +208,58 @@
<!-- 你的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>
</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>
</svg>
</a>
</div>
<div class="site-header">
<img class="site-logo" th:src="${application.website.logo}" alt="logo">
</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 class="search-bar">
<input id="title" type="text" placeholder="请输入书名·作者" autocomplete="off">
<button type="button" onclick="searchBooks()">搜索</button>
</div>
<div style="height: 1px" class="layui-col-lg1"></div>
<div style="padding: 0 2% 10px 2%">
<a href="/booklist/plaza.html" class="bl-entry">
<i class="layui-icon">&#xe60a;</i>书单广场
<span class="bl-entry-sub">看看大家都在推什么书</span>
<span class="bl-entry-go">去浏览 <i class="layui-icon" style="font-size:13px;">&#xe602;</i></span>
<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>
</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>
</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="layui-collapse layui-col-lg10">
<div class="layui-colla-item">
@@ -326,6 +411,13 @@
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) {