|
|
<template>
|
|
|
<div class="serviceoutlets-container">
|
|
|
<div class="maincontent w">
|
|
|
<div class="maincontentleft">
|
|
|
<div class="subset">
|
|
|
<div class="imgbox">
|
|
|
<img src="../../assets/zhengzhou.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"
|
|
|
@click="tomap"
|
|
|
style="cursor: pointer"
|
|
|
>
|
|
|
<i class="iconfont icon-dingwei"></i
|
|
|
><span ref="maplocation">河南省郑州市航空港区XX街道XX号</span>
|
|
|
</div>
|
|
|
<!-- <button>录单</button> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="subset">
|
|
|
<div class="imgbox">
|
|
|
<img src="../../assets/xuchang.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"
|
|
|
@click="tomap"
|
|
|
style="cursor: pointer"
|
|
|
>
|
|
|
<i class="iconfont icon-dingwei"></i
|
|
|
><span ref="maplocation">河南省许昌市襄城县XX街道XX号</span>
|
|
|
</div>
|
|
|
<!-- <button>录单</button> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="maincontentright">
|
|
|
<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 :relationList="relationList" /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
// import recommend from "@/components/FirstJob/components/recommend.vue";
|
|
|
|
|
|
export default {
|
|
|
// 组件名称
|
|
|
name: "",
|
|
|
// 局部注册的组件
|
|
|
components: {
|
|
|
// recommend,
|
|
|
},
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
props: {},
|
|
|
// 组件状态值
|
|
|
data() {
|
|
|
return {
|
|
|
relationList: [1, 2, 3],
|
|
|
searchurl:
|
|
|
"http://api.map.baidu.com/geocoder?output=html&src=webapp.baidu.openAPIdemo&address=",
|
|
|
};
|
|
|
},
|
|
|
// 计算属性
|
|
|
computed: {},
|
|
|
// 侦听器
|
|
|
watch: {},
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
/**
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
*/
|
|
|
created() {},
|
|
|
/**
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
*/
|
|
|
mounted() {},
|
|
|
// 组件方法
|
|
|
methods: {
|
|
|
tomap() {
|
|
|
const value = this.$refs.maplocation.innerHTML;
|
|
|
// console.log(this.$refs.maplocation.innerHTML);
|
|
|
console.log(this.searchrl);
|
|
|
window.location.href = this.searchurl + value;
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
/deep/ .maincontent {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
margin-top: 16px;
|
|
|
.maincontentleft {
|
|
|
width: 944px;
|
|
|
margin-right: 16px;
|
|
|
margin-bottom: 130px;
|
|
|
text-align: left;
|
|
|
.subset {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
// width: 914px;
|
|
|
height: 226px;
|
|
|
padding: 20px;
|
|
|
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);
|
|
|
}
|
|
|
.imgbox {
|
|
|
width: 248px;
|
|
|
height: 186px;
|
|
|
margin-right: 20px;
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
.outletsinfobox {
|
|
|
flex: 1;
|
|
|
.outletsname {
|
|
|
font-size: 20px;
|
|
|
font-weight: normal;
|
|
|
text-align: left;
|
|
|
color: #4d575e;
|
|
|
line-height: 30px;
|
|
|
}
|
|
|
.outletsinfo {
|
|
|
margin-top: 24px;
|
|
|
font-size: 15px;
|
|
|
text-align: left;
|
|
|
color: #4d575ecc;
|
|
|
line-height: 24px;
|
|
|
}
|
|
|
.bottombox {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
margin-top: 30px;
|
|
|
.outletslocation {
|
|
|
color: #ff6a00;
|
|
|
// line-height: 22px;
|
|
|
font-size: 17px;
|
|
|
i {
|
|
|
vertical-align: baseline;
|
|
|
font-size: 18px;
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
}
|
|
|
button {
|
|
|
// padding: 5px 20px;
|
|
|
width: 100px;
|
|
|
height: 32px;
|
|
|
line-height: 32px;
|
|
|
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: #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 {
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
width: 240px;
|
|
|
height: 160px;
|
|
|
// height: 114px;
|
|
|
padding: 0 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;
|
|
|
color: rgba(0, 0, 0, 0.85);
|
|
|
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>
|