courses.wxss 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. .courses_container {
  2. width: 100%;
  3. height: 100%;
  4. background: #eee;
  5. }
  6. .courses_container .course_item {
  7. position: relative;
  8. width: 100%;
  9. height: 460rpx;
  10. background: #fff;
  11. margin-bottom: 20rpx;
  12. padding-top: 20rpx;
  13. box-sizing: border-box;
  14. }
  15. .courses_container .course_item .course_icon {
  16. display: block;
  17. width: 704rpx;
  18. height: 290rpx;
  19. border-radius: 20rpx;
  20. margin: 0 auto;
  21. }
  22. .courses_container .course_item .activity_tigs {
  23. position: absolute;
  24. top: 270rpx;
  25. left: 50%;
  26. transform: translateX(-50%);
  27. width: 704rpx;
  28. height: 40rpx;
  29. border-radius: 20rpx;
  30. }
  31. .courses_container .course_item .course_info {
  32. width: 704rpx;
  33. display: flex;
  34. flex-direction: row;
  35. align-items: center;
  36. justify-content: space-between;
  37. margin: 17rpx auto;
  38. }
  39. .courses_container .course_item .course_info .course_title {
  40. color: #373737;
  41. font-size: 30rpx;
  42. }
  43. .courses_container .course_item .course_btn_wrapper {
  44. width: 100%;
  45. display: flex;
  46. align-items: center;
  47. justify-content: space-between;
  48. padding-left: 24rpx;
  49. padding-right: 24rpx;
  50. box-sizing: border-box;
  51. }
  52. .courses_container .course_item .course_btn_wrapper .course_btn {
  53. display: flex;
  54. align-items: center;
  55. }
  56. .courses_container .course_item .course_btn_wrapper .course_btn .btn_icon {
  57. width: 48rpx;
  58. height: 46rpx;
  59. margin-right: 10rpx;
  60. }
  61. .courses_container .course_item .course_btn_wrapper .course_btn .btn_icon.comment_icon {
  62. width: 22rpx;
  63. height: 25rpx;
  64. }
  65. .courses_container .course_item .course_btn_wrapper .course_btn .btn_icon.play_icon {
  66. width: 30rpx;
  67. height: 25rpx;
  68. }
  69. .courses_container .course_item .course_btn_wrapper .course_btn .btn_icon.like_icon {
  70. width: 29rpx;
  71. height: 26rpx;
  72. }
  73. .courses_container .course_item .course_btn_wrapper .course_btn .btn_icon.share_icon {
  74. width: 33rpx;
  75. height: 30rpx;
  76. }
  77. .courses_container .course_item .course_btn_wrapper .course_btn .btn_icon.collect_icon {
  78. width: 32rpx;
  79. height: 30rpx;
  80. }
  81. .courses_container .course_item .course_btn_wrapper .course_btn .btn_text {
  82. font-size: 28rpx;
  83. color: rgba(0, 0, 0, 0.6);
  84. }
  85. .courses_container .no_work {
  86. width: 100%;
  87. height: 120rpx;
  88. display: flex;
  89. align-items: center;
  90. justify-content: center;
  91. }
  92. .courses_container .no_work .no_work_text {
  93. color: #373737;
  94. font-size: 30rpx;
  95. }