|
|
|
|
|
<template>
|
|
|
|
|
|
<div class="serviceoutlets-container">
|
|
|
|
|
|
<div class="maincontent w">
|
|
|
|
|
|
<div class="maincontentleft">
|
|
|
|
|
|
<div class="subset">
|
|
|
|
|
|
<div class="imgbox">
|
|
|
|
|
|
<img src="../../assets/伯才人力-郑州.png" alt="" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="outletsinfobox">
|
|
|
|
|
|
<div class="outletsname">伯才人力郑州旗舰店</div>
|
|
|
|
|
|
<p class="outletsinfo">
|
|
|
|
|
|
一个“自营+撮合”的B2B人力资源供应链协同平台，团队通过数据挖掘、
|
|
|
|
|
|
算法优化等IT技术，构建多角色参与的复杂协同网络，为劳动密集型的
|
|
|
|
|
|
服务业企业提供RPO、BPO、HRO等人力资源服务。
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<div class="bottombox">
|
|
|
|
|
|
<div class="outletslocation">
|
|
|
|
|
|
<i class="iconfont icon-dingwei"></i
|
|
|
|
|
|
>河南省郑州市航空港区XX街道XX号
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<button>录单</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="subset">
|
|
|
|
|
|
<div class="imgbox">
|
|
|
|
|
|
<img src="../../assets/伯才人力-许昌.png" alt="" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="outletsinfobox">
|
|
|
|
|
|
<div class="outletsname">伯才人力许昌服务店</div>
|
|
|
|
|
|
<p class="outletsinfo">
|
|
|
|
|
|
一个“自营+撮合”的B2B人力资源供应链协同平台，团队通过数据挖掘、
|
|
|
|
|
|
算法优化等IT技术，构建多角色参与的复杂协同网络，为劳动密集型的
|
|
|
|
|
|
服务业企业提供RPO、BPO、HRO等人力资源服务。
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<div class="bottombox">
|
|
|
|
|
|
<div class="outletslocation">
|
|
|
|
|
|
<i class="iconfont icon-dingwei"></i
|
|
|
|
|
|
>河南省许昌市襄城县XX街道XX号
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<button>录单</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="maincontentright">
|
|
|
|
|
|
<div class="hotphone">
|
|
|
|
|
|
<h1>服务热线</h1>
|
|
|
|
|
|
<p>0371-666666666</p>
|
|
|
|
|
|
</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: {},
|
|
|
|
|
|
// 组件状态值
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
relationList: [1, 2, 3],
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
// 计算属性
|
|
|
|
|
|
computed: {},
|
|
|
|
|
|
// 侦听器
|
|
|
|
|
|
watch: {},
|
|
|
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
|
|
|
/**
|
|
|
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
|
|
|
*/
|
|
|
|
|
|
created() {},
|
|
|
|
|
|
/**
|
|
|
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
|
|
|
*/
|
|
|
|
|
|
mounted() {},
|
|
|
|
|
|
// 组件方法
|
|
|
|
|
|
methods: {},
|
|
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
|
|
|
/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: 226px;
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
.imgbox {
|
|
|
|
|
|
width: 248px;
|
|
|
|
|
|
height: 186px;
|
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
|
img {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.outletsinfobox {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
.outletsname {
|
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.outletsinfo {
|
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
|
line-height: 26px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.bottombox {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
|
.outletslocation {
|
|
|
|
|
|
color: #ff6a00;
|
|
|
|
|
|
// line-height: 22px;
|
|
|
|
|
|
i {
|
|
|
|
|
|
vertical-align: bottom;
|
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
|
margin-right: 12px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
button {
|
|
|
|
|
|
padding: 5px 20px;
|
|
|
|
|
|
border: 1px solid #ff6a00;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
color: #ff6a00;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.pagecontainer {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
margin-bottom: 80px;
|
|
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
|
height: 110px;
|
|
|
|
|
|
padding: 20px 40px;
|
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
button {
|
|
|
|
|
|
width: 190px;
|
|
|
|
|
|
height: 32px;
|
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
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;
|
|
|
|
|
|
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.1);
|
|
|
|
|
|
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>
|
