page {
  background: #f6f6f6;
}
.box {
  margin: 20rpx;
  background: #ffffff;
  display: flex;
  border-radius: 20rpx;
  padding: 20rpx;
}
.box .image {
  width: 150rpx;
  height: 150rpx;
  margin-right: 20rpx;
  border-radius: 20rpx;
}
.box .right {
  width: 75%;
  position: relative;
}
.box .right .title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.box .right .price {
  color: red;
  margin-top: 20rpx;
}
.box .right .time {
  color: #c1bcbc;
  margin-top: 10rpx;
}
.box .right .lecturer {
  font-size: 28rpx;
  margin-top: 20rpx;
}
.box .right .collection {
  position: absolute;
  right: 20rpx;
  top: 40rpx;
  padding: 10rpx 20rpx;
  background: #309b9e;
  color: #ffffff;
  border-radius: 20rpx;
}
