index.less 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. .authority {
  2. height: 100%;
  3. padding: 0rpx 20rpx;
  4. .module {
  5. margin-bottom: 30rpx;
  6. .topic {
  7. font-size: 38rpx;
  8. font-weight: bold;
  9. }
  10. .explain {
  11. margin: 10rpx 0rpx;
  12. font-size: 24rpx;
  13. }
  14. .works {
  15. display: flex;
  16. justify-content: space-between;
  17. flex-wrap: wrap;
  18. .work {
  19. margin: 10rpx 0rpx;
  20. .content {
  21. position: relative;
  22. font-size: 0px;
  23. .cover {
  24. width: 344rpx;
  25. height: 194rpx;
  26. border-radius: 8rpx;
  27. }
  28. .audioBox {
  29. position: relative;
  30. .audioPlay {
  31. position: absolute;
  32. left: 0px;
  33. top: 0px;
  34. bottom: 0px;
  35. right: 0px;
  36. margin: auto;
  37. width: 220rpx;
  38. height: 174rpx;
  39. display: flex;
  40. align-items: center;
  41. justify-content: center;
  42. .audioPlayBg {
  43. width: 150rpx;
  44. height: 150rpx;
  45. }
  46. .audioPlayZhen {
  47. position: absolute;
  48. right: 30rpx;
  49. top: 16rpx;
  50. width: 32rpx;
  51. height: 40rpx;
  52. }
  53. .cover {
  54. position: absolute;
  55. width: 130rpx;
  56. height: 130rpx;
  57. border-radius: 50%;
  58. }
  59. }
  60. }
  61. .mask {
  62. position: absolute;
  63. width: 100%;
  64. height: 40rpx;
  65. bottom: 0px;
  66. background: linear-gradient(0deg, rgba(0, 0, 0, .3), transparent);
  67. display: flex;
  68. align-items: center;
  69. .fb {
  70. margin: 6rpx 10rpx;
  71. width: 26rpx;
  72. height: 26rpx;
  73. }
  74. .fb-num {
  75. font-size: 24rpx;
  76. color: white;
  77. }
  78. }
  79. }
  80. .title {
  81. width: 344rpx;
  82. margin-top: 6rpx;
  83. font-size: 32rpx;
  84. }
  85. }
  86. }
  87. }
  88. }