.score { position: relative; font-size: 24rpx; } .score .publicview { background: #fff; border-bottom: 22rpx solid #f1f1f1; padding: 40rpx; } .score .header { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .score .header .score_userInfo{ } .score .header .score_userInfo .head{ width: 128rpx; height: 128rpx; border-radius: 100%; overflow: hidden; } .score .header .score_userInfo .head image{ width: 100%; height: 100%; } .score .header .userInfo{ flex-shrink: 1; width: 100%; margin-left: 1.5rem; line-height: 1.5; } .score .header .userInfo >text{ display: block; } .score .header .userInfo p{ margin: 0; } .score .header .score_userNum{ text-align: center; } .score .header .score_userNum .Integral{ background: url('http://img.bbztx.com/image_test/upload/thumbs/20201228/logo/1609150571604092264.png') no-repeat; background-size: 100%; width: 45rpx; height: 45rpx; display: inline-block; } .score .content { background: #fff url('http://img.bbztx.com/image_test/upload/thumbs/20201229/logo/1609237289055024798.png') no-repeat; background-size: 40%; background-position: 95% 5%; } .score .content .body{ height: 450rpx; overflow-y: auto; position: relative; } .score .content .showBottom{ box-shadow: 0rpx -60rpx 20rpx -30rpx rgba(204, 204, 204, .2) inset; } .score .content .progressBar{ width: 110rpx; height: 1000rpx; position: absolute; top: 0; } .score .content .progressBar .leftBox{ width: calc(50% - 3rpx); height: 100%; float: left; } .score .content .progressBar .progressline{ width: 6rpx ; background: #f9bcbf; height: 100%; overflow: hidden; } .score .content .progressBar .progressline .arrive{ width: 100%; height: 0; background: #ee3a43; transition: height 2s; -moz-transition: height 2s; /* Firefox 4 */ -webkit-transition: height 2s; /* Safari 和 Chrome */ -o-transition: height 2s; } .score .content .body .allLevel{ height: 1000rpx; display: flex; flex-direction:column; } .score .content .body .body_Rank{ width: 100%; flex: 1; } .score .content .body .active { } .score .content .body .active .left_level .score-image{ width: 100rpx; height: 100rpx; } .score .content .body .active .right_instruct text{ font-size: 32rpx; font-weight: bold; } .score .content .content_top{ overflow: hidden; line-height: 2; } .score .content .left_level{ width: 110rpx; height: 100%; float: left; text-align: center; position: relative; } .score .content .left_level .score-image{ width: 60rpx; height: 60rpx; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; } .score .content .right_instruct{ overflow: hidden; display: flex; flex-direction: column; justify-content: center; height: 100%; padding-left: 20rpx; } .score .content .right_instruct text{ font-size: 24rpx; margin: 0; line-height: 1.5; } .score .footer { padding: 40rpx; line-height: 2; background:#fff; } .score .pad-bot{ padding-bottom: 150rpx; } .score .footer > text{ display:inline-block; font-size: 24rpx; } .score .footer view{ color: #ee3a43; font-size: 28rpx; font-weight: 600; } .score .fixedButton { width: 50%; position: fixed; bottom: 40rpx; left: 0; right: 0; margin: 0 auto; border-radius: 5px; overflow: hidden; } .score .fixedButton view{ padding: 10rpx; background: #ee3a43; text-align: center; color: #fff; } .score .fixedButton view text{ display: inline-block; }