<script setup>
const tabIndex = ref(0)
const tabList = [{ name: '高端1v1' }, { name: '企业内推' }, { name: '企业直签' }]

const ysList = [
  {
    name: '十年品牌  值得信任',
    desc: '不夸大辅导结果，严谨细致评估学生硬件，软件，性格特点，近期状态及就业需求，量身定制就业方案。',
  },
  {
    name: '实力过硬  不满意随时退款',
    desc: '学生的求职结果与口碑，是我们最关心的指标，10年坚守口碑，尽最大努力给学生最好结果，不满意随时退款。',
  },
  {
    name: '强大内推资源  求职效率高',
    desc: '求职专家1对1辅导+名企内推资源，大大提高求职成功率，拓宽就业机会，选择更适合学生的岗位。',
  },
]

const faList = [
  {
    name: '职业测评：全面了解自己',
    desc: '依托专业测评工具，从性格特点、能力优势、职业倾向等多维度进行科学分析，帮助求职者客观认知自我，明确职业方向；',
  },
  {
    name: '职业规划：确定求职策略',
    desc: '结合测评结果与行业趋势，针对性解决 “发展方向模糊”、“岗位选择困惑” 等问题，制定清晰的短期目标与长期职业路径，确定求职策略；',
  },
  {
    name: '简历设计：获得更多面试机会',
    desc: '聚焦 “如何获得更多面试机会”，精准提炼个人核心竞争力，突出与岗位高度契合的特长专长，通过结构化呈现与亮点突出，让简历在筛选中脱颖而出；',
  },
  {
    name: '网申辅导：获得更多面试机会',
    desc: '手把手给经验给技巧，网申投递不走弯路，效率更高；',
  },
  {
    name: '面试辅导：拿到offer',
    desc: '覆盖面试全周期，面试前梳理行业知识与岗位认知、模拟高频问题应答，面试中指导沟通技巧与临场应变，面试后复盘总结相关问题，全方位提升通过率；',
  },
  {
    name: '岗位内推：拿到offer',
    desc: '跳过常规投递流程，将简历直达匹配岗位 HR，实现快速对接、精准匹配，大幅节省时间成本；',
  },
  {
    name: 'offer分析：决定去还是不去',
    desc: '从城市发展潜力、行业前景、公司规模与文化、岗位权责、晋升空间到薪资结构与福利体系，多维度综合评估，助力选择最适合的 offer；',
  },
  {
    name: '试用期辅导：安全扶上马',
    desc: '提供试用期生存指南，针对试用期核心考核点，提供工作方法优化、职场人际关系处理等指导，助力快速适应岗位，平稳通过试用期考核。',
  },
]
</script>

<template>
  <div class="job-page">
    <div class="banner">
      <div class="banner-inner">
        <h1>专注大学生名企求职</h1>
        <h2>一站式服务</h2>
        <span class="line"></span>
        <p>强大内推资源助力高效斩获 offer！</p>
      </div>
    </div>
    <section class="section">
      <h2 class="section-title">就业中心介绍</h2>
      <div class="section-inner">
        <p class="job-desc">
          <strong
            >清控紫荆大学生就业辅导中心，以结果为导向，打通学生、企业、就业辅导老师三方，帮学生找到好单位，帮单位找到好学生！</strong
          >提供求职辅导、名企内推、留学等一站式服务。帮助中国千万大学生提升软实力与硬实力，找到适合自己的好工作！
        </p>
        <p class="job-desc">
          <strong>清控紫荆大学生就业辅导中心</strong
          >汇聚百余位资深行业专家，针对央国企、互联网大厂、金融机构等名企招聘特点，从职业规划、简历设计、笔试辅导、面试技巧、入职辅导等，提供全流程1v1求职辅导，为学生定制求职方案，让学生少走弯路，直达目标岗位。
        </p>
      </div>
    </section>
    <section class="section">
      <h2 class="section-title">就业指导服务</h2>
      <div class="job-service">
        <ul class="job-service-list">
          <li
            v-for="(item, index) in tabList"
            :key="item.name"
            :class="{ 'is-active': tabIndex === index }"
            @mouseenter="tabIndex = index">
            {{ item.name }}
          </li>
        </ul>
        <div class="job-service-bg">
          <div class="job-service-content">
            <template v-for="(item, index) in tabList" :key="item.name">
              <div class="job-service-item" v-show="tabIndex === index">
                <template v-if="index === 0">
                  <h3>高端1v1全流程求职培训</h3>
                  <h4>1名老师手把手负责到底</h4>
                  <p class="t1">适合人群：应届与未毕业大学生<br />优势：花小钱办大事、早规划早上岸</p>
                  <p class="t2">
                    1、系统性提升求职能力<br />2、认知提升+刻意练习<br />3、全流程、1v1、手把手、180天陪伴辅导
                  </p>
                </template>
                <template v-if="index === 1">
                  <h3>企业内推</h3>
                  <h4>无需网申，直接面试</h4>
                  <p class="t1">适合人群：应届与未毕业大学生 <br />优势：量身定制，直接面试，成功率高</p>
                  <p class="t2">
                    1、无需网申，直接面试<br />
                    2、精准匹配，量身定制
                  </p>
                </template>
                <template v-if="index === 2">
                  <h3>企业直签</h3>
                  <h4>直接入职目标名企</h4>
                  <p class="t1">适合人群：毕业1-5年大学生或者大龄职场人 <br />优势：就业周期短</p>
                  <p class="t2">
                    1、强大企业资源，匹配最适合单位<br />
                    2、先定金后全款，无风险更放心
                  </p>
                </template>
                <div class="btn">立即咨询</div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </section>
    <section class="section">
      <h2 class="section-title">就业辅导优势</h2>
      <div class="section-inner">
        <div class="ys-list">
          <div class="item" v-for="item in ysList" :key="item.name">
            <div class="item-name">{{ item.name }}</div>
            <div class="item-desc">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </section>
    <section class="section">
      <h2 class="section-title">就业解决方案</h2>
      <div class="section-inner">
        <h2 class="fa-title">1v1求职培训</h2>
        <p class="fa-desc">
          <strong>8 步就业辅导体系</strong>覆盖求职全流程，精准解决核心问题，为求职者提供科学、高效的就业支持
        </p>
        <div class="fa-list">
          <div
            :class="{ item: true, 'item-left': index % 2 === 0, 'item-right': index % 2 === 1 }"
            v-for="(item, index) in faList"
            :key="item.name">
            <div class="item-number">0{{ index + 1 }}</div>
            <div class="item-content">
              <h3 class="item-name">{{ item.name }}</h3>
              <p class="item-desc">{{ item.desc }}</p>
            </div>
            <div class="item-icon">
              <JobIcons :name="index + 1" />
            </div>
          </div>
        </div>
      </div>
    </section>
    <section style="padding-bottom: 90px">
      <div class="section-inner">
        <AppContact :type="1" />
      </div>
    </section>
  </div>
