123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307 |
- .readingPage {
- height: 100%;
- background: #fff;
- /* overflow: hidden; */
- /* background: #eee; */
- }
- .read_num {
- width: 100%;
- height: 81rpx;
- background: #eee;
- display: flex;
- align-items: center;
- padding-left: 30rpx;
- box-sizing: border-box;
- color: rgba(0, 0, 0, .8);
- font-size: 28rpx;
- }
- .read_num_icon {
- width: 37rpx;
- height: 37rpx;
- margin-right: 17rpx;
- }
- .videoSection {
- width: 750rpx;
- height: 421.9rpx;
- }
- audio {
- background: #000;
- width: 100%;
- height: 200rpx;
- position: fixed;
- bottom: 200rpx;
- }
- .comment_section {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 98%;
- z-index: 9999;
- background: rgba(0, 0, 0, .3);
- overflow: hidden;
- }
- .textSection {
- width: 100%;
- height: 500rpx;
- /* padding-bottom: 200rpx; */
- overflow: visible;
- background: #fff;
- }
- .btn_wrapper {
- width: 100%;
- height: 110rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .btn_wrapper .reading_btn {
- width: 271rpx;
- height: 80rpx;
- background: #3FACFF;
- 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;
- font-weight: 30rpx;
- }
- .textSection .textContent {
- font-size: 32rpx;
- line-height: 68rpx;
- text-align: center;
- display: block;
- margin: 0 50rpx;
- color: #444;
- }
- ::-webkit-scrollbar {
- width: 0;
- height: 0;
- color: transparent;
- }
- /**底部按钮区域**/
- .footSection {
- width: 750rpx;
- height: 152rpx;
- /* position: fixed; */
- /* bottom: 0; */
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- }
- .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: 30rpx;
- }
- .collectBtn {
- margin-left: 40rpx
- }
- .shareBtn {
- margin-right: 40rpx
- }
- .footerBtn image {
- width: 80rpx;
- height: 80rpx;
- display: block;
- margin: 0 auto 3rpx;
- }
- .footerBtn text {
- width: 112rpx;
- height: 40rpx;
- font-size: 30rpx;
- color: rgba(0, 0, 0, .6);
- text-align: center;
- }
- .footSection .microphone {
- display: block;
- /* margin: -12rpx auto 8rpx; */
- width: 108rpx;
- height: 106rpx;
- }
- .footSection .readingBtn text {
- margin-top: -10rpx;
- }
- .score_dialog {
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, .6);
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- position: fixed;
- top: 0;
- left: 0;
- }
- .score_dialog .close {
- margin-top: 55rpx;
- width: 76rpx;
- height: 76rpx;
- }
- .score_dialog .close .close_icon {
- width: 100%;
- height: 100%;
- }
- .score_dialog .score_section {
- width: 552rpx;
- height: 562rpx;
- background: #fffdf7;
- border-radius: 30rpx;
- }
- .readingPage .score_section {
- width: 100%;
- padding: 0 105rpx;
- box-sizing: border-box;
- height: 524rpx;
- background: #fffbf7;
- border-top: 20rpx solid #eee;
- }
- .score_section .title {
- width: 100%;
- text-align: center;
- margin-top: 60rpx;
- margin-bottom: 30rpx;
- color: #e76634;
- font-size: 44rpx;
- }
- .score_section .star_row {
- width: 100%;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- padding: 0 100rpx;
- box-sizing: border-box;
- margin-bottom: 42rpx;
- }
- .score_section .star_row .star {
- width: 55rpx;
- height: 53rpx;
- }
- .score_section .score_item {
- width: 100%;
- display: flex;
- align-items: center;
- text-align: center;
- font-size: 38rpx;
- color: #ab722d;
- padding-left: 98rpx;
- box-sizing: border-box;
- margin-bottom: 10rpx;
- justify-content: space-between;
- padding-right: 100rpx;
- }
- .score_item_left{
- display: flex;align-items: center;
- }
- .score_section .score_item .score_item_left .score_square {
- width: 17.6rpx;
- height: 17.6rpx;
- background: #cda069;
- margin-right: 30rpx;
- }
- .auth {
- position: fixed;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, .75);
- z-index:9999;
- }
- .auth-main {
- position: absolute;
- left: 50%;
- top: 14%;
- transform: translate(-50%, 0);
- }
- .auth-main .auth-price {
- position: absolute;
- left: 125rpx;
- bottom: 64rpx;
- }
- .auth-main .price {
- color: #fff;
- font-size: 30rpx;
- width: 160rpx;
- text-align: end;
- font-weight: 500;
- }
- .auth-main .price text {
- font-size: 45rpx;
- }
- .auth-main .flase-price {
- margin-left: 25rpx;
- font-size: 15rpx;
- text-decoration: line-through;
- font-weight: 500;
- color: #fff;
- }
- .auth-icon {
- width: 662rpx;
- height: 591rpx;
- }
- .auth-close {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- bottom: -100rpx;
- width: 65rpx;
- height: 65rpx;
- }
|