index.scss 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. @mixin threeDot {
  2. overflow: hidden;
  3. text-overflow: ellipsis;
  4. white-space: nowrap;
  5. }
  6. .had_courses{
  7. width: 100%;
  8. padding: 24rpx 26rpx 40rpx;
  9. }
  10. .my_courses {
  11. .titles {
  12. font-size: 32rpx;
  13. color: #222;
  14. margin: 56rpx 0rpx 32rpx;
  15. font-weight: 500;
  16. display: block;
  17. }
  18. .course_item {
  19. width: 100%;
  20. background: #F8F8FA;
  21. border-radius: 24rpx;
  22. margin-bottom: 26rpx;
  23. .cou_titles {
  24. font-size: 36rpx;
  25. font-weight: 500;
  26. color: #222222;
  27. line-height: 42rpx;
  28. padding: 32rpx 26rpx 16rpx 26rpx;
  29. // margin-bottom: 16rpx;
  30. @include threeDot();
  31. }
  32. .learn_ranges {
  33. font-size: 26rpx;
  34. font-weight: 500;
  35. color: #888691;
  36. padding: 0rpx 26rpx;
  37. // .l_range {
  38. // width: 20rpx;
  39. // height: 24rpx;
  40. // margin-right: 9rpx;
  41. // }
  42. // .l_time {
  43. // color: #333;
  44. // }
  45. }
  46. .c_downs {
  47. display: flex;
  48. align-items: center;
  49. justify-content: space-between;
  50. padding-top: 24rpx;
  51. }
  52. .study_btns {
  53. width: 100%;
  54. margin-top: 40rpx;
  55. padding: 40rpx 26rpx 0rpx;
  56. border-radius: 0rpx 0rpx 24rpx 24rpx;
  57. display: flex;
  58. align-items: center;
  59. flex-wrap: wrap;
  60. background: #F3F4F6;
  61. }
  62. .box_appoint {
  63. display: flex;
  64. align-items: center;
  65. justify-content: flex-end;
  66. .img {
  67. width: 32rpx;
  68. height: 32rpx;
  69. margin-right: 10rpx;
  70. }
  71. }
  72. .exam_word {
  73. display: flex;
  74. align-items: center;
  75. flex-direction: column;
  76. margin-bottom: 40rpx;
  77. margin-right: 40rpx;
  78. .btns_icon {
  79. width: 44rpx;
  80. height: 44rpx;
  81. }
  82. .paper_name {
  83. font-size: 24rpx;
  84. font-weight: 500;
  85. color: #222222;
  86. margin-top: 20rpx;
  87. }
  88. }
  89. }
  90. // .lefts {
  91. // width: 204rpx;
  92. // height: 120rpx;
  93. // border-radius: 12rpx;
  94. // margin-right: 48rpx;
  95. // position: relative;
  96. // top: 0;
  97. // left: 0;
  98. // .lefet_img {
  99. // width: 100%;
  100. // height: 100%;
  101. // display: block;
  102. // border-radius: 16rpx;
  103. // }
  104. // .live_icon {
  105. // width: 65rpx;
  106. // height: 35rpx;
  107. // line-height: 35rpx;
  108. // border-radius: 12rpx 0rpx 12rpx 0rpx;
  109. // background-color: #FFB102;
  110. // color: #fff;
  111. // font-size: 20rpx;
  112. // text-align: center;
  113. // position: absolute;
  114. // top: 0;
  115. // left: 0;
  116. // }
  117. // }
  118. // .rights {
  119. // width: 380rpx;
  120. // height: 120rpx;
  121. // display: flex;
  122. // flex-direction: column;
  123. // justify-content: space-between;;
  124. // .learn_progress {
  125. // width: 100%;
  126. // height: 100%;
  127. // display: flex;
  128. // align-items: center;
  129. // justify-content: space-between;
  130. // }
  131. // .progress_up {
  132. // font-size: 24rpx;
  133. // color: #999999;
  134. // width: 100%;
  135. // .progress_bar {
  136. // margin-top: 16rpx;
  137. // }
  138. // }
  139. // .progress_down {
  140. // // width: 100%;
  141. // display: flex;
  142. // justify-content: space-between;
  143. // align-items: center;
  144. // }
  145. // .enter_into {
  146. // width: 144rpx;
  147. // height: 52rpx;
  148. // line-height: 52rpx;
  149. // background: #FFB102;
  150. // border-radius: 16rpx;
  151. // font-size: 26rpx;
  152. // font-weight: 500;
  153. // color: #FFFFFF;
  154. // text-align: center;
  155. // }
  156. // }
  157. // 收藏集,做题记录
  158. .bottons {
  159. width: 100%;
  160. display: flex;
  161. align-items: center;
  162. justify-content: space-between;
  163. .items {
  164. width: 216rpx;
  165. height: 104rpx;
  166. border-radius: 24rpx;
  167. padding: 0rpx 24rpx 0rpx 28rpx;
  168. display: flex;
  169. align-items: center;
  170. justify-content: space-between;
  171. .record_icon {
  172. width: 40rpx;
  173. height: 40rpx;
  174. }
  175. }
  176. .words {
  177. font-size: 28rpx;
  178. font-weight: 500;
  179. color: #222222;
  180. }
  181. .one {
  182. background: #E8F6FF;
  183. }
  184. .two {
  185. background: #FFF6DE;
  186. }
  187. .three {
  188. background: #E9FAF0;
  189. }
  190. }
  191. // .bottoms {
  192. // display: flex;
  193. // justify-content: space-between;
  194. // margin-bottom: 32rpx;
  195. // .item {
  196. // width: 335rpx;
  197. // &.collect {
  198. // position: relative;
  199. // font-size: 32rpx;
  200. // color: #FFFFFF;
  201. // height: 240rpx;
  202. // border-radius: 24rpx;
  203. // padding:32rpx;
  204. // .text {
  205. // position:relative;
  206. // z-index: 10;
  207. // font-size: 32rpx;
  208. // font-weight: bold;
  209. // color: #FFFFFF;
  210. // }
  211. // .img {
  212. // position:absolute;
  213. // left:0;
  214. // top:0;
  215. // width:100%;
  216. // height:100%;
  217. // }
  218. // }
  219. // &.list {
  220. // .list-in {
  221. // position:relative;
  222. // width: 335rpx;
  223. // height: 112rpx;
  224. // background: #007AFF;
  225. // border-radius: 24rpx;
  226. // display: flex;
  227. // align-items: center;
  228. // font-size: 32rpx;
  229. // color: #fff;
  230. // &:first-of-type {
  231. // margin-bottom:16rpx;
  232. // }
  233. // .text {
  234. // padding-left:91rpx;
  235. // position:relative;
  236. // z-index: 10;
  237. // font-size: 32rpx;
  238. // font-weight: bold;
  239. // color: #FFFFFF;
  240. // }
  241. // .img {
  242. // position:absolute;
  243. // left:0;
  244. // top:0;
  245. // width:100%;
  246. // height:100%;
  247. // }
  248. // }
  249. // }
  250. // }
  251. // }
  252. }
  253. .no_datas {
  254. margin-top: 70rpx;
  255. display: flex;
  256. flex-direction: column;
  257. align-items: center;
  258. // .courses {
  259. // width: 360rpx;
  260. // height: 349rpx;
  261. // }
  262. // .no_learns {
  263. // font-size: 32rpx;
  264. // color: #999;
  265. // margin: 46rpx 0rpx 56rpx;
  266. // }
  267. .empty_status {
  268. width: 160rpx;
  269. height: 160rpx;
  270. margin-bottom: 14rpx;
  271. margin-top: 300rpx;
  272. }
  273. .word_tip {
  274. font-size: 30rpx;
  275. color: #888691;
  276. margin-bottom: 56rpx;
  277. }
  278. .choose {
  279. width: 280rpx;
  280. height: 64rpx;
  281. line-height: 62rpx;
  282. border-radius: 32rpx;
  283. background-color: #007AFF;
  284. color: #fff;
  285. font-size: 30rpx;
  286. text-align: center;
  287. }
  288. }