.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: 99999; 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; }