Step组件

Thu, Jan 2, 2020

// Step.vue

<template>
  <ul class="step">
    <li class="step-item" data-text="提交信息">
      <div class="step-item__circle">

      </div>
      <p class="step-item__text">
        提交信息
      </p>
    </li>
    <li class="step-item step-item--current" data-text="认证中">
       <div class="step-item__circle">

      </div>
      <p class="step-item__text">
        认证中
      </p>
    </li>
    <li class="step-item" data-text="认证成功">
       <div class="step-item__circle">

      </div>
      <p class="step-item__text">
        认证成功
      </p>
    </li>
  </ul>
</template>

<script>
export default {};
</script>

<style scoped lang="scss">
.step {
  display: flex;
  counter-increment: step 0;
  >>> .step-item {
    counter-increment: step;
    flex: 1;
    .step-item__circle:before {
      content: counter(step);
    }
  }
}

.step-item {
  position: relative;
  display: flex;
  color: #253549;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  &:not(:last-child):after {
    position: absolute;
    top: 19px;
    right: 0;
    left: calc(50% + 19px);
    height: 1px;
    background: rgba(231,231,231,1);
    content: '';
    transform: translateY(-50%);
  }
  &:not(:first-child):before {
    position: absolute;
    top: 19px;
    right: calc(50% + 19px);
    left: 0;
    height: 1px;
    background: rgba(231,231,231,1);
    content: '';
    transform: translateY(-50%);
  }
  
   .step-item__circle {
    display: flex;
    width: 32px;
    height: 32px;
    border: 3px solid #a3e4ea;
    border-radius: 50%;
    font-size: 14px;
    background: #0eb8c8;
    align-items: center;
    justify-content: center;
  }
  &.step-item--current {
     .step-item__circle {
      border: 3px solid #a3e4ea;
      color: #fff;
      background: #6ad3dd;
    }

    & ~ .step-item  .step-item__circle {
      border: 3px solid #E0E0E0;
      background: #acb3b9;
    }
    & ~ .step-item .step-item__text {
      opacity: .8;
    }
     
  }

  .step-item__text {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
    content: attr(data-text);
  }
}
</style>