training-detail.wxss 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. .container.data-v-6baaf426 {
  2. width: 100%;
  3. height: 100vh;
  4. background: #FFF;
  5. display: flex;
  6. flex-direction: column;
  7. }
  8. .scroll-body.data-v-6baaf426 {
  9. flex: 1;
  10. height: 0;
  11. }
  12. /* 视频/直播 Banner */
  13. .media-banner.data-v-6baaf426 {
  14. width: 100%;
  15. height: 420rpx;
  16. position: relative;
  17. background: #000;
  18. }
  19. .media-banner .banner-img.data-v-6baaf426 {
  20. width: 100%;
  21. height: 100%;
  22. }
  23. .media-banner .video-player.data-v-6baaf426 {
  24. width: 100%;
  25. height: 100%;
  26. }
  27. .media-banner .play-btn-wrap.data-v-6baaf426 {
  28. position: absolute;
  29. left: 50%;
  30. top: 50%;
  31. transform: translate(-50%, -50%);
  32. }
  33. .media-banner .play-btn-wrap .play-circle.data-v-6baaf426 {
  34. width: 110rpx;
  35. height: 110rpx;
  36. background: rgba(0, 0, 0, 0.4);
  37. border: 4rpx solid #FFF;
  38. border-radius: 50%;
  39. display: flex;
  40. align-items: center;
  41. justify-content: center;
  42. }
  43. .media-banner .play-btn-wrap .play-circle .play-triangle.data-v-6baaf426 {
  44. width: 0;
  45. height: 0;
  46. border-left: 36rpx solid #FFF;
  47. border-top: 24rpx solid transparent;
  48. border-bottom: 24rpx solid transparent;
  49. margin-left: 10rpx;
  50. }
  51. .media-banner .banner-info-bar.data-v-6baaf426 {
  52. position: absolute;
  53. left: 0;
  54. right: 0;
  55. bottom: 0;
  56. height: 80rpx;
  57. background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  58. display: flex;
  59. justify-content: space-between;
  60. align-items: center;
  61. padding: 0 40rpx;
  62. color: #FFF;
  63. font-size: 26rpx;
  64. }
  65. .media-banner .banner-info-bar .b-left.data-v-6baaf426, .media-banner .banner-info-bar .b-right.data-v-6baaf426 {
  66. display: flex;
  67. align-items: center;
  68. gap: 12rpx;
  69. }
  70. .media-banner .banner-info-bar .b-icon.data-v-6baaf426 {
  71. width: 28rpx;
  72. height: 28rpx;
  73. }
  74. .media-banner .banner-info-bar .play-mini-triangle.data-v-6baaf426 {
  75. width: 0;
  76. height: 0;
  77. border-left: 12rpx solid #FFF;
  78. border-top: 8rpx solid transparent;
  79. border-bottom: 8rpx solid transparent;
  80. }
  81. .content.data-v-6baaf426 {
  82. padding: 30rpx 40rpx;
  83. }
  84. .loading-state.data-v-6baaf426 {
  85. display: flex;
  86. justify-content: center;
  87. align-items: center;
  88. padding: 80rpx 0;
  89. }
  90. .loading-state .loading-text.data-v-6baaf426 {
  91. font-size: 28rpx;
  92. color: #999;
  93. }
  94. .header-section.data-v-6baaf426 {
  95. /* 视频标题调小 */
  96. }
  97. .header-section .title.data-v-6baaf426 {
  98. font-size: 48rpx;
  99. font-weight: bold;
  100. color: #1A1A1A;
  101. display: block;
  102. margin-bottom: 30rpx;
  103. }
  104. .header-section .video-title.data-v-6baaf426 {
  105. font-size: 38rpx;
  106. }
  107. .header-section .info-list.data-v-6baaf426 {
  108. display: flex;
  109. flex-direction: column;
  110. gap: 20rpx;
  111. }
  112. .header-section .info-list .info-item.data-v-6baaf426 {
  113. display: flex;
  114. align-items: center;
  115. }
  116. .header-section .info-list .info-item .i-icon.data-v-6baaf426 {
  117. width: 32rpx;
  118. height: 32rpx;
  119. margin-right: 20rpx;
  120. opacity: 0.5;
  121. }
  122. .header-section .info-list .info-item .i-text.data-v-6baaf426 {
  123. font-size: 28rpx;
  124. color: #666;
  125. flex: 1;
  126. }
  127. .header-section .info-list .info-item .ending-tag.data-v-6baaf426 {
  128. font-size: 24rpx;
  129. color: #FF4D4F;
  130. margin-left: 20rpx;
  131. font-weight: bold;
  132. }
  133. .header-section .lecturer-info.data-v-6baaf426 {
  134. display: flex;
  135. align-items: center;
  136. font-size: 30rpx;
  137. color: #888;
  138. }
  139. .header-section .lecturer-info .l-name.data-v-6baaf426 {
  140. font-weight: 500;
  141. }
  142. .divider.data-v-6baaf426 {
  143. height: 1rpx;
  144. background: #F0F0F0;
  145. margin: 40rpx 0;
  146. }
  147. .section-title.data-v-6baaf426 {
  148. font-size: 34rpx;
  149. font-weight: bold;
  150. color: #1A1A1A;
  151. margin-bottom: 30rpx;
  152. display: block;
  153. }
  154. .detail-section .tag-row.data-v-6baaf426 {
  155. display: flex;
  156. flex-wrap: wrap;
  157. gap: 16rpx;
  158. margin-bottom: 40rpx;
  159. }
  160. .detail-section .tag-row .t-tag.data-v-6baaf426 {
  161. font-size: 24rpx;
  162. color: #666;
  163. background: #F5F7FA;
  164. padding: 10rpx 24rpx;
  165. border-radius: 10rpx;
  166. }
  167. .detail-section .rich-content .para-item.data-v-6baaf426 {
  168. margin-bottom: 30rpx;
  169. }
  170. .detail-section .rich-content .para-item .p-label.data-v-6baaf426 {
  171. font-size: 30rpx;
  172. font-weight: bold;
  173. color: #1A1A1A;
  174. display: block;
  175. margin-bottom: 12rpx;
  176. }
  177. .detail-section .rich-content .para-item .p-text.data-v-6baaf426 {
  178. font-size: 28rpx;
  179. color: #666;
  180. line-height: 1.6;
  181. display: block;
  182. white-space: pre-wrap;
  183. }
  184. .address-section .map-wrapper.data-v-6baaf426 {
  185. position: relative;
  186. width: 100%;
  187. height: 360rpx;
  188. border-radius: 12rpx;
  189. overflow: hidden;
  190. box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  191. }
  192. .address-section .map-wrapper .map-view.data-v-6baaf426 {
  193. width: 100%;
  194. height: 100%;
  195. }
  196. .end-of-page.data-v-6baaf426 {
  197. display: flex;
  198. align-items: center;
  199. justify-content: center;
  200. padding: 60rpx 0 20rpx;
  201. }
  202. .end-of-page .line.data-v-6baaf426 {
  203. width: 60rpx;
  204. height: 1rpx;
  205. background: #EEE;
  206. margin: 0 20rpx;
  207. }
  208. .end-of-page .end-text.data-v-6baaf426 {
  209. font-size: 24rpx;
  210. color: #BBB;
  211. }
  212. .bottom-placeholder.data-v-6baaf426 {
  213. height: 160rpx;
  214. }
  215. .bottom-bar.data-v-6baaf426 {
  216. position: fixed;
  217. left: 0;
  218. right: 0;
  219. bottom: 0;
  220. background: #FFF;
  221. padding: 20rpx 40rpx;
  222. padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  223. box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
  224. z-index: 1000;
  225. }
  226. .bottom-bar .action-btn.data-v-6baaf426 {
  227. width: 100%;
  228. height: 90rpx;
  229. line-height: 90rpx;
  230. border-radius: 45rpx;
  231. font-size: 32rpx;
  232. font-weight: bold;
  233. }
  234. .bottom-bar .action-btn.data-v-6baaf426::after {
  235. border: none;
  236. }
  237. .bottom-bar .action-btn.primary.data-v-6baaf426 {
  238. background: #1F6CFF;
  239. color: #FFF;
  240. box-shadow: 0 6rpx 20rpx rgba(31, 108, 255, 0.3);
  241. }
  242. .bottom-bar .action-btn.disabled.data-v-6baaf426 {
  243. background: #D6E8FF;
  244. color: #1F6CFF;
  245. }