proginn-frontend/components/interview/interview.vue

<template>
  <section class="interview">
    <header class="banner">
      <img
        src="~@/assets/img/interview/title.png"
        srcset="~@/assets/img/interview/title@2x.png"
        alt="title"
        class="title"
      />
      <h1>CTO级别面试官帮您面试程序员</h1>
      <a class="go" href="#contact">委托面试</a>
    </header>
    <section class="wrapper-solution">
      <h2 class="title">可信赖的技术招聘面试委托方案</h2>
      <p class="sub-title">当企业需要招聘技术员工、但又缺乏评估能力时，可委托给平台提供专业的技术面试，以确保人才质量</p>
      <ul class="solutions">
        <li class="solution">
          <img
            src="~@/assets/img/interview/t1.png"
            srcset="~@/assets/img/interview/t1@2x.png"
            alt="solution"
          />
          <div class="des">
            <h4>CTO级别面试官</h4>
            <p>根据面试岗位和候选人情况，快速匹配行业经验5-10年、面试经历丰富的资深技术大牛。</p>
          </div>
        </li>
        <li class="solution">
          <img
            src="~@/assets/img/interview/t2.png"
            srcset="~@/assets/img/interview/t2@2x.png"
            alt="solution"
          />
          <div class="des">
            <h4>全面的评估维度</h4>
            <p>将结合岗位要求，从技术能力、过往项目经验、沟通协作能力等多个维度，全面、深入地考察面试候选人能力。</p>
          </div>
        </li>
        <li class="solution">
          <img
            src="~@/assets/img/interview/t3.png"
            srcset="~@/assets/img/interview/t3@2x.png"
            alt="solution"
          />
          <div class="des">
            <h4>真实的技术信用</h4>
            <p>对于平台签约的开发者，将调取沉淀的技术信用值辅助评估，包括以往项目表现、能力水平、合作评价等真实数据。</p>
          </div>
        </li>
        <li class="solution">
          <img
            src="~@/assets/img/interview/t4.png"
            srcset="~@/assets/img/interview/t4@2x.png"
            alt="solution"
          />
          <div class="des">
            <h4>直观的评估报告</h4>
            <p>面试结束后，平台将提供细致直观的评估报告，过往表现、能力评级、岗位匹配度一目了然。</p>
          </div>
        </li>
      </ul>
    </section>
    <section class="alert">
      <h4>一个不靠谱的员工带来的损失将是薪资成本的10倍</h4>
      <h4>专业的技术面试方案，让您用人更放心</h4>
    </section>
    <section class="wrapper-step">
      <h3 class="title">服务流程</h3>
      <p class="sub-title">极致简化的服务流程体验，四步快速完成面试官对接及报告输出</p>
      <ul class="steps">
        <li class="step">
          <img
            src="~@/assets/img/interview/step1.png"
            srcset="~@/assets/img/interview/step1@2x.png"
            alt="step"
          />
          <h6>1.发布</h6>
          <p>企业发布面试需求</p>
        </li>
        <li class="step">
          <img
            src="~@/assets/img/interview/step2.png"
            srcset="~@/assets/img/interview/step2@2x.png"
            alt="step"
          />
          <h6>2.对接</h6>
          <p>平台审核、对接面试官</p>
        </li>
        <li class="step">
          <img
            src="~@/assets/img/interview/step3.png"
            srcset="~@/assets/img/interview/step3@2x.png"
            alt="step"
          />
          <h6>3.候选</h6>
          <p>面试官面试候选人</p>
        </li>
        <li class="step">
          <img
            src="~@/assets/img/interview/step4.png"
            srcset="~@/assets/img/interview/step4@2x.png"
            alt="step"
          />
          <h6>4.报告</h6>
          <p>提供面试评估报告</p>
        </li>
      </ul>
    </section>
    <section id="contact" class="contact">
      <h3 class="title">服务咨询</h3>
      <img
        src="~@/assets/img/interview/wechat.png"
        srcset="~@/assets/img/interview/wechat@2x.png"
        alt="step"
      />
      <p class="helper">扫码联系客户经理</p>
      <h6>咨询电话</h6>
      <div class="phone">
        <i class="el-icon-phone"></i>0571-28120931 转5
      </div>
    </section>
  </section>
</template>

