el-setup- 修改样式(vue3)

一 第一步

<template>
  <el-steps :active="activeStep" align-center>
    <el-step
      v-for="item in stepData"
      :key="item.value"
      :class="{ currentStep: activeStep === item.value }"
    >
      <template #icon>
        <div class="icon-item">
          <span class="icon-item_name">{{ item.label }}</span>
          <div class="dot"></div>
        </div>
      </template>
    </el-step>
  </el-steps>
</template>

<script setup lang="ts">
const stepData = ref([
  {
    label: "电子签约",
    value: 1
  },
  {
    label: "代客下单",
    value: 2
  },
  {
    label: "客户下单",
    value: 3
  }
])

const activeStep = ref(2)
</script>

<style lang="scss" scoped></style>

 第二步 样式

2.1

.el-steps {
  margin: 10px 0px;
  .icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .icon-item_name {
      color: #484848;
    }
    .dot {
      width: 18px;
      // height: 20px;
      padding-top: 18px;
      border-radius: 50%;
      background-color: #aaaaaa;
    }
  }
}

2.2

:deep(.el-step.is-horizontal) {
  .el-step__line {
    top: 30px;
    background-color: transparent;
    border-top: 1px dashed #aaaaaa;
    border-bottom: 1px dashed #aaaaaa;
  }
}

2.3

:deep(.el-step__head.is-finish) {
  .dot {
    background-color: #70b604;
  }
  .el-step__line {
    background-color: transparent;
    border-top: 1px dashed #99f21c;
    border-bottom: 1px dashed #99f21c;
    .el-step__line-inner {
      border-top: 2px dashed transparent;
      border-bottom: 2px dashed transparent;
    }
  }
}

2.4

.el-step.currentStep {
  :deep(.is-finish) {
    .el-step__line {
      background-color: transparent;
      border-top: 1px dashed #aaaaaa;
      border-bottom: 1px dashed #aaaaaa;
    }
    .dot {
      background-color: #bfbf00;
    }
  }
}

三总的代码

<template>
  <el-steps :active="activeStep" align-center>
    <el-step
      v-for="item in stepData"
      :key="item.value"
      :class="{ currentStep: activeStep === item.value }"
    >
      <template #icon>
        <div class="icon-item">
          <span class="icon-item_name">{{ item.label }}</span>
          <div class="dot"></div>
        </div>
      </template>
    </el-step>
  </el-steps>
</template>

<script setup lang="ts">
const stepData = ref([
  {
    label: "电子签约",
    value: 1
  },
  {
    label: "代客下单",
    value: 2
  },
  {
    label: "客户下单",
    value: 3
  }
])

const activeStep = ref(2)
</script>

<style lang="scss" scoped>
.el-steps {
  margin: 10px 0px;
  .icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .icon-item_name {
      color: #484848;
    }
    .dot {
      width: 18px;
      // height: 20px;
      padding-top: 18px;
      border-radius: 50%;
      background-color: #aaaaaa;
    }
  }
}
:deep(.el-step.is-horizontal) {
  .el-step__line {
    top: 30px;
    background-color: transparent;
    border-top: 1px dashed #aaaaaa;
    border-bottom: 1px dashed #aaaaaa;
  }
}

:deep(.el-step__head.is-finish) {
  .dot {
    background-color: #70b604;
  }
  .el-step__line {
    background-color: transparent;
    border-top: 1px dashed #99f21c;
    border-bottom: 1px dashed #99f21c;
    .el-step__line-inner {
      border-top: 2px dashed transparent;
      border-bottom: 2px dashed transparent;
    }
  }
}
.el-step.currentStep {
  :deep(.is-finish) {
    .el-step__line {
      background-color: transparent;
      border-top: 1px dashed #aaaaaa;
      border-bottom: 1px dashed #aaaaaa;
    }
    .dot {
      background-color: #bfbf00;
    }
  }
}
</style>