|
|
<template>
|
|
|
<div class="joblist-container">
|
|
|
<!-- <div class="searchbox">
|
|
|
<div class="w">
|
|
|
<span></span>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
<!-- 筛选导航 -->
|
|
|
<div class="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(index) > -1 }"
|
|
|
>
|
|
|
{{ item.name }}
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<ul>
|
|
|
<li>
|
|
|
<i class="iconfont icon-dingwei"></i
|
|
|
><a-cascader
|
|
|
:options="cityoption"
|
|
|
change-on-select
|
|
|
@change="onChange"
|
|
|
placeholder="选择城市"
|
|
|
v-model="formvalue.district"
|
|
|
popupClassName="flitercity"
|
|
|
id="city"
|
|
|
><i slot="suffixIcon" class="iconfont icon-xiala"></i
|
|
|
></a-cascader>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a-cascader
|
|
|
:options="options.price"
|
|
|
placeholder="工价"
|
|
|
@change="onChange"
|
|
|
popupClassName="monthlypay"
|
|
|
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"
|
|
|
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' : ''"
|
|
|
>
|
|
|
<span :style="specialactive.length != 0 ? 'color:#ff6a00' : ''"
|
|
|
>特色</span
|
|
|
><i
|
|
|
class="iconfont icon-xiala"
|
|
|
:class="isspecialboxshow ? 'turn' : ''"
|
|
|
:style="isspecialboxshow ? 'color:#ff6a00' : ''"
|
|
|
></i>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li @click="claerfilter" class="claerfilter">
|
|
|
<a
|
|
|
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"
|
|
|
@search="onSearch"
|
|
|
@input="resetsearch"
|
|
|
class="searchinput"
|
|
|
><i slot="prefix" class="iconfont icon-sousuo"></i>
|
|
|
<button slot="suffix">搜索</button>
|
|
|
</a-input>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 主体部分 -->
|
|
|
<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"
|
|
|
>
|
|
|
<p>没有符合条件的岗位</p>
|
|
|
</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">
|
|
|
<div class="imgbox" @click="totop">
|
|
|
<img v-if="item.logo.length !== 0" :src="item.logo" />
|
|
|
<img v-else src="../../../static/img/nopicture.png" />
|
|
|
</div>
|
|
|
</router-link>
|
|
|
<div class="jobinfobox">
|
|
|
<router-link target="_blank" :to="'/detail/' + item.id">
|
|
|
<div class="jobname" @click="totop">{{ item.aliasName }}</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"
|
|
|
:style="{
|
|
|
opacity:
|
|
|
item.returnFee &&
|
|
|
item.returnFee !== -1 &&
|
|
|
item.returnFee !== null
|
|
|
? '1'
|
|
|
: '0',
|
|
|
}"
|
|
|
>
|
|
|
<div>服务费</div>
|
|
|
<div>
|
|
|
<span>{{ item.returnFee }}</span
|
|
|
>元/小时
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bottombox">
|
|
|
<router-link target="_blank" :to="'/detail/' + item.id">
|
|
|
<button>更多</button>
|
|
|
</router-link>
|
|
|
<button>录单</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"
|
|
|
/>页
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="maincontentright">
|
|
|
<div class="hotphone">
|
|
|
<h1 class="bottombox"><i>服务热线</i></h1>
|
|
|
<p>0371-666666666</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";
|
|
|
export default {
|
|
|
// 注入获取职位列表的方法
|
|
|
inject: ["getJobList"],
|
|
|
// 组件名称
|
|
|
name: "",
|
|
|
// 局部注册的组件
|
|
|
components: {
|
|
|
recommend,
|
|
|
},
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
props: {
|
|
|
isspecialboxshow: {
|
|
|
require: true,
|
|
|
},
|
|
|
formvalue: {
|
|
|
// type: Object,
|
|
|
require: true,
|
|
|
},
|
|
|
jobMainList: {
|
|
|
require: true,
|
|
|
},
|
|
|
isspinning: {
|
|
|
require: true,
|
|
|
}, // 加载中显示
|
|
|
},
|
|
|
// 组件状态值
|
|
|
data() {
|
|
|
return {
|
|
|
// jobMainList: [], // 职位列表
|
|
|
specialList: [], // 获取的特色列表
|
|
|
|
|
|
specialactive: [], // 点中的特色标签索引
|
|
|
specialvalue: [], // 点中的特色标签
|
|
|
|
|
|
cityoption: [], // 城市列表
|
|
|
newFormValue: [],
|
|
|
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 = 95 + "px";
|
|
|
} else {
|
|
|
const result = e.district.join("");
|
|
|
console.log(result);
|
|
|
if (result.length > 6) {
|
|
|
document.getElementById("city").style.width =
|
|
|
(result.length + 3) * 18 + "px";
|
|
|
document.getElementById("city").style.maxWidth = "250px";
|
|
|
document.querySelector("#city").nextElementSibling.style.width = // 获取下一个兄弟元素s
|
|
|
(result.length + 3) * 18 + "px";
|
|
|
document.getElementById("city").nextElementSibling.style.maxWidth =
|
|
|
"250px";
|
|
|
} else if (result.length > 5) {
|
|
|
document.getElementById("city").style.width =
|
|
|
(result.length + 2.6) * 18 + "px";
|
|
|
document.querySelector("#city").nextElementSibling.style.width =
|
|
|
(result.length + 2.6) * 18 + "px";
|
|
|
} else if (result.length > 4) {
|
|
|
document.getElementById("city").style.width =
|
|
|
(result.length + 2.4) * 18 + "px";
|
|
|
document.querySelector("#city").nextElementSibling.style.width =
|
|
|
(result.length + 2.4) * 18 + "px";
|
|
|
} else {
|
|
|
document.getElementById("city").style.width =
|
|
|
(result.length + 1.5) * 18 + "px";
|
|
|
document.getElementById("city").style.minWidth = 72 + "px";
|
|
|
document.querySelector("#city").nextElementSibling.style.width =
|
|
|
(result.length + 1.5) * 18 + "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 = "140px";
|
|
|
document.getElementById("price").nextElementSibling.style.width =
|
|
|
"150px";
|
|
|
// 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 = "100px";
|
|
|
document.getElementById("age").nextElementSibling.style.width =
|
|
|
"100px";
|
|
|
// document.querySelector(".ant-cascader-picker-label").style.width =
|
|
|
// "150px";
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
deep: true,
|
|
|
},
|
|
|
},
|
|
|
// 组件
|
|
|
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
/**
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
*/
|
|
|
created() {
|
|
|
this.getJobList();
|
|
|
this.getJobSpecial();
|
|
|
this.getProvince();
|
|
|
},
|
|
|
/**
|
|
|
* 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);
|
|
|
},
|
|
|
// 组件方法
|
|
|
methods: {
|
|
|
/**
|
|
|
* 处理后台返回的职位列表
|
|
|
*/
|
|
|
|
|
|
//搜索企业名称
|
|
|
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 if (e.target.value.trim() !== "") {
|
|
|
this.formvalue.aliasName = e.target.value.trim();
|
|
|
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) {
|
|
|
this.formvalue.pageNum = e.target.value;
|
|
|
this.getJobList();
|
|
|
console.log(e);
|
|
|
},
|
|
|
handleChange() {},
|
|
|
claerfilter() {
|
|
|
const { pageNum, pageSize, total } = this.formvalue;
|
|
|
// this.formvalue = {
|
|
|
// 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);
|
|
|
let arrIndex = this.specialactive.indexOf(index);
|
|
|
if (arrIndex > -1) {
|
|
|
this.specialactive.splice(arrIndex, 1);
|
|
|
this.specialvalue.splice(arrIndex, 1);
|
|
|
} else {
|
|
|
this.specialactive.push(index);
|
|
|
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);
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
// .searchbox {
|
|
|
// background-color: #fff;
|
|
|
// // border-bottom: 1px solid #eeefef;
|
|
|
// .w {
|
|
|
// // display: flex;
|
|
|
// // justify-content: space-between;
|
|
|
// overflow: hidden;
|
|
|
// height: 100px;
|
|
|
// span {
|
|
|
// float: left;
|
|
|
// }
|
|
|
// .logo {
|
|
|
// width: 424px;
|
|
|
// height: 49px;
|
|
|
// margin-top: 26px;
|
|
|
// margin-right: 60px;
|
|
|
// background: url("../../assets/logo.png") no-repeat;
|
|
|
// background-size: contain;
|
|
|
// }
|
|
|
// }
|
|
|
// }
|
|
|
/deep/ .navigation {
|
|
|
// margin-top: -1px;
|
|
|
background-color: #fff;
|
|
|
border: 1px solid #f6f6f6;
|
|
|
height: 72px;
|
|
|
|
|
|
// line-height: 100px;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
.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: 14px;
|
|
|
|
|
|
i {
|
|
|
font-size: 18px;
|
|
|
margin-left: 4px;
|
|
|
color: #adadad;
|
|
|
}
|
|
|
.ant-input {
|
|
|
width: 400px;
|
|
|
height: 32px;
|
|
|
text-indent: 20px;
|
|
|
background: #fff;
|
|
|
border: 1px solid rgba(77, 87, 94, 0.3);
|
|
|
border-radius: 136px;
|
|
|
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
|
|
|
font-size: 14px !important;
|
|
|
|
|
|
&::placeholder {
|
|
|
text-indent: 20px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
&:hover {
|
|
|
border-color: #d9d9d9;
|
|
|
}
|
|
|
&:focus {
|
|
|
border-color: #ff6a00;
|
|
|
}
|
|
|
}
|
|
|
button {
|
|
|
width: 70px;
|
|
|
height: 32px;
|
|
|
background: #ff6a00;
|
|
|
border-color: #ff6a00;
|
|
|
border-radius: 16px;
|
|
|
font-size: 14px;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
}
|
|
|
.specialbox {
|
|
|
position: absolute;
|
|
|
border-bottom: 1px solid #f6f6f6;
|
|
|
box-shadow: 5px 5px 10px rgb(223, 223, 223);
|
|
|
// 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: 16px;
|
|
|
color: #4d575e;
|
|
|
line-height: 22px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
> ul {
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
li {
|
|
|
margin-top: 24px;
|
|
|
font-size: 16px;
|
|
|
color: #4d575e;
|
|
|
// margin-right: 20px;
|
|
|
.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: 16px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
span {
|
|
|
width: 60px;
|
|
|
// max-width: 150px;
|
|
|
color: rgb(255, 106, 0) !important;
|
|
|
font-size: 18px;
|
|
|
padding: 0 20px 0 0;
|
|
|
text-align: left;
|
|
|
line-height: 18px !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
li:first-child {
|
|
|
> i {
|
|
|
position: relative;
|
|
|
display: inline-block;
|
|
|
width: 18px;
|
|
|
height: 18px;
|
|
|
margin-right: 8px;
|
|
|
font-size: 16px;
|
|
|
color: #4d575ecc;
|
|
|
// margin-top: -9px;
|
|
|
&::before {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
// top: -15px;
|
|
|
}
|
|
|
}
|
|
|
.ant-cascader-picker {
|
|
|
width: auto;
|
|
|
position: relative;
|
|
|
.ant-cascader-input {
|
|
|
min-width: 95px;
|
|
|
&:hover &::placeholder {
|
|
|
color: #ff6a00;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.ant-cascader-input::placeholder {
|
|
|
// width: auto;
|
|
|
color: #4d575ecc;
|
|
|
text-indent: 0;
|
|
|
line-height: 20px;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
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;
|
|
|
cursor: pointer;
|
|
|
.icon-xiala {
|
|
|
transition: all 0.2s;
|
|
|
position: relative;
|
|
|
color: #c5c5c5;
|
|
|
margin-left: 10px;
|
|
|
display: inline-block;
|
|
|
font-size: 12px;
|
|
|
transform: translateY(-2px) scale(0.5);
|
|
|
}
|
|
|
// .turn {
|
|
|
// transform: translateY(-1px) scale(0.6) rotate(180deg);
|
|
|
// }
|
|
|
}
|
|
|
}
|
|
|
li:last-child {
|
|
|
position: relative;
|
|
|
color: #8c8d8f;
|
|
|
font-size: 16px;
|
|
|
margin: 27px 30px 0 25px;
|
|
|
// color: rgba(78, 88, 95, 0.8);
|
|
|
transform: translateY(-2px);
|
|
|
// margin-left: 25px;
|
|
|
a {
|
|
|
transition: all 0.5s;
|
|
|
line-height: 16px;
|
|
|
|
|
|
&:active {
|
|
|
color: rgb(255, 106, 0);
|
|
|
transition: none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/deep/ .maincontent {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
margin-top: 16px;
|
|
|
.maincontentleft {
|
|
|
width: 914px;
|
|
|
margin-right: 16px;
|
|
|
text-align: left;
|
|
|
.nodata {
|
|
|
overflow: hidden;
|
|
|
height: 100px;
|
|
|
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: 914px;
|
|
|
height: 212px;
|
|
|
padding: 16px;
|
|
|
margin-bottom: 16px;
|
|
|
background: #ffffff;
|
|
|
border-radius: 4px;
|
|
|
.subsetleft {
|
|
|
display: flex;
|
|
|
.imgbox {
|
|
|
width: 240px;
|
|
|
height: 180px;
|
|
|
margin-right: 20px;
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
.jobinfobox {
|
|
|
.jobname {
|
|
|
// margin: 12px 0;
|
|
|
font-size: 20px;
|
|
|
font-weight: 600;
|
|
|
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: 16px;
|
|
|
font-size: 16px;
|
|
|
font-weight: 400;
|
|
|
text-align: left;
|
|
|
color: #4d575e;
|
|
|
line-height: 22px;
|
|
|
}
|
|
|
.jobpricehour {
|
|
|
margin-top: 16px;
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
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;
|
|
|
text-align: center;
|
|
|
background: rgba(255, 106, 0, 0.1);
|
|
|
border-radius: 4px;
|
|
|
color: #ff6a00;
|
|
|
line-height: 30px;
|
|
|
div {
|
|
|
// font-weight: bold;
|
|
|
font-size: 16px;
|
|
|
|
|
|
span {
|
|
|
font-size: 20px;
|
|
|
// font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
div:first-child {
|
|
|
height: 24px;
|
|
|
background: #ff6a00;
|
|
|
line-height: 24px;
|
|
|
font-size: 14px;
|
|
|
color: #ffffff;
|
|
|
border: 1px solid #ff6a00;
|
|
|
border-radius: 4px 4px 0px 0px;
|
|
|
}
|
|
|
div:last-child {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
.bottombox {
|
|
|
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 rgba(140, 147, 153, 0.3);
|
|
|
// border-radius: 4px;
|
|
|
color: #4d575e;
|
|
|
background-color: #fff;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
button:last-child {
|
|
|
margin-left: 16px;
|
|
|
border: 1px solid #ff6a00;
|
|
|
background-color: #fff;
|
|
|
color: rgba(255, 106, 0, 1);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.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 {
|
|
|
> div {
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
.hotphone {
|
|
|
width: 270px;
|
|
|
// height: 114px;
|
|
|
padding: 20px 20px;
|
|
|
border-radius: 4px;
|
|
|
background-color: #fff;
|
|
|
|
|
|
p {
|
|
|
font-size: 24px;
|
|
|
color: #ff6a00;
|
|
|
// font-weight: bold;
|
|
|
margin-top: 12px;
|
|
|
}
|
|
|
}
|
|
|
.relationme {
|
|
|
width: 270px;
|
|
|
padding: 20px 20px;
|
|
|
background: #ffffff;
|
|
|
border-radius: 4px;
|
|
|
button {
|
|
|
width: 198px;
|
|
|
height: 32px;
|
|
|
margin-top: 16px;
|
|
|
font-size: 16px;
|
|
|
line-height: 20px;
|
|
|
border-radius: 4px;
|
|
|
border: 0;
|
|
|
background-color: #ff6a00;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|