|
|
|
|
|
<template>
|
|
|
|
|
|
<div class="joblist-container">
|
|
|
|
|
|
<!-- 筛选导航 -->
|
|
|
|
|
|
<div class="navigation">
|
|
|
|
|
|
<div class="w">
|
|
|
|
|
|
<!-- 特色筛选的列表盒子 -->
|
|
|
|
|
|
<div v-if="isspecialboxshow" class="specialbox" @click.stop="">
|
|
|
|
|
|
<div class="w">
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li
|
|
|
|
|
|
v-for="(item, index) in options.special"
|
|
|
|
|
|
:key="index"
|
|
|
|
|
|
@click.stop="specialclick(index)"
|
|
|
|
|
|
:class="{ 'special-active': specialactive.indexOf(index) > -1 }"
|
|
|
|
|
|
>
|
|
|
|
|
|
{{ item.value }}
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<i class="iconfont icon-dingwei"></i
|
|
|
|
|
|
><a-cascader
|
|
|
|
|
|
:options="options.position"
|
|
|
|
|
|
change-on-select
|
|
|
|
|
|
@change="onChange"
|
|
|
|
|
|
placeholder="选择城市"
|
|
|
|
|
|
v-model="formvalue.city"
|
|
|
|
|
|
id="city"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<a-cascader
|
|
|
|
|
|
:options="options.price"
|
|
|
|
|
|
placeholder="工价"
|
|
|
|
|
|
@change="onChange"
|
|
|
|
|
|
v-model="formvalue.price"
|
|
|
|
|
|
id="price"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<a-cascader
|
|
|
|
|
|
:options="options.age"
|
|
|
|
|
|
placeholder="年龄"
|
|
|
|
|
|
@change="onChange"
|
|
|
|
|
|
v-model="formvalue.age"
|
|
|
|
|
|
id="age"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</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"><a href="javascript:;">清空筛选</a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 主体部分 -->
|
|
|
|
|
|
<div class="maincontent w">
|
|
|
|
|
|
<div class="maincontentleft">
|
|
|
|
|
|
<div class="subset" v-for="(item, index) in jobMainList" :key="index">
|
|
|
|
|
|
<div class="subsetleft">
|
|
|
|
|
|
<div class="imgbox">
|
|
|
|
|
|
<img src="../../assets/无锡健鼎.png" alt="" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="jobinfobox">
|
|
|
|
|
|
<div class="jobname">无锡健鼎科技小时工</div>
|
|
|
|
|
|
<div class="jobinfo">
|
|
|
|
|
|
<span>无锡市 ｜ </span>
|
|
|
|
|
|
<span> 锡山区｜</span>
|
|
|
|
|
|
<span> 男女不限｜</span>
|
|
|
|
|
|
<span> 16-45岁</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="jobtag">
|
|
|
|
|
|
<span>返费</span>
|
|
|
|
|
|
<span>空调车间</span>
|
|
|
|
|
|
<span>免费体检</span>
|
|
|
|
|
|
<span>工价高</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="jobpricemonth"><span>7500-8500</span>元/月</div>
|
|
|
|
|
|
<div class="jobpricehour"><span>30</span>元/小时</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="subsetright">
|
|
|
|
|
|
<div class="topbox">
|
|
|
|
|
|
<div>服务费</div>
|
|
|
|
|
|
<div><span>1.5</span>元/小时</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bottombox">
|
|
|
|
|
|
<button>
|
|
|
|
|
|
<router-link :to="'/detail/' + index">更多</router-link>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button>录单</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="pagecontainer">
|
|
|
|
|
|
<a-pagination
|
|
|
|
|
|
show-quick-jumper
|
|
|
|
|
|
:default-current="1"
|
|
|
|
|
|
:total="50"
|
|
|
|
|
|
@change="onChange"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="maincontentright">
|
|
|
|
|
|
<div class="hotphone">
|
|
|
|
|
|
<h1>服务热线</h1>
|
|
|
|
|
|
<p>0371-666666666</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="relationme">
|
|
|
|
|
|
<p>一手单合作</p>
|
|
|
|
|
|
<button>发布一手单</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="recommendposition">
|
|
|
|
|
|
<h1><span></span>推荐职位</h1>
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="jobinfobox"
|
|
|
|
|
|
v-for="(item, index) in relationList"
|
|
|
|
|
|
:key="index"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="imgbox">
|
|
|
|
|
|
<img src="../../assets/推荐职位（吉利汽车）.png" alt="" />
|
|
|
|
|
|
<span>服务费<i>1.3</i>元/小时</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="jobname">宁波吉利汽车小时工</div>
|
|
|
|
|
|
<div class="jobinfo">
|
|
|
|
|
|
<span>宁波市 |</span>
|
|
|
|
|
|
<span> 16-45岁</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="jobtag">
|
|
|
|
|
|
<span>返费</span>
|
|
|
|
|
|
<span>短期工</span>
|
|
|
|
|
|
<span>人走账清</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="jobprice"><span>30</span>元/小时</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
|
|
|
|
|
// 组件名称
|
|
|
|
|
|
name: "",
|
|
|
|
|
|
// 局部注册的组件
|
|
|
|
|
|
components: {},
|
|
|
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
|
|
|
props: {
|
|
|
|
|
|
isspecialboxshow: {
|
|
|
|
|
|
require: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
// 组件状态值
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
jobMainList: [1, 2, 3, 4, 5, 6, 7, 8],
|
|
|
|
|
|
formvalue: {
|
|
|
|
|
|
city: [],
|
|
|
|
|
|
price: [],
|
|
|
|
|
|
age: [],
|
|
|
|
|
|
special: [],
|
|
|
|
|
|
},
|
|
|
|
|
|
specialactive: [],
|
|
|
|
|
|
options: {
|
|
|
|
|
|
position: [
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "郑州",
|
|
|
|
|
|
label: "郑州",
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "金水",
|
|
|
|
|
|
label: "金水",
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "升龙",
|
|
|
|
|
|
label: "升龙",
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "许昌",
|
|
|
|
|
|
label: "许昌",
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "襄县",
|
|
|
|
|
|
label: "襄县",
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "伯才",
|
|
|
|
|
|
label: "伯才",
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
price: [
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "3000-4000元",
|
|
|
|
|
|
label: "3000-4000元",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "4000-5000元",
|
|
|
|
|
|
label: "4000-5000元",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "5000-6000元",
|
|
|
|
|
|
label: "5000-6000元",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "6000-7000元",
|
|
|
|
|
|
label: "6000-7000元",
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
age: [
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "16-45岁",
|
|
|
|
|
|
label: "16-45岁",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "18-35岁",
|
|
|
|
|
|
label: "18-35岁",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "45-58岁",
|
|
|
|
|
|
label: "45-58岁",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "58岁以上",
|
|
|
|
|
|
label: "58岁以上",
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
special: [
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "全年多休",
|
|
|
|
|
|
label: "全年多休",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "五险一金",
|
|
|
|
|
|
label: "五险一金",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "保底工资",
|
|
|
|
|
|
label: "保底工资",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "餐费补贴",
|
|
|
|
|
|
label: "餐费补贴",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "保障住宿",
|
|
|
|
|
|
label: "保障住宿",
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
},
|
|
|
|
|
|
relationList: [1, 2, 3],
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
// 计算属性
|
|
|
|
|
|
computed: {},
|
|
|
|
|
|
// 侦听器
|
|
|
|
|
|
watch: {
|
|
|
|
|
|
formvalue: {
|
|
|
|
|
|
handler(e) {
|
|
|
|
|
|
console.log(e);
|
|
|
|
|
|
if (e.city.length === 0) {
|
|
|
|
|
|
document.getElementById("city").style.width = 105 + "px";
|
|
|
|
|
|
} else {
|
|
|
|
|
|
const data = e.city.join("");
|
|
|
|
|
|
if (data.length > 4) {
|
|
|
|
|
|
document.getElementById("city").style.width =
|
|
|
|
|
|
(data.length + 4) * 18 + "px";
|
|
|
|
|
|
document.querySelector("#city").nextElementSibling.style.width = // 获取下一个兄弟元素s
|
|
|
|
|
|
(data.length + 4) * 18 + "px";
|
|
|
|
|
|
} else if (data.length > 2) {
|
|
|
|
|
|
document.getElementById("city").style.width =
|
|
|
|
|
|
(data.length + 3) * 18 + "px";
|
|
|
|
|
|
document.querySelector("#city").nextElementSibling.style.width =
|
|
|
|
|
|
(data.length + 3) * 18 + "px";
|
|
|
|
|
|
} else {
|
|
|
|
|
|
document.getElementById("city").style.width =
|
|
|
|
|
|
data.length * 18 + "px";
|
|
|
|
|
|
document.getElementById("city").style.minWidth = 72 + "px";
|
|
|
|
|
|
document.querySelector("#city").nextElementSibling.style.width =
|
|
|
|
|
|
(data.length + 2) * 18 + "px";
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// 工价的判断
|
|
|
|
|
|
if (e.price.length === 0) {
|
|
|
|
|
|
document.getElementById("price").style.width = 70 + "px";
|
|
|
|
|
|
} else {
|
|
|
|
|
|
const data = e.price.join("");
|
|
|
|
|
|
if (data.length >= 0) {
|
|
|
|
|
|
document.getElementById("price").style.width = "150px";
|
|
|
|
|
|
document.getElementById("price").nextElementSibling.style.width =
|
|
|
|
|
|
"150px";
|
|
|
|
|
|
// document.querySelector(".ant-cascader-picker-label").style.width =
|
|
|
|
|
|
// "150px";
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// 年龄筛选长度的判断
|
|
|
|
|
|
if (e.age.length === 0) {
|
|
|
|
|
|
document.getElementById("age").style.width = 70 + "px";
|
|
|
|
|
|
} else {
|
|
|
|
|
|
const data = e.age.join("");
|
|
|
|
|
|
if (data.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() {},
|
|
|
|
|
|
/**
|
|
|
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
|
|
|
*/
|
|
|
|
|
|
mounted() {
|
|
|
|
|
|
document.querySelector(".ant-pagination-options-quick-jumper").innerHTML =
|
|
|
|
|
|
"跳至<input type='text'>页";
|
|
|
|
|
|
// this.$nextTick(() => {
|
|
|
|
|
|
// console.log(this.isspecialboxshow);
|
|
|
|
|
|
// });
|
|
|
|
|
|
},
|
|
|
|
|
|
// 组件方法
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
onSearch() {},
|
|
|
|
|
|
onChange() {
|
|
|
|
|
|
console.log(document.getElementById("city").style);
|
|
|
|
|
|
},
|
|
|
|
|
|
handleChange() {},
|
|
|
|
|
|
claerfilter() {
|
|
|
|
|
|
this.formvalue = {
|
|
|
|
|
|
city: [],
|
|
|
|
|
|
price: [],
|
|
|
|
|
|
age: [],
|
|
|
|
|
|
special: [],
|
|
|
|
|
|
};
|
|
|
|
|
|
this.specialactive = [];
|
|
|
|
|
|
},
|
|
|
|
|
|
specialclick(index) {
|
|
|
|
|
|
let arrIndex = this.specialactive.indexOf(index);
|
|
|
|
|
|
if (arrIndex > -1) {
|
|
|
|
|
|
this.specialactive.splice(arrIndex, 1);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.specialactive.push(index);
|
|
|
|
|
|
}
|
|
|
|
|
|
console.log(this.specialactive);
|
|
|
|
|
|
console.log(index);
|
|
|
|
|
|
},
|
|
|
|
|
|
isspecialboxshowclick() {
|
|
|
|
|
|
this.$emit("update:isspecialboxshow", !this.isspecialboxshow);
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
|
|
|
/deep/ .navigation {
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
border: 1px solid #f6f6f6;
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
|
|
|
|
|
|
|
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 {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: start;
|
|
|
|
|
|
.specialbox {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
// display: ;
|
|
|
|
|
|
transition: all 0.4s;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
top: 48px;
|
|
|
|
|
|
width: 100vw;
|
|
|
|
|
|
height: 100px;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
z-index: 999;
|
|
|
|
|
|
ul {
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
padding: 12px 0;
|
|
|
|
|
|
li {
|
|
|
|
|
|
padding: 5px 12px;
|
|
|
|
|
|
margin-right: 24px;
|
|
|
|
|
|
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: start;
|
|
|
|
|
|
li {
|
|
|
|
|
|
// margin-right: 30px;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
|
.ant-cascader-picker {
|
|
|
|
|
|
width: auto;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
transform: translateY(-2px);
|
|
|
|
|
|
.ant-cascader-input {
|
|
|
|
|
|
width: 70px;
|
|
|
|
|
|
// margin-top: -5px;
|
|
|
|
|
|
// max-width: 150px !important;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
// margin-bottom: 6px;
|
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
.ant-cascader-input::placeholder {
|
|
|
|
|
|
// width: auto;
|
|
|
|
|
|
// text-indent: 20px;
|
|
|
|
|
|
color: #4d575ecc;
|
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
}
|
|
|
|
|
|
span {
|
|
|
|
|
|
// width: 110px;
|
|
|
|
|
|
// 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: 18px;
|
|
|
|
|
|
color: #4d575ecc;
|
|
|
|
|
|
// margin-top: -9px;
|
|
|
|
|
|
&::before {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
top: -15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.ant-cascader-picker {
|
|
|
|
|
|
width: auto;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
.ant-cascader-input {
|
|
|
|
|
|
min-width: 105px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.ant-cascader-input::placeholder {
|
|
|
|
|
|
// width: auto;
|
|
|
|
|
|
color: #4d575ecc;
|
|
|
|
|
|
text-indent: 0;
|
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
}
|
|
|
|
|
|
span {
|
|
|
|
|
|
// width: auto;
|
|
|
|
|
|
// max-width: 150px;
|
|
|
|
|
|
// min-width: 140px;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.special {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
div:first-child {
|
|
|
|
|
|
height: 32px;
|
|
|
|
|
|
margin-top: 7px;
|
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
|
color: #4d575ecc;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
i {
|
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
color: #c5c5c5;
|
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
transform: translateY(-1px) scale(0.7);
|
|
|
|
|
|
}
|
|
|
|
|
|
.turn {
|
|
|
|
|
|
transform: translateY(-1px) scale(0.7) rotate(180deg);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
li:last-child {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
color: #8c8d8f;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
// color: rgba(78, 88, 95, 0.8);
|
|
|
|
|
|
transform: translateY(-2px);
|
|
|
|
|
|
margin-left: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .maincontent {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
|
.maincontentleft {
|
|
|
|
|
|
width: 914px;
|
|
|
|
|
|
margin-right: 16px;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
.subset {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
width: 914px;
|
|
|
|
|
|
height: 212px;
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
.subsetleft {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
.imgbox {
|
|
|
|
|
|
width: 230px;
|
|
|
|
|
|
height: 172px;
|
|
|
|
|
|
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: 28px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.jobinfo {
|
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.jobtag {
|
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
span:first-child {
|
|
|
|
|
|
color: #fe6100;
|
|
|
|
|
|
background: rgba(254, 97, 0, 0.1);
|
|
|
|
|
|
}
|
|
|
|
|
|
span {
|
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
padding: 4px 8px;
|
|
|
|
|
|
background: rgba(51, 51, 51, 0.06);
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.jobpricemonth {
|
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.jobpricehour {
|
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
color: #fe6100;
|
|
|
|
|
|
// 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: 62px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
background: rgba(255, 106, 0, 0.1);
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
color: #fe6100;
|
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
|
div {
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
// font-weight: bold;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
div:first-child {
|
|
|
|
|
|
height: 28px;
|
|
|
|
|
|
background: #ff6a00;
|
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
border: 1px solid #ff6a00;
|
|
|
|
|
|
border-radius: 4px 4px 0px 0px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.bottombox {
|
|
|
|
|
|
button {
|
|
|
|
|
|
width: 72px;
|
|
|
|
|
|
height: 32px;
|
|
|
|
|
|
border: 1px solid rgba(77, 87, 94, 0.3);
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
}
|
|
|
|
|
|
button:first-child {
|
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
button:last-child {
|
|
|
|
|
|
margin-left: 16px;
|
|
|
|
|
|
border: 1px solid #ff6a00;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
color: rgba(255, 106, 0, 1);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.pagecontainer {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
|
.ant-pagination-disabled {
|
|
|
|
|
|
a:hover {
|
|
|
|
|
|
color: #c5c5c5 !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.ant-pagination-next,
|
|
|
|
|
|
.ant-pagination-prev {
|
|
|
|
|
|
a:hover {
|
|
|
|
|
|
color: #fe6100;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
input[type="text"] {
|
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
|
&:focus {
|
|
|
|
|
|
border: 1px solid #fe61006a;
|
|
|
|
|
|
}
|
|
|
|
|
|
&:hover {
|
|
|
|
|
|
border: 1px solid #fe61006a;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.ant-pagination-item {
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
a:hover {
|
|
|
|
|
|
color: #fe6100;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.ant-pagination-item-active {
|
|
|
|
|
|
background: #fe6100;
|
|
|
|
|
|
a {
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
}
|
|
|
|
|
|
a:hover {
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.ant-pagination-item-link {
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.maincontentright {
|
|
|
|
|
|
> div {
|
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.hotphone {
|
|
|
|
|
|
width: 270px;
|
|
|
|
|
|
height: 106px;
|
|
|
|
|
|
padding: 20px 32px;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
|
color: #ff6a00;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.relationme {
|
|
|
|
|
|
width: 270px;
|
|
|
|
|
|
padding: 20px 40px;
|
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
button {
|
|
|
|
|
|
width: 150px;
|
|
|
|
|
|
height: 32px;
|
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
border: 0;
|
|
|
|
|
|
background-color: #ff6a00;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.recommendposition {
|
|
|
|
|
|
width: 270px;
|
|
|
|
|
|
// height: 1008px;
|
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
padding: 20px 20px 4px 20px;
|
|
|
|
|
|
h1 {
|
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
span {
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
margin-top: -4px;
|
|
|
|
|
|
width: 4px;
|
|
|
|
|
|
height: 20px;
|
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
|
background: #ff6a00;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.jobinfobox {
|
|
|
|
|
|
width: 230px;
|
|
|
|
|
|
// height: 298px;
|
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
|
border: 1px solid rgba(77, 87, 94, 0.1);
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
padding: 16px;
|
|
|
|
|
|
.imgbox {
|
|
|
|
|
|
width: 198px;
|
|
|
|
|
|
height: 148px;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
img {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
span {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
// width: 118px;
|
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
|
height: 20px;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
background: #ff6a00;
|
|
|
|
|
|
border-radius: 16px 16px 16px 0px;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.jobname {
|
|
|
|
|
|
height: 45px;
|
|
|
|
|
|
// margin: 12px 0;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
|
line-height: 45px;
|
|
|
|
|
|
border-bottom: 1px solid #f2f0ec;
|
|
|
|
|
|
}
|
|
|
|
|
|
.jobinfo {
|
|
|
|
|
|
margin-top: 11px;
|
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.jobtag {
|
|
|
|
|
|
margin-top: 8px;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
span:first-child {
|
|
|
|
|
|
color: #fe6100;
|
|
|
|
|
|
background: rgba(254, 97, 0, 0.1);
|
|
|
|
|
|
}
|
|
|
|
|
|
span {
|
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
padding: 3px 5px;
|
|
|
|
|
|
background: rgba(51, 51, 51, 0.06);
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.jobprice {
|
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
color: #ff6a00;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
|
span {
|
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
