.mainPage{ background: #fff; &>nav{ white-space: nowrap; overflow-x: scroll; -webkit-overflow-scrolling: touch; font-size: 0; padding: .09rem 0; background: #fff; z-index: 100; position: relative; a{ line-height: .32rem; text-align: center; position: relative; &.active::after{ content: ''; width: 50%; height: .02rem; display: block; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); background: #fc6243; } } } &>div.flex-item{ position: relative; &>div{ width: 100%; position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden; &>div{ width: 100%; height: 100%; position: relative; overflow-y: scroll; -webkit-overflow-scrolling: touch; transform: translateZ(0); -webkit-transform: translateZ(0); .banner{ margin: .2rem auto 0; overflow: visible; &>div{ margin: 0 .2rem; position: relative; overflow: hidden; border-radius: .12rem; padding-bottom: 46%; background: #eee; box-shadow: 0 0 .2rem .01rem rgba(0, 0, 0, .1); &>div{ width: 100%; position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden; } } } h5{ width: 100%; display: block; line-height: .26rem; font-size: .14rem; text-indent: .2rem; margin: .2rem auto 0; } .courseList{ &>ul{ margin: 0 .2rem; &>li{ padding: .15rem 0; border-bottom: .01rem solid #eee; } } } .more{ width: 100%; display: block; text-align: center; font-size: .12rem; line-height: .4rem; } } .newsList{ &>ul{ margin: 0 .2rem; &>li{ padding: .15rem 0; border-top: .01rem solid #eee; &:first-child{ border-top: none; } } } } } } }