courseDetail.wxss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. page {
  2. background-color: #fff;
  3. }
  4. #myVideo {
  5. width: 100%;
  6. height: 420rpx;
  7. }
  8. #myVideo3 {
  9. width: 100%;
  10. height: 420rpx;
  11. }
  12. .container {
  13. flex: 1;
  14. position: relative;
  15. }
  16. .imageContainer {
  17. background: black;
  18. width: 100%;
  19. height: 420rpx;
  20. position: relative;
  21. }
  22. .card {
  23. width: 100%;
  24. overflow: hidden;
  25. position: absolute;
  26. left: 0;
  27. top: 420rpx;
  28. background: #fff;
  29. border-radius: 30rpx;
  30. }
  31. /* info start */
  32. .info {
  33. padding: 35rpx;
  34. display: flex;
  35. flex-direction: column;
  36. }
  37. .info-name {
  38. font-size: 36rpx;
  39. font-weight: 550;
  40. color: #333333;
  41. }
  42. .info-key {
  43. margin-top: 20rpx;
  44. display: flex;
  45. font-size: 26rpx;
  46. font-weight: 400;
  47. color: #999999;
  48. }
  49. .key-value {
  50. margin-left: 15rpx;
  51. color: #666;
  52. }
  53. .info-teacher {
  54. margin-top: 20rpx;
  55. display: flex;
  56. font-size: 26rpx;
  57. font-weight: 400;
  58. color: #999999;
  59. }
  60. .teacher-value {
  61. margin-left: 15rpx;
  62. color: #4C84FF
  63. }
  64. .info-file {
  65. margin-top: 30rpx;
  66. display: flex;
  67. }
  68. .word {
  69. color: #666666 !important;
  70. }
  71. .download {
  72. margin-left: 20rpx;
  73. color: #4C84FF !important;
  74. }
  75. .mrgin30 {
  76. margin: 30rpx;
  77. }
  78. .title {
  79. font-size: 26rpx;
  80. font-weight: 400;
  81. color: #666666;
  82. }
  83. .content {
  84. margin-top: 10rpx;
  85. padding: 30rpx 20rpx;
  86. background: #F3F5F9;
  87. border-radius: 10rpx;
  88. font-size: 26rpx;
  89. font-weight: 400;
  90. color: #999999;
  91. }
  92. /*playback*/
  93. .time-filter {
  94. display: flex;
  95. flex-flow: wrap;
  96. }
  97. .time-item {
  98. margin: 15rpx 0 0 15rpx;
  99. display: flex;
  100. flex-direction: column;
  101. align-items: center;
  102. justify-content: center;
  103. width: 80rpx;
  104. height: 80rpx;
  105. background: rgba(243, 245, 249, 0.5);
  106. border-radius: 10rpx;
  107. font-size: 26rpx;
  108. font-weight: 400;
  109. color: #999999;
  110. }
  111. .time-item-active {
  112. margin: 15rpx 0 0 15rpx;
  113. display: flex;
  114. flex-direction: column;
  115. align-items: center;
  116. justify-content: center;
  117. width: 80rpx;
  118. height: 80rpx;
  119. background: linear-gradient(0deg, #FF4330 0%, #FF7B60 100%);
  120. border-radius: 10rpx;
  121. font-size: 26rpx;
  122. font-weight: 400;
  123. color: #FFF;
  124. }
  125. .time-date {
  126. font-size: 30rpx;
  127. }