yifengxcx/pages/online/online.wxss

/* pages/online/online.wxss */
page{
  background: #F4F7F9;
}
.content{
  min-height: 90vh;
  background: #fff;
}
.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;
}