reading.wxss 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. .readingPage {
  2. height: 100%;
  3. background: #fff;
  4. /* overflow: hidden; */
  5. /* background: #eee; */
  6. }
  7. .read_num {
  8. width: 100%;
  9. height: 81rpx;
  10. background: #eee;
  11. display: flex;
  12. align-items: center;
  13. padding-left: 30rpx;
  14. box-sizing: border-box;
  15. color: rgba(0, 0, 0, .8);
  16. font-size: 28rpx;
  17. }
  18. .read_num_icon {
  19. width: 37rpx;
  20. height: 37rpx;
  21. margin-right: 17rpx;
  22. }
  23. .videoSection {
  24. width: 750rpx;
  25. height: 421.9rpx;
  26. }
  27. audio {
  28. background: #000;
  29. width: 100%;
  30. height: 200rpx;
  31. position: fixed;
  32. bottom: 200rpx;
  33. }
  34. .comment_section {
  35. position: fixed;
  36. top: 0;
  37. left: 0;
  38. width: 100%;
  39. height: 98%;
  40. z-index: 9999;
  41. background: rgba(0, 0, 0, .3);
  42. overflow: hidden;
  43. }
  44. .textSection {
  45. width: 100%;
  46. height: 500rpx;
  47. /* padding-bottom: 200rpx; */
  48. overflow: visible;
  49. background: #fff;
  50. }
  51. .btn_wrapper {
  52. width: 100%;
  53. height: 110rpx;
  54. display: flex;
  55. align-items: center;
  56. justify-content: center;
  57. }
  58. .btn_wrapper .reading_btn {
  59. width: 271rpx;
  60. height: 80rpx;
  61. background: #3FACFF;
  62. border-radius: 100rpx;
  63. display: flex;
  64. align-items: center;
  65. justify-content: center;
  66. }
  67. .btn_wrapper .reading_btn image {
  68. width: 39rpx;
  69. height: 50rpx;
  70. margin-right: 20rpx;
  71. }
  72. .btn_wrapper .reading_btn text {
  73. color: #fff;
  74. font-size: 30rpx;
  75. font-weight: 30rpx;
  76. }
  77. .textSection .textContent {
  78. font-size: 32rpx;
  79. line-height: 68rpx;
  80. text-align: center;
  81. display: block;
  82. margin: 0 50rpx;
  83. color: #444;
  84. }
  85. ::-webkit-scrollbar {
  86. width: 0;
  87. height: 0;
  88. color: transparent;
  89. }
  90. /**底部按钮区域**/
  91. .footSection {
  92. width: 750rpx;
  93. height: 152rpx;
  94. /* position: fixed; */
  95. /* bottom: 0; */
  96. display: flex;
  97. flex-direction: row;
  98. justify-content: space-between;
  99. align-items: center;
  100. }
  101. .readingBtn {
  102. width: 148rpx;
  103. height: 148rpx;
  104. border-radius: 50%;
  105. display: flex;
  106. align-items: center;
  107. margin: 60rpx auto 0;
  108. }
  109. .footerBtn {
  110. display: flex;
  111. flex-direction: column;
  112. margin-top: 30rpx;
  113. }
  114. .collectBtn {
  115. margin-left: 40rpx
  116. }
  117. .shareBtn {
  118. margin-right: 40rpx
  119. }
  120. .footerBtn image {
  121. width: 80rpx;
  122. height: 80rpx;
  123. display: block;
  124. margin: 0 auto 3rpx;
  125. }
  126. .footerBtn text {
  127. width: 112rpx;
  128. height: 40rpx;
  129. font-size: 30rpx;
  130. color: rgba(0, 0, 0, .6);
  131. text-align: center;
  132. }
  133. .footSection .microphone {
  134. display: block;
  135. /* margin: -12rpx auto 8rpx; */
  136. width: 108rpx;
  137. height: 106rpx;
  138. }
  139. .footSection .readingBtn text {
  140. margin-top: -10rpx;
  141. }
  142. .score_dialog {
  143. width: 100%;
  144. height: 100%;
  145. background: rgba(0, 0, 0, .6);
  146. display: flex;
  147. flex-direction: column;
  148. justify-content: center;
  149. align-items: center;
  150. position: fixed;
  151. top: 0;
  152. left: 0;
  153. }
  154. .score_dialog .close {
  155. margin-top: 55rpx;
  156. width: 76rpx;
  157. height: 76rpx;
  158. }
  159. .score_dialog .close .close_icon {
  160. width: 100%;
  161. height: 100%;
  162. }
  163. .score_dialog .score_section {
  164. width: 552rpx;
  165. height: 562rpx;
  166. background: #fffdf7;
  167. border-radius: 30rpx;
  168. }
  169. .readingPage .score_section {
  170. width: 100%;
  171. padding: 0 110rpx;
  172. box-sizing: border-box;
  173. height: 524rpx;
  174. background: #fffbf7;
  175. border-top: 20rpx solid #eee;
  176. }
  177. .score_section .title {
  178. width: 100%;
  179. text-align: center;
  180. margin-top: 60rpx;
  181. margin-bottom: 30rpx;
  182. color: #e76634;
  183. font-size: 44rpx;
  184. }
  185. .score_section .star_row {
  186. width: 100%;
  187. display: flex;
  188. flex-direction: row;
  189. align-items: center;
  190. justify-content: space-between;
  191. padding: 0 100rpx;
  192. box-sizing: border-box;
  193. margin-bottom: 42rpx;
  194. }
  195. .score_section .star_row .star {
  196. width: 55rpx;
  197. height: 53rpx;
  198. }
  199. .score_section .score_item {
  200. width: 100%;
  201. display: flex;
  202. align-items: center;
  203. text-align: center;
  204. font-size: 38rpx;
  205. color: #ab722d;
  206. padding-left: 98rpx;
  207. box-sizing: border-box;
  208. margin-bottom: 10rpx;
  209. justify-content: space-between;
  210. padding-right: 100rpx;
  211. }
  212. .score_item_left{
  213. display: flex;align-items: center;
  214. }
  215. .score_section .score_item .score_item_left .score_square {
  216. width: 17.6rpx;
  217. height: 17.6rpx;
  218. background: #cda069;
  219. margin-right: 30rpx;
  220. }