index.wxss 7.8 KB

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