43 changed files with 6081 additions and 0 deletions
-
4385css/libs/animate.min.css
-
186css/libs/reset.css
-
498css/style.css
-
BINfonts/斗鱼追光体.ttf
-
BINimages/1.png
-
BINimages/10.png
-
BINimages/11.png
-
BINimages/12.png
-
BINimages/13.png
-
BINimages/14.png
-
BINimages/15.png
-
BINimages/2.png
-
BINimages/3.png
-
BINimages/4.png
-
BINimages/5.png
-
BINimages/6.png
-
BINimages/7.png
-
BINimages/8.png
-
BINimages/9.png
-
BINimages/book_03.png
-
BINimages/default-img.png
-
BINimages/empty.png
-
BINimages/icon1.png
-
BINimages/icon2.png
-
BINimages/icon3.png
-
BINimages/list-rack.png
-
BINimages/list-title.png
-
46index.html
-
43index2.html
-
1js/data.js
-
365js/index.js
-
402js/index2.js
-
147js/libs/flexible.js
-
2js/libs/jquery-3.7.1.min.js
-
2js/libs/layer/layer.js
-
2js/libs/layer/mobile/layer.js
-
1js/libs/layer/mobile/need/layer.css
-
BINjs/libs/layer/theme/default/icon-ext.png
-
BINjs/libs/layer/theme/default/icon.png
-
1js/libs/layer/theme/default/layer.css
-
BINjs/libs/layer/theme/default/loading-0.gif
-
BINjs/libs/layer/theme/default/loading-1.gif
-
BINjs/libs/layer/theme/default/loading-2.gif
4385
css/libs/animate.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,186 @@ |
|||
@charset "utf-8"; |
|||
|
|||
/* CSS Document */ |
|||
|
|||
html { |
|||
-webkit-text-size-adjust: 100%; |
|||
-ms-text-size-adjust: 100%; |
|||
background-color: #F4F4FC; |
|||
} |
|||
|
|||
body, |
|||
div, |
|||
dl, |
|||
dt, |
|||
dd, |
|||
ul, |
|||
ol, |
|||
li, |
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6, |
|||
pre, |
|||
code, |
|||
form, |
|||
fieldset, |
|||
legend, |
|||
input, |
|||
textarea, |
|||
p, |
|||
blockquote, |
|||
th, |
|||
td, |
|||
hr, |
|||
button, |
|||
article, |
|||
aside, |
|||
details, |
|||
figcaption, |
|||
figure, |
|||
footer, |
|||
header, |
|||
hgroup, |
|||
menu, |
|||
nav, |
|||
section { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
body, |
|||
button, |
|||
input, |
|||
select, |
|||
textarea { |
|||
font: 12px arial, "微软雅黑" |
|||
} |
|||
|
|||
input, |
|||
select, |
|||
textarea { |
|||
font-size: 100%; |
|||
} |
|||
|
|||
table { |
|||
border-collapse: collapse; |
|||
border-spacing: 0; |
|||
} |
|||
|
|||
th { |
|||
text-align: inherit; |
|||
} |
|||
|
|||
fieldset, |
|||
img { |
|||
border: 0; |
|||
} |
|||
|
|||
iframe { |
|||
display: block; |
|||
} |
|||
|
|||
abbr, |
|||
acronym { |
|||
border: 0; |
|||
font-variant: normal; |
|||
} |
|||
|
|||
del { |
|||
text-decoration: line-through; |
|||
} |
|||
|
|||
address, |
|||
caption, |
|||
cite, |
|||
code, |
|||
dfn, |
|||
em, |
|||
i, |
|||
th, |
|||
var { |
|||
font-style: normal; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
ol, |
|||
ul { |
|||
list-style: none; |
|||
} |
|||
|
|||
caption, |
|||
th { |
|||
text-align: left; |
|||
} |
|||
|
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6 { |
|||
font-size: 100%; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
q:before, |
|||
q:after { |
|||
content: ''; |
|||
} |
|||
|
|||
ins, |
|||
a { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
button { |
|||
border: 0; |
|||
outline: none; |
|||
} |
|||
|
|||
|
|||
/* common |
|||
-----------------------------------------------*/ |
|||
|
|||
.clearfix:after { |
|||
content: "\200B"; |
|||
display: block; |
|||
height: 0; |
|||
clear: both; |
|||
} |
|||
|
|||
.clearfix { |
|||
zoom: 1; |
|||
} |
|||
|
|||
.clear { |
|||
clear: both; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
a { |
|||
color: #000; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
a:hover { |
|||
color: #000; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
select::-ms-expand { |
|||
display: none; |
|||
} |
|||
|
|||
input, |
|||
textarea:focus { |
|||
outline: none; |
|||
} |
|||
|
|||
select { |
|||
-webkit-appearance: none; |
|||
-moz-appearance: none; |
|||
appearance: none; |
|||
} |
|||
@ -0,0 +1,498 @@ |
|||
/* 1080*1920 */ |
|||
/**滚动条的宽度*/ |
|||
::-webkit-scrollbar { |
|||
width: 8px; |
|||
height: 8px; |
|||
} |
|||
|
|||
/**滚动条的滑块*/ |
|||
::-webkit-scrollbar-thumb { |
|||
background-color: rgba(0,0,0,.3); |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
/**只需要加上这一行*/ |
|||
::-webkit-scrollbar-corner { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: "DOUYU-Regular"; |
|||
src: url('../fonts/斗鱼追光体.ttf'); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
.lib-wrapper{ |
|||
width: 100vw; |
|||
height: 100vh; |
|||
overflow: hidden; |
|||
} |
|||
.lib-header{ |
|||
width: calc(100% - 40px); |
|||
padding: 20px; |
|||
background-color: #fff; |
|||
box-shadow: 0px 0px 20px 1px rgba(0,0,0,.2); |
|||
} |
|||
.lib-search{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
width: calc(100%); |
|||
height: 60px; |
|||
border: 1px solid #C6C6E2; |
|||
border-radius: 5px; |
|||
overflow: hidden; |
|||
} |
|||
.lib-search input{ |
|||
display: block; |
|||
flex: 1; |
|||
height: 60px; |
|||
padding: 0 20px; |
|||
font-size: 30px; |
|||
border: none; |
|||
} |
|||
.lib-search button{ |
|||
position: relative; |
|||
display: block; |
|||
font-size: 30px; |
|||
width: 130px; |
|||
height: 60px; |
|||
background-color: #5A86F4; |
|||
color: #fff; |
|||
text-align: center; |
|||
padding-left: 30px; |
|||
cursor: pointer; |
|||
} |
|||
.lib-search button::before{ |
|||
content: ""; |
|||
position: absolute; |
|||
left: 14px; |
|||
top: 50%; |
|||
width: 30px; |
|||
height: 30px; |
|||
background: url("../images/icon1.png") no-repeat left center; |
|||
background-size: cover; |
|||
transform: translateY(-50%) |
|||
} |
|||
.lending-btn{ |
|||
position: fixed; |
|||
right: 60px; |
|||
top: 50%; |
|||
text-align: center; |
|||
border-radius: 50%; |
|||
transform: translateY(-50%); |
|||
z-index: 9999; |
|||
} |
|||
.lending-btn img{ |
|||
display: block; |
|||
width: 80px; |
|||
height: 80px; |
|||
} |
|||
.lending-btn span{ |
|||
display: block; |
|||
font-size: 30px; |
|||
padding-top: 20px; |
|||
font-family: "DOUYU-Regular"; |
|||
} |
|||
.lib-search-result { |
|||
display: none; |
|||
font-size: 28px; |
|||
padding: 0 20px 10px 20px; |
|||
} |
|||
.lib-search-result span{ |
|||
display: inline-block; |
|||
padding-right: 4px; |
|||
color: #5A86F4; |
|||
} |
|||
|
|||
.lib-book{ |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
width: calc(100vw); |
|||
height: calc(100vh - 102px); |
|||
margin-top: 20px; |
|||
overflow: hidden; |
|||
} |
|||
.lib-book-left{ |
|||
width: 180px; |
|||
padding: 20px 0 20px 20px; |
|||
background-color: #fff; |
|||
/* border-radius: 14px; */ |
|||
} |
|||
.left-item { |
|||
height: calc(50% - 40px); |
|||
padding-bottom: 40px; |
|||
} |
|||
.left-item h4{ |
|||
position: relative; |
|||
font-size: 34px; |
|||
padding-left: 16px; |
|||
margin-bottom: 10px; |
|||
line-height: 46px; |
|||
font-weight: bold; |
|||
color: #191A1A; |
|||
} |
|||
|
|||
.left-item h4::before{ |
|||
content: ""; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 50%; |
|||
width: 7px; |
|||
height: 30px; |
|||
background: #5A86F4; |
|||
margin-top: -15px; |
|||
} |
|||
|
|||
.left-filter{ |
|||
font-size: 28px; |
|||
line-height: 56px; |
|||
height: calc(100% - 46px); |
|||
overflow: hidden; |
|||
overflow-y: scroll; |
|||
} |
|||
|
|||
.left-filter li{ |
|||
padding-left: 16px; |
|||
color: #191A1A; |
|||
cursor: pointer; |
|||
text-overflow: -o-ellipsis-lastline; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 1; |
|||
line-clamp: 1; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.left-filter li:hover, |
|||
.left-filter li.active{ |
|||
font-weight: bold; |
|||
background-color: #F1F4FE; |
|||
border-radius: 7px 0 0 7px; |
|||
} |
|||
|
|||
.lib-book-right{ |
|||
flex: 1; |
|||
height: calc(100% - 40px); |
|||
padding: 20px 0; |
|||
background-color: #F1F4FE; |
|||
} |
|||
.book-list-wrapper{ |
|||
padding-left: 10px; |
|||
width: calc(100% - 10px); |
|||
height: calc(100% - 30px); |
|||
overflow: hidden; |
|||
overflow-y: scroll; |
|||
} |
|||
.book-list { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
flex-wrap: wrap; |
|||
width: calc(100%); |
|||
} |
|||
.book-list li{ |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
flex-direction: column; |
|||
width: calc(100% / 4 - 50px); |
|||
padding: 14px; |
|||
margin: 0 10px 20px 10px; |
|||
border: 1px solid #C6C6E2; |
|||
border-radius: 10px; |
|||
background-color: #fff; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.book-list li.active{ |
|||
position: relative; |
|||
border-color: #5A86F4; |
|||
} |
|||
|
|||
.book-list li.active::after{ |
|||
content: ""; |
|||
position: absolute; |
|||
right: -1px; |
|||
bottom: 0; |
|||
width: 48px; |
|||
height: 48px; |
|||
background: url("../images/icon2.png") no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.book-list li a{ |
|||
display: block; |
|||
} |
|||
|
|||
.book-list-img{ |
|||
height: 140px; |
|||
margin: 0 auto; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.book-list-img img{ |
|||
display: block; |
|||
height: 100%; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.book-list li h4{ |
|||
font-size: 30px; |
|||
height: 64px; |
|||
line-height: 32px; |
|||
margin: 14px 0; |
|||
text-overflow: -o-ellipsis-lastline; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.book-list li span{ |
|||
display: block; |
|||
font-size: 24px; |
|||
} |
|||
.rack-box{ |
|||
padding-top: 10px; |
|||
width: 100%; |
|||
height: calc(100%); |
|||
} |
|||
.rack-content{ |
|||
position: relative; |
|||
height: calc(100% - 40px); |
|||
overflow: hidden; |
|||
overflow-y: scroll; |
|||
} |
|||
.rack-box-list{ |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
flex-wrap: wrap; |
|||
height: 314px; |
|||
padding: 0 40px; |
|||
width: calc(100vw - 280px); |
|||
background: url('../images/list-rack.png') no-repeat 0 212px; |
|||
background-size: contain; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.rack-box-list .list-item{ |
|||
/* margin-right: 2px; */ |
|||
display: inline-block; |
|||
border: none; |
|||
height: 254px; |
|||
width: 65px; |
|||
position: relative; |
|||
background-size: contain; |
|||
} |
|||
|
|||
.rack-box-list .list-item.active{ |
|||
position: relative; |
|||
/* border:2px solid#5A86F4; */ |
|||
} |
|||
|
|||
.rack-box-list .list-item.active::after{ |
|||
content: ""; |
|||
position: absolute; |
|||
right: -1px; |
|||
bottom: 0; |
|||
width: 32px; |
|||
height: 32px; |
|||
background: url("../images/icon2.png") no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.box-txt{ |
|||
position: absolute; |
|||
top: 12%; |
|||
left: 50%; |
|||
transform: translateX(-40%); |
|||
pointer-events: none; |
|||
} |
|||
|
|||
.book-name, |
|||
.book-writer{ |
|||
writing-mode:vertical-rl; |
|||
height: 235px; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.book-name{ |
|||
font-size: 20px; |
|||
} |
|||
.book-writer{ |
|||
font-size: 16px; |
|||
} |
|||
.rack-box-list .list-item:nth-child(12n+1){ |
|||
background: url('../images/1.png') no-repeat 0 0; |
|||
} |
|||
.rack-box-list .list-item:nth-child(12n+2){ |
|||
background: url('../images/2.png') no-repeat 0 0; |
|||
} |
|||
.rack-box-list .list-item:nth-child(12n+3){ |
|||
background: url('../images/3.png') no-repeat 0 0; |
|||
} |
|||
.rack-box-list .list-item:nth-child(12n+4){ |
|||
background: url('../images/4.png') no-repeat 0 0; |
|||
} |
|||
.rack-box-list .list-item:nth-child(12n+5){ |
|||
background: url('../images/6.png') no-repeat 0 0; |
|||
} |
|||
.rack-box-list .list-item:nth-child(12n+6){ |
|||
background: url('../images/7.png') no-repeat 0 0; |
|||
} |
|||
.rack-box-list .list-item:nth-child(12n+7){ |
|||
background: url('../images/10.png') no-repeat 0 0; |
|||
} |
|||
.rack-box-list .list-item:nth-child(12n+8){ |
|||
background: url('../images/11.png') no-repeat 0 0; |
|||
} |
|||
.rack-box-list .list-item:nth-child(12n+9){ |
|||
background: url('../images/12.png') no-repeat 0 0; |
|||
} |
|||
.rack-box-list .list-item:nth-child(12n+10){ |
|||
background: url('../images/13.png') no-repeat 0 0; |
|||
} |
|||
.rack-box-list .list-item:nth-child(12n+11){ |
|||
background: url('../images/14.png') no-repeat 0 0; |
|||
} |
|||
.rack-box-list .list-item:nth-child(12n+12){ |
|||
background: url('../images/15.png') no-repeat 0 0; |
|||
} |
|||
|
|||
.lib-dialog{ |
|||
position: fixed; |
|||
left: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
right: 0; |
|||
} |
|||
.lib-dialog-mask{ |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0,0,0,.3); |
|||
} |
|||
.lib-dialog-main{ |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 20%; |
|||
width: 860px; |
|||
background-color: #fff; |
|||
border-radius: 24px; |
|||
margin-left: -430px; |
|||
} |
|||
|
|||
.lib-dialog-header{ |
|||
padding-bottom: 30px; |
|||
} |
|||
.lib-dialog-title{ |
|||
width: 494px; |
|||
height: 76px; |
|||
line-height: 76px; |
|||
background: url('../images/list-title.png') no-repeat; |
|||
background-size: contain; |
|||
font-size: 40px; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
margin: 0 auto; |
|||
} |
|||
.lib-lending-list{ |
|||
height: 490px; |
|||
margin: 0 40px; |
|||
overflow: hidden; |
|||
overflow-y: scroll; |
|||
} |
|||
.lib-lending-item{ |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
flex-wrap: nowrap; |
|||
align-items: center; |
|||
font-size: 26px; |
|||
padding: 16px 0; |
|||
border-bottom: 1px solid #C6C6E2; |
|||
} |
|||
.lending-num{ |
|||
display: block; |
|||
width: 40px; |
|||
} |
|||
.lending-img{ |
|||
width: 60px; |
|||
margin-right: 10px; |
|||
/* height: 60px; */ |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.lending-img img{ |
|||
display: block; |
|||
width: 100%; |
|||
} |
|||
.lib-lending-item h4{ |
|||
flex: 1; |
|||
padding-left: 10px; |
|||
} |
|||
.lib-lending-item h4, |
|||
.lib-lending-item span.lending-author{ |
|||
text-overflow: -o-ellipsis-lastline; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 1; |
|||
line-clamp: 1; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.lib-lending-item .lending-author{ |
|||
flex: 1; |
|||
} |
|||
|
|||
.lib-dialog-bottom{ |
|||
display: flex; |
|||
justify-content: space-around; |
|||
padding: 40px 220px; |
|||
} |
|||
|
|||
.lib-dialog-bottom span{ |
|||
display: block; |
|||
padding: 0 40px; |
|||
font-size: 26px; |
|||
height: 56px; |
|||
line-height: 56px; |
|||
border: 1px solid #C6C6E2; |
|||
border-radius: 7px; |
|||
cursor: pointer; |
|||
} |
|||
.confirm-btn{ |
|||
color: #fff; |
|||
background-color: #5A86F4; |
|||
border-color: #5A86F4; |
|||
} |
|||
|
|||
.empty-book-list{ |
|||
width: 300px; |
|||
margin: 100px auto 0 auto; |
|||
text-align: center; |
|||
} |
|||
|
|||
.empty-book-list img{ |
|||
display: block; |
|||
width: 100%; |
|||
} |
|||
|
|||
.empty-book-list span{ |
|||
display: block; |
|||
padding-top: 20px; |
|||
font-size: 30px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.book-noData{ |
|||
color: #a3a3a3; |
|||
font-size: 30px; |
|||
text-align: center; |
|||
padding: 10px 0 0 0; |
|||
margin-bottom: 30px; |
|||
} |
|||
|
After Width: 67 | Height: 259 | Size: 4.5 KiB |
|
After Width: 67 | Height: 259 | Size: 7.8 KiB |
|
After Width: 67 | Height: 259 | Size: 7.3 KiB |
|
After Width: 67 | Height: 259 | Size: 5.6 KiB |
|
After Width: 67 | Height: 259 | Size: 5.9 KiB |
|
After Width: 67 | Height: 259 | Size: 4.7 KiB |
|
After Width: 67 | Height: 259 | Size: 5.5 KiB |
|
After Width: 67 | Height: 259 | Size: 5.4 KiB |
|
After Width: 67 | Height: 259 | Size: 6.0 KiB |
|
After Width: 67 | Height: 259 | Size: 2.3 KiB |
|
After Width: 67 | Height: 259 | Size: 4.7 KiB |
|
After Width: 67 | Height: 259 | Size: 4.2 KiB |
|
After Width: 67 | Height: 259 | Size: 9.0 KiB |
|
After Width: 67 | Height: 259 | Size: 7.9 KiB |
|
After Width: 67 | Height: 259 | Size: 8.0 KiB |
|
After Width: 112 | Height: 160 | Size: 40 KiB |
|
After Width: 66 | Height: 83 | Size: 4.2 KiB |
|
After Width: 394 | Height: 256 | Size: 10 KiB |
|
After Width: 64 | Height: 64 | Size: 2.0 KiB |
|
After Width: 64 | Height: 64 | Size: 718 B |
|
After Width: 256 | Height: 256 | Size: 9.9 KiB |
|
After Width: 1140 | Height: 137 | Size: 25 KiB |
|
After Width: 494 | Height: 76 | Size: 15 KiB |
@ -0,0 +1,46 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh-CN"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> |
|||
<meta http-equiv="Pragma" content="no-cache" /> |
|||
<meta http-equiv="Expires" content="0" /> |
|||
<link rel="stylesheet" type="text/css" href="css/libs/reset.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/libs/animate.min.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/style.css" /> |
|||
<!--[if lt IE 9]> |
|||
<script src="js/html5shiv.js"></script> |
|||
<script src="js/respond.min.js"></script> |
|||
<![endif]--> |
|||
<title>查询机图书列表</title> |
|||
</head> |
|||
<body> |
|||
<div class="lib-wrapper"> |
|||
<div class="lib-header"> |
|||
<div class="lib-search"> |
|||
<input type="text" name="keyword" placeholder="请输入关键词进行检索"> |
|||
<button class="search-btn">搜索</button> |
|||
</div> |
|||
<div class="lending-btn"><img src="images/icon3.png" alt="" /><span>借阅</span></div> |
|||
</div> |
|||
<div class="lib-book"> |
|||
<div class="lib-book-left" id="lib-book-left"> |
|||
</div> |
|||
<div class="lib-book-right"> |
|||
<div class="lib-search-result">检索结果：<span>0</span>册</div> |
|||
<div class="rack-box"> |
|||
<div class="rack-content"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
<script type="text/javascript" src="js/libs/jquery-3.7.1.min.js"></script> |
|||
<script type="text/javascript" src="js/libs/flexible.js"></script> |
|||
<!-- 弹出框 --> |
|||
<script type="text/javascript" src="js/libs/layer/layer.js"></script> |
|||
<script type="text/javascript" src="js/index2.js"></script> |
|||
</html> |
|||
@ -0,0 +1,43 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh-CN"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> |
|||
<meta http-equiv="Pragma" content="no-cache" /> |
|||
<meta http-equiv="Expires" content="0" /> |
|||
<link rel="stylesheet" type="text/css" href="css/libs/reset.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/libs/animate.min.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/style.css" /> |
|||
<!--[if lt IE 9]> |
|||
<script src="js/html5shiv.js"></script> |
|||
<script src="js/respond.min.js"></script> |
|||
<![endif]--> |
|||
<title>查询机图书列表</title> |
|||
</head> |
|||
<body> |
|||
<div class="lib-wrapper"> |
|||
<div class="lib-header"> |
|||
<div class="lib-search"> |
|||
<input type="text" name="keyword" placeholder="请输入关键词进行检索"> |
|||
<button class="search-btn">搜索</button> |
|||
</div> |
|||
<div class="lending-btn"><img src="images/icon3.png" alt="" /><span>借阅</span></div> |
|||
</div> |
|||
<div class="lib-book"> |
|||
<div class="lib-book-left" id="lib-book-left"> |
|||
</div> |
|||
<div class="lib-book-right"> |
|||
<div class="lib-search-result">检索结果：<span>0</span>册</div> |
|||
<div class="book-list-wrapper"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
<script type="text/javascript" src="js/libs/jquery-3.7.1.min.js"></script> |
|||
<script type="text/javascript" src="js/libs/flexible.js"></script> |
|||
<!-- 弹出框 --> |
|||
<script type="text/javascript" src="js/libs/layer/layer.js"></script> |
|||
<script type="text/javascript" src="js/index.js"></script> |
|||
</html> |
|||
1
js/data.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,365 @@ |
|||
let sBoxID = '' |
|||
let sSortmark = '' |
|||
let page = 0 |
|||
let pageSize = 30 |
|||
let hasNextPage = true |
|||
let searchKeyWord = '' // 搜索keyword
|
|||
let isSearch = false |
|||
|
|||
// 默认初始化会有限制选择图书借阅的数量的值
|
|||
// public string getReader()
|
|||
// 读者信息 {"Barcode":"700008","Name":"测试卡","nMaxNum":2}
|
|||
let lendNum = 0 |
|||
|
|||
setInterval(function() { |
|||
$('.lending-btn img').css('animation-duration', '1s').addClass('animate__animated animate__tada'); |
|||
setTimeout(function() { |
|||
$('.lending-btn img').removeClass('animate__animated animate__tada'); |
|||
}, 1000); |
|||
}, 5000); |
|||
|
|||
getBaseInfoReader() |
|||
function getBaseInfoReader(){ |
|||
let readerJson = JSON.parse(boundObject.getReader()) |
|||
console.log('readerJson',readerJson) |
|||
console.log('readerJson-Barcode',readerJson.Barcode) |
|||
console.log('readerJson-Name',readerJson.Name) |
|||
console.log('readerJson-nMaxNum',readerJson.nMaxNum) |
|||
lendNum = readerJson.nMaxNum |
|||
} |
|||
|
|||
// 假设书籍数据
|
|||
let books = []; |
|||
|
|||
// 动态生成左侧分类的项
|
|||
createHtmlLeftNav(); |
|||
function createHtmlLeftNav() { |
|||
// let LeftLocaltionJSON = [{"BoxID":"*","BoxName":"全部"},{"BoxID":"1","BoxName":"1号书盒"},{"BoxID":"2","BoxName":"2号书盒"},{"BoxID":"3","BoxName":"3号书盒"},{"BoxID":"4","BoxName":"4号书盒"},{"BoxID":"5","BoxName":"5号书盒"},{"BoxID":"6","BoxName":"6号书盒"},{"BoxID":"7","BoxName":"7号书盒"},{"BoxID":"8","BoxName":"8号书盒"},{"BoxID":"9","BoxName":"9号书盒"},{"BoxID":"10","BoxName":"10号书盒"},{"BoxID":"11","BoxName":"11号书盒"},{"BoxID":"12","BoxName":"12号书盒"},{"BoxID":"13","BoxName":"13号书盒"},{"BoxID":"14","BoxName":"14号书盒"},{"BoxID":"15","BoxName":"15号书盒"},{"BoxID":"16","BoxName":"16号书盒"},{"BoxID":"17","BoxName":"17号书盒"},{"BoxID":"18","BoxName":"18号书盒"}];
|
|||
// let LeftCategoriesJSON = [{"SortIndex":"I","SortName":"文学","BookNum":2},{"SortIndex":"K","SortName":"历史、地理","BookNum":1}];
|
|||
|
|||
// LeftLocaltionJSON / LeftCategoriesJSON c#执行得返回值
|
|||
// boundObject c#端注册类得名称
|
|||
// cshareFunction c#端注册类boundObject下的函数
|
|||
|
|||
let LeftLocaltionJSON = boundObject.getBoxs('1') |
|||
let locations = JSON.parse(LeftLocaltionJSON) |
|||
console.log('LeftLocaltionJSON',LeftLocaltionJSON) |
|||
|
|||
let LeftCategoriesJSON = boundObject.getSortmarks('2') |
|||
let categories = JSON.parse(LeftCategoriesJSON) |
|||
console.log('LeftCategoriesJSON',LeftCategoriesJSON) |
|||
|
|||
// 图书位置
|
|||
let locationsHtml = '<div class="left-item"><h4>图书位置</h4><ul class="left-filter filter-location">'; |
|||
locations.forEach((location, index) => { |
|||
let activeClass = index === 0 ? 'class="active"' : ''; |
|||
locationsHtml += `<li ${activeClass} data-id=${location.BoxID}>${location.BoxName}</li>`; |
|||
}); |
|||
locationsHtml += '</ul></div>'; |
|||
|
|||
// 图书分类
|
|||
let categoriesHtml = '<div class="left-item"><h4>图书分类</h4><ul class="left-filter filter-sort">'; |
|||
categories.forEach(category => { |
|||
categoriesHtml += `<li data-id=${category.SortIndex}>${category.SortName}</li>`; |
|||
}); |
|||
categoriesHtml += '</ul></div>'; |
|||
|
|||
document.getElementById('lib-book-left').innerHTML = `${locationsHtml}${categoriesHtml}` |
|||
} |
|||
|
|||
// 为图书位置和分类的每个li元素添加点击事件
|
|||
document.querySelectorAll('.left-filter li').forEach(item => { |
|||
item.addEventListener('click', function(event) { |
|||
|
|||
document.querySelectorAll('.left-filter li').forEach(li => { |
|||
li.classList.remove('active'); |
|||
}); |
|||
const clickedLi = event.target; |
|||
const dataId = clickedLi.getAttribute('data-id'); |
|||
|
|||
// 判断点击的是图书位置还是分类，并分别处理
|
|||
if (clickedLi.closest('.filter-location')) { |
|||
if(dataId === '*'){ |
|||
sBoxID = ''; |
|||
}else{ |
|||
sBoxID = dataId; |
|||
} |
|||
sSortmark = '' |
|||
} else if (clickedLi.closest('.filter-sort')) { |
|||
sSortmark = dataId; |
|||
sBoxID = '' |
|||
} |
|||
this.classList.add('active'); |
|||
|
|||
document.querySelector('.book-list-wrapper').scrollTop = 0 |
|||
document.querySelector('.book-list-wrapper').innerHTML = '' |
|||
|
|||
page = 0 |
|||
hasNextPage = true |
|||
document.querySelector('input[name="keyword"]').value = '' |
|||
searchKeyWord = '' |
|||
isSearch = false |
|||
|
|||
FetchRightBookList() |
|||
}); |
|||
}); |
|||
|
|||
let scrollTimeout = null; |
|||
|
|||
function debouncedOnScroll() { |
|||
if (scrollTimeout !== null) { |
|||
clearTimeout(scrollTimeout); |
|||
} |
|||
scrollTimeout = setTimeout(onScroll, 200); // 延迟1秒执行onScroll
|
|||
} |
|||
|
|||
// 滚动事件处理函数
|
|||
function onScroll() { |
|||
const element = document.querySelector('.book-list-wrapper') |
|||
if (element.scrollTop + element.offsetHeight > element.scrollHeight - 100) { |
|||
FetchRightBookList(); |
|||
} |
|||
} |
|||
|
|||
// 添加节流后的滚动监听
|
|||
document.querySelector('.book-list-wrapper').addEventListener('scroll', debouncedOnScroll); |
|||
|
|||
FetchRightBookList() |
|||
function FetchRightBookList(){ |
|||
if (!hasNextPage) return; // 如果没有下一页，停止加载
|
|||
if (isSearch) { |
|||
page = 0 |
|||
sBoxID = '' |
|||
sSortmark = '' |
|||
document.querySelector('.book-list-wrapper').innerHTML = '' |
|||
} |
|||
|
|||
const params = { |
|||
'sName': searchKeyWord, |
|||
'sBoxID': sBoxID, |
|||
'sSortmark': sSortmark, |
|||
'nPageIndex': page, |
|||
'nPageMaxNum': pageSize |
|||
} |
|||
// js传参给 c#端
|
|||
console.log(params) |
|||
console.log('sName',searchKeyWord) |
|||
console.log('sBoxID',sBoxID) |
|||
console.log('sSortmark',sSortmark) |
|||
console.log('nPageIndex',page) |
|||
console.log('nPageMaxNum',pageSize) |
|||
|
|||
// ----- ----- ----- js调用c#的函数
|
|||
let booksRightJson = boundObject.getBooks(searchKeyWord,sBoxID,sSortmark,page,pageSize) |
|||
var correctedJsonStr = booksRightJson.replace(/"status":\s*"0",\s*/, ''); |
|||
// 去除字符串的头尾空白
|
|||
correctedJsonStr = correctedJsonStr.trim(); |
|||
// 去掉字符串的头花括号
|
|||
correctedJsonStr = correctedJsonStr.substring(1); |
|||
books = JSON.parse(correctedJsonStr).data |
|||
|
|||
const totalPages = JSON.parse(correctedJsonStr).totalPages |
|||
console.log('totalPages',totalPages) |
|||
if (page > totalPages || books.length === 0) { |
|||
hasNextPage = false; |
|||
} |
|||
createRightBooklist(books); |
|||
page += 1; |
|||
} |
|||
|
|||
// 有图书封面的时候
|
|||
function createRightBooklist(books){ |
|||
console.log('books.length',books.length) |
|||
let bookListHtml = '' |
|||
let bookList = document.querySelector('.book-list-wrapper').querySelector('.book-list'); |
|||
let emptyBook = document.querySelector('.book-list-wrapper').querySelector('.empty-book-list'); |
|||
|
|||
if(books.length === 0){ |
|||
document.querySelector(".lib-search-result").style.display = 'none' |
|||
document.querySelector(".lib-search-result span").innerHTML = 0 |
|||
|
|||
bookListHtml = `
|
|||
<div class="empty-book-list"> |
|||
<img src="images/empty.png" alt="" /> |
|||
<span>暂无相关数据</span> |
|||
</div> |
|||
`;
|
|||
document.querySelector('.book-list-wrapper').innerHTML = bookListHtml; |
|||
if (bookList) { |
|||
bookList.remove() |
|||
} |
|||
}else{ |
|||
// getBooks(string sName,string sBoxID,string sSortmark,int nPageIndex,int nPageMaxNum)
|
|||
// getBookDetail(string sBarcode)
|
|||
|
|||
// books = [{"Barcode":"000131034","Name":"好人难做","Author":"周磊","ISBN":"9787541566431","Sortmark":"I235/50","BoxID":"1"},{"Barcode":"000134847","Name":"仙逆","Author":"","ISBN":"","Sortmark":"I32","BoxID":"1"},{"Barcode":"1007700","Name":"红楼梦","Author":"","ISBN":"","Sortmark":"K543/20","BoxID":"1"}]
|
|||
|
|||
|
|||
books.forEach(book => { |
|||
let booksCoverJson = boundObject.getBookDetail(book.Barcode) |
|||
let cover = JSON.parse(booksCoverJson) |
|||
let booksCover = cover[0].BookCover !== null ? `data:image/jpeg;base64,${cover[0].BookCover}` : 'images/default-img.png' |
|||
bookListHtml += `
|
|||
<li data-id="${book.Barcode}"> |
|||
<div class="book-list-img"> |
|||
<img src="${booksCover}" alt="" /> |
|||
</div> |
|||
<h4>${book.Name}</h4> |
|||
<span>${(book.Author !== '' && book.Author !== 'NULL') ? book.Author : ''}</span> |
|||
</li> |
|||
`;
|
|||
}); |
|||
|
|||
if(emptyBook !== null){ |
|||
emptyBook.remove() |
|||
} |
|||
|
|||
if (!bookList) { |
|||
bookList = document.createElement('ul'); |
|||
bookList.className = 'book-list'; |
|||
document.querySelector('.book-list-wrapper').appendChild(bookList); |
|||
} |
|||
|
|||
if(!hasNextPage){ |
|||
const existingEndMarker = document.querySelector('.book-list-wrapper .book-noData'); |
|||
if (!existingEndMarker) { |
|||
const bookDataEnd = `<div class="book-noData">暂无更多数据啦~</div>`; |
|||
document.querySelector('.book-list-wrapper').insertAdjacentHTML('beforeend', bookDataEnd); |
|||
} |
|||
}else{ |
|||
document.querySelector('.book-list-wrapper').querySelector('.book-list').innerHTML += bookListHtml; |
|||
|
|||
// 为图书列表的每个li元素添加点击事件
|
|||
document.querySelectorAll('.book-list li').forEach(item => { |
|||
item.addEventListener('click', function() { |
|||
this.classList.toggle('active'); |
|||
}); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
if(isSearch){ |
|||
document.querySelector(".lib-search-result").style.display = 'block' |
|||
document.querySelector(".lib-search-result span").innerHTML = books.length |
|||
}else{ |
|||
document.querySelector(".lib-search-result").style.display = 'none' |
|||
document.querySelector(".lib-search-result span").innerHTML = 0 |
|||
} |
|||
} |
|||
// 创建借阅书籍弹框
|
|||
function createlendDialog(books) { |
|||
// 借阅书籍列表
|
|||
const listItems = books.map(function(book,index) { |
|||
return `
|
|||
<li class="lib-lending-item"> |
|||
<span class="lending-num">${index+1}</span> |
|||
<div class="lending-img"> |
|||
<img src="${book.image}" alt="" /> |
|||
</div> |
|||
<span class="lending-author">${book.barcode}</span> |
|||
<h4>${book.title}</h4> |
|||
</li> |
|||
`;
|
|||
}).join(''); |
|||
|
|||
// <span class="lending-author">${book.author !== null ? book.author : ''}</span>
|
|||
|
|||
// 弹框的HTML字符串
|
|||
const dialogHTML = `
|
|||
<div class="lib-dialog" id="lib-dialog"> |
|||
<div class="lib-dialog-mask"></div> |
|||
<div class="lib-dialog-main"> |
|||
<div class="lib-dialog-header"> |
|||
<div class="lib-dialog-title">图书借阅</div> |
|||
</div> |
|||
<ul class="lib-lending-list"> |
|||
${listItems} |
|||
</ul> |
|||
<div class="lib-dialog-bottom"> |
|||
<span class="cancel-btn">取消</span> |
|||
<span class="confirm-btn">确定</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
`;
|
|||
|
|||
// 将弹框添加到body
|
|||
document.body.insertAdjacentHTML('beforeend', dialogHTML); |
|||
|
|||
// 获取弹框元素
|
|||
const dialog = document.getElementById('lib-dialog'); |
|||
const cancelButton = dialog.querySelector('.cancel-btn'); |
|||
const confirmButton = dialog.querySelector('.confirm-btn'); |
|||
|
|||
// 取消
|
|||
cancelButton.addEventListener('click', function() { |
|||
removeSelected(dialog) |
|||
}); |
|||
// 确定
|
|||
confirmButton.addEventListener('click', function() { |
|||
// ----- ----- ----- js调用c#的函数 假设需要借阅得书籍id集
|
|||
// public string beginLendBooks(string sData)
|
|||
const bookBarcodes = books.map(function(book) { |
|||
return book.barcode |
|||
}) |
|||
console.log('bookBarcodes',bookBarcodes) |
|||
const params = bookBarcodes.join(',') |
|||
let lendBookComfirmed = boundObject.beginLendBooks(params) |
|||
if(lendBookComfirmed){ |
|||
removeSelected(dialog) |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function removeSelected(dialog){ |
|||
const bookListItems = document.querySelectorAll('.book-list li'); |
|||
bookListItems.forEach(function(item) { |
|||
item.classList.remove('active'); |
|||
}); |
|||
dialog.remove() |
|||
} |
|||
|
|||
// 图书借阅弹框 show
|
|||
document.querySelector(".lending-btn").addEventListener("click", function() { |
|||
const selectedBooks = []; |
|||
document.querySelectorAll('.book-list li.active').forEach(activeLi => { |
|||
const bookData = { |
|||
barcode: activeLi.getAttribute('data-id'), |
|||
title: activeLi.querySelector('h4').textContent, |
|||
image: activeLi.querySelector('img').src |
|||
}; |
|||
selectedBooks.push(bookData); |
|||
}); |
|||
|
|||
if(selectedBooks.length === 0){ |
|||
layer.alert('请先选择需要借阅的图书！'); |
|||
return false |
|||
}else if(selectedBooks.length > lendNum){ |
|||
layer.alert('最多只可借阅'+lendNum+'本图书!'); |
|||
return false |
|||
}{ |
|||
createlendDialog(selectedBooks); |
|||
} |
|||
}); |
|||
|
|||
// 搜索按钮点击搜索
|
|||
document.querySelector(".search-btn").addEventListener("click", function() { |
|||
isSearch = true |
|||
searchKeyWord = document.querySelector('input[name="keyword"]').value |
|||
if(searchKeyWord === ''){ |
|||
layer.alert('请输入关键词进行搜索！'); |
|||
return false |
|||
} |
|||
|
|||
hasNextPage = true |
|||
// document.querySelector('.book-list-wrapper').scrollTop = 0
|
|||
let bookNoData= document.querySelector('.book-list-wrapper').querySelector('.book-noData'); |
|||
if(bookNoData){ |
|||
bookNoData.remove() |
|||
} |
|||
document.querySelectorAll('.left-filter li').forEach(item => { |
|||
item.classList.remove('active'); |
|||
}); |
|||
|
|||
FetchRightBookList() |
|||
}); |
|||
@ -0,0 +1,402 @@ |
|||
let sBoxID = '' |
|||
let sSortmark = '' |
|||
let page = 0 |
|||
let pageSize = 36 |
|||
let hasNextPage = true |
|||
let searchKeyWord = '' // 搜索keyword
|
|||
let isSearch = false |
|||
|
|||
// 默认初始化会有限制选择图书借阅的数量的值
|
|||
// public string getReader()
|
|||
// 读者信息 {"Barcode":"700008","Name":"测试卡","nMaxNum":2}
|
|||
let lendNum = 0 |
|||
|
|||
setInterval(function() { |
|||
$('.lending-btn img').css('animation-duration', '1s').addClass('animate__animated animate__tada'); |
|||
setTimeout(function() { |
|||
$('.lending-btn img').removeClass('animate__animated animate__tada'); |
|||
}, 1000); |
|||
}, 5000); |
|||
|
|||
getBaseInfoReader() |
|||
function getBaseInfoReader(){ |
|||
let readerJson = JSON.parse(boundObject.getReader()) |
|||
console.log('readerJson',readerJson) |
|||
console.log('readerJson-Barcode',readerJson.Barcode) |
|||
console.log('readerJson-Name',readerJson.Name) |
|||
console.log('readerJson-nMaxNum',readerJson.nMaxNum) |
|||
lendNum = readerJson.nMaxNum |
|||
} |
|||
|
|||
// 假设书籍数据
|
|||
let books = []; |
|||
|
|||
// 动态生成左侧分类的项
|
|||
createHtmlLeftNav(); |
|||
function createHtmlLeftNav() { |
|||
let LeftLocaltionJSON = boundObject.getBoxs('1') |
|||
let locations = JSON.parse(LeftLocaltionJSON) |
|||
console.log('LeftLocaltionJSON',LeftLocaltionJSON) |
|||
|
|||
let LeftCategoriesJSON = boundObject.getSortmarks('2') |
|||
let categories = JSON.parse(LeftCategoriesJSON) |
|||
console.log('LeftCategoriesJSON',LeftCategoriesJSON) |
|||
|
|||
// 图书位置
|
|||
let locationsHtml = '<div class="left-item"><h4>图书位置</h4><ul class="left-filter filter-location">'; |
|||
locations.forEach((location, index) => { |
|||
let activeClass = index === 0 ? 'class="active"' : ''; |
|||
locationsHtml += `<li ${activeClass} data-id=${location.BoxID}>${location.BoxName}</li>`; |
|||
}); |
|||
locationsHtml += '</ul></div>'; |
|||
|
|||
// 图书分类
|
|||
let categoriesHtml = '<div class="left-item"><h4>图书分类</h4><ul class="left-filter filter-sort">'; |
|||
categories.forEach(category => { |
|||
categoriesHtml += `<li data-id=${category.SortIndex}>${category.SortName}</li>`; |
|||
}); |
|||
categoriesHtml += '</ul></div>'; |
|||
|
|||
document.getElementById('lib-book-left').innerHTML = `${locationsHtml}${categoriesHtml}` |
|||
} |
|||
|
|||
// 为图书位置和分类的每个li元素添加点击事件
|
|||
document.querySelectorAll('.left-filter li').forEach(item => { |
|||
item.addEventListener('click', function(event) { |
|||
document.querySelectorAll('.left-filter li').forEach(li => { |
|||
li.classList.remove('active'); |
|||
}); |
|||
const clickedLi = event.target; |
|||
const dataId = clickedLi.getAttribute('data-id'); |
|||
|
|||
// 判断点击的是图书位置还是分类，并分别处理
|
|||
if (clickedLi.closest('.filter-location')) { |
|||
if(dataId === '*'){ |
|||
sBoxID = ''; |
|||
}else{ |
|||
sBoxID = dataId; |
|||
} |
|||
sSortmark = '' |
|||
} else if (clickedLi.closest('.filter-sort')) { |
|||
sSortmark = dataId; |
|||
sBoxID = '' |
|||
} |
|||
this.classList.add('active'); |
|||
|
|||
page = 0 |
|||
hasNextPage = true |
|||
document.querySelector('input[name="keyword"]').value = '' |
|||
searchKeyWord = '' |
|||
isSearch = false |
|||
|
|||
document.querySelector('.rack-content').scrollTop = 0 |
|||
document.querySelector('.rack-content').innerHTML = '' |
|||
createInitRackBooklist(); |
|||
}); |
|||
}); |
|||
|
|||
let scrollTimeout = null; |
|||
|
|||
function debouncedOnScroll() { |
|||
if (scrollTimeout !== null) { |
|||
clearTimeout(scrollTimeout); |
|||
} |
|||
scrollTimeout = setTimeout(onScroll, 200); // 延迟1秒执行onScroll
|
|||
} |
|||
|
|||
// 滚动事件处理函数
|
|||
function onScroll() { |
|||
const element = document.querySelector('.rack-content') |
|||
if (element.scrollTop + element.offsetHeight > element.scrollHeight - 100) { |
|||
FetchRightBookList(); |
|||
} |
|||
} |
|||
document.querySelector('.rack-content').addEventListener('scroll', debouncedOnScroll); |
|||
|
|||
// 使用事件委托为所有list-item图书添加点击事件
|
|||
function addClickEventToItems() { |
|||
const rackContent = document.querySelector('.rack-content'); |
|||
rackContent.addEventListener('click', function(event) { |
|||
const listItem = event.target.closest('.list-item'); |
|||
if (listItem) { |
|||
listItem.classList.toggle('active'); |
|||
} |
|||
}); |
|||
} |
|||
window.addEventListener('DOMContentLoaded', () => { |
|||
addClickEventToItems(); |
|||
}); |
|||
|
|||
function FetchRightBookList(){ |
|||
if (!hasNextPage) return; // 如果没有下一页，停止加载
|
|||
if (isSearch) { |
|||
page = 0 |
|||
sBoxID = '' |
|||
sSortmark = '' |
|||
document.querySelector('.rack-content').innerHTML = '' |
|||
} |
|||
page += 1; |
|||
const params = { |
|||
'sName': searchKeyWord, |
|||
'sBoxID': sBoxID, |
|||
'sSortmark': sSortmark, |
|||
'nPageIndex': page, |
|||
'nPageMaxNum': pageSize |
|||
} |
|||
// js传参给 c#端
|
|||
console.log('params',params) |
|||
console.log('sName',searchKeyWord) |
|||
console.log('sBoxID',sBoxID) |
|||
console.log('sSortmark',sSortmark) |
|||
console.log('nPageIndex',page) |
|||
console.log('nPageMaxNum',pageSize) |
|||
|
|||
// ----- ----- ----- js调用c#的函数
|
|||
let booksRightJson = boundObject.getBooks(searchKeyWord,sBoxID,sSortmark,page,pageSize) |
|||
var correctedJsonStr = booksRightJson.replace(/"status":\s*"0",\s*/, ''); |
|||
// 去除字符串的头尾空白
|
|||
correctedJsonStr = correctedJsonStr.trim(); |
|||
// 去掉字符串的头花括号
|
|||
correctedJsonStr = correctedJsonStr.substring(1); |
|||
books = JSON.parse(correctedJsonStr).data |
|||
|
|||
const totalPages = JSON.parse(correctedJsonStr).totalPages |
|||
console.log('totalPages',totalPages) |
|||
if (books.length > 0) { |
|||
// books = books.concat(books);
|
|||
appendBooksToRackContent(books); |
|||
} else { |
|||
hasNextPage = false; // 更新是否有下一页
|
|||
} |
|||
if(page > totalPages){ |
|||
hasNextPage = false |
|||
} |
|||
} |
|||
|
|||
function appendBooksToRackContent(books) { |
|||
console.log('appendBooks',books.length) |
|||
const groupSize = 12; |
|||
const rackContent = document.querySelector('.rack-content'); |
|||
let lastRackBoxList = rackContent.querySelector('.rack-box-list:last-child'); |
|||
let lastGroupBooksCount = lastRackBoxList ? lastRackBoxList.querySelectorAll('.list-item').length : 0; |
|||
|
|||
let currentBooksCount = 0; // 当前正在处理的书籍数量
|
|||
|
|||
// 循环遍历所有书籍，将它们添加到正确的容器中
|
|||
books.forEach((book) => { |
|||
// 如果最后一个容器不存在或者书籍数量已经达到groupSize，创建一个新的rack-box-list
|
|||
if (!lastRackBoxList || lastGroupBooksCount >= groupSize) { |
|||
lastRackBoxList = document.createElement('div'); |
|||
lastRackBoxList.className = 'rack-box-list'; |
|||
rackContent.appendChild(lastRackBoxList); |
|||
lastGroupBooksCount = 0; // 重置计数器
|
|||
} |
|||
|
|||
// 追加书籍到这个rack-box-list中
|
|||
const authorSpan = (book.Author !== '' && book.Author !== 'NULL') ? `<span class="book-writer">作者：${book.Author}</span>` : '' ; |
|||
const bookElement = `
|
|||
<div class="list-item" data-id="${book.Barcode}"> |
|||
<div class="box-txt"> |
|||
<span class="book-name">${book.Name}</span> |
|||
${authorSpan} |
|||
</div> |
|||
</div> |
|||
`;
|
|||
lastRackBoxList.innerHTML += bookElement; |
|||
lastGroupBooksCount++; |
|||
currentBooksCount++; |
|||
|
|||
if (currentBooksCount >= groupSize) { |
|||
return; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
// 初始化无图书封面的图书列表
|
|||
createInitRackBooklist(); |
|||
function createInitRackBooklist() { |
|||
if (isSearch) { |
|||
page = 0 |
|||
sBoxID = '' |
|||
sSortmark = '' |
|||
document.querySelector('.rack-content').innerHTML = '' |
|||
} |
|||
const params = { |
|||
'sName': searchKeyWord, |
|||
'sBoxID': sBoxID, |
|||
'sSortmark': sSortmark, |
|||
'nPageIndex': page, |
|||
'nPageMaxNum': pageSize |
|||
} |
|||
// js传参给 c#端
|
|||
console.log('初始化params',params) |
|||
console.log('初始化sName',searchKeyWord) |
|||
console.log('初始化sBoxID',sBoxID) |
|||
console.log('初始化sSortmark',sSortmark) |
|||
console.log('初始化nPageIndex',page) |
|||
console.log('初始化nPageMaxNum',pageSize) |
|||
|
|||
// ----- ----- ----- js调用c#的函数
|
|||
let booksRightJson = boundObject.getBooks(searchKeyWord,sBoxID,sSortmark,page,pageSize) |
|||
var correctedJsonStr = booksRightJson.replace(/"status":\s*"0",\s*/, ''); |
|||
// 去除字符串的头尾空白
|
|||
correctedJsonStr = correctedJsonStr.trim(); |
|||
// 去掉字符串的头花括号
|
|||
correctedJsonStr = correctedJsonStr.substring(1); |
|||
books = JSON.parse(correctedJsonStr).data |
|||
console.log('初始化Books',books.length) |
|||
|
|||
if(books.length === 0){ |
|||
document.querySelector(".lib-search-result span").innerHTML = 0 |
|||
bookListHtml = `
|
|||
<div class="empty-book-list"> |
|||
<img src="images/empty.png" alt="" /> |
|||
<span>暂无相关数据</span> |
|||
</div> |
|||
`;
|
|||
document.querySelector('.rack-content').innerHTML = bookListHtml; |
|||
if (bookList) { |
|||
bookList.remove() |
|||
} |
|||
}else{ |
|||
const groupSize = 12; |
|||
let html = ''; |
|||
for (let i = 0; i < books.length; i += groupSize) { |
|||
html += '<div class="rack-box-list">'; |
|||
for (let j = i; j < i + groupSize && j < books.length; j++) { |
|||
const authorSpan = (books[j].Author !== '' && books[j].Author !== 'NULL') ? `<span class="book-writer">作者：${books[j].Author}</span>` : ''; |
|||
html += `
|
|||
<div class="list-item" data-id="${books[j].Barcode}"> |
|||
<div class="box-txt"> |
|||
<span class="book-name">${books[j].Name}</span> |
|||
${authorSpan} |
|||
</div> |
|||
</div> |
|||
`;
|
|||
} |
|||
html += '</div>'; |
|||
} |
|||
document.querySelector('.rack-content').innerHTML += html |
|||
} |
|||
|
|||
if(isSearch){ |
|||
document.querySelector(".lib-search-result").style.display = 'block' |
|||
document.querySelector(".lib-search-result span").innerHTML = books.length |
|||
}else{ |
|||
document.querySelector(".lib-search-result").style.display = 'none' |
|||
document.querySelector(".lib-search-result span").innerHTML = 0 |
|||
} |
|||
} |
|||
|
|||
// 创建借阅书籍弹框
|
|||
function createlendDialog(books) { |
|||
// 借阅书籍列表
|
|||
const listItems = books.map(function(book,index) { |
|||
return `
|
|||
<li class="lib-lending-item"> |
|||
<span class="lending-num">${index+1}</span> |
|||
<span class="lending-author">${book.barcode}</span> |
|||
<h4>${book.title}</h4> |
|||
</li> |
|||
`;
|
|||
}).join(''); |
|||
|
|||
// 弹框的HTML字符串
|
|||
const dialogHTML = `
|
|||
<div class="lib-dialog" id="lib-dialog"> |
|||
<div class="lib-dialog-mask"></div> |
|||
<div class="lib-dialog-main"> |
|||
<div class="lib-dialog-header"> |
|||
<div class="lib-dialog-title">图书借阅</div> |
|||
</div> |
|||
<ul class="lib-lending-list"> |
|||
${listItems} |
|||
</ul> |
|||
<div class="lib-dialog-bottom"> |
|||
<span class="cancel-btn">取消</span> |
|||
<span class="confirm-btn">确定</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
`;
|
|||
|
|||
// 将弹框添加到body
|
|||
document.body.insertAdjacentHTML('beforeend', dialogHTML); |
|||
|
|||
// 获取弹框元素
|
|||
const dialog = document.getElementById('lib-dialog'); |
|||
const cancelButton = dialog.querySelector('.cancel-btn'); |
|||
const confirmButton = dialog.querySelector('.confirm-btn'); |
|||
|
|||
// 取消
|
|||
cancelButton.addEventListener('click', function() { |
|||
removeSelected(dialog) |
|||
}); |
|||
// 确定
|
|||
confirmButton.addEventListener('click', function() { |
|||
// ----- ----- ----- js调用c#的函数 假设需要借阅得书籍id集
|
|||
// public string beginLendBooks(string sData)
|
|||
const bookBarcodes = books.map(function(book) { |
|||
return book.barcode |
|||
}) |
|||
console.log('bookBarcodes',bookBarcodes) |
|||
const params = bookBarcodes.join(',') |
|||
let lendBookComfirmed = boundObject.beginLendBooks(params) |
|||
if(lendBookComfirmed){ |
|||
removeSelected(dialog) |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function removeSelected(dialog){ |
|||
const bookListItems = document.querySelectorAll('.list-item'); |
|||
bookListItems.forEach(function(item) { |
|||
item.classList.remove('active'); |
|||
}); |
|||
dialog.remove() |
|||
} |
|||
|
|||
// 图书借阅弹框 show
|
|||
document.querySelector(".lending-btn").addEventListener("click", function() { |
|||
const selectedBooks = []; |
|||
document.querySelectorAll('.list-item.active').forEach(activeLi => { |
|||
const bookData = { |
|||
barcode: activeLi.getAttribute('data-id'), |
|||
title: activeLi.querySelector('.book-name').textContent |
|||
}; |
|||
selectedBooks.push(bookData); |
|||
}); |
|||
|
|||
// author: activeLi.querySelector('.book-writer') ? activeLi.querySelector('.book-writer').textContent : ''
|
|||
|
|||
if(selectedBooks.length === 0){ |
|||
layer.alert('请先选择需要借阅的图书！'); |
|||
return false |
|||
}else if(selectedBooks.length > lendNum){ |
|||
layer.alert('最多只可借阅'+lendNum+'本图书!'); |
|||
return false |
|||
}{ |
|||
createlendDialog(selectedBooks); |
|||
} |
|||
}); |
|||
|
|||
// 搜索按钮点击搜索
|
|||
document.querySelector(".search-btn").addEventListener("click", function() { |
|||
isSearch = true |
|||
searchKeyWord = document.querySelector('input[name="keyword"]').value |
|||
if(searchKeyWord === ''){ |
|||
layer.alert('请输入关键词进行搜索！'); |
|||
return false |
|||
} |
|||
hasNextPage = true |
|||
// document.querySelector('.rack-content').scrollTop = 0
|
|||
// document.querySelector('.rack-content').innerHTML = ''
|
|||
let bookNoData= document.querySelector('.rack-content').querySelector('.book-noData'); |
|||
if(bookNoData){ |
|||
bookNoData.remove() |
|||
} |
|||
document.querySelectorAll('.left-filter li').forEach(item => { |
|||
item.classList.remove('active'); |
|||
}); |
|||
createInitRackBooklist() |
|||
}); |
|||
@ -0,0 +1,147 @@ |
|||
(function(win, lib) { |
|||
var doc = win.document |
|||
var docEl = doc.documentElement |
|||
var metaEl = doc.querySelector('meta[name="viewport"]') |
|||
var flexibleEl = doc.querySelector('meta[name="flexible"]') |
|||
var dpr = 0 |
|||
var scale = 0 |
|||
var tid |
|||
var flexible = lib.flexible || (lib.flexible = {}) |
|||
|
|||
if (metaEl) { |
|||
console.warn('将根据已有的meta标签来设置缩放比例') |
|||
var match = metaEl |
|||
.getAttribute('content') |
|||
// eslint-disable-next-line no-useless-escape
|
|||
.match(/initial\-scale=([\d\.]+)/) |
|||
if (match) { |
|||
scale = parseFloat(match[1]) |
|||
dpr = parseInt(1 / scale) |
|||
} |
|||
} else if (flexibleEl) { |
|||
var content = flexibleEl.getAttribute('content') |
|||
if (content) { |
|||
// eslint-disable-next-line no-useless-escape
|
|||
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/) |
|||
// eslint-disable-next-line no-useless-escape
|
|||
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/) |
|||
if (initialDpr) { |
|||
dpr = parseFloat(initialDpr[1]) |
|||
scale = parseFloat((1 / dpr).toFixed(2)) |
|||
} |
|||
if (maximumDpr) { |
|||
dpr = parseFloat(maximumDpr[1]) |
|||
scale = parseFloat((1 / dpr).toFixed(2)) |
|||
} |
|||
} |
|||
} |
|||
|
|||
if (!dpr && !scale) { |
|||
// eslint-disable-next-line no-unused-vars
|
|||
var isAndroid = win.navigator.appVersion.match(/android/gi) |
|||
var isIPhone = win.navigator.appVersion.match(/iphone/gi) |
|||
var devicePixelRatio = win.devicePixelRatio |
|||
if (isIPhone) { |
|||
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
|
|||
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { |
|||
dpr = 3 |
|||
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { |
|||
dpr = 2 |
|||
} else { |
|||
dpr = 1 |
|||
} |
|||
} else { |
|||
// 其他设备下，仍旧使用1倍的方案
|
|||
dpr = 1 |
|||
} |
|||
scale = 1 / dpr |
|||
} |
|||
|
|||
docEl.setAttribute('data-dpr', dpr) |
|||
if (!metaEl) { |
|||
metaEl = doc.createElement('meta') |
|||
metaEl.setAttribute('name', 'viewport') |
|||
metaEl.setAttribute( |
|||
'content', |
|||
'initial-scale=' + |
|||
scale + |
|||
', maximum-scale=' + |
|||
scale + |
|||
', minimum-scale=' + |
|||
scale + |
|||
', user-scalable=no' |
|||
) |
|||
if (docEl.firstElementChild) { |
|||
docEl.firstElementChild.appendChild(metaEl) |
|||
} else { |
|||
var wrap = doc.createElement('div') |
|||
wrap.appendChild(metaEl) |
|||
doc.write(wrap.innerHTML) |
|||
} |
|||
} |
|||
|
|||
function refreshRem() { |
|||
var width = docEl.getBoundingClientRect().width |
|||
// 最小1366px，最大适配2560px
|
|||
if (width / dpr < 1366) { |
|||
width = 1366 * dpr |
|||
} else if (width / dpr > 2560) { |
|||
width = 2560 * dpr |
|||
} |
|||
// 设置成24等份，设计稿时1920px的，这样1rem就是80px
|
|||
var rem = width / 24 |
|||
docEl.style.fontSize = rem + 'px' |
|||
flexible.rem = win.rem = rem |
|||
} |
|||
|
|||
win.addEventListener( |
|||
'resize', |
|||
function() { |
|||
clearTimeout(tid) |
|||
tid = setTimeout(refreshRem, 300) |
|||
}, |
|||
false |
|||
) |
|||
win.addEventListener( |
|||
'pageshow', |
|||
function(e) { |
|||
if (e.persisted) { |
|||
clearTimeout(tid) |
|||
tid = setTimeout(refreshRem, 300) |
|||
} |
|||
}, |
|||
false |
|||
) |
|||
|
|||
if (doc.readyState === 'complete') { |
|||
doc.body.style.fontSize = 12 * dpr + 'px' |
|||
} else { |
|||
doc.addEventListener( |
|||
'DOMContentLoaded', |
|||
// eslint-disable-next-line no-unused-vars
|
|||
function(e) { |
|||
doc.body.style.fontSize = 12 * dpr + 'px' |
|||
}, |
|||
false |
|||
) |
|||
} |
|||
|
|||
refreshRem() |
|||
|
|||
flexible.dpr = win.dpr = dpr |
|||
flexible.refreshRem = refreshRem |
|||
flexible.rem2px = function(d) { |
|||
var val = parseFloat(d) * this.rem |
|||
if (typeof d === 'string' && d.match(/rem$/)) { |
|||
val += 'px' |
|||
} |
|||
return val |
|||
} |
|||
flexible.px2rem = function(d) { |
|||
var val = parseFloat(d) / this.rem |
|||
if (typeof d === 'string' && d.match(/px$/)) { |
|||
val += 'rem' |
|||
} |
|||
return val |
|||
} |
|||
})(window, window['lib'] || (window['lib'] = {})) |
|||
2
js/libs/jquery-3.7.1.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
js/libs/layer/layer.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,2 @@ |
|||
/*! layer mobile-v2.0.0 Web 通用弹出层组件 MIT License */ |
|||
;!function(e){"use strict";var t=document,n="querySelectorAll",i="getElementsByClassName",a=function(e){return t[n](e)},s={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},l={extend:function(e){var t=JSON.parse(JSON.stringify(s));for(var n in e)t[n]=e[n];return t},timer:{},end:{}};l.touch=function(e,t){e.addEventListener("click",function(e){t.call(this,e)},!1)};var r=0,o=["layui-m-layer"],c=function(e){var t=this;t.config=l.extend(e),t.view()};c.prototype.view=function(){var e=this,n=e.config,s=t.createElement("div");e.id=s.id=o[0]+r,s.setAttribute("class",o[0]+" "+o[0]+(n.type||0)),s.setAttribute("index",r);var l=function(){var e="object"==typeof n.title;return n.title?'<h3 style="'+(e?n.title[1]:"")+'">'+(e?n.title[0]:n.title)+"</h3>":""}(),c=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e='<span yes type="1">'+n.btn[0]+"</span>",2===t&&(e='<span no type="0">'+n.btn[1]+"</span>"+e),'<div class="layui-m-layerbtn">'+e+"</div>"):""}();if(n.fixed||(n.top=n.hasOwnProperty("top")?n.top:100,n.style=n.style||"",n.style+=" top:"+(t.body.scrollTop+n.top)+"px"),2===n.type&&(n.content='<i></i><i class="layui-m-layerload"></i><i></i><p>'+(n.content||"")+"</p>"),n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),s.innerHTML=(n.shade?"<div "+("string"==typeof n.shade?'style="'+n.shade+'"':"")+' class="layui-m-layershade"></div>':"")+'<div class="layui-m-layermain" '+(n.fixed?"":'style="position:static;"')+'><div class="layui-m-layersection"><div class="layui-m-layerchild '+(n.skin?"layui-m-layer-"+n.skin+" ":"")+(n.className?n.className:"")+" "+(n.anim?"layui-m-anim-"+n.anim:"")+'" '+(n.style?'style="'+n.style+'"':"")+">"+l+'<div class="layui-m-layercont">'+n.content+"</div>"+c+"</div></div></div>",!n.type||2===n.type){var d=t[i](o[0]+n.type),y=d.length;y>=1&&layer.close(d[0].getAttribute("index"))}document.body.appendChild(s);var u=e.elem=a("#"+e.id)[0];n.success&&n.success(u),e.index=r++,e.action(n,u)},c.prototype.action=function(e,t){var n=this;e.time&&(l.timer[n.index]=setTimeout(function(){layer.close(n.index)},1e3*e.time));var a=function(){var t=this.getAttribute("type");0==t?(e.no&&e.no(),layer.close(n.index)):e.yes?e.yes(n.index):layer.close(n.index)};if(e.btn)for(var s=t[i]("layui-m-layerbtn")[0].children,r=s.length,o=0;o<r;o++)l.touch(s[o],a);if(e.shade&&e.shadeClose){var c=t[i]("layui-m-layershade")[0];l.touch(c,function(){layer.close(n.index,e.end)})}e.end&&(l.end[n.index]=e.end)},e.layer={v:"2.0",index:r,open:function(e){var t=new c(e||{});return t.index},close:function(e){var n=a("#"+o[0]+e)[0];n&&(n.innerHTML="",t.body.removeChild(n),clearTimeout(l.timer[e]),delete l.timer[e],"function"==typeof l.end[e]&&l.end[e](),delete l.end[e])},closeAll:function(){for(var e=t[i](o[0]),n=0,a=e.length;n<a;n++)layer.close(0|e[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var e=document.scripts,n=e[e.length-1],i=n.src,a=i.substring(0,i.lastIndexOf("/")+1);n.getAttribute("merge")||document.head.appendChild(function(){var e=t.createElement("link");return e.href=a+"need/layer.css?2.0",e.type="text/css",e.rel="styleSheet",e.id="layermcss",e}())}()}(window); |
|||
1
js/libs/layer/mobile/need/layer.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
|
After Width: 180 | Height: 100 | Size: 5.8 KiB |
|
After Width: 210 | Height: 61 | Size: 11 KiB |
1
js/libs/layer/theme/default/layer.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
|
After Width: 60 | Height: 24 | Size: 5.7 KiB |
|
After Width: 37 | Height: 37 | Size: 701 B |
|
After Width: 32 | Height: 32 | Size: 1.7 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue