comment.scss 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. .comment {
  2. background-color: #f7f7f7;
  3. }
  4. .navigator {
  5. width: #{750rpx};
  6. height: #{100rpx};
  7. background-color: #ffffff;
  8. border-bottom: #{1rpx} solid #e2e2e2;
  9. position: fixed;
  10. top: 0;
  11. left: 0;
  12. z-index: 1000;
  13. > view {
  14. width: #{250rpx};
  15. height: #{100rpx};
  16. text-align: center;
  17. > text {
  18. display: inline-block;
  19. height: #{100rpx};
  20. line-height: #{98rpx};
  21. font-size: #{28rpx};
  22. border-bottom-style: solid;
  23. border-bottom-width: #{2rpx};
  24. border-bottom-color: transparent;
  25. }
  26. .active-nav {
  27. color: #446dfd;
  28. border-bottom-color: #446dfd;
  29. }
  30. }
  31. }
  32. .replyStatus {
  33. margin-top: #{124rpx};
  34. width: #{750rpx};
  35. height: #{56rpx};
  36. background-color: #f7f7f7;
  37. :first-child {
  38. border-top-left-radius: #{28rpx};
  39. border-bottom-left-radius: #{28rpx};
  40. }
  41. :last-child {
  42. border-top-right-radius: #{28rpx};
  43. border-bottom-right-radius: #{28rpx};
  44. }
  45. > view {
  46. width: #{160rpx};
  47. height: #{56rpx};
  48. line-height: #{56rpx};
  49. font-size: #{24rpx};
  50. text-align: center;
  51. background-color: #ffffff;
  52. border: #{1rpx} solid #446dfd;
  53. }
  54. .active-reply {
  55. background-color: #446dfd;
  56. color: #ffffff;
  57. }
  58. }
  59. .tip {
  60. position: fixed;
  61. top: #{300rpx};
  62. left: 0;
  63. right: 0;
  64. margin: 0 auto;
  65. color: #666666;
  66. font-size: #{24rpx};
  67. width: #{240rpx};
  68. text-align: center;
  69. > image {
  70. height: #{240rpx};
  71. width: #{240rpx};
  72. margin-bottom: #{20rpx};
  73. }
  74. }
  75. .content {
  76. width: #{750rpx};
  77. padding: #{24rpx};
  78. box-sizing: border-box;
  79. .item {
  80. background-color: white;
  81. width: #{750-48rpx};
  82. box-sizing: border-box;
  83. padding: #{24rpx};
  84. margin-bottom: #{24rpx};
  85. border-radius: #{16rpx};
  86. .top {
  87. .image {
  88. width: #{144rpx};
  89. height: #{144rpx};
  90. border-top-left-radius: #{8rpx};
  91. border-bottom-left-radius: #{8rpx};
  92. }
  93. .text {
  94. width: #{510rpx};
  95. height: #{144rpx};
  96. padding: #{20rpx} #{24rpx} #{20rpx} #{20rpx};
  97. box-sizing: border-box;
  98. border-top-right-radius: #{8rpx};
  99. border-bottom-right-radius: #{8rpx};
  100. .name {
  101. width: #{466rpx};
  102. height: #{57rpx};
  103. line-height: #{28rpx};
  104. font-size: #{24rpx};
  105. color: #353535;
  106. word-break: break-all;
  107. text-overflow: ellipsis;
  108. display: -webkit-box;
  109. -webkit-box-orient: vertical;
  110. -webkit-line-clamp: 2;
  111. overflow: hidden;
  112. }
  113. .from {
  114. width: #{466rpx};
  115. font-size: #{24rpx};
  116. color: #999999;
  117. margin-top: #{24rpx};
  118. }
  119. }
  120. }
  121. .bottom {
  122. padding-top: #{20rpx};
  123. box-sizing: border-box;
  124. height: #{80rpx};
  125. .performed {
  126. margin-top: #{6rpx};
  127. height: #{48rpx};
  128. .icon {
  129. width: #{48rpx};
  130. height: #{48rpx};
  131. }
  132. .evaluation {
  133. width: #{50rpx};
  134. color: #353535;
  135. font-size: #{22rpx};
  136. margin-left: #{16rpx};
  137. }
  138. .show {
  139. width: #{88rpx};
  140. height: #{36rpx};
  141. line-height: #{36rpx};
  142. border-radius: #{18rpx};
  143. background-color: #ff9000;
  144. font-size: #{22rpx};
  145. color: #ffffff;
  146. text-align: center;
  147. margin-left: #{16rpx};
  148. }
  149. }
  150. .button {
  151. height: #{60rpx};
  152. .show-button, view.reply {
  153. display: inline-block;
  154. height: #{60rpx};
  155. line-height: #{60rpx};
  156. padding: 0 #{20rpx};
  157. min-width: #{120rpx};
  158. border-style: solid;
  159. border-width: #{1rpx};
  160. border-radius: #{30rpx};
  161. font-size: #{28rpx};
  162. text-align: center;
  163. }
  164. .show-button {
  165. border-color: #bbbbbb;
  166. color: #353535;
  167. }
  168. .reply {
  169. border-color: #446dfd;
  170. color: #446dfd;
  171. margin-left: #{16rpx};
  172. }
  173. }
  174. }
  175. }
  176. }
  177. .is-top-box-bg {
  178. background: #e5e5e5 !important;
  179. }
  180. .is-top-center-bg {
  181. background: #dedede !important;
  182. }