proginn-frontend/pages/frontend/skill_cert/start_interview.vue

<template>
  <div class="container">
    <skillCertHeader title="技术等级认证"></skillCertHeader>
    <flow :dataList="flowList"></flow>
    <img class="icon" src="@/assets/img/skill_cert/icon_coffee.png" alt=""/>
    <p class="status">已对接面试官，注意查看通知</p>
    <p class="tips">如已面试，面试结果将在1-3个工作日通知给您</p>
  </div>
</template>

<script>
  import flow from "@/components/flow/flow";
  import skillCertHeader from "@/components/skill_cert_header/skill_cert_header";

  export default {
    name: "start_interview",
    components: {
      flow, skillCertHeader
    },
    data() {
      return {
        flowList: [
          {
            active: true,
            label: '基础信息'
          }, {
            active: true,
            label: '完善简历'
          }, {
            active: true,
            label: '对接面试官'
          }, {
            active: true,
            label: '开始面试'
          }, {
            active: false,
            label: '结束认证'
          },
        ],
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
    margin: 10px auto;
    background: #ffffff;
    border-radius: 10px;
    padding: 0 85px;
    @media(max-width: 768px) {
      padding: 0 15px;
    }
    box-sizing: border-box;

    .icon {
      width: 86px;
      height: 78px;
      margin-top: 54px;
    }

    .status{
      margin-top: 36px;
      margin-bottom: 7px;
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Semibold,sans-serif;
      font-weight: 600;
      text-align: right;
      color: #222222;
      line-height: 25px;
    }

    .tips{
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular,sans-serif;
      font-weight: 400;
      text-align: left;
      color: #999999;
      line-height: 20px;
    }
  }
</style>