inquiryMachine-booklist-1080/css/style.css

/* 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;
}