<!--
 * @Date: 2024-10-18 13:45:53
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-21 11:36:18
 * @FilePath: /hager/src/views/recruit.vue
 * @Description: 招聘信息
-->
<template>
  <div class="hager-recruit-page">
    <div class="top-img"></div>
    <hager-box>
      <div class="select-btn-box">
        <div @click="onClickBtn(0)" :class="['btn', active_idx === 0 ? 'active' : 'normal']">热招岗位</div>
        <div @click="onClickBtn(1)":class="['btn', active_idx === 1 ? 'active' : 'normal']">雇主奖项</div>
        <div @click="onClickBtn(2)":class="['btn', active_idx === 2 ? 'active' : 'normal']">企业文化</div>
      </div>
    </hager-box>
    <div v-if="active_idx === 0">
      <hager-box>
        <hager-h1 title="热招岗位" sub="Hot Job" style="margin: 0 0 1rem;"></hager-h1>
        <div style="margin: 2rem 0;">
          <span style="font-size: 0.95rem; font-weight: bold; margin-right: 1rem;">筛选</span>
          <el-select v-model="location_value" filterable placeholder="工作地点">
            <el-option
              v-for="item in location_options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div style="margin-bottom: 3rem;">
          <div class="job-box" v-for="(job, index) in job_list" :key="index">
            <el-row style="padding: 1.5rem 2rem;">
              <el-col :span="12" style="border-right: 1px solid #E1E1E1;">
                <span class="job-title">{{ job.title }}</span>
              </el-col>
              <el-col :span="12">
                <div class="job-location-box">
                  <span class="job-location">地点：{{ job.location }}</span>
                  <img style="width: 1rem; height: 1rem;" src="https://cdn.ipadbiz.cn/hager/icon/rr@2x.png">
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </hager-box>
      <hager-box>
        <hager-load-more></hager-load-more>
      </hager-box>
      <hager-box style="margin: 1rem 0 3rem;">
        <div style="font-size: 1.15rem; text-align: center; margin: 1rem 0;">
          <p style="margin-bottom: 0.5rem;">全国多地热招同步开启</p>
          <p>转发给身边小伙伴，快来投递简历吧!</p>
        </div>
        <div class="job-img-box email" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z01.png)'}">
          <div>简历投递邮箱:hr.communication@hager.com</div>
        </div>
        <div class="job-img-box job" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z02.png)'}">
          <p>经理职位 8000元</p>
          <p>高级工程师/主管 6000元</p>
          <p>工程师/专员 5000元</p>
        </div>
      </hager-box>
    </div>
    <div v-if="active_idx === 1">
      <hager-box>
        <hager-h1 title="海格集团雇主奖项" sub="Hager Group Employer Awards" style="margin: 0 0 1rem;"></hager-h1>
        <el-row :gutter="30" style="margin-bottom: 2rem;">
          <el-col :span="8">
            <div class="employer-award">
              <div class="award-box">
                <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z03.png)"></div>
              </div>
              <div class="award-title">Kununu最受推荐雇主</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="employer-award">
              <div class="award-box">
                <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z04.png)"></div>
              </div>
              <div class="award-title">glassdoor最佳雇主</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="employer-award">
              <div class="award-box">
                <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z05.png)"></div>
              </div>
              <div class="award-title">Capital法国最佳雇主</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="30" style="margin-bottom: 2rem;">
          <el-col :span="8">
            <div class="employer-award">
              <div class="award-box">
                <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z06.png)"></div>
              </div>
              <div class="award-title">Stern最佳雇主 电子电气工程类别</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="employer-award">
              <div class="award-box">
                <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z07.png)"></div>
              </div>
              <div class="award-title">Focus最佳雇主 电气技术类别</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="employer-award">
              <div class="award-box">
                <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z08.png)"></div>
              </div>
              <div class="award-title">Happyindex最受实习生喜爱雇主</div>
            </div>
          </el-col>
        </el-row>
        <hager-h1 title="Hi!海格大学所获奖项" sub="Hi！Hager University Award " style="margin: 0 0 1rem;"></hager-h1>
        <el-row :gutter="30" style="margin-bottom: 2rem;">
          <el-col :span="8">
            <div class="employer-award">
              <div class="award-box">
                <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z09.png)"></div>
              </div>
              <div class="award-title">最佳新型企业大学 金奖</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="employer-award">
              <div class="award-box">
                <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z10.png)"></div>
              </div>
              <div class="award-title">U-Spring 金奖</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="employer-award">
              <div class="award-box">
                <div class="award-img" style="background-image: url(https://cdn.ipadbiz.cn/hager/img/recruit/z11.png)"></div>
              </div>
              <div class="award-title">布兰登霍尔HCM卓越奖 金奖</div>
            </div>
          </el-col>
        </el-row>
      </hager-box>
    </div>
    <div v-if="active_idx === 2">
      <hager-box>
        <el-row style="box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09); border-radius: 5px; margin-bottom: 3rem;">
          <el-col :span="12">
            <div class="corporate-culture-img" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z12.png)' }"></div>
          </el-col>
          <el-col :span="12">
            <div class="corporate-culture-box">
              <div class="title" style="margin-top: 2rem;">
                <p class="c">以人为本的家族企业</p>
                <p class="e">People-Oriented</p>
              </div>
              <div class="introduce" style="line-height: 2;">
                <p style="margin-bottom: 1rem;">
                  海格集团始终坚持以人为本，相信员工是成功的关键。秉承 <span style="color: #00ABE5;">真诚、勇气、正直</span> 的企业价值观，海格集团为员工创造温馨、和谐的工作氛围，员工可以从中享受灵活的工作方式。
                </p>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row style="box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09); border-radius: 5px; margin-bottom: 3rem;">
          <el-col :span="12">
            <div class="corporate-culture-box">
              <div class="title" style="margin-top: 2rem;">
                <p class="c">构建未来电气世界</p>
                <p class="e">Vision</p>
              </div>
              <div class="introduce" style="line-height: 2;">
                <p style="margin-bottom: 1rem;">作为电气安装解决方案和服务供应商，海格集团始终坚持<span>可持续发展</span>，发布<span>Project 2030</span> 集团愿景，致才于构建未来的电气世界，让人们的生活更安全、更清洁、更愉悦。</p>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="corporate-culture-img" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z13.png)' }"></div>
          </el-col>
        </el-row>
        <el-row style="box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09); border-radius: 5px; margin-bottom: 3rem;">
          <el-col :span="12">
            <div class="corporate-culture-img" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z14.png)' }"></div>
          </el-col>
          <el-col :span="12">
            <div class="corporate-culture-box">
              <div class="title" style="margin-top: 2rem;">
                <p class="c">人与企业共同成长</p>
                <p class="e">Grow Together</p>
              </div>
              <div class="introduce" style="line-height: 2;">
                <p style="margin-bottom: 1rem;">海格集团坚信人与企业共同成长为员工提供终身发展的机会。 <br/>
                <span>H!海格大学</span>帮助员工学习职业技能,让员工获得职场成长。</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </hager-box>
    </div>
  </div>
