reader/pages/main/class/class.wxss

.videoSection {
    width: 750rpx;
    height: 421.9rpx;
    background: #fff;
}

.video-playBtn {
    width: 120rpx;
    height: 120rpx;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 999;
    top: 136rpx;
}

.videoIcon {
    width: 750rpx;
    height: 363rpx;
    position: absolute;
    top: 20rpx;

}
.classPage {
    background: #e8e8e8;
    height: 100%;
}

/**底部按钮区域**/
.footSection {
    width: 750rpx;
    height: 192rpx;
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.blackbord {
    width: 100%;
    height: 192rpx;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.readingBtn {
    width: 148rpx;
    height: 148rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
}

.footerBtn {
    display: flex;
    flex-direction: column;
    margin-top: 60rpx;
}

.collectBtn {
    margin-left: 80rpx
}

.shareBtn button {
    display: flex;
    flex-direction: column;
    outline: none;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
    /* line-height: 0; */
    background: #f7f7f7;
}

button::after {
    width: 0;
    height: 0;
    top: 0;
    left: 0
}

.shareBtn {
    margin-right: 80rpx;
    padding: 0;
    /* background: #fff; */
}

.footerBtn image {
    width: 50rpx;
    height: 48rpx;
    display: block;
    margin: 0 auto 18rpx;
}

.footerBtn text {
    width: 112rpx;
    height: 40rpx;
    line-height:40rpx;
    font-size: 28rpx;
    color: #414141;
    text-align: center;
}

.footSection .microphone {
   display:block;
margin:-12rpx auto 8rpx;
width:108rpx;
height:106rpx;

}

.footSection .readingBtn text {
    margin-top: -10rpx;
}

.readWorksSection {
    width: 100%;
    /* height: 100%; */
    background: #e8e8e8;
    padding-bottom:75px;
    /* margin-bottom: 150rpx; */
    /* min-height: 710rpx; */

}

.readWorksSection .peopleNum {
    display: flex;
    align-items: center;
    margin: 10rpx 0 10rpx 24rpx;

}

.peopleNum .peoplesIcon {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
}

.peopleNum .title {
    font-size: 24rpx;
    color: #5d5d5d;
    height: 24rpx;
    line-height: 24rpx;
}

.readWorksSection .workCard {
    width: 716rpx;
    height: 132rpx;
    /* height: 700rpx; */
    display: flex;
    align-items: center;
    flex-direction: row;
    background: #fff;
    margin: 0 auto 12rpx;
    border-radius: 12rpx;
}

.workCard .avatar {
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    margin-left: 20rpx;
}

.workCard .name {
    display: flex;
    flex-direction: column;
    margin-left: 12rpx;
    flex: 1;
}

.workCard .nickName {
    /* width: 200rpx; */
    height: 44rpx;
    color: #444;
    font-size: 32rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workCard .time {
    width: 200rpx;
    height: 44rpx;
    color: #686868;
    font-size: 32rpx;

}

.readWorksSection .likes {
    display: flex;
    flex-direction: row-reverse;
    /* margin-left: 270rpx; */
    width: 116rpx;
    overflow: hidden;
    text-align: center;
    align-items: center;
    margin-right: 28rpx;
}

.likes .likeTag {
    /* margin: 0 auto; */
    width: 32rpx;
    height: 28rpx;
    margin-left: 7rpx;
}

.likes .likeNum {
    color: #444;
    font-size: 29rpx;
}