.videoSection { width: 750rpx; height: 428rpx; } .classPage { background: #e8e8e8; } /**底部按钮区域**/ .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: -6rpx auto 0; width: 108rpx; height: 106rpx; } .footSection .readingBtn text { margin-top: -10rpx; } .readWorksSection { width: 100%; height: 100%; background: #e8e8e8; 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; } .workCard .nickName { width: 200rpx; height: 44rpx; color: #000; font-size: 32rpx; } .workCard .time { width: 200rpx; height: 44rpx; color: #686868; font-size: 32rpx; } .readWorksSection .likes { display: flex; flex-direction: column; margin-left: 270rpx; width: 104rpx; overflow: hidden; text-align: center; } .likes .likeTag { margin: 0 auto; width: 32rpx; height: 28rpx; } .likes .likeNum { color: #686868; font-size: 32rpx; }