outNfcTempInfo.wxss 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. .ccxx_top {
  2. height: 501rpx;
  3. position: relative;
  4. background: linear-gradient(var(--color), #718FEC);
  5. box-sizing: border-box;
  6. padding: 123rpx 0 0 23rpx;
  7. }
  8. .ccxx_top view {
  9. font-size: 50rpx;
  10. color: #FFFFFF;
  11. line-height: 68rpx;
  12. }
  13. .ccxx_top text {
  14. font-size: 29rpx;
  15. color: #FFFFFF;
  16. line-height: 68rpx;
  17. }
  18. .ccxx_top image {
  19. width: 569rpx;
  20. height: 580rpx;
  21. position: absolute;
  22. right: 0;
  23. bottom: 34rpx;
  24. }
  25. .ccxx_mid {
  26. width: 710rpx;
  27. background: #ffffff;
  28. border-radius: 17rpx;
  29. box-sizing: border-box;
  30. padding: 25rpx;
  31. box-shadow: 0 -4rpx 15rpx 0 rgba(0, 0, 0, 0.1);
  32. margin: -170rpx auto auto auto;
  33. position: relative;
  34. z-index: 1;
  35. }
  36. .ccxx_mid_item {
  37. display: flex;
  38. justify-content: space-between;
  39. line-height: 50rpx;
  40. }
  41. .ccxx_mid_label {
  42. font-size: 28rpx;
  43. color: #333333;
  44. flex: none;
  45. }
  46. .ccxx_mid_val {
  47. width: 60%;
  48. font-size: 26rpx;
  49. color: #666666;
  50. /* flex: auto; */
  51. text-align: right;
  52. }
  53. .ccxx_mid_val text {
  54. display: block;
  55. width: 100%;
  56. text-align: left;
  57. text-overflow: ellipsis;
  58. word-wrap: break-word;
  59. }
  60. .ccxx_btm {
  61. width: 710rpx;
  62. margin: 25rpx auto;
  63. padding: 20rpx;
  64. background: #ffffff;
  65. border-radius: 17rpx;
  66. box-sizing: border-box;
  67. }
  68. .ccxx_btm_tit {
  69. font-size: 30rpx;
  70. color: #333333;
  71. line-height: 50rpx;
  72. }
  73. .ccxx_btm_item {
  74. font-size: 24rpx;
  75. color: #333333;
  76. line-height: 36rpx;
  77. display: flex;
  78. justify-content: space-between;
  79. align-items: center;
  80. }
  81. .playlog-item {
  82. display: flex;
  83. }
  84. /*时间轴*/
  85. .playlog-item .dotline {
  86. width: 35px;
  87. position: relative;
  88. }
  89. /*竖线*/
  90. .playlog-item .dotline .line {
  91. width: 1px;
  92. height: 100%;
  93. background: #ccc;
  94. position: absolute;
  95. top: 15px;
  96. left: 15px;
  97. }
  98. /*圆点*/
  99. .playlog-item .dotline .dot .dotMin{
  100. width: 8px;
  101. height: 8px;
  102. background: #D8D8D8;
  103. position: absolute;
  104. top: 3px;
  105. left: 4px;
  106. border-radius: 50%;
  107. }
  108. .playlog-item .dotline .dot {
  109. width: 15px;
  110. height: 15px;
  111. background: rgba(216, 216, 216, .5);
  112. position: absolute;
  113. top: 10px;
  114. left: 8px;
  115. border-radius: 50%;
  116. }
  117. .playlog-item .dotline .time {
  118. width: 100%;
  119. position: absolute;
  120. margin-top: 30px;
  121. z-index: 99;
  122. font-size: 12px;
  123. color: #777;
  124. text-align: center;
  125. }
  126. .playlog-item .content {
  127. width: 100%;
  128. display: flex;
  129. flex-direction: column;
  130. /* margin: 7px 0; */
  131. margin: 7rpx 0 7rpx 65rpx;
  132. }
  133. .playlog-item .content .chapter {
  134. font-size: 30rpx;
  135. line-height: 68rpx;
  136. color: #444;
  137. white-space: normal;
  138. padding-right: 10px;
  139. }
  140. .playlog-item .content .course {
  141. font-size: 28rpx;
  142. line-height: 56rpx;
  143. color: #999;
  144. }
  145. .onAll{
  146. background: #fff;
  147. text-align: center;
  148. padding: 25rpx;
  149. color: #4F99E8;
  150. }