detail.wxss 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. .course-detail-container.data-v-3d21314d {
  2. min-height: 100vh;
  3. background: #f7f8fa;
  4. padding-bottom: 120rpx;
  5. }
  6. .swiper.data-v-3d21314d {
  7. width: 100%;
  8. height: 500rpx;
  9. }
  10. .swiper-image.data-v-3d21314d {
  11. width: 100%;
  12. height: 100%;
  13. }
  14. .header.data-v-3d21314d {
  15. background: #fff;
  16. padding: 24rpx;
  17. margin-bottom: 20rpx;
  18. }
  19. .title.data-v-3d21314d {
  20. font-size: 36rpx;
  21. font-weight: bold;
  22. margin-bottom: 12rpx;
  23. }
  24. .subtitle.data-v-3d21314d {
  25. font-size: 28rpx;
  26. color: #666;
  27. margin-bottom: 16rpx;
  28. }
  29. .price-row.data-v-3d21314d {
  30. display: flex;
  31. align-items: baseline;
  32. margin-bottom: 12rpx;
  33. }
  34. .price.data-v-3d21314d {
  35. color: #ff6600;
  36. font-size: 40rpx;
  37. font-weight: bold;
  38. margin-right: 16rpx;
  39. }
  40. .original-price.data-v-3d21314d {
  41. color: #999;
  42. font-size: 28rpx;
  43. text-decoration: line-through;
  44. }
  45. .stock.data-v-3d21314d {
  46. font-size: 26rpx;
  47. color: #666;
  48. }
  49. .section.data-v-3d21314d {
  50. background: #fff;
  51. border-radius: 20rpx;
  52. margin: 24rpx 24rpx 0 24rpx;
  53. padding: 24rpx;
  54. box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
  55. }
  56. .section-title.data-v-3d21314d {
  57. font-size: 28rpx;
  58. font-weight: bold;
  59. margin-bottom: 16rpx;
  60. }
  61. .empty-comment.data-v-3d21314d {
  62. color: #bbb;
  63. text-align: center;
  64. font-size: 26rpx;
  65. }
  66. .comment-list.data-v-3d21314d {
  67. display: flex;
  68. flex-direction: column;
  69. gap: 24rpx;
  70. }
  71. .comment-item.data-v-3d21314d {
  72. display: flex;
  73. align-items: flex-start;
  74. }
  75. .comment-avatar.data-v-3d21314d {
  76. width: 56rpx;
  77. height: 56rpx;
  78. border-radius: 50%;
  79. margin-right: 16rpx;
  80. }
  81. .comment-main.data-v-3d21314d {
  82. flex: 1;
  83. }
  84. .comment-user.data-v-3d21314d {
  85. font-size: 26rpx;
  86. color: #333;
  87. font-weight: 600;
  88. }
  89. .comment-stars.data-v-3d21314d {
  90. color: #ffb400;
  91. font-size: 24rpx;
  92. margin: 4rpx 0 8rpx 0;
  93. }
  94. .star.active.data-v-3d21314d {
  95. color: #ffb400;
  96. }
  97. .star.data-v-3d21314d {
  98. color: #eee;
  99. }
  100. .comment-content.data-v-3d21314d {
  101. font-size: 24rpx;
  102. color: #666;
  103. }
  104. .tabs.data-v-3d21314d {
  105. display: flex;
  106. background: #fff;
  107. padding: 0 24rpx;
  108. border-bottom: 1rpx solid #eee;
  109. }
  110. .tab.data-v-3d21314d {
  111. flex: 1;
  112. text-align: center;
  113. padding: 24rpx 0;
  114. font-size: 30rpx;
  115. color: #666;
  116. position: relative;
  117. }
  118. .tab.active.data-v-3d21314d {
  119. color: #ff6600;
  120. font-weight: bold;
  121. }
  122. .tab.active.data-v-3d21314d::after {
  123. content: '';
  124. position: absolute;
  125. left: 50%;
  126. bottom: 0;
  127. transform: translateX(-50%);
  128. width: 40rpx;
  129. height: 6rpx;
  130. background: #ff6600;
  131. border-radius: 3rpx;
  132. }
  133. .tab-content.data-v-3d21314d {
  134. background: #fff;
  135. padding: 24rpx;
  136. }
  137. .detail-section.data-v-3d21314d {
  138. margin-bottom: 24rpx;
  139. }
  140. .detail-item.data-v-3d21314d {
  141. margin-bottom: 30rpx;
  142. }
  143. .detail-image.data-v-3d21314d {
  144. width: 100%;
  145. border-radius: 12rpx;
  146. margin-bottom: 16rpx;
  147. }
  148. .detail-info.data-v-3d21314d {
  149. padding: 0 12rpx;
  150. }
  151. .detail-title.data-v-3d21314d {
  152. font-size: 30rpx;
  153. font-weight: bold;
  154. margin-bottom: 8rpx;
  155. }
  156. .detail-desc.data-v-3d21314d {
  157. font-size: 26rpx;
  158. color: #666;
  159. line-height: 1.6;
  160. }
  161. .catalog-item.data-v-3d21314d {
  162. display: flex;
  163. align-items: center;
  164. padding: 18rpx 0;
  165. border-bottom: 1rpx solid #f0f0f0;
  166. }
  167. .catalog-icon.data-v-3d21314d {
  168. width: 36rpx;
  169. height: 36rpx;
  170. margin-right: 16rpx;
  171. }
  172. .catalog-main.data-v-3d21314d {
  173. flex: 1;
  174. }
  175. .catalog-title.data-v-3d21314d {
  176. font-size: 26rpx;
  177. color: #222;
  178. font-weight: 600;
  179. }
  180. .catalog-meta.data-v-3d21314d {
  181. font-size: 22rpx;
  182. color: #888;
  183. margin-top: 4rpx;
  184. }
  185. .trial.data-v-3d21314d {
  186. color: #ff6600;
  187. font-size: 22rpx;
  188. border: 1rpx solid #ff6600;
  189. border-radius: 8rpx;
  190. padding: 2rpx 12rpx;
  191. margin-left: 8rpx;
  192. }
  193. .empty-interact.data-v-3d21314d {
  194. display: flex;
  195. flex-direction: column;
  196. align-items: center;
  197. justify-content: center;
  198. min-height: 200rpx;
  199. }
  200. .empty-img.data-v-3d21314d {
  201. width: 120rpx;
  202. height: 120rpx;
  203. margin-bottom: 16rpx;
  204. opacity: 0.7;
  205. }
  206. .empty-tip.data-v-3d21314d {
  207. color: #bbb;
  208. font-size: 26rpx;
  209. }
  210. .footer.data-v-3d21314d {
  211. position: fixed;
  212. bottom: 0;
  213. left: 0;
  214. right: 0;
  215. display: flex;
  216. padding: 16rpx 24rpx;
  217. background: #fff;
  218. box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
  219. }
  220. .service-btn.data-v-3d21314d, .order-btn.data-v-3d21314d {
  221. flex: 1;
  222. height: 80rpx;
  223. line-height: 80rpx;
  224. text-align: center;
  225. border-radius: 40rpx;
  226. font-size: 28rpx;
  227. }
  228. .service-btn.data-v-3d21314d {
  229. background: #f5f5f5;
  230. color: #666;
  231. margin-right: 20rpx;
  232. }
  233. .order-btn.data-v-3d21314d {
  234. background: #ff6600;
  235. color: #fff;
  236. }