<script>
export default {
  props: [],
  data() {
    return {};
  },
  components: {},
  computed: {},
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss">
.interview {
  position: relative;
  margin: -85px 0 0;
  width: 100%;
  .title {
    position: relative;
    font-size: 36px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    color: rgba(50, 50, 50, 1);
    line-height: 50px;
    z-index: 10;
    &::after {
      content: "";
      position: absolute;
      bottom: -16px;
      left: 50%;
      transform: translateX(-50%);
      width: 44px;
      height: 3px;
      background: rgba(48, 142, 255, 1);
    }
  }
  .sub-title {
    margin-top: 35px;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 20px;
    z-index: 10;
  }
  .banner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 82px;
    width: 100%;
    min-height: 39vw;
    background: url("~@/assets/img/interview/banner1.png") 0 0 no-repeat;
    background-size: cover;
    z-index: 0;
    .title {
      margin-top: 60px;
    }
    h1 {
      margin: 2vw auto 3.9vw;
      font-size: 54px;
      font-family: PingFangSC-Thin;
      font-weight: 100;
      color: rgba(255, 255, 255, 1);
      line-height: 72px;
      letter-spacing: 3px;
      opacity: 0.8;
    }
    .go {
      margin-bottom: 60px;
      width: 220px;
      height: 54px;
      border-radius: 3px;
      border: 1px solid rgba(255, 255, 255, 1);
      text-align: center;
      font-size: 18px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 54px;
      cursor: pointer;
      z-index: 10;
    }
  }
  .wrapper-solution {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 70px;
    background: #fff;
    color: #333;
    .solutions {
      margin-top: 70px;
      width: 995px;
      .solution {
        display: flex;
        justify-content: space-between;
        margin-bottom: 60px;
        img {
          width: 480px;
          height: 300px;
        }
        .des {
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 480px;
          h4 {
            font-size: 34px;
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            color: rgba(34, 34, 34, 1);
            line-height: 48px;
          }
          p {
            margin-top: 16px;
            font-size: 17px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 24px;
          }
        }
      }
      .solution:nth-of-type(2n) {
        flex-direction: row-reverse;
      }
    }
  }
  .alert {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 324px;
    background: url("~@/assets/img/interview/lines.png") 100% 0 no-repeat;
    background-size: cover;
    h4 {
      font-size: 36px;
      font-family: PingFangSC-Light;
      font-weight: 300;
      color: rgba(255, 255, 255, 1);
      line-height: 64px;
    }
  }
  .wrapper-step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 70px 0 104px;
    .steps {
      display: flex;
      justify-content: space-between;
      margin-top: 60px;
      width: 835px;
      .step {
        display: flex;
        flex-direction: column;
        align-items: center;
        h6 {
          margin-top: 15px;
          margin-bottom: 6px;
          font-size: 20px;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          color: rgba(24, 26, 32, 1);
          line-height: 28px;
        }
        img {
          width: 122px;
          height: 122px;
        }
      }
    }
  }
  .contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 671px;
    background: url("~@/assets/img/interview/banner.png") 0 0 no-repeat;
    background-size: cover;
    color: #fff;
    h3 {
      margin: 70px auto 100px;
      color: #fff;
    }
    img {
      width: 226px;
      height: 226px;
    }
    p {
      margin-top: 13px;
      font-size: 14px;
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      line-height: 20px;
      letter-spacing: 5px;
    }
    h6 {
      margin-top: 60px;
      font-size: 19px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 26px;
      letter-spacing: 1px;
    }
    .phone {
      margin-top: 10px;
      font-size: 26px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 37px;
      letter-spacing: 5px;
    }
  }
}
@media screen and (max-width: 980px) {
  .interview {
    overflow: hidden;
    min-height: 314px;
    .title {
      font-size: 22px;
      line-height: 30px;
    }
    .sub-title {
      margin: 31px 10px 0;
      font-size: 12px;
      line-height: 17px;
    }
    .banner {
      .title {
        width: 125px;
        height: 69px;
      }
      h1 {
        margin-top: 16px;
        padding: 0 30px;
        opacity: 0.8;
        font-size: 30px;
        line-height: 36px;
        text-align: center;
      }
      .go {
        margin-top: 23px;
        width: 173px;
        height: 38px;
        font-size: 13px;
        line-height: 37px;
      }
    }
    .wrapper-solution {
      padding: 26px 13px;
      .solutions {
        margin-top: 30px;
        width: 100%;
        .solution {
          flex-direction: column;
          margin-bottom: 30px;
          img {
            width: 100%;
            height: 190px;
          }
          .des {
            margin-top: 16px;
            width: 100%;
            h4 {
              text-align: center;
              font-size: 20px;
              line-height: 28px;
            }
            p {
              text-align: center;
              width: 100%;
            }
          }
        }
        .solution:nth-of-type(2n) {
          flex-direction: column;
        }
      }
    }
    .alert {
      min-height: 220px;
      h4 {
        padding: 0 25px;
        font-size: 21px;
        line-height: 32px;
        text-align: center;
      }
      h4:nth-of-type(2) {
        margin-top: 30px;
        font-size: 20px;
        padding: 0 5px;
      }
    }
    .wrapper-step {
      padding: 30px 0 40px;
      .steps {
        width: 100%;
        margin-top: 0;
        padding: 30px 40px;
        flex-wrap: wrap;
        .step {
          margin-bottom: 30px;
          h6 {
            margin: 11px 0 4px;
            font-size: 16px;
          }
          p {
            font-size: 13px;
            line-height: 21px;
          }
        }
      }
    }
    .contact {
      min-height: 470px;
      h3 {
        margin: 40px auto 60px;
        font-size: 24px;
        line-height: 33px;
      }
      img {
        width: 180px;
        height: 180px;
      }
      p {
        font-size: 14px;
        letter-spacing: 3px;
        line-height: 20px;
      }
      h6 {
        margin-top: 37px;
        font-size: 14px;
      }
      .phone {
        font-size: 19px;
        line-height: 26px;
        letter-spacing: 3px;
        margin-bottom: 45px;
      }
    }
  }
}
</style>