</template>

<style lang="scss">
.job-page {
  background-color: #fff;
  .section {
    &-title {
      margin: 60px 0;
      font-weight: bold;
      font-size: 30px;
      color: #333;
      line-height: 1;
      text-align: center;
    }
    &-inner {
      max-width: 1200px;
      margin: 0 auto;
    }
  }
  .banner {
    height: 650px;
    background: url('~/assets/images/job/job_banner.png') no-repeat center center;
    background-size: cover;
    &-inner {
      max-width: 1200px;
      height: 100%;
      margin: 0 auto;

      display: flex;
      flex-direction: column;
      justify-content: center;
      h1 {
        font-size: 60px;
        font-weight: bold;
        line-height: 1;
      }
      h2 {
        margin-top: 20px;
        font-size: 48px;
        font-weight: bold;
        line-height: 1;
        color: var(--main-color);
      }
      .line {
        margin: 46px 0;
        width: 60px;
        height: 6px;
        background: #333;
      }
      p {
        font-size: 24px;
      }
    }
  }
  .job-desc {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 30px;
  }
  .job-service {
    &-bg {
      height: 560px;
      background: #f0f2f5 url('~/assets/images/job/job_service_bg.png') no-repeat center bottom;
      background-size: cover;
    }
    &-list {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f0f2f5;
      gap: 120px;
      height: 80px;
      li {
        width: 180px;
        height: 60px;
        font-size: 20px;
        line-height: 60px;
        text-align: center;
        background-color: #fff;
        border-radius: 12px;
        &.is-active {
          color: #fff;
          font-weight: bold;
          background-color: var(--main-color);
        }
      }
    }
    &-content {
      width: 1200px;
      margin: 0 auto;
      height: 100%;
    }
    &-item {
      padding-top: 100px;
      h3 {
        font-size: 30px;
        font-weight: bold;
        line-height: 42px;
        color: var(--main-color);
      }
      h4 {
        font-size: 24px;
        line-height: 42px;
      }
      .t1 {
        margin-top: 40px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 20px;
        color: #333333;
        line-height: 30px;
      }
      .t2 {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 30px;
      }
      .btn {
        margin-top: 80px;
        width: 200px;
        height: 42px;
        background: #aa1941;
        border-radius: 33px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 18px;
        color: #fff;
        line-height: 42px;
        text-align: center;
      }
    }
  }
  .ys-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
    .item {
      background: #f0f2f5;
      border-radius: 12px;
      overflow: hidden;
      &-name {
        line-height: 120px;
        font-size: 22px;
        color: #fff;
        background-color: var(--main-color);
        text-align: center;
      }
      &-desc {
        padding: 40px 45px;
        font-size: 16px;
        line-height: 28px;
      }
    }
  }
  .fa-title {
    font-weight: bold;
    font-size: 22px;
    color: #333333;
    line-height: 46px;
  }
  .fa-desc {
    font-weight: 400;
    font-size: 18px;
    color: #333333;
    line-height: 30px;
  }
  .fa-list {
    padding: 50px 0 90px;
    display: flex;
    flex-direction: column;
    .item {
      display: flex;
      align-items: center;
      position: relative;
      width: 550px;
      height: 140px;
      background-color: #efecea;
      &::after {
        position: absolute;
        content: '';
        width: 1px;
        height: 100%;
        background: #d5d5d5;
      }
      &-left {
        border-radius: 12px 12px 88px 12px;
        .item-icon {
          right: -77px;
        }
        &::after {
          right: -50px;
        }
      }
      &-right {
        margin-top: -45px;
        border-radius: 12px 12px 12px 88px;
        align-self: flex-end;
        .item-icon {
          left: -77px;
        }
        &::after {
          left: -51px;
        }
      }
      &-number {
        padding-left: 20px;
        font-size: 70px;
        font-weight: bold;
        color: #d5d5d5;
      }
      &-content {
        padding: 0 20px;
      }
      &-name {
        font-size: 18px;
        color: #333333;
        line-height: 32px;
        font-weight: bold;
      }
      &-desc {
        margin-top: 10px;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 26px;
      }
      &-icon {
        position: absolute;
        top: 0;
        z-index: 1;
      }

      &:nth-child(4n + 1),
      &:nth-child(4n + 2) {
        background-color: #efecea;
      }

      &:nth-child(4n + 3),
      &:nth-child(4n + 4) {
        background-color: #dee2ea;
      }

      &:last-child {
        &::after {
          display: none;
        }
      }
    }
  }
}
</style>
