123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- .readingPage {
- height: 100%;
- overflow: hidden;
- }
- .videoSection {
- width: 750rpx;
- height: 421.9rpx;
- }
- audio {
- background: #000;
- width: 100%;
- height: 200rpx;
- position: fixed;
- bottom: 200rpx;
- }
- .textSection {
- width: 100%;
- height: 500rpx;
- /* padding-bottom: 200rpx; */
- overflow: visible;
- }
- .textSection .btn_wrapper {
- width: 100%;
- height: 110rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .btn_wrapper .reading_btn {
- width: 271rpx;
- height: 80rpx;
- background: #14c962;
- border-radius: 100rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .btn_wrapper .reading_btn image {
- width: 39rpx;
- height: 50rpx;
- margin-right: 20rpx;
- }
- .btn_wrapper .reading_btn text {
- color: #fff;
- font-size: 30rpx;
- }
- .textSection .textContent {
- font-size: 32rpx;
- line-height: 56rpx;
- text-align: center;
- display: block;
- margin: 0 50rpx;
- color: #444;
- }
- ::-webkit-scrollbar {
- width: 0;
- height: 0;
- color: transparent;
- }
- /**底部按钮区域**/
- .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;
- margin: 60rpx auto 0;
- }
- .footerBtn {
- display: flex;
- flex-direction: column;
- margin-top: 60rpx;
- }
- .collectBtn {
- margin-left: 80rpx
- }
- .shareBtn {
- margin-right: 80rpx
- }
- .footerBtn image {
- width: 50rpx;
- height: 48rpx;
- display: block;
- margin: 0 auto 18rpx;
- }
- .footerBtn text {
- width: 112rpx;
- 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;
- }
|