index.wxss 4.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. page{height:100%; background:linear-gradient(to bottom, #ee3a43 350rpx, #ee3a43 350rpx, #f5f5f4 350rpx, #f5f5f4 350rpx) no-repeat;}
  2. .page-bg{background: #f5f5f4;}
  3. .picker{display: flex; align-items: center; padding: 20rpx;}
  4. .picker .selector{flex-shrink: 1;width: 62%; margin-left:20rpx;}
  5. .picker .selector:first-child{margin-left: 0; width: 35%; flex-shrink: 0;}
  6. .picker .select{margin-top: 10rpx; background: rgba(255,255,255,.4); border-radius: 40rpx; height: 60rpx; line-height: 60rpx; position: relative; font-size: 24rpx; padding: 0 20rpx;color: #fff;}
  7. .picker .select text{overflow: hidden; height: 60rpx; display: inline-block; width: 100%; line-height: 60rpx;}
  8. .picker .select::after{content: '\e991'; font-family: 'icomoon'; font-size: 24rpx; position: absolute; right: 20rpx; top: 45%; line-height: 0;}
  9. .ui-course-box{padding: 36rpx 30rpx;}
  10. .user-info{display: flex; overflow: hidden; padding: 50rpx;}
  11. .course_seal{position: absolute; top: -25rpx; right: -25rpx; width: 150rpx; height: 150rpx;}
  12. .head{width: 180rpx; height: 180rpx; border-radius: 100%; overflow: hidden; line-height: 180rpx; text-align: center; color: #fff; font-size: 22rpx; flex-shrink: 0;}
  13. .head > image{width: 100%; height: 100%; vertical-align: middle}
  14. .head-bg{width: 100%; height: 100%; background: rgba(0,0,0,.6); position: absolute; top: 0; left: 0;}
  15. .user-i-box{flex-shrink: 1; width: 100%; margin-left: 40rpx;}
  16. .title{border-bottom: 2rpx solid #9fa0a0; font-size: 26rpx; color: #ee3a43;position: relative;}
  17. .title [class^="icon-"]{font-size: 60rpx; margin-right: 10rpx; vertical-align: middle;}
  18. .title::after{content:'0'; height: 4rpx; line-height: 0; font-size: 0; background: #ee3a43; width: 124rpx; position: absolute; bottom: -4rpx; left: 0;}
  19. .ec-canvas{position: relative; top: 0; left: 0; width: 100%; height: 400rpx;}
  20. .ec-canvas > ec-canvas{position: absolute;top: 0;bottom: 0;left: 0; right: 0;}
  21. .solt{background: #ee3a43; border-radius: 20rpx; color: #fff; font-size: 24rpx; padding:2rpx 20rpx;}
  22. .ui-c-box{display: flex; justify-content: flex-start; align-items: center;}
  23. .ui-c-item{flex-shrink: 1; width: 100%;}
  24. .ui-c-item.line{border-right: 2rpx solid #dcdddd; margin-right: 20rpx; padding-right: 20rpx;}
  25. .ui-c-item .font35{line-height: 65rpx;}
  26. .ui-c-item .icon-arrow{background: #ffe3e8; display: inline-block; width: 37rpx; height: 59rpx; line-height: 59rpx; text-align: center; border-radius: 8rpx; float: right; color: #ee3a43; font-size: 50rpx;}
  27. .ui-course-study{background:linear-gradient(to bottom, #ee3a43 174rpx, #ee3a43 174rpx, #fff 174rpx, #fff 174rpx) no-repeat; padding-bottom: 20rpx;}
  28. .ui-course-study .title{border-bottom: 0 none; color:#fff;}
  29. .ui-course-study .title::after{background: #fff; width: 158rpx;}
  30. .ui-course-study .ui-course-box{padding:25rpx 30rpx;}
  31. .fmTop{margin-top: -65rpx !important;}
  32. .course-camp{box-shadow: 0 0 10rpx 4rpx rgba(238,58,67,.2); margin-top: 20rpx;}
  33. .course-camp:first-child{margin-top: 0;}
  34. .course-camp .ui-c-item{margin-left: 18rpx; flex-shrink: 0; width: auto;}
  35. .course-camp .ui-c-item:first-child{margin-left: 0;}
  36. .course-camp-video{width: 211rpx; height: 141rpx; vertical-align: middle;}
  37. .course-camp .bg{background: rgba(0,0,0,.3); position: absolute; top: 0; left: 0;}
  38. .course-camp .icon-video-play{position: absolute; top: 50%; left: 50%; color: #fff; font-size: 80rpx; transform: translate(-50%, -50%); z-index:1; line-height: 0;}
  39. .course-camp-title{border-bottom: 2rpx solid #e5e5e5; padding-bottom: 30rpx; margin-bottom: 30rpx; font-size: 26rpx;}
  40. .course-camp-title > .solt{opacity: .3; border-radius: 8rpx; margin-right: 10rpx;}
  41. .step{letter-spacing: 4rpx;}
  42. .ui-players{overflow: hidden;}
  43. .ui-players .ui-head{text-align: center; width: 16.6666%; margin-top: 20rpx; font-size: 24rpx; color: #908f90; float: left; box-sizing: border-box;}
  44. .ui-players .ui-head > image{width: 80rpx; height: 80rpx; border-radius: 100%;}
  45. .ui-players .ui-head > text{display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
  46. .buttons-row{flex-direction:row;justify-content : flex-start;}
  47. .buttons-row > .button{width: 200rpx; flex-shrink:0; display: inline-block; margin-right: 0;}
  48. .video{overflow: hidden;}