You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
383 lines
7.6 KiB
383 lines
7.6 KiB
#bookshelf{
|
|
width: 100%;
|
|
height: 100vh;
|
|
// padding-top: 60px;
|
|
font-size: 30px;
|
|
background: url('~@/assets/images/home/bg.png') no-repeat left top;
|
|
background-size: cover;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
//c-s壳占位
|
|
.top-bg{
|
|
height: 60px;
|
|
background-color: #3F92F6;
|
|
}
|
|
|
|
// 首页
|
|
.bookshelf-header{
|
|
position: relative;
|
|
height: 254px;
|
|
text-align: center;
|
|
background: url('~@/assets/images/home/top.png') no-repeat left top;
|
|
background-size: cover;
|
|
z-index: 9;
|
|
h2{
|
|
height: 118px;
|
|
line-height: 118px;
|
|
font-family: "YouSheBiaoTiHei";
|
|
font-weight: normal;
|
|
font-size: 60px;
|
|
}
|
|
.shelf-num{
|
|
display: block;
|
|
position: absolute;
|
|
top: 30px;
|
|
right: 40px;
|
|
width: 180px;
|
|
height: 58px;
|
|
line-height: 60px;
|
|
background: linear-gradient(90deg, #ACDAFF 0%, #9BCEFF 100%);
|
|
border-radius: 29px;
|
|
}
|
|
}
|
|
|
|
.book-category{
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-items: center;
|
|
text-align: center;
|
|
height: 198px;
|
|
line-height: 168px;
|
|
padding: 0 120px;
|
|
margin-top: -132px;
|
|
background: url('~@/assets/images/home/type-bg.png') no-repeat center center;
|
|
background-size: cover;
|
|
z-index: 99;
|
|
p{
|
|
flex: 1;
|
|
font-size: 60px;
|
|
letter-spacing: 6px;
|
|
}
|
|
}
|
|
|
|
.book-nav{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
text-align: center;
|
|
padding: 0 40px;
|
|
margin-bottom: 30px;
|
|
li{
|
|
flex: 1;
|
|
font-size: 36px;
|
|
img{
|
|
display: inline-block;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 本架图书
|
|
.book-rack{
|
|
height: 770px;
|
|
margin: 0 40px;
|
|
padding: 0 40px 40px 40px;
|
|
background-color: #fff;
|
|
border-radius: 30px;
|
|
box-shadow: 0px 0px 20px 1px #B8D3FF;
|
|
}
|
|
.list-top{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-items: center;
|
|
align-items: center;
|
|
padding: 30px 0 25px 0;
|
|
font-size: 36px;
|
|
.list-top-title{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
font-size: 40px;
|
|
line-height: 50px;
|
|
.icon{
|
|
width: 50px;
|
|
height: 50px;
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
.more{
|
|
.iconfont{
|
|
font-size: 30px;
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 本架图书list
|
|
.rack-list{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.list-item{
|
|
border: 1px solid #A2CCFF;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
.book-info{
|
|
position: relative;
|
|
}
|
|
.book-title{
|
|
font-weight: normal;
|
|
line-height: 40px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.book-author{
|
|
font-size: 24px;
|
|
}
|
|
.book-num{
|
|
position: absolute;
|
|
bottom: 20px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
font-size: 20px;
|
|
color: #999;
|
|
.icon{
|
|
width: 20px;
|
|
height: 22px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-big{
|
|
.list-item{
|
|
width: 435px;
|
|
height: 625px;
|
|
margin-right: 45px;
|
|
img{
|
|
display: block;
|
|
width: 100%;
|
|
height: 520px;
|
|
border-radius: 4px;
|
|
}
|
|
.book-info{
|
|
padding: 12px 0 20px 44px;
|
|
}
|
|
.book-num{
|
|
right: 16px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.list-middle{
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 625px;
|
|
.list-item{
|
|
display: flex;
|
|
height: calc(100%/2 - 20px);
|
|
justify-content: space-between;
|
|
img{
|
|
display: block;
|
|
width: 244px;
|
|
height: 100%;
|
|
margin-right: 20px;
|
|
}
|
|
.book-info{
|
|
padding: 20px 0 0 0;
|
|
}
|
|
.book-num{
|
|
left: 0;
|
|
bottom: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 新书推荐
|
|
.new-recommend{
|
|
height: 448px;
|
|
margin: 30px 40px 0 40px;
|
|
}
|
|
|
|
.list-small{
|
|
display: flex;
|
|
justify-items: center;
|
|
margin-left: -40px;
|
|
.list-item{
|
|
width: 200px;
|
|
border: none;
|
|
margin-left: 40px;
|
|
.book-img{
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 240px;
|
|
margin-bottom: 10px;
|
|
}
|
|
img{
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
.book-title{
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
//本架图书页面
|
|
.rack-box{
|
|
padding: 30px 0;
|
|
width: 100%;
|
|
.rack-item{
|
|
position: relative;
|
|
margin-bottom: 30px;
|
|
overflow: hidden;
|
|
.rack-box-list{
|
|
// display: flex;
|
|
// justify-content: space-between;
|
|
height: 314px;
|
|
padding: 0 40px;
|
|
width: 1080px;
|
|
background: url('~@/assets/images/list/list-rack.png') no-repeat -31px 205px;
|
|
overflow: hidden;
|
|
// overflow-x: auto;
|
|
white-space: nowrap;
|
|
.list-item{
|
|
margin-right: 1.7px;
|
|
display: inline-block;
|
|
border: none;
|
|
height: 254px;
|
|
width: 65px;
|
|
background-size: 93px 266px;
|
|
position: relative;
|
|
.box-txt{
|
|
position: absolute;
|
|
top: 12%;
|
|
left: 50%;
|
|
transform: translateX(-40%);
|
|
.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: 18px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.rack-floor{
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 2px;
|
|
height: 50px;
|
|
width: 100%;
|
|
display: flex;
|
|
color: #fff;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 40px;
|
|
z-index: 999;
|
|
.icon-l,.icon-r{
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bookshelf-header .icon-l{
|
|
color: #fff;
|
|
font-size: 40px;
|
|
position: absolute;
|
|
left: 40px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.bookshelf-header .rack-direct{
|
|
position: absolute;
|
|
top: 30px;
|
|
right: 40px;
|
|
width: 220px;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
// background: linear-gradient(90deg, #ACDAFF 0%, #9BCEFF 100%);
|
|
background: #fff;
|
|
border-radius: 30px;
|
|
display: flex;
|
|
padding: 6px;
|
|
span{
|
|
flex: 1;
|
|
text-align: center;
|
|
line-height: 48px;
|
|
&.rack-direct-active{
|
|
background: linear-gradient(267deg, #7285FB 0%, #7285FB 9%, #4377FE 55%, #2487FF 100%);
|
|
z-index: 1;
|
|
border-radius: 24px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.rack-box-list .list-item{
|
|
&:nth-child(15n+1){
|
|
background: url('~@/assets/images/list/1.png') no-repeat -15px -13px;
|
|
}
|
|
&:nth-child(15n+2){
|
|
background: url('~@/assets/images/list/2.png') no-repeat -15px -13px;
|
|
}
|
|
&:nth-child(15n+3){
|
|
background: url('~@/assets/images/list/3.png') no-repeat -15px -13px;
|
|
}
|
|
&:nth-child(15n+4){
|
|
background: url('~@/assets/images/list/4.png') no-repeat -15px -13px;
|
|
}
|
|
&:nth-child(15n+5){
|
|
background: url('~@/assets/images/list/5.png') no-repeat -15px -13px;
|
|
}
|
|
&:nth-child(15n+6){
|
|
background: url('~@/assets/images/list/6.png') no-repeat -15px -13px;
|
|
}
|
|
&:nth-child(15n+7){
|
|
background: url('~@/assets/images/list/7.png') no-repeat -15px -13px;
|
|
}
|
|
&:nth-child(15n+8){
|
|
background: url('~@/assets/images/list/8.png') no-repeat -15px -13px;
|
|
}
|
|
&:nth-child(15n+9){
|
|
background: url('~@/assets/images/list/9.png') no-repeat -15px -13px;
|
|
}
|
|
&:nth-child(15n+10){
|
|
background: url('~@/assets/images/list/10.png') no-repeat -15px -13px;
|
|
}
|
|
&:nth-child(15n+11){
|
|
background: url('~@/assets/images/list/11.png') no-repeat -15px -13px;
|
|
}
|
|
&:nth-child(15n+12){
|
|
background: url('~@/assets/images/list/12.png') no-repeat -15px -13px;
|
|
}
|
|
&:nth-child(15n+13){
|
|
background: url('~@/assets/images/list/13.png') no-repeat -15px -13px;
|
|
}
|
|
&:nth-child(15n+14){
|
|
background: url('~@/assets/images/list/14.png') no-repeat -15px -13px;
|
|
}
|
|
&:nth-child(15n+15){
|
|
background: url('~@/assets/images/list/15.png') no-repeat -15px -13px;
|
|
}
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|