<template>
    <div class="el-steps-wrapper">
        <ul>
            <li v-for="(item,index) in stepsListTitle"
                class="item-list"
                :class="{active:activeIndex==index}"
            >
                <span v-if="isShowNumber">{{index+1}}.</span>
                {{item.title}}
            </li>
        </ul>
    </div>

</template>

<script>
export default {
    name: "index",
    props:{
        activeIndex:{
            type: Number,
            default:0
        },
        stepsListTitle:{
            type: Array,
            default: []
        },
        isShowNumber:{
            type: Boolean,
            default:false
        },
    },
    methods: {
    }

}
</script>
<style lang="less" scoped>
.el-steps-wrapper{
    ul {
        display: flex;
        justify-content: start;
        text-align: center;
        .item-list{
            height: 45px;
            line-height: 45px;
            min-width: 215px;
            background: url("./step2.svg") no-repeat center 100%/100%;
        }
        .active{
            color: #ffffff;
            background-image: url("./step3.svg");
            background-size: cover;
        }
        .item-list:nth-child(1){
            background-image: url("./step0.svg");
            background-size: cover;
        }
        .item-list:nth-child(1).active{
            background-image: url("./step1.svg");
            background-size: cover;
        }
    }
}
</style>
