book_admin/public/assets/css/frontend/shelf.css

.top{
    width: 100%;
    height: 0.31rem;
    padding: 0 0.144rem;
    box-sizing: border-box;
    margin-top: 0.134rem;
}

.top-back{
    float: left;
    background: url('../../img/frontend/shelf/icon-back.png') no-repeat center center/100% 100%;
    width: 0.192rem;
    height: 0.192rem;
    margin-top: 0.058rem;
}
.top-myshelf{
    width: 0.9278rem;
    height: 0.31rem;
    text-align: center;
    line-height: 0.31rem;
    border-radius: 0.31rem;
    background:rgba(254,237,190,1);
    float: left;
    margin: 0 0.31rem 0 1.02rem;
    font-family:PingFang-SC;
    font-weight:bold;
    color:rgba(81,61,61,1);
    font-size: 0.144rem;
}
.top-history{
    font-family:PingFangSC;
    font-weight:400;
    color:rgba(147,129,129,1);
    font-size: 0.144rem;
    margin-right: 0.3125rem;
    float: left;
    height: 0.31rem;
    line-height: 0.31rem;
}
.top-search{
    float: left;
    width: 0.192rem;
    height: 0.192rem;
    background: url('../../img/frontend/shelf/icon-search.png') no-repeat center center/100% 100%;
    margin-top: 0.058rem;
}
.top-all{
    float: right;
    height: 0.192rem;
    width: 0.192rem;
    background: url('../../img/frontend/shelf/shines-icon-menu.png') no-repeat center center/100% 100%;
    margin-top: 0.058rem;
}

.my-shelf{
    padding: 0 0.144rem;
    margin: 0.192rem 0 0.173rem;
    overflow: hidden;
}
.my-shelf-left{
    float: left;
    font-family:PingFangSC;
    font-weight:400;
    color:rgba(81,61,61,1);
    font-size: 0.144rem;
}
.my-shelf-left strong,.my-shelf-left em{ font-size: 0.144rem;}
.my-shelf-right{
    float: right;
    font-family:PingFangSC;
    font-weight:400;
    color:rgba(245,166,35,1);
    font-size: 0.125rem;
    margin-top: 0.005rem;
    position: relative;
}
.my-shelf-right::before{
    content: '';
    position: absolute;
    width: 0.192rem;
    height: 0.192rem;
    left: -0.192rem;
}
.my-shelf-setting{
    /* display: none; */
}
.my-shelf-setting::before{
    background: url('../../img/frontend/shelf/icon-setting.png') no-repeat center center/0.192rem 0.192rem;
}
.my-shelf-cancle{
    color:rgba(147,129,129,1);
    display: none;
}
.my-shelf-cancle::before{
    background: url('../../img/frontend/shelf/icon-delete.png') no-repeat center center/0.192rem 0.192rem;
}
.my-shelf-delete{
    color:rgba(234,94,94,1);
    display: none;
}
.my-shelf-delete::before{
    background: url('../../img/frontend/shelf/icon-delete.png') no-repeat center center/0.192rem 0.192rem;
}

.book-list{
    padding: 0 0.16rem;
    padding-bottom: 1rem;
    font-size: 0;
    overflow: hidden;
}

.book-item{
    width: 1.01rem;
    text-align: center;
    /*margin-right: 0.16rem;*/
    /*margin-top: 0.16rem;*/
    position: relative;
    top: 0.08rem;
}
.book-item:nth-of-type(3n+3){
    margin-right: 0;
}
.book-item-cover{
    width: 1.01rem;
    height: 1.346rem;
    background:rgba(245,245,245,1);
    border: 0.005rem solid rgba(223,223,223,1);
    border-radius: 0.058rem;
    position: relative;
}
.book-item-cover img{
    width: 100%;
    height: 100%;
    border-radius: 0.058rem;
}
.book-item-text{
    margin-top: 0.18rem;
    font-family:PingFang-SC;
    font-weight:400;
    color:rgba(81,61,61,1);
    font-size: 0.125rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 0.192rem;
}
.book-item-text a{
    color:rgba(81,61,61,1);
}
.book-item-text span{
    font-family:PingFang-SC;
    font-weight:400;
    color:rgba(255,255,255,1);
    font-size: 0.125rem;
    /*background:rgba(255,111,111,1);*/
    color: white;
    padding: 0px 3px;
    line-height: 22px;
    border-radius: 0.02rem;
    margin-right: 0.05rem;
}

.book-item-status{
    width: 0.58rem;
    height: 0.32rem;
    position: absolute;
    bottom: 0;
    right: 0;
}
.book-item-update{
    background: url('../../img/frontend/shelf/tag-update.png') center center/100% 100%;
}
.book-item-unshelf{
    background: url('../../img/frontend/shelf/tag-unshelf.png') center center/100% 100%;
}
.book-item-free{
    background: url('../../img/frontend/shelf/tag-free.png') center center/100% 100%;
}

.book-item-more .book-item-cover{
    color:rgba(245,166,35,1);
    font-size: 0.3rem;
    line-height: 1.346rem;
}
.sign{
    width: 0.98rem;
    height: 0.82rem;
    background: url('../../img/frontend/shelf/icon-signin.png') no-repeat center center/100% 100%;
    position: fixed;
    right: 0;
    bottom: 1.53rem;
}
.book-item-unselected.book-item .book-item-cover::after{
    content: "";
    position: absolute;
    width: 0.192rem;
    height: 0.192rem;
    background: url('../../img/frontend/shelf/icon-unselected.png') no-repeat center center/100% 100%;
    right: -0.03rem;
    top: -0.09rem;
}
.book-item-selected.book-item .book-item-cover::after{
    content: "";
    position: absolute;
    width: 0.192rem;
    height: 0.192rem;
    background: url('../../img/frontend/shelf/icon-selected.png') no-repeat center center/100% 100%;
    right: -0.03rem;
    top: -0.09rem;
}