article.wxss 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. @charset "UTF-8";
  2. /* 页面左右间距 */
  3. /* 文字尺寸 */
  4. /*文字颜色*/
  5. /* 边框颜色 */
  6. /*颜色*/
  7. /* 图片加载中颜色 */
  8. /* 行为相关颜色 */
  9. /* 功能栏字体大小 */
  10. /*功能栏左侧小图标*/
  11. page,
  12. .content {
  13. width: 100%;
  14. height: 100%;
  15. }
  16. .text-box {
  17. padding: 30rpx;
  18. border: 1rpx solid #EEEEEE;
  19. width: 100%;
  20. background-color: #fff;
  21. }
  22. .text-box .text-title {
  23. display: flex;
  24. flex-direction: column;
  25. }
  26. .text-box .text-title .text-1 {
  27. font-size: 33rpx;
  28. font-weight: bold;
  29. color: #333333;
  30. margin-bottom: 30rpx;
  31. }
  32. .text-box .text-title .text-2 {
  33. display: flex;
  34. align-items: center;
  35. }
  36. .text-box .text-title .text-2 .name {
  37. font-size: 25rpx;
  38. font-weight: 500;
  39. color: #666666;
  40. }
  41. .text-box .text-title .text-2 .gg {
  42. margin: 0 15rpx;
  43. width: 3rpx;
  44. height: 25rpx;
  45. background: #EEEEEE;
  46. }
  47. .text-box .text-title .text-2 .time {
  48. flex-shrink: 0;
  49. font-size: 22rpx;
  50. font-weight: 500;
  51. color: #999999;
  52. }
  53. .text-content-title {
  54. margin: 30rpx 0;
  55. display: flex;
  56. justify-content: space-between;
  57. align-items: center;
  58. background: #F5F5F5;
  59. padding: 17rpx 30rpx;
  60. border-radius: 7rpx;
  61. }
  62. .text-content-title .title-left-box {
  63. display: flex;
  64. justify-content: space-between;
  65. align-items: center;
  66. }
  67. .text-content-title .title-left-box .image {
  68. width: 85rpx;
  69. height: 85rpx;
  70. overflow: hidden;
  71. border-radius: 50%;
  72. margin-right: 18rpx;
  73. }
  74. .text-content-title .title-left-box .image image {
  75. width: 100%;
  76. height: 100%;
  77. }
  78. .text-content-title .title-left-box .title-left-box-content {
  79. display: flex;
  80. flex-direction: column;
  81. }
  82. .text-content-title .title-left-box .title-left-box-content .title-left-box-name {
  83. display: flex;
  84. justify-content: space-between;
  85. align-items: center;
  86. }
  87. .text-content-title .title-left-box .title-left-box-content .title-left-box-name .name-title {
  88. font-size: 29rpx;
  89. font-weight: bold;
  90. color: #333333;
  91. }
  92. .text-content-title .title-left-box .title-left-box-content .title-left-box-name .name-dingyue {
  93. margin-left: 15rpx;
  94. font-size: 24rpx;
  95. font-weight: bold;
  96. color: #F3554F;
  97. width: 92rpx;
  98. height: 34rpx;
  99. border: 1rpx solid #F3554F;
  100. border-radius: 17rpx;
  101. line-height: 34rpx;
  102. text-align: center;
  103. }
  104. .text-content-title .title-left-box .title-left-box-title text {
  105. font-size: 20rpx;
  106. font-weight: 500;
  107. color: #999999;
  108. }
  109. .text-content-title .tt {
  110. color: #B3B3B3;
  111. }
  112. .content-content ._p {
  113. text-align: justify;
  114. }
  115. .pinglun {
  116. background: #F8F8F8;
  117. padding: 20rpx 0;
  118. }
  119. .pinglun-box {
  120. background: #FFFFFF;
  121. }
  122. .pinglun-box .pinglun-title {
  123. font-size: 30rpx;
  124. font-weight: bold;
  125. color: #333333;
  126. line-height: 80rpx;
  127. margin-left: 30rpx;
  128. }
  129. .pinglun-box .pinglun-content {
  130. display: flex;
  131. border-top: 1rpx solid #EEEEEE;
  132. padding: 30rpx 0 0 30rpx;
  133. }
  134. .pinglun-box .pinglun-content .pinglun-content-left {
  135. width: 66rpx;
  136. height: 66rpx;
  137. border-radius: 50%;
  138. overflow: hidden;
  139. }
  140. .pinglun-box .pinglun-content .pinglun-content-left image {
  141. width: 100%;
  142. height: 100%;
  143. }
  144. .pinglun-box .pinglun-content .pinglun-content-right {
  145. display: flex;
  146. justify-content: space-between;
  147. margin-left: 30rpx;
  148. display: flex;
  149. flex-direction: column;
  150. }
  151. .pinglun-box .pinglun-content .pinglun-content-right .pinglun-name {
  152. font-size: 26rpx;
  153. font-weight: 500;
  154. color: #333333;
  155. }
  156. .pinglun-box .pinglun-content .pinglun-content-right .pinglun-tit {
  157. margin: 8rpx 0;
  158. font-size: 30rpx;
  159. font-weight: bold;
  160. color: #333333;
  161. }
  162. .pinglun-box .pinglun-content .pinglun-content-right .pinglun-time {
  163. font-size: 22rpx;
  164. font-weight: bold;
  165. color: #999999;
  166. margin-bottom: 15rpx;
  167. }
  168. .zhankai {
  169. padding: 10rpx 0;
  170. justify-content: center;
  171. display: flex;
  172. align-items: center;
  173. }
  174. .zhankai image {
  175. margin-left: 10rpx;
  176. width: 20rpx;
  177. height: 20rpx;
  178. }
  179. .look {
  180. background: #FFFFFF;
  181. margin-top: 20rpx;
  182. }
  183. .look .look-box {
  184. margin: 0 30rpx;
  185. }
  186. .look .look-box .look-title {
  187. font-size: 30rpx;
  188. font-weight: bold;
  189. color: #333333;
  190. line-height: 80rpx;
  191. margin-left: 30rpx;
  192. }
  193. .look .look-box .look-content {
  194. display: flex;
  195. justify-content: space-between;
  196. padding: 30rpx 0;
  197. border-top: 1px solid #EEEEEE;
  198. border-bottom: 1px solid #EEEEEE;
  199. }
  200. .look .look-box .look-content .look-content-right {
  201. display: flex;
  202. align-items: center;
  203. }
  204. .look .look-box .look-content .look-content-right .look-name {
  205. width: 37rpx;
  206. height: 37rpx;
  207. background: #EE6231;
  208. border-radius: 50%;
  209. font-size: 27rpx;
  210. font-weight: bold;
  211. color: #FFFFFF;
  212. line-height: 37rpx;
  213. text-align: center;
  214. }
  215. .look .look-box .look-content .look-content-right .look-tit {
  216. margin-left: 10rpx;
  217. width: 500rpx;
  218. font-size: 27rpx;
  219. font-weight: 500;
  220. color: #333333;
  221. }
  222. .send-box {
  223. background: #FFFFFF;
  224. padding: 30rpx;
  225. width: 100%;
  226. position: fixed;
  227. bottom: 0;
  228. display: flex;
  229. justify-content: space-around;
  230. align-items: center;
  231. }
  232. .send-box .input {
  233. padding-left: 30rpx;
  234. width: 550rpx;
  235. height: 60rpx;
  236. background: #EEEEEE;
  237. border-radius: 31rpx;
  238. }
  239. .send-box image {
  240. width: 42rpx;
  241. height: 42rpx;
  242. }
  243. .pw {
  244. height: 120rpx;
  245. }
  246. .hf-wrap {
  247. width: 600rpx;
  248. background-color: #f4f4f4;
  249. margin-left: 120rpx;
  250. padding: 10rpx;
  251. padding-bottom: 0;
  252. font-size: 26rpx;
  253. border-radius: 10rpx;
  254. }
  255. .hf-wrap .hf {
  256. padding-bottom: 10rpx;
  257. }