.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; }