/* pages/online/online.wxss */ page{ background: #F4F7F9; } .content{ min-height: 90vh; background: #fff; padding-bottom: 50px; } .tab{ background: #fff; display: flex; margin-bottom: 12px; } .tab text{ width: 50%; text-align: center; color: #333; line-height: 90rpx; position: relative; } .tab .act{ color: #358BFF; transition: all .3s linear; } .act::after{ content: ''; width:24px; height:2px; background:rgba(53,139,255,1); border-radius:2px; position: absolute; left: 0; right: 0; bottom: 5px; margin: auto; } .list{ background: #fff; display: flex; padding: 12px; } .img{ width: 35%; border-radius: 4px; overflow: hidden; background: #f5f5f5; position: relative; } .img image{ width: 100%; height: 60px; } .img .play{ width: 48rpx; height: 48rpx; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; } .info{ width: 65%; padding-left: 20rpx; position: relative; } .info view{ font-size: 24rpx; color: #333; } .info .title{ font-size: 28rpx; margin-bottom: 10px; } .info text{ font-size: 24rpx; color: #999; } .info .check{ position: absolute; right: 0; bottom: 0; color: #28C06B; font-size: 24rpx; } .check image{ width: 32rpx; position: relative; top: 3px; left: -3px; } .info .not{ color: #FF5E4E; } .test{ padding: 12px; border-bottom: 1px solid #F9F9F9; } .test text{ color: #999; font-size: 24rpx; } .test navigator{ float: right; width:64px; height:21px; background:rgba(53,139,255,1); border-radius:16px; line-height: 21px; text-align: center; color: #fff; font-size: 24rpx; position: relative; top: -2px; } .score{ float: right; color: #28C06B; font-size: 24rpx; } .score image{ width: 32rpx; margin-left: 20rpx; position: relative; top: 2px; } .score text{ color: #358BFF; font-size: 28rpx; margin-right: 10px; } .section{ display: flex; justify-content: space-between; padding: 12px; background: #fff; } .section image{ width: 32rpx; } .complete{ width: calc(100% - 24px); line-height: 38px; color: #fff; text-align: center; position: fixed; left: 12px; bottom: 10px; background: #07c160; border-radius: 4px; }