fashion-ssr-vue3/components/business/register/step.vue

<!-- @format -->

<script lang="ts" setup>
import { useRegister } from '~/pages/register/useRegister'

const { currentStep } = useRegister()
const items = [
  {
    key: 'Company',
    title: 'Company',
  },
  {
    key: 'Personal',
    title: 'Personal',
  },
  {
    key: 'Email',
    title: 'Email',
  },
]
</script>

<template>
  <div class="custom-steps">
    <el-steps :active="currentStep" align-center finish-status="success">
      <el-step v-for="item in items" :key="item.key" :title="item.title" />
    </el-steps>
  </div>
</template>

<style lang="less" scoped>
.custom-steps {
  ::v-deep(.el-step) {
    .el-step__head {
      .el-step__line {
        left: 65% !important;
        right: -35% !important;
        background-color: #CCCCCC !important;
        .el-step__line-inner{
          border: unset!important;
        }
      }
      &.is-process{
      .el-step__icon { width: 32px;
        height: 32px;
        background-color: #cc9879 !important;
        border: unset !important;
        .el-step__icon-inner {
          color: #fff !important;
        }
      }
    }
    &.is-wait{
        .el-step__icon { width: 32px;
          height: 32px;
        border: 1px solid #5B463E  !important;
        .el-step__icon-inner {
          color: #5B463E  !important;
        }
      }
    }
    &.is-success{
      .el-step__icon { width: 32px;
          height: 32px;
        background-color: #E9E9E9 !important;
        border: 1px solid #E9E9E9  !important;
        .el-step__icon-inner {
          color: #666666  !important;
        }
      }
    }
}
    .el-step__main{
        .el-step__title{
            &.is-process{
                font-weight: normal!important;
            }
            &.is-wait{
                font-weight: normal!important;
                color: #5B463E!important;
            }
            &.is-success{
              color: #5B463E!important;
            }
        }
    }
  }
}
</style>