index.wxss 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412
  1. /* pages/parttime/index.wxss */
  2. page {
  3. background-color: #f5f5f5;
  4. }
  5. /* 顶部筛选 */
  6. .head {
  7. display: flex;
  8. height: 100rpx;
  9. width: 100%;
  10. flex: 1 0 auto;
  11. align-items: center;
  12. background-color: #fff;
  13. border-bottom: 2rpx solid #ddd;
  14. position: fixed;
  15. }
  16. .head .map {
  17. display: flex;
  18. white-space: nowrap;
  19. flex-grow: 1;
  20. font-size: 30rpx;
  21. justify-content: center;
  22. height: 40rpx;
  23. align-items: center;
  24. color: #525255;
  25. }
  26. .head .map .location {
  27. display: flex;
  28. align-items: center;
  29. width: 20rpx;
  30. height: 24rpx;
  31. padding-right: 10rpx;
  32. }
  33. .map .location image {
  34. width: 100%;
  35. height: 100%;
  36. }
  37. .head .salay {
  38. display: flex;
  39. flex-grow: 1;
  40. white-space: nowrap;
  41. font-size: 26rpx;
  42. height: 40rpx;
  43. color: #868b92;
  44. justify-content: center;
  45. align-items: center;
  46. }
  47. .salay .salayname {
  48. padding-right: 10rpx;
  49. }
  50. .salay .arrow {
  51. display: flex;
  52. width: 14rpx;
  53. height: 8rpx;
  54. align-items: center;
  55. }
  56. .salay .arrow image {
  57. width: 100%;
  58. height: 100%;
  59. }
  60. .salay .arrow1 {
  61. display: flex;
  62. width: 18rpx;
  63. height: 10rpx;
  64. align-items: center;
  65. }
  66. .salay .arrow1 image {
  67. width: 100%;
  68. height: 100%;
  69. }
  70. .salay .active {
  71. color: #1e62a7;
  72. }
  73. /* 结算方式 */
  74. .scrolled {
  75. position: fixed;
  76. top: 100rpx;
  77. left: 0;
  78. }
  79. .settlementMethod {
  80. display: flex;
  81. display: -webkit-flex;
  82. width: 100%;
  83. padding: 14rpx 30rpx;
  84. box-sizing: border-box;
  85. z-index: 999;
  86. -webkit-transition: background 0.5s ease-in-out;
  87. align-items: center;
  88. height: 163rpx;
  89. flex-wrap: wrap;
  90. background-color: #fff;
  91. box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.06);
  92. border-top: 2rpx solid #ddd;
  93. }
  94. .settlementMethod .settleme {
  95. display: flex;
  96. height: 48rpx;
  97. align-items: center;
  98. background: rgba(245, 245, 245, 1);
  99. border-radius: 24rpx;
  100. margin-right: 16rpx;
  101. color: #706f6f;
  102. }
  103. .settlementMethod .settleme text {
  104. padding: 0 30rpx;
  105. font-size: 24rpx;
  106. }
  107. .settlementMethod .active {
  108. background-color: #5191d3;
  109. color: #fff;
  110. }
  111. /* 列表 */
  112. .box-body {
  113. width: 100%;
  114. overflow: hidden;
  115. padding-top: 102rpx;
  116. }
  117. .box_title {
  118. padding: 17rpx 0 17rpx 40rpx;
  119. font-size: 28rpx;
  120. color: #666;
  121. border-bottom: 2rpx solid #ddd;
  122. }
  123. .box-item {
  124. display: flex;
  125. padding: 35rpx 40rpx 30rpx 40rpx;
  126. font-size: 32rpx;
  127. color: #232327;
  128. box-sizing: border-box;
  129. background-color: #fff;
  130. border-bottom: 16rpx solid #f5f5f5;
  131. }
  132. .item-hover {
  133. background: #f5f5f5;
  134. }
  135. .box-item .box-item-img {
  136. display: flex;
  137. flex: 0 0 auto;
  138. width: 150rpx;
  139. height: 150rpx;
  140. border-radius: 6rpx;
  141. background: #fff;
  142. }
  143. .box-item .box-item-info {
  144. display: flex;
  145. flex-direction: column;
  146. justify-content: space-between;
  147. flex-grow: 1;
  148. box-sizing: border-box;
  149. overflow: hidden;
  150. }
  151. .box-item .one {
  152. display: flex;
  153. justify-content: space-between;
  154. color: #232327;
  155. flex-direction: row;
  156. }
  157. .box-item .one .left {
  158. display: flex;
  159. flex-grow: 1;
  160. align-items: center;
  161. font-size: 32rpx;
  162. font-family: SourceHanSansCN-Regular;
  163. font-weight: 400;
  164. color: rgba(35, 35, 39, 1);
  165. width: 60%;
  166. }
  167. .box-item .one .salary {
  168. font-size: 32rpx;
  169. font-family: Arial-BoldMT;
  170. font-weight: 400;
  171. color: rgba(255, 78, 37, 1);
  172. }
  173. .box-item .one .salary image {
  174. width: 18rpx;
  175. height: 24rpx;
  176. }
  177. .box-item .two {
  178. display: flex;
  179. justify-content: space-between;
  180. color: #909090;
  181. font-size: 24rpx;
  182. margin-top: 24rpx;
  183. align-items: center;
  184. }
  185. .box-item .two .limit {
  186. display: flex;
  187. flex-direction: row;
  188. flex-grow: 1;
  189. overflow: hidden;
  190. margin-right: 30rpx;
  191. width: 80%;
  192. color: #868b92;
  193. }
  194. .box-item .two .limit image {
  195. width: 18rpx;
  196. height: 18rpx;
  197. margin-right: 10rpx;
  198. }
  199. .box-item .two .limit i-tag {
  200. /* margin-left: 10rpx; */
  201. }
  202. .box-item .two .limit text {
  203. margin-left: 10rpx;
  204. }
  205. .box-item .two .time {
  206. color: #4391e1;
  207. font-size: 20rpx;
  208. border: 2rpx solid rgba(67, 145, 225, 1);
  209. border-radius: 14px;
  210. padding: 4rpx 14rpx;
  211. }
  212. .tag-class {
  213. margin-right: 8rpx;
  214. white-space: nowrap;
  215. border: none !important;
  216. background: rgba(245, 245, 245, 1) !important;
  217. border-radius: 14px !important;
  218. margin-bottom: 12rpx;
  219. font-size: 20rpx;
  220. }
  221. .box-item .three {
  222. display: flex;
  223. justify-content: space-between;
  224. align-items: center;
  225. font-size: 20rpx;
  226. margin-top: 20rpx;
  227. }
  228. .box-item .three image {
  229. width: 16rpx;
  230. height: 19rpx;
  231. }
  232. .box-item .three .area {
  233. color: #868b92;
  234. font-size: 24rpx;
  235. }
  236. .box-item .three .area .area-name {
  237. margin-left: 10rpx;
  238. color: #868b92;
  239. font-size: 24rpx;
  240. }
  241. .box-item .three .limit {
  242. display: flex;
  243. flex-grow: 1;
  244. overflow: hidden;
  245. margin-right: 10rpx;
  246. width: 80%;
  247. flex-direction: row;
  248. }
  249. .box-item .three .limit i-tag {
  250. margin-left: 10rpx;
  251. }
  252. .box-item .three .time {
  253. flex: 0 0 auto;
  254. color: #868b92;
  255. }
  256. .box-item .three .time image {
  257. width: 18rpx;
  258. height: 18rpx;
  259. }
  260. .box-item .three .time text {
  261. margin-left: 6rpx;
  262. font-size: 20rpx;
  263. }
  264. .box-item .three .fan {
  265. display: flex;
  266. flex-direction: row;
  267. color: #ff400e;
  268. font-size: 20rpx;
  269. align-items: center;
  270. }
  271. .box-item .three .fan image {
  272. width: 24rpx;
  273. height: 24rpx;
  274. margin-right: 10rpx;
  275. }
  276. .box-item .four {
  277. display: flex;
  278. justify-content: space-between;
  279. color: #909090;
  280. font-size: 22rpx;
  281. margin-top: 18rpx;
  282. align-items: center;
  283. }
  284. .box-item .four .limit {
  285. display: flex;
  286. flex-direction: row;
  287. flex-grow: 1;
  288. overflow: hidden;
  289. margin-right: 30rpx;
  290. width: 80%;
  291. color: #868b92;
  292. }
  293. .box-item .four .limit image {
  294. width: 18rpx;
  295. height: 18rpx;
  296. }
  297. .box-item .four .limit i-tag {
  298. margin-left: 10rpx;
  299. }
  300. .box-item .four .limit text {
  301. margin-left: 10rpx;
  302. }
  303. .box-item .four .time {
  304. color: #706f6f;
  305. font-size: 20rpx;
  306. }
  307. .box-item .four .commpany {
  308. font-size: 22rpx;
  309. color: #a0a4a9;
  310. }
  311. .box-item .four .area {
  312. color: #868b92;
  313. font-size: 24rpx;
  314. }
  315. .box-item .four .area image {
  316. width: 16rpx;
  317. height: 19rpx;
  318. }
  319. .box-item .four .area .area-name {
  320. margin-left: 10rpx;
  321. color: #868b92;
  322. font-size: 22rpx;
  323. }
  324. .loading_no {
  325. display: flex;
  326. justify-content: center;
  327. align-items: center;
  328. height: 60rpx;
  329. font-size: 22rpx;
  330. color: #696969;
  331. }
  332. /* 空白页 */
  333. .no_data {
  334. width: 100%;
  335. padding-top: 20%;
  336. display: flex;
  337. justify-content: center;
  338. align-items: center;
  339. flex-direction: column;
  340. }
  341. .white {
  342. width: 125px;
  343. height: 125px;
  344. }
  345. .no_text {
  346. color: #ccc;
  347. font-size: 32rpx;
  348. margin-top: 48rpx;
  349. }