index.wxss 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495
  1. /* 顶部 */
  2. .app-header {
  3. display: flex;
  4. align-items: center;
  5. height: 90rpx;
  6. box-shadow: 0 0 10rpx 10rpx #eaeaea;
  7. border-top: 1rpx solid #f5f5f5;
  8. box-sizing: border-box;
  9. background: #fff;
  10. }
  11. .map {
  12. display: flex;
  13. white-space: nowrap;
  14. font-size: 28rpx;
  15. padding: 0 10rpx 0 20rpx;
  16. color: #999;
  17. }
  18. .location {
  19. width: 20rpx;
  20. height: 24rpx;
  21. padding-right: 10rpx;
  22. }
  23. .location image {
  24. width: 100%;
  25. height: 100%;
  26. }
  27. .map .cityname {
  28. color: #232327;
  29. }
  30. .arrow-down {
  31. transform: rotate(90deg);
  32. margin-left: 10rpx;
  33. }
  34. .search {
  35. display: flex;
  36. align-items: center;
  37. flex-grow: 1;
  38. height: 54rpx;
  39. margin: 0 30rpx 0 10rpx;
  40. padding: 0 20rpx;
  41. background: #f5f5f5;
  42. border-radius: 27rpx;
  43. line-height: 54rpx;
  44. font-size: 24rpx;
  45. color: #999;
  46. }
  47. .search .i_search {
  48. width: 24rpx;
  49. height: 27rpx;
  50. display: flex;
  51. align-items: center;
  52. margin-left: 100rpx;
  53. }
  54. .search .i_search image {
  55. width: 100%;
  56. height: 100%;
  57. }
  58. .search-input {
  59. margin-left: 13rpx;
  60. color: #ababab;
  61. }
  62. /* 轮播图 */
  63. .slide-image {
  64. width: 100%;
  65. }
  66. /* 滚动 */
  67. .marquee {
  68. display: flex;
  69. align-items: center;
  70. margin-top: 20rpx;
  71. padding: 0rpx 20rpx;
  72. background: rgba(255, 255, 255, 1);
  73. box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.06);
  74. border-radius: 48rpx;
  75. height: 48rpx;
  76. line-height: 48rpx;
  77. font-size: 24rpx;
  78. color: #706f6f;
  79. }
  80. .marquee .broadcast {
  81. width: 30rpx;
  82. height: 26rpx;
  83. margin-left: 20rpx;
  84. display: flex;
  85. align-items: center;
  86. }
  87. .marquee .broadcast image {
  88. width: 100%;
  89. height: 100%;
  90. }
  91. .marquee .swip {
  92. width: 100%;
  93. height: 100%;
  94. padding-left: 20rpx;
  95. }
  96. .marquee .swip text {
  97. width: 100%;
  98. height: 100%;
  99. }
  100. /* 岗位 */
  101. .activity-box {
  102. padding-top: 30rpx;
  103. }
  104. .activity {
  105. display: flex;
  106. }
  107. .activity-item {
  108. position: relative;
  109. flex: 1 0 auto;
  110. display: flex;
  111. flex-direction: column;
  112. justify-content: center;
  113. justify-items: center;
  114. align-items: center;
  115. font-size: 26rpx;
  116. color: #777;
  117. }
  118. .activity-item image {
  119. width: 108rpx;
  120. height: 108rpx;
  121. }
  122. .activity-item text {
  123. margin-top: 18rpx;
  124. }
  125. /* 岗位2 */
  126. .activity-box2 {
  127. padding: 40rpx 0;
  128. }
  129. .activity2 {
  130. display: flex;
  131. }
  132. .activity-item2 {
  133. position: relative;
  134. flex: 1 0 auto;
  135. display: flex;
  136. flex-direction: column;
  137. justify-content: center;
  138. justify-items: center;
  139. align-items: center;
  140. font-size: 26rpx;
  141. color: #777;
  142. padding-bottom: 5rpx;
  143. }
  144. .activity-item2 image {
  145. width: 314rpx;
  146. height: 198rpx;
  147. }
  148. .activity-item2 text {
  149. margin-top: 18rpx;
  150. }
  151. /* 间距 */
  152. .jianju {
  153. width: 100%;
  154. height: 16rpx;
  155. background: rgba(245, 245, 245, 1);
  156. }
  157. /* 列表 */
  158. .box-body {
  159. width: 100%;
  160. overflow: hidden;
  161. }
  162. .box_title {
  163. padding: 17rpx 0 17rpx 40rpx;
  164. font-size: 28rpx;
  165. color: #666;
  166. border-bottom: 2rpx solid #ddd;
  167. }
  168. .box-item {
  169. display: flex;
  170. padding: 35rpx 40rpx 30rpx 40rpx;
  171. font-size: 32rpx;
  172. color: #232327;
  173. box-sizing: border-box;
  174. border-bottom: 16rpx solid #f5f5f5;
  175. }
  176. .item-hover {
  177. background: #f5f5f5;
  178. }
  179. .box-item .box-item-img {
  180. display: flex;
  181. flex: 0 0 auto;
  182. width: 150rpx;
  183. height: 150rpx;
  184. border-radius: 6rpx;
  185. background: #fff;
  186. }
  187. .box-item .box-item-info {
  188. display: flex;
  189. flex-direction: column;
  190. justify-content: space-between;
  191. flex-grow: 1;
  192. box-sizing: border-box;
  193. overflow: hidden;
  194. }
  195. .box-item .one {
  196. display: flex;
  197. justify-content: space-between;
  198. color: #232327;
  199. flex-direction: row;
  200. }
  201. .box-item .one .left {
  202. display: flex;
  203. flex-grow: 1;
  204. align-items: center;
  205. font-size: 32rpx;
  206. font-family: SourceHanSansCN-Regular;
  207. font-weight: 400;
  208. color: rgba(35, 35, 39, 1);
  209. width: 60%;
  210. }
  211. .box-item .one .salary {
  212. font-size: 32rpx;
  213. font-family: Arial-BoldMT;
  214. font-weight: bold;
  215. color: rgba(30, 98, 167, 1);
  216. }
  217. .box-item .one .salary image {
  218. width: 18rpx;
  219. height: 24rpx;
  220. }
  221. .box-item .two {
  222. display: flex;
  223. justify-content: space-between;
  224. color: #909090;
  225. font-size: 24rpx;
  226. margin-top: 30rpx;
  227. align-items: center;
  228. }
  229. .box-item .two .limit {
  230. display: flex;
  231. flex-direction: row;
  232. flex-grow: 1;
  233. overflow: hidden;
  234. margin-right: 20rpx;
  235. width: 80%;
  236. color: #868b92;
  237. }
  238. .box-item .two .limit image {
  239. width: 18rpx;
  240. height: 18rpx;
  241. margin-right: 10rpx;
  242. }
  243. .box-item .two .limit i-tag {
  244. /* margin-left: 10rpx; */
  245. }
  246. .box-item .two .limit text {
  247. margin-left: 10rpx;
  248. }
  249. .box-item .two .limit_1 {
  250. display: flex;
  251. flex-direction: row;
  252. flex-grow: 1;
  253. overflow: hidden;
  254. width: 80%;
  255. color: #868b92;
  256. flex-wrap: wrap;
  257. }
  258. .box-item .two .limit_1 image {
  259. width: 18rpx;
  260. height: 18rpx;
  261. margin-right: 10rpx;
  262. }
  263. .box-item .two .limit_1 i-tag {
  264. /* margin-left: 10rpx; */
  265. }
  266. .box-item .two .limit_1 text {
  267. margin-left: 10rpx;
  268. }
  269. .box-item .two .time {
  270. color: #706f6f;
  271. font-size: 20rpx;
  272. }
  273. .tag-class {
  274. background: #e2f4fe !important;
  275. margin-right: 6rpx;
  276. white-space: nowrap;
  277. border: none !important;
  278. background: rgba(245, 245, 245, 1) !important;
  279. border-radius: 14px !important;
  280. }
  281. .box-item .three {
  282. display: flex;
  283. justify-content: space-between;
  284. align-items: center;
  285. font-size: 20rpx;
  286. margin-top: 20rpx;
  287. }
  288. .box-item .three image {
  289. width: 16rpx;
  290. height: 19rpx;
  291. }
  292. .box-item .three .area {
  293. color: #868b92;
  294. font-size: 24rpx;
  295. }
  296. .box-item .three .area .area-name {
  297. margin-left: 10rpx;
  298. color: #868b92;
  299. font-size: 24rpx;
  300. }
  301. .box-item .three .limit {
  302. display: flex;
  303. flex-grow: 1;
  304. overflow: hidden;
  305. margin-right: 10rpx;
  306. width: 80%;
  307. flex-direction: row;
  308. }
  309. .box-item .three .limit i-tag {
  310. margin-left: 10rpx;
  311. }
  312. .box-item .three .time {
  313. flex: 0 0 auto;
  314. color: #868b92;
  315. }
  316. .box-item .three .time image {
  317. width: 18rpx;
  318. height: 18rpx;
  319. }
  320. .box-item .three .time text {
  321. margin-left: 6rpx;
  322. font-size: 20rpx;
  323. }
  324. .box-item .three .fan {
  325. display: flex;
  326. flex-direction: row;
  327. color: #ff400e;
  328. font-size: 20rpx;
  329. align-items: center;
  330. }
  331. .box-item .three .fan image {
  332. width: 24rpx;
  333. height: 24rpx;
  334. margin-right: 10rpx;
  335. }
  336. .box-item .four {
  337. display: flex;
  338. justify-content: space-between;
  339. color: #909090;
  340. font-size: 22rpx;
  341. margin-top: 18rpx;
  342. align-items: center;
  343. }
  344. .box-item .four .limit {
  345. display: flex;
  346. flex-direction: row;
  347. flex-grow: 1;
  348. overflow: hidden;
  349. margin-right: 30rpx;
  350. width: 80%;
  351. color: #868b92;
  352. }
  353. .box-item .four .limit image {
  354. width: 18rpx;
  355. height: 18rpx;
  356. }
  357. .box-item .four .limit i-tag {
  358. margin-left: 10rpx;
  359. }
  360. .box-item .four .limit text {
  361. margin-left: 10rpx;
  362. }
  363. .box-item .four .time {
  364. color: #706f6f;
  365. font-size: 20rpx;
  366. }
  367. .box-item .four .commpany {
  368. font-size: 22rpx;
  369. color: #a0a4a9;
  370. }
  371. .box-item .four .area {
  372. color: #868b92;
  373. font-size: 24rpx;
  374. }
  375. .box-item .four .area image {
  376. width: 16rpx;
  377. height: 19rpx;
  378. }
  379. .box-item .four .area .area-name {
  380. margin-left: 10rpx;
  381. color: #868b92;
  382. font-size: 22rpx;
  383. }
  384. /* 客服 */
  385. .kefu-button::after {
  386. border: 0;
  387. border-radius: 0;
  388. }
  389. #kefu {
  390. position: fixed;
  391. bottom: 60rpx;
  392. right: 30rpx;
  393. width: 124rpx;
  394. height: 124rpx;
  395. background: url("https://happyjob.oss-cn-shanghai.aliyuncs.com/uploadfiles/mina/images/home/kefu.png") no-repeat;
  396. background-size: 100% 100%;
  397. border: none;
  398. outline: none;
  399. }
  400. #kefu.kefu-hover {
  401. background-image: url("https://happyjob.oss-cn-shanghai.aliyuncs.com/uploadfiles/mina/images/home/kefu1.png");
  402. }
  403. #kefu::after {
  404. border: none;
  405. }
  406. .loading_no {
  407. display: flex;
  408. justify-content: center;
  409. align-items: center;
  410. height: 60rpx;
  411. font-size: 22rpx;
  412. background-color: #f5f5f5;
  413. color: #696969;
  414. }