index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479
  1. <template>
  2. <div style="background: #f0f0f0;padding-bottom:50px">
  3. <div class="banner">
  4. <img src="~@/assets/images/yzrc.jpg" alt="">
  5. </div>
  6. <div class="bread">
  7. <div>
  8. <span>当前位置:首页-<span style="color: rgba(75, 175, 227, 1)">优质人才</span></span>
  9. </div>
  10. </div>
  11. <div class="smart-device">
  12. <div class="smart-title">
  13. <span><span>企业招聘</span>JOBS</span>
  14. <!-- <i @click="join()">人才入驻</i>-->
  15. </div>
  16. <div class="smart-device-content">
  17. <div class="list-content">
  18. <div class="case-list">
  19. <div class="case-content">
  20. <ul class="list-table">
  21. <li v-for="(item,index) in noticeList" :key="index" class="myLi" @click="detail(item)">
  22. <div>
  23. <p>
  24. {{ item.name }}
  25. </p>
  26. </div>
  27. <div>
  28. <p>
  29. {{ item.num }}名
  30. </p>
  31. </div>
  32. <div>
  33. <p>
  34. {{ item.company }}
  35. </p>
  36. </div>
  37. <div>
  38. <p>
  39. 发布日期{{ item.createTime }}
  40. </p>
  41. </div>
  42. <div>
  43. <p :class="item.isValid?'yx':'gq'">
  44. {{ item.isValid?'有效':'过期' }}
  45. </p>
  46. </div>
  47. <div>查看详情</div>
  48. </li>
  49. </ul>
  50. <div class="paginationo-box">
  51. <van-pagination v-model="search.pageNum" :total-items="total" :show-page-size="10" @change="handleCurrentChange">
  52. <template #prev-text>
  53. <van-icon name="arrow-left" />
  54. </template>
  55. <template #next-text>
  56. <van-icon name="arrow" />
  57. </template>
  58. <template #page="{ text }">{{ text }}</template>
  59. </van-pagination>
  60. </div>
  61. </div>
  62. <div class="case-content-app">
  63. <ul class="list-table">
  64. <li v-for="(item,index) in noticeList" :key="index" @click="detail(item)">
  65. <div>
  66. <p class="date-circle">
  67. {{ item.createDate }}
  68. </p>
  69. </div>
  70. <div>
  71. <p style="font-weight: 600;color: #000;font-size: 0.8rem;">
  72. {{ item.name }}
  73. </p>
  74. <p style="font-size: 0.6rem">
  75. {{ item.company }}
  76. </p>
  77. </div>
  78. </li>
  79. </ul>
  80. <div class="paginationo-box">
  81. <van-pagination v-model="search.pageNum" :total-items="total" :show-page-size="10" @change="handleCurrentChange">
  82. <template #prev-text>
  83. <van-icon name="arrow-left" />
  84. </template>
  85. <template #next-text>
  86. <van-icon name="arrow" />
  87. </template>
  88. <template #page="{ text }">{{ text }}</template>
  89. </van-pagination>
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. </template>
  98. <script>
  99. import { getRecruit } from '@/service/api_service'
  100. import Base from '@/views/base/base'
  101. import BaseData from '@/views/base/baseData'
  102. export default {
  103. mixins: [Base, BaseData],
  104. data() {
  105. return {
  106. active: 1,
  107. total: 0,
  108. currentPage: 1,
  109. noticeList: [
  110. // {
  111. // name:'JAVA开发工程师',
  112. // eventIndex:1,
  113. // num:12,
  114. // company:'小艾软件',
  115. // createTime:'2012-12-12',
  116. // },
  117. ],
  118. search: {
  119. pageSize: 10,
  120. pageNum: 1,
  121. state: '1'
  122. }
  123. }
  124. },
  125. mounted() {
  126. document.documentElement.scrollTop = document.body.scrollTop = 0 // 回到顶部
  127. this.initBiz().then((res) => {
  128. this.getData()
  129. })
  130. if (window.history && window.history.pushState) {
  131. // 向历史记录中插入了当前页
  132. history.pushState(null, null, document.URL)
  133. window.addEventListener('popstate', this.goBack, false)
  134. }
  135. },
  136. destroyed() {
  137. window.removeEventListener('popstate', this.goBack, false)
  138. },
  139. methods: {
  140. goBack() {
  141. // console.log("点击了浏览器的返回按钮");
  142. // sessionStorage.clear()
  143. // window.history.back()
  144. // history.pushState(null, null, document.URL)
  145. this.$router.push({ path: '/' })
  146. },
  147. handleCurrentChange: function(val) {
  148. this.search.pageNum = val
  149. this.getData()
  150. },
  151. getData() {
  152. const _this = this
  153. getRecruit(_this.search).then((res) => {
  154. const dayjs = require('dayjs')
  155. if (res.rows) {
  156. this.total = res.total
  157. this.noticeList = []
  158. res.rows.forEach((item) => {
  159. const i = {
  160. name: item.position,
  161. eventIndex: 3,
  162. num: item.peopleNumber,
  163. company: _this.BizMap[item.enterpriseId],
  164. createTime: item.createdAt,
  165. createDate: item.createdAt.substring(5),
  166. workRequire: item.workRequire,
  167. recruitRecruit: item.recruitRecruit,
  168. peopleNumber: item.peopleNumber
  169. }
  170. i.isValid = dayjs(new Date()).isBefore(dayjs(item.validityDate))
  171. this.noticeList.push(i)
  172. })
  173. }
  174. })
  175. },
  176. detail(index) {
  177. this.$router.push({ name: 'jobsDetail', params: index })
  178. },
  179. join() {
  180. this.$router.push({ path: '/jobs/join' })
  181. }
  182. }
  183. }
  184. </script>
  185. <style scoped>
  186. .banner img{
  187. width: 100% !important;
  188. }
  189. @media screen and (min-width: 1000px){
  190. .bread{
  191. background: #fff;
  192. }
  193. .bread div{
  194. width: 1200px;
  195. margin: 0 auto;
  196. text-align: left;
  197. padding: 0.8rem 0;
  198. font-size: 1rem;
  199. }
  200. .smart-title{
  201. margin-top:3rem;
  202. }
  203. .smart-device{
  204. width: 1200px;
  205. margin: 0 auto;
  206. text-align: left;
  207. font-size: 1rem;
  208. position: relative;
  209. }
  210. .smart-title i{
  211. font-style: normal;
  212. display: inline-block;
  213. border: 1px solid #996eee;
  214. color: #996eee;
  215. padding: 0rem 0.8rem;
  216. font-weight: 400;
  217. position: absolute;
  218. right: 0;
  219. top: 1rem;
  220. }
  221. .smart-device span span{
  222. font-size: 2rem;
  223. display: inline-block;
  224. position: relative;
  225. padding-right: 1rem;
  226. margin-right: 1rem;
  227. font-weight: 900;
  228. }
  229. .smart-device span span:after{
  230. content: '';
  231. width: 1px;
  232. height: 15px;
  233. background: #666;
  234. position: absolute;
  235. right: 0;
  236. bottom: 7px;
  237. }
  238. .device-title img{
  239. width: 80%;
  240. }
  241. .nav-list{
  242. display: flex;
  243. justify-content: center;
  244. flex-wrap: nowrap;
  245. margin: 2rem auto;
  246. width: 50%;
  247. }
  248. .nav-list li{
  249. min-width: 33.33%;
  250. max-width: 33.33%;
  251. text-align: center;
  252. color: #666;
  253. font-size: 0.8rem;
  254. cursor: pointer;
  255. }
  256. .myLi:hover{
  257. background: rgba(75, 175, 227, 0.5) !important;
  258. color: white !important;
  259. }
  260. .nav-list li span{
  261. border-bottom: 2px solid #f0f0f0;
  262. padding-bottom: 0.8rem;
  263. }
  264. .active span{
  265. display: inline-block;
  266. border-bottom: 2px solid #FF6A00!important;
  267. color: #333;
  268. }
  269. .list-table li{
  270. overflow: hidden;
  271. width: 100%;
  272. background: #fff;
  273. margin-bottom: 1rem;
  274. padding: 1rem 0;
  275. display: flex;
  276. }
  277. .list-table li>div{
  278. flex: 1;
  279. text-align: center;
  280. overflow: hidden;
  281. }
  282. .list-table li>div button{
  283. background: #fff;
  284. border: none;
  285. color: #333;
  286. }
  287. .smart-device-content{
  288. margin: 2rem 0;
  289. }
  290. /*.list-table li>div:nth-child(1){*/
  291. /* width: 20%;*/
  292. /* text-align: center;*/
  293. /*}*/
  294. /*.list-table li>div:nth-child(2){*/
  295. /* width: 60%;*/
  296. /*}*/
  297. /*.list-table li>div:nth-child(3){*/
  298. /* width: 20%;*/
  299. /* text-align: right;*/
  300. /*}*/
  301. /*.list-table li>div:nth-child(3) span{*/
  302. /* margin-right: 1rem;*/
  303. /*}*/
  304. .paginationo-box{
  305. width: 20%;
  306. margin: 0 auto;
  307. }
  308. .case-content-app{
  309. display: none;
  310. }
  311. }
  312. @media screen and (max-width: 1000px){
  313. .case-content{
  314. display: none;
  315. }
  316. .banner{
  317. display: none;
  318. }
  319. .bread{
  320. display: none;
  321. }
  322. .smart-title{
  323. margin-top:2rem;
  324. position: relative;
  325. }
  326. .smart-title span{
  327. content: '企业招聘'!important;
  328. }
  329. .smart-title span span{
  330. font-size: 0.8rem;
  331. }
  332. .smart-title span{
  333. font-size: 0.6rem;
  334. }
  335. .smart-title i{
  336. font-style: normal;
  337. border: 1px solid #996eee;
  338. color: #996eee;
  339. padding: 0;
  340. font-weight: 400;
  341. right: 0;
  342. top: 0;
  343. width: 5rem;
  344. margin: 0.4rem auto 0 auto;
  345. position: absolute;
  346. }
  347. .smart-device{
  348. width: 90%;
  349. margin: 0 auto;
  350. text-align: left;
  351. font-size: 1rem;
  352. overflow: hidden;
  353. }
  354. .smart-device span span{
  355. font-size: 1.5rem;
  356. display: inline-block;
  357. position: relative;
  358. padding-right: 1rem;
  359. margin-right: 1rem;
  360. font-weight: 900;
  361. }
  362. .smart-device span span:after{
  363. content: '';
  364. width: 1px;
  365. height: 15px;
  366. background: #666;
  367. position: absolute;
  368. right: 0;
  369. bottom: 7px;
  370. }
  371. .device-title img{
  372. width: 100%;
  373. }
  374. .smart-device-content{
  375. margin: 3rem 0;
  376. }
  377. .nav-list{
  378. display: flex;
  379. justify-content: center;
  380. flex-wrap: nowrap;
  381. margin: 2rem;
  382. }
  383. .nav-list li{
  384. min-width: 33.33%;
  385. max-width: 33.33%;
  386. text-align: center;
  387. color: #666;
  388. font-size: 0.8rem;
  389. cursor: pointer;
  390. }
  391. .nav-list li span{
  392. border-bottom: 2px solid #f0f0f0;
  393. padding-bottom: 0.8rem;
  394. }
  395. .active span{
  396. display: inline-block;
  397. border-bottom: 2px solid #FF6A00!important;
  398. color: #333;
  399. font-weight:800!important;
  400. }
  401. .list-table li{
  402. overflow: hidden;
  403. width: 100%;
  404. background: #fff;
  405. margin-bottom: 1rem;
  406. padding: 1rem 0;
  407. position: relative;
  408. }
  409. .list-table li>div{
  410. float: left;
  411. }
  412. .list-table li>div:nth-child(1){
  413. width: 20%;
  414. }
  415. .list-table li>div:nth-child(2){
  416. width: 80%;
  417. }
  418. .list-table li>div:nth-child(2) p{
  419. margin-top: 6px;
  420. }
  421. .list-table li>div p{
  422. width: 90%;
  423. margin: 0 auto;
  424. }
  425. .list-table li:after{
  426. content: '';
  427. width: 0.6rem;
  428. height: 0.6rem;
  429. border-right: 4px solid #666;
  430. border-top: 4px solid #666;
  431. transform:rotate(45deg);
  432. position: absolute;
  433. right: 1rem;
  434. top: 1.5rem;
  435. }
  436. .date-circle{
  437. background: #996eee;
  438. height: 2.8rem;
  439. border-radius:2rem;
  440. width: 60% !important;
  441. margin: 0 auto;
  442. font-size: 0.8rem;
  443. text-align: center;
  444. line-height: 2.8rem;
  445. color: #fff;
  446. }
  447. }
  448. .list-table{
  449. width: 100%;
  450. }
  451. .list-table p{
  452. white-space:nowrap;
  453. overflow: hidden;
  454. }
  455. .join-policy h3{
  456. margin: 1rem 0;
  457. }
  458. .join-policy p{
  459. line-height: 2rem;
  460. }
  461. .paginationo-box /deep/ .van-pagination__item--active{
  462. background: rgba(75, 175, 227, 1)!important;
  463. color: #fff!important;
  464. }
  465. .paginationo-box /deep/ .van-pagination__item{
  466. color: #333;
  467. }
  468. .yx{
  469. color: #229f59;
  470. }
  471. .gq{
  472. color: orangered;
  473. }
  474. </style>