效果图如下：

直接上代码：

<template><div class=""><div class="steps"><div class="step" v-for="(step, index) in steps" :key="index"><divclass="icon"@click="currentStep = index":class="{ icon: true, 'active-icon': currentStep == index }"><div class="cir">{{ index + 1 }}</div><div class="title">{{ step }}</div></div><div v-if="index < steps.length - 1" class="line"></div></div></div></div>
</template><script>
export default {data() {return {steps: ["投标函格式", "评标原则", "评标方法", "招标文件"],currentStep: 0,};},created() {},mounted() {},methods: {},
};
</script><style lang='scss' scoped>
.steps {width: 100%;display: flex;.step {flex: 1;display: flex;line-height: 25px;position: relative;.icon {position: relative;z-index: 1;background: #fff;padding: 0 10px;display: flex;cursor: pointer;color: #00000073;.cir {width: 25px;height: 25px;text-align: center;line-height: 25px;box-sizing: border-box;border-radius: 50%;border: 1px solid #00000073;}.title {margin-left: 10px;width: auto;}&:hover {color: #1989fa;.cir {color: #1989fa;border: 1px solid #1989fa;}}}.active-icon {color: #1989fa;.cir {color: #fff;border: 1px solid #1989fa;background-color: #1989fa;}&:hover {.cir {color: #fff;}}}.line {margin-left: 5px;background-color: #e8e8e8;flex: 1;position: absolute;top: 12px;left: 0;right: 0;height: 1px;}}
}
.steps .step:last-child {flex-basis: auto !important;flex-shrink: 0;flex-grow: 0;
}
</style>