123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479 |
- <template>
- <div style="background: #f0f0f0;padding-bottom:50px">
- <div class="banner">
- <img src="~@/assets/images/yzrc.jpg" alt="">
- </div>
- <div class="bread">
- <div>
- <span>当前位置:首页-<span style="color: rgba(75, 175, 227, 1)">优质人才</span></span>
- </div>
- </div>
- <div class="smart-device">
- <div class="smart-title">
- <span><span>企业招聘</span>JOBS</span>
- <!-- <i @click="join()">人才入驻</i>-->
- </div>
- <div class="smart-device-content">
- <div class="list-content">
- <div class="case-list">
- <div class="case-content">
- <ul class="list-table">
- <li v-for="(item,index) in noticeList" :key="index" class="myLi" @click="detail(item)">
- <div>
- <p>
- {{ item.name }}
- </p>
- </div>
- <div>
- <p>
- {{ item.num }}名
- </p>
- </div>
- <div>
- <p>
- {{ item.company }}
- </p>
- </div>
- <div>
- <p>
- 发布日期{{ item.createTime }}
- </p>
- </div>
- <div>
- <p :class="item.isValid?'yx':'gq'">
- {{ item.isValid?'有效':'过期' }}
- </p>
- </div>
- <div>查看详情</div>
- </li>
- </ul>
- <div class="paginationo-box">
- <van-pagination v-model="search.pageNum" :total-items="total" :show-page-size="10" @change="handleCurrentChange">
- <template #prev-text>
- <van-icon name="arrow-left" />
- </template>
- <template #next-text>
- <van-icon name="arrow" />
- </template>
- <template #page="{ text }">{{ text }}</template>
- </van-pagination>
- </div>
- </div>
- <div class="case-content-app">
- <ul class="list-table">
- <li v-for="(item,index) in noticeList" :key="index" @click="detail(item)">
- <div>
- <p class="date-circle">
- {{ item.createDate }}
- </p>
- </div>
- <div>
- <p style="font-weight: 600;color: #000;font-size: 0.8rem;">
- {{ item.name }}
- </p>
- <p style="font-size: 0.6rem">
- {{ item.company }}
- </p>
- </div>
- </li>
- </ul>
- <div class="paginationo-box">
- <van-pagination v-model="search.pageNum" :total-items="total" :show-page-size="10" @change="handleCurrentChange">
- <template #prev-text>
- <van-icon name="arrow-left" />
- </template>
- <template #next-text>
- <van-icon name="arrow" />
- </template>
- <template #page="{ text }">{{ text }}</template>
- </van-pagination>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { getRecruit } from '@/service/api_service'
- import Base from '@/views/base/base'
- import BaseData from '@/views/base/baseData'
- export default {
- mixins: [Base, BaseData],
- data() {
- return {
- active: 1,
- total: 0,
- currentPage: 1,
- noticeList: [
- // {
- // name:'JAVA开发工程师',
- // eventIndex:1,
- // num:12,
- // company:'小艾软件',
- // createTime:'2012-12-12',
- // },
- ],
- search: {
- pageSize: 10,
- pageNum: 1,
- state: '1'
- }
- }
- },
- mounted() {
- document.documentElement.scrollTop = document.body.scrollTop = 0 // 回到顶部
- this.initBiz().then((res) => {
- this.getData()
- })
- if (window.history && window.history.pushState) {
- // 向历史记录中插入了当前页
- history.pushState(null, null, document.URL)
- window.addEventListener('popstate', this.goBack, false)
- }
- },
- destroyed() {
- window.removeEventListener('popstate', this.goBack, false)
- },
- methods: {
- goBack() {
- // console.log("点击了浏览器的返回按钮");
- // sessionStorage.clear()
- // window.history.back()
- // history.pushState(null, null, document.URL)
- this.$router.push({ path: '/' })
- },
- handleCurrentChange: function(val) {
- this.search.pageNum = val
- this.getData()
- },
- getData() {
- const _this = this
- getRecruit(_this.search).then((res) => {
- const dayjs = require('dayjs')
- if (res.rows) {
- this.total = res.total
- this.noticeList = []
- res.rows.forEach((item) => {
- const i = {
- name: item.position,
- eventIndex: 3,
- num: item.peopleNumber,
- company: _this.BizMap[item.enterpriseId],
- createTime: item.createdAt,
- createDate: item.createdAt.substring(5),
- workRequire: item.workRequire,
- recruitRecruit: item.recruitRecruit,
- peopleNumber: item.peopleNumber
- }
- i.isValid = dayjs(new Date()).isBefore(dayjs(item.validityDate))
- this.noticeList.push(i)
- })
- }
- })
- },
- detail(index) {
- this.$router.push({ name: 'jobsDetail', params: index })
- },
- join() {
- this.$router.push({ path: '/jobs/join' })
- }
- }
- }
- </script>
- <style scoped>
- .banner img{
- width: 100% !important;
- }
- @media screen and (min-width: 1000px){
- .bread{
- background: #fff;
- }
- .bread div{
- width: 1200px;
- margin: 0 auto;
- text-align: left;
- padding: 0.8rem 0;
- font-size: 1rem;
- }
- .smart-title{
- margin-top:3rem;
- }
- .smart-device{
- width: 1200px;
- margin: 0 auto;
- text-align: left;
- font-size: 1rem;
- position: relative;
- }
- .smart-title i{
- font-style: normal;
- display: inline-block;
- border: 1px solid #996eee;
- color: #996eee;
- padding: 0rem 0.8rem;
- font-weight: 400;
- position: absolute;
- right: 0;
- top: 1rem;
- }
- .smart-device span span{
- font-size: 2rem;
- display: inline-block;
- position: relative;
- padding-right: 1rem;
- margin-right: 1rem;
- font-weight: 900;
- }
- .smart-device span span:after{
- content: '';
- width: 1px;
- height: 15px;
- background: #666;
- position: absolute;
- right: 0;
- bottom: 7px;
- }
- .device-title img{
- width: 80%;
- }
- .nav-list{
- display: flex;
- justify-content: center;
- flex-wrap: nowrap;
- margin: 2rem auto;
- width: 50%;
- }
- .nav-list li{
- min-width: 33.33%;
- max-width: 33.33%;
- text-align: center;
- color: #666;
- font-size: 0.8rem;
- cursor: pointer;
- }
- .myLi:hover{
- background: rgba(75, 175, 227, 0.5) !important;
- color: white !important;
- }
- .nav-list li span{
- border-bottom: 2px solid #f0f0f0;
- padding-bottom: 0.8rem;
- }
- .active span{
- display: inline-block;
- border-bottom: 2px solid #FF6A00!important;
- color: #333;
- }
- .list-table li{
- overflow: hidden;
- width: 100%;
- background: #fff;
- margin-bottom: 1rem;
- padding: 1rem 0;
- display: flex;
- }
- .list-table li>div{
- flex: 1;
- text-align: center;
- overflow: hidden;
- }
- .list-table li>div button{
- background: #fff;
- border: none;
- color: #333;
- }
- .smart-device-content{
- margin: 2rem 0;
- }
- /*.list-table li>div:nth-child(1){*/
- /* width: 20%;*/
- /* text-align: center;*/
- /*}*/
- /*.list-table li>div:nth-child(2){*/
- /* width: 60%;*/
- /*}*/
- /*.list-table li>div:nth-child(3){*/
- /* width: 20%;*/
- /* text-align: right;*/
- /*}*/
- /*.list-table li>div:nth-child(3) span{*/
- /* margin-right: 1rem;*/
- /*}*/
- .paginationo-box{
- width: 20%;
- margin: 0 auto;
- }
- .case-content-app{
- display: none;
- }
- }
- @media screen and (max-width: 1000px){
- .case-content{
- display: none;
- }
- .banner{
- display: none;
- }
- .bread{
- display: none;
- }
- .smart-title{
- margin-top:2rem;
- position: relative;
- }
- .smart-title span{
- content: '企业招聘'!important;
- }
- .smart-title span span{
- font-size: 0.8rem;
- }
- .smart-title span{
- font-size: 0.6rem;
- }
- .smart-title i{
- font-style: normal;
- border: 1px solid #996eee;
- color: #996eee;
- padding: 0;
- font-weight: 400;
- right: 0;
- top: 0;
- width: 5rem;
- margin: 0.4rem auto 0 auto;
- position: absolute;
- }
- .smart-device{
- width: 90%;
- margin: 0 auto;
- text-align: left;
- font-size: 1rem;
- overflow: hidden;
- }
- .smart-device span span{
- font-size: 1.5rem;
- display: inline-block;
- position: relative;
- padding-right: 1rem;
- margin-right: 1rem;
- font-weight: 900;
- }
- .smart-device span span:after{
- content: '';
- width: 1px;
- height: 15px;
- background: #666;
- position: absolute;
- right: 0;
- bottom: 7px;
- }
- .device-title img{
- width: 100%;
- }
- .smart-device-content{
- margin: 3rem 0;
- }
- .nav-list{
- display: flex;
- justify-content: center;
- flex-wrap: nowrap;
- margin: 2rem;
- }
- .nav-list li{
- min-width: 33.33%;
- max-width: 33.33%;
- text-align: center;
- color: #666;
- font-size: 0.8rem;
- cursor: pointer;
- }
- .nav-list li span{
- border-bottom: 2px solid #f0f0f0;
- padding-bottom: 0.8rem;
- }
- .active span{
- display: inline-block;
- border-bottom: 2px solid #FF6A00!important;
- color: #333;
- font-weight:800!important;
- }
- .list-table li{
- overflow: hidden;
- width: 100%;
- background: #fff;
- margin-bottom: 1rem;
- padding: 1rem 0;
- position: relative;
- }
- .list-table li>div{
- float: left;
- }
- .list-table li>div:nth-child(1){
- width: 20%;
- }
- .list-table li>div:nth-child(2){
- width: 80%;
- }
- .list-table li>div:nth-child(2) p{
- margin-top: 6px;
- }
- .list-table li>div p{
- width: 90%;
- margin: 0 auto;
- }
- .list-table li:after{
- content: '';
- width: 0.6rem;
- height: 0.6rem;
- border-right: 4px solid #666;
- border-top: 4px solid #666;
- transform:rotate(45deg);
- position: absolute;
- right: 1rem;
- top: 1.5rem;
- }
- .date-circle{
- background: #996eee;
- height: 2.8rem;
- border-radius:2rem;
- width: 60% !important;
- margin: 0 auto;
- font-size: 0.8rem;
- text-align: center;
- line-height: 2.8rem;
- color: #fff;
- }
- }
- .list-table{
- width: 100%;
- }
- .list-table p{
- white-space:nowrap;
- overflow: hidden;
- }
- .join-policy h3{
- margin: 1rem 0;
- }
- .join-policy p{
- line-height: 2rem;
- }
- .paginationo-box /deep/ .van-pagination__item--active{
- background: rgba(75, 175, 227, 1)!important;
- color: #fff!important;
- }
- .paginationo-box /deep/ .van-pagination__item{
- color: #333;
- }
- .yx{
- color: #229f59;
- }
- .gq{
- color: orangered;
- }
- </style>
|