</template>

<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerH1 from '@/components/common/hagerH1.vue';
import hagerLoadMore from '@/components/hagerLoadMore.vue';

export default {
  components: { hagerH1, hagerBox, hagerLoadMore },
  mixins: [mixin.init],
  data () {
    return {
      active_idx: 0,
      location_options: [{
        value: '远程办公',
        label: '远程办公'
      }, {
        value: '广东省-东莞',
        label: '广东省-东莞'
      }, {
        value: '浙江省-杭州',
        label: '浙江省-杭州'
      }],
      location_value: '',
      job_list: [
        {
          title: '销售工程师',
          location: '远程办公'
        },
        {
          title: '产品管理主管级工程师',
          location: '广东省-东莞'
        },
        {
          title: 'QE/ 质量工程师',
          location: '广东省-东莞'
        },
        {
          title: '销售工程师',
          location: '浙江省-杭州'
        },
      ]
    }
  },
  mounted () {

  },
  methods: {
    onClickBtn (idx) {
      this.active_idx = idx;
    }
  }
}
</script>

<style lang="less" scoped>
  .hager-recruit-page {
    .top-img {
      height: 25rem;
      background-image: url(https://cdn.ipadbiz.cn/hager/banner/banner07.png);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .select-btn-box {
      margin: 2rem 0;
      .btn {
        width: 8rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        display: inline-block;
        padding: 0.5rem 0;
        margin-right: 1rem;
        border-radius: 5px;
        &.active {
          background-color: @primary-color;
          color: #fff;
          font-weight: bold;
        }
        &.normal {
          background-color: #F3F3F3;
          color: @text-color;
          font-weight: none;
        }
        &:hover {
          cursor: pointer;
        }
      }
    }

    .job-box {
      background: #FFFFFF;
      box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09);
      border-radius: 5px;
      margin-bottom: 2rem;
      transition: transform 0.3s ease-in-out;
      &:hover {
        cursor: pointer;
        transform: scale(1.01);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      }
      .job-title {
        color: @secondary-color;
        font-weight: bold;
      }

      .job-location-box {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .job-location {
          margin-right: 1rem;
        }
      }

    }

    .job-img-box {
      background-size: 100% 100%;
      background-position: center;
      background-repeat: no-repeat;
      color: #fff;
      font-size: 0.95rem;
      font-weight: bold;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      &.email {
        padding: 1rem 2rem;
        height: 3rem;
        margin: 2rem 3rem;
        font-size: 1.25rem;
      }
      &.job {
        padding: 1rem 2rem;
        height: 9rem;
        flex-direction: column;
        font-size: 1.25rem;
        p {
          line-height: 1.75;
        }
      }
    }

    .employer-award {
      // height: 20rem;
      border: 1px solid #D6D6D6;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
      .award-box {
        // padding: 1rem;
        // border-bottom: 0;
        .award-img {
          width: 100%;
          height: 13rem;
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
        }
      }
      .award-title {
        background-color: #E3F1F7;
        color: @secondary-color;
        font-weight: bold;
        text-align: center;
        padding: 1rem;
      }
    }

    .corporate-culture-img {
      width: 100%;
      height: 22rem;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center right;
    }
    .corporate-culture-box {
      background-color: #FFF;
      position: relative; /* 父容器设置为相对定位 */
      padding: 2rem;
      height: 22rem; /* 让 .about-box 撑满父容器 */
      box-sizing: border-box;
      .title {
        font-weight: bold;
        .c {
          font-size: 2rem;
          color: @secondary-color;
        }
        .e {
          font-size: 1.5rem;
          color: @primary-color;
        }
      }
      .introduce {
        line-height: 1.75;
        margin-top: 1rem;
        span {
          color: @primary-color;
        }
      }
    }
  }
</style>