|
|
<template>
|
|
|
<div class="joblist-container">
|
|
|
<!-- <div class="searchbox">
|
|
|
<div class="w">
|
|
|
<span></span>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
<!-- 录单弹出框 -->
|
|
|
<a-drawer
|
|
|
title="报名"
|
|
|
placement="right"
|
|
|
:closable="true"
|
|
|
:visible="visible"
|
|
|
labelAlign="right"
|
|
|
width="480"
|
|
|
@close="onClose"
|
|
|
>
|
|
|
<recordbill :visible.sync="visible" :firminfo="apply"></recordbill>
|
|
|
</a-drawer>
|
|
|
<!-- <a-modal
|
|
|
title="报名"
|
|
|
:visible="visible"
|
|
|
class="modal"
|
|
|
:confirm-loading="confirmLoading"
|
|
|
@ok="handleOk"
|
|
|
@cancel="handleCancel"
|
|
|
:maskClosable="false"
|
|
|
okText="提交"
|
|
|
cancelText="取消"
|
|
|
:destroyOnClose="true"
|
|
|
>
|
|
|
</a-modal> -->
|
|
|
<!-- 筛选导航 -->
|
|
|
<div class="navigation" id="navigation">
|
|
|
<div class="w">
|
|
|
<!-- 特色筛选的列表盒子 -->
|
|
|
<div v-if="isspecialboxshow" class="specialbox" @click.stop="">
|
|
|
<div class="w">
|
|
|
<ul>
|
|
|
<li
|
|
|
v-for="(item, index) in specialList"
|
|
|
:key="index"
|
|
|
@click.stop="specialclick(index, item)"
|
|
|
:class="{
|
|
|
'special-active': specialactive.indexOf(item.name) > -1,
|
|
|
}"
|
|
|
>
|
|
|
{{ item.name }}
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<ul class="filterbox">
|
|
|
<li>
|
|
|
<i class="iconfont icon-dingwei"></i
|
|
|
><a-cascader
|
|
|
:options="cityoption"
|
|
|
change-on-select
|
|
|
@change="onChange"
|
|
|
placeholder="选择城市"
|
|
|
v-model="formvalue.district"
|
|
|
popupClassName="flitercity"
|
|
|
:getPopupContainer="
|
|
|
(triggerNode) => {
|
|
|
return triggerNode.parentNode || document.body;
|
|
|
}
|
|
|
"
|
|
|
id="city"
|
|
|
:popupStyle="{
|
|
|
transform: 'all .1s',
|
|
|
}"
|
|
|
><i slot="suffixIcon" class="iconfont icon-xiala"></i
|
|
|
></a-cascader>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a-cascader
|
|
|
:options="options.price"
|
|
|
placeholder="工价"
|
|
|
@change="onChange"
|
|
|
popupClassName="monthlypay"
|
|
|
:getPopupContainer="
|
|
|
(triggerNode) => {
|
|
|
return triggerNode.parentNode || document.body;
|
|
|
}
|
|
|
"
|
|
|
v-model="formvalue.monthlyPayStr"
|
|
|
id="price"
|
|
|
><i slot="suffixIcon" class="iconfont icon-xiala"></i
|
|
|
></a-cascader>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<a-cascader
|
|
|
:options="options.age"
|
|
|
placeholder="年龄"
|
|
|
@change="onChange"
|
|
|
popupClassName="agestr"
|
|
|
:getPopupContainer="
|
|
|
(triggerNode) => {
|
|
|
return triggerNode.parentNode || document.body;
|
|
|
}
|
|
|
"
|
|
|
v-model="formvalue.ageStr"
|
|
|
id="age"
|
|
|
><i slot="suffixIcon" class="iconfont icon-xiala"></i
|
|
|
></a-cascader>
|
|
|
</li>
|
|
|
<li class="special">
|
|
|
<div
|
|
|
@click.stop="isspecialboxshowclick"
|
|
|
:style="isspecialboxshow ? 'color:#ff6a00' : ''"
|
|
|
>
|
|
|
<ul class="showspecial" v-if="specialactive.length !== 0">
|
|
|
<li
|
|
|
v-for="(item, index) in specialactive"
|
|
|
:key="index"
|
|
|
@click.stop
|
|
|
>
|
|
|
{{ item
|
|
|
}}<i
|
|
|
class="iconfont icon-guanbi"
|
|
|
@click.stop="delmark(index)"
|
|
|
></i>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<span v-if="specialactive.length > 3">...</span>
|
|
|
<span
|
|
|
:style="specialactive.length != 0 ? 'color:#ff6a00' : ''"
|
|
|
v-if="specialactive.length === 0"
|
|
|
>特色</span
|
|
|
><i
|
|
|
class="iconfont icon-xiala"
|
|
|
:class="isspecialboxshow ? 'turn' : ''"
|
|
|
:style="isspecialboxshow ? 'color:#ff6a00' : ''"
|
|
|
></i>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="claerfilter">
|
|
|
<a
|
|
|
@click="claerfilter"
|
|
|
href="javascript:;"
|
|
|
v-if="
|
|
|
formvalue.district.length !== 0 ||
|
|
|
formvalue.monthlyPayStr.length !== 0 ||
|
|
|
formvalue.ageStr.length !== 0 ||
|
|
|
formvalue.jobSpecialLabelIds.length !== 0
|
|
|
"
|
|
|
>清空筛选</a
|
|
|
>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<span>
|
|
|
<a-input
|
|
|
placeholder="搜索企业/公司"
|
|
|
@keyup.enter="onSearch"
|
|
|
@input="resetsearch"
|
|
|
v-model="searchvalue"
|
|
|
class="searchinput"
|
|
|
><i slot="prefix" class="iconfont icon-sousuo"></i>
|
|
|
<button slot="suffix" @click="onSearch">搜索</button>
|
|
|
</a-input>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 面包屑 -->
|
|
|
<!-- <a-breadcrumb class="w">
|
|
|
<a-breadcrumb-item href="">
|
|
|
<router-link to="/main"><a-icon type="home" /></router-link>
|
|
|
</a-breadcrumb-item>
|
|
|
<a-breadcrumb-item href="">
|
|
|
<span>一手职位</span>
|
|
|
</a-breadcrumb-item>
|
|
|
</a-breadcrumb> -->
|
|
|
<!-- 主体部分 -->
|
|
|
<div class="maincontent w">
|
|
|
<div class="maincontentleft">
|
|
|
<div style="text-align: center">
|
|
|
<a-spin tip="加载中..." :spinning="isspinning"></a-spin>
|
|
|
</div>
|
|
|
<!-- <div
|
|
|
class="nodata"
|
|
|
v-if="jobMainList.length === 0 && isspinning === false"
|
|
|
> -->
|
|
|
<template v-if="jobMainList.length === 0 && isspinning === false">
|
|
|
<a-empty class="nodata" description="暂无符合条件的岗位" />
|
|
|
</template>
|
|
|
<!-- </div> -->
|
|
|
<div v-if="!isspinning">
|
|
|
<div class="subset" v-for="(item, index) in jobMainList" :key="index">
|
|
|
<div class="subsetleft">
|
|
|
<router-link
|
|
|
target="_blank"
|
|
|
:to="'/detail/' + item.id"
|
|
|
rel="opener"
|
|
|
>
|
|
|
<div class="imgbox" @click="totop">
|
|
|
<img v-if="item.logo.length !== 0" :src="item.logo" />
|
|
|
<img
|
|
|
v-else
|
|
|
src="../../../static/img/nopicture.png"
|
|
|
style="height: 169px; width: "
|
|
|
/>
|
|
|
</div>
|
|
|
</router-link>
|
|
|
<div class="jobinfobox">
|
|
|
<router-link
|
|
|
target="_blank"
|
|
|
:to="'/detail/' + item.id"
|
|
|
rel="opener"
|
|
|
>
|
|
|
<div class="jobname" @click="totop">{{ item.jobName }}</div>
|
|
|
</router-link>
|
|
|
<div class="jobinfo">
|
|
|
<span>{{ item.district }}</span>
|
|
|
<span>{{ item.gender }}</span>
|
|
|
<span>{{ item.age }}</span>
|
|
|
</div>
|
|
|
<div class="jobtag">
|
|
|
<!-- <span>返费</span> -->
|
|
|
<span
|
|
|
v-for="(item1, index) in item.jobSpecialLabelNames"
|
|
|
:key="index"
|
|
|
>{{ item1 }}</span
|
|
|
>
|
|
|
</div>
|
|
|
<div class="jobpricemonth">
|
|
|
<!-- :style="{ opacity: item.minMonthlyPay ? '1' : '0' }" -->
|
|
|
|
|
|
<span>{{ item.minMonthlyPay ? item.minMonthlyPay : "" }}</span
|
|
|
>-<span>{{
|
|
|
item.maxMonthlyPay ? item.maxMonthlyPay : ""
|
|
|
}}</span
|
|
|
>元/月
|
|
|
</div>
|
|
|
<div class="jobpricehour">
|
|
|
<template v-if="item.hourlyPay"
|
|
|
><span>{{ item.hourlyPay }}</span
|
|
|
>元/小时</template
|
|
|
>
|
|
|
<template v-else-if="item.dayPay"
|
|
|
><span>{{ item.dayPay }}</span
|
|
|
>元/日</template
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="subsetright">
|
|
|
<div class="topbox">
|
|
|
<div>服务费</div>
|
|
|
<div>
|
|
|
<span
|
|
|
v-if="
|
|
|
item.returnFee &&
|
|
|
item.returnFee !== -1 &&
|
|
|
item.returnFee !== null
|
|
|
? true
|
|
|
: false
|
|
|
"
|
|
|
>{{ item.returnFee }}</span
|
|
|
><i v-else>--</i>{{ item.servetype }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bottombox1">
|
|
|
<router-link
|
|
|
:to="'/detail/' + item.id"
|
|
|
target="_blank"
|
|
|
rel="opener"
|
|
|
><button>更多</button></router-link
|
|
|
>
|
|
|
|
|
|
<button @click="torecord(item)">报名</button>
|
|
|
|
|
|
<!-- <button @click="showmodal(item)" @click="">报名</button> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="pagecontainer">
|
|
|
<a-pagination
|
|
|
:current="+formvalue.pageNum"
|
|
|
:default-current="1"
|
|
|
:defaultPageSize="8"
|
|
|
:total="formvalue.total"
|
|
|
@change="pageChange"
|
|
|
/>
|
|
|
<div class="ant-pagination-options-quick-jumper">
|
|
|
跳至<input
|
|
|
ref="pageinput"
|
|
|
type="text"
|
|
|
@keyup.enter="inputpageChange"
|
|
|
@blur="inputpageChange"
|
|
|
/>页
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="maincontentright">
|
|
|
<div class="dateinfo">
|
|
|
<h1 class="bottombox"><i>我的日历</i></h1>
|
|
|
<p
|
|
|
class="day"
|
|
|
:style="{
|
|
|
'font-size': '60px',
|
|
|
color: '#FF6A00',
|
|
|
'line-height': '80px',
|
|
|
'margin-top': '8px',
|
|
|
}"
|
|
|
>
|
|
|
{{ dateinfo.day }}
|
|
|
</p>
|
|
|
<p class="week" :style="{ 'font-size': '16px', color: '#FF6A00' }">
|
|
|
{{ dateinfo.week }}
|
|
|
</p>
|
|
|
<p class="date" :style="{ 'font-size': '16px', color: '#FF6A00' }">
|
|
|
{{ dateinfo.date }}
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="hotphone">
|
|
|
<h1 class="bottombox"><i>服务热线</i></h1>
|
|
|
<p>0371-6666 6666</p>
|
|
|
</div>
|
|
|
<div class="relationme">
|
|
|
<p class="bottombox"><i>一手单合作</i></p>
|
|
|
<button>发布一手单</button>
|
|
|
</div>
|
|
|
<recommend />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
// JobListApi,
|
|
|
getJobSpecialApi,
|
|
|
getProvinceApi,
|
|
|
// getCityApi,
|
|
|
} from "../../api/job";
|
|
|
import { moneyToFixed } from "../../utils/commonUtil";
|
|
|
import recommend from "@/components/FirstJob/components/recommend.vue";
|
|
|
import { nationlist } from "../../utils/datalist";
|
|
|
import recordbill from "@/components/FirstJob/components/recordbill.vue";
|
|
|
export default {
|
|
|
// 注入获取职位列表的方法
|
|
|
inject: ["getJobList", "reload"],
|
|
|
// 组件名称
|
|
|
name: "",
|
|
|
// 局部注册的组件
|
|
|
components: {
|
|
|
recommend,
|
|
|
recordbill,
|
|
|
},
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
props: {
|
|
|
isspecialboxshow: {
|
|
|
require: true,
|
|
|
},
|
|
|
formvalue: {
|
|
|
// type: Object,
|
|
|
require: true,
|
|
|
},
|
|
|
jobMainList: {
|
|
|
require: true,
|
|
|
},
|
|
|
isspinning: {
|
|
|
require: true,
|
|
|
}, // 加载中显示
|
|
|
},
|
|
|
// 组件状态值
|
|
|
data() {
|
|
|
return {
|
|
|
// jobMainList: [], // 职位列表
|
|
|
specialList: [], // 获取的特色列表
|
|
|
searchvalue: "",
|
|
|
specialactive: [], // 点中的特色标签索引
|
|
|
specialvalue: [], // 点中的特色标签
|
|
|
visible: false, // 录单模态框的展示
|
|
|
confirmLoading: false, // 录单提交的loading效果
|
|
|
cityoption: [], // 城市列表
|
|
|
newFormValue: [],
|
|
|
apply: "", // 报名企业id
|
|
|
proxyinfo: JSON.parse(sessionStorage.getItem("LOGIN_DATA")),
|
|
|
nationlist: nationlist,
|
|
|
|
|
|
dateinfo: {
|
|
|
day: "",
|
|
|
week: "",
|
|
|
date: "",
|
|
|
},
|
|
|
|
|
|
options: {
|
|
|
//
|
|
|
price: [
|
|
|
{
|
|
|
value: "3000-4000",
|
|
|
label: "3000-4000元",
|
|
|
uid: 1,
|
|
|
},
|
|
|
{
|
|
|
value: "4000-5000",
|
|
|
label: "4000-5000元",
|
|
|
uid: 1,
|
|
|
},
|
|
|
{
|
|
|
value: "5000-6000",
|
|
|
label: "5000-6000元",
|
|
|
uid: 1,
|
|
|
},
|
|
|
{
|
|
|
value: "6000-7000",
|
|
|
label: "6000-7000元",
|
|
|
uid: 1,
|
|
|
},
|
|
|
],
|
|
|
age: [
|
|
|
{
|
|
|
value: "16-45",
|
|
|
label: "16-45岁",
|
|
|
uid: 2,
|
|
|
},
|
|
|
{
|
|
|
value: "18-35",
|
|
|
label: "18-35岁",
|
|
|
uid: 2,
|
|
|
},
|
|
|
{
|
|
|
value: "45-58",
|
|
|
label: "45-58岁",
|
|
|
uid: 2,
|
|
|
},
|
|
|
{
|
|
|
value: "58",
|
|
|
label: "58岁以上",
|
|
|
uid: 2,
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
relationList: [],
|
|
|
};
|
|
|
},
|
|
|
// 计算属性
|
|
|
computed: {},
|
|
|
// 侦听器
|
|
|
watch: {
|
|
|
formvalue: {
|
|
|
handler(e) {
|
|
|
// console.log(e);
|
|
|
// 筛选列表数据处理
|
|
|
// if(e.city !== undefined){
|
|
|
if (e.district.length === 0) {
|
|
|
document.getElementById("city").style.width = 85 + "px";
|
|
|
} else {
|
|
|
const result = e.district.join("");
|
|
|
// console.log(result);
|
|
|
if (result.length > 6) {
|
|
|
document.getElementById("city").style.width =
|
|
|
(result.length + 3) * 14 + "px";
|
|
|
document.getElementById("city").style.maxWidth = "210px";
|
|
|
document.querySelector("#city").nextElementSibling.style.width = // 获取下一个兄弟元素s
|
|
|
(result.length + 3) * 14 + "px";
|
|
|
document.getElementById("city").nextElementSibling.style.maxWidth =
|
|
|
"210px";
|
|
|
} else if (result.length > 5) {
|
|
|
document.getElementById("city").style.width =
|
|
|
(result.length + 2.8) * 14 + "px";
|
|
|
document.querySelector("#city").nextElementSibling.style.width =
|
|
|
(result.length + 2.6) * 14 + "px";
|
|
|
} else if (result.length > 4) {
|
|
|
document.getElementById("city").style.width =
|
|
|
(result.length + 2.4) * 14 + "px";
|
|
|
document.querySelector("#city").nextElementSibling.style.width =
|
|
|
(result.length + 2.4) * 14 + "px";
|
|
|
} else {
|
|
|
document.getElementById("city").style.width =
|
|
|
(result.length + 1.5) * 14 + "px";
|
|
|
document.getElementById("city").style.minWidth = 72 + "px";
|
|
|
document.querySelector("#city").nextElementSibling.style.width =
|
|
|
(result.length + 1.5) * 14 + "px";
|
|
|
}
|
|
|
}
|
|
|
// }
|
|
|
// 工价的判断
|
|
|
if (e.monthlyPayStr.length === 0) {
|
|
|
document.getElementById("price").style.width = 60 + "px";
|
|
|
} else {
|
|
|
const result = e.monthlyPayStr.join("");
|
|
|
if (result.length >= 0) {
|
|
|
document.getElementById("price").style.width = "120px";
|
|
|
document.getElementById("price").nextElementSibling.style.width =
|
|
|
"130px";
|
|
|
// document.querySelector(".ant-cascader-picker-label").style.width =
|
|
|
// "150px";
|
|
|
}
|
|
|
}
|
|
|
// 年龄筛选长度的判断
|
|
|
if (e.ageStr.length === 0) {
|
|
|
document.getElementById("age").style.width = 60 + "px";
|
|
|
} else {
|
|
|
const result = e.ageStr.join("");
|
|
|
if (result.length >= 0) {
|
|
|
document.getElementById("age").style.width = "90px";
|
|
|
document.getElementById("age").nextElementSibling.style.width =
|
|
|
"90px";
|
|
|
// document.querySelector(".ant-cascader-picker-label").style.width =
|
|
|
// "150px";
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
deep: true,
|
|
|
},
|
|
|
},
|
|
|
// 组件
|
|
|
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
/**
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
*/
|
|
|
created() {
|
|
|
console.log(this.proxyinfo);
|
|
|
this.getJobList();
|
|
|
this.getJobSpecial();
|
|
|
this.getProvince();
|
|
|
this.getdateinfo();
|
|
|
},
|
|
|
/**
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
*/
|
|
|
mounted() {
|
|
|
// this.$nextTick(() => {
|
|
|
// console.log(this.isspecialboxshow);
|
|
|
// });
|
|
|
// document.querySelector(".ant-pagination-options-quick-jumper").innerHTML =
|
|
|
// "跳至<input type='text'>页";
|
|
|
console.log(this.formvalue);
|
|
|
window.addEventListener("scroll", this.windowScroll); //监听页面滚动
|
|
|
},
|
|
|
// 组件方法
|
|
|
methods: {
|
|
|
/**
|
|
|
* 处理后台返回的职位列表
|
|
|
*/
|
|
|
windowScroll() {
|
|
|
let scrollTop =
|
|
|
window.pageYOffset ||
|
|
|
document.documentElement.scrollTop ||
|
|
|
document.body.scrollTop;
|
|
|
// console.log(scrollTop); // 获取到页面滚动的值,
|
|
|
let navigation = document.getElementById("navigation");
|
|
|
let content = document.querySelector(".maincontent");
|
|
|
let filterbox = document.querySelector(".w");
|
|
|
console.log(filterbox);
|
|
|
// console.log(content);
|
|
|
// let left = ("100vw" - "1200px") / 2;
|
|
|
if (scrollTop >= 81) {
|
|
|
navigation.style.position = "fixed";
|
|
|
navigation.style.top = "0px";
|
|
|
navigation.style.boxShadow = "2px 2px 4px 0px rgba(0,0,0,0.05)";
|
|
|
// navigation.style.left = 0;
|
|
|
content.style.marginTop = "90px";
|
|
|
} else {
|
|
|
navigation.style.position = "relative";
|
|
|
navigation.style.right = "0";
|
|
|
content.style.marginTop = "16px";
|
|
|
navigation.style.boxShadow = "none";
|
|
|
}
|
|
|
},
|
|
|
// 处理筛选框的定位
|
|
|
// filterbox() {
|
|
|
// return () => {
|
|
|
// return document.getElementById("filterbox")[0];
|
|
|
// // return document.body;
|
|
|
// };
|
|
|
// },
|
|
|
//搜索企业名称
|
|
|
onSearch(e) {
|
|
|
console.log(e);
|
|
|
// if (typeof e === "string" || typeof e === "number") {
|
|
|
// if (e.length !== 0) {
|
|
|
// console.log("zifuchuan ");
|
|
|
// this.formvalue.aliasName = e;
|
|
|
// this.getJobList();
|
|
|
// }
|
|
|
// } else
|
|
|
this.formvalue.pageNum = 1;
|
|
|
if (e.target.value.trim() !== "") {
|
|
|
console.log("search");
|
|
|
this.formvalue.aliasName = e.target.value.trim();
|
|
|
this.getJobList();
|
|
|
} else if (this.searchvalue.trim() !== "") {
|
|
|
console.log("search1");
|
|
|
this.formvalue.aliasName = this.searchvalue;
|
|
|
this.getJobList();
|
|
|
}
|
|
|
|
|
|
// this.$router.push("/list").catch((err) => {
|
|
|
// console.log(err);
|
|
|
// });
|
|
|
},
|
|
|
// 获取职位特色
|
|
|
async getJobSpecial() {
|
|
|
try {
|
|
|
const { data } = await getJobSpecialApi();
|
|
|
console.log(data);
|
|
|
this.specialList = data.data;
|
|
|
} catch (error) {
|
|
|
console.log(error);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 获取省份列表
|
|
|
async getProvince() {
|
|
|
// const that = this;
|
|
|
try {
|
|
|
const { data } = await getProvinceApi();
|
|
|
console.log(data);
|
|
|
data.data.pop();
|
|
|
this.cityoption = data.data;
|
|
|
|
|
|
// console.log(this.cityoption);
|
|
|
// console.log(data);
|
|
|
} catch (error) {
|
|
|
console.log(error);
|
|
|
}
|
|
|
},
|
|
|
// 筛选职位
|
|
|
onChange(e, item) {
|
|
|
console.log(e);
|
|
|
console.log(item);
|
|
|
if (item) {
|
|
|
if (item.uid === 1) {
|
|
|
console.log(1);
|
|
|
this.formvalue.monthlyPayStr = item[0];
|
|
|
} else if (item.uid === 2) {
|
|
|
this.formvalue.ageStr = item[0];
|
|
|
} else if (item[0].id) {
|
|
|
console.log(e.join());
|
|
|
this.formvalue.district = e;
|
|
|
}
|
|
|
}
|
|
|
this.getJobList();
|
|
|
},
|
|
|
pageChange(e) {
|
|
|
console.log(e);
|
|
|
this.formvalue.pageNum = e;
|
|
|
this.$refs.pageinput.value = "";
|
|
|
this.getJobList();
|
|
|
},
|
|
|
inputpageChange(e) {
|
|
|
const pagenumcount = this.formvalue.total / this.formvalue.pageSize;
|
|
|
console.log(pagenumcount);
|
|
|
if (e.target.value) {
|
|
|
if (e.target.value > pagenumcount) {
|
|
|
this.formvalue.pageNum = Math.ceil(pagenumcount);
|
|
|
} else {
|
|
|
this.formvalue.pageNum = e.target.value;
|
|
|
}
|
|
|
} else {
|
|
|
this.formvalue.pageNum = 1;
|
|
|
}
|
|
|
this.getJobList();
|
|
|
console.log(e);
|
|
|
},
|
|
|
handleChange() {},
|
|
|
claerfilter() {
|
|
|
const { pageNum, pageSize, total } = this.formvalue;
|
|
|
// this.formvalue = { // 改变引用地址不会使vue侦听到数据的变化,
|
|
|
// district: [],
|
|
|
// monthlyPayStr: [],
|
|
|
// ageStr: [],
|
|
|
// jobSpecialLabelIds: [],
|
|
|
// pageNum,
|
|
|
// pageSize,
|
|
|
// total, //分页配置
|
|
|
// };
|
|
|
this.formvalue.district = [];
|
|
|
this.formvalue.monthlyPayStr = [];
|
|
|
this.formvalue.ageStr = [];
|
|
|
this.formvalue.jobSpecialLabelIds = [];
|
|
|
this.formvalue.pageNum = pageNum;
|
|
|
this.formvalue.pageSize = pageSize;
|
|
|
this.formvalue.total = total;
|
|
|
console.log(this.formvalue);
|
|
|
this.specialactive = [];
|
|
|
this.specialvalue = [];
|
|
|
this.getJobList();
|
|
|
},
|
|
|
specialclick(index, item) {
|
|
|
console.log(item);
|
|
|
console.log(index);
|
|
|
let arrIndex = this.specialactive.indexOf(item.name);
|
|
|
if (arrIndex > -1) {
|
|
|
this.specialactive.splice(arrIndex, 1);
|
|
|
this.specialvalue.splice(arrIndex, 1);
|
|
|
} else {
|
|
|
this.specialactive.push(item.name);
|
|
|
this.specialvalue.push(item.id);
|
|
|
}
|
|
|
this.formvalue.jobSpecialLabelIds = this.specialvalue;
|
|
|
// console.log(this.specialactive);
|
|
|
this.getJobList();
|
|
|
console.log(this.specialvalue);
|
|
|
console.log(this.formvalue);
|
|
|
// console.log(index);
|
|
|
},
|
|
|
isspecialboxshowclick() {
|
|
|
this.$emit("update:isspecialboxshow", !this.isspecialboxshow);
|
|
|
},
|
|
|
totop() {
|
|
|
// console.log(window);
|
|
|
document.body.scrollTop = 0;
|
|
|
document.documentElement.scrollTop = 0;
|
|
|
// window.body.scrollY = 0;
|
|
|
},
|
|
|
moneyToFixed(value) {
|
|
|
return moneyToFixed(value);
|
|
|
},
|
|
|
// 重置搜索结果
|
|
|
resetsearch(e) {
|
|
|
// console.log(e);
|
|
|
if (e.target.value.length === 0) {
|
|
|
this.formvalue.aliasName = "";
|
|
|
|
|
|
this.getJobList();
|
|
|
}
|
|
|
// this.$router.push("/list").catch((err) => {
|
|
|
// console.log(err);
|
|
|
// });
|
|
|
},
|
|
|
// 录单弹出层的关闭
|
|
|
handleCancel() {
|
|
|
this.visible = false;
|
|
|
this.form = {
|
|
|
// 录单数据
|
|
|
name: "",
|
|
|
peoplecard: "",
|
|
|
gender: "",
|
|
|
nation: "",
|
|
|
location: "",
|
|
|
firm: "",
|
|
|
post: "",
|
|
|
pattern: "",
|
|
|
policy: "",
|
|
|
proxy: "",
|
|
|
facedate: "",
|
|
|
};
|
|
|
},
|
|
|
// 录单提交按钮的回调
|
|
|
|
|
|
// 弹出录单模态框
|
|
|
showmodal(item) {
|
|
|
this.visible = true;
|
|
|
this.apply = item;
|
|
|
console.log(this.apply);
|
|
|
// console.log(id);
|
|
|
},
|
|
|
onClose() {
|
|
|
console.log(123);
|
|
|
this.visible = false;
|
|
|
this.form = {
|
|
|
// 录单数据
|
|
|
name: "",
|
|
|
peoplecard: "",
|
|
|
gender: "", // 性别
|
|
|
nation: "", // 民族
|
|
|
location: "", // 家庭住址
|
|
|
firm: "", // 公司名
|
|
|
post: "", // 岗位
|
|
|
pattern: "", // 模式
|
|
|
policy: "", // 代理政策
|
|
|
proxy: "", // 代理
|
|
|
facedate: "", // 面试时间
|
|
|
};
|
|
|
},
|
|
|
// 获取日期信息
|
|
|
getdateinfo() {
|
|
|
const date = new Date();
|
|
|
// console.log(date);
|
|
|
// console.log(date.getDate());
|
|
|
// console.log(date.getDay());
|
|
|
// console.log(date.getFullYear());
|
|
|
// console.log(date.getMonth());
|
|
|
if (date.getDay() === 1) {
|
|
|
this.dateinfo.week = "星期一";
|
|
|
} else if (date.getDay() === 2) {
|
|
|
this.dateinfo.week = "星期二";
|
|
|
} else if (date.getDay() === 3) {
|
|
|
this.dateinfo.week = "星期三";
|
|
|
} else if (date.getDay() === 4) {
|
|
|
this.dateinfo.week = "星期四";
|
|
|
} else if (date.getDay() === 5) {
|
|
|
this.dateinfo.week = "星期五";
|
|
|
} else if (date.getDay() === 6) {
|
|
|
this.dateinfo.week = "星期六";
|
|
|
} else if (date.getDay() === 7) {
|
|
|
this.dateinfo.week = "星期日";
|
|
|
}
|
|
|
console.log(date.getDate());
|
|
|
console.log(date.getDate().length);
|
|
|
if (date.getDate().toString().length <= 1) {
|
|
|
this.dateinfo.day = "0" + date.getDate();
|
|
|
console.log(this.dateinfo.day);
|
|
|
} else {
|
|
|
this.dateinfo.day = date.getDate();
|
|
|
console.log(this.dateinfo.day);
|
|
|
}
|
|
|
this.dateinfo.date = date.getFullYear() + "." + (date.getMonth() + 1);
|
|
|
},
|
|
|
delmark(index) {
|
|
|
console.log(index);
|
|
|
this.specialactive.splice(index, 1);
|
|
|
this.specialvalue.splice(index, 1);
|
|
|
this.getJobList();
|
|
|
},
|
|
|
torecord(item) {
|
|
|
// 跳转到路由新页面的方法
|
|
|
console.log(item);
|
|
|
// let userinfo = JSON.stringify(item);
|
|
|
|
|
|
this.$router.push({ name: "recordbill", params: item });
|
|
|
sessionStorage.setItem("CURRENT_FIRM", JSON.stringify(item));
|
|
|
},
|
|
|
// todetail(item) {
|
|
|
// const routeURL = this.$router.resolve({
|
|
|
// name: "Detail",
|
|
|
// query: item.id,
|
|
|
// });
|
|
|
// window.open(routeURL.href, "_blank");
|
|
|
// console.log(item);
|
|
|
// },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
.dropdown {
|
|
|
display: inline-block;
|
|
|
width: 100px;
|
|
|
height: 32px;
|
|
|
line-height: 30px;
|
|
|
font-size: 16px;
|
|
|
// border: 1px solid rgba(77, 87, 94, 0.3);
|
|
|
border-radius: 4px;
|
|
|
margin-left: 16px;
|
|
|
border: 1px solid #ff6a00;
|
|
|
background-color: #fff;
|
|
|
color: rgba(255, 106, 0, 1);
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
&:hover {
|
|
|
color: #fff;
|
|
|
|
|
|
background-color: rgba(255, 121, 26);
|
|
|
}
|
|
|
}
|
|
|
/deep/ .ant-drawer-content {
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
// 录单模态框样式
|
|
|
/deep/ .ant-drawer-wrapper-body {
|
|
|
// overflow: none;
|
|
|
// position: relative;
|
|
|
&::-webkit-scrollbar {
|
|
|
/*滚动条整体样式*/
|
|
|
width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
height: 4px;
|
|
|
}
|
|
|
|
|
|
.ant-drawer-header {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
background-color: #fff;
|
|
|
padding: 12px 24px;
|
|
|
z-index: 999;
|
|
|
.ant-drawer-close {
|
|
|
height: 48px;
|
|
|
width: 48px;
|
|
|
line-height: 48px;
|
|
|
}
|
|
|
}
|
|
|
.ant-drawer-body {
|
|
|
overflow-y: auto;
|
|
|
margin-top: 47px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/deep/ .ant-form {
|
|
|
// overflow: auto;
|
|
|
margin-bottom: 50px;
|
|
|
}
|
|
|
|
|
|
/deep/ .ant-form-item {
|
|
|
// margin-bottom: 0;
|
|
|
display: flex;
|
|
|
justify-content: start;
|
|
|
align-items: middle;
|
|
|
margin-top: -8px;
|
|
|
.ant-form-item-label {
|
|
|
line-height: 40px;
|
|
|
// font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.ant-input {
|
|
|
// width: 430px;
|
|
|
height: 40px;
|
|
|
// border: none;
|
|
|
border: 1px solid #dddddd;
|
|
|
box-shadow: none !important;
|
|
|
// background-color: #f6f6f6;
|
|
|
}
|
|
|
.ant-select-selection__rendered,
|
|
|
.ant-select-selection--single,
|
|
|
.ant-select {
|
|
|
height: 40px;
|
|
|
// border: none;
|
|
|
// border: 1px solid #dddddd;
|
|
|
line-height: 40px;
|
|
|
box-shadow: none !important;
|
|
|
border-color: #d9d9d9;
|
|
|
/deep/ .ant-form-item-children {
|
|
|
line-height: 40px;
|
|
|
.ant-radio-checked {
|
|
|
}
|
|
|
// display: flex !important;
|
|
|
}
|
|
|
// &:hover {
|
|
|
// border-color: #d9d9d9;
|
|
|
// }
|
|
|
// &:focus {
|
|
|
// border-color: #d9d9d9;
|
|
|
// }
|
|
|
// &:active {
|
|
|
// border-color: #d9d9d9;
|
|
|
// }
|
|
|
}
|
|
|
}
|
|
|
// /deep/ .ant-modal-footer {
|
|
|
// padding: 10px 24px;
|
|
|
// .ant-btn {
|
|
|
// box-shadow: none;
|
|
|
// &:hover {
|
|
|
// color: #ff6a00;
|
|
|
// border-color: #ff6a00;
|
|
|
// }
|
|
|
// }
|
|
|
// .ant-btn.ant-btn-primary {
|
|
|
// background-color: #ff6a00 !important;
|
|
|
// border: none;
|
|
|
// line-height: 32px;
|
|
|
// margin-left: 12px;
|
|
|
// color: #fff;
|
|
|
// box-shadow: none;
|
|
|
// &:hover {
|
|
|
// background-color: #ff8025 !important;
|
|
|
// }
|
|
|
// }
|
|
|
// }
|
|
|
/deep/ .ant-modal-header {
|
|
|
.ant-modal-title {
|
|
|
font-size: 20px;
|
|
|
// font-weight: normal;
|
|
|
}
|
|
|
}
|
|
|
/deep/ .ant-drawer-body {
|
|
|
overflow: auto;
|
|
|
padding: 20px 16px 8px 16px;
|
|
|
}
|
|
|
|
|
|
/deep/ .navigation {
|
|
|
// margin-top: -1px;
|
|
|
width: 100vw;
|
|
|
background-color: #fff;
|
|
|
border: 1px solid #f6f6f6;
|
|
|
height: 72px;
|
|
|
// margin-bottom: 10px;
|
|
|
// line-height: 100px;
|
|
|
|
|
|
position: relative;
|
|
|
z-index: 999;
|
|
|
.special-active {
|
|
|
color: rgb(254, 97, 0) !important;
|
|
|
background-color: rgba(255, 106, 0, 0.1) !important;
|
|
|
}
|
|
|
.ant-cascader-picker-focused {
|
|
|
input {
|
|
|
transition: all 0.3s;
|
|
|
}
|
|
|
input::placeholder {
|
|
|
color: rgb(255, 106, 0) !important;
|
|
|
}
|
|
|
i {
|
|
|
color: rgb(255, 106, 0) !important;
|
|
|
}
|
|
|
}
|
|
|
> .w {
|
|
|
height: 72px;
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
> span {
|
|
|
margin-top: 19px;
|
|
|
// margin-right: 285px;
|
|
|
i {
|
|
|
font-size: 18px;
|
|
|
margin-left: 4px;
|
|
|
color: #adadad;
|
|
|
}
|
|
|
.ant-input-affix-wrapper {
|
|
|
position: relative;
|
|
|
.ant-input-prefix {
|
|
|
position: absolute;
|
|
|
left: 8px;
|
|
|
top: 16px;
|
|
|
i {
|
|
|
color: #c9c9c9;
|
|
|
}
|
|
|
}
|
|
|
.ant-input-suffix {
|
|
|
right: 0 !important;
|
|
|
}
|
|
|
}
|
|
|
.ant-input {
|
|
|
width: 300px;
|
|
|
height: 32px;
|
|
|
text-indent: 10px;
|
|
|
background: #fff;
|
|
|
// border: 1px solid rgba(77, 87, 94, 0.3);
|
|
|
border-radius: 136px;
|
|
|
box-shadow: 0px 2px 4px 0px transparent;
|
|
|
font-size: 14px !important;
|
|
|
padding-right: 0;
|
|
|
border-color: #e9e9e9;
|
|
|
&::placeholder {
|
|
|
text-indent: 10px;
|
|
|
font-size: 14px !important;
|
|
|
}
|
|
|
&:hover {
|
|
|
border-color: #ff6a00;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
&:focus {
|
|
|
border-color: #ff6a00;
|
|
|
}
|
|
|
}
|
|
|
button {
|
|
|
width: 70px;
|
|
|
height: 32px;
|
|
|
color: white;
|
|
|
background: #ff6a00;
|
|
|
border-color: #ff6a00;
|
|
|
border: none;
|
|
|
border-radius: 16px;
|
|
|
font-size: 14px;
|
|
|
box-shadow: none;
|
|
|
cursor: pointer;
|
|
|
outline: none;
|
|
|
&:hover {
|
|
|
background-color: #ff842b;
|
|
|
}
|
|
|
// &:focus {
|
|
|
// border: none;
|
|
|
// }
|
|
|
}
|
|
|
}
|
|
|
.specialbox {
|
|
|
position: absolute;
|
|
|
border-bottom: 1px solid #f6f6f6;
|
|
|
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
|
|
|
// display: ;
|
|
|
transition: all 0.4s;
|
|
|
left: 0;
|
|
|
top: 71px;
|
|
|
width: 100vw;
|
|
|
background-color: #fff;
|
|
|
z-index: 999;
|
|
|
ul {
|
|
|
overflow: hidden;
|
|
|
padding: 20px 0 8px 0;
|
|
|
li {
|
|
|
padding: 4px 16px;
|
|
|
margin: 0px 24px 12px 0;
|
|
|
cursor: pointer;
|
|
|
float: left;
|
|
|
background: rgba(216, 216, 216, 0.3);
|
|
|
border-radius: 15px;
|
|
|
font-size: 14px;
|
|
|
color: #4d575e;
|
|
|
line-height: 22px;
|
|
|
&:hover {
|
|
|
color: rgb(254, 97, 0);
|
|
|
background-color: rgba(255, 106, 0, 0.1);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.filterbox {
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
min-width: 645px;
|
|
|
> li {
|
|
|
margin-top: 22px;
|
|
|
font-size: 14px;
|
|
|
color: #4d575e;
|
|
|
margin-right: 4px;
|
|
|
.ant-cascader-picker {
|
|
|
width: auto;
|
|
|
position: relative;
|
|
|
transform: translateY(-2px);
|
|
|
.anticon-close-circle {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.icon-xiala {
|
|
|
font-size: 12px;
|
|
|
transform: translateY(1px) scale(0.5);
|
|
|
}
|
|
|
.ant-cascader-input {
|
|
|
width: 60px;
|
|
|
// margin-top: -5px;
|
|
|
// max-width: 150px !important;
|
|
|
border: none;
|
|
|
padding: 0;
|
|
|
// margin-bottom: 6px;
|
|
|
box-shadow: none;
|
|
|
|
|
|
&::placeholder {
|
|
|
// width: auto;
|
|
|
// text-indent: 20px;
|
|
|
color: #4d575ecc;
|
|
|
line-height: 20px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
span {
|
|
|
width: 60px;
|
|
|
// max-width: 150px;
|
|
|
color: rgb(255, 106, 0) !important;
|
|
|
font-size: 14px;
|
|
|
padding: 0 20px 0 0;
|
|
|
text-align: left;
|
|
|
line-height: 22px !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
> li:first-child {
|
|
|
> i {
|
|
|
position: relative;
|
|
|
display: inline-block;
|
|
|
width: 12px;
|
|
|
height: 15px;
|
|
|
margin-right: 6px;
|
|
|
font-size: 14px;
|
|
|
color: #ff6a00;
|
|
|
// margin-top: -9px;
|
|
|
&::before {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: -2px;
|
|
|
}
|
|
|
}
|
|
|
.ant-cascader-picker {
|
|
|
width: auto;
|
|
|
position: relative;
|
|
|
.ant-cascader-input {
|
|
|
min-width: 85px;
|
|
|
&:hover &::placeholder {
|
|
|
color: #ff6a00;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.ant-cascader-input::placeholder {
|
|
|
// width: auto;
|
|
|
color: #4d575ecc;
|
|
|
text-indent: 0;
|
|
|
line-height: 20px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
span {
|
|
|
// width: auto;
|
|
|
// max-width: 150px;
|
|
|
// min-width: 140px;
|
|
|
text-align: left;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.special {
|
|
|
position: relative;
|
|
|
div:first-child {
|
|
|
height: 32px;
|
|
|
margin-top: -2px;
|
|
|
line-height: 32px;
|
|
|
color: #4d575ecc;
|
|
|
display: flex;
|
|
|
cursor: pointer;
|
|
|
> .showspecial {
|
|
|
height: 32px;
|
|
|
overflow: hidden;
|
|
|
li {
|
|
|
margin: 6px 5px 0 0;
|
|
|
float: left;
|
|
|
height: 20px;
|
|
|
line-height: 19px;
|
|
|
padding: 0 8px;
|
|
|
color: #fff;
|
|
|
background-color: #ff6a00;
|
|
|
border-radius: 999px;
|
|
|
i {
|
|
|
display: inline-block;
|
|
|
font-size: 12px;
|
|
|
height: 12px;
|
|
|
position: relative;
|
|
|
margin-left: 3px;
|
|
|
|
|
|
transform: scale(0.8);
|
|
|
// vertical-align: middle;
|
|
|
}
|
|
|
&:nth-child(n + 4) {
|
|
|
display: none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.icon-xiala {
|
|
|
transition: all 0.2s;
|
|
|
position: relative;
|
|
|
// float: left;
|
|
|
color: #c5c5c5;
|
|
|
margin-left: 4px;
|
|
|
display: inline-block;
|
|
|
font-size: 12px;
|
|
|
transform: translateY(0px) scale(0.5);
|
|
|
}
|
|
|
// .turn {
|
|
|
// transform: translateY(-1px) scale(0.6) rotate(180deg);
|
|
|
// }
|
|
|
}
|
|
|
}
|
|
|
> li:last-child {
|
|
|
position: relative;
|
|
|
color: #8c8d8f;
|
|
|
font-size: 14px;
|
|
|
margin: 28px 25px 0 20px;
|
|
|
// color: rgba(78, 88, 95, 0.8);
|
|
|
transform: translateY(-1px);
|
|
|
// margin-left: 25px;
|
|
|
a {
|
|
|
transition: all 0.5s;
|
|
|
line-height: 14px;
|
|
|
|
|
|
&:active {
|
|
|
color: rgb(255, 106, 0);
|
|
|
transition: none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/deep/ .maincontent {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
margin-top: 16px;
|
|
|
.maincontentleft {
|
|
|
width: 944px;
|
|
|
margin-right: 16px;
|
|
|
text-align: left;
|
|
|
.nodata {
|
|
|
overflow: hidden;
|
|
|
height: 230px;
|
|
|
padding-top: 30px;
|
|
|
text-align: center;
|
|
|
background-color: #fff;
|
|
|
border-radius: 5px;
|
|
|
margin: 0 auto;
|
|
|
color: #00000066;
|
|
|
margin-bottom: 20px;
|
|
|
p {
|
|
|
position: relative;
|
|
|
transform: translateY(35px);
|
|
|
}
|
|
|
}
|
|
|
.subset {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
// width: 944px;
|
|
|
// height: 212px;
|
|
|
padding: 16px;
|
|
|
margin-bottom: 16px;
|
|
|
background: #ffffff;
|
|
|
border-radius: 4px;
|
|
|
transition: all 0.2s;
|
|
|
|
|
|
&:hover {
|
|
|
// position: relative;
|
|
|
box-shadow: 3px 3px 20px 0px rgba(77, 87, 94, 0.1);
|
|
|
// transform: translateY(-0.5px);
|
|
|
}
|
|
|
.subsetleft {
|
|
|
display: flex;
|
|
|
.imgbox {
|
|
|
width: 169px;
|
|
|
height: 169px;
|
|
|
margin-right: 16px;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
img {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%) translateY(-50%);
|
|
|
|
|
|
// width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
.jobinfobox {
|
|
|
.jobname {
|
|
|
// margin: 12px 0;
|
|
|
font-size: 20px;
|
|
|
// font-weight: 400;
|
|
|
text-align: left;
|
|
|
color: #4d575e;
|
|
|
line-height: 20px;
|
|
|
&:hover {
|
|
|
color: #ff6a00;
|
|
|
}
|
|
|
}
|
|
|
.jobinfo {
|
|
|
margin-top: 16px;
|
|
|
opacity: 0.5;
|
|
|
font-size: 16px;
|
|
|
font-weight: 400;
|
|
|
text-align: left;
|
|
|
color: #4d575e;
|
|
|
line-height: 20px;
|
|
|
}
|
|
|
.jobtag {
|
|
|
margin-top: 14px;
|
|
|
text-align: left;
|
|
|
// span:first-child {
|
|
|
// color: #ff6a00;
|
|
|
// background: rgba(254, 97, 0, 0.1);
|
|
|
// }
|
|
|
span {
|
|
|
margin-right: 8px;
|
|
|
font-size: 16px;
|
|
|
padding: 2px 10px;
|
|
|
background: rgba(51, 51, 51, 0.06);
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
}
|
|
|
.jobpricemonth {
|
|
|
margin-top: 12px;
|
|
|
font-size: 16px;
|
|
|
font-weight: 400;
|
|
|
text-align: left;
|
|
|
color: #4d575e;
|
|
|
line-height: 22px;
|
|
|
}
|
|
|
.jobpricehour {
|
|
|
margin-top: 12px;
|
|
|
font-size: 16px;
|
|
|
font-weight: normal;
|
|
|
text-align: left;
|
|
|
color: #ff6a00;
|
|
|
// line-height: 24px;
|
|
|
span {
|
|
|
vertical-align: baseline;
|
|
|
font-size: 20px;
|
|
|
line-height: 24px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.subsetright {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
align-items: flex-end;
|
|
|
.topbox {
|
|
|
width: 116px;
|
|
|
height: 54px;
|
|
|
overflow: hidden;
|
|
|
text-align: center;
|
|
|
background: rgba(255, 106, 0, 0.1);
|
|
|
border-radius: 4px;
|
|
|
line-height: 30px;
|
|
|
div {
|
|
|
// font-weight: normal;
|
|
|
font-size: 16px;
|
|
|
|
|
|
span {
|
|
|
font-size: 20px;
|
|
|
// font-weight: normal;
|
|
|
}
|
|
|
}
|
|
|
div:first-child {
|
|
|
height: 24px;
|
|
|
background: #ff6a00;
|
|
|
line-height: 21px;
|
|
|
font-size: 14px;
|
|
|
color: #ffffff;
|
|
|
border: 1px solid #ff6a00;
|
|
|
border-radius: 4px 4px 0px 0px;
|
|
|
}
|
|
|
div:last-child {
|
|
|
font-weight: normal;
|
|
|
background-color: #fff4e3;
|
|
|
color: #ff6a00 !important;
|
|
|
}
|
|
|
}
|
|
|
.bottombox1 {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
button {
|
|
|
width: 100px;
|
|
|
height: 32px;
|
|
|
font-size: 16px;
|
|
|
// border: 1px solid rgba(77, 87, 94, 0.3);
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
a {
|
|
|
button:first-child {
|
|
|
border: 1px solid #d9d9d9;
|
|
|
// border-radius: 4px;
|
|
|
color: #4d575e;
|
|
|
background-color: #fff;
|
|
|
cursor: pointer;
|
|
|
&:hover {
|
|
|
color: #ff7614;
|
|
|
border-color: #ff7614;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
> button:last-child {
|
|
|
margin-left: 16px;
|
|
|
border: 1px solid #ff6a00;
|
|
|
background-color: #fff;
|
|
|
color: rgba(255, 106, 0, 1);
|
|
|
cursor: pointer;
|
|
|
&:hover {
|
|
|
color: #fff;
|
|
|
|
|
|
background-color: rgba(255, 121, 26);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
// .pagecontainer {
|
|
|
// display: flex;
|
|
|
// justify-content: center;
|
|
|
// text-align: center;
|
|
|
// margin-bottom: 30px;
|
|
|
// .ant-pagination-options-quick-jumper {
|
|
|
// margin-left: 10px;
|
|
|
// font-size: 16px;
|
|
|
// }
|
|
|
// .ant-pagination-disabled {
|
|
|
// a:hover {
|
|
|
// color: #c5c5c5 !important;
|
|
|
// }
|
|
|
// }
|
|
|
// .ant-pagination-next,
|
|
|
// .ant-pagination-prev {
|
|
|
// a:hover {
|
|
|
// color: #ff6a00;
|
|
|
// }
|
|
|
// }
|
|
|
// input[type="text"] {
|
|
|
// box-shadow: none;
|
|
|
// &:focus {
|
|
|
// border: 1px solid #ff6a00;
|
|
|
// }
|
|
|
// &:hover {
|
|
|
// border: 1px solid #ff6a00;
|
|
|
// }
|
|
|
// }
|
|
|
// .ant-pagination-item {
|
|
|
// border: none;
|
|
|
// a:hover {
|
|
|
// color: #ff6a00;
|
|
|
// }
|
|
|
// }
|
|
|
// .ant-pagination-item-active {
|
|
|
// background: #ff6a00;
|
|
|
// a {
|
|
|
// color: white;
|
|
|
// }
|
|
|
// a:hover {
|
|
|
// color: white;
|
|
|
// }
|
|
|
// }
|
|
|
// .ant-pagination-item-link {
|
|
|
// border: none;
|
|
|
// }
|
|
|
// }
|
|
|
}
|
|
|
.maincontentright {
|
|
|
width: 240px;
|
|
|
> div {
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
.dateinfo {
|
|
|
text-align: center;
|
|
|
overflow: hidden;
|
|
|
border-radius: 4px;
|
|
|
position: relative;
|
|
|
padding-bottom: 10px;
|
|
|
background-color: #fff4e3;
|
|
|
.bottombox {
|
|
|
position: relative;
|
|
|
margin-top: 0;
|
|
|
margin-bottom: 0;
|
|
|
padding-top: 10px;
|
|
|
font-size: 16px;
|
|
|
border-bottom: none;
|
|
|
color: #fff;
|
|
|
background-color: #ff6a00;
|
|
|
&::after {
|
|
|
left: 0;
|
|
|
display: none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.hotphone {
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
width: 240px;
|
|
|
height: 160px;
|
|
|
// height: 114px;
|
|
|
padding: 0 20px 20px 20px;
|
|
|
border-radius: 4px;
|
|
|
background-color: #fff;
|
|
|
text-align: center;
|
|
|
p {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
font-size: 24px;
|
|
|
color: #ff6a00;
|
|
|
// font-weight: normal;
|
|
|
top: 65%;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%) translateY(-50%);
|
|
|
}
|
|
|
}
|
|
|
.relationme {
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
width: 240px;
|
|
|
height: 160px;
|
|
|
padding: 0 20px 20px;
|
|
|
background: #ffffff;
|
|
|
text-align: center;
|
|
|
button {
|
|
|
position: absolute;
|
|
|
width: 120px;
|
|
|
height: 32px;
|
|
|
margin-top: 16px;
|
|
|
font-size: 16px;
|
|
|
line-height: 20px;
|
|
|
border-radius: 999px;
|
|
|
border: 0;
|
|
|
background-color: #ff6a00;
|
|
|
color: #fff;
|
|
|
top: 55%;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%) translateY(-50%);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|