.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: 825rpx; height: 363rpx; position: absolute; top: 20rpx; } .readAuthorSection { width: 100%; height: 152rpx; display: flex; /* justify-items: center; */ align-items: center; border-bottom: solid 2rpx #f0f1f5; position: relative; } .readAuthorSection .avatar { width: 108rpx; height: 108rpx; border-radius: 50%; margin-left: 22rpx; border: 4rpx solid #61CA54; } .readAuthorSection .profession { width: 68rpx; height: 24rpx; background: rgba(97, 202, 84, 1); border-radius: 166rpx; border: 2rpx solid rgba(255, 255, 255, 1); font-size: 16rpx; font-family: PingFangSC-Medium; font-weight: 500; color: rgba(255, 255, 255, 1); line-height: 24rpx; text-align: center; position: absolute; bottom: 4rpx; left: 44rpx; } .readAuthorSection .nickName { margin-left: 20rpx; width: 250rpx; height: 46rpx; font-size: 32rpx; color: #444; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .readAuthorSection .like { display: flex; align-items: center; justify-content: center; /* margin-left: 90rpx; */ width: 160rpx; height: 60rpx; border: 2rpx solid #FF0000; font-size: 28rpx; border-radius: 30rpx; text-align: center; /* line-height: 60rpx; */ color: #FF0000; } .readAuthorSection .like image { width: 36rpx; height: 36rpx; margin-right: 15rpx; } .readAuthorSection .follow { display: flex; align-items: center; justify-content: center; margin-left: 12rpx; width: 160rpx; height: 60rpx; border: 2rpx solid #ff0000; font-size: 28rpx; border-radius: 30rpx; text-align: center; line-height: 60rpx; color: #ff0000; } .readAuthorSection .follow image { width: 36rpx; height: 36rpx; margin-right: 15rpx; } .userSection { width: 100%; height: 166rpx; border-bottom: solid 2rpx #f0f1f5; } .userSection .peopleNum { display: flex; align-items: center; margin: 10rpx 0 0 24rpx; } .peopleNum .peoplesIcon { width: 28rpx; height: 28rpx; margin-right: 10rpx; } .peopleNum .title { font-size: 24rpx; color: #5d5d5d; height: 24rpx; line-height: 24rpx; } .userSection .scrollWrapper { display: flex; margin-top: 16rpx; } ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } .userSection .avatarRow { display: flex; align-items: center; } .userSection .avatarRow .userItem { display: felx; justify-items: center; width: 100rpx; height: 100rpx; margin-left: 24rpx; } .avatarRow .userItem image { width: 86rpx; height: 86rpx; border-radius: 50%; } .commentSection { width: 100%; height: 180rpx; } .commentSection .title { height: 44rpx; font-size: 32rpx; line-height: 44rpx; margin-left: 20rpx; margin-bottom: 10rpx; color: #444; } .commentSection .commentInput { width: 720rpx; height: 60rpx; margin: 0 auto; background: #f0f1f5; color: #545454; font-size: 28rpx; line-height: 60rpx; text-indent: 20rpx; } .commentArea { width: 100%; margin-bottom: 160rpx; } .commentArea .commentItem { width: 704rpx; height: 240rpx; border-bottom: solid 2rpx #f0f1f5; margin: 0 auto 20rpx; display: flex; position: relative; } .commentItem .commentCore { margin-left: 14rpx; width: 600rpx; height: 100%; display: flex; flex-direction: column; } .commentItem .avatar-wrapper { width: 100rpx; height: 100rpx; position: relative; } .commentItem .avatar { border-radius: 50%; width: 96rpx; height: 96rpx; margin-top: 18rpx; border: 4rpx solid #61CA54; } .avatar-wrapper .profession { width: 68rpx; height: 24rpx; background: rgba(97, 202, 84, 1); border-radius: 166rpx; border: 2rpx solid rgba(255, 255, 255, 1); font-size: 16rpx; font-family: PingFangSC-Medium; font-weight: 500; color: rgba(255, 255, 255, 1); line-height: 24rpx; text-align: center; position: absolute; bottom: -37rpx; left: 17rpx; } .commentItem .nickName { margin-top: 18rpx; height: 44rpx; font-size: 32rpx; color: #000; font-family: PingFangSC-Regular; } .commentItem .time { width: 200rpx; height: 44rpx; font-size: 32rpx; color: #686868; } .commentItem .gut { margin-top: 12rpx; width: 420rpx; height: 44rpx; font-size: 32rpx; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .commentItem .commentAll { margin-top: 10rpx; width: 263rpx; height: 50rpx; background: #f0f1f5; font-size: 32rpx; color: #61ca54; text-indent: 20rpx; border-radius: 12rpx; } .commentItem .btnWrapper { position: absolute; top: 10rpx; right: 0; display: flex; align-items: center; /* width: 200rpx; */ } .btnWrapper .commentBtn { width: 32rpx; height: 30rpx; margin-left: 8rpx; } .btnWrapper .commentText, .likeText { /* width: auto; */ height: 40rpx; color: #545454; font-size: 28rpx; line-height: 40rpx; margin-left: 8rpx; margin-right: 30rpx; } .btnWrapper .likeBtn { width: 32rpx; height: 28rpx; margin-left: 8rpx; } /**底部按钮区域**/ .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; 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 9rpx; width: 108rpx; height: 106rpx; } .footSection .readingBtn text { margin-top: -10rpx; } /* 弹框 */ .modalWrapper { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, .2); z-index: 2; } .modalWrapper .rewardContent { width: 670rpx; height: 926rpx; position: relative; margin: 50rpx auto 0; } .rewardContent .rewardWrapper { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .rewardAvatar { width: 172rpx; height: 172rpx; position: absolute; z-index: 999; border-radius: 50%; top: 104rpx; left: 260rpx; } .rewardNickName { width: 100%; margin: 0 auto; font-size: 32rpx; color: #fff; text-align: center; position: absolute; top: 300rpx; } .sologan { width: 100%; margin: 0 auto; font-size: 40rpx; color: #fff; text-align: center; position: absolute; top: 350rpx; } .moneyArea { width: 84%; height: 100rpx; display: flex; flex-direction: row; justify-content: space-between; align-items: center; font-size: 36rpx; color: #fa8133; margin: 0 65rpx; position: absolute; top: 550rpx; } .money { width: 150rpx; height: 90rpx; border: 2rpx solid #ff9600; border-radius: 12rpx; text-align: center; line-height: 90rpx; } .moneyNormal { border: 2rpx solid #ff9600; background: ff9600; } .moneySelect { background: #ff9209; color: #fff; border: 0; } .rewardBtn { width: 464rpx; height: 80rpx; display: block; border-radius: 80rpx; background: #FCA40F; /* box-shadow: 0 6rpx 18rpx 0 rgba(0, 0, 0, 0.5); */ background: #FCA40F; font-size: 40rpx; color: #fff; line-height: 80rpx; text-align: center; position: absolute; z-index: 9999; top: 770rpx; left: 115rpx; } .quitBtn { width: 68rpx; height: 68rpx; position: absolute; left: 345rpx; top: 1025rpx; } .replySection { width: 100%; height: 300rpx; position: fixed; bottom: 0; background: #eee; } .replySection input { width: 100%; height: 300rpx; text-indent: 4rpx; } .goBackHome { width: 100rpx; height: 100rpx; position: fixed; bottom: 168rpx; right: 45rpx; } .goBackHome image { width: 100%; height: 100%; }