comment-detail.scss 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. .comment-detail {
  2. width: #{750rpx};
  3. background-color: #f7f7f7;
  4. padding: #{24rpx};
  5. box-sizing: border-box;
  6. .top-text {
  7. height: #{36rpx};
  8. margin: #{4rpx} 0 #{20rpx} 0;
  9. .prompt {
  10. font-size: #{28rpx};
  11. color: #999999;
  12. }
  13. .show {
  14. margin-left: #{16rpx};
  15. width: #{88rpx};
  16. height: #{36rpx};
  17. line-height: #{36rpx};
  18. border-radius: #{18rpx};
  19. background-color: #ff9000;
  20. font-size: #{22rpx};
  21. color: #ffffff;
  22. text-align: center;
  23. }
  24. }
  25. .content {
  26. border-radius: #{26rpx};
  27. background-color: white;
  28. width: #{750-48rpx};
  29. padding-bottom: #{24rpx};
  30. box-sizing: border-box;
  31. margin-bottom: #{40rpx};
  32. .top {
  33. width: #{654rpx};
  34. height: #{192rpx};
  35. padding: #{24rpx} 0;
  36. box-sizing: border-box;
  37. margin: 0 #{24rpx};
  38. border-bottom: #{1rpx} solid #e2e2e2;
  39. >image {
  40. width: #{144rpx};
  41. height: #{144rpx};
  42. border-radius: #{8rpx};
  43. }
  44. >view {
  45. width: #{490rpx};
  46. margin-left: #{20rpx};
  47. height: #{144rpx};
  48. .name-text {
  49. width: #{368rpx};
  50. height: #{144rpx};
  51. >view.text {
  52. font-size: #{26rpx};
  53. color: #353535;
  54. width: #{368rpx};
  55. height: #{55rpx};
  56. line-height: #{28rpx};
  57. word-break: break-all;
  58. text-overflow: ellipsis;
  59. display: -webkit-box;
  60. -webkit-box-orient: vertical;
  61. -webkit-line-clamp: 2;
  62. overflow: hidden;
  63. }
  64. .attr {
  65. margin-top: #{24rpx};
  66. width: #{368rpx};
  67. font-size: #{24rpx};
  68. color: #999999;
  69. word-break: break-all;
  70. text-overflow: ellipsis;
  71. display: -webkit-box;
  72. -webkit-box-orient: vertical;
  73. -webkit-line-clamp: 1;
  74. overflow: hidden;
  75. }
  76. }
  77. .name-icon {
  78. width: #{96rpx};
  79. height: #{144rpx};
  80. .icon {
  81. width: #{48rpx};
  82. height: #{48rpx};
  83. }
  84. .evaluation {
  85. text-align: center;
  86. width: #{48rpx};
  87. color: #353535;
  88. font-size: #{22rpx};
  89. margin-top: #{16rpx};
  90. }
  91. }
  92. }
  93. }
  94. .bottom {
  95. padding-top: #{32rpx};
  96. box-sizing: border-box;
  97. width: #{666rpx};
  98. margin-left: #{24rpx};
  99. margin-right: #{12rpx};
  100. .bottom-text {
  101. width: #{666rpx};
  102. font-size: #{28rpx};
  103. color: #353535;
  104. margin-right: #{24rpx};
  105. margin-bottom: #{12rpx};
  106. }
  107. .bottom-image {
  108. width: #{666rpx};
  109. >image {
  110. border-radius: #{8rpx};
  111. width: #{210rpx};
  112. height: #{210rpx};
  113. margin-top: #{12rpx};
  114. margin-right: #{12rpx};
  115. }
  116. }
  117. }
  118. }
  119. .seller {
  120. margin-bottom: #{24rpx};
  121. color: #999999;
  122. font-size: #{28rpx};
  123. }
  124. .area {
  125. width: #{702rpx};
  126. height: #{328rpx};
  127. background-color: white;
  128. padding-top: #{1rpx};
  129. box-sizing: border-box;
  130. border-radius: #{25rpx};
  131. >textarea {
  132. width: #{654rpx};
  133. height: #{281rpx};
  134. margin: #{24rpx};
  135. border-radius: #{25rpx};
  136. background-color: #f7f7f7;
  137. color: #353535;
  138. font-size: #{28rpx};
  139. padding: #{24rpx};
  140. box-sizing: border-box;
  141. }
  142. .place {
  143. font-size: #{28rpx};
  144. color: #cdcdcd;
  145. }
  146. }
  147. .button {
  148. margin-top: #{80rpx};
  149. width: #{702rpx};
  150. height: #{80rpx};
  151. line-height: #{80rpx};
  152. border-radius: #{40rpx};
  153. background-color: #446dfd;
  154. font-size: #{28rpx};
  155. color: #ffffff;
  156. text-align: center;
  157. }
  158. }