audio-novel.wxss 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. .container.data-v-0c5530b9 {
  2. width: 100%;
  3. height: 100vh;
  4. background-color: #FFFFFF;
  5. display: flex;
  6. flex-direction: column;
  7. padding-top: 30px;
  8. box-sizing: border-box;
  9. }
  10. .header.data-v-0c5530b9 {
  11. display: flex;
  12. align-items: center;
  13. justify-content: space-between;
  14. padding: 20rpx 30rpx;
  15. background-color: #FFFFFF;
  16. border-bottom: 1rpx solid #F0F0F0;
  17. }
  18. .back-btn.data-v-0c5530b9, .search-btn.data-v-0c5530b9 {
  19. width: 60rpx;
  20. height: 60rpx;
  21. display: flex;
  22. align-items: center;
  23. justify-content: center;
  24. }
  25. .back-icon.data-v-0c5530b9 {
  26. font-size: 40rpx;
  27. color: #333333;
  28. font-weight: bold;
  29. }
  30. .header-title.data-v-0c5530b9 {
  31. font-size: 34rpx;
  32. font-weight: bold;
  33. color: #333333;
  34. }
  35. .search-icon.data-v-0c5530b9 {
  36. font-size: 36rpx;
  37. color: #333333;
  38. }
  39. .audio-list-container.data-v-0c5530b9 {
  40. flex: 1;
  41. width: 100%;
  42. }
  43. .loading.data-v-0c5530b9, .empty.data-v-0c5530b9 {
  44. text-align: center;
  45. padding: 60rpx 0;
  46. color: #999999;
  47. font-size: 30rpx;
  48. }
  49. .audio-item.data-v-0c5530b9 {
  50. display: flex;
  51. align-items: center;
  52. padding: 30rpx 30rpx;
  53. border-bottom: 1rpx solid #F0F0F0;
  54. }
  55. .cover-wrapper.data-v-0c5530b9 {
  56. position: relative;
  57. width: 160rpx;
  58. height: 220rpx;
  59. margin-right: 30rpx;
  60. flex-shrink: 0;
  61. }
  62. .audio-cover.data-v-0c5530b9 {
  63. width: 100%;
  64. height: 100%;
  65. border-radius: 12rpx;
  66. object-fit: cover;
  67. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.12);
  68. background-color: #F5F5F5;
  69. }
  70. .play-icon-overlay.data-v-0c5530b9 {
  71. position: absolute;
  72. bottom: 10rpx;
  73. right: 10rpx;
  74. width: 48rpx;
  75. height: 48rpx;
  76. border-radius: 50%;
  77. background: rgba(0,0,0,0.6);
  78. display: flex;
  79. align-items: center;
  80. justify-content: center;
  81. }
  82. .play-icon.data-v-0c5530b9 {
  83. color: #FFFFFF;
  84. font-size: 26rpx;
  85. margin-left: 4rpx;
  86. }
  87. .audio-info.data-v-0c5530b9 {
  88. flex: 1;
  89. display: flex;
  90. flex-direction: column;
  91. gap: 10rpx;
  92. }
  93. .audio-title.data-v-0c5530b9 {
  94. font-size: 32rpx;
  95. font-weight: bold;
  96. color: #333333;
  97. }
  98. .audio-desc.data-v-0c5530b9 {
  99. font-size: 26rpx;
  100. color: #666666;
  101. line-height: 1.6;
  102. display: -webkit-box;
  103. -webkit-box-orient: vertical;
  104. -webkit-line-clamp: 2;
  105. overflow: hidden;
  106. }
  107. .audio-author.data-v-0c5530b9 {
  108. font-size: 24rpx;
  109. color: #999999;
  110. }
  111. .play-btn.data-v-0c5530b9 {
  112. background-color: #4CAF50;
  113. color: #FFFFFF;
  114. border: none;
  115. border-radius: 32rpx;
  116. padding: 12rpx 26rpx;
  117. font-size: 26rpx;
  118. }
  119. .play-btn.data-v-0c5530b9::after {
  120. border: none;
  121. }
  122. .play-btn-text.data-v-0c5530b9 {
  123. color: #FFFFFF;
  124. }