reading.wxss 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. .videoSection {
  2. width: 750rpx;
  3. height: 421.9rpx;
  4. }
  5. audio {
  6. background: #000;
  7. width: 100%;
  8. height: 200rpx;
  9. position: fixed;
  10. bottom: 200rpx;
  11. }
  12. .textSection{
  13. width: 100%;
  14. height: 600rpx;
  15. overflow: visible;
  16. }
  17. .textSection .textContent{
  18. font-size: 32rpx;
  19. line-height: 56rpx;
  20. text-align: center;
  21. display: block;
  22. margin: 0 50rpx;
  23. color: #444;
  24. }
  25. ::-webkit-scrollbar{
  26. width: 0;
  27. height: 0;
  28. color: transparent;
  29. }
  30. /**底部按钮区域**/
  31. .footSection {
  32. width: 750rpx;
  33. height: 192rpx;
  34. position: fixed;
  35. bottom: 0;
  36. display: flex;
  37. flex-direction: row;
  38. justify-content: space-between;
  39. align-items: center;
  40. }
  41. .blackbord {
  42. width: 100%;
  43. height: 192rpx;
  44. display: block;
  45. position: absolute;
  46. top: 0;
  47. left: 0;
  48. z-index: -1;
  49. }
  50. .readingBtn {
  51. width: 148rpx;
  52. height: 148rpx;
  53. border-radius: 50%;
  54. display: flex;
  55. align-items: center;
  56. margin: 60rpx auto 0;
  57. }
  58. .footerBtn {
  59. display: flex;
  60. flex-direction: column;
  61. margin-top: 60rpx;
  62. }
  63. .collectBtn {
  64. margin-left: 80rpx
  65. }
  66. .shareBtn {
  67. margin-right: 80rpx
  68. }
  69. .footerBtn image {
  70. width: 50rpx;
  71. height: 48rpx;
  72. display: block;
  73. margin: 0 auto 18rpx;
  74. }
  75. .footerBtn text {
  76. width: 112rpx;
  77. height: 40rpx;
  78. font-size: 28rpx;
  79. color: #414141;
  80. text-align: center;
  81. }
  82. .footSection .microphone {
  83. display:block;
  84. margin:-12rpx auto 8rpx;
  85. width:108rpx;
  86. height:106rpx;
  87. }
  88. .footSection .readingBtn text {
  89. margin-top: -10rpx;
  90. }