perf: 手机端页面优化

This commit is contained in:
xiongxiaoyang 2023-10-12 09:42:28 +08:00
parent 4c9f39ab19
commit 05d65c19a7
3 changed files with 70 additions and 37 deletions
novel-front/src/main/resources
static/mobile/js
templates/mobile

@ -1,10 +1,11 @@
var needLoginPath = ['/user/favorites.html','/user/comment.html','/user/feedback.html',
'/user/feedback_list.html','/user/read_history.html','/user/set_name.html',
'/user/set_password.html','/user/set_sex.html','/user/setup.html','/user/userinfo.html',
var needLoginPath = ['/user/favorites.html', '/user/comment.html', '/user/feedback.html',
'/user/feedback_list.html', '/user/read_history.html', '/user/set_name.html',
'/user/set_password.html', '/user/set_sex.html', '/user/setup.html', '/user/userinfo.html',
"/pay/index.html," +
"/author/register.html","/author/index.html"];
"/author/register.html", "/author/index.html"];
var isLogin = false;
var url = window.location.search;
//key(需要检索的键
function getSearchString(key) {
var str = url;
@ -14,26 +15,28 @@ function getSearchString(key) {
for (var i = 0; i < arr.length; i++) {
var tmp_arr = arr[i].split("=");
if(tmp_arr[0] == key){
if (tmp_arr[0] == key) {
return decodeURIComponent(tmp_arr[1]);
}
}
return undefined;
}
var keyword = getSearchString("k");
if(keyword != undefined) {
if (keyword != undefined) {
$("#searchKey").val(keyword);
$("#workDirection").remove();
$("#idGirl").remove();
}
function searchByK(k){
if(!k){
window.location.href='/book/bookclass.html?k='+encodeURIComponent(document.getElementById("searchKey").value)
}else{
window.location.href='/book/bookclass.html?k='+encodeURIComponent(k)
function searchByK(k) {
if (!k) {
window.location.href = '/book/bookclass.html?k=' + encodeURIComponent(document.getElementById("searchKey").value)
} else {
window.location.href = '/book/bookclass.html?k=' + encodeURIComponent(k)
}
}
$("#searchKey").keypress(function (even) {
if (even.which == 13) {
even.stopPropagation();
@ -101,35 +104,37 @@ Array.prototype.remove = function (val) {
};
var token = $.cookie('Authorization');
if(!token){
if(needLoginPath.indexOf(window.location.pathname) != -1){
location.href = '/user/login.html?originUrl='+decodeURIComponent(location.href);
if (!token) {
if (needLoginPath.indexOf(window.location.pathname) != -1) {
location.href = '/user/login.html?originUrl=' + decodeURIComponent(location.href);
}
$(".user_link").html("<a href=\"/user/login.html\">登录</a><a href=\"/user/register.html\">注册</a>");
}else{
} else {
$.ajax({
type: "POST",
url: "/user/refreshToken",
data: {},
dataType: "json",
success: function(data){
if(data.code == 200){
$(".user_link").html("<a href=\"/user/userinfo.html\">"+(data.data.nickName.substring(0,3))+"...</a>&nbsp;&nbsp;<a href=\"javascript:logout()\">退出</a>");
;
if("/user/login.html" == window.location.pathname){
success: function (data) {
if (data.code == 200) {
$(".user_link").html("<a href=\"/user/userinfo.html\"><i style=\"font-size: 20px;\" class=\"layui-icon \n" +
"\">&#xe66f;" +
"\n" +
"</i></a>");
if ("/user/login.html" == window.location.pathname) {
var orginUrl = getSearchString("originUrl");
window.location.href = orginUrl == undefined || orginUrl.isBlank() ? "/" : orginUrl;
return;
}
isLogin = true;
if(localStorage.getItem("autoLogin") == 1){
$.cookie('Authorization', data.data.token, { expires: 7 ,path: '/' });
}else {
$.cookie('Authorization', data.data.token,{ path: '/' });
if (localStorage.getItem("autoLogin") == 1) {
$.cookie('Authorization', data.data.token, {expires: 7, path: '/'});
} else {
$.cookie('Authorization', data.data.token, {path: '/'});
}
}else{
if(needLoginPath.indexOf(window.location.pathname) != -1){
} else {
if (needLoginPath.indexOf(window.location.pathname) != -1) {
location.href = '/user/login.html';
}
$(".user_link").html("<a href=\"/user/login.html\">登录</a><a href=\"/user/register.html\">注册</a>");
@ -143,12 +148,11 @@ if(!token){
}
function logout() {
$.cookie('Authorization', null,{ path: '/' });
$.cookie('Authorization', null, {path: '/'});
location.reload();
}
function readHistory() {
var books = localStorage.getItem("historyBooks");
@ -181,7 +185,7 @@ String.prototype.isPhone = function () {
};
String.prototype.isBlank = function () {
if(this == null || $.trim(this) == ""){
if (this == null || $.trim(this) == "") {
return true;
}
return false;

@ -40,16 +40,17 @@
-webkit-transition: all .3s;
}
.user_link{
.user_link {
position: relative;
display: inline-block;
vertical-align: middle;
line-height: 50px;
padding: 0 20px;
padding: 0 5px;
color: #fff;
float: right;
}
.user_link a{
.user_link a {
color: #fff;
}
@ -187,7 +188,8 @@
<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">
<div th:each="book,iterStat : ${bookMap['3']}" th:if="${iterStat.index<6}" style="margin-bottom: 5px"
class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg4">
<a th:href="'/book/'+${book.bookId}+'.html'">
<div class="layui-col-xs5 layui-col-sm4 layui-col-md4 layui-col-lg4">
<img style=" width:100px; height:125px;" th:src="${book.picUrl}">
@ -195,11 +197,15 @@
</div>
<div class="layui-col-xs5 layui-col-sm6 layui-col-md6 layui-col-lg6">
<ul>
<li style="padding-bottom: 2px" class="line-limit-length" th:text="${book.bookName}"></li>
<li style="padding-bottom: 2px" class="line-limit-length"
th:text="${book.bookName}"></li>
<li style="padding-bottom: 2px;color: #a6a6a6" th:text="'作者:'+${book.authorName}"></li>
<li style="color: #a6a6a6;width: 180px;height:60px;overflow: hidden" th:utext="${book.bookDesc}"> </li></ul>
<li style="color: #a6a6a6;width: 180px;height:60px;overflow: hidden"
th:utext="${book.bookDesc}"></li>
</ul>
</div>
<div style="font-style: italic;color: red" class="layui-col-xs2 layui-col-sm2 layui-col-md2 layui-col-lg2"></div>
<div style="font-style: italic;color: red"
class="layui-col-xs2 layui-col-sm2 layui-col-md2 layui-col-lg2"></div>
</a>
</div>

@ -87,7 +87,22 @@
<div class="layui-container" style="padding: 50px;text-align: center">
<img id="imgLogo" class="user_big_head" src="/images/man.png">
<div id="my_name" style="padding: 10px;font-size: 18px">梦入神机</div>
<div style="padding: 10px;font-size: 18px"><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"
p-id="8815" width="15" height="15">
<path d="M872.335 421.516V151.71H602.528L702.949 252.13 601.4 353.68c-46.47-32.81-103.174-52.091-164.385-52.091-157.595 0-285.351 127.756-285.351 285.35S279.421 872.29 437.014 872.29s285.352-127.755 285.352-285.35c0-57.78-17.19-111.537-46.711-156.47l102.818-102.814 93.862 93.861zM437.015 782.18c-107.827 0-195.24-87.413-195.24-195.24s87.413-195.24 195.24-195.24 195.24 87.413 195.24 195.24-87.413 195.24-195.24 195.24z"
fill="#1296DB" p-id="8816"></path>
</svg>
<svg id="girlIcon" style="display: none" t="1693635698738" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3685" width="15" height="15">
<path d="M513 636.1c-76.4 0-148.2-29.7-202.2-83.8-54-54-83.8-125.8-83.8-202.2s29.7-148.2 83.8-202.2c54-54 125.8-83.8 202.2-83.8s148.2 29.7 202.2 83.8c54 54 83.8 125.8 83.8 202.2s-29.7 148.2-83.8 202.2c-54 54.1-125.8 83.8-202.2 83.8z m0-515.9c-61.4 0-119.2 23.9-162.6 67.4C307 231 283 288.7 283 350.1s23.9 119.2 67.4 162.6 101.2 67.4 162.6 67.4 119.2-23.9 162.6-67.4S743 411.6 743 350.1 719 231 675.6 187.5c-43.4-43.4-101.2-67.3-162.6-67.3z"
fill="#d4237a" p-id="3686"></path>
<path d="M671.4 712.1H544.7v-104h-56v104H362c-15.5 0-28 12.5-28 28s12.5 28 28 28h126.7v163.3c0 15.5 12.5 28 28 28s28-12.5 28-28V768.1h126.7c15.5 0 28-12.5 28-28s-12.5-28-28-28z"
fill="#d4237a" p-id="3687"></path>
</svg>
</div>
<div style="padding: 5px;">账户余额<span id="accountBalance" style="color: #f80">3000</span> 屋币</div>
</div>
@ -217,6 +232,14 @@
$("#my_name").html(data.data.username);
}
if (data.data.userSex === '0') {
$("#boyIcon").css("display", "inline")
}
if (data.data.userSex === '1') {
$("#girlIcon").css("display", "inline")
}
$("#accountBalance").html(data.data.accountBalance);
} else if (data.code == 1001) {