680 lines
17 KiB
Vue
680 lines
17 KiB
Vue
<template>
|
|
<div class="mainBox">
|
|
<div class="title"><span>服务企业情况</span></div>
|
|
<div class="content">
|
|
<!-- tabs切换 -->
|
|
<ul class="tabsBox">
|
|
<li
|
|
v-for="(item, index) in tabsData"
|
|
:key="item.title"
|
|
:class="{ active: activeIndex === index }"
|
|
@click="handleTabClick(index)"
|
|
>
|
|
<div class="tabsMainBox">
|
|
<div class="tabsTitle">{{ item.title }}</div>
|
|
<div class="tabsContent">
|
|
<div>
|
|
<span>{{ item.content[0].title }}</span
|
|
><br />
|
|
<span class="num">{{ item.content[0].num }}</span
|
|
><span>家</span>
|
|
</div>
|
|
<div>
|
|
<span>{{ item.content[1].title }}</span
|
|
><br />
|
|
<span class="num">{{ item.content[1].num }}</span
|
|
><span>个</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<!-- 表格 -->
|
|
<div class="tableBox">
|
|
<el-table
|
|
:data="tableData"
|
|
style="width: 100%; height: 780px; overflow: auto"
|
|
>
|
|
<el-table-column label="序号" width="80">
|
|
<template #default="scope">
|
|
{{ scope.$index + 1 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="企业名称" />
|
|
<el-table-column prop="street" label="地址" />
|
|
<el-table-column prop="position" label="招聘岗位" />
|
|
<el-table-column prop="recruitmentNum" label="招聘人数" />
|
|
<el-table-column prop="broker" label="服务经纪人" />
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { el } from "element-plus/es/locale.mjs";
|
|
import { ref, reactive, computed, onMounted } from "vue";
|
|
const tabsData = ref([
|
|
{
|
|
title: "第一产业企业",
|
|
content: [
|
|
{
|
|
title: "服务企业数",
|
|
num: "3"
|
|
},
|
|
{
|
|
title: "推荐岗位数",
|
|
num: "56"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "第二产业企业",
|
|
content: [
|
|
{
|
|
title: "服务企业数",
|
|
num: "80"
|
|
},
|
|
{
|
|
title: "推荐岗位数",
|
|
num: "8459"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "第三产业企业",
|
|
content: [
|
|
{
|
|
title: "服务企业数",
|
|
num: "11"
|
|
},
|
|
{
|
|
title: "推荐岗位数",
|
|
num: "112"
|
|
}
|
|
]
|
|
}
|
|
]);
|
|
// 添加选中项状态
|
|
const activeIndex = ref(0); // 默认选中第一项
|
|
// 添加点击处理函数
|
|
const handleTabClick = (index) => {
|
|
activeIndex.value = index;
|
|
if (index == 0) {
|
|
tableData.value = table1Data.value;
|
|
} else if (index == 1) {
|
|
tableData.value = table2Data.value;
|
|
} else if (index == 2) {
|
|
tableData.value = table3Data.value;
|
|
}
|
|
};
|
|
const tableData = ref([
|
|
{
|
|
name: "全友家私有限公司",
|
|
street: "崇州市经济开发区崇阳大道333号",
|
|
position: "警卫",
|
|
recruitmentNum: "20",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "全友家私有限公司",
|
|
street: "崇州市经济开发区崇阳大道333号",
|
|
position: "文员统计",
|
|
recruitmentNum: "5",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "全友家私有限公司",
|
|
street: "崇州市经济开发区崇阳大道333号",
|
|
position: "消防",
|
|
recruitmentNum: "10",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "全友家私有限公司",
|
|
street: "崇州市经济开发区崇阳大道333号",
|
|
position: "清洁工",
|
|
recruitmentNum: "1",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "全友家私有限公司",
|
|
street: "崇州市经济开发区崇阳大道333号",
|
|
position: "兑油工",
|
|
recruitmentNum: "1",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "全友家私有限公司",
|
|
street: "崇州市经济开发区崇阳大道333号",
|
|
position: "质检员",
|
|
recruitmentNum: "10",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "全友家私有限公司",
|
|
street: "崇州市经济开发区崇阳大道333号",
|
|
position: "行政专员",
|
|
recruitmentNum: "2",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "全友家私有限公司",
|
|
street: "崇州市经济开发区崇阳大道333号",
|
|
position: "巡店专员",
|
|
recruitmentNum: "10",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "全友家私有限公司",
|
|
street: "崇州市经济开发区崇阳大道333号",
|
|
position: "设备主管",
|
|
recruitmentNum: "1",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "四川福蓉科技股份公司",
|
|
street: "成都崇州市崇双大道518号",
|
|
position: "电气技术员",
|
|
recruitmentNum: "10",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "四川福蓉科技股份公司",
|
|
street: "成都崇州市崇双大道518号",
|
|
position: "机械技术员",
|
|
recruitmentNum: "10",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "四川福蓉科技股份公司",
|
|
street: "成都崇州市崇双大道518号",
|
|
position: "送样员",
|
|
recruitmentNum: "1",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "四川福蓉科技股份公司",
|
|
street: "成都崇州市崇双大道518号",
|
|
position: "电工",
|
|
recruitmentNum: "30",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "四川福蓉科技股份公司",
|
|
street: "成都崇州市崇双大道518号",
|
|
position: "钳工",
|
|
recruitmentNum: "1",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "四川福蓉科技股份公司",
|
|
street: "成都崇州市崇双大道518号",
|
|
position: "修磨工",
|
|
recruitmentNum: "2",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "四川福蓉科技股份公司",
|
|
street: "成都比亚迪电子有限公司（成都市崇州市经济开发区创新路三段一号）",
|
|
position: "操作工（短期工）",
|
|
recruitmentNum: "3000",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "四川福蓉科技股份公司",
|
|
street: "成都比亚迪电子有限公司（成都市崇州市经济开发区创新路三段一号）",
|
|
position: "作业员",
|
|
recruitmentNum: "1500",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "四川福蓉科技股份公司",
|
|
street: "成都比亚迪电子有限公司（成都市崇州市经济开发区创新路三段一号）",
|
|
position: "检验员",
|
|
recruitmentNum: "200",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "四川福蓉科技股份公司",
|
|
street: "成都比亚迪电子有限公司（成都市崇州市经济开发区创新路三段一号）",
|
|
position: "厨工",
|
|
recruitmentNum: "50",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "四川福蓉科技股份公司",
|
|
street: "成都比亚迪电子有限公司（成都市崇州市经济开发区创新路三段一号）",
|
|
position: "厨师",
|
|
recruitmentNum: "9",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "四川福蓉科技股份公司",
|
|
street: "成都比亚迪电子有限公司（成都市崇州市经济开发区创新路三段一号）",
|
|
position: "面点师",
|
|
recruitmentNum: "2",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "四川福蓉科技股份公司",
|
|
street: "崇州市经济开发区创新路三段一号",
|
|
position: "第四事业部操作工",
|
|
recruitmentNum: "1500",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "四川福蓉科技股份公司",
|
|
street: "成都市崇州市经济开发区创新路三段一号",
|
|
position: "第八事业部操作工",
|
|
recruitmentNum: "1000",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "四川福蓉科技股份公司",
|
|
street: "成都比亚迪电子有限公司（成都市崇州市经济开发区创新路三段一号）",
|
|
position: "第八事业部技术员",
|
|
recruitmentNum: "300",
|
|
broker: "张强"
|
|
}
|
|
]);
|
|
const table1Data = ref([
|
|
{
|
|
name: "捷普科技（成都）有限公司",
|
|
street: "大划街道",
|
|
position: "技术员",
|
|
recruitmentNum: "5",
|
|
broker: "田家强"
|
|
},
|
|
{
|
|
name: "全友家私有限公司",
|
|
street: "崇阳街道",
|
|
position: "科技员",
|
|
recruitmentNum: "12",
|
|
broker: "章尤为"
|
|
},
|
|
{
|
|
name: "成都领益科技有限公司",
|
|
street: "崇阳街道",
|
|
position: "开发员",
|
|
recruitmentNum: "5",
|
|
broker: "周雨薇"
|
|
},
|
|
{
|
|
name: "四川福蓉科技股份公司",
|
|
street: "崇阳街道",
|
|
position: "普工",
|
|
recruitmentNum: "30",
|
|
broker: "张天爱"
|
|
},
|
|
{
|
|
name: "成都市裕同印刷有限公司",
|
|
street: "崇阳街道",
|
|
position: "印刷工",
|
|
recruitmentNum: "8",
|
|
broker: "周伟"
|
|
},
|
|
{
|
|
name: "明珠家具股份有限公司",
|
|
street: "崇阳街道",
|
|
position: "木工",
|
|
recruitmentNum: "8",
|
|
broker: "李伟芳"
|
|
},
|
|
{
|
|
name: "康泰塑胶科技集团有限公司",
|
|
street: "崇阳街道",
|
|
position: "普工",
|
|
recruitmentNum: "30",
|
|
broker: "赵德柱"
|
|
},
|
|
{
|
|
name: "索菲亚家居（成都）有限公司",
|
|
street: "崇阳街道",
|
|
position: "操作员",
|
|
recruitmentNum: "17",
|
|
broker: "田一鸣"
|
|
},
|
|
{
|
|
name: "四川一宇钢结构工程有限公司",
|
|
street: "崇阳街道",
|
|
position: "研发员",
|
|
recruitmentNum: "7",
|
|
broker: "胡江"
|
|
},
|
|
{
|
|
name: "四川省川建管道有限公司",
|
|
street: "元通镇",
|
|
position: "普工",
|
|
recruitmentNum: "20",
|
|
broker: "王杰"
|
|
},
|
|
{
|
|
name: "日东材料科技（成都）有限公司",
|
|
street: "崇阳街道",
|
|
position: "普工",
|
|
recruitmentNum: "12",
|
|
broker: "李堃"
|
|
},
|
|
{
|
|
name: "崇州君健塑胶有限公司",
|
|
street: "崇阳街道",
|
|
position: "研发员",
|
|
recruitmentNum: "6",
|
|
broker: "范军"
|
|
}
|
|
]);
|
|
const table2Data = ref([
|
|
{
|
|
name: "成都川西蓄电池（集团）有限公司",
|
|
street: "崇阳街道",
|
|
position: "检验员",
|
|
recruitmentNum: "20",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "四川省旺达饲料有限公司",
|
|
street: "三江镇",
|
|
position: "销售员",
|
|
recruitmentNum: "10",
|
|
broker: "周伟"
|
|
},
|
|
{
|
|
name: "四川展新胶粘材料有限公司",
|
|
street: "崇庆街道",
|
|
position: "普工",
|
|
recruitmentNum: "30",
|
|
broker: "章尤为"
|
|
},
|
|
{
|
|
name: "成都青洋电子材料有限公司",
|
|
street: "崇庆街道",
|
|
position: "质检员",
|
|
recruitmentNum: "18",
|
|
broker: "熊忠"
|
|
},
|
|
{
|
|
name: "四川辉达管业科技有限公司",
|
|
street: "观胜镇",
|
|
position: "普工",
|
|
recruitmentNum: "20",
|
|
broker: "赵德钢"
|
|
},
|
|
{
|
|
name: "四川聚力建材科技有限公司",
|
|
street: "崇阳街道",
|
|
position: "销售员",
|
|
recruitmentNum: "8",
|
|
broker: "张强"
|
|
},
|
|
{
|
|
name: "四川汇源塑料光纤有限公司",
|
|
street: "崇阳街道",
|
|
position: "质检员",
|
|
recruitmentNum: "9",
|
|
broker: "王军辉"
|
|
},
|
|
{
|
|
name: "四川雨嘉建筑科技有限公司",
|
|
street: "崇阳街道",
|
|
position: "销售员",
|
|
recruitmentNum: "10",
|
|
broker: "田军"
|
|
},
|
|
{
|
|
name: "成都智能美航空科技有限公司",
|
|
street: "崇阳街道",
|
|
position: "研发员",
|
|
recruitmentNum: "10",
|
|
broker: "王安国"
|
|
},
|
|
{
|
|
name: "四川金戈铁马钢结构有限公司",
|
|
street: "崇阳街道",
|
|
position: "普工",
|
|
recruitmentNum: "30",
|
|
broker: "王维"
|
|
},
|
|
{
|
|
name: "成都通发工程机械有限公司",
|
|
street: "崇阳街道",
|
|
position: "技术工",
|
|
recruitmentNum: "20",
|
|
broker: "章维"
|
|
},
|
|
{
|
|
name: "四川盛旭科技有限公司",
|
|
street: "崇阳街道",
|
|
position: "研发员",
|
|
recruitmentNum: "8",
|
|
broker: "范俊茂"
|
|
}
|
|
]);
|
|
const table3Data = ref([
|
|
{
|
|
name: "崇州市鸿立机械有限公司",
|
|
street: "崇阳街道",
|
|
position: "检验员",
|
|
recruitmentNum: "10",
|
|
broker: "王刚"
|
|
},
|
|
{
|
|
name: "四川铭扬电气设备有限公司",
|
|
street: "崇阳街道",
|
|
position: "检验员",
|
|
recruitmentNum: "10",
|
|
broker: "赵德柱"
|
|
},
|
|
{
|
|
name: "四川汇控机电设备有限公司",
|
|
street: "羊马街道",
|
|
position: "机床工",
|
|
recruitmentNum: "10",
|
|
broker: "周嘉"
|
|
},
|
|
{
|
|
name: "四川省万国盛数控",
|
|
street: "崇阳街道",
|
|
position: "普工",
|
|
recruitmentNum: "30",
|
|
broker: "周伟"
|
|
},
|
|
{
|
|
name: "成都天特模具科技有限公司",
|
|
street: "羊马街道",
|
|
position: "操作员",
|
|
recruitmentNum: "20",
|
|
broker: "田刚"
|
|
},
|
|
{
|
|
name: "成都烨腾金属制品制造有限公司",
|
|
street: "崇阳街道",
|
|
position: "普工",
|
|
recruitmentNum: "50",
|
|
broker: "赵旭日"
|
|
},
|
|
{
|
|
name: "捷普科技（成都）有限公司",
|
|
street: "大划街道",
|
|
position: "技术员",
|
|
recruitmentNum: "5",
|
|
broker: "田家强"
|
|
},
|
|
{
|
|
name: "全友家私有限公司",
|
|
street: "崇阳街道",
|
|
position: "科技员",
|
|
recruitmentNum: "12",
|
|
broker: "章尤为"
|
|
},
|
|
{
|
|
name: "成都领益科技有限公司",
|
|
street: "崇阳街道",
|
|
position: "开发员",
|
|
recruitmentNum: "5",
|
|
broker: "周雨薇"
|
|
},
|
|
{
|
|
name: "四川福蓉科技股份公司",
|
|
street: "大划街道",
|
|
position: "普工",
|
|
recruitmentNum: "100",
|
|
broker: "李强"
|
|
},
|
|
{
|
|
name: "成都市裕同印刷有限公司",
|
|
street: "江源街道",
|
|
position: "技术工",
|
|
recruitmentNum: "3",
|
|
broker: "王芳"
|
|
},
|
|
{
|
|
name: "明珠家具股份有限公司",
|
|
street: "江源街道",
|
|
position: "研发员",
|
|
recruitmentNum: "10",
|
|
broker: "王芳"
|
|
}
|
|
]);
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.mainBox {
|
|
width: 1862px;
|
|
height: 1000px;
|
|
margin: 0 auto;
|
|
.title {
|
|
height: 34px;
|
|
line-height: 34px;
|
|
background: url("~@/assets/images/largeScreen/bigBox-title.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 0 0 0 20px;
|
|
span {
|
|
background: -webkit-linear-gradient(#dbf9ff, #a9f0ff);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
.content {
|
|
height: 966px;
|
|
background: url("~@/assets/images/largeScreen/bigBox-bg.png") no-repeat;
|
|
background-size: 100% auto;
|
|
background-position: center bottom;
|
|
ul.tabsBox {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: nowrap;
|
|
padding: 30px 0 0 0;
|
|
li {
|
|
width: 308px;
|
|
height: 95px;
|
|
cursor: pointer;
|
|
margin: 0 15px;
|
|
&:nth-child(1) {
|
|
background: url("~@/assets/images/largeScreen/tabs1.png") no-repeat
|
|
center;
|
|
background-size: 100%;
|
|
&.active {
|
|
background: url("~@/assets/images/largeScreen/tabs1-active.png")
|
|
no-repeat center;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
&:nth-child(2) {
|
|
background: url("~@/assets/images/largeScreen/tabs2.png") no-repeat
|
|
center;
|
|
background-size: 100%;
|
|
&.active {
|
|
background: url("~@/assets/images/largeScreen/tabs2-active.png")
|
|
no-repeat center;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
&:nth-child(3) {
|
|
background: url("~@/assets/images/largeScreen/tabs3.png") no-repeat
|
|
center;
|
|
background-size: 100%;
|
|
&.active {
|
|
background: url("~@/assets/images/largeScreen/tabs3-active.png")
|
|
no-repeat center;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
.tabsMainBox {
|
|
width: 213px;
|
|
height: 73px;
|
|
background: url("~@/assets/images/largeScreen/tabs-main-bg.png")
|
|
no-repeat;
|
|
background-size: 100%;
|
|
margin: 14px 0 0 80px;
|
|
.tabsTitle {
|
|
height: 20px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
color: #cbf2fa;
|
|
}
|
|
.tabsContent {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: nowrap;
|
|
& > div {
|
|
width: 50%;
|
|
text-align: center;
|
|
padding: 7px 0 0 0;
|
|
color: #cbf2fa;
|
|
span.num {
|
|
display: inline-block;
|
|
padding: 0 5px 0 0;
|
|
color: #d9e7ff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.tableBox {
|
|
margin: 30px;
|
|
}
|
|
}
|
|
}
|
|
.el-table {
|
|
background-color: transparent;
|
|
--el-table-border-color: rgba(22, 65, 85, 0.9);
|
|
}
|
|
::v-deep .el-table__header-wrapper {
|
|
margin: 0 0 1px 0;
|
|
}
|
|
::v-deep .el-table .el-table__cell {
|
|
padding: 17px 0;
|
|
}
|
|
::v-deep .el-table th.el-table__cell {
|
|
background-color: #164155 !important;
|
|
color: #c4f3fe;
|
|
margin: 0 0 2px 0;
|
|
font-size: 16px;
|
|
}
|
|
::v-deep .el-table tr {
|
|
background-color: rgba(22, 65, 85, 0.5);
|
|
}
|
|
::v-deep .el-table tr:nth-child(even) {
|
|
background-color: rgba(22, 65, 85, 0.9);
|
|
}
|
|
::v-deep .el-table td.el-table__cell,
|
|
.el-table th.el-table__cell.is-leaf {
|
|
border-bottom: 1px solid rgba(22, 65, 85, 0.5);
|
|
font-size: 18px;
|
|
}
|
|
::v-deep .el-table th.el-table__cell.is-leaf {
|
|
border-bottom: 1px solid rgba(22, 65, 85, 0.9);
|
|
}
|
|
::v-deep
|
|
.el-table--enable-row-hover
|
|
.el-table__body
|
|
tr:hover
|
|
> td.el-table__cell {
|
|
background-color: rgb(16, 104, 171);
|
|
color: #fff;
|
|
}
|
|
</style>
|