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

<!-- @format -->

<script lang="ts" setup>
const step = ref(0)
const items = [
  {
    key: 'one',
    title: 'Submit a wish order',
    description: 'Submit a wish order',
  },
  {
    key: 'two',
    title: 'Settle essential terms',
    description: 'Our customer service staff will approach to you to settle the the required terms with you , and will then prepare PI',
  },
  {
    key: 'three',
    title: 'Confirm PI',
    description: 'After you confirm the PI sent to you, a deal is made',
  },
  {
    key: 'four',
    title: 'Order made',
    description: 'We will make the order, and you may check it in my orders',
  },
]
</script>

<template>
  <div class="custom-order-steps" style="height: 400px; max-width: 600px">
    <el-steps :active="step" direction="vertical" align-center finish-status="success">
      <el-step v-for="item in items" :key="item.key" :title="item.title" :description="item.description" />
    </el-steps>
  </div>
</template>

<style lang="less" scoped>
.custom-order-steps {
  ::v-deep(.el-step) {
    .el-step__head {
        width: 32px;
      .el-step__line {
        top: 45% !important;
        left: 50% !important;
        bottom: 15% !important;
        transform: translateX(-50%);
        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{
        padding-left: 40px;
        .el-step__title{
            font-weight: 600 !important;
            margin-bottom: 10px;
            padding-bottom: unset;
            &.is-process{
                // font-weight: normal!important;
            }
            &.is-wait{
                // font-weight: normal!important;
                color: #5B463E!important;
            }
            &.is-success{
              color: #5B463E!important;
            }
        }
        .el-step__description{
            font-size: 14px;
            color: #333333;
        }
    }
  }
}
</style>