People_search.wxss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. /* parents/pages/search/search.wxss */
  2. @import '../../../templates/nodata/nodata.wxss';
  3. @import '../../../templates/loading/loading.wxss';
  4. page{
  5. background: #fff
  6. }
  7. .search-wrapper {
  8. flex: 1;
  9. display: flex;
  10. justify-content: flex-start;
  11. align-items: center;
  12. padding: 16rpx 30rpx;
  13. margin-right: 30rpx;
  14. box-shadow: 0px 4rpx 10rpx 0px rgba(11,71,94,0.2);
  15. border-radius: 86rpx;
  16. background:rgba(246,245,251,1);
  17. }
  18. .search-cancel{
  19. color: #00B7FF;
  20. font-size: 30rpx;
  21. margin: auto;
  22. }
  23. .history{
  24. color: #393939;
  25. font-size: 30rpx;
  26. margin: 40rpx;
  27. }
  28. .history-items{
  29. display: flex;
  30. justify-content: space-between;
  31. }
  32. .history-item{
  33. display: inline-block;
  34. margin: 20rpx 20rpx 0 0;
  35. padding: 15rpx 27rpx;
  36. background: #F6F5FB;
  37. border-radius:34rpx;
  38. font-size: 24rpx;
  39. color: #6C6C80;
  40. }
  41. .history-img{
  42. width: 30rpx;
  43. height: 30rpx;
  44. }
  45. .header {
  46. /* background: #FAFAFA; */
  47. padding: 24rpx 40rpx;
  48. }
  49. .header-active {
  50. background: #fff;
  51. }
  52. .nodata{
  53. text-align: center;
  54. color: #999999;
  55. font-size: 30rpx;
  56. }
  57. .nodata-img{
  58. width: 122rpx;
  59. height: 138rpx;
  60. margin: 0 0 50rpx 0;
  61. }
  62. .items {
  63. position: relative;
  64. z-index: 99;
  65. }
  66. .item {
  67. padding: 24rpx 30rpx;
  68. display: flex;
  69. justify-content: flex-end;
  70. align-items: center;
  71. background: #fff;
  72. }
  73. .item-text {
  74. color: #00B7FF;
  75. font-size: 28rpx;
  76. }
  77. .item-icon {
  78. width: 14rpx;
  79. height: 14rpx;
  80. margin-left: 20rpx;
  81. transition: all .3s;
  82. }
  83. .item-icon-active {
  84. transform: rotate(180deg);
  85. }
  86. .items-modal {
  87. position: absolute;
  88. top: 100%;
  89. left: 0;
  90. width: 100%;
  91. height: 1500rpx;
  92. background: rgba(0, 0, 0, .5);
  93. }
  94. .items-modal-list {
  95. background: #fff;
  96. border-top: solid 1rpx #e6e6e6;
  97. padding-left: 30rpx;
  98. }
  99. .items-modal-li {
  100. padding: 30rpx 30rpx 30rpx 0;
  101. border-bottom: solid 1rpx #e6e6e6;
  102. display: flex;
  103. justify-content: space-between;
  104. align-items: center;
  105. }
  106. .items-modal-li:nth-last-of-type(1) {
  107. border-bottom: solid 1rpx transparent;
  108. }
  109. .items-modal-text {
  110. font-size: 28rpx;
  111. color: #999;
  112. }
  113. .items-modal-icon {
  114. width: 26rpx;
  115. height: 20rpx;
  116. }
  117. .topic{
  118. color: #333333;
  119. font-size: 30rpx;
  120. padding: 24rpx 20rpx;
  121. background: #fff;
  122. }
  123. .topic-img{
  124. height: 26rpx;
  125. width: 26rpx;
  126. margin-right: 8rpx;
  127. margin-bottom: 5rpx;
  128. }
  129. .li_type{
  130. height: 38rpx;
  131. background:rgba(246,245,251,1);
  132. padding:15rpx 40rpx;
  133. line-height:38rpx;
  134. color:rgba(110, 107, 107, 0.8);
  135. font-size: 32rpx;
  136. }
  137. .icon{
  138. height: 24rpx;
  139. width: 12rpx;
  140. display:inline-block;
  141. }
  142. .image{
  143. height: 24rpx;
  144. width: 12rpx;
  145. }
  146. .topic>view{
  147. display: inline-block;
  148. }
  149. .li {
  150. display: flex;
  151. justify-content: flex-start;
  152. align-items: flex-start;
  153. margin: 50rpx auto;
  154. padding: 0;
  155. }
  156. .li-box {
  157. position: relative;
  158. width: 154rpx;
  159. min-height: 158rpx;
  160. }
  161. .li-img {
  162. position: absolute;
  163. top: 4li0rpx;
  164. left: 0;
  165. width: 88rpx;
  166. height: 88rpx;
  167. border-radius:50%;
  168. background: white;
  169. }
  170. .li-col {
  171. width:80%;
  172. display: flex;
  173. justify-content: flex-start;
  174. align-items: flex-start;
  175. }
  176. .li-text {
  177. width:80%;
  178. }
  179. .li-text-gray {
  180. font-size: 30rpx;
  181. color: #ccc;
  182. }
  183. .li-text-black {
  184. font-size: 34rpx;
  185. color: rgb(27, 27, 27);
  186. flex: 1;
  187. }
  188. .li-text-info{
  189. width:20%;
  190. color: #00B7FF;
  191. }