chat.css 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. page{
  2. width: 100%;
  3. overflow: hidden;
  4. }
  5. .chat_title{
  6. position: fixed;
  7. background-color: #fff;
  8. width: 100%;
  9. z-index: 9;
  10. top: 0;
  11. height: 128rpx;
  12. }
  13. .chat_title text{
  14. line-height: 96rpx;
  15. font-size: 64rpx;
  16. font-weight: 400;
  17. margin-left: 32rpx;
  18. }
  19. .search,.search_input {
  20. width: 100%;
  21. height: 88rpx;
  22. background-color: #f2f2f2;
  23. display: flex;
  24. align-items: center;
  25. top: 0;
  26. left: 0;
  27. }
  28. .search {
  29. justify-content: space-around;
  30. }
  31. .search_input {
  32. justify-content: space-around;
  33. }
  34. .search view, .search_input view {
  35. height: 64rpx;
  36. line-height: 64rpx;
  37. background-color: #fff;
  38. border-radius: 17px;
  39. text-align: center;
  40. display: flex;
  41. align-items: center;
  42. margin: 0 32rpx;
  43. }
  44. .search view {
  45. width: 100%;
  46. justify-content: center;
  47. align-items: center;
  48. background-color: #fff;
  49. }
  50. .search image {
  51. display: block;
  52. width: 5%;
  53. height: 50%;
  54. }
  55. .search_input view {
  56. padding-left: 24rpx;
  57. text-align: left;
  58. flex: 1;
  59. margin: 0 28rpx 0 32rpx;
  60. }
  61. .search icon,.search_input icon {
  62. display: inline-block;
  63. margin: 4rpx 12rpx 0;
  64. font-size: 24rpx;
  65. }
  66. .search text {
  67. font-size: 30rpx;
  68. color: #9B9B9B;
  69. }
  70. .search_input text {
  71. display: inline-block;
  72. height: 60rpx;
  73. line-height: 60rpx;
  74. font-size: 30rpx;
  75. color: #0873DE;
  76. margin-right: 32rpx;
  77. }
  78. .search_input input {
  79. font-size: 28rpx;
  80. width: 90%;
  81. }
  82. .mask {
  83. background-color: black;
  84. opacity: 0.4;
  85. position: fixed;
  86. top: 80rpx;
  87. left: 0;
  88. right: 0;
  89. bottom: 0;
  90. }
  91. .chat_list_wraper{
  92. padding-bottom: 270rpx;
  93. box-sizing: border-box;
  94. height: 100%;
  95. position: fixed;
  96. overflow: hidden;
  97. background-color: #fff;
  98. }
  99. .chat_list {
  100. width: 100%;
  101. height: 168rpx;
  102. overflow: hidden;
  103. }
  104. .tap_mask{
  105. width: 100%;
  106. overflow: hidden;
  107. }
  108. .list_box{
  109. margin: 0 32rpx;
  110. height: 168rpx;
  111. /* border-bottom: 0.5px #E5E5E5 solid; */
  112. display: flex;
  113. }
  114. .list_left {
  115. width: 63%;
  116. height: 100%;
  117. float: left;
  118. display: flex;
  119. flex-direction: row;
  120. align-items: center;
  121. flex: 1;
  122. }
  123. .list_text {
  124. width: 60%;
  125. height: 100%;
  126. float: left;
  127. font-size: 28rpx;
  128. }
  129. .list_pic {
  130. margin-right: 20rpx;
  131. }
  132. .list_pic image {
  133. display: block;
  134. width: 88rpx;
  135. height: 88rpx;
  136. border-radius: 50%;
  137. }
  138. .list_user,.list_user2{
  139. font-size: 34rpx;
  140. color: #000;
  141. position: relative;
  142. top: 22rpx;
  143. overflow: hidden;
  144. width: 350rpx;
  145. display: inline-block;
  146. text-overflow: ellipsis;
  147. }
  148. .list_users{font-size: 32rpx;color: #333;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
  149. .list_user2{
  150. top: 40rpx !important;
  151. }
  152. .em-msgNum {
  153. position: absolute;
  154. left: 84rpx;
  155. top: 32rpx;
  156. min-width: 28rpx;
  157. border-radius: 17rpx;
  158. background: #FF5700;
  159. border: 2rpx solid #fff;
  160. color: #fff;
  161. line-height: 28rpx;
  162. font-size: 25rpx;
  163. text-align: center;
  164. padding: 3rpx;
  165. z-index: 999;
  166. }
  167. .list_texts{border-bottom: 1rpx solid #DEDEDE;flex-direction: column;padding: 37rpx 0;height: 93rpx;}
  168. .list_word {
  169. height: 40rpx;
  170. display: block;
  171. margin-top: 0;
  172. overflow: hidden;
  173. text-overflow: ellipsis;
  174. white-space: nowrap;
  175. position: absolute;
  176. width: 70%;
  177. font-size: 24rpx;
  178. color: #9B9B9B;
  179. top: 66rpx;
  180. }
  181. .list_words{font-size: 24rpx;color: #A1A1A1;margin-top: 5rpx;}
  182. .list_right {
  183. width: 240rpx;
  184. height: 100%;
  185. float: right;
  186. font-size: 24rpx;
  187. text-align: right;
  188. }
  189. .list_rights{font-size: 24rpx;text-align: right;}
  190. .list_right text:first-child,.list_rights text:first-child {
  191. display: block;
  192. line-height: 40rpx;
  193. margin: 12rpx auto auto auto;
  194. }
  195. .list_right text:last-child,.list_rights text:last-child {
  196. height: 40rpx;
  197. font-size: 24rpx;
  198. color: #A1A1A1;
  199. display: block;
  200. margin-top: 4rpx;
  201. }
  202. .chat_noChat{
  203. text-align: center;
  204. font-size: 30rpx;
  205. color: #9B9B9B;
  206. margin-top: 400rpx;
  207. }
  208. .ctbg{
  209. width: 138px;
  210. height: 106px;
  211. display: block;
  212. margin: 20rpx auto;
  213. }
  214. /* .main_title_hide{
  215. top: -128rpx;
  216. transition: top 0.5s;
  217. }
  218. .main_title_show{
  219. top: 0;
  220. transition: top 0.5s;
  221. } */
  222. /* .goTop{
  223. top: 0rpx;
  224. transition: top 0.5s;
  225. padding-bottom: 104rpx!important;
  226. }
  227. .goTopX{
  228. top: 0rpx;
  229. transition: top 0.5s;
  230. padding-bottom: 140rpx!important;
  231. }
  232. .goback{
  233. top: 128rpx;
  234. transition: top 0.5s;
  235. } */