<template>
  <div class="steps flex">
    <!-- 1 -->
    <div class="step flex">
      <div class="cricle">
        <span class="num">1</span>
      </div>
      <div class="step_title">确认报名须知</div>
      <div>
        <img src="../assets/img/signUp/left.png" alt="" />
      </div>
    </div>
    <!-- 2 -->
    <div class="step flex">
      <div class="cricle cc">
        <span class="num">2</span>
      </div>
      <div class="step_title">填写邀请码</div>
      <img src="../assets/img/signUp/left.png" alt="" />
    </div>
    <!-- 3 -->
    <div class="step flex">
      <div class="cricle cc">
        <span class="num">3</span>
      </div>
      <div class="step_title">填写报名资料</div>
      <img src="../assets/img/signUp/left.png" alt="" />
    </div>
    <!-- 4 -->
    <div class="step flex">
      <div class="cricle cc">
        <span class="num">4</span>
      </div>
      <div class="step_title">报名资料审核</div>
      <img src="../assets/img/signUp/left.png" alt="" />
    </div>
    <!-- 5 -->
    <div class="step flex">
      <div class="cricle cc">
        <span class="num">5</span>
      </div>
      <div class="step_title">缴费</div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {};
</script>

<style scoped lang="scss">
.flex {
  display: flex;
}
.steps {
  .step {
  }
  .num {
    color: #ffff;
    position: absolute;
    z-index: 999;
    top: 7px;
    left: 10px;
  }
  .cricle {
    position: relative;
    width: 57px;
    height: 29px;
    background: #60194a;
    border-radius: 41px;
    margin-right: 10px;
  }
  img {
    margin: 15px;
  }
  .step_title {
    font-size: 14px;
    width: 100%;
    height: 20px;
    font-weight: 600;
    color: #60194a;
    line-height: 34px;
  }
}
</style>