rsxm-master/src/views/threeLaborService/components/companyProfile.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>