body{ } .content { width: 100%; font-size: 0.32rem; background: #F8F7FD; } .headerTab{ padding-top:0.3rem; text-align: center; } .bookItem { float: left; margin: 0.2rem; } .bookbanner { width: 2rem; height: 2.6rem; } .bookbanner img { width: 2rem; height: 2.6rem; } .bookName { font-size: 0.28rem; width: 2rem; margin-top: 0.1rem; } .monthList { position: relative; height:0.8rem; background:#fff; } .monthList li.filter { position: absolute; top: 0.30rem; font-size: 0.32rem; display: block; padding: 0.10rem 0.60rem 0.10rem 0.30rem; line-height: 0.20rem; height: 0.40rem; color: #444444; } .monthList li.filter:after { content: ''; display: block; position: absolute; top: 0.11rem; left: 7rem; width: 0.20rem; height: 0.12rem; background-image: url(../image/Triangle_down@2x.png); background-repeat: no-repeat; background-size: 100% 100%; } .monthList li.filter.on { /*color: #51C6D0;*/ /*border-color: #51C6D0;*/ } .monthList li.filter.on:after { background-image: url(../image/Triangle_up@2x.png) } .filterBox { position: absolute; display: block; width: 100%; text-align: left; top: 0.8rem; right: 0; background: #fff; font-size: 0.28rem; /*opacity: 0;*/ display: none; padding: 0.20rem 0; /*border-top: 1px solid #e0e0e0;*/ } .filterBox p { /*color: #51C6D0;*/ padding: 0.20rem; color: #000; font-size: 0.28rem; line-height: 0.28rem; border-bottom:1px solid #e0e0e0; } .filterBox.on { /*color: #51C6D0;*/ /*opacity: 1;*/ display: block; } .bookList{ margin-top:0.2rem; background:#fff; } .lectureWrap{ position:fixed; bottom:1.76rem; right:0.24rem; } .lectureWrap img{ width:1.76rem; }